CS403: Weaving the Web

Sections 01, 03, and 04

Fall 2011

XHTML

XHTML Template

A basic Web page that includes the clickable icons for the XHTML Validator as well as the CSS Validator. To view the source code for the template Web page, right-mouse click and select "View" OR use the View option at the top of your browser window.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/StrictTemplate.html

Page Anchors for Intra-Document Linking

Look at the source code for the Web page with Andrew's Poetry on it for an example of intra-document linking:
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/andrew.html

Lists

Here is a Web page with examples of the three types of lists plus nested lists.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/lists.html.

Positioning Images and Creating Horizontal Rule Lines

How to float images and create horizontal rule lines to visually separate parts of your Web page.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/hrs_and_images.html

Creating Tables

How to create tables - example 1.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/table1.html

How to create tables - example 2.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/table2.html

How to create tables - example 3.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/table3.html

Forms

Here is a form with no instructions to guide the user and no structure to the form:
http://pubpages.unh.edu/~cs403d/basicform.html

Here is the same form with user instructions but no structure to the form:
http://pubpages.unh.edu/~cs403d/unstructuredform.html

Here is the same form as above but now with some structure to it:
http://pubpages.unh.edu/~cs403d/plainform.html

And again, this time with a link from the success page:
http://pubpages.unh.edu/~cs403d/form.html

The ice cream survey form using a mailto from class lecture:
http://pubpages.unh.edu/~cs403d/icecreamform.html

The ice cream survey form using cgiemail from class lecture:
http://pubpages.unh.edu/~cs403d/icecreamform2.html

Image Maps

A Web page that displays a client-side image map:
http://pubpages.unh.edu/~ehepp/imagemap.html

Dynamic Documents - Client Pull

A Web page that describes what a dynamic document is and demonstrates how it works (check the source code):
http://pubpages.unh.edu/~cs403d/dynamic.html

Creating Drop-Down Menus

How to create drop-down menus - CSS code by Charles Wyke-Smith.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/multi_drop_menus.html

CSS

Specificity Example

A page that illustrates cascading rules.
http://pubpages.unh.edu/~ehepp/specificityExample.html

Box Model

Here is a page that illustrates the box model.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/boxmodel1.html

This page demonstrates how different elements appear when their containing box is a different color.
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/boxmodel2.html

Sample Page Layouts

Our class Web site is one example of a one column layout. Here is another example of a simple one column page layout:
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/OneColumn2.html

Here is an example of a two column fixed page layout:
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/TwoColumnFixed2.html

Here is an example of a two column elastic page layout:
http://pubpages.unh.edu/~cs403d/403/EXAMPLES/TwoColumnElastic2.html

The http://www.amazon.com site is a good example of a three column layout that has a liquid middle column and fixed outer columns.

The site http://www.alistapart.com illustrates a four column layout.

CSS Stylesheet Examples

Here is the Mark Twain story without using CSS; here is the same story with CSS applied. This is what the style sheet looks like...
Here is another example without CSS and the same example with CSS using the same style sheet from the previous example (this demonstrates how re-using the style sheet will create a consistent look and feel in a Web presentation.)
Here is another version of the Mark Twain story with a slightly different style sheet applied to it.

Font Examples

A Web page that illustrates how different fonts are rendered by the browser. View this page using different Web browsers to understand which browsers and platforms support which fonts.
http://pubpages.unh.edu/~cs403d/CS403/EXAMPLES/font-examples.html

© Ellen M. Hepp, 2011. All Rights Reserved.