Goal:
In this laboratory, you will learn HTML, the Hypertext Markup Language
used for the World Wide Web. HTML is a language for describing the
components of a Web pages and the links between those pages. HTML can
be read by humans (more or less) and computers. To learn HTML, you will
develop a few Web pages and make links between those pages.
Note:
You will not be turning anything in for this lab; the goal is the
experience, rather than the notes on the experience. Hence, when I
ask you to think about a question or to note something, you may do
so in your notebook or by discussing it with a neighbor.
There are a number of ways that people create Web pages and put them
on the World Wide Web. Some people write raw HTML
, doing all
the markup by hand. Others use visual editors that let them
compose documents as they would in Microsoft Word or other word
processor. Visual editors handle the HTML behind the scenes
as it were. In this class, you will write HTML directly because
I consider it important for you to understand what's really happening
in a Web page. Don't worry: it's not too hard.
While the work you do today will take advantage of particular features
of the MathLAN system, you will find that you can prepare Web pages in
your favorite word processor or text editor (e.g., SimpleText on Macintosh,
Notepad on Windows).
You'll begin by writing a short (one paragraph) autobiography. Make a
copy of the accompanying template,
which is available online at URL
http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2003S/Examples/bio.html.
You should save the template as bio.html in your home
directory (the default folder).
- In Mozilla, you can make a copy by
clicking and holding with the right mouse button and selecting
in the menu that pops up.
Once you've saved the file, try loading it in Mozilla. You can do this by
the following insanely complicated sequence:
- Select from under the
menu
- Figure out how to choose
bio.html.
- Click on OK.
You are now ready to edit the page. Start gedit
(click on the footprint in the panel, select
, select , and
then select . You can also open a terminal
window and type gedit.
Select from the
menu and select the bio.html file. gedit should then
open the file.
Don't worry if you need help with these steps. It took me a little
while to get them right, and our computers are not all configured
correctly.
You may notice a lot of stuff surrounded by angle brackets, such as
<body>. Ignore that stuff for now.
- Find the first occurrence of XXX on the page (there should be more
than two such occurrences), and replace it with your full name (e.g., Sam
Rebelsky).
- Save the modified file.
- Reload it in Mozilla (just click on the Reload button).
- Note what (if anything) changed.
You are now ready to consider two related parts of an HTML document.
- Replace the second occurrence of XXX with just your first name
(e.g., Sam).
- Save the modified file.
- Reload it in Mozilla.
- Note what (if anything) changed.
You may note that the first occurrence of XXX was surrounded by
<title> and </title> while the
second was surrounded by <h1> and
</h1>. The title is the title of the document, and
typically appears in the title bar of the window and in bookmark and history
lists. The h1 is a level one heading, which typically appears
wherever you put it on the page, but larger and bold. As you may have
noted, the two need not be the same. Your document can have only one
title, but as many level-one headings as you'd like.
Now you're ready to fill in the rest of your one-page biography. Enter
the day, month, and year that you were born, as well as the city, state
and country. Then write one paragraph about yourself in the designated
area. Yes, the paragraph can be short.
You may have noted that the URL (uniform resource locator) you've
been using for your page is a little bit different than the URLs
you've seen for other pages. In particular, the URL for your page
begins with file, while the typical URL begins with
http. That's because you've been accessing a local
page. It's now time to put the page on the Web.
You should quit gedit before installing the page.
Most Web servers require that you put your Web pages in particular
folders. In the MathLAN, the folder for your Web pages is called
public_html. (Yes, you need to use that capitalization
and the underscore.)
- Quit gedit if you haven't done so already.
- Make your primary folder partially accessible. You should only
need to do this once.
- Open a terminal window.
- Type
chmod a+x . (include the period).
- Create a
public_html folder. You should only need to
do this once.
- Make the folder accessible to others. You should only need to do
this once.
- Move your biography to that folder.
- Type
mv bio.html public_html
- Switch to that folder.
- Make
bio.html accessible to others. You will need to
repeat this step for every page you put on the Web.
When you create Web pages in the future, you should only need to put them in
your HTML directory and share them.
You are now ready to load your biography from the Web. In Mozilla, select
from the menu
and type in
http://www.cs.grinnell.edu/~youraccount/bio.html
You should substitute your account (e.g., rebelsky) for
youraccount.
You need to include the tilde.
If you can't view the page, let me know. Verify that your colleagues
(those on the computers around you) can also open your page.
As the first experiments may have suggested, HTML
files consist of a text surrounded by a lot of tags: things in
angle brackets. You typically precede text by a start tag and
follow text by a corresponding end tag (end tags have a slash
after the less-than sign). Look at the rest of the file, and list the
tags that you see. What do you think each tag does?
Write down an answer to this question in your notes.
Look at a few other Web pages (for example, you might look around
the course web). Are there other things that you see on pages?
List as many things as you can.
Write down an answer to this question in your notes.
One convenient thing that many people add to Web pages is the
so-called horizontal rule, which is given by the
<hr> tag. A rule is used to separate
portions of the page. Before the section that says
By Your Name Here, add an <hr>
tag and reload the page.
Next, change the tag to read
Reload the page and see what effect this change has.
You've just added a parameter to the tag. Parameters allow
you to customize further certain aspects of your page. We'll leave
other aspects for later.
It is likely that you'll be using HTML to write some (but not all) of
your papers. Hence, you'll also need to deal with some of the particulars
that are expected in academic papers. For example, you will eventually
need to include block quotations: quotations that are indented and
set off from the surrounding text. In HTML, you use the
blockquote tag for block quotations (and yes, you do need
an ending tag).
Write HTML to add something like the following to your biography,
I've just started taking computer science. I'm a little bit worried
that my instructor, Sam Rebelsky, is somewhat insane. He's told me
that
I'm very glad to have XXX in this class. Because of his/her
ability to give instructions for making peanut butter and jelly
sandwiches, I'm sure that she/he will figure out how to
develop elegant solutions in Scheme.
I am, of course, very glad to have all of you in this class, so your
aren't claiming much that isn't true (I'm not sure what you think about
my sanity).
If you have difficulty coming up with the correct HTML, please let me know.
One of the most frustrating aspects of working with HTML is that it never
seems to line things up quite the way that you want them. In discussion
today, you'll learn why. One thing that you should note is that HTML
effectively ignores multiple blank spaces. That is, two blank
spaces (or blank lines) is the same to HTML and Netscape as one or one
hundred.
Try adding and deleting space from your page. For example, replace
<h1>Biography of XXX</h1>
with
<h1>Biography of
XXX
</h1>
Do the changes have any effect?
Write an answer in your notes.
You may have noticed a table of courses that uses
<table>,
<tr>,
<th>, and
<td> tags.
What do you think will happen if you remove the table
tag? Try it and see. Then put it back.
What do you think will happen if you remove a td tag?
Try it and see. Then put it back.
Try removing a few other tags in the section and determine the effect.
When you're done, add your classes.
You may want to record your observations in your notes.
As you may have noted, we've missed a key aspect of hypertext: links.
In HTML, each document contains its own links. (In class, we'll talk
about other ways of thinking about links.) You create links with the
link anchor tag, which is written
<a href="...">text for the link</a>
There are three kinds of links in HTML
- General links to other Web documents.
- Relative links to other documents in the same site.
- Internal links to other parts of the same page.
We'll play with general and relative links as we create a new
home page for you. We'll leave internal links to another
day (or to your own explorations).
- Create a blank HTML page called
index.html.
- Yes, you still need a head and body.
- Use your name for the title.
- Make sure to store the page in your
public_html
directory.
- Make sure to set protection so that others can access the page.
- Add the following to your page:
<h2>Links</h2>
<ul>
<li><a href="http://www.cs.grinnell.edu/~rebelsky/">My CS prof</A></li>
</ul>
- Save your page.
- Load the URL
http://www.math.grin.edu/~youraccount/
(don't type the index.html).
- Click on the link.
- If it works, congratulate yourself: you've added your first link.
- If it doesn't work, let me know and we'll work out the errors.
You've just created a general link. Now let us turn to relative links.
Suppose you wanted to let people who have loaded your home page also
view your biography. You'd like to create a link to bio.html.
But there's a good chance that when you move your home page (yes, that's
right, most people end up moving their home page at some point), you'd
also move bio.html. Hence, rather than giving a full URL
that you'd have to change, you'd rather write just use the
bio.html file that's associated with this page
.
You can do this by giving just the name of the file (without the whole
http stuff). For example,
<p>Feel free to read <a href="bio.html">my biography</a>.</p>
Create a link to your biography and verify that it works.
Unlike natural language, which is fairly mutable, HTML has a quite formal
syntax. Unfortunately, not all Web authors adhere to the formal requirements.
(I'll admit that I sometimes screw up, too.) Fortunately, most browsers are
fairly nice about dealing with common errors.
I'd like you to try hard to write correct HTML. You can always check whether
a page uses correct HTML by entering its URL at
http://validator.w3.org. Please check whether the two pages
you've just created are valid.
As you know, there is more to a typical HTML page than just text. Most
pages (although not my pages) contain some images. How do you
add images to your pages? With the legendary IMG tag.
Typically, an IMG tag has the following form:
<img src="..."
alt="...">
The src is like a link: it gives a URL or a relative file
name for an image file. If you wanted to use the basic
Grinnell College logo,
you might write
<img src="http://www.grinnell.edu/www/graphics/grin_logo.gif"
alt="Grinnell College">
You're done. Quit all open applications and then log out from the computer.
Wednesday, 25 August 1999 [Samuel A. Rebelsky]
- Created empty file. (For tutorial.)
Saturday, 28 August 1999 [Samuel A. Rebelsky]
- Wrote a few introductory paragraphs.
Monday, 30 August 1999 [Samuel A. Rebelsky]
- Filled in the rest. I probably need to remove some needless sarcasm.
Monday, 28 August 2000 [Samuel A. Rebelsky]
- Updated for CSC151 2000S and new MathLAN installation.
- Added section on tables.
Wednesday, 24 January 2001 [Samuel A. Rebelsky]
- Added more instructions on setting up the
public_html
directory (after recalling that things went awry last time).
- Reformatted for new course.
- Updated a few other small aspects of the page.
Monday, 2 September 2002 [Samuel A. Rebelsky]
- Updated slightly for a new course.
- Updated slightly for Mozilla.
Tuesday, 3 September 2002 [Samuel A. Rebelsky]
Wednesday, 22 January 2003 [Samuel A. Rebelsky]
;
Check with Bobby