Table of Contents | All Slides | Link List | Examples | CSCI E-12

Introduction, Internet and Web Basics
XHTML and HTML

January 30, 2008

Harvard University
Division of Continuing Education
Extension School

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

Copyright 1998-2008 David P. Heitmeyer

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@fas.harvard.edu

CSCI E-12, Fundamentals of Web Site Development

The Course

Course Syllabus | Course Schedule

Assignments

  1. Web Basics, XHTML and HTML
  2. XHTML and HTML; Using SSI; Getting Started with CSS
  3. CSS
  4. Forms, Javascript and Ajax
  5. Dynamic Pages
  6. HTTP and Apache Web Server

Texts

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

Head First HTML with CSS and XHTML Cover

Jennifer Niederst Robbins, 2006. Web Design in a Nutshell . O'Reilly & Associates. 826 p. ISBN 0596009879

Web Design in a Nutshell

Texts are available through:

Recommended for who are not yet familiar working with Unix or Linux:

Ray, Deborah S. and Eric J. Ray. 2006. UNIX: Visual QuickStart Guide, 3rd edition. Peachpit Press. 448 p. ISBN 0321442458
QuickStart Guide to Unix

Goals of CSCI E-12

This course is designed to give students a thorough overview of web development. Students explore the vocabulary, tools, and standards that prevail in the field today, and learn how the various components - including CSS, Javascript, multimedia, scripting languages, content management systems, web/applications servers, and databases - fit together.

For the final project, each student will have the opportunity to produce an interactive web site on the topic of their choice.

The course will give students a strong foundation for more specific web development study in the future, whether that be in programming, database administration, server administration, security, interface design, or multimedia development.

The International Network (Internet)

Wikipedia: Internet

Internet Routing

International Network

The Internet in Pictures

Internet
Image by Matt Britt (used with permission under Creative Commons Attribution 2.5 )

"A model of Internet topology using k-shell decomposition"
Carmi, Shai et al. (2007) Proc. Natl. Acad. Sci. USA 104, 11150-11154
internet map

Some Internet Numbers

The Internet: Uses

Gopher

gopher://home.jumpjet.info/

gopher gopher gopher

The World Wide Web

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.

Tim Berners-Lee in Weaving the Web
Weaving the Web

History

The Web in Pictures

Web
Image from Opte Project and is used under the Creative Commons 1.0 license.

touchgraph web

TouchGraph Web Development
Graph made from TouchGraph GoogleBrowser.

Some Web Numbers

45 billion pages as of January 2008 (http://www.worldwidewebsize.com/)

Nielson NetRatings for Home Web Use, December 2007:

Sessions/Visits per Person per Month 34
Domains Visited per Person per Month 69
Web Pages per Person per Month 1,504
Time Spent During Surfing Session 0:56:28

netcraft survey
Netcraft Web Server Survey

Top Sites for the United States

Top Sites, United States from Alexa: The Web Information Company

image image image image image image image image image image image image

Features of the World Wide Web

We cannot command nature except by obeying her.

We cannot command nature except by obeying her.
Francis Bacon

Nature of the Web

Kansas State University Seal: Rule By Obeying Nature's Laws
Motto of Kansas State University:
Rule By Obeying Nature's Laws

HTTP Clients and HTTP Servers

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 Computing

Client-Server Architecture from Webopedia, http://www.webopedia.com/

Uniform Resource Identifier (URI)

http://cscie12.dce.harvard.edu/lecture_notes/20080130/toc.html

For those who truly wish to find out more of the details, see Untangle URIs, URLs, and URNs by Dan Connolly

Anatomy of a URI

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

XHTML: a simple example

View the example.

(X)HTML Document Structure

A Tree

XHTML document as a tree

A "tree" structure view of XHTML produced by Amaya, the open source Web editor/browser from the W3C.

Amaya Screenshot

Components of XHTML Elements

A Hypertext Link

Example 1.1
Example 1.1 Source:
Example 1.1 Rendered:
Harvard

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>

Structure and Style

HyperText Markup Language Cascading Style Sheets (CSS)

Maintain this "separation of concerns" -- between structure and style.

XHTML: a simple example with CSS

View the example.

And here is the stylesheet (simple-style.css):

Harvard College Admissions

Harvard College Admissions:

admissions site

With CSS disabled:

admissions site no css

Examples from: CSS Zen Garden

css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually through CSS-based desgin.

Zen Garden No CSS Zen Garden Source
Zen Garden CSS Zen Garden CSS
Zen Garden CSS Zen Garden CSS
Zen Garden CSS Zen Garden CSS

Well-formed (X)HTML and Valid (X)HTML

Well-formed

Required for well-formed XML

Good practices for HTML

Valid

Well-formed + Conforms to DTD = Valid

HyperText Markup Language

W3C HyperText Markup Language Home Page

timeline of web standards

SGML, XML, HTML, and XHTML

Defining Markup Languages

Specific Markup Languages

Relationships

relationship between sgml, xml, html and xhtml

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:

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

Specifications and Implementations

XHTML Specification vs. Implementation XHTML Specification vs. Implementation
XHTML Specification vs. Implementation XHTML Specification vs. Implementation

XHTML: a closer look

XHTML 1.0 Strict Elements

XHTML 1.0 Strict documentation produced from DTD

Modules

Benefits of Web Standards

What do GE, IBM, Library of Congress, EDS, Stanford, AGFA, Abbott, and Princeton have in common?
They 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.

What are Web Standards and why should I use them?

Pragmatic Steps: Software Tools

HTTP Clients

Browser Statistics
browser stats

Get Firefox
Firefox (Mozilla)

Get IE
Internet Explorer (Microsoft)

Opera - The Fastest Browser on Earth
Opera (Opera Software)

Safari
Safari (Apple).
Safari available for Mac and Windows.

Netscape Navigator
Netscape Navigator (AOL/Netscape)

SSH Clients and SFTP Clients

Text or HTML Editor

Windows

Mac / Apple

Linux / UNIX

(X)HTML Well-formedness and Validation Resources

Table of Contents | All Slides | Link List | Examples | CSCI E-12