HTML Tutorial

~The Sim Site Resource Center~

HTML TAG Tutorial by: RAGE

Note: Green text does not represent change in color

in your acctual html script it simply shows the results.

Introduction

This is the base code for all codes as well as the easiest script of all there are alot more scripts out there such as, java, javascript, DHTML, and many more but it all starts here so get all you can from this take your time and learn it DONT GET FRUSTERATED it is the key you can do it it isn't tough, good luck, and I'll just kick you right into it...

All html pages beguin and end with theese tags:

Very top of page--> <html> </html> <--Very bottom of page

Head & Body Tags

Next there are two tags that are a must:

The first is the "head" tag and it symbolizes that it is the top section as follows:

in your head always is the "title" tag which is what the title of your document is

an example is:

<head>

</head>

The next one is the body tag and it is where most of your script will go as follows:

it also sets you background color your default text color, link color etc.

an example is:

link= the color of the links

bgcolor= the color of the background

vlink= the color of the link after it has been visited

text= the default color of your text

background= the title of the image in your directory you wish to use as your background Note:the background feature is optional

Now at the end of your document you are going to need the end "body"

tag it looks like this: </body> and goes before the end </html> tag.

look for adding back ground soud under

adding sound, video, images, and the center tag

Headings and the small tag

Heading determine the size of your heading text and the sizes are 1 thru 6

1 being the biggest 6 being the smallest

This is what a heading tag looks like:

<h6>Text</h6> and result in:

Text

<h1>Text</h1> and result in:

Text

another way to make your text small is to use the "small" tag

and it is as follows:

<small>little bitty text</small>

and result with:

little bitty text

Miscellanious text tags

Paragraph tag

The first is the paragraph tag and simply represtets an indentation or

in other words a new paragraph as follows:

Line break tag

and theese corispond with line breaks, essintially what a line brak is,

is like hitting the enter or return key on you keyboard it simply tells it

to make a new line and it is as follows:

<br> Note: it doesnt need a closing tag

so the html would look somthing like this:

<p>This is where your first line goes<br>

this is where your second line goes</p>

and it would result in:

This is where your first line goes

this is where your second line goes

Address and strong text tags

next is the address tag which is the same as italics and it is as follows:

the reason it is called an address tag is because it is generally

used to represent and address as follows:

<address>created by michael toppen @ rage13poi@aol.com</address>

and in turn look like this:

created by michael toppen @ rage13poi@aol.com

Now we have the the strong text tag and it is mainly used to make text stand out more

it is as follows:

<strong>This is strong</strong>

and in turn looks like this:

This is strong

Monotype font

all monotype font does is make your text look like it was done on a typewriter

and the tags are as follows:

Italics, bold, underline, and strikeout tags

Next are some of the easiest tags, italics, bold, underine, and strike out

The first one is italics and is basically the same as the "address" tag

it is as follows:

<i>This is italics</i>

and result in:

This is italics

next is the bold tag and it is alot like the "strong" tag

it is as follows:

and result in:

This is bold

now we have the underline tag and it underlines your text

it is as follows:

<u>This is underline</u>

and result in:

This is underline

the strikeout tag simply puts a line thru your text

it is as follows:

<s>This is strikeout</s>

and result in:

~~This is strikeout~~

Lists

Definition list tag

This tag is used to show definition and it uses three tags as follows:

<dl>

<dt>Main word

<dd>definition of main word

and result in:

Main word

definition of main word

Note: the "<dl> is simply the start of the tag

Unordered list

Note: with unordered lists you must use the <dir> and </dir> tags at the

buguining and end of your lst this symbolizes the beguing and end of your list

except with the <ul> and </ul> tags.

basically all this one does is tab it to the center and it is as follows:

Bulleted list tags

the next one corosponds with the last tag and it simply creates a bullet or a square

dot to the left of your text it is as follows:

<dir>

<ul><li>bulleted and centered</li></ul>

</dir>

and result in:

bulleted and centered

