June 23, 2009
Harvard University
Summer School
Course Web Site: http://cscis12.dce.harvard.edu/
Instructor email:
david_heitmeyer@harvard.edu
Course staff email:
cscis12@dce.harvard.edu
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.
Course Description
This course provides a comprehensive overview of website development. Students
explore the prevailing vocabulary, tools, and standards used in the field and learn
how the various facets—including XHTML, CSS, JavaScript, Ajax, multimedia,
scripting languages, HTTP, clients, servers, and databases—function together in
today's web environment. The course provides a solid web development foundation,
focusing on content and client-side (browser) components (XHTML, CSS, JavaScript,
multimedia), with an overview of the server-side technologies. In addition,
software and services that are easily incorporated into a website (for example,
maps, checkout, blogs, content management) are surveyed and discussed. Students
produce an interactive website on the topic of their choice for the final project and
leave the course prepared for more advanced and focused web development
studies.
Course Syllabus | Course Schedule
In addition to the texts, there will be online readings assigned and online references cited.
Required texts:
Freeman, Elisabeth and Eric Freeman. 2005. Head First HTML with CSS & XHTML . O'Reilly & Associates. 658 p. ISBN 0-596-10197-X
Jennifer Niederst Robbins, 2006. Web Design in a Nutshell . O'Reilly & Associates. 826 p. ISBN 0596009879
Texts are available through:
Image from Opte Project and is used under the Creative Commons 1.0 license.
The irony is that in all its various guises -- commerce, research, and surfing -- the Web is already so much a part of our lives that familiarity has clouded our perception of the Web itself.
Scientific American: Happy 20th Birthday, World Wide Web
ZDNet: The Web Turns 20. In 1989, Tim Berners-Lee proposed an information system that would later be known as the World Wide Web.
Read Write Web: Happy 20th Birthday, World Wide Web.
"The Indexed Web contains at least 25.41 billion pages (Tuesday, 27 January, 2009)."
from Maurice de Kunder's site http://www.worldwidewebsize.com/
About 77 million active sites in June 2009.
Source: Netcraft Web Server Survey
| Home Use, May 2009 | Value |
|---|---|
| Sessions/Visits per Person per Month | 37 |
| Domains Visited per Person per Month | 70 |
| Web Pages per Person per Month | 1,591 |
| Page Views per Surfing Session | 42 |
| PC Time Spent per Month | 38:00:14 |
| Time Spent During Surfing Session | 1:02:11 |
| Duration of a Web Page Viewed | 0:00:51 |
Source: Nielsen Online
Top 25 Sites in the United States:
Source: Top Sites, United States, from Alexa: The Web Information Company
Thumbnail screenshots from Thumbshots.org
The White House Site (www.whitehouse.gov)
1996
1997
1998
1999
2001
2002
2007
2009
About 77 million active sites as of June 2009.
TCP/IP, HTTP, (X)HTML, CSS
Apache HTTP Server, Mosaic, Netscape, Firefox, JavaScript, Perl, PHP, etc.
Information, Banking, Commerce
We cannot command nature except by obeying her.
Francis
Bacon
Rule By Obeying Nature's Laws
Motto of Kansas State
University
client-server computing
The interaction between two programs when they communicate across a network. A program at one site sends a request to a program at another site and awaits a response. The requesting program is called a client; the program satisfying the request is called the server. (definition from The Internet Book, 2nd edition by Douglas E. Comer)
Client-Server Architecture from Webopedia
HTTP Transaction:
The HTTP client gets the content, makes additional requests for CSS, images, Javascript, etc., and then renders the page:
http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10
http://cscis12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10
Common schemes: http, https, ftp, mailto, file, rtsp
http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10
http://cscie12.dce.harvard.edu:80/lecture_notes/2009/20090128/toc.html#slide10
http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10
http://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/toc.html#slide10
For those who truly wish to find out more of the details, see Untangle URIs, URLs, and URNs by Dan Connolly
|
|
A "tree" structure view of XHTML produced by Amaya, the open source Web editor/browser from the W3C.
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>
The XHTML page references an external stylesheet document.
The CSS file contains style rules for the document (planets.css)
|
With CSS disabled: 
|
css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually through CSS-based desgin.
|
|
|
|
|
|
|
|
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.
Some sites that adhere to Web standards
Web Standards Project
The Web Standards Project is a grassroots coalition fighting for standards
which ensure simple, affordable access to web technologies for all.
Main differences between SGML and XML:
| 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 |
| Right | Wrong |
|---|---|
<a>
<b>
<c>
</c>
</b>
</a>
|
<a>
<b>
<c>
</b>
</c>
</a>
|
| Right | Wrong |
|---|---|
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</table>
|
<table>
<tr>
<td>one
<td>two
</tr>
<tr>
<td>three
<td>four
</tr>
</table>
|
| Right | Wrong |
|---|---|
<table>
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
|
<TABLE>
<TR>
<TD>one
<td>two
</TR>
</table>
|
| Right | Wrong |
|---|---|
<a href="http://www.harvard.edu/">
Harvard University
</a>
|
<a href=http://www.harvard.edu/>
Harvard University
</a>
|
Validate against the rules (elements, attributes, content models) of a specific grammar (e.g. XHTML 1.0 Transitional).
Ways of expression grammars:
A valid HTML (SGML) document is not necessarily a valid XHTML (XML) document:
Markup languages created using SGML or XML are "applications" of SGML or XML.
MathML Markup
Displayed in a browser:
|
Past
|
|
Present
|
|
Yet to Come
|
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
|
Some attributes in XHTML 1.0 Transitional not found in Strict
|
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:
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:
Current:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Old:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"
"http://www.w3.org/TR/HTML.dtd">
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"
"http://www.w3.org/MarkUp/html-spec/html.dtd" >
DOCTYPE statement used by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This is the official specification. It has very readable sections as well as the technical definitions.
The DTD itself -- more useful to parsers than to humans.
The annotated (with hyperlinks) version of the DTD. Very useful to humans.
Documentation produced directly from the DTD by Norman Walsh's great Perl-based tool called DTDParse. Very useful to people.
Grouped by modules defined by XHTML modularization.
body, head, html, title
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4,
h5, h6, kbd, p, pre, q, samp, span, strong, var
h1, h2, h3, h4, h5, h6
address, blockquote, div, p, pre
abbr, acronym, br, cite, code, dfn, em, kbd, q, samp, span, strong,
var
a
dl, dt, dd, ol, ul, li
applet, param
b, big, hr, i, small, sub, sup, tt
del, ins
bdo
form, input, label, select, option, textarea
form, input, select, option, textarea, button, fieldset, label,
legend, optgroup
caption, table, td, th, tr
caption, table, td, th, tr, col, colgroup, tbody, thead, tfoot
img
area, map
object, param
frameset, frame, noframes
iframe
meta
script, noscript
style
link
base
basefont, center, dir, font, isindex, menu, s, strike, u
Firefox Firebug HTML inspector:
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.
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 -->
Three main things to be concerned with:
Some notations important for reading DTDs:
What are the content model and attributes for the element "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)*"
(p | h1 | h2 | h3 | h4 | h5 | h6 | div | ul | ol | dl | pre | hr | blockquote | address | fieldset | table | form | noscript | ins | del | script)*
Attributes: onload, onunload, %attrs
%attrs is: %coreattrs; %i18n; %events
id, class, style, title
lang, xml:lang, dir
onclick, ondblclick, onmousedown, onmouseup,onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
You can start with the HTML 4.01 Specification
XHTML in particular...
Documentation produced from the DTD:
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 (to Science Center Lecture Hall A):
"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
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!
<a href="http://www.hno.harvard.edu/gazette/2003/12.11/05-lewisclark.html">
Diplomacy of Lewis and Clark stressed in exhibit</a>
base element or from meta data in HTTP response).
<a href="slide1.html">Slide 1</a>
<a href="/copyright.html">copyright information</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 links are "transportable":
| 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
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Heading elements (h1,h2,etc.) combined with CSS are very powerful. Headings can remain headings in markup and CSS can style them as desired.
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.
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.
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.
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.
Here is the same source, except this time in
a p element.
Text Chapter from HTML 4.01 Specification
abbr , acronym , br , cite , code , dfn , em , kbd , q , samp , span , strong , var
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.
span elements are useful in CSS. They are an inline partner with the block level div elements.
List Chapter from HTML 4.01 Specification
Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content items, etc.) and CSS can style them as desired.
Objects, Images, Applets Chapter from HTML 4.01 Specification
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).
| Column 1 Heading | Column 2 Heading | Column 3 Heading |
|---|---|---|
| row 1 column 1 | 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 |
Tables are constructed with thead and tbody.
Javascript can then be used to make the table "sortable" and "striped".
|
row 1 column 1
|
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 |
Comments can be inserted into XHTML and HTML markup. Just as with any code, making good use of comments in your markup is good habit that will reap rewards for the person (who may be you) who has to edit or alter the page.
Critical character entites are:
>
<
&
"
'
And Because we have deficient input devices...
Copyright symbol 
:
©
©
©
List of XHTML 1.0 Entity Sets and Character Entities
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):
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 (which includes VPN).
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.
morpheus.dce.harvard.edu
jharvard (for the person John Harvard)http://morpheus.dce.harvard.edu/~jharvard/index.html
/home/courses/j/h/jharvard/public_html/index.html
Your web browser is not only useful for "using" the web, but it can be a powerful tool for web development.
Grains of Salt photo from Flickr user kevindooley
Source: Browser Market Share from Net Applications.com (January 2009)
Source: w3schools.com
(January 2009xs)
Source: Harvard, iCommons (December 2008 and January 2009)
Please start with your favorite text editor!
Window/Mac/Linux
Windows
Mac
Linux
PuTTY Screenshots
| 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 |
URL paths that map to a directory. For example:
http://www.harvard.edu/museums/
Copyright © 1998-2009 David P. Heitmeyer
