XHTML Tutorial
Author: Dwight VanTuyl Created: September 15, 2008

SGML Background
SGML
XML HTML
XHTML

Content vs. Presentation
• HTML (content)
– Historically was used for rendering content and presentation – Now, push is to use only for describing content – e.g. Header, paragraph, list, image, etc. – Still backwards compatible and can be used for presentation

• CSS (presentation)
– Introduced after the web started getting really ‘fancy.’ – Now, we use a separate CSS file for the presentation – e.g. Layout, color, font, position, size, etc.

W3C
• The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3). • Learn more about HTML and XHTML at: http://www.w3schools.com/ • Also Check Out:
HTML For the World Wide Web by Elizabeth Castro

Elements and Attributes Element Content

• Elements (aka tags): specify the type of content – how the content will be used in an XML document. XHTML defines its own set of valid element_names (e.g. head, body, h1). • Attributes: give special properties to each element. Again, XHTML defines its own set of valid attribute_names (e.g. class, style, id).

Important XHTML Rules
• Elements must be properly nested
– Wrong: blah blah – Right: blah blah

• Elements must always be closed
– Wrong: Hello. This is paragraph that isn’t closed. – Right: This is the right way.

• Element and Attribute names must be in lowercase
– Wrong:
– Right:

• Attribute values must be quoted
– Wrong:
– Right:

Mandatory XHTML Elements
• the DOCTYPE • the Head • the Body

DOCTYPE (example01.xhtml) Example Title

DOCTYPE

• Defines the type of document to render and references the DTD schema. • An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.

 (example01.xhtml) Example Title

Example Title

• The head element contains general information, also called meta-information, about a document. • XHTML requires the element specified in the element. • Other elements in the include references to css files and javascript files used in the page.

 (example01.xhtml) Example Title

• The main XHTML element for all rendered elements and their content.

Validation
• Firefox Web Developer Toolbar • http://chrispederick.com/work/web-developer/

• Local Files (on your computer):
– Tools => Validate Local HTML

• Live Files (on the server):
– Tools => Validate HTML

Comments
• XHTML Comments begin with • At the top of the file should be a note from the creator, and then a log of every change made by the creator or any updater. • Example:

Comments (example02.xhtml) Example Title

Character Entities
• Special Characters, ones that have specific meaning in XHTML syntax, need to be represented differently. • space :   • < : < • > : > • & : & • “ : "

Character Entities (example03.xhtml)
<   >   &   "

Character Entities (example03.xhtml -- rendered)

Header Elements …
• Historically used for defining ‘header’ type presentation of content – not pretty. • Now used for semantically defining a header to web crawlers and other non-human readers in order to recognize the headers in a page. • Backwards compatible -- still defines a ‘header’ type presentation. • Block level element (not inline). Starts a new line after the element is closed.

Header Elements … (example04.xhtml)
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6

Header Elements … (example04.xhtml -- rendered)

Horizontal Rule
• Render’s a horizontal line across the width of the containing element. • Empty – doesn’t contain any content so it is closed within the tag. • !!! Always close your tags !!!

Horizontal Rule (example05.xhtml)

Horizontal Rule (example05.xhtml -- rendered)

Paragraph
• Renders a block of text that wraps its content within the containing paragraph element. • XHTML automatically adds an extra blank line before and after a paragraph.

Paragraph (example06.xhtml)
...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum posuere mi eget odio. Donec at libero sit amet nunc venenatis fringilla. Sed a magna. Phasellus nec eros. Nulla gravida imperdiet elit. Aliquam tempor, diam quis pharetra rutrum, purus ipsum porta lectus, eu sollicitudin turpis ante ut felis. Donec sollicitudin posuere augue. Proin dui quam, blandit non, sagittis tempus, feugiat sed, lacus. Duis in massa quis nibh iaculis dignissim. Nam non quam. Praesent viverra suscipit justo. Quisque mauris mi, adipiscing et, viverra vel, molestie sed, justo. Maecenas vel augue sit amet eros egestas tempor. Maecenas sed urna quis tortor molestie venenatis. Vestibulum id sapien. Integer tempus magna vel justo.

