Creating a Homepage only involves creating a file coded with HTML (HyperText Markup Language) and making that file available on the Internet. In your HTML file you can put whatever you like, including text, graphics, pictures, sound clips, movies, and links to other sites.

Creating an HTML File

The first step in having a Homepage on the Internet is creating an HTML file. Use your text editor (e.g. NOTEPAD) to create a file called index.htm. The first part of the name can be anything (though "index","Homepage" or "home" are good identifiers), but the ".htm" or ."html" suffix is mandatory -- it identifies the file as a hyper text file that can be read by a Web browser. The first file in the directory should always be "index.htm" or "index.html" because most servers will look for this file first, and it will load up faster.

In its simplest form, an HTML file would contain something like: <TITLE>HTML Basic Example</TITLE> <H1>Welcome to my Homepage</H1> <P> one paragraph. <P> a second paragraph.
Headers (for subheads) range from H1 (biggest) to H6 (tiny), and are coded in pairs:

<H1>Things I like to do...</H1>

<H3>Places I've been...</H3>

<H5>Hobbies, etc.</H5>

Note:
If you enjoy exploring, you might want to look under the hood while browsing the Web to see how other people use HTML. The View Source function of your browser displays the underlying code of the document you're viewing. Another method is to save the HTML file to disk and then re-open it using "NOTEPAD" or any other text editor program.

Links and URLs

To link one document to another, you use an "anchor" code in HTML. The following example creates a link to the file "class2.htm":


    HTML:   Here is a <A HREF="class2.htm"> class I like</A>.

    Result: Here is a class I like.

Note:

This tells the browser that it should display the text "class2 I like" as an active-link. When the user selects that link (by clicking on the colored text), then the server will retrieve the file "class2.htm".

If you want to link to a resource at another server on the Net, you use a Uniform Resource Locator (URL). A URL is a kind of address, and describes the type of resource (Gopher, Web, Telnet, FTP, WAIS) and where it "lives" on the Web (name of server, path name, and filename). Linking to a resource outside your own server is not much different than linking to a local file. The following code creates a link to my Homepage on a AOL Internet site:


    HTML:<A HREF="http://users.aol.com/teachemath/class2.htm"> Guide to HTML</A>

    Result:Guide to HTML

Note:
1. In this case, "users" is the way to get there (the users protocol) and "aol.com" is the name of the server. The "/teachemath" is the file directory on the server and the" /class2.htm" directs the program to look in the "class2.htm" file.
2. The easiest way to put URLs in your Homepage is to copy them out of your browser. Most browsers have some method of showing the URL of the current document. Prodigy and AOL shows the Document URL field at the top of the Web browser window; Windows users have copy/paste functions on there system's, copying the URL out of the browser and "paste" into an anchor code is the easiest way of adding links.

Graphics

Many people include some kind of picture or graphic in their Homepage. Pictures are often in GIF format, which can be viewed on nearly any computer. Usually your system administrator can help you scan a photo and turn it into a GIF file. Most pictures however, can now be viewed in JPG format. This new type of format usually has higher resolution and only requires approximately 20% of the file size, this allows the picture to be uploaded and downloaded much faster than the larger GIF formatted picture files.
You can link to a graphic the same way you link to a site. The following code makes a link to a graphic file called "camp-ak.jpg":


HTML:<A HREF="camp-ak.jpg">Mr. Nussberger in the Mountains</A>


Result: Mr. Nussberger in the Mountains

When the person viewing your Homepage clicks on the colored text "Mr. Nussberger in the Mountains" link, the file called "camp-ak.jpg" is downloaded to his or her Web browser.

Another type of graphic linking is an in line graphic. This is shown within the HTML document with text surrounding it, rather than the graphic being shown in a different window. Here's how to make the previous image appear as an in line graphic:

HTML: <IMG SRC="camp-ak.jpg">
Result:

Note that there is no ending "</IMG>" code; the IMG code stands on its own and simply shows the file or URL that is specified. Remember that pictures are nice, but it can take a long time to download and people viewing your Homepage might not have the time to wait. Be careful not to use pictures that are to large.

HTML Thumbnail Pictures

A thumbnail picture is a small size picture that is used to click on and produce a larger more detailed picture. You probably know by now, pictures can be extremely large files and require a long time to download over the Web. Thumbnails provide a fast and convenient method to preview what a large picture looks like. If the person viewing your homepage likes your small picture and wants to see more, he or she can just click on the small picture and the large picture will be downloaded.

Procedure:

1. Use your Graphic Converter program (e.g. Image View comes standard on most Packard Bell computers), and create a smaller picture from a large picture, then save this new picture to a new file name using the "save as" function. Most Photo Scanners come with easy to use Graphic Converter software. I would highly recommend "EasyPhoto Reader" scanning products, their products are easy to use and the software is very user friendly.
2. In your HTML file, point to the small thumbnail picture with your "IMG" directive, and then enclose the "IMG" directive in an anchor directive that points to the larger picture. Use the following HTML programing example:

HTML: <A HREF="camp-ak1.jpg"> <IMG SCR="camp-ak.jpg"></A>
Result:

3. Lets look at one more example thumbnail picture. This flowchart was originally a 469k size ".BMP" file created using the program "PAINT". I first converted it to a ".JPG" file and it then became a 34k size file. Then I changed the picture to a Thumpnail picture and it became a 8k size file. My online loading time went from 20-30 minutes to under a minute. Your viewers will really appreciate that you used the new file instead of the original 469k file. Use the following HTML programing:

HTML: <A HREF="flowch1.jpg"> <IMG SCR="flowch.jpg"></A>
Result:

HTML Homepage Flowcharts

When creating a Homepage care should be taken as to the name you give your files, and how these files interact with each Homepage. As your Homepage get more and more complex, the easier it is to make mistakes when you embed ten or twelve files into your Homepage. Also, when you make revisions to your Homepage six months down the road, will you be able to remember all the files that went into that revised Homepage. The most efficient method is to create a "HTML Homepage Flowchart" for each "Index.htm" file you create.
A A Typical HTML Homepage Flowchart shows how various files interact with each other.

Internet Educational Programs