WWW Lab Exercise

WWW Lab Exercise

Goal of Exercise

Everywhere you turn, URLs are popping up. You can't watch T.V. without seeing a U.R.L. at the bottom of a commercial. Soon, a Web address will be like a phone number; everyone will have one. This lab will introduce you to the tools and techniques for making your own home page. You will be required to complete the following exercises and Hand-In your Web document.

Step 1: Building a home

As you know, the Web is just a collection of computers and documents, linked together in a easily accessible way. Before you can have a home page, you have to create an area on your A.F.S. space that other people can access. To do this, you must have already activated your A.F.S. space!

We will use the File Manager to create our directory. Start the File Manager by opening the CPS 130 group and then double-clicking on the File Manager icon. Tell File Manager to look at your A.F.S. space by clicking on the U: drive button.

What you now see is your A.F.S. space.

We want to create a directory called WEB in the PUBLIC sub-directory of our A.F.S. space. Basically, anything we put in PUBLIC can be viewed by anybody in the World. A Web browser looks for a directory called WEB, so we will now create it.

First, in the left window of File Manager, click on the PUBLIC directory. (You might have to scroll down to see it.) Now, select Create Directory from the File pull-down menu. When prompted, type in WEB. File Manager should now look like this:

That's it! You've created your space, now all you have to do is create your document!

Step 2: Creating a name for yourself

When someone tries to look at your home page, the default name of the file searched for is INDEX.HTM. Therefore, by creating a document and naming it INDEX.HTM other people will easily be able to find your home page. The format of an HTML file can be very intimidating. In many ways, it's like a word processing document in that you can type what you want, and then specify the formatting later.

In our learning process we are going to go through several revisions of your Web document, so it might be a good idea to make frequent backups, especially before continuing to each subsequent step.

Open Notepad by double-clicking on the Notepad icon in the CPS 130 group. If you use another word processor, make sure you save as text!!!

ALL HTML files have the following structure:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

The <HTML> ... </HTML> tags (you can think of them as HTML keywords, like we have VB/DOS keywords) must be the first and last lines in your file. These lines tell the browser that they are looking at a bonna-fide HTML document.

The only thing of interest that goes between the <HEAD> and </HEAD> tags is the title of your document. But wait! The title must go between the <TITLE> and </TITLE> tags!

Everything else that is important goes between the <BODY> and </BODY> tags.

Type in the following exactly as it appears into Notepad, and save the file in your WEB directory with the name INDEX.HTM. (If you already have a home page, save the following as 130.htm.)

<HTML>

<HEAD>

<TITLE>My First Home Page!</TITLE>

</HEAD>

<BODY>

Hello, World!

</BODY>

</HTML>

Now, startup Netscape and go to your home page! (your_pilot_id)

Step 3: Making a better name for yourself

Let's try and type in some text and see how it looks when we view it. Type in the following as is and save. (From here on, continue working with the same file.) You only need to type from here on the bold items.

<HTML>

<HEAD>

<TITLE>The Mighty Hercules Home Page!</TITLE>

</HEAD>

<BODY>

Hercules

Hello, and welcome to my home page.

I am powerful, with the face of a god and a major

party animal, I am decidedly stronger than the

average Joe.

I roam the world doing deeds and constantly

getting into family squabbles.

Some of my favorite things include:

CPS 130

The TV Show, Hercules

Pepsi

Hercules

</BODY>

</HTML>

After saving, let's look at it with Netscape (click on the Reload button).

Step 4: Appearence is everything

Disappointed? What happened? Notice that HTML doesn't preserve spaces or lines! Let's modify our HTML file to look like this:

<HTML>

<HEAD>

<TITLE>The Mighty Hercules Home Page!</TITLE>

</HEAD>

<BODY>

Hercules

<HR>

Hello, and welcome to my home page.

I am powerful, with the face of a god and a

major party animal, I am decidedly

stronger than the average jock.

