Novice HTML

August 27, 1996

Amber Himes

Contents

Introduction
Using Word Internet Assistant for Basic Layout and Functionality
HTML/Basics
Getting Deeper into HTML: Leaving Behind Internet Assistant for Notepad
Making HTML Code Do What You Want on a Web Page
Using Images and Icons
Finding a Server
Maintenance

Introduction

At the beginning of the summer of 1996, I started an internship at Microsoft as an Internet research assistant. As a college student who knew little of the Internet other than how to browse the World Wide Web, I was in a position to learn much more about it.

One of my first assignments was to start browsing the Internet for research projects that required me to find and organize certain information. At this point, I decided that I wasn't getting the whole picture of what the "Web" really was. My group had been getting a lot of requests for beginner-level information about building Web pages, so I decided to build a Web page for my college rowing team and also share the site-building information I gathered.

I wanted a way to show people my school's crew team and I wanted to share all of the rowing information that I had collected on the Internet. From the Web surfing that I have done, I have found hundreds of rowing-related Web sites: from collegiate teams to rowing clubs to individuals who have made their own rowing pages. I had my topic; all I had to do was make the page.

After seeing all of the information available on the Internet about rowing, I was even more determined to learn how to make Web pages. I figured that I could just ask someone I worked with to help me get started and then I could ask questions any time I had a problem. But all I was given was a so-called complete guide to HTML--the language used to prepare documents distributed on the World Wide Web--and a quick five-minute tour of how to place text and images in Microsoft Word Internet Assistant, an add-on program for Word that helps you make a Web page. Then I was sent back to my office to begin learning HTML on my own.

Using Word Internet Assistant for Basic Layout and Functionality

The first advice I received on creating a Web page was to learn to use Microsoft Internet Assistant. Internet Assistant is an add-on program that turns Microsoft Word documents into HTML documents very easily. It has a new toolbar and set of menu commands for Word that work together to create an HTML document behind the scenes. And guess what: You can get it for free! If you have Word for Windows 95 or at least Word 6.0, you can get this program and an online tutorial from this Microsoft Web site:

http://www.microsoft.com/word/Internet/IA/default.htm

Internet Assistant makes Web-page creation pretty easy. It is just like using a glue stick to place magazine clippings and pictures on a plain piece of paper. You use the toolbar to simply type your text directly on the page and change the size, font, or alignment. To place an image you click on the toolbar's picture icon and find your image's file in the dialog box. The image comes up on your page and you can move it around wherever you want it.

Here are some basics of Internet Assistant:

Once you have learned how to use Internet Assistant, the next step is to come up with a page design. Quickly take a piece of paper and a pen and draw a rough sketch of what you would like your page to look like. With this idea in mind, start trying to create it in Internet Assistant and see what you can do with it.

Finally, give the page a name and save it as an HTML document onto your hard drive--now you have a Web page file that can be put on the Internet. After I started thinking it was easy, however, I began running into problems that I did not know how to fix.

When I asked for help, I was told to look on the toolbar under the View menu and select Source. This led me to the evil HTML code that I dreaded having to look at, because it seemed like an indecipherable secret message that no one could possibly understand except the all-powerful computer nerds of the world. So I decided to try and crack the code using any and all books and resources that I could get my hands on.

HTML Basics

The first step in cracking the code was to find out what available literature and software I would actually understand. So I started searching the Web for any online resources that other people or companies had made. From what I found, there are a ton of free guides for making Web pages and writing HTML.

When I started reading about HTML, the code was not as confusing as it had first appeared. Basically all that is involved is typing in your text and then inserting commands, called tags, that specify the kind of effect you want. There is a tag for almost everything that you might want to do: mark text as headings, paragraphs, lists, image placement, fill-in forms for user input, and links to other Internet resources. HTML is just the sum of all of the tags and text.

For instance, the following are basic tags that every HTML document must have; once you have these, all you need to do is start typing your text between the tags:

<HTML><TITLE>     </TITLE><BODY>"type your text here"</BODY></HTML>

This shows how almost all tags come in pairs. For each set of tags, one is a set of brackets <…..> that designates the beginning of the command and one is a set of brackets with a forward slash that designates the end of the command. Any tag that you type has to have both a beginning tag and an end tag, with the exception of paragraph and image tags (and a few others). Image tags need to display the source of your image within brackets, for example:

<IMG SRC="filename">

Places an image on the page

Creates a paragraph break

HINT: Remember to check all of your tags when writing anything in HTML. Some Internet browsers are very picky about the way that HTML is written and if you make even one tiny mistake, the entire tag will be disregarded. So make sure you have a beginning and ending tag when needed, equal signs and colons in their proper places, correct filenames, and brackets around all tags.

Going through all of my Web resources and trying out what I read was very helpful. Slowly I started learning exactly which codes could change things in different ways on the page.

Getting Deeper into HTML: Leaving Behind Internet Assistant for Notepad

