Your personal Web Page with HTML

Your Personal Web Page with HTML

The two most important concepts which make the World-Wide Web work are HTTP and HTML. Here is what they mean:

The Hypertext Transport Protocol (HTTP) is one of those system voodoo things, like TCP-IP, which lets computers talk to each other. In a nutshell, TCP-IP is the base language which all computers on the Internet use to communicate, and HTTP is the special language used by servers on the World-Wide Web. We call these special languages protocols. Since HTTP and TCP-IP are used by client and server programs to talk to each other, you don’t need to be able to understand these languages.

All of the Web pages you see, with the exception of any pages on your own system, are hanging out on somebody’s server. If you want to put your Web page masterpiece (the one you are about to create in this lab) out on the Internet for everyone to admire, you have to find an HTTP server for it. This server will hopefully be a campus machine on which you have a free account, or it could be a commercial server. If you have a paid account on an Internet Service Provider (ISP), your monthly fee probably includes space to put your Web pages.

To make a long story short (too late!), only techie types who actually run their own servers need to know anything about HTTP.

HTML

The Hypertext Markup Language (HTML) is a different story. HTML is the actual language in which Web pages are written. So if you want to write Web pages, it helps to learn HTML. Fortunately, HTML is a lot easier to learn than programming languages such as BASIC or C++. It’s more fun, because you can see the visual output immediately.

Is this really necessary?

I may as well be honest and admit that you can create Web pages without knowing a bit of HTML. You can get specialty Web page editors, or simply write your document in a modern word processor and save it as HTML. The program will handle all the details of writing correct HTML. But if you ever want to be any good at this, it helps to know a little HTML. After you get out of these lab exercises, you can decide for yourself whether you want to learn any more HTML or not. So let’s get started.

The basics of HTML are best learned with a very basic text editor. Go to the Accessories group and launch Notepad, a text editor which is about as basic as they get. Type in the following text:

<HTML>
Hey look! I’m a Web page!
</HTML>

The stuff in angle brackets is our first example of a tag, which is the basis of HTML. The first line basically says "Start being HTML" and the last line says "Stop being HTML."

Saving your first Web page

Save this on a local disk as MYPAGE.HTM or MYPAGE.HTML. It’s important that the filename extension be .HTM or .HTML so your Windows system will recognize this file as a Web page.

When you see the Notepad Save As dialog box shown at the right, be sure to change the Save as type from Text files to All files. Otherwise, Notepad will save your file as MYPAGE.HTML.TXT and Netscape will not recognize it as a Web page.

Do not exit Notepad yet! We have a lot of tweaking to do on this primitive example.

Your Web Browser

In this exercise we will be switching back and forth between two windows as we develop your Web page. The Notepad window you just used contains the HTML source code for the page. To see what the page actually looks like on the Web, you need a Web browser.

Depending on your setup, your Web browser will be either Netscape Navigator or Internet Explorer. I will be referring to "Netscape" in these notes, but almost everything works the same for Internet Explorer.

From the Start button, launch your browser (Netscape or IE). From the File menu choose Open File and browse to find the file MYPAGE.HTM. You will see something that looks like the rather unimpressive specimen on the right.

From here on, we will be adding one feature at a time until this Plain Jane page has become your personal statement. This manual will show you some of the techniques for snazzing up your page, and point you to references where you can learn the rest. But the content, your artistic presentation, and whether you choose to have a personal presence of the Web is up to you.

For our first enhancement to this plain page, let’s change the background. Click back on your Notepad window and alter the contents as follows:

<HTML>

Hey look! I’m a Web page!

</BODY>

</HTML>

Here we have added another pair of tags, which is nested inside the original pair. The first new line says, "Start being the body, with a background color of yellow", and the second new line says "stop being the body." By the body we mean the part of the Web page which you see inside the Netscape viewing window. In Notepad, choose File/Save to save this new and improved version of the file.

Now click back to the Netscape window. What gives? Your browser window is still displaying the same old white background. That’s because it doesn’t know that we’ve just updated the page. Give Netscape a wake-up call by clicking the Reload button. (If your browser is Internet Explorer, click Refresh). Now you should see the same text, but on a yellow background.

