Write Your Own Homepage Tutorial

by Helen H. Schmidt, Iowa State University


Directions: Print out this tutorial, or your teacher will give you a copy.


Part 1 What is a Homepage?

 

A homepage of your own can be very useful. Many people use homepages to save frequently used URL's of directories, search engines, professional organizations, Online newspapers, journals, favorite sports sites, and friends' web pages. People everywhere are using their homepages as electronic business cards. Instructors can use their homepages to add variety to classes. Students applying for jobs can put up resumes, writing samples, and examples of work done for prospective employers.

Homepages and other webpages are written in HTML (hypertext markup language). World Wide Web browsers like Netscape can only read HTML. Here is an example of a simple homepage and the way that it is written in HTML.

 

The Example Homepage

 

 

 

Mary Smith

Agricultural Engineering

e-mail msmith@iastate.edu

____________________________________________________________________________

Useful Websites for Research

the yahoo directory

webcrawler

____________________________________________________________________________

 

 

 

The Example Homepage HTML Document

 

<html>

<head>

<title> Mary Smith's Homepage </title>

</head>

<body>

<p><center><img src="silly.gif">

 

<p><h1><b>Mary Smith</b></h1>

<p><h2><b>Agricultural Engineering</b></h2>

<p> e-mail msmith@iastate.edu

</center>

<hr>

<p><h2><b> Useful Websites for Research </b></h1>

<p> <a href="http://www.yahoo.com"> the yahoo directory </a>

<p> <a href="http://www.webcrawler.com/"> webcrawler </a>

<hr>

</body>

</html>

 

 

Study the example html homepage document and the resulting homepage to be sure you understand the html tags.

 


Part 2 What is HTML?

HTML consists of a number of symbols called tags that mean different things. For example

 

<p> means "begin a new paragraph here,"

<i> means "begin italics here,"

<b> means begin boldfaced letters here."

 

Most of the tags must be used in pairs, for example

 

<b>word</b>

<b> means begin boldfaced letters

</b> means end boldfaced letters.

 

We can use several tabs together, but they must be in a particular order, for example

 

<i><b>word</b></i>

 

The tags must be written so that they are in the same relationship to the word on both sides of the word. If the <b> is right next to the word at the beginning, the </b> must be placed right next to the word on the other side. If the <i> is to the left or outside the <b> at the beginning, then the </i> must be to the right or outside the </b> on the other side of the word. You may use capital or small letters. It makes no difference.

 

Tag pairs that you will use frequently:

 

<b> </b>

<i> </i>

<h> </h> This indicates a heading size and is used with a number from 1-6.

<center> </center> This means center the word(s) on a page.

<html> </html> This tells the browser that the page is written in html.

<head> </head> This indicates document information that is not visible on the web.

<title> </title> This is your name for the page. It's also not usually visible.

<body> </body> This encloses all the information that viewers see on your webpage.

<a> </a> This is an anchor tag. It is used to write links to other websites.

 

<a href="URL"> name of the URL </a> An anchor tag is written like this with no spaces in an html document.

 

Single tags that do not need a second tag:

 

<p> This indicates a new paragraph.

<br> This means line break. Two of these equals one <p>.

<hr> This means make a horizontal line.

<img src="filename.gif"> This tag is used for most graphics and pictures.

<img src="filename.jpeg"> This tag is usually reserved for high resolution photos.

 

Getting Pictures for your Homepage

 

There are two methods of getting pictures for your homepage:

 

A. Copy them from pictures you find on the web.

B. Draw or scan in your own and then convert them to the correct kind of file.

 

We will use method A. You can copy any graphic that you see on the web. Here's how:

 

1. Put your own disk into the computer. Find the picture or design you want. Point the mouse arrow over the picture.

 

2. Hold the mouse button down and a little menu will appear. Choose Save this Image.

 

3. A dialog box will appear. Save the image to your own disk.

 

The picture you choose will be saved with a name such as silly.gif or photo1.jpeg. You do not have to change the name, but you need to remember what your picture is.

 

Some pictures and graphics on the web are copyrighted. That means they belong to the person or company that put them on the web, and you should not use them without permission. However, there are many sources of free pictures and graphics. One good source is

 

http://www.yahoo.com/computers_and_Internet/World_Wide_Web/Page_Design_and-Layout

 

When you get there, click Graphics, then click Collections. You will see dozens of sites containing pictures, animations, cartoons, symbols, and many other graphics. Look around and see what you can find.

 

 

Part 3 Writing Your Own Homepage

 

Now you are ready to write your own html document.

 

1. Open Microsoft Word and type in the example homepage.html document above, substituting information about yourself.

2. The first time you save it, use Save As. Name it homepage.html, then find the button at the lower left of the Save As screen where it says "word." Put the cursor arrow on it and pull down the menu there. Choose "text only." Then save it on your diskette.

3. When you finish your homepage document, check carefully to make sure that all the paired tags are correct. It's easy to make mistakes. Save again. Don't close the homepage document.

