csci e-12 - february 3, 201cscie12.dce.harvard.edu/lecture_notes/2010/20100203.pdf ·...

CSCI E‐12 Fundamentals ofWebsite Development

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home

Februrary 3, 2010

Harvard UniversitySummer School

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

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

CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html

1 of 68 2/3/2010 4:55 PM

Markup for the Web (XHTML and HTML)

Ed's Weenies ‐ Frankly Fabulous!

A form for lecture feedback will be available from the course web site. Please take two minutes to fill it out after youhave seen the lecture.


2 of 68 2/3/2010 4:55 PM

Markup (XHTML, HTML)

Structure

Content

Style (CSS)

Style

Presentation

Appearance

Function (Javascript)

Actions

Manipulations


3 of 68 2/3/2010 4:55 PM

solarsystem‐markup.html


4 of 68 2/3/2010 4:55 PM

solarsystem‐style.html


5 of 68 2/3/2010 4:55 PM

solarsystem.html


6 of 68 2/3/2010 4:55 PM

Example 2.1 ‐ Solar System ‐ Structure, Style, and Function ‐ View example by itself

Markup Screenshot


7 of 68 2/3/2010 4:55 PM


8 of 68 2/3/2010 4:55 PM

Start Tag

Element Name

Attribute and Value Pairs

Content

End Tag

A Hypertext Link

Markup for a Hypertext link:

Start Tag<a href="http://www.harvard.edu/">Harvard</a>

Element Name<a href="http://www.harvard.edu/">Harvard</a>

Attribute<a href="http://www.harvard.edu/">Harvard</a>

Attribute Value<a href="http://www.harvard.edu/">Harvard</a>

Content<a href="http://www.harvard.edu/">Harvard</a>

End Tag<a href="http://www.harvard.edu/">Harvard</a>


9 of 68 2/3/2010 4:55 PM

Document Type Declaration

html

head

title

body


10 of 68 2/3/2010 4:55 PM

Create an XHTML document

Text Editor

Hello World content:

The Blue Marble from The Visible Earth (NASA)

Lorem Ipsum text

Validate with the W3C Markup Validator

Test in browser (locally)

Prepare Web server host folder

Login to course web hosting server

public_html folder

permissions set correctly

Transfer Files to course web hosting server

Test in browser (server)


11 of 68 2/3/2010 4:55 PM

The software information and recommendations page of the course web site is a good place to start (Home ‐> Help,Tutorials and Reference ‐> Software)

While a student at Harvard, there are a variety of software packages you may download and use through FASInformation Technology Software Downloads. Note that "keyed" software must be run from a computer that is onan on‐campus network (which includes VPN).

Web Hosting (Harvard ‐ morpheus.dce.harvard.edu)

HTTP Client (Web Browser)

SSH Client

FTP/SFTP Client

Text Editor or HTML Editor

Validators and Checkers


12 of 68 2/3/2010 4:55 PM

For this course, Harvard will be your web hosting service. A server is dedicated to this course. Details on accessing (SSHand FTP) will be provided in Assignment 1.

Host: morpheus.dce.harvard.edu

Example username: jharvard (for the person John Harvard)

URL: http://morpheus.dce.harvard.edu/~jharvard/index.html

Maps to file: /home/courses/j/h/jharvard/public_html/index.html


13 of 68 2/3/2010 4:55 PM

http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10

Schemehttp://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10

Common schemes: http, https, ftp, mailto, file, rtsp

Hosthttp://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10

Porthttp://cscie12.dce.harvard.edu:80/lecture_notes/2009/20090128/toc.html#slide10

Pathhttp://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10

Fragment Identifierhttp://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10


14 of 68 2/3/2010 4:55 PM

User directories

Web documents for each user are kept in the user's home directory, in a directory traditionally named public_html. Asan example, for the user jharvard whose home directory is /home/courses/j/h/jharvard

URI http://morpheus.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 thisdirectory is called the "document root" of the Web server, for example, /www/htdocs.

URI http://www.fas.harvard.edu/museums/index.php

File /www/htdocs /museumx/index.php


15 of 68 2/3/2010 4:55 PM

URL paths that map to a directory. For example:http://www.harvard.edu/museums/

index.html (Web server configuration)

Auto Index