Now my Web page was starting to take shape when viewed in Internet Assistant. Even without much content, this was a good time to look at it in a browser to see any differences between the visual in Internet Assistant and the visual in my browser, Internet Explorer. I was incredibly shocked to find out that a lot of the work I had done designing in Internet Assistant was all run together in Internet Explorer.

By this time, I had not gotten deep enough into my reading to be able to answer my questions, so I asked a friend for some help. I was advised to stop using Internet Assistant altogether and write all of the HTML by hand in Notepad (the Windows text editor utility) so that I could go directly back and forth between the browser and HTML without wasting time. I found this incredibly easy. I could now write out code in Notepad and immediately see how it would look in a browser (or wouldn't work in most cases).

Notepad works exactly like the document source inside Internet Assistant with one exception: You can see exactly how the HTML that you changed is shown in the browser. This is done by saving the HTML after you have changed something and then clicking the Refresh button in your browser. From there, you can experiment, see what changed in the browser, and--if you don't like it--erase it from Notepad, which makes your page go back to its previous form.

Here are some basic tags that can help you get started:

Makes text bold

Makes text italics

Specifies heading sizes for text

Specifies size, color, and font

Making HTML Code Do What You Want on a Web Page

My goal in learning HTML was to make a good Web page by implementing new and different techniques that could display my chosen graphics and text. Possibilities of a hit counter, tables, images, sound enhancements, and even videos on the Web site showed me that virtually anything is possible with the right tools. The following is a list of the Web resources that are helpful in learning all about the Web and the programming language behind it:

Web page design guides:

Web Style Manual

Home page Construction Kit

HTML help:

The Ultimate HTML Site

HTML Workshop and Survival Guide

HTML Manual

Any guide will give you step-by-step information on how to do almost anything that you want. These not only gave me explanations of what different tags do, they also gave me examples of HTML codes as well as the resulting Web pages; places to go on the Internet for icon collections and image archives (where to go for any kind of picture you want to use); Web pages that use specific technologies and tags to make their sites look good; and other HTML help.

Using Images and Icons

There are many ways to add graphics or pictures to your Web site. The most common ways that the average computer user knows about are to use a scanner to put a picture in the computer as a file, or make a picture in the computer's basic paint program. These are some of the more simple ways to get graphics, but it is probably a lot easier to either "borrow" a picture from another Web page or to get a list of Web sites that are collections of icons and graphics for the taking.

From what I have found, the easiest way to get icons that you like off of another Web page is to put your cursor over the image, click your right mouse button, and when the shortcut menu comes up, select the Save Image As…command, which lets you save the image as a file on your hard drive. Then, to place it on your page, you have to change it into a .GIF file (this is the standard graphic filename) and type the proper HTML tag into your file in this form: <IMG SRC ="filename">

You can do this from any Web page, but you have to be careful of copyright laws. Before you use anything, always e-mail the Webmaster of the page and ask for permission to use their image or icon (unless the page says specifically that you can use the images, like the Web sites below).

From my research, I came across the following places to get various color images and icons. Feel free to go to these places if you are in need of a bullet, animal picture, or a background for your page other than that ugly standard gray.

Finding a Server

Finally, the last part of this overwhelming project. After you are satisfied with your Web page, it is time to publish it on the Internet. "How do you do that?" you might ask. Basically, there are three choices for Web publishing: using your existing Internet provider, trying to find a free host, or signing up with a commercial host. To publish your page on the Internet access service you use, just ask if there is a Web server available for you to use. Most corporate and educational networks have servers that will put up a personal Web page for free.

Like most people, I did not want to have to pay money to some company to put my Web page up on the Internet. So I started asking around, both in person and on the Internet, how I could publish for free. No one I worked with knew of any cheap or free servers, so when I went to the Internet, I posted my question on a number of different computer-user bulletin boards that I found. As a result, I received about fifteen e-mail messages telling me about some free servers that people knew about. These are some of the free servers:

The final publishing method, signing up with a commercial host, is just as easy, but there is one small catch: these servers have a setup and/or monthly fee that will give you a specified amount of space to use on their server. If you prefer that method, check these sites out:Before you send your Web page, you should check it over to make sure that everything works. Check everything from small typos in the HTML to all of your URLs. You should also check your page in a couple of different browsers, especially Netscape® Navigator® and Microsoft Internet Explorer. Once everything is exactly how you want it, ship it off to your server! Most will send you directions on how to transfer your files to the server. Otherwise, e-mail the host and get them to explain how to do it.

Maintenance

Finally, a Web page is born!!! Now the only requirement left is maintenance. All good Web pages require some regular updating. It is all up to you. Just remember that whenever you change something on your page you have to send the new version to your server so that it can be posted; find out your Internet service provider's policy on charges for each revision. CONGRATULATIONS!!! You are now a part of the Internet community along with thousands of individuals just like you. Whether your Web page is designed for business purposes or just for fun, someone a few miles away or even halfway across the world is looking at it, and possibly wondering the same thing that you once did: How can I create my own Web page?

The results of my effort? See the USD Crew home page at http://sa.acusd.edu/crew/usdcrew.htm