Web Developer Foundations Using XHTML Chapter 2 Key

Web Developer Foundations: Using XHTML Chapter 2 Key Concepts 1

Learning Outcomes n In this chapter, you will learn about: n n n n The development of HTML The transition from HTML to XHTML syntax, tags, and document type definitions The anatomy of a web page Formatting the body of a web page Formatting the text on a web page Physical and logical style tags Special Characters 2

What is HTML? n n n The World Wide Web Consortium (http: //w 3 c. org) 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. Each individual markup code is referred to as an element or tag. Each tag has a purpose. Tags are enclosed in angle brackets, "<" and ">" symbols. Most tags come in pairs; an opening tag and a closing tag. 3

What is XHTML? n n n The newest version of HTML is actually XHTML – e. Xtensible Hyper. Text Markup Language. XHTML uses the tags and attributes of HTML along with the syntax of XML (e. Xtensible 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. 4

What’s wrong with HTML? n n 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 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. 5

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

XML n An XML document must be well-formed. n n Use lowercase Use opening and closing tags <body> </body> n Close stand-alone tag with special syntax <hr /> n XML documents begin with an XML directive. The basic form of this directive is: <? xml version="1. 0" encoding="UTF-8"? > 7

Document Type Definition (DTD) n W 3 C 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. 8

XHTML 1. 0 Transitional DTD <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd> 9

First Web Page <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> an opening tag. . page info goes here </html> a closing tag 10

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

XHTML <head> and <body> tags <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html> <head>. . Header info goes here </head> <body>. . Body info goes here </body> </html> 12

XHTML <body> tag attributes n bgcolor n n Configures the background color of a web page <body bgcolor=“#000066”> <body bgcolor=“white”> text Configures the color of the text on the web page <body bgcolor=“#000066” text=“#CCCCCC”> <body bgcolor=“white” text=“red”> n Check the XHTML Reference in the Web Developers Handbook for more body tag attributes 13

XHTML <hx> tag attributes n Heading tag n Adds a heading <h 1>Largest</h 1> Largest <h 2>next largest</h 2> next largest <h 3>large</h 3> large <h 4>small</h 4> small <h 5>smaller</h 5> smaller <h 6>smallest</h 6> smallest n Check the XHTML Reference in the Web Developers Handbook for header tag attributes 14

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

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

XHTML Definition List n n Useful to display a list of terms and definitions or a list of FAQ and answers <dl> tag Contains the definition list n <dt> tag Contains a defined term n <dd> tag Contains a data definition 17

XHTML Definition List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> 18

XHTML Ordered List Used to convey information in an ordered fashion n <ol> n Contains the ordered list n n type attribute determines numbering scheme of list, default is numerals <li> Contains an item in the list 19

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

XHTML Unordered List Used to display information in bullet points n <ul> n Contains the unordered list n type attribute determines the type of bullet point, default is disc n <li> Contains an item in the list 21

XHTML Unordered List Example <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> 22

XHTML <pre> tag Preformatted Text tag n The preformatted text tag preserves your formatting and displays the text in a fixedwidth or monospace font. n <pre> …text goes here Line breaks and formatting are preserved </pre> 23

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

XHTML tag n n Font tag Used to format text Deprecated – will be dropped in future versions of XHTML Common attributes n n n face -- configure the typeface or font name to be used to display the text. size – sets the size of the text color – configures the color of the textindent a block of This is large blue text. 25

XHTML tag attributes n n Font size: Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7 Font face: Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7 Jokerman Jokerman 26

XHTML Logical Style Tags n n n Indicate the logical style used to display the text in between the container tags. Common Logical Style Tags n n To cause text to be emphasized or to "stand out" from surrounding text. Usually displayed in bold. This is important n To cause text to be emphasized in relation to other text on the page. Usually displayed in italics. Please note 27

XHTML Physical Style Tags n n n provide specific font instructions for the browser Logical Style tags are preferred by the W 3 C Physical Style tags are discussed because some web developers still use them Common Physical Style Tags n n To display as bold text This is important n To display text in italics Please note 28

XHTML Special Characters n Used to display special characters such as quotes, copyright symbol, etc. Character Code © © < < > > n See the Special Characters section in the Web Developer’s Handbook for a detailed list (Page H-31) 29

Summary This chapter provided an introduction to XHTML. n It began with an introduction to the HTML, discussed the transition to XHTML, continued with the anatomy of a web page, and introduced text and block-level formatting. n 30