1 / 20

Chapter 1 XHTML: Giving Structure to Content

Chapter 1 XHTML: Giving Structure to Content. 3 Components of a Web Page. 1. Content – Collective term for all text, images, videos, etc. that you want to deliver to your audience. 2. Structure – How the content is placed on the page (in tables, forms, etc .). - XHTML

seoras
Download Presentation

Chapter 1 XHTML: Giving Structure to Content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 1 XHTML: Giving Structure to Content

  2. 3 Components of a Web Page 1. Content – Collective term for all text, images, videos, etc. that you want to deliver to your audience. 2. Structure – How the content is placed on the page (in tables, forms, etc.). - XHTML 3. Presentation– The color, style, border, etc. of the structure. - CSS

  3. Structure Introduction to XHTML - eXtensibleHyperTextMarkup Language - Defines a document's structure - Takes the form <element attribute=”value”>Content</element> -or- <element attribute=”value” /> - Basic premise is the same as HTML, though it is an evolving language meant to standardize web development methods by rendering obsolete (or deprecating) many of the methods of earlier HTML coding styles. Standards - The book lists 10 good reasons to use standards-based coding when designing a web page (p. 6). - The Worldwide Web Consortium (W3C) developed a list of rules for XHTML that web developers should abide by in order to make their pages be able to be read across all browsers.

  4. Structure Introduction to XHTML “The way we were…”

  5. Structure Introduction to XHTML - Old HTML used to be rife with presentationaspects. - <td> attributes do nothing to aid the structure of the page. - Goal is to separate these presentation attributes from the barebones structure of a page. - Result? “A lightweight, easy-to-read, [and] semantically meaningful [webpage].” How? XHTML & CSS

  6. Structure XHTML’s Requirements 1) Declare a DOCTYPE. - Goes before the opening HTML tag at the top of the page. - Three types: Strict, Transitional, Frameset - Strict – Tells the browser that all markup is XHTML-compliant (always use if creating a new webpage) - Transitional – States that the markup is a mix of XHTML and deprecated HTML - Frameset – Same as transitional, but states that frames are OK. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html ...> . . . </html>

  7. Structure XHTML’s Requirements 2) Declare an XML namespace. - When a browser is handling an XHTML page and wants to know what’s in the DOCTYPE definition, this is the location on the W3C servers where it is found. - Ensures the browser reads the XHTML code as you intended. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> . . . </html>

  8. Structure XHTML’s Requirements 3) Declare your content type. - Goes in the head of the document. - States what character coding was used– almost always “ISO-8859-1” if the site is in English. - Can be others if non-Latin-only characters are used. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> . . </html>

  9. Structure XHTML’s Requirements 4) Close every tag, whether enclosing or nonenclosing - Enclosing  Tags that have content within them. - Nonenclosing Tags that do not go around text but still must be closed using space-slash <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is an example of enclosed tags.</p> <imgsrc=“img/nonenclosed.jpg” alt=“Example of nonenclosed.” /> . . </html>

  10. Structure XHTML’s Requirements 5) Nest tags correctly - If a tag opens before a preceding one closes, it must be closed before the preceding one. - If incorrect, it will still work (that is, no errors will be thrown by the browser), but since CSS relies on proper nesting, your page may not be rendered correctly. - Use the W3C validator to confirm all tags are nested correctly. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is an <strong>example</strong> of nesting tags correctly.</p> <p>This is a wrong <strong>example</p>.</strong> . . </html>

  11. Structure XHTML’s Requirements 6) Inline tags cannot contain block level tags. - Tags like <p> and <div> (block tags) automatically organize themselves one under the next. E.g. if you have two paragraphs, the 2nd one appears by default under the 1st. - Tags like <a> (inline tags) occur in the normal flow of text. - <p> Cannot occur within a block of text surrounded by <a>. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is <a href=“ok.html”>OK</a>.</p> <a href=“notok.html”>This is <p>wrong</p>.</a> . . </html>

  12. Structure XHTML’s Requirements 7) All tags must be in lowercase. - Old HTML allowed for (and encouraged) capital lettered tags. - XHTML is case-sensitive and all tags must be in lowercase except for DOCTYPE. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>This is OK.</p> <P>This is not XHTML compliant.</P> . . </html>

  13. Structure XHTML’s Requirements 8) All attributes must have values and must be quoted. - In HTML, some tags’ attributes did not need values. - In XHTML, if your tag has an attribute that you’re using, it must have a value. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <select name=“Animals”> <option value=“Cats”>Cats</option> <option value=“Dogs” selected=“selected”>Dogs</option> </select> . . </html>

  14. Structure XHTML’s Requirements 8) Use encoded entities for special characters. - If you want a special character to appear in your code, use its encoded equivalent. - List can be found here  <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> </head> <body> <p>Encoded XHTML entities begin with an ampersand (&amp;) and end with a semi-colon (;).</p> <p>Normal XHTML tags begin with a less-than sign (&lt;) and end with a greater-than sign (&gt;).</p> . . </html>

  15. Structure XHTML’s Requirements A good XHTML template: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <title>XHTML Template</title> </head> <body> <!-- Page Content Here --> </body> </html>

  16. Structure Marking up Content - Start the process of web page development by thinking about structure of the content rather than its presentation. - Think about what the best tags are for marking up the content structure-wise. - Concern yourself more with the flow of the document. - Rather than “I want this to be blue,” think “I want this to be in an ordered list.” Simple, ordered structure; not concerned with presentation. Link to example

  17. Structure Marking up Content <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <title>My First XHTML Page</title> </head> <body> <h1>Here's the biggest heading.</h1> <h2>Here's a smaller one.</h2> <p>This is a paragraph.</p> <p>This is a paragraph with some <strong>bold text</strong> and a <a href="#">link</a>.</p> <ul> <li>First list item</li> <li>Second list item</li> <li>This third one contains some <em>italics</em></li> </ul> </body> </html>

  18. Structure Marking up Content - Use <div> to further structure a page into logical groups. - Won’t do anything visible, but it makes it much easier to access different segments of a page (i.e. with scripts or the style sheet). Not much changed visually. Link to example

  19. Structure <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <title>My First XHTML Page</title> </head> <body> <div id="header"> <h1>Here's the biggest heading.</h1> <h2>Here's a smaller one.</h2> </div> <div id="main_content"> <p>This is a paragraph.</p> <p>This is a paragraph with some <strong>bold text</strong> and a <a href="#">link</a>.</p> <ul> <li>First list item</li> <li>Second list item</li> <li>This third one contains some <em>italics</em></li> </ul> </div> <div id="footer"> <p>&copy; My Company 2008</p> </div> </body> </html>

  20. Structure Document Hierarchy - Tree-like structure of nested tags. - Helps to use indents to tell anyone looking at your code which tags belong in which “branch” of the tree. - Understanding this concept is the basis of understanding the power of CSS.

More Related