Date: Tue, 14 Jan 1997 19:48:24 GMT Server: NCSA/1.5 Content-type: text/html Last-modified: Mon, 03 Jun 1996 22:39:46 GMT Content-length: 26085 Authoring World Wide Web Home Pages (PC users)

Authoring World Wide Web Home Pages on a PC

This page is maintained and supported by Kevin Treu of the Department of Computer Science. Please feel free to write at treu_kevin/furman@furman. edu with questions and/or suggestions.

Overview
By this time you have probably had some experience with basic "Web surfing" using Netscape, and thus can appreciate the amount of information that is "out there" and easily accessible. What makes the Web truly exciting, however, is the ease with which we can contribute to it. In this workshop, we will explore firsthand the basics of the HyperText Markup Language (HTML) used to create home pages, see how to include digitized images and find out how to load pages so that they are accessible to the entire Internet community.


1. Introducing the concept of HTML

The process of producing pages for the Web is surprisingly simple. Once you become familiar with some of the basic concepts, you'll find document preparation for the Web as easy as you presently find word processing. (Hopefully that's a good thing!) Home page authoring employs the Hypertext Markup Language (HTML). We'll address the meaning of the "hypertext" part shortly. The "markup" part is the key to the simplicity of HTML. What it reveals is the fact that documents are created by merely adding special characters--called tags--to basic text files. That is, by "marking them up."

a. To begin, start up Netscape and find any page of interest. The page you go to first will do. Select Source from the View menu. You will suddenly find yourself looking at a screen full of characters, some of which probably look familiar to you, others of which probably do not. What you are looking at is the HTML file which is processed by the Netscape program to create the page you were looking at when you executed the Source command. Our goal is for this page to make perfect sense to you by the end of the workshop.