"Forbidden" response


16 of 68 2/3/2010 4:55 PM

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

Relative locations (URLs) are resolved according to the location (URL) of the containing (starting) document!

Absolute or Fully Qualified URLs

Absolute, or fully‐qualified, URLs specify the complete information (scheme, host, port, path).

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

Relative or Partial URLs

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

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

Relative to Server Root

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

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


17 of 68 2/3/2010 4:55 PM

../refers to the parent directory

./refers to current directory

Containing Page:http://www.harvard.edu/museums/index.html

Relative URL Resolved URL

../index.html http://www.harvard.edu/index.html

../arts/index.html http://www.harvard.edu/arts/index.html

images/peabody.jpg http://www.harvard.edu/museums/images/peabody.jpg

Relative links are "transportable":

Containing Page:http://stage.harvard.edu/museums/index.html

Relative Link Document

../index.html http://stage.harvard.edu/index.html

../arts/index.html http://stage.harvard.edu/arts/index.html

images/peabody.jpg http://stage.harvard.edu/museums/images/peabody.jpg


18 of 68 2/3/2010 4:55 PM

XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) from the W3C. XHTML 1.0 is a reformulation ofHTML 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 called DTDParse. Veryuseful to people.

XHTML 1.0 Strict

77 Elements

90 Attributes

XHTML 1.0 Transitional

89 Elements

120 Attributes


19 of 68 2/3/2010 4:55 PM

Grouped by modules defined by XHTML modularization.

Structural

body, head, html, title

Text

abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5,

h6, kbd, p, pre, q, samp, span, strong, var

Heading

h1, h2, h3, h4, h5, h6

Block

address, blockquote, div, p, pre

Inline

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

Flow

Heading, Block, Inline

Hypertext

a

List

dl, dt, dd, ol, ul, li

Applet, deprecated.

applet, param

Text Extensions

Presentation

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

Edit

del, ins

Bi‐directional text

bdo

Forms

Basic Forms

form, input, label, select, option, textarea

Forms

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

Tables

Basic Tables

caption, table, td, th, tr

Tables

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

Image

img

Client‐side Imagemap

area, map

Object

object, param

Frames


20 of 68 2/3/2010 4:55 PM

frameset, frame, noframes

Iframe

iframe

Metainformation

meta

Script

script, noscript

Style

style

Link

link

Base

base

Legacy, deprecated.

basefont, center, dir, font, isindex, menu, s, strike, u


21 of 68 2/3/2010 4:55 PM

Grouped by modules defined by XHTML modularization.

Structural

body, head, html, title

Text

abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5,

h6, kbd, p, pre, q, samp, span, strong, var

Heading

h1, h2, h3, h4, h5, h6

Block

address, blockquote, div, p, pre

Inline

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

Flow

Heading, Block, Inline

Hypertext

a

List

dl, dt, dd, ol, ul, li

Applet, deprecated.

applet, param

Text Extensions

Presentation

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

Edit

del, ins

Bi‐directional text

bdo

Forms

Basic Forms

form, input, label, select, option, textarea

Forms

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

Tables

Basic Tables

caption, table, td, th, tr

Tables

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

Image

img

Client‐side Imagemap

area, map

Object

object, param

Frames


22 of 68 2/3/2010 4:55 PM

frameset, frame, noframes

Iframe

iframe

Metainformation

meta

Script

script, noscript

Style

style

Link

link

Base

base

Legacy, deprecated.

basefont, center, dir, font, isindex, menu, s, strike, u


23 of 68 2/3/2010 4:55 PM

h1 , h2 , h3 , h4 , h5 , h6

Example 2.2 ‐ Headings h1, h2, h3, h4, h5, h6 ‐ View example by itself

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.

Markup Display


24 of 68 2/3/2010 4:55 PM

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


25 of 68 2/3/2010 4:55 PM

div , p , address , blockquote , pre

div and p

Example 2.3 ‐ 'div' and 'p' ‐ View example by itself

view plain print ?

<div style="text-align: center; background-color: yellow; color: red; font-family: Times, serif; font-weight: bold;">

1.

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></p> 14.

Markup Display


26 of 68 2/3/2010 4:55 PM

blockquote

Example 2.4 ‐ 'blockquote' and 'address' ‐ View example by itself

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.

