Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 02 A. Al-Tamimi 1
Lecture Overview HTML Page Structure Basic Document Structure Attribute Groups Basic Text Formatting Presentational Elements Lists Comments <font> element Block and inline elements <div> and <span> elements Lecture 02 A. Al-Tamimi 2
The Basic Structure of HTML All elements are enclosed inside <html> element All information about the document and resources needed to be loaded before the actual contents are present inside the <head> element The actual contents of the document are inside the <body> element Lecture 02 A. Al-Tamimi 3
The <html> Element The <html> element can carry the following attributes: id, dir, lang, xml:lang Will be discussed later (Attribute Groups) Sometimes you will come across the following: <html xmlns= http://www.w3.org/1999/xhtml ></html> xmlns is the name space identifier that indicates the version of the XHTML used Lecture 02 A. Al-Tamimi 4
The <head> Element The <head> element should contain <title> element at least. It may also contain any number of the following elements: <object>, include objects like images, JavaScript objects, Flash animation, MP3 files etc <link>, links to external files, such as style sheets or JavaScript files <style>, to include CSS rules inside the document <script>, for including script in the document <meta>, which includes information about the document such as keywords and a description, which are helpful for identifying your site for search engines Lecture 02 A. Al-Tamimi 5
The <title> Element When writing your web pages, choose the title of the page wisely. Do not just type: web page 1 etc The default name for a bookmark in browser is the title of the page Search engines uses the contents of the title to index your page, so better title gives better viewing share Can you readers tell what they will find on the page by just reading the title? Lecture 02 A. Al-Tamimi 6
The <body> Element The <body> element contains the body contents It also may carry all the attributes from the attribute groups (similar to <title> and <head>) There are several attributes that are specific to a certain browser Be careful when designing your HTML website to make sure that it works well across different web browsers and their different versions Lecture 02 A. Al-Tamimi 7
Attribute Groups There are three groups of attributes that many of the XHTML elements can carry Core Attributes: class, id, and title attributes Internationalization Attributes: dir, lang, and xml:lang attributes UI Events: onclick, ondoubleclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup Lecture 02 A. Al-Tamimi 8
The id Attribute The id attribute is used to uniquely identify an element within a page or a style sheet Name attribute used before, but became obsolete It must begin with a letter (A-Z or a-z) No two attributes may have the same value within that XHTML document Lecture 02 A. Al-Tamimi 9
The title Attribute The title gives a suggested title for the element It is often displayed as a tooltip or while the element is loading Lecture 02 A. Al-Tamimi 10
The class Attribute Used to associate an element with a style sheet and specifies the class of the element The unique class name allows all elements that associated with this certain style class to have the same style One element can be associated to multiple classes Lecture 02 A. Al-Tamimi 11
The style Attribute The style attribute allows you to specify CSS rules within the element It is not recommended to use this attribute as it is considered a hack instead of a valid solution Instead use class attribute when you want to grant a specific element special CSS rules Lecture 02 A. Al-Tamimi 12
In Class Assignment 1- Change your html file and use style attribute instead of using CSS classes Lecture 02 A. Al-Tamimi 13
Internationalization We will be discussing two internationalization attributes: The dir attribute The lang attribute Lecture 02 A. Al-Tamimi 14
The dir Attribute The dir attribute allows you to indicate to the browser the direction in which the text should flow Latin languages flow from left-to-right (ltr) Arabic language flow from right-to-left (rtl) If you want to apply the dir to the entire document use it with <html> element Lecture 02 A. Al-Tamimi 15
The lang Attribute Used to indicate the main language used in a document Has been replaced with xml:lang attribute in the new XHTML document It is recommended to set both lang and xml:lang for the <html> element to indicate the language of the document The lang attribute is set using two-character language codes: lang[-dialect] Examples: ar en en-us Lecture 02 A. Al-Tamimi 16
In Class Assignment 1- change your html file to allow right-to-left alignment and change the entire language to ar-jo Lecture 02 A. Al-Tamimi 17
Whitespaces and Flow White space collapsing: consecutive spaces, and different spaces (new line, tab ) are displayed as one space Lecture 02 A. Al-Tamimi 18
Creating Headings Using <hn> Elements <hn> element is used to indicate or emphasis piece of information like page title/section title etc There are six levels of headings : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> By default, most browsers display the contents of the<h1>, <h2>,and <h3> elements larger than the default size of text in the document. The content of the <h4> element would be the same size as the default text, and the content of the <h5> and <h6> elements would be smaller Lecture 02 A. Al-Tamimi 19
Creating Headings Lecture 02 A. Al-Tamimi 20
The align Attribute (deprecated) The align attribute indicates if the element should be rendered to the left, center or right of the page The align attribute has been replaced with textalign property in CSS Example: <h1 align= right >This is a right headline</h1> Lecture 02 A. Al-Tamimi 21
Creating Paragraphs Using <p> Element The <p> element offers another way to structure your text. Each paragraph of text should go in between an opening <p> and closing</p> tag When a browser displays a paragraph it usually inserts a new line before the next paragraph and adds a little bit of extra vertical space The <p> element can carry all of the universal attributes and the deprecated align attribute Lecture 02 A. Al-Tamimi 22
Creating Line Breaks Using the <br /> Element Whenever you use the <br />element {an empty element}, anything following it starts on the next line Try to use <p> element whenever is possible to avoid any unexpected behaviors. Since the amount of space created when use <br /> depends on the size of the font Lecture 02 A. Al-Tamimi 23
In Class Assignment 1- Create a new html file under the name Heading_Formatting.html 2- Create the next page HTML file using what you have learned so far Lecture 02 A. Al-Tamimi 24
In Class Assignment Lecture 02 A. Al-Tamimi 25
Presentational Elements There are many presentational elements available, we are going to discuss some: <b> : bold <i>: italic <u> (deprecated) : underlined <s> and <strike> (deprecated) : strikethrough <sup>: superscript <sub> : subscript <hr />: horizontal rule/line Lecture 02 A. Al-Tamimi 26
Presentational Element Lecture 02 A. Al-Tamimi 27
Useful Character Entities Lecture 02 A. Al-Tamimi 28
Lists Lists are categorized in HTML to : Unordered Lists: similar to bullet points Ordered Lists: sequence of numbers or letters instead of bullet points Definition Lists: allows you to specify a term and its definition (will not discuss in this class) Lecture 02 A. Al-Tamimi 29
Unordered Lists with <ul> Element You write your unorderd list inside a <ul> element (unordered list) Each bullet point is contained inside <li> element (list item) Lecture 02 A. Al-Tamimi 30
Ordered lists with <ol> Element You write your unorderd list inside a <ol> element (ordered list) Each bullet point is contained inside <li> element (list item) Use type attribute to select number, letter, or Roman numerals in ordered lists type= 1 Arabic Numerals {1,2,3,4, } type= A Capital Letters {A, B, C, D, } type= a Small Letters {a, b, c, d. } type= I Large Roman Letters {I, II, III, IV, } Type= i Small Roman Letters {i, ii, iii, iv, } Use start attribute to change the starting number Lecture 02 A. Al-Tamimi 31
Ordered Lists with <ol> Element Lecture 02 A. Al-Tamimi 32
Ordered Lists with <ol> Element Lecture 02 A. Al-Tamimi 33
Nesting Lists Lecture 02 A. Al-Tamimi 34
Comments You can put comments between any tags in your XHTML document <!-- Comment --> Lecture 02 A. Al-Tamimi 35
The <font> Element The <font> element is a deprecated element It is not used anymore, and it is not recommended to use it Lecture 02 A. Al-Tamimi 36
Black and Inline Elements Elements that lives inside the <body> element are categorized into: Block level elements Inline elements Lecture 02 A. Al-Tamimi 37
Block Level Elements Block-level elements appear on the screen as if they have <br /> before and after them For example: <p>, <h1> ~ <h6>, <ul>, <ol>, <hr /> They all start in their own line, and anything that follows them appears on its own line too Lecture 02 A. Al-Tamimi 38
Inline Elements Inline elements can appear within sentences and do not have to appear on new line of their own Examples: <b>, <i>, <u>, <sup>, <sub>, <li> Lecture 02 A. Al-Tamimi 39
Grouping Elements with <div> and <span> Elements These two elements are used to group elements to create sections or subsections inside the web page You can use them to attach a specific style to a group of elements <div> is a block-level element, and it is usually used to group block-level elements <span> is an inline elements, and it is usually used to group inline elements Lecture 02 A. Al-Tamimi 40
In Class Assignment Write HTML snippet to replicate the following text: Lecture 02 A. Al-Tamimi 41
In Class Assignment Write HTML snippet to replicate the following text: Lecture 02 A. Al-Tamimi 42
Resources Jon Duckett, Beginning Web Programming with HTML, XHTML, and CSS, Wrox 2004 http://www.tizag.com/htmlt/ Lecture 02 A. Al-Tamimi 43
Questions Lecture 02 A. Al-Tamimi 44