Markup: HTML and XHTML - Harvard University...Markup: HTML and XHTML 13 of 67 2/6/2008 10:40 AM HyperText Markup Language W3C HyperText

Markup: HTML and XHTML http://localhost:8080/cocoon/projects/cscie12/slides/20080206/handout.html

1 of 67 2/6/2008 10:40 AM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Markup: HTML and XHTMlFebruary 6, 2008

Harvard University Division of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2008 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]


2 of 67 2/6/2008 10:40 AM

Web Browsers / HTTP Clients

Browser Statistics

Firefox (Mozilla)

Web Developer Extension for FirefoxFirebug Extension for Firefox

Internet Explorer (Microsoft)

Opera (Opera Software)

Safari (Apple). Safari available for Mac and Windows.


3 of 67 2/6/2008 10:40 AM

"source" of a web page

Browser: "View Source" or "Save" or right-click link and "Save Link As..."GNU Wget Minerva Account: minerva$ wget http://cscie12.dce.harvard.edu/lecture_notes/2006-07/20070130/links.html minerva$ wget -h minerva$ man wget

$ wget http://cscie12.dce.harvard.edu/lecture_notes/2007-08/20080130/links.html--13:49:48-- http://cscie12.dce.harvard.edu/lecture_notes/2007-08/20080130/links.html => `links.html'Resolving cscie12.dce.harvard.edu... 140.247.197.240Connecting to cscie12.dce.harvard.edu[140.247.197.240]:80... connected.HTTP request sent, awaiting response... 200 OKLength: 26,743 [text/html]

100%[=====================================================>] 26,743 --.--K/s