address

Example 2.5 ‐ 'address' element ‐ View example by itself

view plain print ?

<div>The Science Center is home to several large lecture halls, the Greenhouse Cafe, 1. computer labs, the Cabot Science Library, and the Museum of Historical Scientific 2. Instruments. The address of the Science Center is: 3. <address>1 Oxford St., Cambridge, Massachusetts, 02138</address></div> 4.

Markup Display

Markup Display


27 of 68 2/3/2010 4:55 PM

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

Example 2.6 ‐ Whitespace in Markup ‐ View example by itself

view plain print ?

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

pre

pre: Where whitespace is important!

Example 2.7 ‐ 'pre' element ‐ View example by itself

view plain print ?

<pre xml:space="preserve">Boston Forecast (°F) 1. High Low 2.Wed 25 11 3.Thu 18 11 4.Fri 31 27 5.Sat 38 20 6.Sun 43 34</pre> 7. 8.

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

Example 2.8 ‐ Whitespace in 'p' ‐ View example by itself

view plain print ?

<p>Boston Forecast (°F) 1. High Low 2.Wed 25 11 3.Thu 18 11 4.Fri 31 27 5.Sat 38 20 6.Sun 43 34</p> 7. 8.

Markup Display

Markup Display

Markup Display


28 of 68 2/3/2010 4:55 PM

Text Chapter from HTML 4.01 Specification

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

Example 2.9 ‐ 'strong', 'bold', 'em', and 'i' elements ‐ View example by itself

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.

Example 2.10 ‐ 'span' element and style ‐ View example by itself

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.

Example 2.11 ‐ 'abbr' element ‐ View example by itself

Web clients and servers communicate via HTTP.

Example 2.12 ‐ 'acronym' element ‐ View example by itself

NASA was founded in 1958.

Example 2.13 ‐ 'q' element ‐ View example by itself

view plain print ?

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

Markup Display

Markup Display

Markup Display Screenshot

Markup Display Screenshot

Markup Display


29 of 68 2/3/2010 4:55 PM

List Chapter from HTML 4.01 Specification

ul , li , ol , dl , dt , dd

Example 2.14 ‐ Unordered List ‐ View example by itself

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.

Example 2.15 ‐ Nested Unordered List ‐ View example by itself

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.

Example 2.16 ‐ Ordered List ‐ View example by itself

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.

Example 2.17 ‐ Dictionary Lists (terms and definitions) ‐ View example by itself

Markup Display

Markup Display

Markup Display

Markup Display


30 of 68 2/3/2010 4:55 PM

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.


31 of 68 2/3/2010 4:55 PM

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

Some samples of lists in action:

The University of Kansas

The White House

Harvard Summer School


32 of 68 2/3/2010 4:55 PM


33 of 68 2/3/2010 4:55 PM

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 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.18 ‐ 'img' element ‐ View example by itself

view plain print ?

<img src="http://cscie12.dce.harvard.edu/images/group.png" alt="Harvard University Extension School Logo" height="65" width="220"/>

1.

Example 2.19 ‐ 'img' element with an anchor ‐ View example by itself

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 Extension School Logo" height="65" width="220"/>

2.

</a> 3.

Markup Display

Markup Display


34 of 68 2/3/2010 4:55 PM

Please read: Tables Chapter from HTML 4.01 Specification

Uses of tables:

Data

Page layout

Basic Tablestable , tr , td , th , caption

Tablestable , tr , td , th , caption , thead , tbody , tfoot , col , colgroup

Example 2.20 ‐ Table ‐ View example by itself

view plain print ?

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

Markup Display


35 of 68 2/3/2010 4:55 PM

Data from the US Census Bureau

Example 2.21 ‐ Simple data table ‐ View example by itself

view plain print ?

