CS 130 Lab #7: Representing basic hypertexts
Note: you will likely need to refer to some of these HTML tag
reference pages while working on this lab:
- An award-winning introduction to HTML
- A W3C-sponsored introduction to HTML
- W3School's HTML 4.01 tag reference
- HTML Dog's HTML tag reference
- WebMonkey's HTML "cheat sheet"
The purpose of this lab is to explore the underlying encodings which make
hypertext documents visible and useful to people through browsers. HTML (the
hypertext markup language) represents the early and current (widely-used)
state of web technology: we will use this as a basis for studying XML and XSLT
in a later lab (these two are part of the technological future of the "semantic web").
There are two main parts to the lab, one which asks you to do some small
experiments with HTML and the other which asks
you (in a more open-ended fashion) to create a small home page for yourself.
Note that different browsers (FireFox, Internet Explorer, Netscape, etc.)
may display things differently, from each other or from how the book claims
they will look. This is normal and to be expected: in fact, it helps to
emphasize our main points, which are about the relationships between
physical represntation and abstract structure.
Some notes on files and editors
You will want to work in a text editor such as NotePad or Wordpad in
order to create your HTML file (these are available in
Windows under the Utilities or Word processors sub-headings of the Programs menu via Start). You will probably also want to keep a browser
window open to display what the rendered HTML code looks like.
always remember to both save your text file (in the text editor window) and
then refresh your browser window before you expect to see changes.
In order to make your web page and experiments accessible from anywhere on the
web, you should save your files in the "public_html" folder on your
"H" drive (the one with your login name on it). If you don't have a
"public_html" folder, just create it with the "new folder" button
on the top level of your "H" drive. (You must spell it all in lowercase and with the underscore between words! You should also remember to
save your file with the ".html" extension.) These should be enough to
make your page visible on the web from the URL:
where "YOU" is replaced by your login name and "NAME" is replaced by the name
of your file. If you still have trouble viewing your page, it could be due to
issues with the file permissions (I'll add instructions about this later if
it is a problem in lab).
If you want to edit your home page on your home (or dorm) computer, you'll need access to your
"H" drive from there. You may already have this set up, but if not, check out the
WITS instruction page on how to do this:
mapping your H drive
One other thing you should watch for: save your file as a plain text document,
replace the ".txt" extension at the end of the file name with
a ".html" extension. If you see something like the picture below, it's probably
because your file got saved with the Rich Text Format (RTF) style.]
Some experiments with HTML
For this section, you should try these short experiments with HTML code and how
it is displayed and be ready to demonstrate the results for your demo.
Here are some things you can try:
- How is the strong tag displayed in your browser? How about just emphasis?
Do they look different in different broswers?
- What happens if you forget to close a tag such as for bold face or italics?
What happens if your forget to close an "important" structural tag such as
head, body or html?
- What happens when you nest tags "improperly", so that (for example) one
tag begins before the other one ends?
- How can you put Unicode symbols into a page? Can you discover (with a web
search) what named HTML character entities are available?
Creating your own home page with HTML
For this section, you should create a little sample page for yourself in HTML.
If you store it as the file "index.html" in your "public_html" folder, you
should be able to access it by just typing this URL:
(In other words, this becomes the default page used when someone comes just to
your login name at Willamette's web site.)
Although you are welcome to dress up your home page any way you want (and of course
to modify it to taste after your demo is over), I would like to see you
use at least the following HTML features somewhere in the page (you will find details
on most of these features in your textbook):
- Use a few different fonts and styles, including both "physical" and
- Use HTML character entities to place at least 2 interesting Unicode symbols
of your choice somewhere on your page. You can use
this reference chart,
but it's also fun to look for other characters in the Unicode BMP
(just remember to either convert the code number to decimal or else use an "x" between
the pound sign (#) and the number itself to indicate hex).
(Try this link if the last one is down.)
☺ ♥ ☣
- Use at least two hypertext links in your file: one of these should be a
"mailto" link (read about it here).
- Include a some sort of ordered or
unordered list in your file (a table of contents, some favorite websites,
names of all your pets, etc.).
- Embed at least two images in your file; one of them should be a
link to a picture on your H drive (say a thumbnail linked to a larger version
of the same picture) and one should be an embedded reference to some external
picture stored on another computer (e.g., from another web page).
- Use comments somewhere in your page.
- Use at least two colors in your page (either as background color, or
in a table cell, for a horizontal rule, etc.).
- Use a table somewhere in your file (e.g., to show your time schedule, or
a list of music you like, etc.).
Please have your experimental results and your page ready to demo by the end of lab on
⌛ Friday 14 April ⌛.