This packet contains a short introduction to the World Wide Web, some semantics of writing pages using HTML, and an exercise for you to walk through in order to build your own homepage.

1 Introduction to the Web

1.1 Seeing the Internet

You’re going to bring pages of the Internet to your computer screen. The Internet is a collection of information stored in computers physically located throughout the world. Much of the information on the Internet is organized onto pages. You’ll bring one page to your computer screen, discover its contents, and have the option of bringing more pages of information.

Content is everything. But to get to the content you seek, you’ll need connections to those pages. Well-crafted pages provide built-in connections to other pages. That is, clicking your mouse button on a highlighted word or picture brings another page of information–a linked page–to your screen. (Keep in mind that since all of this information might be stored at different locations throughout the world, some pages may take longer to appear on your screen, due to the longer transmitting distance. Also, pages that contain more information will take longer to appear than those that are less complex.) The entire network of pages can be potentially interlinked, one pointing to another. As a result, you can bring information in the meaningful context of “Here is some information on a page in front of me, and highlighted on this page is a connection to related information I might wish to explore next.”

Netscape’s popularity stems from the opulence of its pages and the ease of bringing them to your screen. Pages designed with expressive lettering, art, color, photos, sound, animation, forms, and interactivity can be linked to an untold number of similar pages distributed on networked computers worldwide. Netscape explores World Wide Web pages, a part of the Internet rich in multimedia features, as well as other parts of the Internet that are often text-based.

1.2 Understanding Pages

Now you’re probably comfortable with the idea that information on the Internet is presented on pages you see on the screen. Even the navigational concepts are pretty easy:

• You start with a homepage. (When starting up your Netscape session, click on the Home button at the top of the widow. RPInfo, the RPI homepage, will appear.)

• You navigate through a page. There is usually a scrollbar on the right side of the Netscape window that allows you to move the page up and down (there is also sometimes a horizontal scrollbar at the bottom that allows you to move the page side to side). To use these scrollbars, you will be using your left mouse button. Either click on the arrows at either end of the scrollbar, or click on the bar and drag up and down.

• You click on highlighted words (colored and/or underlined) in a page to bring another page of related information to your screen. (When your mouse is on a link, notice that the URL the link goes to appears at the very bottom of the Netscape window.)