Paragraph (example06.xhtml -- rendered)

Line Break
• Even though you may have added line breaks within your content by using the [Enter] key, they will not render -- you must use the element. • Empty – doesn’t contain any content so it is closed within the tag. • Don’t go overboard!! Using more than one or two line breaks at a time is considered bad style. Use CSS for positioning elements on the page instead.

Line Break (example07.xhtml)
...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum posuere mi eget odio. Donec at libero sit amet nunc venenatis fringilla. Sed a magna. Phasellus nec eros. Nulla gravida imperdiet elit. Aliquam tempor, diam quis pharetra rutrum, purus ipsum porta lectus, eu sollicitudin turpis ante ut felis. Donec sollicitudin posuere augue. Proin dui quam, blandit non, sagittis tempus, feugiat sed, lacus. Duis in massa quis nibh iaculis dignissim. Nam non quam. Praesent viverra suscipit justo. Quisque mauris mi, adipiscing et, viverra vel, molestie sed, justo. Maecenas vel augue sit amet eros egestas tempor. Maecenas sed urna quis tortor molestie venenatis. Vestibulum id sapien. Integer tempus magna vel justo.

Line Break (example07.xhtml -- rendered)

Lists &
• Used for rendering a bulleted list of items (bullet can be changed to any char or no char at all using CSS). • item elements are enclosed in tags. • Must NOT put any content inside elements unless inside of element. • elements can NOT be used alone without being nested inside tags.

Lists & (example08.xhtml) Item 1 Item 2 Item 3 Item 4 Item 5

Lists & (example08.xhtml -- rendered)

Anchor & Hyperlink
• Directs browser to an HTML page, an image, a sound file, a movie, etc. • Attributes:
– href: link destination to a URL, #id of an element, or image file name. – target=‘_blank’: use if opening in new window

• Inline element (not block)

Anchor & Hyperlink (example09.xhtml)
Link to Linguist List Open new window to Google Link to Header 1 on this page

Anchor & Hyperlink (example09.xhtml -- rendered)

Image
• Renders an image from the defined source attribute. • Empty – doesn’t contain any content so it is closed within the tag. • Block level element. • Attributes:
– src: source location of the image file. – alt: alternative text for the image if it doesn’t display.

Image (example10.xhtml)

Image (example10.xhtml -- rendered)

Tables
• DON’T USE TABLES – unless absolutely necessary. • Why? Its better to separate content (HTML) from presentation (CSS).
– Easier to maintain – Easier to modify – Cleaner code

• Most everything tables are used for can and should be done with CSS. • Why learn tables? Because linguistlist.org, like much of the web, was built long before CSS came around. Tables were used to provide layout to a page. So we need to understand tables in order to maintain old pages. Even now, people still use tables who don’t understand CSS. • Don’t create tables! Learn CSS instead!

Tables cont.
• : encloses the whole table • : defines a table row • : defines a column in a table row. This is where your content belongs. • !!! Don’t put content in anything but the !!!

Tables cont.
• Table Structure: row1 col1 row1 col2 row2 col1 row2 col2

row1 col1

row1 col2

row2 col1

row2 col2

Tables (example11.xhtml –rendered)

CSS Preview
• Adding tables in order to layout content makes html unwieldy and difficult to understand. • Better solution is to NOT use tables and position all elements with a separate CSS file. • CSS is used for the “presentation” part of a web page – e.g. color, size, position, layout, font, etc.

CSS Preview cont.
• CSS properties can be attached to most elements with two important attributes:
– id: the specific identity of an element – like social security number – class: a grouping name to add a style to many elements.

• We’ll also learn two new elements that help CSS out but do not render anything on their own:
– div – span