Welcome to the Tutorial website.Please feel free to look around.I hope that the information given could help you understand more about HTML.

Introduction to HTML-An overview of HTML,how to use it and the base of veery HTML page
Tag reference list-list of HTML tags
Fonts-Changing the size,colour and look of text
Special characters-A reference on special character codes
Links-text linking
Images-image linking etc.
On click events
Marquees
Calendar
Tables-understanding and using them

Introduction
Click on the link to view.
HTML intro


HTML tags
Click on the link to view.
Tag Reference List


Fonts
Click on the linkto view.
Fonts


Special character
Still under construction :)

Links
Your basic link:


For the link to open up in a new browser:
Example


To make a link open in the top of the current browser window, to break out of frames:


Email link:


Mouseover link:
OVER HERE


Mouseover link BG:


Mouseover link pop up:
TEXT


Re-Direction Link
(When you go to the site, it automatically waits a few seconds then goes to the next site)


Drop-Down Link List


Drop-Down Link List Target


Changing Link Styles
You can change how ALL your links look:
just when its normal (A:LINK),
once you visited it (A:VISITED),
when you click on it (A:ACTIVE),
when you put your mouse on it (A:HOVER).
The following is the main code. Put it ONCE on your page, and it changes ALL your links. Whatever interesting style code you want to do, put that particular code where it says "text-decoration:none"



See where it says "text-decoration:none"? That can be changed to many different codes, which make links underlined, bold, italic, different colors, etc. You can change any, or all of the text-decorations. If you want to, replace the part where it says "text-decoration:none" on each line with one of the following codes. OR if you leave it as it is, the links will be plain, non-underlined. You can also put more than one text decoration on each section.

1.text-decoration:underline
2.text-decoration:underline overline
3.background-color:COLORHERE
4.text-decoration:line-through
5.cursor:crosshair
6.cursor:n-resize
7.cursor:s-resize
8.cursor:w-resize
9.cursor:e-resize
10.cursor:wait
11.font-weight:bold
12.font-weight:italic
13.font-size:#pt

Which makes it:

1.underlined
2.underline & overline
3.background color
4.slashed out
5.cross cursor
6.cursor points up
7.cursor points down
8.cursor points left
9.cursor points right
10.hourglass cursor
11.bold font
12.italics text
13.sized text

Jumping Links:
Links that navigate on your page. Like at the top you can have a small navigation that has like "My Info" "Introduction" and "Friends" but the visitor just wants to see the friends part of your page. So they click on the "Friends" link and it directs them to the friends part. This is done by using two codes.

LLT or Link Locator Tag is the part of the navigation system that you click on.


You simply put a Letter, Word, Or number between the pound symbol (#) and the quotations.
The LTT or Link Target Tag is the part that the browser looks for in your HTML document and once it finds it, it stops at that point of the document.


**In that code where it says "Name or Number Here" you put the same Name Or Number that you put in the LLT tag

Images
To put pictures on webpages:


You may add the height and width:


You must upload the pictures.Some websites recommended:
Photobucket
Tinypic

Image link:


At times,the image with link will have a border line.To get rid of it use this:


On click events
Cursor rotator:
Put above the head tag.


No right clicking allowed:


Adfree code:


Pop-up Alert:


No highlighting/selecting:


Marquees
Marquee's:
Text Here


Next we add the attribute behavior. You can ether put alternate or hidden. Hidden is like the example above it appears then disapears. Alternate lets in bounce back in fourth from side to side in its width or if its in a table or div
Text Here


The next attribute you can add is "direction". You can ether put right,up, or down. A marquee without a direction specified will always go left.
Text Here


That marquee took up a lot of space so the next attribute you add is width and height. You want to use width for directions left and right, and height for directions up and down.
Text Here


Now think your marquee is too fast or too slow? The next two attributes you add are: scrollamount and scrolldelayYou dont have to put them both if you want to speed it up you use scrollamount, the higher the number the faster. If you want to slow it down you use scroll delay, the higher the number the slower.
Text Here


TEXT HERE



Mouseover speed marquees:
TEXT


The onmouseOVER # is when you put your mouse ON it, the onmouseOUT # is when its normal

Advance Marquee's:

These are the use of CSS properties in marquees to create awsome affects using microsofts filters. Because they were made by microsoft they only work in Internet Explorer.

Text Here


Text Here


Text Here


Text Here


Text Here


Text Here


Text Here


Text Here


Text Here


Text Here


Text Here


Text Here


Calendar

Unordered,ordered,definition list
The explanation is in a wordpad.Click on the link below to view it.
List

TABLES
here are 3 egs of tha TABLE tags.

EG1-this is a simple table wif all default values except for the border.Default border is 0(or no border)



Eg:
This is cell 1-1 This is cell 1-2 This is cell 1-3
This is cell 2-1 This is cell 2-2 This is cell 2-3


EG2-This is a more complex table.The width is set to 500pixels and the text is align3ed using the align and valign attributes.The colspan attribute is used to set the column span to 2 columns:



Eg:
This is cell 1-1


 This is cell 1-2 This is cell 1-3
This is cell 2-1 with a colspan of 2


This is cell 2-3


Eg3-This table is borderless,text defaults is left aligned and cell's background is coloured:



Eg:
this is cell 1 This is cell 2 This is cell 3