Basic HTML Guide

HTML is a language that is used to create web pages and can be used for message boards too. It is very simple to learn and anyone can do it. You don't need to be a programmer or have to be a computer expert. This guide to HTML will take you right through from the very basics and help you get the most out of your board.

HTML stands for Hyper Text Mark-up Language and is the code that nearly all web pages are written in. Despite having a complicated name the actual code is very simple. All commands are typed within triangular brackets < >. These are called tags. When you type something between these tags it means you want to start a command. When you want to end a command you need to end the tags. To end a tag you type </command> . That is you add a / after the first <.

Inserting Text
The majority of web pages are made up of text. If you have ever used a keyboard then you know how to type text in HTML. To type something into your webpage simply type what you want to show up. You only need to use tags if you want the text to do something special.


HTML

This bolds text

HTML

Inserts a line break

HTML

Starts a new paragraph

HTML

This makes text in italics

HTML

Underlines text

Font Size

You can also change the size of your font. In HTML the sizes range from 1 (very small) to 7 (very big). To change the size of your font you need to type:

HTML

Bullet Points

Bullet points are slightly more complicated. In HTML bullet points are called unordered lists or ul for short. To start bullet points you need to type <ul>. You want each bullet point to appear on a new line so you type <li> before it. When you have finished all your bullet points type </ul>.

HTML

Numbered Lists
Creating a numbered list uses the same principle as creating bullet points except you use ordered list <ol> instead of <ul>. The code for an ordered list would look like this.

HTML

Horizontal Lines

Where ever you want to add a line to divide a page simply type <hr> . You can change several things to make it look different such as its width, height and the amount of shading it has.

Width can either be measured in pixels (a web page is normally about 600 pixels wide) or by typing the percentage of the screen you want it to cover. To change the width you simply type <hr width=300> or <hr width=50%>.

Size refers to how large the horizontal rule is. You change it in the same way as you alter the width. If you wanted to make a 10 pixel wide line you would type <hr size=10>.

By default horizontal rules have shading. You can create a line without any shading by typing <hr noshade>.

You can combine as may variables as possible within the same tag. If you wanted to create a 300 pixel wide rule that was 10 pixels wide and had no shading you would type <hr noshade width=300 size=10>

NOTE: It doesn't matter what order they are in as long as they are all within the < and > tags.

Font Colors

You can change the color of your font very easily. For the most frequently used colors you can use their name. e.g red, black, green, blue, gray, white. HTML uses American English spellings, if you want to change the color of something, you need to type color. If you want a Grey color you need to type Gray. If you want to make a word red you would type:

HTML

For more specific colors you may need to use a hexadecimal code. This is the unique code given to each shade of color. All colors have a combination of 6 numbers and letters that represent an exact shade. Some common codes are:
Bright red = FF0000
Purple = CC00CC
Pink = FF66FF
Light Blue = CCCCFF
Lime Green = 99FF99

To use the Hexadecimal code simply type:

HTML

This would make the text pink

NOTE: If you want to change the font color and size you can do this in the same tag:

HTML

This would make the font small and red.

Background Colors

If you want to make a page more interesting you can change the background of the page. Background color works in much the same way as font color except it affects the whole page. Normally backgrounds are white (FFFFFF) or black (000000) but you can use any color you wish. To change your background color simply type this near the top of your page.

HTML

or

HTML

NOTE: You do not need to end this tag as it affects the whole page but it is good practice to put </body> at the bottom of your page to keep things tidy.

Adding Images

Images can brighten up a web page and they are a great way to show others your work. If you have created a picture that you want to use on your site you need to save it somewhere on the web. Once you know where you image is stored it is very easy to add an image to your web site.

To insert an image use this code:

HTML

There are several other things you can add into the code to make the image look better including the border tag. Using this you can choose what thickness border, if any you want around your image. Some basic borders are:

• Border="0" no border
• Border="1" thin border
• Border="2" thicker border

You simply type in border="2" inside the tag after you have typed the location of your image, like so:

HTML

Positioning Images


You can also change where you want your image to be positioned on the page. The most frequently used ones are left, right and center. To make an image centered type this before the image tag:

HTML

Everything typed after this will be centered so now you need to type your image tags. When you have finished your image tag and no longer want everything centered you simply end the center tag like so:

HTML

NOTE: To make something aligned to the left or right you use the same code just replace the word center with left or right.

Background Images

You can also make an image display as a background image instead of just having a solid color. This works well with light colored, simple images. It livens up the page, yet you can still read the text clearly. To display an image as the background you need to type:

HTML

Links
You can turn anything on your site into a link to something else. You already know how to insert images or text into your web page, turning that into a link is very simple. First you need to have a URL to link to, in this example I have used the InvisionFree url. I wanted to make the text click here link to www.invisionfree.com so I typed:

HTML

The only thing that will be displayed on the web page is the text click here. This would now be click-able. When you click on it with your mouse it will take you to the InvisionFree URL. You can make the text a different size, different color, bold, italic whatever but you need to start and finish the tags either side of the text. e.g to make that link bold I would put:

HTML

To make an image click-able you use the same idea but instead of typing the text you put the image tag. E.g:

HTML

Music

There are several ways you can add music. It can play in the background, play once only, play continuously, or you can let the person viewing the webpage decide what they want to do. First you need to have your music file saved somewhere on the internet. Simple replace the http://www.ffextreme.com/ff10/music/1-12-Hopeless_Desire.mid with the URL of your music file.

You can create a little music player on your page, this will allow the viewer to stop and start the music whenever they wish. What tags you use depends on if you want people to see it in Netscape or Internet Explorer (it may not work in other browsers such as Mozilla, Opera, etc). Netscape supports embed tags and IE supports bgsound tags. It is best to include both, that way it will always work.


HTML

You can make your music play continually by adding the loop tag, these are slightly different in Netscape and IE. If you want your music to start playing as soon as someone loads the page, type autostart=true in the embed code. The following code would start your music automatically and play it constantly.


HTML

If you want to give your webpage a more subtle appearance, you do not need to display the player. If you want to hide the player from your viewers, use the hidden=true tag like so:


HTML

Conclusion

This concludes my guide to the wonderful language of HTML.


I got this document from ifsz i did not write it myself.

Nice tutorial, looks good.

Yeah nice. About the 5th time I've seen tuts like this but it's not exactly the same.

Just glad i could help. i though it make a nice little doc for the board.