Make your own free website on Tripod.com
 
~The Sim Site Resource Center~
Home | Generators | Graphics | Tutorials | Links | Forum | SIMortality
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:
<head> and </head>
in your head always is the "title" tag which is what the title of your document is
an example is:
<head>
                                   <title>Rage's P.O.I. Site</title>
</head>

The next one is the body tag and it is where most of your script will go as follows:
<body> and </body>
it also sets you background color your default text color, link color etc.
an example is:
<body text="#000000" link="#ff0000" vlink="#0000ff" bgcolor="#00ff00" background="korn.gif">
                    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:
<p> and </p>

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:
<address> and </address>
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:
<pre> and </pre>

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:
<b>This is bold</b>
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:
<ul> and </ul>

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:
<a herf="http://www.korn.com">KoRn</a>
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:
<a herf="mailto:Rage13poi@aol.com">E-mail Rage</a>
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:
<a herf="#part1">Back to top</a>
Note: the above goes where you want your link
<a name="part1">top</a>
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:
<img src="File name goes here">
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:
<a herf="http://linktosomepage.com"><img src="image name"></a>
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:
<a herf="audio or video file name"><img src="file name"></a>
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:
<hr width=#>
 this is how long it will be

you can also add "size" to it to wake it a bit wider as follows:
<hr size=#>
this is how wide it will be

you can use them both to taylor them to fit your needs as follows:
<hr width=# size=#>
this will chcange both

Adding an image border
adds a border around your selected image as follows:
<img src="imagefilename" border=#>

Tables
are used alot with sliced images but used for other things as well
and are as follows:
<table border=# cell padding=# cell spacing=# width=%></table>
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:
<marquee loop="# or infinate">text goes here</marquee>
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:
<marquee loop="# or infinate" width="#" bgcolor="color">text goes here</marquee>
you can also make an image scroll as follows:
<marquee loop="# or infinate" width="#" bgcolor="color"><img src="image" </marquee>

Changing Font
the font tags are used to change the size and color and are as follows:
<font color="colorcode or name">text</font>
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:
<font color="colorcode or name" font size="#1-6" font face="font name">text</font>

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