XHTML and HTML - Harvard Universitycscie12.dce.harvard.edu › lecture_notes › 2006-07 › 20070206.pdf · XHTML and HTML 17 of 45 2/7/2007 4:26 PM XHTML 1.0 XHTML 1.0 The Extensible

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

1 of 45 2/7/2007 4:26 PM

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

Markup: XHTML and HTMLFebruary 6, 2007

Harvard University Division of Continuing Education

Extension School

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

Copyright 1998-2007 David P. Heitmeyer

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


2 of 45 2/7/2007 4:26 PM

XHTML: a simple example with CSS

View the example.

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

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


3 of 45 2/7/2007 4:26 PM

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.


4 of 45 2/7/2007 4:26 PM

XHTML: a tree view

Amaya

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

Firefox DOM Inspector


5 of 45 2/7/2007 4:26 PM

Eclipse XML Buddy Plugin


6 of 45 2/7/2007 4:26 PM

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


7 of 45 2/7/2007 4:26 PM

Structure and Style

Extensible HyperText Markup Language (XHTML)

Primary purpose: structure and content

Cascading Style Sheets (CSS)

Primary purpose: style, presentation, appearance

This is really more of a "separation of concerns" -- let each one do what they were designed for.


8 of 45 2/7/2007 4:26 PM

Harvard College Admissions

Harvard College Admissions: With CSS disabled:


9 of 45 2/7/2007 4:26 PM

Examples from: CSS Zen Garden

css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually through CSS-based desgin.


10 of 45 2/7/2007 4:26 PM


11 of 45 2/7/2007 4:26 PM

Web Developer Extension for Firefox

Mozilla FirefoxWeb Developer Extension for Firefox


12 of 45 2/7/2007 4:26 PM


13 of 45 2/7/2007 4:26 PM

HyperText Markup Language

W3C HyperText Markup Language Home Page

Specifications from the W3C

XHTML 2.0 Working Draft July 2006XHTML 1.1, Module-based XHTMLMay 2001XHTML 1.0, a reformulation of HTML 4.01 into XML 1.0January 2000HTML 4.01December 1999HTML 4.0December 1997HTML 3.2January 1997HTML 2.0November 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 45 2/7/2007 4:26 PM

Web Standards: Should I care?

What are some benefits?

Improved AccessibilityPeople (Section 508, WAI)Machines

Search EnginesDevices

Stability Forward-compatible and backward-compatible. Separation of Structure and Style

lighter, cleaner pagesmaintenanceredesign

Validation

(X)HTML Well-formedness and Validation Resources

W3C HTML Validation ServiceHTML Tidy Library Projectminerva% tidy -help

Web Standards ProjectThe Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to webtechnologies for all.

What are Web Standards and why should I use them?


15 of 45 2/7/2007 4:26 PM

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:

htmlThe name of the root element.PUBLICAn 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 be usedto locate the parser to a local copy of the DTD.

W3CThe owner of the DTD (in this case the W3C, the World Wide Web Consortium).DTDThe type of document that is referenced (in this case a Document Type Definition, DTD).XHTML 1.0 StrictThe name of the document that the public identifier references.ENThe 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 parser has theDTD available in a local library, the URI is not necessary.


16 of 45 2/7/2007 4:26 PM

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


17 of 45 2/7/2007 4:26 PM

XHTML 1.0

XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) from the W3C. XHTML 1.0 is areformulation 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 45 2/7/2007 4:26 PM

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

Stylestyle

Linklink


19 of 45 2/7/2007 4:26 PM

Basebase

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


20 of 45 2/7/2007 4:26 PM

Structural: html, head, body, title

Firefox DOM Inspector:

View the example.

<?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 45 2/7/2007 4:26 PM

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

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

body, W3C annotated DTD body, DTDParse


22 of 45 2/7/2007 4:26 PM

body

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

body, W3C annotated DTD body, DTDParse

Content model for body:

%Block entity referred to:

%Block entity defined:

