1 HTML intro The development of HTMLThe development of HTML The transition from HTML to XHTMLThe transition from HTML to XHTML XHTML syntax, tags, and document type definitionsXHTML syntax, tags, and document type definitions The anatomy of a web pageThe anatomy of a web page Formatting the body of a web pageFormatting the body of a web page Formatting the text on a web pageFormatting the text on a web page Physical and logical style tagsPhysical and logical style tags Special CharactersSpecial Characters

2 What is HTML? The World Wide Web Consortium ( sets the standards for HTML and its related languages. The World Wide Web Consortium ( sets the standards for HTML and its related languages. The set of markup symbols or codes placed in a file intended for display on a Web browser page. The set of markup symbols or codes placed in a file intended for display on a Web browser page.

3 HTML Tags Each individual markup code is referred to as an element or tag. Each tag has a purpose. Each individual markup code is referred to as an element or tag. Each tag has a purpose. Tags are enclosed in angle brackets, " " symbols. Tags are enclosed in angle brackets, " " symbols. Most tags come in pairs; an opening tag and a closing tag. Most tags come in pairs; an opening tag and a closing tag.

4 What is XHTML? The newest version of HTML is actually XHTML – eXtensible HyperText Markup Language. The newest version of HTML is actually XHTML – eXtensible HyperText Markup Language. XHTML uses the tags and attributes of HTML along with the syntax of XML (eXtensible Markup Language). XHTML uses the tags and attributes of HTML along with the syntax of XML (eXtensible Markup Language). While many web pages and web authoring tools still use HTML, as a web developer you need to learn about XHTML – you will be seeing a lot of it in the future. While many web pages and web authoring tools still use HTML, as a web developer you need to learn about XHTML – you will be seeing a lot of it in the future.

5 What’s wrong with HTML? The Web has changed from a medium used to display electronic versions of paper documents to a medium that provides diverse information for a variety of devices. The Web has changed from a medium used to display electronic versions of paper documents to a medium that provides diverse information for a variety of devices. HTML does not fit this need. HTML does not fit this need. HTML is a structural language – it was originally intended to markup printed documents for online viewing. HTML is a structural language – it was originally intended to markup printed documents for online viewing. With the expansion of the Web to include devices other than personal computers, the need for a descriptive rather than structural language became evident and XHTML was created. With the expansion of the Web to include devices other than personal computers, the need for a descriptive rather than structural language became evident and XHTML was created.

6 XHTML XHTML was developed by the W3C to be the reformulation of HTML as an application of XML. XHTML was developed by the W3C to be the reformulation of HTML as an application of XML. XHTML combines the formatting strengths of HTML and the data structure and extensibility strengths of XML. XHTML combines the formatting strengths of HTML and the data structure and extensibility strengths of XML.

7 XML An XML document must be well- formed. An XML document must be well- formed. Use lowercaseUse lowercase Use opening and closing tagsUse opening and closing tags Close stand-alone tag with special syntaxClose stand-alone tag with special syntax XML documents begin with an XML directive. The basic form of this directive is: XML documents begin with an XML directive. The basic form of this directive is:

8 Document Type Definition (DTD) W3C Recommendation: Use a Document Type Definition to identify the type of markup language used in a web page. W3C Recommendation: Use a Document Type Definition to identify the type of markup language used in a web page. XTML 1.0 Transitional This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. We will use this for most of our coding in this text XHTML 1.0 Strict Requires exclusive use of Cascading Style Sheets. We will not use this. XHTML 1.0 Frameset Required for pages using XHTML frames. We will use this with our frames pages later in the text.

9 XHTML 1.0 Transitional DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

10 First Web Page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " an opening tag an opening tag.... page info goes here a closing tag a closing tag

11 Head & Body Sections Head Section -- Contains information that describes the web page document. Head Section -- Contains information that describes the web page document.<head> …head section info goes here </head> Body Section -- Used for text and tags that do show directly on the web page. Body Section -- Used for text and tags that do show directly on the web page.<body> …body section info goes here </body>

12 XHTML and tags <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " Header info goes here.... Header info goes here.... Body info goes here.... Body info goes here </html>

13 Questions? 1. Describe the origin, purpose, and features of HTML. 1. Describe the origin, purpose, and features of HTML. 2. Explain why you would use XHTML instead of HTML. 2. Explain why you would use XHTML instead of HTML. 3. Describe the purpose of the header and body sections of a web page. 3. Describe the purpose of the header and body sections of a web page.

XHTML and tags <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " My First Web Page My First Web Page.... Body info goes here.... Body info goes here </html>

15 XHTML tag attributes bgcolor bgcolor Configures the background color of a web pageConfigures the background color of a web page text text Configures the color of the text on the web page Configures the color of the text on the web page Check the XHTML Reference in the textbook for more body tag attributes Check the XHTML Reference in the textbook for more body tag attributes

16 XHTML tag Paragraph tag Paragraph tag …paragraph goes here …paragraph goes here Used to group sentences and sections of text together. Used to group sentences and sections of text together. Text that is contained by and tags will have a blank line above and below it. Text that is contained by and tags will have a blank line above and below it.

17 XHTML tag Line Break tag Line Break tag Stand alone tag Stand alone tag …text goes here This starts on a new line…. Used to force a new line when the text on the web page document is displayed by a browser. Used to force a new line when the text on the web page document is displayed by a browser.

18 Heading Tags Heading Level 1 Heading Level 1 Heading Level 2 Heading Level 2 Heading Level 3 Heading Level 3 Heading Level 4 Heading Level 4 Heading Level 5 Heading Level 5 Heading Level 6 Heading Level 6

19 XHTML List Basics Definition List Definition List Ordered List Ordered List Unordered List Unordered List

20 XHTML Definition List Useful to display a list of terms an definitions or a list of FAQ and answers Useful to display a list of terms an definitions or a list of FAQ and answers tag tag Contains the definition list tag Contains a defined term tag Contains a defined term tag Contains a data definition tag Contains a data definition

21 XHTML Definition List Example <dl> IP IP Internet Protocol Internet Protocol TCP TCP Transmission Control Transmission Control Protocol Protocol

22 XHTML Ordered List Used to convey information in an ordered fashion Used to convey information in an ordered fashion Contains the ordered list Contains the ordered list type attribute determines numbering scheme of list, default is numeralstype attribute determines numbering scheme of list, default is numerals Contains an item in the list Contains an item in the list

23 XHTML Ordered List Example <ol> Apply to school Apply to school Register for course Register for course Pay tuition Pay tuition Attend course Attend course

24 XHTML Unordered List Used to display information in bullet points Used to display information in bullet points Contains the unordered list Contains the unordered list type attribute determines the type of bullet point, default is disctype attribute determines the type of bullet point, default is disc Contains an item in the list Contains an item in the list

25 XHTML Unordered List Example <ul> TCP TCP IP IP HTTP HTTP FTP FTP

26 XHTML tag Preformatted Text tag Preformatted Text tag The preformatted text tag preserves your formatting and displays the text in a fixed-width or monospace font. The preformatted text tag preserves your formatting and displays the text in a fixed-width or monospace font. <pre> …text goes here …text goes here Line breaks and formatting are preserved Line breaks and formatting are preserved</pre> NOTE: You will unusually NEVER use the tag NOTE: You will unusually NEVER use the tag

27 XHTML tag Blockquote tag Blockquote tag Used to indent a block of text for special emphasis. Used to indent a block of text for special emphasis.<blockquote> …text goes here …text goes here</blockquote>

28 Questions 1. Describe the features of a heading tag and how it configures the text. 1. Describe the features of a heading tag and how it configures the text. 2. Describe the difference between ordered lists and unordered lists. 2. Describe the difference between ordered lists and unordered lists. 3. Describe the purpose of the blockquote tag. 3. Describe the purpose of the blockquote tag.

XHTML Logical Style Elements Indicate the logical style of the text display Indicate the logical style of the text display Common Logical Style Tags Common Logical Style Tags ◦ ◦  To cause text to be emphasized or to "stand out" from surrounding text. This is important  To cause text to be emphasized or to "stand out" from surrounding text. This is important ◦ ◦  To cause text to be emphasized in relation to other text on the page. Usually italics. Please note Please note

XHTML Physical Style Elements Provide browser font configuration info Provide browser font configuration info ◦Useful for browsers – but not always applicable for other devices or user agents such as screen readers Common Physical Style Tags Common Physical Style Tags ◦ ◦  To display as bold text This is important  To display as bold text This is important ◦ ◦  To display text in italics Please note Please note

31 XHTML tag USE CSS INSTEAD USE CSS INSTEAD Font tag Font tag Used to format text Used to format text Deprecated – will be dropped in future versions of XHTML Deprecated – will be dropped in future versions of XHTML Common attributes Common attributes face -- configure the typeface or font name to be used to display the text.face -- configure the typeface or font name to be used to display the text. size – sets the size of the textsize – sets the size of the text color – configures the color of the text This is large blue text. color – configures the color of the text This is large blue text.

32 XHTML Special Characters Used to display special characters such as quotes, copyright symbol, etc. Used to display special characters such as quotes, copyright symbol, etc. Character Code © © < < > > See the Special Characters section textbook for a detailed list

33 Questions 1. Describe three attributes of the font tag and their use. 1. Describe three attributes of the font tag and their use. 2. Provide a reason for using logical style tags rather than physical style tags. 2. Provide a reason for using logical style tags rather than physical style tags. 3. Describe the purpose of special characters. 3. Describe the purpose of special characters.