I roam the world doing deeds and constantly

getting into family squabbles.

Some of my favorite things include:

CPS 130

The TV Show, Hercules

Pepsi

<HR>

Hercules

</BODY>

</HTML>

After saving, view the document.

Notice that the <HR> tag inserted a horizontal line into our document. The tag tells the browser to end the line and add a blank line before the following text. The tag tells the browser to end the line but not add the extra blank line like the tag does.

The way to make text bold in HTML is to enclose the text with and tags. For italics, the tags are and .

Well, it's certainly not perfect, but it's looking better.

Step 5: Making a list and checking it twice

Herc's favorites list doesn't look too good. Let's make a bulleted list. HTML uses <UL> and </UL> to signify the start and end of an unordered list. Each item in the list is specified with the <LI> tag. Let's make the following changes to our HTML file.

<HTML>

<HEAD>

<TITLE>The Mighty Hercules Home Page!</TITLE>

</HEAD>

<BODY>

Hercules

<HR>

Hello, and welcome to my home page.

I am powerful, with the face of a god and a

major party animal, I am decidedly

stronger than the average jock.

I roam the world doing deeds and constantly

getting into family squabbles.

Some of my favorite things include:

<UL>

<LI> CPS 130

<LI> The TV Show, Hercules

<LI> Pepsi

</UL>

<HR>

Hercules

</BODY>

</HTML>

Now save and view, and you'll see that Herc's home page is starting to look nice indeed!

Step 6: Standing out in a crowd

Hercules would like to have his name stand out more than the rest of the text. HTML can do this by specifing different Heading Sizes. The sizes range from 1 (largest) to 6 (smallest). Let's make Herc's name have a heading of size 2. HTML does this by enclosing the text in <H#> and </H#> tags where # is a number from 1 to 6. Make the following changes, then save and view the results.

<HTML>

<HEAD>

<TITLE>The Mighty Hercules Home Page!</TITLE>

</HEAD>

<BODY>

<H2>Hercules</H2>

<HR>

Hello, and welcome to my home page.

I am powerful, with the face of a god and a

major party animal, I am decidedly

stronger than the average Joe.

I roam the world doing deeds and constantly

getting into family squabbles.

Some of my favorite things include:

<UL>

<LI> CPS 130

<LI> The TV Show, Hercules

<LI> Pepsi

</UL>

<HR>

Hercules

</BODY>

</HTML>

If you'd like, you can try out different heading sizes now.

Step 7: Changing the background

Herc would like to change the background from drab gray to an image. To do this in HTML, we need to specify what=s called an argument to the <BODY> tag. Arguments have a name and a value. Many tags take many different arguments, but in this case, we want to specify a value for the BACKGROUND argument. The value for the BACKGROUND argument is going to be the name of the image.

Using File Manager, copy J:\vbstd3\labs\herc.gif to your WEB directory. Now, since the image and the HTML file reside in the same directory, the name of the image is herc.gif. This is called the relative URL for the image. The absolute URL for this image is . Whether or not you use absolute or relative documents in your HTML files is up to you, but when you are referring to images and WWW pages that are outside your directory (like a link to a net search such as Yahoo, for example) you must use the absolute URL.

Now that we=ve clarified that, we can say that to specify a background, we put

BACKGROUND=@URL_of_image@

in the <BODY> tag. Note that the argument goes inside the closing =!

Type in the following to get a better idea.

<HTML>

<HEAD>

<TITLE>The Mighty Hercules Home Page!</TITLE>

</HEAD>

<BODY BACKGROUND=@herc.gif@

(rest of document not shown)

Now save and reload the file in Netscape. Notice the background now?

Step 8: Changing the text colors

Sometimes, you=ll want to change the color of the text and of the hypertext links. The color is specifed as an argument to the <BODY> tag. There are four arguments: TEXT (normal text color), BGCOLOR (background color), LINK (a hyperlink you have not visited before), and VLINK ( a hyperlink you have visited before).

