BEGINNING HTML

OK. So you want to build your own webpage and become a webmaster (webmaster is referred to anyone that has their own web page). That has to be true or you wouldn't be here. Now every person that makes a beginning HTML page suggests a certain web server for thier own reasons. Well, I suggest Tripod. Due to the fact that it is easy to upload files through either your browser or FTP, there are plenty of free services that will help with your page, it has a custom or quickpage option, where quickpage is a preformatted page that is half built but lets you add text, links, images, and change color schemes. I know, you want to get started. So lets begin. First open up Notepad in Windows, or any other basic text editor you might have and let's get started.

First thing to do is put your HTML tags in place (this lets browsers know when your document starts and ends). So you should have this:



<HTML>


</HTML>

That should always be the first thing you do when you are creating a new page. Everything you put will be within the HTML tags.

Next will be the HEAD and TITLE tags. TITLE tags are placed within the HEAD tag. The HEAD tag introduces the page, so it will always be the first thing listed in the HTML tag. And the TITLE is... Well... Whatever the title of your page is. So now you should have this:



<HTML>
<HEAD><TITLE>Whatever the title of your page is</TITLE>
</HEAD>


</HTML>

Still with me?? Good, let's continue. Now that you have the head section done, lets work on the BODY. The BODY defines what colors are to be used in the page for links, background and text. For a list of different color tags, CLICK HERE Lets say you wanted a black background, white text, red links, and yellow if the person has already visited the links. Your tag would look like this:



<BODY BGCOLOR="#000000" text="#ffffff" link="#ff0000" vlink="#ffff00">

OK. But lets say you wanted to use a certain background gif or jpeg. you would just add BACKGROUND="your background name.gif" in the BODY tag.

This would be listed, first thing, below the head tag. Now you have your head and colors for your page. So lets move on to the best part, your contents.

YOUR CONTENT

Your content is what you want your page to be about. And I'm gonna show you what to do next. Lets say you wanted your page to be about Ozzy Osbourne. Well lets insert some text about your Ozzy page.




<HTML>
<HEAD><TITLE>Whatever the title of your page is</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" text="#ffffff" link="#ff0000" vlink="#ffff00">

Welcome to my home page.  It's about Ozzy Osbourne, and 
his career which spans 28 years.  Here is a link to Ozzy.


</BODY>
</HTML>

Now you've added some text, lets add a link or two.

LINKS

This is where the A tag comes into play. A is short for anchor, which is used to link your page to other pages on the net. Here is a standard link tag.



<A HREF="http://celebsite.com/people/ozzyosbourne/index.html">Ozzy Link</A>
  here is a cool page about Ozzy.

This lets the browser know that you are linking to http://celebsite.com/people/ozzyosbourne/index.html. If you are linking to a file in your own directory you could simplify it like <A HREF="your file.htm">NEXT PAGE</A> . If you want to put the description of the link, always put it after the closing ANCHOR tag </A> .
Note: when you link to files in your directory, I refer to those files you have uploaded to your server directory. NOT on your computer. So do not put like

<A HREF="http://C:\windows\tempfiles\"></A>

cause it won't work, due to the fact of, no one but you can get on your hard drive.

You could also create a link so that people could send you e-mail. It works off the same principal.



 <A HREF="mailto:whoever@youre-mail.com">Send E-mail</A>

IMAGES

Now you have links on your page. How about some images. Have you found some you want to use yet? Remember don't take images from other peoples pages without asking permission first, and never link to someone else image, unless they give you permission to do so, as with a link button or link banner. One thing to remember when adding images to your page is, do not overload your page with images. It ends up looking tacky, and your page will take forever to load. I mean hey, just cause you might have a 56K modem, the 33.6K modem is the one that is mostly used at this point. Well, back to work. To insert an image you have to use the IMG SRC tag. it's pretty easy. Here's the code.
NOTE: I refer to those image files you have uploaded to your server directory. NOT on your computer. So do not put like

<IMG SRC="C:\windows\webimages\ozzy.jpg">
or
<IMG SRC="C:\America Online 5.0\download\picture.art">
cause it won't work, due to the fact that no one can log on to your computer, and therefore no one but you can get on your hard drive and see the pictures.
MAKE SURE YOU UPLOAD YOUR PICTURES TO YOUR SERVER AND LINK TO THEM THERE. A little note, .art picture files will not show up in Internet Explorer or Netscape Browsers so its best to convert them to .jpg or .gif picture file form.

Let's continue. This is how it should look.



<IMG SRC="https://members.tripod.com/~crazysteve/ozzy1.jpg">
OR
<IMG SRC="http://www.geocities.com/beachpark/9876/ozzy1.jpg">
OR
<IMG SRC="http://hometown.aol.com/crazysteve/ozzy1.jpg">

 basically it should have

<IMG SRC="http://Your Online Homepage Server/Your Domain/Your imge File">

This lets the browser know an image is being inserted. To have images load faster its good to insert height and width tags.



<IMG SRC="ozzy1.jpg" HEIGHT="170" WIDTH="130">

To create a link off an image you would have to insert a code like this. How about if we center that image on the page while we are at it.



<CENTER><A HREF="http://celebsite.com/people/ozzyosbourne/index.
html"><IMG SRC="ozzy1.jpg" HEIGHT="170" WIDTH="130" ALT="click here to
see Ozzy"></A></CENTER>

Notice the ALT tag in there? Thats to give a small description of what might be seen if they click on the image. Also if the image doesn't load for some reason, the text would show to let people know that it's a link. Well if you were doing in notepad everything we have just done then you should have something that looks something like this. Note: the P tags define the starting of a new paragragh and insert a double space between paragraphs.



<HTML>
<HEAD><TITLE>Whatever the title of your page is</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" text="#ffffff" link="#ff0000" vlink="#ffff00">

Welcome to my home page.  It's about Ozzy Osbourne, and 
his career which spans 28 years. Here is a link to Ozzy.
<P>
<A HREF="http://celebsite.com/people/ozzyosbourne/index.html">Ozzy Link</A> 
here is a cool page about Ozzy.
<P>
<CENTER><A HREF="http://celebsite.com/people/ozzyosbourne/index.
html"><IMG SRC="ozzy1.jpg" HEIGHT="170" WIDTH="130" ALT="click here to
see Ozzy"></A></CENTER>
<P>
To E-mail me just <A HREF="mailto:whoever@youre-mail.com">Click Here</A>. 


</BODY>
</HTML>

If you have some thing that looks similar to that, then you have just created your first page. To look at what was just created Click Here. Click back on your browser when you have finished viewing the page. To see more HTML tags that you could use, with descriptions and examples of how to use them, return to the main page and click the HTML TAGS button or just click here. If you have any HTML tips or tricks that you might know and would like to let others know just post it in the guest book. Or just sign the thing to let me know what you think of the site. My Guest Book. You can also post Tips at my Message Board. Now just click on next button to continue.