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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
2 of 68 2/3/2010 4:55 PM
Markup (XHTML, HTML)
Structure
Content
Style (CSS)
Style
Presentation
Appearance
Function (Javascript)
Actions
Manipulations
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
3 of 68 2/3/2010 4:55 PM
solarsystem‐markup.html
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
4 of 68 2/3/2010 4:55 PM
solarsystem‐style.html
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
5 of 68 2/3/2010 4:55 PM
solarsystem.html
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
7 of 68 2/3/2010 4:55 PM
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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>
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
9 of 68 2/3/2010 4:55 PM
Document Type Declaration
html
head
title
body
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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)
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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>
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
32 of 68 2/3/2010 4:55 PM
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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".
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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. <!-- Browsers will not display comments --> 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. <!-- Comments can 6. span 7. multiple 8. lines --> 9.</p> 10.
Markup Display
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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 &.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
47 of 68 2/3/2010 4:55 PM
HTML 4.0 Strict
HTML 4.0 Transitional
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
49 of 68 2/3/2010 4:55 PM
HTML 2.0November 1995
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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" >
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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)
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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.
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
61 of 68 2/3/2010 4:55 PM
Displayed in a browser:
Open Document Format
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
62 of 68 2/3/2010 4:55 PM
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
63 of 68 2/3/2010 4:55 PM
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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?
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
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
CSCI E-12 - February 3, 2010- Markup http://tomcat.localhost/cocoon/course_webdev/slides/20100203/handout.html
68 of 68 2/3/2010 4:55 PM