13:49:48 (104.10 MB/s) - `links.html' saved [26,743/26,743]

Use the --page-requisites option of wget to download any dependent files, such as images andCSS.

lwp-downloadMinerva Account: minerva% lwp-downloadhttp://cscie12.dce.harvard.edu/lecture_notes/2007-08/20080130/links.html minerva$ lwp-download --help minerva$ perldoc -F /usr/bin/lwp-download

$ lwp-download http://cscie12.dce.harvard.edu/lecture_notes/2006-07/20070130/links.htmlSaving to 'links.html'...26.1 KB received


4 of 67 2/6/2008 10:40 AM

URI to Filename Mapping

User directories

Web documents for each user are kept in the user's home directory, in a directory traditionally namedpublic_html. As an example, for the user jharvard whose home directory is/home/courses/j/h/jharvardURI http://minerva.dce.harvard.edu/~jharvard /index.html

File /home/courses/j/h/jharvard/public_html /index.html

Document Root

The Web documents are typically kept under a single directory, traditionally named htdocs. The full path to this directory is called the "document root" of the Web server, for example, /www/htdocs.URI http://www.fas.harvard.edu/academics/index.html

File /www/htdocs /academics/index.html


5 of 67 2/6/2008 10:40 AM

Directory Requests and index.html

Directory without index.html. Note that this assumes the directory permissions are set correctly. If not,you may see Forbidden.

Example 2.1

Example 2.1 Source:

Example 2.1 Rendered:

Images from the CSCIE12 Web Site

Directory with index.html:

Example 2.2

Example 2.2 Source:


Harvard Academics (index.html)

Does it have to be "index.html"?

This is a configuration option for the HTTP server. For minerva, the setting is:

DirectoryIndex index.html index.htm index.shtml index.php index.php4 index.php3 index.phtml inde

view plain print ?

<a href="http://cscie12.dce.harvard.edu/images/" shape="rect" >Images from the CSCIE12 Web S1.

view plain print ?

<a href="http://www.harvard.edu/academics/" shape="rect" >Harvard Academics</a> (index.html)1.


6 of 67 2/6/2008 10:40 AM

Structure and Style

HyperText Markup Language

Primary purpose: structure and content

Cascading Style Sheets (CSS)

Primary purpose: style, presentation, appearance

Maintain this "separation of concerns" -- between structure and style.

Harvard College Admissions

Harvard College Admissions: With CSS disabled:


7 of 67 2/6/2008 10:40 AM

XHTML: a simple example with CSS

View the example.

And here is the stylesheet (simple-style.css):

view plain print ?

<?xml version="1.0"?> 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd"> 3.<html> 4. <head> 5. <title> 6. My Schools 7. </title> 8.  9. <link rel="stylesheet" href="simple-style.css" type="text/css"/> 10. </head> 11. <body> 12. <h1> 13. My Schools 14. </h1> 15. <ul> 16. <li> 17. <a href="http://www.harvard.edu/"> 18. Harvard University 19. </a> 20. <br/> 21. <img src="images/veritas.gif" alt="Harvard Shield" 22. height="84" width="72"/> 23. </li> 24. <li> 25. <a href="http://www.ku.edu/"> 26. University of Kansas 27. </a> 28. <br/> 29. <img src="images/KUSeal.gif" alt="University of Kansas Seal" 30. height="73" width="72"/> 31. </li> 32. </ul> 33. </body> 34.</html> 35. 36.


8 of 67 2/6/2008 10:40 AM

view plain print ?

body { 1. margin-left: 10%; 2. margin-top: 1em; 3. margin-right: 10%; 4. background: #ff9; 5.} 6.h1 { 7. font-family: Arial, sans-serif; 8. color: #600; 9. border-bottom: thin dotted black; 10.} 11.li { 12. margin-top: 1em; 13. font-size: 1.25em; 14.} 15.ul { 16. list-style-type: none; 17.} 18.a { 19. text-decoration: none; 20.} 21.a:link, a:visited { 22. color: blue; 23.} 24.a:hover { 25. color: white; 26. text-decoration: underline; 27. background: blue; 28.} 29.img { 30. border: thin solid black; 31.} 32. 33.


9 of 67 2/6/2008 10:40 AM

XHTML: a tree view

Amaya

A "tree" structure view of XHTML produced by Amaya, the open source Web editor/browser from the


10 of 67 2/6/2008 10:40 AM

W3C.

Firefox Firebug

Firefox DOM Inspector

Eclipse XML Buddy Plugin


11 of 67 2/6/2008 10:40 AM


12 of 67 2/6/2008 10:40 AM

Well-formed (X)HTML and Valid (X)HTML

Well-formed XHTML

elements must be properly nestedelements must have a start and end tag element names case-sensitiveattribute values must be enclosed in quote marksattributes may not be repeated

Good practices for HTML

Choose lower case conventions for element names and attributes.Use double quotes for all attribute values.Close tags even if they are optional in HTML.Use new lines and indentation (spaces or tabs) for readability.

Valid

Well-formed + Conforms to DTD = Valid

validator.w3.org


13 of 67 2/6/2008 10:40 AM

HyperText Markup Language

W3C HyperText Markup Language Home Page

HTML 5 Working Draft (WHATWG)January 2008XHTML 2.0 Working DraftJuly 2006XHTML 1.1, Module-based XHTML May 2001XHTML 1.0, a reformulation of HTML 4.01 into XML 1.0 January 2000HTML 4.01 December 1999HTML 4.0 December 1997HTML 3.2 January 1997HTML 2.0 November 1995

Flavors: Strict, Transitional, and Frameset

HTML 4.0 and 4.01 and XHTML 1.0 have three flavors:

StrictTransitional ("Loose")Frameset

General Recommendation: XHTML 1.0 (Strict or Transitional)


14 of 67 2/6/2008 10:40 AM

Document Type Declaration and Document Type Definition (DTD)

The Document Type Declaration for an XHTML 1.0 strict document is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A closer look at the components follows:

html The name of the root element.PUBLIC An indication that the DTD is a public standard. Private standards would use "SYSTEM"."-//W3C//DTD XHTML 1.0 Strict//EN" The formal public identifier (FPI) for the DTD (Document Type Declaration). This identifier can beused to locate the parser to a local copy of the DTD.

W3C The owner of the DTD (in this case the W3C, the World Wide Web Consortium).DTD The type of document that is referenced (in this case a Document Type Definition, DTD).XHTML 1.0 Strict The name of the document that the public identifier references.EN The language identifier (in this case, "EN" = English). Note that the language code iscase-sensitive.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" The URI at which the parser can locate the referenced Document Type Declaration. If the parserhas the DTD available in a local library, the URI is not necessary.


15 of 67 2/6/2008 10:40 AM

Common Document Type Declarations and DTDs

Some Document Type Declarationsfor HTML documents. Remember that the HTML document must conform to the rules of the Document Type Definition that is referenced in the Document Type Declaration:

XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11-flat.dtd">

XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html401/strict.dtd">

HTML 4.01 Transitional. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html401/loose.dtd">

HTML 4.01 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html401/frameset.dtd">

HTML 4.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/html40/loose.dtd">

HTML 4.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN""http://www.w3.org/TR/html40/strict.dtd">

HTML 4.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/html40/frameset.dtd">

HTML 3.2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/TR/HTML.dtd">

HTML 2.0 <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN""http://www.w3.org/MarkUp/html-spec/html.dtd" >


16 of 67 2/6/2008 10:40 AM

Effects of the Document Type Declaration

DOCTYPE statement used by:

validating parsersvalidator.w3.orgcommand-line validators

Browser Rendering ModeStandards modeQuirks mode


17 of 67 2/6/2008 10:40 AM

XHTML 1.0

XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) from the W3C. XHTML 1.0 isa reformulation of HTML 4.0 in XML 1.0. It comes in three "flavors": strict, transitional, and frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Documentation for XHTML 1.0

XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) (W3C)

This is the official specification. It has very readable sections as well as the technical definitions.

XHTML 1.0 Strict DTD (W3C)

The DTD itself -- more useful to parsers than to humans.

XHTML 1.0 Annotated DTD (W3C)

The annotated (with hyperlinks) version of the DTD. Very useful to humans.

XHTML 1.0 Strict documentation (DTDParse)

Documentation produced directly from the DTD by Norman Walsh's great Perl-based tool calledDTDParse. Very useful to people.

XHTML 1.0 Strict77 Elements90 Attributes

XHTML 1.0 Transitional89 Elements120 Attributes


18 of 67 2/6/2008 10:40 AM

XHTML Elements

Grouped by modules defined by XHTML modularization.

Structuralbody, head, html, title

Textabbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4,h5, h6, kbd, p, pre, q, samp, span, strong, var

Headingh1, h2, h3, h4, h5, h6

Blockaddress, blockquote, div, p, pre

Inlineabbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong, var

FlowHeading, Block, Inline

Hypertexta

Listdl, dt, dd, ol, ul, li

Applet, deprecated.applet, param

Text ExtensionsPresentation

b, big, hr, i, small, sub, sup, tt

Editdel, ins

Bi-directional textbdo

FormsBasic Forms

form, input, label, select, option, textarea

Formsform, input, select, option, textarea, button, fieldset, label, legend,optgroup

TablesBasic Tables

caption, table, td, th, tr

Tablescaption, table, td, th, tr, col, colgroup, tbody, thead, tfoot

Imageimg

Client-side Imagemaparea, map

Objectobject, param

Framesframeset, frame, noframes

Iframeiframe

Metainformationmeta

Scriptscript, noscript


19 of 67 2/6/2008 10:40 AM

Stylestyle

Linklink

Basebase

Legacy, deprecated.basefont, center, dir, font, isindex, menu, s, strike, u


20 of 67 2/6/2008 10:40 AM

Structural: html, head, body, title

Firefox DOM Inspector:

View the example.

view plain print ?

<?xml version="1.0"?> 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd"> 3.<html> 4. <head> 5. <title> 6. My Schools 7. </title> 8.  9. <link rel="stylesheet" href="simple-style.css" type="text/css"/> 10. </head> 11. <body> 12. <h1> 13. My Schools 14. </h1> 15. <ul> 16. <li> 17. <a href="http://www.harvard.edu/"> 18. Harvard University 19. </a> 20. <br/> 21. <img src="images/veritas.gif" alt="Harvard Shield" 22. height="84" width="72"/> 23. </li> 24. <li> 25. <a href="http://www.ku.edu/"> 26. University of Kansas 27. </a> 28. <br/> 29. <img src="images/KUSeal.gif" alt="University of Kansas Seal" 30. height="73" width="72"/> 31. </li> 32. </ul> 33. </body> 34.</html> 35. 36.


21 of 67 2/6/2008 10:40 AM

Document Type Definition (DTD) for XHTML

A DTD defines the rules (elements, attributes, content model) for a markup language. Note that the format for a DTD is not XML or HTML.

XHTML 1.0 Strict DTD

Elements, Attributes, Entities

html element defined:

<!ELEMENT html (head, body)>

attributes for img element defined:

<!ATTLIST img %attrs; src %URI; #REQUIRED alt %Text; #REQUIRED longdesc %URI; #IMPLIED height %Length; #IMPLIED width %Length; #IMPLIED usemap %URI; #IMPLIED ismap (ismap) #IMPLIED >

Parameter Entitites

<!ENTITY % coreattrs "id ID #IMPLIED class CDATA #IMPLIED style %StyleSheet; #IMPLIED title %Text; #IMPLIED" >

Character Entities

<!ENTITY nbsp CDATA " " -- no-break space = non-breaking space, U+00A0 ISOnum --><!ENTITY iexcl CDATA "¡" -- inverted exclamation mark, U+00A1 ISOnum --><!ENTITY cent CDATA "¢" -- cent sign, U+00A2 ISOnum --><!ENTITY pound CDATA "£" -- pound sign, U+00A3 ISOnum --><!ENTITY curren CDATA "¤" -- currency sign, U+00A4 ISOnum --><!ENTITY yen CDATA "¥" -- yen sign = yuan sign, U+00A5 ISOnum --><!ENTITY brvbar CDATA "¦" -- broken bar = broken vertical bar, U+00A6 ISOnum --><!ENTITY sect CDATA "§" -- section sign, U+00A7 ISOnum --><!ENTITY uml CDATA "¨" -- diaeresis = spacing diaeresis, U+00A8 ISOdia --><!ENTITY copy CDATA "©" -- copyright sign, U+00A9 ISOnum -->


22 of 67 2/6/2008 10:40 AM

Reading the DTD

Three main things to be concerned with:

Content Model1.Attribute List2.Expanding defined entities (e.g. %Block, %Inline)3.

Some notations important for reading DTDs:

* , asteriskzero or more

+, plusone or more

( ), parenthesesgrouping

|, pipeor


23 of 67 2/6/2008 10:40 AM

body

What are the content model and attributes for the element "body"?

body, W3C annotated DTD body, DTDParse

Content Model for body

Content model for body:

%Block entity referred to:

%Block entity defined:

% Block entity defined:% Block "(%block; | form | %misc;)*" Expand the entities referred to (%block, %misc):

% block "p | %heading; | div | %lists; | %blocktext; | fieldset | table"% heading "h1|h2|h3|h4|h5|h6"% lists "ul | ol | dl"% blocktext "pre | hr | blockquote | address"


24 of 67 2/6/2008 10:40 AM

% block fully expanded:"p | h1 | h2 | h3 | h4 | h5 | h6 | div | ul | ol | dl | pre | hr | blockquote | address |fieldset | table"

% misc "noscript | %misc.inline;"% misc.inline "ins | del | script"

% misc fully expanded:"noscript|ins|del|script"

% Block fully expanded:"(p | h1 | h2 | h3 | h4 | h5 | h6 | div | ul | ol | dl | pre | hr | blockquote | address |fieldset | table | form | noscript | ins | del | script)*"

Content model for "body"

(p | h1 | h2 | h3 | h4 | h5 | h6 | div | ul | ol | dl | pre | hr |blockquote | address | fieldset | table | form | noscript | ins | del | script)*


25 of 67 2/6/2008 10:40 AM

Attributes for body

Attributes: onload, onunload, %attrs

%attrs is: %coreattrs; %i18n; %events

%coreattrsid, class, style, title

%i18nlang, xml:lang, dironclick, ondblclick, onmousedown, onmouseup,onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Attributes for body

onloadonunloadidclassstyle


26 of 67 2/6/2008 10:40 AM

titlelangxml:langdironclickondblclickonmousedownonmouseup,onmouseoveronmousemoveonmouseoutonkeypressonkeydownonkeyup


27 of 67 2/6/2008 10:40 AM

Reading the XHTML Specification

You can start with the HTML 4.01 Specification

XHTML in particular...

Element ProhibitionsHTML Compatibility Guidelines


28 of 67 2/6/2008 10:40 AM

DTD: Is there a better way?

Documentation produced from the DTD:

XHTML 1.1XHTML 1.0 StrictXHTML 1.0 Transitional

Other ways to define XML Markup Languages

DTDW3C XML SchemaRELAX NG (RNG)


29 of 67 2/6/2008 10:40 AM

Hypertext

The a element. [a Element, DTDParse]

Example 2.3

Example 2.3 Source:


CSCIE-12 Web [email protected] 2W3CHarvard University Extension School

view plain print ?

<ul> 1. <li> <a href="http://cscie12.dce.harvard.edu/" shape="rect" >CSCIE-12 Web Site</a> 2. </li> 3. <li><a href="mailto:[email protected]" shape="rect" > 4. [email protected]</a> 5. </li> 6. <li><a href="slide2.html" shape="rect" >Slide 2</a> 7. </li> 8. <li><a href="http://www.w3.org/" title="World Wide Web Consortium: Leading the Web to its9. W3C</a> 10. </li> 11. <li><a href="http://extension.harvard.edu/" shape="rect" ><em>Harvard University Extension12. </li> 13.</ul> 14.


30 of 67 2/6/2008 10:40 AM

An aside: Absolute and Relative Locations

Relative locations are resolved according to the location of the containing document!

Absolute, or fully-qualified, URIs specify the complete information.

Example 2.4

Example 2.4 Source:


Diplomacy of Lewis and Clark stressed in exhibit

Relative, or partial, URIs specify partial information. The information not provided is resolved from thecurrent location (or from base element or from meta data in HTTP response).

Example 2.5

Example 2.5 Source:


Slide 1

Is this relative or absolute? Scheme, host, and port would be resolved from current location, but path isabsolute

Example 2.6

Example 2.6 Source:


copyright information

Relative Paths to Parent Locations

../ refers to the parent directory

./ refers to current directory

Example 2.7

view plain print ?

<a href="http://www.hno.harvard.edu/gazette/2003/12.11/05-lewisclark.html" shape="rect" > 1. Diplomacy of Lewis and Clark stressed in exhibit</a> 2. 3.

view plain print ?

<a href="slide1.html" shape="rect" >Slide 1</a> 1. 2.

view plain print ?

<a href="/copyright.html" shape="rect" >copyright information</a> 1. 2.


31 of 67 2/6/2008 10:40 AM

Example 2.7 Source:


Up a level

See Resolving Relative URIs in the Links section of the HTML 4.01 specification for more details.

view plain print ?

<a href="../index.html" shape="rect" >Up a level</a> 1.


32 of 67 2/6/2008 10:40 AM

Text: Heading

h1 , h2 , h3 , h4 , h5 , h6

Example 2.8

Example 2.8 Source:


A Third Level Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

A Fourth Level Heading


A Fifth Level Heading


A Sixth Level Heading


view plain print ?

<h3>A Third Level Heading</h3> 1.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 2.<h4>A Fourth Level Heading</h4> 3.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 4.<h5>A Fifth Level Heading</h5> 5.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 6.<h6>A Sixth Level Heading</h6> 7.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 8.


33 of 67 2/6/2008 10:40 AM

Heading

Heading elements (h1,h2,etc.) combined with CSS are very powerful. Headings can remain headings inmarkup and CSS can style them as desired.


34 of 67 2/6/2008 10:40 AM

Text: Block

div , p , address , blockquote , pre

Example 2.9

Example 2.9 Source:


Division (div) elements are block-level and will be very useful when we discuss stylesheets.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus variustincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreetneque, non pellentesque mauris turpis eu purus.

Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aeneanaliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh.Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.

Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut arisus. Fusce bibendum sagittis magna.

Curious about the Lorem Ipsum text?

Example 2.10

Example 2.10 Source:


The address of the Science Center is:1 Oxford St., Cambridge, Massachusetts, 02138It is where some sections for CSCI E-12 are held.

Example 2.11

view plain print ?

<div style="text-align: center; background-color: yellow; color: red; font-family: Times, ser1. Division (div) elements are block-level and will be very useful when we discuss 2. stylesheets.</div> 3.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at 4. sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. 5. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque 6. mauris turpis eu purus.</p> 7.<p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla 8. fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede 9. lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing 10. diam at enim. Vestibulum nibh.</p> 11.<p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis 12. volutpat. Ut a risus. Fusce bibendum sagittis magna.</p> 13.<p><a href="http://www.lipsum.com/" shape="rect" >Curious about the Lorem Ipsum text?</a></p14.

view plain print ?

<div> The address of the Science Center is: 1. <address>1 Oxford St., Cambridge, Massachusetts, 02138</address> It is where some 2. sections for CSCI E-12 are held. </div> 3.


35 of 67 2/6/2008 10:40 AM



In his I Have a Dream speech delivered in August 1963, Martin Luther King Jr. said:

I have a dream that one day this nation will rise up and live out the true meaning of itscreed: We hold these truths to be self-evident that all men are created equal.

I have a dream that one day on the red hills of Georgia the sons of former slaves and thesons of former slave owners will be able to sit down together at the table of brotherhood.

I have a dream that one day even the state of Mississippi, a state sweltering with the heatof injustice, sweltering with the heat of oppression, will be transformed into an oasis offreedom and justice.

I have a dream that my four little children will one day live in a nation where they will not bejudged by the color of their skin but by the content of their character. I have a dream today!

I have a dream that one day, down in Alabama, with its vicious racists, with its governorhaving his lips dripping with the words of interposition and nullification; one day right therein Alabama little black boys and black girls will be able to join hands with little white boysand white girls as sisters and brothers. I have a dream today!

I have a dream that one day every valley shall be exalted, and every hill and mountain shallbe made low, the rough places will be made plain, and the crooked places will be madestraight, and the glory of the Lord shall be revealed and all flesh shall see it together.

pre: where whitespace is important!

Example 2.12


view plain print ?

<p> In his <em>I Have a Dream</em> speech delivered in August 1963, Martin Luther King 1. Jr. said: </p> 2.<blockquote cite="http://www.americanrhetoric.com/speeches/Ihaveadream.htm" > 3. <p>I have a dream that one day this nation will rise up and live out the true meaning of 4. its creed: We hold these truths to be self-evident that all men are created 5. equal.</p> 6. <p>I have a dream that one day on the red hills of Georgia the sons of former slaves and 7. the sons of former slave owners will be able to sit down together at the table of 8. brotherhood.</p> 9. <p>I have a dream that one day even the state of Mississippi, a state sweltering with 10. the heat of injustice, sweltering with the heat of oppression, will be transformed 11. into an oasis of freedom and justice.</p> 12. <p>I have a dream that my four little children will one day live in a nation where they 13. will not be judged by the color of their skin but by the content of their character. I 14. have a <em>dream</em> today!</p> 15. <p>I have a dream that one day, <em>down</em> in Alabama, with its vicious racists, 16. with its governor having his lips dripping with the words of interposition and 17. nullification; one day right there in Alabama little black boys and black girls 18. will be able to join hands with little white boys and white girls as sisters and 19. brothers. I have a <em>dream</em> today!</p> 20. <p>I have a dream that one day every valley shall be exalted, and every hill and 21. mountain shall be made low, the rough places will be made plain, and the crooked 22. places will be made straight, and the glory of the Lord shall be revealed and all 23. flesh shall see it together.</p> 24.</blockquote> 25.


36 of 67 2/6/2008 10:40 AM


Boston Forecast (°F) High LowWed 40 39Thu 33 28Fri 35 21Sat 38 20Sun 37 25Mon 30 18Tue 27 15

Here is the same source, except this time in a p element.

Example 2.13



Boston Forecast (°F) High Low Wed 40 39 Thu 33 28 Fri 35 21 Sat 38 20 Sun 37 25 Mon 30 18 Tue27 15

view plain print ?

<pre xml:space="preserve" >Boston Forecast (°F) 1. High Low 2.Wed 40 39 3.Thu 33 28 4.Fri 35 21 5.Sat 38 20 6.Sun 37 25 7.Mon 30 18 8.Tue 27 15</pre> 9. 10.

view plain print ?

<p>Boston Forecast (°F) 1. High Low 2.Wed 40 39 3.Thu 33 28 4.Fri 35 21 5.Sat 38 20 6.Sun 37 25 7.Mon 30 18 8.Tue 27 15</p> 9. 10.


37 of 67 2/6/2008 10:40 AM

Text: Inline

Text Chapter from HTML 4.01 Specification

abbr , acronym , br , cite , code , dfn , em , kbd , q , samp , span , strong , var

Example 2.14



Web clients and servers communicate via HTTP.

Example 2.15



NASA was founded in 1958.

Example 2.16



span elements are useful in CSS. They are an inline partner with the block level div elements.

Example 2.17


view plain print ?

<p> Web clients and servers communicate via <abbr title="hypertext transfer protocol" >HTTP</1.

view plain print ?

<p> <acronym title="National Aeronatics and Space Administration" > 1. NASA</acronym> was founded in 1958. </p> 2.

view plain print ?

<p> 1. <span style="color: white; background-color: red;" >span elements</span> are useful 2. in CSS. They are an <em>inline</em> partner with the block level 3. <strong>div</strong> elements. </p> 4.

view plain print ?

<p> 1.Martin Luther King Jr. said, <q>Injustice anywhere is a threat to justice everywhere.</q> 2.</p> 3.


38 of 67 2/6/2008 10:40 AM


Martin Luther King Jr. said, “Injustice anywhere is a threat to justice everywhere.”

Example 2.18



Strong text and bold textshould not be confused. They may be rendered in the same way on visual browsers. However,remember that "strong" is semantic and "bold" is presentational.

Likewise, emphasized text should not be confused with italicized text. The former (em) is semantic, the latter (i) is presentational.

Example 2.19



Whitespace, including spaces, tabs, carriage returns, and line feeds, are generally "collapsed" in XHTML. If youneeda line break,you can use the br element.

view plain print ?

<p> <strong>Strong text</strong> and <b>bold text</b> should not be confused. They 1. may be rendered in the same way on visual browsers. However, remember that "strong" is 2. semantic and "bold" is presentational.</p> 3.<p> Likewise, <em>emphasized text</em> should not be confused with <i>italicized 4. text</i>. The former (<code>em</code>) is semantic, the latter (<code>i</code>) 5. is presentational. </p> 6.

view plain print ?

<div>Whitespace, including spaces, tabs, carriage returns, and line feeds, 1. <br/> are generally "collapsed" in XHTML. If you<br/> 2. need<br/> 3. a line break,<br/> 4. you can use the <code>br</code> element.</div> 5.


39 of 67 2/6/2008 10:40 AM

Lists

List Chapter from HTML 4.01 Specification

ul , li , ol , dl , dt , dd

Example 2.20



Some of my favorite food categories:

TeaBreadCheeseChipsIce Cream

Example 2.21



TeaKenyanSikkim TemiFormosa Oolong Fancy

Potato Chips

view plain print ?

<p>Some of my favorite food categories:</p> 1.<ul> 2. <li>Tea</li> 3. <li>Bread</li> 4. <li>Cheese</li> 5. <li>Chips</li> 6. <li>Ice Cream</li> 7.</ul> 8.

view plain print ?

<ul> 1. <li>Tea 2. <ul> 3. <li>Kenyan</li> 4. <li>Sikkim Temi</li> 5. <li>Formosa Oolong Fancy</li> 6. </ul> </li> 7. <li>Potato Chips 8. <ul> 9. <li>Dirty's</li> 10. <li>Art's and Mary's</li> 11. <li>Tim's Cascade</li> 12. </ul> </li> 13.</ul> 14.


40 of 67 2/6/2008 10:40 AM

Dirty'sArt's and Mary'sTim's Cascade

Example 2.22



Boil water1.Measure tea (approximately 1 tsp. per 6 oz. cup)2.Steep tea for 3 to 5 minutes3.Enjoy!4.

Example 2.23



breada usually baked and leavened food made of a mixture whose basic constituent is flour or meal

buttera solid emulsion of fat globules, air, and water made by churning milk or cream and used as food

view plain print ?

<ol> 1. <li>Boil water</li> 2. <li>Measure tea (approximately 1 tsp. per 6 oz. cup)</li> 3. <li>Steep tea for 3 to 5 minutes</li> 4. <li>Enjoy!</li> 5.</ol> 6.

view plain print ?

<div> 1. <dl> 2. <dt>bread</dt> 3. <dd>a usually baked and leavened food made of a mixture whose basic constituent is 4. flour or meal</dd> 5. <dt>butter</dt> 6. <dd>a solid emulsion of fat globules, air, and water made by churning milk or cream 7. and used as food </dd> 8. </dl> 9.</div> 10.


41 of 67 2/6/2008 10:40 AM

Lists and CSS

Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content items,etc.) and CSS can style them as desired.


42 of 67 2/6/2008 10:40 AM

Image

Objects, Images, Applets Chapter from HTML 4.01 Specification

imgHTML documents do not contain the images themselves, but merely contain references to the imagesto be displayed. Common image file types are:

GIF, Graphics Interchange Format, ".gif"JPEG, Joint Photographic Experts Group, ".jpg", ".jpeg"PNG, Portable Network Graphics, ".png"

Example 2.24



Example 2.25



view plain print ?

<img src="http://cscie12.dce.harvard.edu/images/group.png" alt="Harvard University Extension1.

view plain print ?

<a href="http://extension.harvard.edu/" shape="rect" > 1. <img src="http://cscie12.dce.harvard.edu/images/group.png" alt="Harvard University Extensi2.</a> 3.


43 of 67 2/6/2008 10:40 AM

Tables

Tables Chapter from HTML 4.01 Specification

Tables are great for data.

Tables are often co-opted for page layout purposes.

Basic Tables table , tr , td , th , caption , thead , tbody , tfoot

Example 2.26



A tableColumn 1 Column 2 Column 3

row 1 column 1 row 1 column 2 row 1 column 3



view plain print ?

<table style="width: 80%;" > 1. <caption>A table</caption> 2. <thead> 3. <tr> 4. <th rowspan="1" colspan="1" > Column 1 </th> 5. <th rowspan="1" colspan="1" > Column 2 </th> 6. <th rowspan="1" colspan="1" > Column 3 </th> 7. </tr> 8. </thead> 9. <tbody> 10. <tr> 11. <td rowspan="1" colspan="1" >row 1 column 1</td> 12. <td rowspan="1" colspan="1" >row 1 column 2</td> 13. <td rowspan="1" colspan="1" >row 1 column 3</td> 14. </tr> 15. <tr> 16. <td rowspan="1" colspan="1" >row 2 column 1</td> 17. <td rowspan="1" colspan="1" >row 2 column 2</td> 18. <td rowspan="1" colspan="1" >row 2 column 3</td> 19. </tr> 20. <tr> 21. <td rowspan="1" colspan="1" >row 3 column 1</td> 22. <td rowspan="1" colspan="1" >row 3 column 2</td> 23. <td rowspan="1" colspan="1" >row 3 column 3</td> 24. </tr> 25. </tbody> 26.</table> 27.


44 of 67 2/6/2008 10:40 AM

Table Head and Table Body

Tables are constructed with thead and tbody. Javascript can then be used to make the table "sortable"and "striped".


45 of 67 2/6/2008 10:40 AM

Comments

Comments

Example 2.27



You can make comments in XHTML. Comments can be very useful to the person who maintains thepage. You should get into the habit of using comments in your XHTML.

view plain print ?

<p>You can make comments in XHTML. 1. Comments can be very useful to the person who ma2. You should get into the habit of using comments in your XHTML. 3. </p> 4.


46 of 67 2/6/2008 10:40 AM

XHTML/HTML Character Entities

XHTML/HTML Character entities can be defined by

name (&name;)decimal numeric value (&#nnn;)hexadecimal numeric value (&#xnnn;)

Character Entities Defined for XML/SGML

Critical character entites are:

><&"'

Character Entities defined specifically for XHTML/HTML

And Because we have deficient input devices...

Copyright symbol:

©©©

List of XHTML 1.0 Entity Sets and Character Entities


47 of 67 2/6/2008 10:40 AM

Nesting

Obey the rules of being well-formed and the content model rules of the DTD; and then nest away!

Example 2.28



Lists can hold lists. This list item contains another list.step first1.step second2.step last3.

This list item is part of the outer list.

view plain print ?

<ul> 1. <li>Lists can hold lists. This list item contains another list. 2. <ol> 3. <li>step first</li> 4. <li>step second</li> 5. <li>step last</li> 6. </ol> 7. </li> 8. <li>This list item is part of the outer list.</li> 9.</ul> 10.


48 of 67 2/6/2008 10:40 AM

Tables within Tables

Example 2.29



row 1 column 1t2 r1c1 t2 r1c2

t2 r2c1 t2 21c2

row 1 column 2 row 1 column 3



view plain print ?

<table style="border: medium solid red; width: 100%" > 1. <tr> 2. <td style="border: thin solid;" rowspan="1" colspan="1" > 3. <div>row 1 column 1</div> 4. <table style="border: medium solid green; width: 100%" > 5. <tr> 6. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 r1c1</td> 7. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 r1c2</td> 8. </tr> 9. <tr> 10. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 r2c1</td> 11. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 21c2</td> 12. </tr> 13. </table> 14. </td> 15. <td style="border: thin solid;" rowspan="1" colspan="1" >row 1 column 2</td> 16. <td style="border: thin solid;" rowspan="1" colspan="1" >row 1 column 3</td> 17. </tr> 18. <tr> 19. <td style="border: thin solid;" rowspan="1" colspan="1" >row 2 column 1</td> 20. <td style="border: thin solid;" rowspan="1" colspan="1" >row 2 column 2</td> 21. <td style="border: thin solid;" rowspan="1" colspan="1" >row 2 column 3</td> 22. </tr> 23. <tr> 24. <td style="border: thin solid;" rowspan="1" colspan="1" >row 3 column 1</td> 25. <td style="border: thin solid;" rowspan="1" colspan="1" >row 3 column 2</td> 26. <td style="border: thin solid;" rowspan="1" colspan="1" >row 3 column 3</td> 27. </tr> 28.</table> 29.


49 of 67 2/6/2008 10:40 AM

Tables and Table Cells Exposed

Expose tables:

Web Developer Extension for Firefox

faveletCSS or border attribute

ONLamp:

ONLamp, table elements outlined:


50 of 67 2/6/2008 10:40 AM

ONLamp, td elements outlined in red::


51 of 67 2/6/2008 10:40 AM

Favelets (An Aside)

"Favelets" are bookmarks that contain JavaScript code. When you select the favelet bookmark in yourbrowser, the JavaScript is executed. Favelets can be very useful to Web development: size windows,show document structure, submit to validating tools (HTML, CSS, links).

Favelets for HTML Authoring, from tantek.comAccessibility Favelets, from accessify.comFavelets for the W3C Validator, from w3.org

Harvard University News site: After "Show table cells <td>" favelet is applied:

javascript: 1.var t=document.getElementsByTagName('td'); 2.for (i=0;i<t.length;i++){ 3. void(t[i].style.border='1px solid navy'); 4. void(t[i].style.padding='6px'); 5. void(t[i].style.color='navy'); 6. void(t[i].style.background='#E5E5E5'); 7.} 8.


52 of 67 2/6/2008 10:40 AM

frameset and iframe

HTML Specification Chapter on Frames

Frameset Example

Lecture Notes Frameset Example

Google Image Search and Frames

Search Results: Minuteman

The "framed" image result page:


53 of 67 2/6/2008 10:40 AM


54 of 67 2/6/2008 10:40 AM

Frames: Multiple documents involved

frameset document that defines the frame structurecontent documents (HTML or images) to fill the frames defined by the frameset document

Lecture Notes Frameset Example

<?xml version="1.0" encoding="UTF-8"?> 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 3.<html> 4. <head> 5. <title> 6. Frameset Example 7. </title> 8. </head> 9. <frameset cols="200,*"> 10. <frame name="navigation" src="list.html" /> 11. <frame name="main" src="slide1.html"/> 12. <noframes> 13. <body> 14. <p> This text will display in a browser that does not support frames. It should conta15. text that is useful to the viewer. Do not simply tell them "Your browser does not 16. support frames. You should upgrade your browser." </p> 17. <p> You may <a href="slide1.html">view the slide show</a>. </p> 18. </body> 19. </noframes> 20. </frameset> 21.</html> 22.


55 of 67 2/6/2008 10:40 AM


56 of 67 2/6/2008 10:40 AM

Targets

Attribute target of a (anchor) element.

Special Targets

_blank Opens up a new window_self The browser or window in which the document is already loaded. This is the default behavior forhypertext links._parent Will clear the parent frameset_top Will clear the current window of all frames.

Named Targets

Frames can be named (via name attribute. Windows can be named via JavaScript.


57 of 67 2/6/2008 10:40 AM

Inline Frames (iframe)

iframe is deprecated.

Example 2.30



imgaformtable

view plain print ?

<div> 1. <ul> 2. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/img.html" target=3. </li> 4. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/a.html" target="i5. </li> 6. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/form.html" target7. form</a> 8. </li> 9. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/table.html" targe10. table</a> 11. </li> 12. </ul> 13. <iframe name="inlineframe" src="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements.14. frames or is currently configured not to display frames. However, you may visit <a href="15. </iframe> 16.</div> 17.

XHTML 1.0 Strict: User Element View [DTD Element View]

[Home] [Entities]

A | B | C | D | E | F | H | I | K | L | M | N | O | P | Q | S | T | U | V

Top level element: html.

Aaabbracronymaddressarea

Bb


58 of 67 2/6/2008 10:40 AM

framesets and iframes: Pros and Cons

If you are going to use framesets and iframes, use them correctly!

Pros

Parts of your page can scroll while other parts remain stationary. Note that this can be achieved with CSS!Can display resources from different servers within same browser window.

Cons

Non-visual BrowsersIncreases complexity.

number of fileshypertext links (users can becomes "trapped" if links and targets are not carefully written).

Linking or bookmarking any page other than the top level frameset is problematic.Problems with search engines because deep linking is problematic. Try a Google search for "your browser doesn't support frames".


59 of 67 2/6/2008 10:40 AM

Forms: Introduction

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. Thesubmitted information is passed from the HTTP Server to a server-side program that processes theinformation and produces a response for the browser.


60 of 67 2/6/2008 10:40 AM


61 of 67 2/6/2008 10:40 AM

form

Attributes

method (GET|POST)action (URL of CGI program)enctype

Each element within a form has a name associated with it. When the information is sent back to theserver, the CGI program will access the information by name. Thus, the front-end form and theback-end program must use the same names.

While exploring forms, it is useful to use a simple "echo" CGI program, which will simply echo back the name/value information your form submitted (http://minerva.dce.harvard.edu/cgi-bin/echo.cgi).

Example 2.31



Email Address: Submit Query

view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="appli1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.


62 of 67 2/6/2008 10:40 AM

Get vs. Post

GET: form information sent from browser to server as part of query string, visible in the URLPOST: form information sent from browser to server as part of HTTP body; not in URL

Example 2.32




Example 2.33




view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="appli1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.

view plain print ?

<form method="get" action="http://cscie12.dce.harvard.edu/echo.cgi" enctype="application/x-1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.


63 of 67 2/6/2008 10:40 AM

Radio Buttons

Example 2.34



Please send me spam: yes no

Submit Information

view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="appli1. <div> 2. Please send me spam: 3. <input type="radio" name="spam" value="yes" checked="checked" />yes 4. <input type="radio" name="spam" value="no" />no 5. <hr/> 6. <input type="submit" value="Submit Information" name="submit" /> </div> 7.</form> 8.


64 of 67 2/6/2008 10:40 AM

Checkbox

Example 2.35



What ice cream do you like?

Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding

Submit Information

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="applic1. <p>What ice cream do you like?</p> 2. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 3. <br/> 4. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 5. <br/> 6. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 7. <br/> 8. <input type="checkbox" name="icecream" value="ginger" />Ginger 9. <br/> 10. <input type="checkbox" name="icecream" value="herrellchocolatepudding" /> Herrell's 11. Chocolate Pudding 12. <p> 13. <input type="submit" value="Submit Information" name="submit" /></p> 14.</form> 15.


65 of 67 2/6/2008 10:40 AM

Option Lists

Example 2.36



Your favorite New England state: Please Select...Please Select...

Submit Information

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="applic1. <select name="favorite_NE_state" > 2. <option value="" selected="selected" >Please Select...</option> 3. <option value="CT" >Connecticut</option> 4. <option value="ME" >Maine</option> 5. <option value="MA" >Massachusetts</option> 6. <option value="NH" >New Hampshire</option> 7. <option value="RI" >Rhode Island</option> 8. <option value="VT" >Vermont</option> 9. </select> 10. <p> 11. <input type="submit" value="Submit Information" name="submit" /> 12. </p> 13.</form> 14.


66 of 67 2/6/2008 10:40 AM

Textarea

Example 2.37



Please enter comments:

Submit Information

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="applic1. <p>Please enter comments:</p> 2. <textarea rows="10" cols="50" name="comments" > comments go here.... </textarea> 3. <p> 4. <input type="submit" value="Submit Information" name="submit" /></p> 5. </form> 6.

comments go here....


67 of 67 2/6/2008 10:40 AM

Labels

Example 2.38



What ice cream do you like?

Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding

Submit Information

Table of Contents | All Slides | Link List | Examples | CSCI E-12

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="applic1. <p>What ice cream do you like?</p> 2. <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate" /> 3. <label for="icecream_chocolate" >Chocolate</label> 4. <br/> 5. <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla" /> 6. <label for="icecream_vanilla" >Vanilla</label> 7. <br/> 8. <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry" /> 9. <label for="icecream_strawberry" >Strawberry</label> 10. <br/> 11. <input type="checkbox" name="icecream" id="icecream_ginger" value="ginger" /> 12. <label for="icecream_ginger" >Ginger</label> 13. <br/> 14. <input type="checkbox" name="icecream" id="icecream_hcp" value="herrellchocolatepudding"15. <label for="icecream_hcp" >Herrell's Chocolate Pudding</label> 16. <p> 17. <input type="submit" value="Submit Information" name="submit" /></p> 18.</form> 19.

Documents

Markup: HTML and XHTML - Harvard University...Markup: HTML and XHTML 13 of 67 2/6/2008 10:40 AM HyperText Markup Language W3C HyperText