% Block entity % Block "(%bl%misc;)*"Expand the en(%block, %mis

% block div | %l%blocktetable"

% h"h1% ldl"% bhr add

% block f"p | h1 h5 | h6 dl | preblockquofieldset

% misc "%misc.in

% m| d

% misc f"noscrip

% Block fully e"(p | h1 | h2h6 | div | ul| hr | blockqfieldset | tanoscript | inscript)*"

Reading the XHTML Specification

You can start with the HTML 4.01 Specification

XHTML in particular...

Element ProhibitionsHTML Compatibility Guidelines


23 of 45 2/7/2007 4:26 PM

Hypertext

The a element.[a Element, DTDParse]

Example 2.1

Example 2.1 Source:

Example 2.1 Rendered:

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

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


24 of 45 2/7/2007 4:26 PM

An aside: Absolute and Relative Locations

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

Example 2.2

Example 2.2 Source:


Diplomacy of Lewis and Clark stressed in exhibit

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

Example 2.3

Example 2.3 Source:


Slide 1

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

Example 2.4

Example 2.4 Source:


copyright information

Relative Paths to Parent Locations

../ refers to the parent directory

./ refers to current directory

Example 2.5

Example 2.5 Source:


Up a level

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

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

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

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


25 of 45 2/7/2007 4:26 PM

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


26 of 45 2/7/2007 4:26 PM

Text: Heading

h1 , h2 , h3 , h4 , h5 , h6

Example 2.6

Example 2.6 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


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


27 of 45 2/7/2007 4:26 PM

Heading

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


28 of 45 2/7/2007 4:26 PM

Text: Block

div , p , address , blockquote , pre

Example 2.7

Example 2.7 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. Aenean aliquam,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 a risus.Fusce bibendum sagittis magna.

Curious about the Lorem Ipsum text?

Example 2.8

Example 2.8 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.9

Example 2.9 Source:

<div style="text-align: center; background-color: yellow; color: red; font-family: Times, serif; fon1. 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/" >Curious about the Lorem Ipsum text?</a></p> 14.

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


29 of 45 2/7/2007 4:26 PM


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 its creed: Wehold 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 the sons offormer 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 heat ofinjustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom andjustice.

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 governor havinghis lips dripping with the words of interposition and nullification; one day right there in Alabamalittle black boys and black girls will be able to join hands with little white boys and white girls assisters and brothers. I have a dream today!

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

pre: where whitespace is important!

Example 2.10

Example 2.10 Source:

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

<pre>Boston Forecast (°F) 1. High Low 2.Tue 25 12 3.Wed 24 13 4.Thu 26 12 5.Fri 30 15 6.</pre> 7. 8.


30 of 45 2/7/2007 4:26 PM


Boston Forecast (°F) High LowTue 25 12Wed 24 13 Thu 26 12Fri 30 15

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

Example 2.11



Boston Forecast (°F) High Low Tue 25 12 Wed 24 13 Thu 26 12 Fri 30 15

<p>Boston Forecast (°F) 1. High Low 2.Tue 25 12 3.Wed 24 13 4.Thu 26 12 5.Fri 30 15 6.</p> 7. 8.


31 of 45 2/7/2007 4:26 PM

Text: Inline

Text Chapter from HTML 4.01 Specification

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

Example 2.12



Web clients and servers communicate via HTTP.

Example 2.13



NASA was founded in 1958.

Example 2.14



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

Example 2.15



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

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

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

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

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


32 of 45 2/7/2007 4:26 PM

Example 2.16



Strong text and bold textshould not be confused. They may be rendered in the same way on visual browsers. However, rememberthat "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.17



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

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

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


33 of 45 2/7/2007 4:26 PM

Lists

List Chapter from HTML 4.01 Specification

ul , li , ol , dl , dt , dd

Example 2.18



Some of my favorite food categories:

TeaBreadCheeseChipsIce Cream

Example 2.19



TeaKenyanSikkim TemiFormosa Oolong Fancy

Potato ChipsDirty'sArt's and Mary'sTim's Cascade

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

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


34 of 45 2/7/2007 4:26 PM

Example 2.20



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

Example 2.21



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

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

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


35 of 45 2/7/2007 4:26 PM

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.


36 of 45 2/7/2007 4:26 PM

Image

Objects, Images, Applets Chapter from HTML 4.01 Specification

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

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

Example 2.22



Example 2.23



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

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


37 of 45 2/7/2007 4:26 PM

Tables

Tables Chapter from HTML 4.01 Specification

Tables are great for data.

Tables are often co-opted for page layout purposes.

Basic Tablestable , tr , td , th , caption

Example 2.24



A tableColumn 1 Column 2 Column 3

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



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


38 of 45 2/7/2007 4:26 PM

Comments

Comments

Example 2.25



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

<p>You can make comments in XHTML. 1. 2.  3.Comments can be very useful to the person who maintains the page. 4. You should get into the habit of using comments in your XHTML. 5. 6.  8.</p> 9.


39 of 45 2/7/2007 4:26 PM

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


40 of 45 2/7/2007 4:26 PM

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


41 of 45 2/7/2007 4:26 PM

Directory Requests and index.html

Directory without index.html. Note that this assumes the directory permissions are set to rwx---r-x. If not, you may see Forbidden.

Example 2.26



Images from the CSCIE12 Web Site

Directory withindex.html:

Example 2.27



Harvard Academics (index.html)

<a href="http://cscie12.dce.harvard.edu/images/" >Images 1. from the CSCIE12 Web Site</a> 2. 3.

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


42 of 45 2/7/2007 4:26 PM

Software Tools

HTTP Clients

Mozilla FirefoxWeb Developer Extension for Firefox

Microsoft Internet ExplorerOperaSafari (Mac)

SSH Clients and SFTP Clients

SSH

PuTTYOpen SSHSecureCRT available from FAS Software Downloads

File Transfer

WinSCPSecureFX available from FAS Software Downloads

Text or HTML Editor

WindowsYour favorite text editorEclipse (XML Buddy)Notepad++, Editpad, Wordpad, or NotepadDreamweaver

Macintosh Your favorite text editorBBEdit by BareBones SoftwareSimpleText Dreamweaver

Linux/UNIXYour favorite text editorEmacsNote that Emacs is available for UNIX, Windows, Macintosh nXML mode for Emacs

(X)HTML Well-formedness and Validation Resources

W3C HTML Validation ServiceHTML Tidy Library Projectminerva% tidy -help


43 of 45 2/7/2007 4:26 PM

HTML Tidy

HTML Tidy Library Project

My favorite tidy options:

-wrap 0-indent-asxhtml-e-m

minerva% tidy -h

tidy -helptidy [option...] [file...] [option...] [file...]Utility to clean up and pretty print HTML/XHTML/XMLsee http://tidy.sourceforge.net/

Options for HTML Tidy for Linux/x86 released on 1st February 2004:

File manipulation----------------- -out or -o <file> specify the output markup file -config <file> set configuration options from the specified <file> -f <file> write errors to the specified <file> -modify or -m modify the original input files

Processing directives--------------------- -indent or -i indent element content -wrap <column> wrap text at the specified <column> (default is 68) -upper or -u force tags to upper case (default is lower case) -clean or -c replace FONT, NOBR and CENTER tags by CSS -bare or -b strip out smart quotes and em dashes, etc. -numeric or -n output numeric rather than named entities -errors or -e only show errors -quiet or -q suppress nonessential output -omit omit optional end tags -xml specify the input is well formed XML -asxml convert HTML to well formed XHTML -asxhtml convert HTML to well formed XHTML -ashtml force XHTML to well formed HTML -access <level> do additional accessibility checks (<level> = 1, 2, 3)

Character encodings------------------- -raw output values above 127 without conversion to entities -ascii use US-ASCII for output, ISO-8859-1 for input -latin0 use US-ASCII for output, ISO-8859-1 for input -latin1 use ISO-8859-1 for both input and output -iso2022 use ISO-2022 for both input and output -utf8 use UTF-8 for both input and output -mac use MacRoman for input, US-ASCII for output -win1252 use Windows-1252 for input, US-ASCII for output -ibm858 use IBM-858 (CP850+Euro) for input, US-ASCII for output -utf16le use UTF-16LE for both input and output -utf16be use UTF-16BE for both input and output -utf16 use UTF-16 for both input and output -big5 use Big5 for both input and output -shiftjis use Shift_JIS for both input and output -language <lang> set the two-letter language code <lang> (for future use)

Miscellaneous------------- -version or -v show the version of Tidy -help, -h or -? list the command line options -help-config list all configuration options -show-config list the current configuration settings

Use --blah blarg for any configuration option "blah" with argument "blarg"


44 of 45 2/7/2007 4:26 PM

Input/Output default to stdin/stdout respectivelySingle letter options apart from -f may be combinedas in: tidy -f errs.txt -imu foo.htmlFor further info on HTML see http://www.w3.org/MarkUp


45 of 45 2/7/2007 4:26 PM

Download/Viewing Source of a Web Page from another site.

Browser: "View Source" or "Save"GNU WgetMinerva Account: minerva$ wget http://cscie12.dce.harvard.edu/lecture_notes/2006-07/20070130/links.htmlminerva$ wget -hminerva$ man wget

$ wget http://cscie12.dce.harvard.edu/lecture_notes/2006-07/20070130/links.html--13:49:48-- http://cscie12.dce.harvard.edu/lecture_notes/2006-07/20070130/links.html => `links.html.1'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.1' saved [26,743/26,743]

Minerva Account: minerva%% lwp-downloadhttp://cscie12.dce.harvard.edu/lecture_notes/2006-07/20070130/links.htmlminerva$ lwp-download --helpminerva$ 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

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

Documents

XHTML and HTML - Harvard Universitycscie12.dce.harvard.edu › lecture_notes › 2006-07 › 20070206.pdf · XHTML and HTML 17 of 45 2/7/2007 4:26 PM XHTML 1.0 XHTML 1.0 The Extensible