you can also use it without centering it as follows:

<dir>

<li>bulleted but not centered</li>

</dir>

and will do the same as above but not centered

Numbered list tags

a numbered list is exactly what it sounds like and it is as follows:

<ul>1.) Number 1</ul>

and result in:

1.) Number 1

Inner comment tags

basically this simply lets you enter a comment that isn't seen

without viewing the script and it is as follows:

<!-- and you enter your comments inside here --!>

and obviously I cant show you the result of this one.

Pointers and hot links

Remote web links

lets you have clickable links with only a word or so you have to click

and it is as follows:

and the only thing you would have is:

KoRn

and once clicked would take you to korn .com

look for how to use an image as a link under

adding sound, video, images, and the center tag

E-mail links

the next links is a mail link and it is as follows:

and would look like this:

E-mail Rage

and once clicked would allow you to E-mail Rage

FTPing from your site

You can transfer files from your site by adding the <a herf=""></a> tag, except

where you would put the URL you would put the files name. The file extension

has to ba a non web oriented file like: .exe, .zip, .avi, .mp3, .wav, etc.

an example is:

<a herf="Blind.mp3">Download KoRn's Blind</a>

and would look like this:

Download KoRn's Blind

but once clicked would start download on the file.

Anchors

an anchor is basically a link to another part of the same page, you may have seen them

on longer web pages at the bottom it will say "back to top" and when clicked will take

you back to the top of the page and that tag is as follows:

Note: the above goes where you want your link

Note: this goes where you want the link to take you

adding sound, video, images, and the center tag

Adding images

to add an image simply use this tag along with the file name as follows:

Note: all images must be eithe .jpg or .gif to be web compatable

The center tag

you can use the center tag to center anything on the page as follows:

<center>I want to center this!</center>

and result in:

I want to center this!

Making an image a link

Using an image as a link is as follows:

and now all you have to do is click on that image to go to the select web site

Adding audio, video, and multimedia

to add clickable sound and video use the following tag:

Note: you can also just use text instead of an image

Note: audio and video files are large and take a while to load

Background sound

This feature allows a BG sound to play without having to be clicked upon

and is basically an addition to your body tag as follows:

bgsound src="name of sound file" loop="# or infinate"

if you choose infinate it will play forever, if you chose a

# it will play that many times

Extensions

Horizontal rule

horizontal rule are lines that seperate the page and the tag is as follows:

<hr>

and that simply creates a thin grey line accross your page

you can change the length by adding "width" to your tag as follows:

this is how long it will be

you can also add "size" to it to wake it a bit wider as follows:

this is how wide it will be

you can use them both to taylor them to fit your needs as follows:

this will chcange both

Adding an image border

adds a border around your selected image as follows:

Tables

are used alot with sliced images but used for other things as well

and are as follows:

Border= width of rules between cells in the table

Cellspacing= spacing between the individual cells

Cellpadding= space between border and contents of the cell

Width= width of table on screen (100% = whole screen)

Scrolling Marquee

it is a line of text that scrolls accross the screen and is as follows:

if you choose infinate it will scroll forever, if you chose a

# it will scroll that many times

you can also change the width of the marquee by adding this:

width="#"

you can also change the background of the marquee by adding this:

bgcolor="color"

you can also use all of them together like this:

you can also make an image scroll as follows:

Changing Font

the font tags are used to change the size and color and are as follows:

to change the size add this:

font size="#1-6"

to change the font type add this:

font face="font name"

you can use them all and it would look like this:

Conclusion

There is a bit more HTML there is to learn such as, forms, frmaes, and a few others but this should keep you busy for a while the best place I have found to play with html is Tripod.com but there are others out there, I hope you have enjoyed this tutorial as muchas I did making it and remember NEVER GET FRUSTERATED, it takes time so, take your time and learn this this is the base code, if you are planning on being a webmaster there is a ton more scripts to learn so be patient but move at a steady pace. Good Luck and Good Bye.

~RAGE~

Back to top

<<<Back