Markup for the Web - Harvard Universitycscie12.dce.harvard.edu/lecture_notes/2009/20090204.pdf2009/02/04 · The Ghosts of Christmas Markup Past, Present and Yet to Come Present z

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.



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?



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



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



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



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:


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>


1. <a href="http://www.harvard.edu/museums/" shape="rect" >Harvard Museums</a>



HTTP Clients

Firefox

Internet Explorer

Chrome

Opera

Safari



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



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



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



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



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



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.



HTTP Client and Server



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



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



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?



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



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



"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 Transitional not found in Strict

basefont center dir font s strike u

Some attributes in XHTML 1.0 Transitional not found in Strict

background bgcolor color marginheight marginwidth face



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>



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



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 quotes



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.


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>



Valid XHTML 1.0 Transitional (XML)


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>



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



Math Markup Language



Open Document Format



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.



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.



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



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



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



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



link

Base base

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



Our Solar System

planets.html




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.



Structural: html, head, body, title

planets.html

Firefox Firebug HTML inspector:



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



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



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 |



blockquote | address | fieldset | table | form | noscript | ins | del | script)*



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



Reading the XHTML Specification

You can start with the HTML 4.01 Specification

XHTML in particular...

Element Prohibitions HTML Compatibility Guidelines



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)



Hypertext

The a element. [a Element, DTDParse]

Example 2.3

Example 2.3 Source:


CSCIE-12 Web Site [email protected] Slide 2 W3C Harvard University Extension School

Title attribute of a hyperlink:


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>



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



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:


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:


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:


copyright information


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>


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


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



Relative Paths to Parent Locations

../ refers to the parent directory

./ refers to current directory

Example 2.7

Example 2.7 Source:


Up a level

Relative links are "transportable":

Â


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



Text: Heading

h1 , h2 , h3 , h4 , h5 , h6

Example 2.8

Example 2.8 Source:


A Third Level Heading

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

A Fourth Level Heading


A Fifth Level Heading


A Sixth Level Heading



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>



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.



Text: Block

div , p , address , blockquote , pre

div and p

Example 2.9

Example 2.9 Source:


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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus 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?


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>



blockquote, address

blockquote

Example 2.10

Example 2.10 Source:


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



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


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>


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>



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



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



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




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>


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.


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.



Boston Forecast (Â°F) High Low Wed 25 11 Thu 18 11 Fri 31 27 Sat 38 20 Sun 43 34



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



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


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>



abbr and acronym

Example 2.16



Web clients and servers communicate via HTTP.

Example 2.17



NASA was founded in 1958.


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


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



q

Example 2.18



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


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



strong, bold, em, i

Example 2.19



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.


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>



Lists

List Chapter from HTML 4.01 Specification

ul , li , ol , dl , dt , dd

Unordered Lists

Example 2.20



Some of my favorite food categories:

Tea Bread Cheese Chips Ice Cream


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>



Nested lists

Example 2.21



Tea Kenyan Sikkim Temi Formosa Oolong Fancy

Potato Chips Dirty's Art's and Mary's Tim's Cascade


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>



Ordered Lists

Example 2.22



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


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>



Dictionary Lists (term and definition)

Example 2.23



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


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>



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.



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




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


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>



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




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



Table Head and Table Body

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





Example 2.27



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.


1. <p>You can make comments in XHTML. 2. 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. </p>



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



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):



Nesting

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

Example 2.28



Lists can hold lists. This list item contains another list. 1. step first 2. step second

3. step last This list item is part of the outer list.


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>



Tables within Tables

Example 2.29




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



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.



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



Email Address:


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



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



Email Address:

Example 2.32



Email Address:


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


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



Radio Buttons

Example 2.33



Please send me spam: yes no


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



Checkbox

Example 2.34



What ice cream do you like?

Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding


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



Option Lists

Example 2.35



Your favorite New England state:


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



Textarea

Example 2.36



Please enter comments:


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



Labels

Example 2.37



What ice cream do you like?

Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding


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

Documents

Markup for the Web - Harvard Universitycscie12.dce.harvard.edu/lecture_notes/2009/20090204.pdf2009/02/04 · The Ghosts of Christmas Markup Past, Present and Yet to Come Present z