Writing your page: your first page

Those who can, do. Those who can't, teach. Those who can't teach, teach teachers.

- Anonymous

Before continuing with a more indepth exploration of HTML, let us take some time to create a simple webpage. The HTML tags demonstrated here can be used to create many other pages.

What to say?

Before creating a page, figure out what you want to say. To modify an old saying: "If you don't have anything to say -- then don't." For the sake of this example, let's create a simple main page that introduces you. What information do you want to include?

Here are some things you could put in your page:

You name
Where you're from
What your hobbies are
Tidbits about your family
A way for others to get in contact with you

How to say it?

After you have decided what to say, you can think about organizing that information. Similarly, if you were presenting the above information for a class report or a letter to a pen-pal, you organize it in a certain way. For example, would you simply put it in a bullet-pointed list? Or would you decide to write more in the form of paragraphs? Perhaps a mix of the two? Furthermore, should certain groups of information be put under separate headings?

The same organizational process is used when laying out a webpage. Once you have figured out how you wish to organize your material, you might simply type it up. Put it in paragraph or list form, but don't worry about font sizes, bullets, or other such things right now. Consider the example below:

Welcome! Hi, my name is Dirk Kempthorne, and welcome to my sample web page. I'd like to use this page to tell you a little bit more about me and my interests. I'll be adding more information as I get around to it. Where am I from? I was born in a town in California called La Verne, but I grew up in Alaska, and that's where I call home. For the time being I've settled in Ontario, Canada ... it's a long way from home, but I'm only here until I get out of jail. More about me? Although I may seem like the tough sort, I'm actually a down-to-earth kind of guy. In the evenings I like to crochet while watching "Raw is War" or re-runs of "Murder She Wrote". My favorite actress is Natalie Portman and my favorite group is the Petshop Boys. My Family parents: still alive siblings: two of them pets: two dogs and a ferret Write me! I can be found online using the AOL Instant Messanger; my name is "Hank47". Also, please feel free to email me at xtla123@yahoo.com.

Having organized our content in this fashion, it is now a very simple task to turn this into a web page. Follow along with the example, and within minutes you'll have a sample webpage.

First, create your own "mock up", as I did for Mr. Dirk Kempthorne above. We'll use it in the next section.

Writing the HTML

HTML is a language, and HTML codes are called "tags". Tags are marked by the < (less than) and > (greater than) characters. Furthermore, for most tags there is a pair of "beginning" (or opening) and "ending" (or closing) tags.

For this example, simply follow the instructions. We'll take a closer look at the HTML used later.

Make sure you have your "mock up" (from above) saved away somewhere.

At the beginning of a blank file, type the following:

<html>
<head>
	<title>My Sample Page</title>
</head>
<body>

"Paste" (copy) your "mock up" after this text. For example, for the "Dirk Kempthorne" example, what we now have would look like the following:

<html>
<head>
	<title>My Sample Page</title>
</head>
<body>

Welcome!

Hi, my name is Dirk Kempthorne, and welcome to my sample web 
page. I'd like to use this page to tell you a little bit more 
about me and my interests.  I'll be adding more information 
as I get around to it.

Where am I from?

I was born in a town in California called La Verne, but I
grew up in Alaska, and that's where I call home.  For the
time being I've settled in Ontario, Canada ... it's a long
way from home, but I'm only here until I get out of jail.

More about me?

Although I may seem like the tough sort, I'm actually a
down-to-earth kind of guy.  In the evenings I like to 
crochet while watching "Raw is War" or re-runs of
"Murder She Wrote".  My favorite actress is Natalie
Portman and my favorite group is the Petshop Boys.

My Family

parents: still alive
siblings: two of them
pets: two dogs and a ferret

Write me!

I can be found online using the AOL Instant Messanger;
my name is "Hank47".  Also, please feel free to email me
at xtla123@yahoo.com.

At the beginning of each paragraph (not items in a list, not 'headers', just the text you want to be in paragraph form), add the following tag: <p>. At the end of each paragraph, put </p>. An example from the Dirk Kempthorne text would be:
```
<p>Hi, my name is Dirk Kempthorne, and welcome to my sample web 
page. I'd like to use this page to tell you a little bit more 
about me and my interests.  I'll be adding more information 
as I get around to it.</p>
	
```
If you have any lists you would like bulleted, put the tag <li> at the beginning of the list item. <li> does not require a closing tag. At the beginning of the list place <ul> and at the end of the list place </ul>. This creates an "unnumbered list". If you would prefer to have a numbered listed, use <ol> and </ol> (for an "ordered list"). An example from the Dirk Kempthorne text would be:
```
<ul>
<li>parents: still alive
<li>siblings: two of them
<li>pets: two dogs and a ferret
</ul>
	
```
Finally we place our tags for "headers". h1 is the largest header, h6 is the smallest. We place <h1> </h1> tags around the "welcome" at the top of the page. We will use <h2> </h2> to mark different sections in the page. The text from the Dirk Kempthorne example would be marked as follows:
```
<h1>Welcome!</h1>
	
```
and
```
<h2>Where am I from?</h2>
	
```
Finally we finish our page by adding the following text after all the page content:
```
</body>
</html>
	
```

What does our finished file look like? Compare yours to the finished "Dirk Kempthorne" example below:

<html> <head> <title>My Sample Page</title> </head> <body> <h1>Welcome!</h1> <p>Hi, my name is Dirk Kempthorne, and welcome to my sample web page. I'd like to use this page to tell you a little bit more about me and my interests. I'll be adding more information as I get around to it.</p> <h2>Where am I from?</h2> <p>I was born in a town in California called La Verne, but I grew up in Alaska, and that's where I call home. For the time being I've settled in Ontario, Canada ... it's a long way from home, but I'm only here until I get out of jail.</p> <h2>More about me?</h2> <p>Although I may seem like the tough sort, I'm actually a down-to-earth kind of guy. In the evenings I like to crochet while watching "Raw is War" or re-runs of "Murder She Wrote". My favorite actress is Natalie Portman and my favorite group is the Petshop Boys.</p> <h2>My Family</h2> <ul> <li>parents: still alive <li>siblings: two of them <li>pets: two dogs and a ferret </ul> <h2>Write me!</h2> <p>I can be found online using the AOL Instant Messanger; my name is "Hank47". Also, please feel free to email me at xtla123@yahoo.com.</p> </body> </html>

Testing your work

Now you want to save your file and test it in a webbrowser. Save this file as "sample.htm" somewhere on your computer. Eventually you'll want to create a folder specifically for your webpages.

Now go to your webbrowser. Use it to open your webpage. For example, using Netscape go to "File" on the menu bar and pick "Open Page". Select the page you have just created. How does it look? Compare it to the "Dirk Kempthorne" example, as seen here:

Dirk Kempthorne example: click to enlarge

If something appears wrong, go back to the file you created. Make sure that any tags (except <li>) have both opening and closing tags. Make sure you used the right tags for the right parts of the file. Sometimes a little typo is difficult to find. If you are using Netscape, try viewing the source code (control-u) -- incorrect tags may blink; this is a useful tool.

Contents	Chapter 1	Previous	Next