At this point you may be wondering why we need the BODY tag to specify the part of the Web page which appears on the Netscape screen. After all, what other parts are there?

Well, one other part is the title bar which appears in blue on top of the Netscape controls. Right now this page doesn’t really have a title defined, so let’s add one.

Go back once more to Notepad, and add the following three lines:

<html>

<TITLE>

My First Web Page

</TITLE>

Hey look! I'm a Web page!

</BODY>

</HTML>

Save the file and click Reload. You should see a real title appear on your Web page.

We will continue in this fashion, using Notepad (the editor) to add features to the HTML file and Netscape (the browser) to see the results. But first…

What if we make a mistake?

All right, I know you don’t mistakes. But let’s just pretend for a moment that you at least know someone who does. What’s going to happen if one of these weird little symbols gets left off?

If you have ever written programs in a language such as Visual Basic or C++, you know that leaving off one little comma or semicolon results in a bunch of annoying syntax error messages. Netscape does not give you syntax error messages, which is even more annoying. Netscape will just assume you know what you are doing, and display the page as best it can. The results can be pretty grim.

Let’s show you an example. Go back to Notepad and change the right angle bracket in the fifth line to a question mark.

<HTML>

<TITLE>

My First Web Page

</TITLE>

<BODY bgcolor="yellow"?

Hey look! I'm a Web page!

</HTML>

This is a common typographical error since the two keys are right next to each other on the keyboard. Now save the file, and click the Reload button. You will still see the yellow background, but the text has disappeared!

How on earth can you tell what’s gone wrong? All I can say is, look for the busted HTML tag! In this case, everything works up to the BODY tag which creates the yellow background, and nothing works after that. This suggests that the error is in or near the BODY tag.

Go back to Notepad and fix the error. Reload your page to make sure it’s correct.

As you write your first HTML pages, I strongly recommend that you save your work and examine the results after every small change you make. That way, if something goes wrong, you know that the last change you made was the culprit. It’s next to impossible to spot an error in the middle of a large and complex HTML file.

Headings

Now it’s time to explore ways of dressing up the text inside the HTML body. The HTML heading tag puts text in a large, bold font. Headings come in various flavors from level 1 (biggest) to level 6 (smallest). Let’s test them out by editing the page as follows. Note that every header tag H1, H2, etc. has a matching closing tag /H1, /H2, etc.

<HTML>

<TITLE>

My First Web Page

</TITLE>

<H1>My Incredible</h1>

<H2>Wonderful</h2>

<H4>actually, rather ordinary</h4>

<H5>pretty lame, to be honest</h5>

<H6>World-Wide Web Page</h6>

Hey look! I'm a Web page!

</BODY>

</HTML>

Here’s the result.

In this example we have also mixed the case of the special HTML tags. That is, we used "H1" to start a level-1 heading but "h1" to end it, for example. HTML is case-insensitive, meaning that it doesn’t care whether or not you use capital letters in the tags. But some authors recommend that you still use upper-case tags to make them stand out more.

Centering text

The example to the left might look better if the lines were all centered on the page. This is easy to do with the <CENTER> and </CENTER> tags.

<HTML>

<TITLE>

My First Web Page

</TITLE>

<H1>My Incredible</h1>

..(rest of the headings go in here)

<H6>World-Wide Web Page</h6>

Hey look! I'm a Web page!

</CENTER>

</BODY>

</HTML>

Make these changes in your Notepad file, and Reload the page. You will see that all the lines of your Web page body are centered.

More HTML Goodies

Now that you are used to the idea of HTML tags, let’s look at a Web page which contains several new ones. This time, we will get the page from the Internet.

Go back to Netscape and type the following Uniform Resource Locator (URL) into the Netscape address box:

http://www.cs.uga.edu/~dme/csci1100/kutesy.html

After examining the page, use the Netscape View menu and choose Source. See if you can connect the visual display to the HTML tags that produce it.

A furry psychopath.

Aside from a rather twisted sense of humor, this page demonstrates several useful new HTML formatting features:

