Fundamentals of Computer Science 1 (CS151 2003S)
[Skip to Body]
Primary:
[Front Door]
[Current]
[Glance]
-
[EC]
[Honesty]
[Instructions]
[Links]
[Search]
[Syllabus]
Groupings:
[EBoards]
[Examples]
[Exams]
[Handouts]
[Homework]
[Labs]
[Lab Writeups]
[Outlines]
[Project]
[Readings]
[Reference]
ECA:
[About]
[Grades]
[Quizzes]
[Submit Work]
[Change Password]
[Reset Password]
Misc:
[Scheme Reference]
[Scheme Report]
[CS151 2003S Gum]
[CS151 2002F]
[CS151 History]
[SamR]
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).
Once you've saved the file, try loading it in Mozilla. You can do this by the following insanely complicated sequence:
bio.html
.
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 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.
You are now ready to consider two related parts of an HTML document.
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.)
chmod a+x .
(include the period).
public_html
folder. You should only need to
do this once.
mkdir public_html
share public_html
mv bio.html public_html
cd public_html
bio.html
accessible to others. You will need to
repeat this step for every page you put on the Web.
share bio.html
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 inhttp://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
<hr width="50%">
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
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
.
You can do this by giving just the name of the file (without the whole
bio.html
file that's associated with this pagehttp
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]
Saturday, 28 August 1999 [Samuel A. Rebelsky]
Monday, 30 August 1999 [Samuel A. Rebelsky]
Monday, 28 August 2000 [Samuel A. Rebelsky]
Wednesday, 24 January 2001 [Samuel A. Rebelsky]
public_html
directory (after recalling that things went awry last time).
Monday, 2 September 2002 [Samuel A. Rebelsky]
Tuesday, 3 September 2002 [Samuel A. Rebelsky]
http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2002F/Labs/html.html
.
Wednesday, 22 January 2003 [Samuel A. Rebelsky]
http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2003S/Labs/html.html
.
[Skip to Body]
Primary:
[Front Door]
[Current]
[Glance]
-
[EC]
[Honesty]
[Instructions]
[Links]
[Search]
[Syllabus]
Groupings:
[EBoards]
[Examples]
[Exams]
[Handouts]
[Homework]
[Labs]
[Lab Writeups]
[Outlines]
[Project]
[Readings]
[Reference]
ECA:
[About]
[Grades]
[Quizzes]
[Submit Work]
[Change Password]
[Reset Password]
Misc:
[Scheme Reference]
[Scheme Report]
[CS151 2003S Gum]
[CS151 2002F]
[CS151 History]
[SamR]
Disclaimer:
I usually create these pages on the fly
, which means that I rarely
proofread them and they may contain bad grammar and incorrect details.
It also means that I tend to update them regularly (see the history for
more details). Feel free to contact me with any suggestions for changes.
This document was generated by
Siteweaver on Tue May 6 09:28:48 2003.
The source to the document was last modified on Wed Jan 22 11:51:04 2003.
This document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2003S/Labs/html.html
.
You may wish to validate this document's HTML ; ; Check with Bobby
Samuel A. Rebelsky, rebelsky@grinnell.edu