markup for the web
TRANSCRIPT
Markup for the Web February 4, 2009
Harvard University Division of Continuing Education
Extension School
Course Web Site: http://cscie12.dce.harvard.edu/
Copyright 1998-2009 David P. Heitmeyer
Instructor email: [email protected] Course staff email: [email protected]
Table of Contents | All Slides | Link List | Examples | CSCI E-12
Page 1 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Announcements
Sections Why, What, How, When, and Where
Assignments Saturday to Saturday (2 weeks) Submission by 12 noon EST
RSS feed of course announcements is available. Student Locations. Submit your location on the map by 2/20 for 10 "community participation" points.
Page 2 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
This Lecture's Topics
Your Beginning Toolbox Markup (HTML and XHTML)
A form for lecture feedback will be available from the course web site. Please take two minutes to fill it out after you have seen the lecture.
What was the most important point in the lecture? What was the "muddiest" part? What would you like to hear more about?
Page 3 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Your Beginning Toolbox
While a student at Harvard, there are a variety of software packages you may download and use through FAS Information Technology Software Downloads. Note that "keyed" software must be run from a computer that is on an on-campus network.
Web Hosting (Harvard - morpheus.dce.harvard.edu) HTTP Client (Web Browser) SSH Client FTP/SFTP Client Text Editor or HTML Editor Validators and Checkers
Page 4 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Web Hosting
For this course, Harvard will be your web hosting service. A server is dedicated to this course. Details on accessing (SSH and 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
Page 5 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
URI to Filename Mapping
User directories
Web documents for each user are kept in the user's home directory, in a directory traditionally named public_html. As an example, for the user jharvard whose home directory is /home/courses/j/h/jharvard
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://morpheus.dce.harvard.edu/~jharvard /index.html File /home/courses/j/h/jharvard/public_html /index.html
URI http://www.fas.harvard.edu/museums/index.php File /www/htdocs /museumx/index.php
Page 6 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Directory Requests and "index.html"
Directory without index.html. Note that this assumes the directory permissions are set correctly. If not, you may see Forbidden.
Example 2.1
Example 2.1 Source:
Example 2.1 Rendered:
Images from the CSCIE12 Lecture 1
Directory with "index" file (such as 'index.html' or 'index.php'):
Example 2.2
Example 2.2 Source:
Example 2.2 Rendered:
Harvard Museums
Does it have to be "index.html"?
This is a configuration option for the HTTP server. For morpheus, the setting is:
DirectoryIndex index.html index.htm index.shtml index.php index.php4 index.php3 index.phtml index.cgi
view plain copy to clipboard print ?
1. <a href="http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/images/" shape="rect" > 2. Images from the CSCIE12 Lecture 1</a>
view plain copy to clipboard print ?
1. <a href="http://www.harvard.edu/museums/" shape="rect" >Harvard Museums</a>
Page 7 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
HTTP Clients
Firefox
Internet Explorer
Chrome
Opera
Safari
Page 8 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Web Browser - It isn't just for breakfast surfing anymore.
Your web browser is not only useful for "using" the web, but it can be a powerful tool for web development.
"View Source"
Firefox Firebug Extension for Firefox Web Developer Extension for Firefox
Page 9 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
HTTP Clients - Browser Statistics
Browser Statistics
Source: Browser Market Share from Net Applications.com (January 2009)
W3 Schools
Source: w3schools.com (January 2009xs)
Harvard iSites (Course Sites)
Source: Harvard, iCommons (December 2008 and January 2009)
Grains of Salt photo from Flickr user kevindooley
Page 10 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Text or HTML Editor
Please start with your favorite text editor!
Window/Mac/Linux
Amaya, an Open Source editor from W3C KompoZer, an Open Source editor
Windows
Notepad++, Editpad or Wordpad or Notepad Dreamweaver NetObjects Fusion
Mac
SimpleText BBEdit BareBones Software Dreamweaver
Linux
Emacs nXML mode for Emacs
Page 11 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Markup Checking and Validation Resources
W3C Markup Validation Service is a free service by the W3C that helps checkthe validity of Web documents. HTML Tidy is software that attempts to fix invalid XHTML and HTML and to improve the layout and indent style of the markup. morpheus% tidy -help
Page 12 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
SSH (Remote Login)
PuTTY, http://www.chiark.greenend.org.uk/~sgtatham/putty/ SecureCRT, Van Dyke Technologies, http://www.vandyke.com/products/ Available through FAS Information Technology Software Downloads OpenSSH, http://www.openssh.org/ SSH Secure Shell, http://www.ssh.com/
PuTTY Screenshots
Page 13 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
FTP and SFTP (Move files from here to there and back again)
Secure FX, Van Dyke Technologies, http://www.vandyke.com/products/ Available through FAS Information Technology Software Downloads Firefox Plugin: FireFTP For the Mac: MacFuse, Fetch.
Page 14 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
HTTP Client and Server
Page 15 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
URL: A Web Address
http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html
Scheme http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10
Common schemes: http, https, ftp, mailto, file, rtsp
Host http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10
Port http://cscie12.dce.harvard.edu:80/lecture_notes/20080130/toc.html#slide10
Path http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10
Fragment Identifier http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html#slide10
Page 16 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Client-side Web Parts: Markup, Style, Function
Markup (XHTML, HTML)Structure Content
Style (CSS)Style Presentation Appearance
Function (Javascript)Actions
Manipulations
Structure + Style + Function: planets.html
Structure + Style: planets-style.html
Structure: planets-markup.html
Page 17 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Benefits of Web Standards
Question: What do the White House, GE, IBM, Library of Congress, EDS, Stanford, AGFA, Abbott, and Princeton have in common? Answer: They 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
Web Standards Project The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.
What are Web Standards and why should I use them?
Page 18 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Web Standards: Markup and Style
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) January 2009 XHTML 1.1 Basic July 2008 XHTML 2.0 Working Draft July 2006 XHTML 1.1, Module-based XHTML May 2001 XHTML 1.0, a reformulation of HTML 4.01 into XML 1.0 January 2000 HTML 4.01 December 1999 HTML 4.0 December 1997 HTML 3.2 January 1997 HTML 2.0 November 1995
Page 19 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
The Ghosts of Christmas Markup Past, Present and Yet to Come
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 HTML 4.0 Strict HTML 4.0 Transitional
Future
HTML 5 / XHTML 5 XHTML 2.0
Page 20 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
"Strict" vs "Transitional"
Flavors have to do with separation of markup and presentation.
Markup and Presentation - Transitional
Markup and Presentation - Strict
Some elements in XHTML 1.0 Strict not found in Transitional
basefont center dir font s strike u
Some attributes in XHTML 1.0 Strict not found in Transitional
background bgcolor color marginheight marginwidth face
Page 21 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Components of XHTML Elements
Start Tag Element Name Attribute and Value Pairs
Content End Tag
A Hypertext Link
Markup for a Hypertext link:
<a href="http://www.harvard.edu/">Harvard</a>
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>
Page 22 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
SGML, XML, HTML, and XHTML
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
Page 23 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
SGML and XML
Main differences between SGML and XML:
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
SGML XML
End tags can be defined as optional End tags always required (even for "empty" elements)
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 values contain alpha-numeric characters only
Attribute values must always be in qutoes
Page 24 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
HTML and XHTML Compared
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)
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.
view plain copy to clipboard print ?
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2. <html> 3. <HEAD> 4. <TiTLe>An HTML 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/" 9. alt="www.lipsum.com"> 10. <p><a href="http://www.lipsum.com/">Lorem Ipsum - Generator</a> 11. <P>Ut vitae felis non pede molestie sodales. Praesent a metus. Nulla facilisi. Donec eu felis et sapien fermentum consequat. Quisque at urna.
12. <ul> 13. <li>Nulla massa augue,</li> 14. <li>vestibulum id, 15. <li>scelerisque quis, 16. <li>gravida vitae, 17. <li>dolor. 18. </ul> 19. <hr> 20. <table border=5> 21. <tr> 22. <Td>Praesent sit amet orci a lacus egestas tincidunt. Duis ullamcorper, est at pharetra congue, enim ligula rutrum orci, ut consequat est magn
23. <Td>Praesent bibendum, orci at tincidunt egestas, nisl mi imperdiet quam, at feugiat arcu dolor vitae dui. Ut porta ante ut dolor. 24. <td>Curabitur pharetra. Sed congue dapibus leo. Fusce a diam. Mauris non arcu sed leo placerat semper. 25. </table> 26. </body>
Page 25 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Valid XHTML 1.0 Transitional (XML)
view plain copy to clipboard print ?
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. <html xmlns="http://www.w3.org/1999/xhtml"> 4. <head> 5. <title>An XHTML Document</title> 6. </head> 7. <body> 8. <h1>Lorem ipsum</h1> 9. <p><img src="http://open.thumbshots.org/image.pxf?url=http://lipsum.com/" alt="www.lipsum.com" /></p> 10. <p><a href="http://www.lipsum.com/">Lorem Ipsum - Generator</a></p> 11. <p>Ut vitae felis non pede molestie sodales. Praesent a metus. Nulla facilisi. Donec eu felis et sapien fermentum consequat. Quisque at urna. 12. <ul> 13. <li>Nulla massa augue,</li> 14. <li>vestibulum id,</li> 15. <li>scelerisque quis,</li> 16. <li>gravida vitae,</li> 17. <li>dolor.</li> 18. </ul> 19. <hr /> 20. <table border="5"> 21. <tr> 22. <td>Praesent sit amet orci a lacus egestas tincidunt. Duis ullamcorper, est at pharetra congue, enim ligula rutrum orci, ut consequat est magn23. <td>Praesent bibendum, orci at tincidunt egestas, nisl mi imperdiet quam, at feugiat arcu dolor vitae dui. Ut porta ante ut dolor.</td> 24. <td>Curabitur pharetra. Sed congue dapibus leo. Fusce a diam. Mauris non arcu sed leo placerat semper.</td> 25. </tr> 26. </table> 27. </body>
Page 26 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Examples of Markup Languages
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
Page 27 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Math Markup Language
Page 28 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Open Document Format
Page 29 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Well-formed (X)HTML and Valid (X)HTML
Well-formed
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
Valid
Validate against the rules (elements, attributes, content models) of a specific grammar (e.g. XHTML 1.0 Transitional).
Two pieces to be concerned with:
Specifying the type of document. The "Document Type Declaration" is part of a markup document that declares what type of document it is. The rules for the grammar. This is a "Document Type Definition" (DTD), which contains the definitions for all the elements, attributes, and content models.
Page 30 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
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 Strict//EN" Â Â "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
A closer look at the components follows:
html The name of the root element. PUBLIC An indication that the DTD is a public standard. Private standards would use "SYSTEM". "-//W3C//DTD XHTML 1.0 Strict//EN" The formal public identifier (FPI) for the DTD (Document Type Declaration). This identifier can be used to locate the parser to a local copy of the DTD.
W3C The owner of the DTD (in this case the W3C, the World Wide Web Consortium). DTD The type of document that is referenced (in this case a Document Type Definition, DTD). XHTML 1.0 Strict The name of the document that the public identifier references. EN The language identifier (in this case, "EN" = English). Note that the language code 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 DTD available in a local library, the URI is not necessary.
Page 31 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Common XHTML and HTML Document Type Declarations and DTDs
Some Document Type Declarations for 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.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" >
Page 32 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Effects of the Document Type Declaration
DOCTYPE statement used by:
validating parsers validator.w3.org command-line validators
Browser Rendering Mode Standards mode Quirks mode
Page 33 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
XHTML 1.0
XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) from the W3C. XHTML 1.0 is a reformulation of HTML 4.0 in XML 1.0. It comes in three "flavors": strict, transitional, and frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Documentation for XHTML 1.0
XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) (W3C)
This is the official specification. It has very readable sections as well as the technical definitions.
XHTML 1.0 Strict DTD (W3C)
The DTD itself -- more useful to parsers than to humans.
XHTML 1.0 Annotated DTD (W3C)
The annotated (with hyperlinks) version of the DTD. Very useful to humans.
XHTML 1.0 Strict documentation (DTDParse)
Documentation produced directly from the DTD by Norman Walsh's great Perl-based tool called DTDParse. Very useful to people.
XHTML 1.0 Strict 77 Elements 90 Attributes
XHTML 1.0 Transitional 89 Elements 120 Attributes
Page 34 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
XHTML Elements
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 frameset, frame, noframes
Iframe iframe
Metainformation meta
Script script, noscript
Style style
Link
Page 35 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
link
Base base
Legacy, deprecated. basefont, center, dir, font, isindex, menu, s, strike, u
Page 36 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Our Solar System
planets.html
Page 37 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
view plain copy to clipboard print ?
1. <?xml version="1.0"?> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5. <head> 6. <title>Our Solar System</title> 7. <link rel="stylesheet" href="planets.css" type="text/css"/> 8. <script type="text/javascript" src="js/jquery.js"> 9. </script> 10. <script type="text/javascript" src="js/thickbox/thickbox-uncompressed.js"> 11. </script> 12. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 13. </head> 14. <body> 15. <h1>Our Solar System</h1> 16. <div class="gallery"> 17. <p> 18. <a href="images/planets/sol.jpg" title="Sol" class="thickbox" rel="planets"> 19. <img src="images/planets/planets144/sol.jpg" alt="Sol"/> 20. <br/>Sol</a> 21. 22. </p> 23. <p> 24. <a href="images/planets/mercury.jpg" title="Mercury" class="thickbox" 25. rel="planets"> 26. <img src="images/planets/planets144/mercury.jpg" alt="Mercury"/> 27. <br/>Mercury</a> 28. </p> 29. <p> 30. <a href="images/planets/venus.jpg" title="Venus" class="thickbox" 31. rel="planets"> 32. 33. <img src="images/planets/planets144/venus.jpg" alt="Venus"/> 34. <br/>Venus</a> 35. </p> 36. <p> 37. <a href="images/planets/earth.jpg" title="Earth" class="thickbox" 38. rel="planets"> 39. <img src="images/planets/planets144/earth.jpg" alt="Earth"/> 40. <br/>Earth</a> 41. </p> 42. 43. <p> 44. <a href="images/planets/mars.jpg" title="Mars" class="thickbox" 45. rel="planets"> 46. <img src="images/planets/planets144/mars.jpg" alt="Mars"/> 47. <br/>Mars</a> 48. </p> 49. <p> 50. <a href="images/planets/jupiter.jpg" title="Jupiter" class="thickbox" 51. rel="planets"> 52. <img src="images/planets/planets144/jupiter.jpg" alt="Jupiter"/> 53. 54. <br/>Jupiter</a> 55. </p> 56. <p> 57. <a href="images/planets/saturn.jpg" title="Saturn" class="thickbox" 58. rel="planets"> 59. <img src="images/planets/planets144/saturn.jpg" alt="Saturn"/> 60. <br/>Saturn</a> 61. </p> 62. <p> 63. 64. <a href="images/planets/uranus.jpg" title="Uranus" class="thickbox" 65. rel="planets"> 66. <img src="images/planets/planets144/uranus.jpg" alt="Uranus"/> 67. <br/>Uranus</a> 68. </p> 69. <p> 70. <a href="images/planets/neptune.jpg" title="Neptune" class="thickbox" 71. rel="planets"> 72. <img src="images/planets/planets144/neptune.jpg" alt="Neptune"/> 73. <br/>Neptune</a> 74. 75. </p> 76. <p> 77. <a href="images/planets/pluto.jpg" title="Pluto and Charon" 78. class="thickbox" rel="planets"> 79. <img src="images/planets/planets144/pluto.jpg" alt="Pluto and Charon"/> 80. <br/>Pluto and Charon</a> 81. </p> 82. 83. </div> 84. <p class="credits">Images courtesy of: 85. <br/> Sol: ESA./NASA/SOHO; Mercury: NASA/Johns Hopkins University Applied Physics 86. Laboratory/Carnegie Institution of Washington; Venus: NASA/JPL; Earth: NASA, 87. <a href="http://visibleearth.nasa.gov/">The Visible Earth</a>; Mars: 88. NASA/JPL/MSSS; Jupiter: NASA/JPL/Space Science Institute; Saturn: NASA/JPL/Space 89. Science Institute; Uranus: NASA/JPL; Neptune: NASA/JPL; Pluto: Dr. R. Albrecht, 90. ESA/ESO Space Telescope European Coordinating Facility, NASA; </p> 91. 92. </body> 93. </html> 94.
Page 38 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Structural: html, head, body, title
planets.html
Firefox Firebug HTML inspector:
Page 39 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Document Type Definition (DTD) for XHTML
A DTD defines the rules (elements, attributes, content model) for a markup language. Note that the format for a DTD is not XML or HTML.
XHTML 1.0 Strict DTD
Elements, Attributes, Entities
html element defined:
<!ELEMENT html (head, body)>
attributes for img element defined:
<!ATTLIST img %attrs; src %URI; #REQUIRED alt %Text; #REQUIRED longdesc %URI; #IMPLIED height %Length; #IMPLIED width %Length; #IMPLIED usemap %URI; #IMPLIED ismap (ismap) #IMPLIED >
Parameter Entitites
<!ENTITY % coreattrs "id ID #IMPLIED class CDATA #IMPLIED style %StyleSheet; #IMPLIED title %Text; #IMPLIED" >
Character Entities
<!ENTITY nbsp CDATA " " -- no-break space = non-breaking space, U+00A0 ISOnum --> <!ENTITY iexcl CDATA "¡" -- inverted exclamation mark, U+00A1 ISOnum --> <!ENTITY cent CDATA "¢" -- cent sign, U+00A2 ISOnum --> <!ENTITY pound CDATA "£" -- pound sign, U+00A3 ISOnum --> <!ENTITY curren CDATA "¤" -- currency sign, U+00A4 ISOnum --> <!ENTITY yen CDATA "¥" -- yen sign = yuan sign, U+00A5 ISOnum --> <!ENTITY brvbar CDATA "¦" -- broken bar = broken vertical bar, U+00A6 ISOnum --> <!ENTITY sect CDATA "§" -- section sign, U+00A7 ISOnum --> <!ENTITY uml CDATA "¨" -- diaeresis = spacing diaeresis, U+00A8 ISOdia --> <!ENTITY copy CDATA "©" -- copyright sign, U+00A9 ISOnum -->
Page 40 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Reading the DTD
Three main things to be concerned with:
1. Content Model 2. Attribute List 3. Expanding defined entities (e.g. %Block, %Inline)
Some notations important for reading DTDs:
* , asterisk zero or more
+, plus one or more
( ), parentheses grouping
|, pipe or
Page 41 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
body
What are the content model and attributes for the element "body"?
body, W3C annotated DTD body, DTDParse
Content Model for body
Content model for body:
%Block entity referred to:
%Block entity defined:
% Block entity defined: % Block "(%block; | form | %misc;)*" Expand the entities referred to (%block, %misc):
% block "p | %heading; | div | %lists; | %blocktext; | fieldset | table"
% heading "h1|h2|h3|h4|h5|h6"
% lists "ul | ol | dl"
% blocktext "pre | hr | blockquote | address"
% block fully expanded: "p | h1 | h2 | h3 | h4 | h5 | h6 | div | ul | ol | dl | pre | hr | blockquote | address | fieldset | table"
% misc "noscript | %misc.inline;"
% misc.inline "ins | del | script"
% misc fully expanded: "noscript|ins|del|script"
% Block fully expanded: "(p | h1 | h2 | h3 | h4 | h5 | h6 | div | ul | ol | dl | pre | hr | blockquote | address | fieldset | table | form | noscript | ins | del | script)*"
Content model for "body"
(p | h1 | h2 | h3 | h4 | h5 | h6 | div | ul | ol | dl | pre | hr |
Page 42 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
blockquote | address | fieldset | table | form | noscript | ins | del | script)*
Page 43 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Attributes for body
Attributes: onload, onunload, %attrs
%attrs is: %coreattrs; %i18n; %events
%coreattrs id, class, style, title
%i18n lang, xml:lang, dir
onclick, ondblclick, onmousedown, onmouseup,onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Attributes for body
onload onunload id class style title lang xml:lang
dir onclick ondblclick onmousedown onmouseup,onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup
Page 44 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Reading the XHTML Specification
You can start with the HTML 4.01 Specification
XHTML in particular...
Element Prohibitions HTML Compatibility Guidelines
Page 45 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
DTD: Is there a better way?
Documentation produced from the DTD:
XHTML 1.1 XHTML 1.0 Strict XHTML 1.0 Transitional
Other ways to define XML Markup Languages
DTD W3C XML Schema RELAX NG (RNG)
Page 46 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Hypertext
The a element. [a Element, DTDParse]
Example 2.3
Example 2.3 Source:
Example 2.3 Rendered:
CSCIE-12 Web Site [email protected] Slide 2 W3C Harvard University Extension School
Title attribute of a hyperlink:
view plain copy to clipboard print ?
1. <ul> 2. <li> <a href="http://cscie12.dce.harvard.edu/" shape="rect" >CSCIE-12 Web Site</a> 3. </li> 4. <li><a href="mailto:[email protected]" shape="rect" > 5. [email protected]</a> 6. </li> 7. <li><a href="slide2.html" shape="rect" >Slide 2</a> 8. </li> 9. <li><a href="http://www.w3.org/" title="World Wide Web Consortium: Leading the Web to its Full Potential" shape="rect" > 10. W3C</a> 11. </li> 12. <li><a href="http://extension.harvard.edu/" shape="rect" ><em>Harvard University Extension School</em></a> 13. </li> 14. </ul>
Page 47 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Absolute and Relative Directions
Directions to the "Greenhouse Cafe"
Absolute: "Go to: 1 Oxford St, Cambridge, MA 01238. Go in the west entrance. Lecture Hall A will be on your right. Go straight. In the lobby area, take a slight right and then a left"
Relative: "Exit the lecture hall, take a right. In the lobby area, take a slight right and then a left."
Greenhouse Cafe image from Flickr user Felix42 contra la censura
Page 48 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Absolute and Relative URLs
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).
Example 2.4
Example 2.4 Source:
Example 2.4 Rendered:
Diplomacy of Lewis and Clark stressed in exhibit
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).
Example 2.5
Example 2.5 Source:
Example 2.5 Rendered:
Slide 1
Relative to Server Root
Is this relative or absolute? Scheme, host, and port would be resolved from current location, but path is absolute
Example 2.6
Example 2.6 Source:
Example 2.6 Rendered:
copyright information
view plain copy to clipboard print ?
1. <a href="http://www.hno.harvard.edu/gazette/2003/12.11/05-lewisclark.html" shape="rect" > 2. Diplomacy of Lewis and Clark stressed in exhibit</a>
view plain copy to clipboard print ?
1. <a href="slide1.html" shape="rect" >Slide 1</a>
view plain copy to clipboard print ?
1. <a href="/copyright.html" shape="rect" >copyright information</a>
Page 49 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Relative Paths to Parent Locations
../ refers to the parent directory
./ refers to current directory
Example 2.7
Example 2.7 Source:
Example 2.7 Rendered:
Up a level
Relative links are "transportable":
Â
view plain copy to clipboard print ?
1. <a href="../" shape="rect" >Up a level</a>
Relative Link Containing Document
 http://www.harvard.edu/museums/index.php
