The Basics:
Okay, when beginning a new webpage the first thing you are going to need is the basic simple HTML codes that you can build around. Now notice that most tags have an opening and a closing. You add a closing to tell the computer that nothing below this will be the same. It will make sense in a minute and I will call your attention to it. And another thing...HTML is not case-sensitive! It doesn't matter if you use caps or not. I just used caps here so it would be easier to read. The basic HTML tags are:
<HTML> and
</HTML>
This tells the computer that this is an HTML document and must always be used. Notice already there is a closing tag. This will tell the computer that nothing below the </HTML> will be an HTML document. This will ALWAYS be the last tag used.
<HEAD> and </HEAD>
This just tells the system that this is the heading of the page. Doesn't really show on the page. Included in between these two tags is:
-
<TITLE> and </TITLE>
In between these two tags you will put the title of your page. If you are on a WebTV unit this is what is displayed in the status bar. Notice on my page it says "Help with HTML"?
<BODY> and </BODY>
This is where the fun begins. You will put all the content of your page between these two tags.
But First, some things about text and backgrounds:
Your background can be either a solid color or a picture, like wallpaper. I prefer using a solid color. The reason behind this is 1) it makes the page easier and faster to load (if it takes too long most people would rather give up and leave your page) and 2) you can find a text color easier that is easier to read with your background. With wallpaper you usually have several colors blended together and it's hard to find a color that is readble with all the colors.
To add a solid color you will need a colors hex code. I intend to make my own hex color chart, but until then you can get hex color codes here. A hex code is a series of 6 numbers and/or letters that create infinite possibilities for background and text colors. To add the background color, you will need to add something to the <BODY> tag from above.
<BODY> becomes <BODY BGCOLOR="#******">
Sometimes you will see a hex code start with #, don't worry you can add it or not add it, most likely it won't matter. Where the ****** are, you will put the 6 alphanumeric hex code. Cool? You will close this tag like you normally would a regular </BODY> tag towards the end of your document.
Now to change the coor of your text. Of course, the default color is black. But you have the same wide selection of colors for your text as you will with your background. First, select the hex color code for the font that you want. Next you will insert it into this code here:
<FONT COLOR="#******">
And you will also close this tag at the end of your document. More on that later...
Now for some simple goodies:
To change the size of your text, you need to add a little to the code you just entered.
<TEXT COLOR="#******" SIZE="$">
Where the "$" is you will enter in a number from 1-6. 1 is very very small and 6 is very very large. 3 is a nice middle number.
To make your text bold you simply add
<B> before and </B> after the text you want to be bold. If you forget to close it, everything below the <B> will be bold.
To make text in italics you will need to add
<I> before and </I> after the text you want in italics, like above.
If you want both simply combine the two! <B><I> before and </B> and </I> after.
Now you can't keep the same paragraph running all the way down your page and you can't just hit the "return" key and expect a new line or a new paragraph to form. That would be too easy! No, you need the CODE! To simply start a new line before the last one is finished, just add <BR>. Good news, you don't have to close this one! Use it as often as you'd like!
To create a few more lines to start a new paragraph you will need to use <P>. Not bad is it?
So you want to add a line to separate your paragraphs? All you need to use is <HR>! No closing tags!
Now lets make this webpage pretty....
Images:
How you add an image to your webpage depends on whether or not you are using a WebTV unit or a computer. If you are using a computer, find an image you like and simply right click on it and choose a name for it. Download this into the program you are using (example, with Angelfire save it in your /images directory.
For WebTV it's not that easy. (Right click WHO?!) Sometimes a graphics page will show the URL for the picture you want. Draacs graphic site is very good with this. It's very WebTV friendly. Sometimes the site you are on is friendly enough to make the image clickable so that when you click on it, it pulls it up with just that image. All you will need to do is hit "Go To" and select "Show Current" and copy that URL. (Highlight the URL using "shift" plus the arrow key) and then holding down on "Cmd" and then "C". You will hear a little chirp that lets you know you just copied. Next you will need to transload this image. Once again, if you are using Angelfire, you can open up your images directory and go down to where it says "transload" and paste the URL you just copied. (Simply hold down on "Cmd" and hit the "V" key)
NOTE: Do not link an image on your page to a URL on someone elses page. For one thing there's a whole bandwidth issue, and for another thing, it makes your image longer to load because it has to go to a whole other webpage to get the image. And another thing (sorry!) unless the owner of the webpage you're getting the image from specifically says their images are for the taking, never steal a picture from their webpage unless you ask first. Just a little Netiquite lesson for you (did I spell that right?)
Ok now that we are beyond all that crap you will need the code! (of course right?) The code to put an image on your page is
<IMG SRC="http://the URL of the image you just got">
Whew! Easy enough?
Links:
Now one more thing before I let you go. We need to learn how to link to other pages! All you really need to know is the other webpage URL and a simple code and you're there.
<A HREF="http://the URL of the page you are linking to">Here you put the name of the page</A>
To make an image clickable to another page...
<A HREF="http://the URL of the webpage going to"><AIMG SRC="http://the URL of the image"></A>
And that's it! You should know enough now to make the most basic of webpages! With a little trial and error you will learn more and will be able to experiment more. If you are on a computer, if you go to the top of your browser and click on "View" and drop down to "Source" you can see the actual HTML code used to make that particular webpage you are looking at. See how HTML is used in those pages and note it to yourself. Get ideas!