Let's start to explore this language. In the first part of our workshop we'll create a sample personal page on your diskette. (Alternatively, you can work on the hard disk of your computer, but for obvious reasons you shouldn't do this in a public lab.)

b. Create a subdirectory on your diskette called Web. Use the Windows utility NotePad to begin editing your home page. Save it in the Web directory under the name index.htm, for reasons that will be explained later. (Save it on your diskette, not on the hard drive in the lab.) The contents should be simple text, including:

  • your name on the first line
  • your class year and major on the second
  • your campus address, phone number and e-mail address on subsequent lines
  • a list of your classes for this term
  • a paragraph describing your extracurricular activities and interests

Note: Any word processor would be suitable for this purpose, as long as you can save files in text-only (ASCII) format. The key is that you not have all of the special control characters which regulate margins, indenting, fonts, styles, etc. in a word processor, but have no meaning on the Web.

c. When you are through editing the file, save it and start up Netscape. (Note that you can keep both Netscape and NotePad running at one time. Just use the alt-tab key sequence to toggle between running applications.) Now we'll see what the fledgling home page looks like. Go to the File menu and select Open File. The resulting dialog box permits you to open any file on your PC disk as an HTML document. Navigate to your diskette and open index.htm.

Kind of a mess, right? Notice that Netscape ignores all tabs, carriage returns, sequences of spaces, etc. It simply takes the characters you have produced and runs them all together. So what is to be done next? Marking up the text with tags, of course!

Before we proceed, we should discuss the fact that HTML is indeed a limited language at the present time. Don't expect to be able to do all kinds of fancy formatting like you can with a word processor. That's just not what HTML is for, at least in its current incarnation. (Version 3.0 of HTML, due out soon, will have some pretty nice new features though.) However, as you probably already know from your Web explorations, some fairly eye-catching presentations can be created. Let's start to see how.


2. Beginning HTML tags

Almost all HTML tags have the following format:

<tag> text, possibly including other tags </tag>

As we'll see, there are some notable exceptions, but in general you should always think of tags as coming in pairs. The first set of tags we'll consider are general structure tags. These are used to identify certain parts of your document. Though not strictly required by all browsers, they reflect good HTML style and so we'll start with them briefly. The structure tags include:

d. Change the context from Netscape to NotePad to edit your file. Edit it so that it looks like this:

<html>
<head>
</head>
<body>
what you've written so far
</body>
</html>

e. Next, add a title. Every Web page needs a brief, descriptive title. This is what becomes accessible to various Web searchers, identifies pages stored in Bookmarks lists and the Go menu, and is displayed at the top of the Netscape window when accessed. This uses--you guessed it--the title tag (<title> title of your page </title>). It is placed between the head tags. Edit your file to include an appropriate title, such as "Jane Doe's Personal Page". Don't forget to save the file.

f. Switch back to Netscape to view the page again. When you are in Netscape, click on the Reload button. This will cause the changes you have made to take effect. You won't notice much different this time, except that now the title is included at the top of the Netscape window.

Now let's start making the page a bit more presentable. To start with, we would certainly like to separate logically related passages of text from one another, probably identifying them with appropriate subtitles. (Just like in an outline of a paper.) The heading tags (h1, h2, ..., h6) take care of this nicely.

g. Surround both your name and class year with a h1 tag pairs, for example:

<h1>Jane Doe</h1>
<h1>Junior, English Major</h1>

Proceed by placing subtitles in your document for each section using h2 headers:

<h2>Address Information</h2>
address stuff you wrote before
<h2>Class Schedule</h2>
class stuff you wrote before
<h2>Activities and Interests</h2>
activity stuff you wrote before

Save your file and use Netscape once again to check out your document. (Use the Reload button.) That's a little better! Note that the heading tags are numbered according to size, with the "level one" (h1) tags the largest and the "level six" (h6) tags the smallest. Effective outline-style presentations can be easily constructing using these. Try experimenting with some different sizes.

Turning our attention to the specific contents of each section of our document, we would at least like to separate lines of text from those we intended to be on different lines. Two tags--both notable examples of tags which do not come in pairs--are used for this. They are the p (paragraph) and br (line break) tags. Whereever they are placed in a document, they cause the character immediately following to begin on a new line. In the case of the paragraph tag, there is a blank line inserted before the next character is displayed. The line break tag simply causes the new text to be on the very next line.

h. Insert line break tags after each line of your address/phone number information, and after each of your classes. After the last item in each section, insert a paragraph tag. For example:

Room Number<br>
Box Number<br>
Phone<br>
E-mail address<p>

Once again, check out the file with Netscape. Things are shaping up! (Note: Do not do this with your class or activity information. We'll get to those shortly.)


3. Adding links to other documents

So far we've only seen HTML as a not-very-good word processor. What makes it special, though, is the ability to include hypertext links in the Web pages it produces. These are the highlighted words (and images) on a page that can take you somewhere else on the same computer, or halfway around the world with a single click.

Fortunately, these links are very simply implemented in HTML. They employ tags just like we have already seen. The general format of a link is:

<a href="resource URL">text or image</a>

It's that easy! Now, a basic familiarity with Universal Resource Locators (URLs) has been assumed for this workshop. In brief, however, a URL such as this one:

http://s9000.furman.edu/~treu/cheers.html

breaks down as follows:

http:// -- identifies the resource to be accessed as a hypertext page
s9000.furman.edu -- identifies the machine address in the Internet
~treu/cheers.html -- identifies the path to the resource

There can be numerous variations of URLs. The resource identifier may be other things besides "http" for instance. (You should notice some other options in your net travels.) Sometimes the path may be omitted, as well as the file name. This is because certain paths and file names are accepted as defaults by Netscape and other Web browsers. We'll soon see what those defaults are for our system.

It is important at this point to note that URLs come in two forms: absolute and relative. The easier of the two to understand is the absolute form. In short, an absolute URL is one that is fully specified, including http:// (or another resource identifier) and the machine name. The previous example is an absolute URL.

Specification of URLs can sometimes be simplified by using the relative form. This is possible whenever a link to another resource on the same computer is to be included. In short, the resource identifier and machine address can be omitted in this case. As long as Netscape can figure out where a resource is--based on where you currently "are"--what you need to specify in terms of a URL is minimal. For example, if I am currently accessing a page in my own directory (~treu) and want to access the Cheers page, the relative URL simply reduces to

cheers.html

To simplify matters, just remember this: use relative URLs when you are creating links to pages of your own, and use absolute URLs when you are creating links to pages elsewhere on the Web.

Let's add a link or two to your home page.

i. Many people include a list of interesting Web sites on their personal pages. Let's start such a list on your sample page. Near the end of the file (before the </body> tag) insert the following:

<h2>Links to check out</h2>
<a href="http://cool.infi.net/">Cool Site of the Day</a>
<p>

Use Netscape to open the file. You should see the words "Cool Site of the Day" highlighted in blue. You have created your first link! Clicking on this text should take you to an interesting Web site which you have visited before. Try it out.

j. Find and write down the URLs of other interesting pages and add new links to your list. You can also make a link out of any text on your page. See if you can find a Web page dedicated to one of your activities or interests and make a key word in your "activity paragraph" into a link to that page.

Presumably you will go on to create more pages of your own. All you need to do is create a file that ends in .htm in your Web directory and create a link to it. For instance, say you create a page containing information about your favorite band. Just store this page as band.htm in the same directory as your index.htm file. To create the link, all you need is something like this:

<a href="band.htm">My Favorite Band</a>

Compare this use of a relative URL to the absolute form you have used thus far. Much simpler, right? That is because band.htm is stored in the same place as index.htm.

k. Try this. Create a new page ending in .htm using NotePad and save it in your Web directory. The contents of the page are unimportant. Create a link to this new page in your index.htm file and try it out.

We'll soon see that images, and not just text, can be made into links as well.

The e-mail link
A popular Web page feature is to have a link which allows someone to quickly and easily send e-mail to the author of a particular page. Add one of these to your page.

l. Surround your e-mail address with a tag using the "mailto" indicator. If your name were Jane Doe, you would add:

<a href="mailto:doe_jane/furman@furman.edu">doe_jane/furman@furman.edu</a>


4. A bit more HTML

Before moving on to the inclusion of images in your document, lets apply a bit more polish using additional features of HTML.

Horizontal rules
You have already separated the different segments of your page using subtitles. Often a non-text separator is also desirable. It is for just this purpose that HTML includes a facility for including horizontal rules as dividers. These are implemented using another non-pair tag, hr, which stands for "horizontal rule."

m. Prior to each level two heading (<h2>), include the tag <hr>. Check the effect using Netscape.

Lists
It is probably clear from your Web travels and from this workshop so far that information is often best organized into succinct lists. HTML provides tags for the implementation of three majors types of lists: unnumbered, numbered (or ordered) and descriptive. We'll implement the first two today, and leave the third to your reading and experimentation.

n. Make your list of classes into an unnumbered list. The basic tag for such lists is ul. An additional tag for each list item is required also, and as you might expect, this tag is li. Make changes as follows:

<ul>
<li> class 1
<li> class 2
<li> class 3
</ul>

o. Next make your list of interesting links a numbered list, using the tags <ol> ... </ol> Check out the page using Netscape.

Note at this point that there is no problem applying new tags (for the list) around the tags you already used to indicate links. In general, any number of tags can be applied to the same text, as long as it makes sense to do so.

Character formatting
Some rudimentary character formatting abilities are provided in HTML, but we won't spend much time on them. Try experimenting with <i>...</i> and <b>...</b> tags for italic and bold text, respectively. Another popular feature is the ability to center text.

p. Center your level two headers by enclosing them in the tags <center>...</center>.


5. Venturing onto the Internet

Thus far your page really hasn't been accessible to anyone but you (and that's probably just the way you want it right now!) because it is stored on your diskette, which is not accessible from the Internet (since it isn't running a Web server). To change this, you will have to "upload", or copy, your page to a computer which does have a Web server running on it. In the next activity you will learn how to do this. For the moment, however, we'll keep things simple and keep them on your diskette.


6. Using images

Finally, let's add an image to your page. Images that are interspersed with your text are called in-line images. (More on other types of images later.) A special kind of tag, called img, is used to include these. This tag uses the following basic format:

<img src="URL for image">

Let's add a picture to the beginning of your page, just before your name.

The first thing you will need, of course, is a digitized image of some kind. Fortunately, these are easy to come by. Any image that you find displayed on the Web can be downloaded to your diskette and re-used. To see how it's done, let's get a copy of the Furman masthead from the Furman University Home Page.

q. First use Netscape to access the Furman home page (http://www.furman.edu/). The masthead image is at the top of the page. To get a copy of it, simply click on it using the right mouse button and hold the button down. A menu will pop up on the screen. Select Save This Image As. You will then be presented with a dialog box like those you have seen before. Navigate to your Web directory and save the image. It's as simple as that!

Now add the image to your own page using the img tag described above.

r. Edit index.htm to include the line

<img src="furman.gif"><br>

right after the <body> tag. Once again, open your page using Open File in Netscape to check out the new image.

Note: Other options for the img tag include align and alt. The former defines how an image is to be positioned relative to surrounding text if they are interspersed. The latter defines a textual substitution for the image in the event your page is being read by a text-only browser, such as Lynx. In the interests of time, we'll omit these options today. Consult an HTML text or ask me if you'd like to know more though.

Other sources of images
There are numerous sources of "generic" images that you can use to make your pages more visually appealing. These include buttons, icons, fancy lines, backgrounds, etc. Remember that anything that you can view using Netscape-- anywhere in the world-- can be downloaded and use in your own pages. Take advantage of this!

In addition, you can create your own original digitized images using a drawing or painting tool. Finally, you can digitize existing images with the use of a scanner. An accompanying workshop describes how to make use of this technology.

As mentioned earlier, hypertext links need not always be text. We can make the Furman masthead image into a link to the Furman home page simply by including the URL for the image inside the tag for a link.

s. Modify the img line you just added to read

<a href="http://www.furman.edu/"><img src="furman.gif"></a>

Test the "image link" using Netscape.

t. Repeat the image-copying exercise by copying an interesting separator-line image from the Web. Two good sources for these are

http://www.widomaker.com/~spalmer/lines/solid/index.html

and

http://www.widomaker.com/~spalmer/lines/textured/index.html

Pick one and copy it to your directory. To use it, replace the hr tags (horizontal rules) in your file with the appropriate HTML line. (This is a good test of whether or not what you've done so far makes sense.)

In general, in-line images should be used with careful thought. Cluttering your pages with too many images can not only be unattractive, but a source of considerable inefficiency for those trying to access your page.

Backgrounds
Suitable images can be used as backgrounds to your pages to make them more eye- catching. Repositories of these images can be found all over the Web.

u. Access the location

http://www2.netscape.com/assist/net_sites/bg/backgrounds.html

Select one of the background patterns and copy it to your diskette as you've done twice before. For a file called background.gif, change the body tag in index.htm to read

<body background="background.gif">

Use Netscape to see the effect of this simple change.


7. Advanced topics

Though we have (hopefully) laid a strong foundation for understanding HTML and writing multimedia, hypertext Web pages today, there is a lot to HTML and the Web that we are omitting, including the use of images, sounds and movies as external resources, writing fill-out forms and "clickable" imagemaps, incorporating other Internet tools such as e-mail, FTP, Gopher and News, along with various and sundry small features of HTML. Maybe we will have a follow-up lab to cover some of these topics, but in the meantime you have access to various HTML textbooks and the best teacher of all--the Web itself.

Just as we can access images from other pages, we can access HTML ideas too. Use the Source option of the View menu regularly. If you see something interesting and you would like to know how to accomplish it, you know how to get a look at the HTML code itself! If you see an appealing page layout somewhere, save a copy of the HTML source to use as a template, filling in your own information where appropriate.

There is no substitute for experience and experimentation when it comes to learning HTML. We'll try to build some more experience in our afternoon session today, but I hope that you'll continue to explore after this workshop concludes.


8. HTML Editors

You will not always have to do your Web authoring using the "gory details" of HTML as described in this lab. Already there exist several HTML editors which, like word processors, allow you to create Web pages using the "what you see is what you get" concept. As your interest in creating Web pages grows, you may want to check some of these out. Ask me about finding a good editor if you like.


9. More information

With this workshop (and maybe a suitable textbook), you have a great deal of information about HTML and the Web to digest. A lot more can be found on the Web itself. Just to point you in a couple of productive directions, I suggest you look up the following:

NCSA Beginner's Guide to HTML
http://www.ncsa.uiuc.edu/demoweb/html-primer.html
Bob Allison's Webmaster's Page
http://gagme.wwa.com/~boba/masters1.html

There are many others as well. I have found these two to be particularly helpful as starting points in my own learning process, however.


Next: Putting Your Home Page on the Web