A Web Page Sampler by D. J. Foreman.
Latest change date: unknown. You should update your browser or enable
The objective of this sample page is to provide hints, tips, and ideas for
CS205 students who are building their web pages for a class assignment. The
centered heading above was done with an <H1> tag.
We'll start off with a menu, which allows the user to quickly scroll to
another segment of the
current web page. That is, we can treat
a single file as if it were multiple web pages.
HTML color names and how they appear
lists, Part 1
lists, Part 2 Creating
tables & maps
semantics of building frames (Univ. of Waterloo, Canada)
Status Area (Ver.1)
Cascading Style Sheets & Dynamic HTML
Some JS functions
Here is a centered h2Notice that the centering includes the lists
below. Note how the centering applies to the individual lines, rather than the
list as a unit. That is because the text of the list is centered. This can lead
to some bizarre results, as seen here.
Annotations for the internals of an HTML page are done using the special
and <!-- . --> Notice that the comment is just one long tag,
NOT a pair of tags, with text in the middle! The "--"s are part of the
tag, as is the "!".
Creating lists, Part 1 This
ordered list contains linked objects.
An in-line link to an object (not a page) at location: this
smbluewh.gif useful as wallpaper.
An in-line link to an object (not a page) at location: another
And here is the SAME file from MY OWN directory:
<img src="../gifs/red_paper.gif" >
Creating lists, Part 2 Now here is an unordered
list. It contains links to other pages. Note that a <p> tag causes a
skipped line before the text, as you see here,
whereas a <br>
does not, as this line demonstrates.
A link to a page ( not an object) at this
student webpage index
A link to a page ( not an object) at another
location: SUNY Binghamton's Home
A link (NOT inline) to an object at another
location: red paper return to
Now let's see the effect of some user/computer-interaction HTML tags, and put
them in a
Here we have the name of a [ variable],
followed by computer code [
if (x=sqrt(y)) z=q].
Indicating keyboard input looks like this: [ type it this way],
while a sample appears [ this way]. Note
that the last 3 look alike in both IE and Netscape, but the browser can change
this ANY TIME! (If they are motivated to do so.)
Creating a table
Now here's a sample of a
Table with a border:
A sample 3 x 3 table
troi return to
WEB PAGE DESIGN FOR DIFFERENT SCREEN RESOLUTIONS
One of the greatest challenges
in designing an effective Web site is creating a layout that works for multiple
make it possible to allow for these differences.
The following image is retrieved using an EXPLICIT reference.
following image comes from the same source as the image above, but uses a
RELATIVE reference to get to it.
With thanks to:
"How to Setup and Maintain a World Wide Web Site", L. D. Stein
"New Perspectives on Creating Web Pages with HTML", Carey, Course Technology
You can contact me by email
© 2005, DJ Foreman, All Rights Reserved