<p>United States Urban and Rural Populations</p> 1.<table> 2. <tr> 3. <td rowspan="1" colspan="1">Year</td> 4. <td rowspan="1" colspan="1">Percent Urban</td> 5. <td rowspan="1" colspan="1">Percent Rural</td> 6. </tr> 7. <tr> 8. <td rowspan="1" colspan="1">2000</td> 9. <td rowspan="1" colspan="1">79.2</td> 10. <td rowspan="1" colspan="1">20.8</td> 11. </tr> 12. <tr> 13. <td rowspan="1" colspan="1">1950</td> 14. <td rowspan="1" colspan="1">64.0</td> 15. <td rowspan="1" colspan="1">36.0</td> 16. </tr> 17. <tr> 18. <td rowspan="1" colspan="1">1900</td> 19. <td rowspan="1" colspan="1">39.6</td> 20. <td rowspan="1" colspan="1">60.4</td> 21. </tr> 22. <tr> 23. <td rowspan="1" colspan="1">1850</td> 24. <td rowspan="1" colspan="1">15.4</td> 25. <td rowspan="1" colspan="1">84.6</td> 26. </tr> 27. <tr> 28. <td rowspan="1" colspan="1">1800</td> 29. <td rowspan="1" colspan="1">6.1</td> 30. <td rowspan="1" colspan="1">93.9</td> 31. </tr> 32.</table> 33.<p> 34. Data from <a href="http://www.census.gov/" shape="rect">United States Census Bureau</a> 35.</p> 36.

Markup Display


36 of 68 2/3/2010 4:55 PM

Example 2.22 ‐ Advanced Table ‐ View example by itself

view plain print ?

<table summary="This table shows the percentage of the United States population that lived in ur1. <caption>United States Urban and Rural Populations</caption> 2. <thead> 3. <tr> 4. <th rowspan="1" colspan="1">Year</th> 5. <th rowspan="1" colspan="1">Percent Urban</th> 6. <th rowspan="1" colspan="1">Percent Rural</th> 7. </tr> 8. </thead> 9. <tfoot> 10. <tr> 11. <td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/" shape="rect">United12. Census Bureau</a></td> 13. </tr> 14. </tfoot> 15. <tbody> 16. <tr> 17. <td rowspan="1" colspan="1">2000</td> 18. <td rowspan="1" colspan="1">79.2</td> 19. <td rowspan="1" colspan="1">20.8</td> 20. </tr> 21. <tr> 22. <td rowspan="1" colspan="1">1950</td> 23. <td rowspan="1" colspan="1">64.0</td> 24. <td rowspan="1" colspan="1">36.0</td> 25. </tr> 26. <tr> 27. <td rowspan="1" colspan="1">1900</td> 28. <td rowspan="1" colspan="1">39.6</td> 29. <td rowspan="1" colspan="1">60.4</td> 30. </tr> 31. <tr> 32. <td rowspan="1" colspan="1">1850</td> 33. <td rowspan="1" colspan="1">15.4</td> 34. <td rowspan="1" colspan="1">84.6</td> 35. </tr> 36. <tr> 37. <td rowspan="1" colspan="1">1800</td> 38. <td rowspan="1" colspan="1">6.1</td> 39. <td rowspan="1" colspan="1">93.9</td> 40. </tr> 41. </tbody> 42.</table> 43.

Markup Display


37 of 68 2/3/2010 4:55 PM

The "scope" attribute can be used to associate header information with columns and rows (and also column groups androw groups).

Example 2.23 ‐ Table with 'scope' attribute ‐ View example by itself

view plain print ?

<table> 1. <caption>United States Urban and Rural Populations</caption> 2. <thead> 3. <tr> 4. <th scope="col" rowspan="1" colspan="1">Year</th> 5. <th scope="col" rowspan="1" colspan="1">Percent Urban</th> 6. <th scope="col" rowspan="1" colspan="1">Percent Rural</th> 7. </tr> 8. </thead> 9. <tfoot> 10. <tr> 11. <td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/" shape="rect">United12. Census Bureau</a></td> 13. </tr> 14. </tfoot> 15. <tbody> 16. <tr> 17. <td scope="row" rowspan="1" colspan="1">2000</td> 18. <td rowspan="1" colspan="1">79.2</td> 19. <td rowspan="1" colspan="1">20.8</td> 20. </tr> 21. <tr> 22. <td scope="row" rowspan="1" colspan="1">1950</td> 23. <td rowspan="1" colspan="1">64.0</td> 24. <td rowspan="1" colspan="1">36.0</td> 25. </tr> 26. <tr> 27. <td scope="row" rowspan="1" colspan="1">1900</td> 28. <td rowspan="1" colspan="1">39.6</td> 29. <td rowspan="1" colspan="1">60.4</td> 30. </tr> 31. <tr> 32. <td scope="row" rowspan="1" colspan="1">1850</td> 33. <td rowspan="1" colspan="1">15.4</td> 34. <td rowspan="1" colspan="1">84.6</td> 35. </tr> 36. <tr> 37. <td scope="row" rowspan="1" colspan="1">1800</td> 38. <td rowspan="1" colspan="1">6.1</td> 39. <td rowspan="1" colspan="1">93.9</td> 40. </tr> 41. </tbody> 42.</table> 43. 44.

