[Current] [News] [Glance] [Discussions] [Instructions] [Search] [Links] [Handouts] [Outlines] [Readings] [Labs] [Homeworks] [Quizzes] [Exams] [Examples] [Fall2000.01] [Spring2000]
Goal: In this laboratory, you will learn HTML, the Hypertext Markup Langauge 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.
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.
You should save the template as bio.html in your home
directory (the default folder).
Once you've saved the file, try loading it in Netscape. You can do this by the following insanely complicated sequence:
bio.html in the right panel (or typing in
/home/username/bio.html)
You are now ready to edit the page. Start gnotepad+
(click on the footprint in the panel, select ``Applications'', and
then select ``gnotepad+''. You can also open a terminal window and
type gnp.
Select ``Open'' from the ``File'' menu and select the
bio.html file. gnotepad+ shoudl 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.
You are now ready to consider two related parts of an HTML document.
You may note that the first occurence 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 gnotepad+ 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.)
public_html folder.
mkdir public_html
share public_html
mv bio.html public_html
cd public_html
bio.html accessible to others.
You are now ready to load your biography from the Web. In Netscape, select ``Open Page...'' from the ``File'' menu and type in
http://www.cs.grinnell.edu/~youraccount/bio.html
If it doesn't work correctly, 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?
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.
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
<hr width="50%">
Reload the page and see what effect this 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 the following to your biography,
I've just come to Grinnell college. My adviser, Sam Rebelsky, says that
I'm very glad to have XXX in my tutorial and as my advisee. XXX brings a great deal to the college and to this tutorial.
I am, of course, very glad to have all of you as my advisees, so you are not claiming anything that isn't true.
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?
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.
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
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).
index.html.
public_html
directory.
<h2>Links</h2> <ul> <li><a href="http://www.cs.grinnell.edu/~rebelsky/">My CS prof</A></li> </ul>
http://www.math.grin.edu/~youraccount/
(don't type the index.html).
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 mating
slugs with ``About Grinnell'' from
the Grinnell home page, you might
write
<img src="http://www.grinnell.edu/www/graphics/grin_logo.gif"
alt="Grinnell College">
You can see something similar in a sample document.
You're done. Quit all open applications and then exit from the HP. If it looks like you're way ahead of everyone else, feel free to surf the Web for awhile, or just wander off for a few minutes.
Wednesday, 25 August 1999
Saturday, 28 August 1999
Monday, 30 August 1999
Monday, 28 August 2000
[Current] [News] [Glance] [Discussions] [Instructions] [Search] [Links] [Handouts] [Outlines] [Readings] [Labs] [Homeworks] [Quizzes] [Exams] [Examples] [Fall2000.01] [Spring2000]
Disclaimer Often, these pages were created "on the fly" with little, if any, proofreading. Any or all of the information on the pages may be incorrect. Please contact me if you notice errors.
This page may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2000F/Labs/html.html
Source text last modified Wed Sep 13 10:50:27 2000.
This page generated on Wed Sep 13 10:50:30 2000 by Siteweaver. Validate this page's HTML.
Contact our webmaster at rebelsky@grinnell.edu