Exercise 1 Starting from the RPI homepage (http://www.rpi.edu/), click on the underlined words Rensselaer Polytechnic Institute with your left mouse button. A page with the heading ”Welcome to Rensselaer” should appear in your Netscape window. Now you have the general idea how to get from page to page.

• You click on arrow buttons to go back (or forward) to a page you have previously seen.

Exercise 2 Still on the ”Welcome to Rensselaer” page, go up to the top of your Netscape window and click on the Back icon. You should go back to the RPI homepage. Now click on the Forward icon, which should bring you to the ”Welcome to Rensselaer” page again. Navigating through pages you have already seen becomes easy with these two buttons.

Exercise 3 Starting from the RPI homepage (http://www.rpi.edu/), try to get to the PipeLINK homepage (by clicking only) if you know that Ellen Walker, a Computer Science professor, has a link to it on her homepage.

Every page has a unique URL (Uniform Resource Locator) that serves as its address. Here’s a sample URL:

http://home.netscape.com/home/welcome.html

Within the URL text are components that specify the protocol, server, and pathname of an item. Notice that the protocol is followed by a colon (http:), the server is preceded by two slashes (//home.netscape.com), and each segment of the pathname is preceded by a single slash (/home/welcome.html). Most pages use HTTP (HyperText Transfer Protocol)

- hence the http: at the beginning of the URL.

1.2.1 Another way to open a page

Other than clicking on a link, another way to load a page into your Netscape window is to click on the Open icon at the top of the window. A smaller window will appear in which you should type in the URL of the page you desire to see. After you have typed the location in, either press the return key or click on Open. The page will now load into Netscape.

2 Hints for Writing Your Homepage

You will be writing your homepage using HTML, which is an acronym for HyperText Markup Language. In practical terms, HTML is a collection of styles (indicated by markup tags) that define the various components of a World Wide Web document. HTML was invented by Tim Berners-Lee.

HTML uses markup tags to tell Netscape how to display the text. To use tags:

1. Start with <TAG> where TAG is the desired markup tag that will indicate the beginning of the text to be formatted 2. Enter the text to be put in this format

3. End the section with </TAG>

All of the topics introduced here can be viewed by opening the URL:

http://www.cs.rpi.edu/˜ hammond/introhtml

To see the document that created this page, click on View at the top of the Netscape window and choose Source from the pulldown menu.

2.1 Basic markup tags

Title Every page should have a title. Netscape displays this title at the top of the Netscape window. The syntax of the title tag is:

<TITLE>Text of Title</TITLE>

Headings HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are displayed in larger and/or bolder fonts than normal body text. The syntax of the heading tag is:

<Hy>Text of heading</Hy>

where y is a number between 1 and 6 specifying the level of the heading.

2.2 Linking to Other Documents

The chief power of HTML comes from its ability to link regions of text (and also images) to another document. The browser highlights these regions (usually with color and/or underlines) to indicate that they are hypertext links (often shortened to hyperlinks or simply links).

HTML’s single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:

1. Start the anchor with <A . (There’s a space after the A.)

2. Specify the document that’s being pointed to by entering the parameter HREF=“filename” followed by a closing right angle bracket: >

3. Enter the text that will serve as the hypertext link in the current document.

4. Enter the ending anchor tag: </A>.

Here is an sample hypertext reference:

<A HREF=“whatever.html”>link to whatever</A>

This entry makes the words “link to whatever” the hyperlink to the document named whatever.html which must be in the same directory as the page that you are linking from.

You can also include links to pages that aren’t in your directory. If you wanted to include a link to the netscape welcome page, you would put the following in your file:

<A HREF=“http://home.netscape.com/home/welcome.html”>Netscape Welcome Page</A>

where what is enclosed within the quotes is the URL for the page you want to include.

2.3 Styles for the text in your document

The following are tags that can be used to change the appearance of your text.

<I> Puts the enclosed text into italics.

Example: <I>italics</I>

Output: italics

<B> Puts the enclosed text into boldface.

Example: <B>boldface</B>

Output: boldface

<TT> Puts the enclosed text into a fixed-width typewriter font.

Example: <TT>text</TT>

Output: text

2.4 Formatting the document

Netscape pays no attention to spaces or carriage returns that you put into the text. Here are some formatting tips. Please note that these tags do not need to be paired with a </TAG>.

• To skip to the next line, use the <BR> tag (which stands for line \underline{BR}eak).

• To skip two lines, use the <P> tag (which stands for \underline{P}aragraph space).

• A horizontal line can be placed in order to separate portions of the document. This is done using the <HR> tag (which stands for \underline{H}orizontal \underline{R}ule line).

2.5 Putting images in your document

Images can be put into your document to make it more interesting to look at. To do this, consider a picture stored in the file picture.gif - to include the image, you would put this in your document text:

<IMG SRC=“picture.gif”>

2.6 What will be MY URL?

Your RCS account requires a userid and a password. Your userid is what comes in handy for your URL. All URL’s for students who have homepages on RCS are of the form:

http://www.rpi.edu/ ũserid

So - if my userid is student1, my homepage URL would be this:

http://www.rpi.edu/ s̃tudent1

3 Exercise - Creating your homepage

Now you know enough HTML basics to begin designing your own homepage. In this section, you will be going through some simple steps towards building a homepage. Have fun!!

1. In your main directory, create a subdirectory called public html by typing: mkdir

public html

2. Make a copy of the file that contains your paragraph and put it into this new directory

you have created by typing: cp paragraph.txt public html/index.html (NOTE:

The new copy of the paragraph file must be called index.html.)

3. Why don’t you start up Netscape now, and go to your homepage? See what it looks like now, unformatted?

4. Back in a UNIX window, move into the directory you just created by typing: cd

public html

5. Bring up the file index.html into an editor so that you may begin to HTML-ify your paragraph. Any time you save changes to this file, to see the changes reflected in your homepage on Netscape, go to the Netscape window and click on the Reload button.

6. Add a title to your file – it must go at the top of the document.

7. Put a heading at the top of your page below the title. Experiment with the different heading sizes to see which one you like best.

8. Hunt around and find some cool pages whose URLs you would like to put links to in your homepage (these might even be some of your friend’s homepages!). Now follow the directions in section 2.2 to incorporate these links into your page.

9. Begin to format your text, using some of the tags in section 2.3 and 2.4. You may also want to put in some more headings to make the page clearer.

10. How is your homepage looking? Let’s put your picture on the page now! First we’ll need to bring it into the public html directory, though. At a UNIX prompt, type: mv

mypicture.jpg public html/mypicture.jpg

11. Now, back in the editor, follow the directions in section 2.5 to put the picture anywhere you would like on the page.

12. OK! Now you have the basics built in to your homepage! How do you like it? Take the rest of the time to experiment with your homepage by adding more text, formatting it, and adding more links.

13. Time to use the mail feature from Netscape to mail in a copy of your HTML document. Go up to the File menu, and click on Mail Document. Another window should appear. Fill in the “Mail to” section with Varina’s e-mail address: hammond@cs.rpi.edu . Now click on the Attach button and choose Document Source. Next click on Attach at the bottom of this window (this window will disappear after you do that). That done, click on the Send button at the bottom of the mail window, which will cause the Mail window to disappear.