Markup Display


38 of 68 2/3/2010 4:55 PM

The "headers" attribute can also be used to associate header information with columns and rows. This is typically usedin more complicated tables.

Note the use of the "id" attribute. This is an attribute that can be applied to most any XHTML element. Values for "id"must be unique throughout the document.

The value of "headers" is a space‐separated list of IDREFS (references to "id" names in the document).

Example 2.24 ‐ Table with 'headers' attribute ‐ View example by itself

Markup Display


39 of 68 2/3/2010 4:55 PM

view plain print ?

<table> 1. <caption>United States Urban and Rural Populations</caption> 2. <thead> 3. <tr> 4. <th id="year" rowspan="1" colspan="1">Year</th> 5. <th id="urban" rowspan="1" colspan="1">Percent Urban</th> 6. <th id="rural" rowspan="1" colspan="1">Percent Rural</th> 7. </tr> 8. </thead> 9. <tfoot> 10. <tr> 11. <td colspan="3" rowspan="1">Data from <a href="http://www.census.gov/" shape="rect">United12. Census Bureau</a></td> 13. </tr> 14. </tfoot> 15. <tbody> 16. <tr> 17. <td id="y2000" rowspan="1" colspan="1">2000</td> 18. <td headers="y2000 urban" rowspan="1" colspan="1">79.2</td> 19. <td headers="y2000 rural" rowspan="1" colspan="1">20.8</td> 20. </tr> 21. <tr> 22. <td id="y1950" rowspan="1" colspan="1">1950</td> 23. <td headers="y1950 urban" rowspan="1" colspan="1">64.0</td> 24. <td headers="y1950 ruran" rowspan="1" colspan="1">36.0</td> 25. </tr> 26. <tr> 27. <td id="y1900" rowspan="1" colspan="1">1900</td> 28. <td headers="y1900 urban" rowspan="1" colspan="1">39.6</td> 29. <td headers="y1900 rural" rowspan="1" colspan="1">60.4</td> 30. </tr> 31. <tr> 32. <td id="y1850" rowspan="1" colspan="1">1850</td> 33. <td headers="y1850 urban" rowspan="1" colspan="1">15.4</td> 34. <td headers="y1850 rural" rowspan="1" colspan="1">84.6</td> 35. </tr> 36. <tr> 37. <td id="y1800" rowspan="1" colspan="1">1800</td> 38. <td headers="y1800 urban" rowspan="1" colspan="1">6.1</td> 39. <td headers="y1800 rural" rowspan="1" colspan="1">93.9</td> 40. </tr> 41. </tbody> 42.</table> 43. 44.


40 of 68 2/3/2010 4:55 PM

"col" or "colgroup" elements can be used to as a way to apply styles (style or class attribute) to columns.

Example 2.25 ‐ 'col' element ‐ View example by itself

view plain print ?

