The HTML Tutor: Web Page Walk-Through

The Walk-Through

This handy little guide is perfect for anyone who wants to make a web page, but has no clue where to start. This will give you a guideline to follow to start you on your way. So without any further ado, open up Notepad in Windows, or any basic text editor and let's get started. The Very Beginning Let's start with a new file. Now type the following:

<html>

</html>

This will tell the browser that this is definantly a web page. All other tags go within these tags. Notice how each tag has an ending </...>? This tells the browser to end whatever the difinition is. This is very important to remember. Now let's define some of the page definitions. Add the following:

Here we have defined the head of the page. We also have defined the title of the page, which is called New Web Page. Now go to File > Save, and save it as index.html (or index.htm on win 3.x). Open up Netscape and view the file. You should be able to see at the top Netscape - [New Web Page]. You've just made a huge leap. Now let's start defining the pages layout. First we'll define the body of the page:

<body>

</body>
</html>

The body defines what colors are to be used in the page for links, background and text. The plain <body> tag will render the defaults: a gray background with black text, blue links, etc. etc. Boring. But you can define these to be whatever you want. Like so: Let's say you want a balck background, with white text, light blue links, dark blue links if the person has already visited the page, and red if the link is active. You would add the following:

< body bgcolor="#000000" text="#ffffff" link="#00FFFF" vlink="#0000FF" alink="#FF0000">

Bgcolor stands for background color, text defines the text color, link defines the colors of all unvisited links, vlink defines the link color if the person has visited the page, and alink defines the color of the link if the page is loading. If you have no idea how to get the RGB codes for the colors, you can visit my RGB Color Code Chart try out this handy little color code program. Ok. We've mad a page with a title and have colors on the page. Now we have to add content. Adding Content The content of the page depends on you. You can add whatever you like. We'll just show you how to do it. Let's say we're gonna make a page about cars. Let's insert a little paragraph about the page:

Welcome to my new page about cars. I hope to make this the best web page about cars on the planet. Keep coming back to see all the stuff i have to offer.

</body>
</html>

Now you've adding some content. Make sure to save it. You can view your progress here. We have a black web page with white text. Now let's add a link to another page: Links Adding a link is fairly easy. Just add the following:

<a href="http://www.domain.com/file.html">This is a link</a>

This tells the browser that the words within the ..">...</a> should link to http://www.domain.com/file.html. If this was to be a link to a file within your same directory, you could just do <a href="file.html">This is a link</a>. It would still work fine.
You can also add a link to have the person send you email. It follows the same outline, but it's just a little different, as follows:

<a href="mailto:you@youremail.com">Email Me!</a>

This would allow someone to click on Email Me! and be able to send email to you through the browser. Here's an example.
Adding Pictures
You can also add graphics to add spice to your page by adding graphics. To do this, just use the basic following rule:

<img src="file.gif">

This tells the browser to load an image named file.gif on the page. It can only be a .gif or .jpg image. These are currently the only two formats supported for web pages. It helps if you supply the browser with the dimensions of the file being loaded. You can do this by adding the width and height attributes within the tag. Like so:

<img src="file.gif" width=400 height=300 alt="This is my picture>

The alt gives an alternate description for the graphic. This way in case the visitor has a text-only browser, they can see what should be there. You can also have the picture be a link. Like so:

<a href="file.html"><img src="file.gif" width=400 height=300 alt="This is my picture></a>

So, let's put it all together. Here's our code:

Welcome to my new page about cars. I hope to make this the best web page about cars on the planet. Keep coming back to see all the stuff i have to offer.
<p>
Here's a picture of my <a href="favorite.html"><img src="car.gif">favorite car</a>.
<p>
Please <a href="mailto:me@here.com">mail me</a>.

</body>
</html>

The paragraph tag <p> allows you to seperate text. To see more ways to control the layout of text, be sure to visit my Text Formatting section of my HTML Tags Section. And here are some other tutorials of mine once you start getting used to web pages:

Well, hopefully this has helped you out in understanding how to start a web page. If you have any comments or suggestions, feel free to tell me. I'm always open for input.

Return Home