4. If you have pictures you want to include, put them on the diskette with your homepage.html. Be sure your pictures are properly named. That means they must include gif or jpeg. For example, silly.gif

5. Now open Netscape. When your Netscape page opens, pull down the File menu. Choose Open File. The dialog box should show what is on your desktop. If it doesn't, click Desktop, and open your diskette.

6. Be sure that you can see homepage.html and your picture name in the list in the dialog box. Click homepage.html and then the Open button. Your homepage will open in Netscape. You will be able to see what it will look like on the World Wide Web. However, it isn't on the Web yet.

7. You will probably want to make a lot of corrections on your html document. You can go back to it by clicking on any piece of it you can see. That will bring it to the front of the screen.

8. Each time you make changes and you want to see them, click on Netscape to bring it to the front, then click the Reload button at the top. This will show you the corrected homepage.

9. The last step is to put your homepage on a public server so that everyone on the web can see it. You may have a server at your college or university that you can use. Or you may need to buy space from an Internet service provider such as AOL (America on Line). Students at Iowa State University should follow the directions below.

Part 4 Putting Your Homepage on the Web at ISU

 

Uploading

 

You have written a simple homepage including links and pictures. Now its time to upload it into the Vincent server. First, you need a Vincent account. If you have an E-mail address at ISU, you have an account and a file. We use a program called Fetch to put your homepage.html document into your file in Vincent.

 

1. Find and open Fetch 3.03 in the Internet applications menu.

 

2. You will see a box like this:

3. You need to change the boxes to look like this:

 

Host: isum.iastate.edu

 

User ID: your E-mail user name

 

Password: your E-mail password

 

Directory: delete "pub." There should be nothing here.

 

Then click OK.

 

4. Your Vincent account file will open and you'll see several files in it already.

Pull down New File. Name it WWW.

 

5. When WWW appears in the list of files, double click it to open it.

 

6. Click PUT. A dialog box will open showing your desktop. Click homepage.html and OPEN.

 

7. The screen will change. This box will ask you how you want to save the file. It should show the name homepage.html and the word TEXT in the format box below it. If a file is a text, it should always be saved as TEXT.

 

8. Click OK. In a moment, the name homepage.html will appear in the WWW file window.

 

9. Now you must upload the pictures and graphics you want to appear in your homepage into your WWW file in your Vincent file. Click PUT again. When the dialog box opens showing your desktop, click the name of one of your pictures to select it. Click OPEN.

 

10. The screen will change. The box will ask you how you want to save the file. When you put your pictures and any other graphics in your file, they should be saved as RAW DATA. You can change this box by pointing at the format box and choosing from the menu. Click OK. The name of the picture file will appear in the WWW file window.

 

Remember, everything that you want to appear on your homepage must be in your WWW file or it won't show up on your homepage.

 

Downloading

 

Of course you will want to work on your homepage to improve it in the future.

 

1. Use Fetch just as you did before. Open your WWW file.

 

2. Click once on the file you wish to down load. Click GET.

 

3. The computer will ask where you want the file saved. You should choose the desktop or your own disk. Click SAVE.

 

4. Now open Microsoft Word. Pull down FILE and choose OPEN. You should see your homepage.html file in the dialog box of either the desktop or your own disk. Click it and OPEN.

 

5. When you are finished working on it, remember to save it as a TEXT file, not Word file. Then upload your improved homepage with Fetch.

 

Making Your Homepage Available on the Web - Registering for a personal web page

All Iowas State students, faculty and staff can have a free homepage in the space that has been assigned to them as part of their Vincent accounts. To register for a Web homepage, follow the steps below:

Begin the same way that you get your E-mail. When you see vincent% type in the following:

vincent%add www

vincent%setup_www

Next, you'll see this message:

This service will publish your "Official University Real Name"[provided to the Computation Center by Administrative Data Processing (ADP)] next to the user name in the directory page. Example:sqpub -- Susan Q. Public. Do you really want to register?[y/n]

Type "y" and hit the return key to complete the registration.

You are registered.

If your registration is successful, you will see a message that says so, and you will see a URL for your Web page. After a few minutes, you will also be able to find your name and a link to your page on the Public Homepage Server's user-served homepages directory.

 

Adding Interest to Your Homepage

1. Look at other people's webpages to get ideas. When you see a web page that you like, pull down the View menu and choose document source. You will see the html document for that web site. Study html documents and their websites to learn how to add different things to your own homepage.

2. If you want to change the color or your background or your text, look at the following web site:

Hidaho color center

 

3. A list of all of the possible tags you might want to use is available at the following web site:

A Beginner's Guide to the Internet.

 


Back to my Home Page



Helen H. Schmidt
Instructor, Intensive English and Orientation Program
Iowa State University, Ames, Iowa 50011, U.S.A.
Email:hschmidt@iastate.edu

Last update: January 1998