<table> 1. <caption>United States Urban and Rural Populations</caption> 2. <col style="background-color: red;" span="1"/> 3. <col style="background-color: yellow; " span="1"/> 4. <col style="background-color: blue;" span="1"/> 5. <thead> 6. <tr> 7. <th scope="col" rowspan="1" colspan="1">Year</th> 8. <th scope="col" rowspan="1" colspan="1">Percent Urban</th> 9. <th scope="col" rowspan="1" colspan="1">Percent Rural</th> 10. </tr> 11. </thead> 12. <tbody> 13. <tr> 14. <td scope="row" rowspan="1" colspan="1">2000</td> 15. <td rowspan="1" colspan="1">79.2</td> 16. <td rowspan="1" colspan="1">20.8</td> 17. </tr> 18. <tr> 19. <td scope="row" rowspan="1" colspan="1">1950</td> 20. <td rowspan="1" colspan="1">64.0</td> 21. <td rowspan="1" colspan="1">36.0</td> 22. </tr> 23. <tr> 24. <td scope="row" rowspan="1" colspan="1">1900</td> 25. <td rowspan="1" colspan="1">39.6</td> 26. <td rowspan="1" colspan="1">60.4</td> 27. </tr> 28. <tr> 29. <td scope="row" rowspan="1" colspan="1">1850</td> 30. <td rowspan="1" colspan="1">15.4</td> 31. <td rowspan="1" colspan="1">84.6</td> 32. </tr> 33. <tr> 34. <td scope="row" rowspan="1" colspan="1">1800</td> 35. <td rowspan="1" colspan="1">6.1</td> 36. <td rowspan="1" colspan="1">93.9</td> 37. </tr> 38. </tbody> 39.</table> 40. 41.

Example 2.26 ‐ 'colgroup' element ‐ View example by itself

Markup Display

Markup Display


41 of 68 2/3/2010 4:55 PM

view plain print ?

<table> 1. <caption>United States Urban and Rural Populations</caption> 2. <colgroup span="1" style="background-color: red;"/> 3. <colgroup span="2" style="background-color: teal;"/> 4. <thead> 5. <tr> 6. <th scope="col" rowspan="1" colspan="1">Year</th> 7. <th scope="col" rowspan="1" colspan="1">Percent Urban</th> 8. <th scope="col" rowspan="1" colspan="1">Percent Rural</th> 9. </tr> 10. </thead> 11. <tbody> 12. <tr> 13. <td scope="row" rowspan="1" colspan="1">2000</td> 14. <td rowspan="1" colspan="1">79.2</td> 15. <td rowspan="1" colspan="1">20.8</td> 16. </tr> 17. <tr> 18. <td scope="row" rowspan="1" colspan="1">1950</td> 19. <td rowspan="1" colspan="1">64.0</td> 20. <td rowspan="1" colspan="1">36.0</td> 21. </tr> 22. <tr> 23. <td scope="row" rowspan="1" colspan="1">1900</td> 24. <td rowspan="1" colspan="1">39.6</td> 25. <td rowspan="1" colspan="1">60.4</td> 26. </tr> 27. <tr> 28. <td scope="row" rowspan="1" colspan="1">1850</td> 29. <td rowspan="1" colspan="1">15.4</td> 30. <td rowspan="1" colspan="1">84.6</td> 31. </tr> 32. <tr> 33. <td scope="row" rowspan="1" colspan="1">1800</td> 34. <td rowspan="1" colspan="1">6.1</td> 35. <td rowspan="1" colspan="1">93.9</td> 36. </tr> 37. </tbody> 38.</table> 39. 40.


42 of 68 2/3/2010 4:55 PM

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


43 of 68 2/3/2010 4:55 PM

Example 2.27 ‐ Comments in Markup ‐ View example by itself

view plain print ?

<p>Comments can be inserted into XHTML and HTML markup. 1.  2. Just as with any code, making good use of comments 3. in your markup is good habit that will reap rewards 4. for the person (who may be you) who has to edit or alter the page. 5.  9.</p> 10.

Markup Display


44 of 68 2/3/2010 4:55 PM

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


45 of 68 2/3/2010 4:55 PM

SGML and XML allow for "character data" (CDATA) sections, where you can have raw <, >, and & in the content. CDATAsections are useful if you are including large blocks of text that may contain <, > or &.


46 of 68 2/3/2010 4:55 PM

(Here but) Yet to Come

HTML 5 / XHTML 5

XHTML 2.0

Present

XHTML 1.1

XHTML 1.0 Strict

XHTML 1.0 Transitional

HTML 4.01 Strict

HTML 4.01 Transitional

Past

HTML 2.0

HTML 3.2


47 of 68 2/3/2010 4:55 PM

HTML 4.0 Strict

HTML 4.0 Transitional


48 of 68 2/3/2010 4:55 PM

W3C HyperText Markup Language Home Page

W3C Web Style Sheets Home Page

WHATWG: Web Hypertext Application Technology WG

Some Markup Specifications

HTML 5 Working Draft (WHATWG)Februrary 2010 (on‐going)