Each argument takes a color value. Color values are complicated, so here are some colors.

#000000BLACK

#FF0000RED

#00FF00GREEN

#0000FFBLUE

#FFFF00YELLOW

#FF00FFPURPLE

#00FFFFCYAN

#FFFFFFWHITE

In our case, Herc wants to make the text Blue (instead of the default black), so here is what he types.

<HTML>

<HEAD>

<TITLE>The Mighty Hercules Home Page!</TITLE>

</HEAD>

<BODY BACKGROUND=@herc.gif@ FGCOLOR=@#0000FF@

(rest of document not shown)

Now save and reload the file in Netscape. See how the text color changed?

Step 9: Including a picture

Hercules was browsing through the CPS 130 pages and saw the MSU logo at the bottom right of the pages. Since he liked to help Spartans, he thought he=d display that logo on his pages too. The question is, how does he get that image?

Herc uses the right mouse button and clicks on the image. Do this now, go to the bottom of the CPS 130 page and right-click on the green MSU logo. A menu should appear. Select Save Image As ... and a pop-up dialog appears asking you where you want to save the image. Save it to your WEB directory under the name, MSU.GIF.

Now that we have the image, how do we display it in our HTML file? We use the <IMG> tag and specify the SRC argument. In general, it looks like this:

<IMG SRC=@URL_of_image@

Since the image is in the same directory as our HTML file, we can add the following line.

(rest of document not shown)

Some of my favorite things include:

<UL>

<LI> CPS 130

<LI> The TV Show, Hercules

<LI> Pepsi

</UL>

<HR>

<IMG SRC=@msu.gif@

Hercules

</BODY>

</HTML>

Step 10: Linking to other things

Herc=s pages look really nice now, but he=d like to provide some links to follow for others who happen to stop by his pages. Links are kinda complicated, so take a deep breath before going on!

To make a link in your document, you must first know the URL to what you want to link. Since Herc knows the URL of the CPS 130 page, we=ll make the first bullet of his favortites list a link to the 130 home page. The tag to make a link is <A> and </A>. Where the link points to is specified as an argument to the <A> tag called HREF. What goes between the <A> and </A> tags is what the browser highlights as clickable text.

is the proper way to make a link. Here=s how the list looks after Herc makes that change.

(rest of document not shown)

Some of my favorite things include:

<UL>

<LI> The TV Show, Hercules

<LI> Pepsi

</UL>

<HR>

<IMG SRC=@msu.gif@

Hercules

</BODY>

</HTML>

After making the above changes, saving, and viewing through Netscape, you should do the same for the Hercules home page and for the Pepsi home page.

Hercules:

Pepsi:

Be sure to save and reload when finished!

Step 11: Adding a mailto: link

Hercules just loves getting email. He would like to add a link to send him email from the Web. This type of link is relatively easy to do, once you know how to do general links. The tags are the same <A> and </A> but this time we specify a value as MAILTO:ADDRESS. For example, here is a link that will send mail to the LeadGAs.

The first time you the address appears above, you are telling the browser to whom to send mail when the user clicks on the hypertext. The second time you see the address above, it=s just to specify the text that is clickable.

So, Herc makes the final change to his homepage:

(rest of document not shown)

<IMG SRC=@msu.gif@

Hercules

</BODY>

</HTML>

When you have finished making these changes, well, you know what to do by now!

Step 12: Fending for yourself

You=re done! Congratulations! You now know how to make a home page! Be sure to Hand-In your final edits!

ABut what if I want to learn more?@

The best place to learn about the Web is the Web itself. By looking at the source for others= home pages you can learn quite a bit. In many cases, you can just copy and paste the HTML code right into your document!

AHow do I view the source of another WWW page?@

From Netscape, select Document Source from the View pull-down menu.

Lab #3: Make Your Own Home Page, page #1