Site hosted by Angelfire.com: Build your free website today!
HTML!

HOME
TAGS
BOLD etc.
FONTS
IMAGES
LINKS
BACKGROUNDS
TIPS
Page 2

Ok this page is for all you non-html-knowing people. Html is not hard to understand or use.

Ok so now some background info before we get started. In case you are really behind the rest html is a web programming language. It’s used to make web pages. Get it? Got it? Good. OK on to the fun stuff!

For much of the stuff I’m going to tell you it may be easier to understand if you had a place to see how it works like and html editor or something. The one I got, I got from the net. It’s called First page 2000 (not to be mixed up with front page). If you can find it it’s a good program to use as it has a real time display, which shows you what you’ve made. This will help you understand html better. Of course I’m not saying you must get this program or anything. I’m sure you can at least try to understand it without playing or you can just pratus with it on the net (where everyone can see your mistakes).
Learn more about 1st page here

This is just a start. If you do know html and see a mistake on here could you please tell me through my feedback? thank you.



Step 1- Tags
A tag is the thing in which you write the html. Anything in an html document written within these < > well not show up on our page. They will be your commands for the html.
For example <font size=”3”>
(see the command is inside the < >) Most tabs need to be ended. Putting a / in the tab well end the command. For example, to end the font tab above you would write </font>
Note the / always goes at the beginning of the ending tab.



Step 2- Things to do with words.
When you write anything in programs such as word and you want something underlined you usually highlight the word and press a button with a big U on it right? Well in html it's almost the same but without the buttons and highlighting. Within your text you would put a <u> in front of the word to be underlined. This is the start underline command. Then you must place an ending tag </u> where you want the underlining to stop. All the text between the <u> and the </u> well be underlined.

For example if you wrote: Hi my name is <u>Paul</u>
On your web page you would see: Hi my name is Paul. You can also make words bold or italic the same way but using <b></b> for bold and <i></i> for italic.
If you want to start a new line you would put in <br>. This is the equivalent of hitting enter. You do not need to end this tag.



Step 3- Changing fonts
Ok say you want your text to be green. Before the words that you want to be green you would put this tag:
<font color="green">
Notice the spelling of color and the "" around the color, if you mess these up the command well not work right.
With this you can right the color in words but it might not always work right. On most pages the color is written as a hex code, a 6 digit code. Useing a hexcode instead of writting the color as a word well allow you to chose just the right color for your page. Programs like first page come with a color picker handy for you. If you don't have a color picker then you can use this site

You can also change the size of the text by adding this to the same tag:
<font color="green" size="4">
Now the words following that tab will be written in size 4 font and in green.

You can also make your words in a different typeface by putting this in the same tag:
<font color="green" size="4" face="arial">
Now your words well be green, written in size 4 arial font.

When you want the words to stop being green and written in size 4 arial font, you would put the end font tag in, which well be </font> Note you don't have to end the color, size and face separately. Also you do not have to put the size, color and face in any particular order within the tag.
Remember the values between the "" change so don't copy them directly off this page unless they are exactly what you want. Isn't this easy?



Step 4 - Adding an image

Adding an image is easy. The tag starts like this:
<img src=" ">
The img means image and the src tell it that it's looking for a file.
Within the "" you would put where the picture is on the net.
For example with most web site building sites like angelfire and geocities you would have to upload a file from your computer onto a place on the net. It tells you where it is. All you would have to do is write that within the "".
For example:
<img scr= "images/mypicture">
Every location will be different so you well have to find out where yours is yourself.

Other things you can do with your picture!
Ok often the picture you are putting in is a set size, but you can easily make it and size you want by putting this in the same tag as above:
<img scr="images/mypicture" height="100" width="100">
This well make your picture 100 pixels by 100 pixels.

You can have a border around your picture by adding:
<img scr="images/mypicture" height="100" width="100" border="1">
Now your picture well have a border of 1 thinkness. You can make the border thicker by putting in a higher number.

You can make your picture be in the center, on the left or on the right by putting this in your tag:
<img scr="images/mypicture" height="100" width="100" align="center">
Now your picture well be lined up in the center. As with before you do not to put any of these in any spefic order.



Step5- Links

Links are also very easy to do. You start the tag like this:
<a href="">
In between the "" you would put the web adress of the place you are linking to. For example if you were to set up a link to my homepage it would look like this:
<a href="www.angelfire.com/hi5/happyness">happy circle home page</a>
you would get a link that looks like this: happy circle home page

REMEBER to end your command or else you will make the rest of your page into a link!

Now say you want to make an image into a link. Instead of writting the words for your link between the starting and the ending tags you would put your image tag you learned above. So to make a link too my home page using my picture of a happy face i would write:
<a href="www.angelfire.com/hi5/happyness"> <img scr="C:\My Documents\My Webs\happy button.jpg"></a>
Now i would have my picture as a link to my homepage.

There are also two other things you can do with links. The first one is making the underline in the link disappear. To do that you would put this in the tag:
<a href="www.angelfire.com/hi5/happyness" style="text-decoraction:none"> happy circle home page</a>

The other thing you can do is make the link open in a new window. You do this by putting this in the tag:
<a href="www.angelfire.com/hi5/happyness" target="_blank"> happy circle home page</a>




Step 6- Backgrounds

Ok i know this is what you've all been waiting for. Yes backgrounds! These are easy to do. If you look at your html you should see near the top this tag <body> If you don't you may want to put it in it's kinnda important. Ok to make a background of a single solid color (lets say black) you would put this in that tag:
<body bgcolor="#000000">

You can also use a picture for a background by putting this: <body background="images/mybackground">

Note- You may want to make the bgcolor a color close to your background image as some can take a long time to load. That way when it dose load your veiwers won't see a sudden change in color. Also if your background dosen't load at all you can still sort of achive the same effect you were going for.



Tips

A few things to try if your code won't work:
  1. Make sure you are using the right code (I know this sounds obvious but it happens)
  2. Check your spelling (this is usually my main problem)
  3. Make sure all your "" are in place
  4. Make sure you have all your end tags
  5. Ask me why they don't work




Home next page