XHTML 1.1 BasicJuly 2008

XHTML 2.0 Working DraftJuly 2006

XHTML 1.1, Module‐based XHTMLMay 2001

XHTML 1.0, a reformulation of HTML 4.01 into XML 1.0January 2000

HTML 4.01December 1999

HTML 4.0December 1997

HTML 3.2January 1997


49 of 68 2/3/2010 4:55 PM

HTML 2.0November 1995


50 of 68 2/3/2010 4:55 PM

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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 used to locate theparser 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 is case‐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 the DTDavailable in a local library, the URI is not necessary.


51 of 68 2/3/2010 4:55 PM

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

Current:

XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.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/html4/strict.dtd">

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

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

Old:

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


52 of 68 2/3/2010 4:55 PM

DOCTYPE statement used by:

validating parsers

validator.w3.org

command‐line validators

Browser Rendering Mode

Standards mode

Quirks mode


53 of 68 2/3/2010 4:55 PM

Markup and Presentation ‐ Transitional

Markup and Presentation ‐ Strict

Flavors have to do with separation of markup and presentation.

Some elements in XHTML 1.0 Transitional not found inStrict

basefont

center

dir

font

s

strike

u

Some attributes in XHTML 1.0 Transitional not found inStrict

background

bgcolor

color

marginheight

marginwidth

face


54 of 68 2/3/2010 4:55 PM

Defining Markup Languages

Standard Generalized Markup Language (SGML)

Extensible Markup Language (XML)

Specific Markup Languages

Hypertext Markup Language (HTML)

Extensible Hypertext Markup Language (XHTML)

Relationships

SGML

XML is a simplified subset of SGML

HTML is an application of SGML

XHTML is an application of XML


55 of 68 2/3/2010 4:55 PM

Main differences between SGML and XML:

SGML XML

End tags can be defined as optional

<img src="images/lake.png" alt="Lake" ><p>Lorem...<p>Ipsum...

End tags always required (even for "empty" elements)

<img src="images/lake.png" alt="Lake" /><p>Lorem...</p><p>Ipsum...</p>

Element and attribute names are not case‐sensitive Element and attribute names are case‐sensitive

Attribute values do not need to be in quotes if the valuescontain alpha‐numeric characters only

Attribute values must always be in quotes

Well‐formed XML documents

elements must be properly nested

elements must have a start and end tag

element names case‐sensitive

attribute values must be enclosed in quote marks

attributes may not be repeated


56 of 68 2/3/2010 4:55 PM

Well‐formed

elements must be properly nested

Right Wrong

<a> <b> <c> </c> </b> </a>

<a> <b> <c> </b> </c> </a>

Start and End Tag. elements must have a start and end tag

Right Wrong

<table> <tr> <td>one</td> <td>two</td> </tr> <tr> <td>three</td> <td>four</td> </tr> </table>

<table> <tr> <td>one <td>two </tr> <tr> <td>three <td>four </tr> </table>

element names case‐sensitive

Right Wrong

<table> <tr> <td>one</td> <td>two</td> </tr> </table>

<TABLE> <TR> <TD>one <td>two </TR> </table>

attribute values must be enclosed in quote marks

Right Wrong

<a href="http://www.harvard.edu/"> Harvard University </a>

<a href=http://www.harvard.edu/> Harvard University </a>

attributes may not be repeated

Valid

Validate against the rules (elements, attributes, content models) of a specific grammar (e.g. XHTML 1.0 Transitional).

Ways of expression grammars:

Document Type Definitions (DTD)

W3C XML Schema

Relax NG

Schematron

Description


57 of 68 2/3/2010 4:55 PM

A valid HTML (SGML) document is not necessarily a valid XHTML (XML) document:

Mixed‐case element names

Some end tags missing

element with content

"empty" elements

Attribute values not always in quotes

Valid HTML 4.01 Transitional (SGML)