The image tag <IMG src="kutesy.html">
The boldface tags <B> and </B>;
The italic tags <I> and </I>
The paragraph tag <P> (note this one does not need a matching </P> tag)

Ignore the <A> tag for the moment.

A multiple-file document

Let’s capture this page to our disk and look at it. From the Netscape File menu, choose Save. Save this HTML file in the same directory where you have created your sample HTML file. Now go back to the Netscape File menu and choose Open File. Browse for the Kutesy.htm file you have just saved.

Ouch! Our adorable furry psychopath has been replaced by a tiny little icon. The icon represents "this is where a picture would be if there were one!" Look at the HTML source again – nothing seems to have changed.

The problem here is that the line

is only a reference to another file, Koala2.gif, which contains the actual picture. To fully capture the Web document, we need both files: the HTML source file and the GIF image file.

Click the Back button on Netscape, which should return you to the original Kutesy. Now point your mouse at the picture and click the right mouse button. This should bring up a menu to save the image file. Save it with the same name in the same directory as Kutesy.htm. Now, use File/Open to look at the saved version. You should be able to view Kutesy’s adorable photo.

This is how an HTML document is used as a framework or container for media files. A complex Web page will actually consist of a number of separate files: the HTML container plus a separate media file for each image on the page.

Hypertext links

Finally, let’s look at the cryptic line

…this list of my <A href = "movies.html">favorite movies!</A>

This is a hypertext link, the most important part of HTML. When you view the page, all that you see is the link text, favorite movies. Clicking on this hyperlink tells your browser to jump to the linked page. The World-Wide Web is a vast network of pages connected by links just like this.

A Busted Hyperlink

Try clicking on the link in the saved version of this page. You get an error message saying the page is not found. Bummer!

In fact, this is the same problem which we just had with the image. The link points to a file named "movies.html," which is stored on the server but not on our disk.

Go back to the Internet version of Kutesy’s home page, and follow the link to Kutesy’s movie page. Use the File / Save method to download Kutesy’s movie page. And don’t forget to download the terrifying Jurassic Park graphic!

Lists

Click on the hyperlink to see Kutesy’s favorite flicks. Go to the menu bar and use View/Page Source to look at the HTML source code:

<html>

<h1>Kutesy's Favorite Flicks</h1>

<OL>

<LI>Terminator

<LI>Friday the 13th Part II

<LI>Sound of Music

</OL>

</body>

</html>

Note the new tags here:

<OL> and </OL> start and end an ordered list.
<LI> introduces a list item. No matching </LI> tag is needed.

Now, use Notepad to edit the HTML source of movies.html to change the <OL> and </OL> tags to <UL> and </UL>. UL stands for unnumbered list. View the results using Netscape – you should see the movies in a list with bullets instead of numbers.

The complete HTML tag reference

As you can see, learning HTML is largely a matter of mastering one tag after another. In the next chapter we’ll be showing you some more advanced tags. But if you’d like to take a peek at the entire list of tags accepted by Netscape Navigator, here’s the official version:

http://developer.netscape.com/docs/manuals/htmlguid/index.htm

Your personal Web page

Now that you’ve learned a bit of HTML, it’s time to create your own personal Web page! This is your chance to express who you are, tell what you find interesting, provide links to your favorite sites, or just show off your artistic creativity.

The key to success is to start slow and work up gradually to more complex and interesting creations. Your very first attempt might look like this:

<HTML>

<TITLE>Joe College</TITLE>

<BODY>

Hi! My name is Joe College and this is the very first version of my personal Web page!

</HTML>

Write something like this, save it, and view it with your Web browser. When you have it working, start to improve and add on! Add only one new feature at a time, and check that it works before proceeding.

Your digital photograph

One of the most interesting features of any personal Web page is a photo. You can scan in a favorite printed photograph of yourself, or use one of the digital cameras in this lab. At the time of this writing, Web browsers recognize only the GIF and JPEG image file formats. If your photo is in a different format, use Paint Shop Pro to convert it to a GIF or (preferably) JPEG image file.