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

- eXtensible HyperText Markup Language - Defines a document's structure - Takes the form Content -or- - 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. Structure

“The way we were…”

Structure - Old HTML used to be rife with presentation aspects. - 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?

Structure 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..

Structure 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..

Structure 3) Declare your content type. - Goes in the head of the document. - States what character coding was used– almost always “ISO ” if the site is in English. - Can be others if non-Latin-only characters are used..

Structure 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 This is an example of enclosed tags..

Structure 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. This is an example of nesting tags correctly. This is a wrong example..

Structure 6) Inline tags cannot contain block level tags. - Tags like and (block tags) automatically organize themselves one under the next. E.g. if you have two paragraphs, the 2 nd one appears by default under the 1 st. - Tags like (inline tags) occur in the normal flow of text. - Cannot occur within a block of text surrounded by. This is OK. This is wrong..

Structure 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. This is OK. This is not XHTML compliant..

Structure 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. Cats Dogs.

Structure 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   Encoded XHTML entities begin with an ampersand (&) and end with a semi- colon (;). Normal XHTML tags begin with a less-than sign (<) and end with a greater-than sign (>)..

Structure A good XHTML template: XHTML Template

Structure - 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

My First XHTML Page Here's the biggest heading. Here's a smaller one. This is a paragraph. This is a paragraph with some bold text and a link. First list item Second list item This third one contains some italics Structure

- Use 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

My First XHTML Page Here's the biggest heading. Here's a smaller one. This is a paragraph. This is a paragraph with some bold text and a link. First list item Second list item This third one contains some italics © My Company 2008 Structure

- 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.