58 of 68 2/3/2010 4:55 PM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 1.<html> 2.<HEAD> 3.<TiTLe>An HTML Document</title> 4.</head> 5.<BODY> 6.<h1>Lorem ipsum</h1> 7.<P><img src="http://open.thumbshots.org/image.pxf?url=http://lipsum.com/" 8. alt="www.lipsum.com"> 9.<p><a href="http://www.lipsum.com/">Lorem Ipsum - Generator</a> 10.<P>Ut vitae felis non pede molestie sodales. Praesent a metus. Nulla facilisi. Donec eu felis et sa11.<ul> 12.<li>Nulla massa augue,</li> 13.<li>vestibulum id, 14.<li>scelerisque quis, 15.<li>gravida vitae, 16.<li>dolor. 17.</ul> 18.<hr> 19.<table border=5> 20.<tr> 21.<Td>Praesent sit amet orci a lacus egestas tincidunt. Duis ullamcorper, est at pharetra congue, eni22.<Td>Praesent bibendum, orci at tincidunt egestas, nisl mi imperdiet quam, at feugiat arcu dolor vit23.<td>Curabitur pharetra. Sed congue dapibus leo. Fusce a diam. Mauris non arcu sed leo placerat semp24.</table> 25.</body> 26.</html> 27.

Valid XHTML 1.0 Transitional (XML)

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3.<head> 4.<title>An XHTML Document</title> 5.</head> 6.<body> 7.<h1>Lorem ipsum</h1> 8.<p><img src="http://open.thumbshots.org/image.pxf?url=http://lipsum.com/" alt="www.lipsum.com" /></p>

9.

<p><a href="http://www.lipsum.com/">Lorem Ipsum - Generator</a></p> 10.<p>Ut vitae felis non pede molestie sodales. Praesent a metus. Nulla facilisi. Donec eu felis et sa11.<ul> 12.<li>Nulla massa augue,</li> 13.<li>vestibulum id,</li> 14.<li>scelerisque quis,</li> 15.<li>gravida vitae,</li> 16.<li>dolor.</li> 17.</ul> 18.<hr /> 19.<table border="5"> 20.<tr> 21.<td>Praesent sit amet orci a lacus egestas tincidunt. Duis ullamcorper, est at pharetra congue, eni22.<td>Praesent bibendum, orci at tincidunt egestas, nisl mi imperdiet quam, at feugiat arcu dolor vit23.<td>Curabitur pharetra. Sed congue dapibus leo. Fusce a diam. Mauris non arcu sed leo placerat semp24.</tr> 25.</table> 26.</body> 27.</html> 28.


59 of 68 2/3/2010 4:55 PM

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.


60 of 68 2/3/2010 4:55 PM

Markup languages created using SGML or XML are "applications" of SGML or XML.

Math Markup Language

Open Document Format

DocBook

Scalable Vector Graphics

RSS

Atom

Math Markup Language

MathML Markup


61 of 68 2/3/2010 4:55 PM

Displayed in a browser:

Open Document Format


62 of 68 2/3/2010 4:55 PM


63 of 68 2/3/2010 4:55 PM


64 of 68 2/3/2010 4:55 PM

Question: What do the White House, GE, IBM, Library of Congress, EDS, Stanford, AGFA, Abbott, and Princetonhave in common?Answer: They adhere to Web standards.Some sites that adhere to Web standards

Standards for:

Markup (XHTML, HTML)

Style (CSS)

Function (ECMAScript, DOM)

Benefits:

Improved Accessibility

People (Section 508, WAI)

Machines

Search Engines

Devices

Stability

Forward‐compatible and backward‐compatible.

Separation of Structure and Style

lighter, cleaner pages

maintenance

redesign

Validation


65 of 68 2/3/2010 4:55 PM

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?


66 of 68 2/3/2010 4:55 PM

Markup used for structure and semantics

Current markup standards in use.

XHTML 1.1

XHTML 1.0 Strict and Transitional

HTML 4.01 Strict, Transitional, and Frameset

Beginning to see: HTML 5 and XHTML 5

Markup defined by XML or SGML

XHTML from XML

HTML from SGML

Valid Documents

DTD describes markup language (elements and attributes)

DOCTYPE statement in document expresses what type of document it is

Semantic Documents

Use of valid markup to impart meaning. For example:

h1, h2, h3, h4, h5, and h6 elements for content headings, sub‐headings, etc.

thead, tfoot, and tbody elements for tables

label element for form input elements


67 of 68 2/3/2010 4:55 PM

Copyright © 1998‐2010 David P. Heitmeyer

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home


68 of 68 2/3/2010 4:55 PM