../index.php http://www.harvard.edu/index.php
../arts/index.php http://www.harvard.edu/arts/index.php
Relative Link Containing Document
 http://stage.harvard.edu/museums/index.php
../index.php http://stage.harvard.edu/index.php
../arts/index.php http://stage.harvard.edu/arts/index.php
Page 50 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Text: Heading
h1 , h2 , h3 , h4 , h5 , h6
Example 2.8
Example 2.8 Source:
Example 2.8 Rendered:
A Third Level Heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
A Fourth Level Heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
A Fifth Level Heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
A Sixth Level Heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
view plain copy to clipboard print ?
1. <h3>A Third Level Heading</h3> 2. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 3. <h4>A Fourth Level Heading</h4> 4. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 5. <h5>A Fifth Level Heading</h5> 6. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> 7. <h6>A Sixth Level Heading</h6> 8. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
Page 51 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Heading
Heading elements (h1,h2,etc.) combined with CSS are very powerful. Headings can remain headings in markup and CSS can style them as desired.
Page 52 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Text: Block
div , p , address , blockquote , pre
div and p
Example 2.9
Example 2.9 Source:
Example 2.9 Rendered:
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 varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, 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?
view plain copy to clipboard print ?
1. <div style="text-align: center; background-color: yellow; color: red; font-family: Times, serif; font-weight: bold;" > 2. Division (div) elements are block-level and will be very useful when we discuss 3. stylesheets.</div> 4. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at 5. sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. 6. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque 7. mauris turpis eu purus.</p> 8. <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla 9. fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede 10. lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing 11. diam at enim. Vestibulum nibh.</p> 12. <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis 13. volutpat. Ut a risus. Fusce bibendum sagittis magna.</p> 14. <p><a href="http://www.lipsum.com/" shape="rect" >Curious about the Lorem Ipsum text?</a></p>
Page 53 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
blockquote, address
blockquote
Example 2.10
Example 2.10 Source:
Example 2.10 Rendered:
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: We hold these truths to be self-evident that all men are created equal.
I have a dream that one day on the red hills of Georgia the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.
I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom and justice.
I have a dream that my four little children will one day live in a nation where they will not be judged 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 having his lips dripping with the words of interposition and nullification; one day right there in Alabama little black boys and black girls will be able to join hands with little white boys and white girls as sisters and brothers. I have a dream today!
I have a dream that one day every valley shall be exalted, and every hill and mountain shall be made low, the rough places will be made plain, and the crooked places will be made straight, and the glory of the Lord shall be revealed and all flesh shall see it together.
address
Example 2.11
Example 2.11 Source:
Example 2.11 Rendered:
The address of the Science Center is: 1 Oxford St., Cambridge, Massachusetts, 02138 It is where lectures for CSCI E-12 are held.
view plain copy to clipboard print ?
1. <p> In his <em>I Have a Dream</em> speech delivered in August 1963, Martin Luther King 2. Jr. said: </p> 3. <blockquote cite="http://www.americanrhetoric.com/speeches/Ihaveadream.htm" > 4. <p>I have a dream that one day this nation will rise up and live out the true meaning of 5. its creed: We hold these truths to be self-evident that all men are created 6. equal.</p> 7. <p>I have a dream that one day on the red hills of Georgia the sons of former slaves and 8. the sons of former slave owners will be able to sit down together at the table of 9. brotherhood.</p> 10. <p>I have a dream that one day even the state of Mississippi, a state sweltering with 11. the heat of injustice, sweltering with the heat of oppression, will be transformed 12. into an oasis of freedom and justice.</p> 13. <p>I have a dream that my four little children will one day live in a nation where they 14. will not be judged by the color of their skin but by the content of their character. I 15. have a <em>dream</em> today!</p> 16. <p>I have a dream that one day, <em>down</em> in Alabama, with its vicious racists, 17. with its governor having his lips dripping with the words of interposition and 18. nullification; one day right there in Alabama little black boys and black girls 19. will be able to join hands with little white boys and white girls as sisters and 20. brothers. I have a <em>dream</em> today!</p> 21. <p>I have a dream that one day every valley shall be exalted, and every hill and 22. mountain shall be made low, the rough places will be made plain, and the crooked 23. places will be made straight, and the glory of the Lord shall be revealed and all 24. flesh shall see it together.</p> 25. </blockquote>
view plain copy to clipboard print ?
1. <div> The address of the Science Center is: 2. <address>1 Oxford St., Cambridge, Massachusetts, 02138</address> It is where lectures for CSCI E-12 are held. </div>
Page 54 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Whitespace
Whitespace, including spaces, tabs, carriage returns, and line feeds, are generally "collapsed" in XHTML. If you need a line break, you can use the br element.
Example 2.12
Example 2.12 Source:
Example 2.12 Rendered:
Whitespace, including spaces, tabs, carriage returns, and line feeds, are generally "collapsed" in XHTML. If you need a line break, you can use the br element.
pre
pre: Where whitespace is important!
Example 2.13
Example 2.13 Source:
Example 2.13 Rendered:
Boston Forecast (°F) High Low Wed 25 11 Thu 18 11 Fri 31 27 Sat 38 20 Sun 43 34
Here is the same source, except this time in a p element.
Example 2.14
Example 2.14 Source:
Example 2.14 Rendered:
view plain copy to clipboard print ?
1. <p>Whitespace, 2. including 3. spaces, 4. tabs, 5. carriage returns, 6. and line feeds, 7. are generally "collapsed" in XHTML. 8. If you<br/> 9. need<br/> 10. a line break,<br/> 11. you can use the <code>br</code> element.</p>
view plain copy to clipboard print ?
1. <pre xml:space="preserve" >Boston Forecast (°F) 2. High Low 3. Wed 25 11 4. Thu 18 11 5. Fri 31 27 6. Sat 38 20 7. Sun 43 34</pre> 8.
view plain copy to clipboard print ?
1. <p>Boston Forecast (°F) 2. High Low 3. Wed 25 11 4. Thu 18 11 5. Fri 31 27 6. Sat 38 20 7. Sun 43 34</p> 8.
Page 55 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Boston Forecast (°F) High Low Wed 25 11 Thu 18 11 Fri 31 27 Sat 38 20 Sun 43 34
Page 56 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Text: Inline
Text Chapter from HTML 4.01 Specification
abbr , acronym , br , cite , code , dfn , em , kbd , q , samp , span , strong , var
span, strong, em
Example 2.15
Example 2.15 Source:
Example 2.15 Rendered:
span elements are useful in CSS. They are an inline partner with the block level div elements.
view plain copy to clipboard print ?
1. <p> 2. <span style="color: white; background-color: red;" >span elements</span> are useful 3. in CSS. They are an <em>inline</em> partner with the block level 4. <strong>div</strong> elements. </p>
Page 57 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
abbr and acronym
Example 2.16
Example 2.16 Source:
Example 2.16 Rendered:
Web clients and servers communicate via HTTP.
Example 2.17
Example 2.17 Source:
Example 2.17 Rendered:
NASA was founded in 1958.
view plain copy to clipboard print ?
1. <p> Web clients and servers communicate via <abbr title="hypertext transfer protocol" >HTTP</abbr>. </p>
view plain copy to clipboard print ?
1. <p> <acronym title="National Aeronatics and Space Administration" > 2. NASA</acronym> was founded in 1958. </p>
Page 58 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
q
Example 2.18
Example 2.18 Source:
Example 2.18 Rendered:
Martin Luther King Jr. said, Injustice anywhere is a threat to justice everywhere.
view plain copy to clipboard print ?
1. <p> 2. Martin Luther King Jr. said, <q>Injustice anywhere is a threat to justice everywhere.</q> 3. </p>
Page 59 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
strong, bold, em, i
Example 2.19
Example 2.19 Source:
Example 2.19 Rendered:
Strong text and bold text should not be confused. They may be rendered in the same way on visual browsers. However, remember that "strong" is semantic and "bold" is presentational.
Likewise, emphasized text should not be confused with italicized text. The former (em) is semantic, the latter (i) is presentational.
view plain copy to clipboard print ?
1. <p> <strong>Strong text</strong> and <b>bold text</b> should not be confused. They 2. may be rendered in the same way on visual browsers. However, remember that "strong" is 3. semantic and "bold" is presentational.</p> 4. <p> Likewise, <em>emphasized text</em> should not be confused with <i>italicized 5. text</i>. The former (<code>em</code>) is semantic, the latter (<code>i</code>) 6. is presentational. </p>
Page 60 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Lists
List Chapter from HTML 4.01 Specification
ul , li , ol , dl , dt , dd
Unordered Lists
Example 2.20
Example 2.20 Source:
Example 2.20 Rendered:
Some of my favorite food categories:
Tea Bread Cheese Chips Ice Cream
view plain copy to clipboard print ?
1. <p>Some of my favorite food categories:</p> 2. <ul> 3. <li>Tea</li> 4. <li>Bread</li> 5. <li>Cheese</li> 6. <li>Chips</li> 7. <li>Ice Cream</li> 8. </ul>
Page 61 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Nested lists
Example 2.21
Example 2.21 Source:
Example 2.21 Rendered:
Tea Kenyan Sikkim Temi Formosa Oolong Fancy
Potato Chips Dirty's Art's and Mary's Tim's Cascade
view plain copy to clipboard print ?
1. <ul> 2. <li>Tea 3. <ul> 4. <li>Kenyan</li> 5. <li>Sikkim Temi</li> 6. <li>Formosa Oolong Fancy</li> 7. </ul> </li> 8. <li>Potato Chips 9. <ul> 10. <li>Dirty's</li> 11. <li>Art's and Mary's</li> 12. <li>Tim's Cascade</li> 13. </ul> </li> 14. </ul>
Page 62 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Ordered Lists
Example 2.22
Example 2.22 Source:
Example 2.22 Rendered:
1. Boil water 2. Measure tea (approximately 1 tsp. per 6 oz. cup) 3. Steep tea for 3 to 5 minutes 4. Enjoy!
view plain copy to clipboard print ?
1. <ol> 2. <li>Boil water</li> 3. <li>Measure tea (approximately 1 tsp. per 6 oz. cup)</li> 4. <li>Steep tea for 3 to 5 minutes</li> 5. <li>Enjoy!</li> 6. </ol>
Page 63 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Dictionary Lists (term and definition)
Example 2.23
Example 2.23 Source:
Example 2.23 Rendered:
bread a usually baked and leavened food made of a mixture whose basic constituent is flour or meal
butter a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food
view plain copy to clipboard print ?
1. <div> 2. <dl> 3. <dt>bread</dt> 4. <dd>a usually baked and leavened food made of a mixture whose basic constituent is 5. flour or meal</dd> 6. <dt>butter</dt> 7. <dd>a solid emulsion of fat globules, air, and water made by churning milk or cream 8. and used as food </dd> 9. </dl> 10. </div>
Page 64 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
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.
Page 65 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Image
Objects, Images, Applets Chapter from HTML 4.01 Specification
img HTML 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.24
Example 2.24 Source:
Example 2.24 Rendered:
Example 2.25
Example 2.25 Source:
Example 2.25 Rendered:
view plain copy to clipboard print ?
1. <img src="http://cscie12.dce.harvard.edu/images/group.png" alt="Harvard University Extension School Logo" height="65" width="220" />
view plain copy to clipboard print ?
1. <a href="http://extension.harvard.edu/" shape="rect" > 2. <img src="http://cscie12.dce.harvard.edu/images/group.png" alt="Harvard University Extension School Logo" height="65" width="220" /> 3. </a>
Page 66 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Tables
Tables Chapter from HTML 4.01 Specification
Tables are great for data.
Tables are often co-opted for page layout purposes (something better left to CSS).
Basic Tables table , tr , td , th , caption , thead , tbody , tfoot
Example 2.26
Example 2.26 Source:
Example 2.26 Rendered:
view plain copy to clipboard print ?
1. <table style="width: 80%;" > 2. <caption>A table</caption> 3. <thead> 4. <tr> 5. <th rowspan="1" colspan="1" > Column 1 </th> 6. <th rowspan="1" colspan="1" > Column 2 </th> 7. <th rowspan="1" colspan="1" > Column 3 </th> 8. </tr> 9. </thead> 10. <tbody> 11. <tr> 12. <td rowspan="1" colspan="1" >row 1 column 1</td> 13. <td rowspan="1" colspan="1" >row 1 column 2</td> 14. <td rowspan="1" colspan="1" >row 1 column 3</td> 15. </tr> 16. <tr> 17. <td rowspan="1" colspan="1" >row 2 column 1</td> 18. <td rowspan="1" colspan="1" >row 2 column 2</td> 19. <td rowspan="1" colspan="1" >row 2 column 3</td> 20. </tr> 21. <tr> 22. <td rowspan="1" colspan="1" >row 3 column 1</td> 23. <td rowspan="1" colspan="1" >row 3 column 2</td> 24. <td rowspan="1" colspan="1" >row 3 column 3</td> 25. </tr> 26. </tbody> 27. </table>
A table
Column 1 Column 2 Column 3 row 1 column 1 row 1 column 2 row 1 column 3row 2 column 1 row 2 column 2 row 2 column 3row 3 column 1 row 3 column 2 row 3 column 3
Page 67 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Table Head and Table Body
Tables are constructed with thead and tbody. Javascript can then be used to make the table "sortable" and "striped".
Page 68 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
<!-- Comments -->
Example 2.27
Example 2.27 Source:
Example 2.27 Rendered:
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.
view plain copy to clipboard print ?
1. <p>You can make comments in XHTML. 2. <!-- Browsers will not display comments -->Comments can be very useful to the person who maintains the page. 3. You should get into the habit of using comments in your XHTML. 4. <!-- Comments can be 5. span 6. multiple 7. lines 8. --></p>
Page 69 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
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
Page 70 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
CDATA Sections
SGML and XML allow for "character data" (CDATA) sections, where you can have raw <, >, and & in the content. This is useful for including markup code within markup (as well as a few other use cases):
Page 71 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Nesting
Obey the rules of being well-formed and the content model rules of the DTD; and then nest away!
Example 2.28
Example 2.28 Source:
Example 2.28 Rendered:
Lists can hold lists. This list item contains another list. 1. step first 2. step second
3. step last This list item is part of the outer list.
view plain copy to clipboard print ?
1. <ul> 2. <li>Lists can hold lists. This list item contains another list. 3. <ol> 4. <li>step first</li> 5. <li>step second</li> 6. <li>step last</li> 7. </ol> 8. </li> 9. <li>This list item is part of the outer list.</li> 10. </ul>
Page 72 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Tables within Tables
Example 2.29
Example 2.29 Source:
Example 2.29 Rendered:
view plain copy to clipboard print ?
1. <table style="border: medium solid red; width: 100%" > 2. <tr> 3. <td style="border: thin solid;" rowspan="1" colspan="1" > 4. <div>row 1 column 1</div> 5. <table style="border: medium solid green; width: 100%" > 6. <tr> 7. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 r1c1</td> 8. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 r1c2</td> 9. </tr> 10. <tr> 11. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 r2c1</td> 12. <td style="border: thin solid;" rowspan="1" colspan="1" >t2 21c2</td> 13. </tr> 14. </table> 15. </td> 16. <td style="border: thin solid;" rowspan="1" colspan="1" >row 1 column 2</td> 17. <td style="border: thin solid;" rowspan="1" colspan="1" >row 1 column 3</td> 18. </tr> 19. <tr> 20. <td style="border: thin solid;" rowspan="1" colspan="1" >row 2 column 1</td> 21. <td style="border: thin solid;" rowspan="1" colspan="1" >row 2 column 2</td> 22. <td style="border: thin solid;" rowspan="1" colspan="1" >row 2 column 3</td> 23. </tr> 24. <tr> 25. <td style="border: thin solid;" rowspan="1" colspan="1" >row 3 column 1</td> 26. <td style="border: thin solid;" rowspan="1" colspan="1" >row 3 column 2</td> 27. <td style="border: thin solid;" rowspan="1" colspan="1" >row 3 column 3</td> 28. </tr> 29. </table>
row 1 column 1
t2 r1c1 t2 r1c2
t2 r2c1 t2 21c2
row 1 column 2 row 1 column 3
row 2 column 1 row 2 column 2 row 2 column 3
row 3 column 1 row 3 column 2 row 3 column 3
Page 73 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Forms: Introduction
Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. The submitted information is passed from the HTTP Server to a server-side program that processes the information and produces a response for the browser.
Page 74 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
form
Attributes
method (GET|POST) action (URL of CGI program) enctype
Each element within a form has a name associated with it. When the information is sent back to the server, the CGI program will access the information by name. Thus, the front-end form and the back-end program must use the same names.
While exploring forms, it is useful to use a simple "echo" CGI program, which will simply echo back the name/value information your form submitted (http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi).
Example 2.30
Example 2.30 Source:
Example 2.30 Rendered:
Email Address:
view plain copy to clipboard print ?
1. <form method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" > 2. <div> Email Address: 3. <input type="text" name="email" /> 4. <br/> 5. <input type="submit" /> </div> 6. </form>
Submit Query
Page 75 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Get vs. Post
GET: form information sent from browser to server as part of query string, visible in the URL POST: form information sent from browser to server as part of HTTP body; not in URL
Example 2.31
Example 2.31 Source:
Example 2.31 Rendered:
Email Address:
Example 2.32
Example 2.32 Source:
Example 2.32 Rendered:
Email Address:
view plain copy to clipboard print ?
1. <form method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" > 2. <div> Email Address: 3. <input type="text" name="email" /> 4. <br/> 5. <input type="submit" /> </div> 6. </form>
Submit Query
view plain copy to clipboard print ?
1. <form method="get" action="http://cscie12.dce.harvard.edu/echo.cgi" enctype="application/x-www-form-urlencoded" > 2. <div> Email Address: 3. <input type="text" name="email" /> 4. <br/> 5. <input type="submit" /> </div> 6. </form>
Submit Query
Page 76 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Radio Buttons
Example 2.33
Example 2.33 Source:
Example 2.33 Rendered:
Please send me spam: yes no
view plain copy to clipboard print ?
1. <form method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" > 2. <div> 3. Please send me spam: 4. <input type="radio" name="spam" value="yes" checked="checked" />yes 5. <input type="radio" name="spam" value="no" />no 6. <hr/> 7. <input type="submit" value="Submit Information" name="submit" /> </div> 8. </form>
Submit Information
Page 77 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Checkbox
Example 2.34
Example 2.34 Source:
Example 2.34 Rendered:
What ice cream do you like?
Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding
view plain copy to clipboard print ?
1. <form method="get" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" > 2. <p>What ice cream do you like?</p> 3. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 4. <br/> 5. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 6. <br/> 7. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 8. <br/> 9. <input type="checkbox" name="icecream" value="ginger" />Ginger 10. <br/> 11. <input type="checkbox" name="icecream" value="herrellchocolatepudding" /> Herrell's 12. Chocolate Pudding 13. <p> 14. <input type="submit" value="Submit Information" name="submit" /></p> 15. </form>
Submit Information
Page 78 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Option Lists
Example 2.35
Example 2.35 Source:
Example 2.35 Rendered:
Your favorite New England state:
view plain copy to clipboard print ?
1. <form method="get" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" > Your favorite New England state:
2. <select name="favorite_NE_state" > 3. <option value="" selected="selected" >Please Select...</option> 4. <option value="CT" >Connecticut</option> 5. <option value="ME" >Maine</option> 6. <option value="MA" >Massachusetts</option> 7. <option value="NH" >New Hampshire</option> 8. <option value="RI" >Rhode Island</option> 9. <option value="VT" >Vermont</option> 10. </select> 11. <p> 12. <input type="submit" value="Submit Information" name="submit" /> 13. </p> 14. </form>
Please Select...
Submit Information
Page 79 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Textarea
Example 2.36
Example 2.36 Source:
Example 2.36 Rendered:
Please enter comments:
view plain copy to clipboard print ?
1. <form method="get" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" > 2. <p>Please enter comments:</p> 3. <textarea rows="10" cols="50" name="comments" > comments go here.... </textarea> 4. <p> 5. <input type="submit" value="Submit Information" name="submit" /></p> 6. </form>
comments go here....
Submit Information
Page 80 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html
Labels
Example 2.37
Example 2.37 Source:
Example 2.37 Rendered:
What ice cream do you like?
Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding
view plain copy to clipboard print ?
1. <form method="get" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded" > 2. <p>What ice cream do you like?</p> 3. <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate" /> 4. <label for="icecream_chocolate" >Chocolate</label> 5. <br/> 6. <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla" /> 7. <label for="icecream_vanilla" >Vanilla</label> 8. <br/> 9. <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry" /> 10. <label for="icecream_strawberry" >Strawberry</label> 11. <br/> 12. <input type="checkbox" name="icecream" id="icecream_ginger" value="ginger" /> 13. <label for="icecream_ginger" >Ginger</label> 14. <br/> 15. <input type="checkbox" name="icecream" id="icecream_hcp" value="herrellchocolatepudding" /> 16. <label for="icecream_hcp" >Herrell's Chocolate Pudding</label> 17. <p> 18. <input type="submit" value="Submit Information" name="submit" /></p> 19. </form>
Submit Information
Table of Contents | All Slides | Link List | Examples | CSCI E-12
Page 81 of 81Markup for the Web
2/4/2009http://localhost:8080/cocoon/projects/cscie12/slides/20090204/handout.html