Homesrfan
18-04-2005, 12:35 AM
The Extended Guide To HTML
by Homesrfan
Updates:
April 17, 2005 - Tutorial Made
April 19, 2005 - Added the "Fun Stuff" Section
April 20, 2005 - Tutorial is STICKIED! :D Thanks so much.
Now I remember starting out with HTML and it was hard to get used to. Soon though, if your an obsessed webmaster (like me ;)) you will start to get it and you will remember everything along away!
Okay first lets get started by making the basic layout of our webpage. A basic, blank layout would be something like this:
<html>
<head>
<title>New Page 2</title>
</head>
<body>
</body>
</html>
<html> tag = everything inside the tag will be HTML. This is pretty much useless because the whole page will be left out. Usually this is left out.
<head> tag = the head section of your webpage.
<title> tag = the title of the webpage or what will show up at the top of the page.
<body> tag = the body section of your webpage. (where most of the content goes)
Now you might have seen that every tag has an ending tag like <title> tag has an ending tag with a back slash before it, like so: </title>. That means that the tag has ended and everything outside the tag will be a different code.
So lets move onto the basic tags for webmasters.
Key:
Blue: Things that must stay the same.
Red: Things that should be changed.
F O N T S & T E X T:
<font size="Font Size Here">Text Here</font>
This will do exactly as it says: Change the font size. You can chose through numbers 1-7. 1 being the smallest, and 7 being the largest.
1234567
<b>Text Here</b>
This will make your text bold. Good for text that needs to stand out.
<i>Text Here</i>
This will make your text italiced.
<font face="Font Name">Text Here</font>
This changes the font face of the text. There are many fonts to chose from.
Here are some basics: Arial | Comic Sans MS | Impact | Courier New
<s>Text Here</s>
This will make your text have a line going through it.
<u>Text Here</u>
This will make your text underlined!
<font color="ColorHere">Text Here</font>
This will change your text color! Just put your color in the ColorHere part. :D
L I N K S
There are many types of links you can have. Please read the descriptions if you are not sure which code does what.
<a href="URL OF WEBSITE">TEXT HERE</a>
This is a simple hyperlink. It will link to another site.
<a href="mailto:[email protected]">TEXT HERE</a>
This is a link to let your visitors email you.
A L I G N I N G T E X T
<p align=DIRECTION>TEXT HERE</p>
Put left, right, or center where it says "DIRECTION".
Left
Center
Right
For a simple center script put in.
<center>TEXT HERE</center>
Text Areas
Text areas are cool little scripts that will help you put text in your website in a cool way. These are good for rules and other things.
<textarea>TEXT HERE</textarea>
This is a simple textarea.
<ilayer name="scroll1">
<div id="scroll3"
style="width:100;height:75;
background-color:COLORHERE;
overflow:auto">
TEXT HERE
</textarea></div>
This is a more complicated textarea that allows HTML. You can edit the background color, the text inside, the width, and the height.
I M A G E S
<img src="Image URL">
A simple image tag. Put some graphics on your page. :8
M O R E S T U F F
<marquee>TEXT HERE</marquee>
A simple marquee. This will make your text scroll across your page.
There are many more codes than HTML.
F U N S T U F F
<table border=2 bordercolor=blue
cellspacing=0><tr><td>
<applet codebase=http://www.ClockBot.com/
code=clockbot.Clock width=125 height=25>
<param name=bgColor value="#FFFFFF">
<param name=fgColor value="#9966FF">
<param name=shadowColor value="#FFFFFF">
<param name=fontName value="arial">
<param name=fontSize value="20">
<param name=xoff value="2">
<param name=yoff value="2">
<param name=xstart value="10">
<param name=ystart value="21">
<param name=rot value="0">
<param name=msleep value="300">
</applet></table>
This code will insert a simple java clock into your site. Don't edit any of this code. :)
<BGSOUND SRC="MIDE URL HERE!"AUTOSTART="true"HIDDEN="true" LOOP="infinite">
Add background music to your site.
[Edited By Partie2] (Forum Moderator) Great Help. Thread been stickered. :)
by Homesrfan
Updates:
April 17, 2005 - Tutorial Made
April 19, 2005 - Added the "Fun Stuff" Section
April 20, 2005 - Tutorial is STICKIED! :D Thanks so much.
Now I remember starting out with HTML and it was hard to get used to. Soon though, if your an obsessed webmaster (like me ;)) you will start to get it and you will remember everything along away!
Okay first lets get started by making the basic layout of our webpage. A basic, blank layout would be something like this:
<html>
<head>
<title>New Page 2</title>
</head>
<body>
</body>
</html>
<html> tag = everything inside the tag will be HTML. This is pretty much useless because the whole page will be left out. Usually this is left out.
<head> tag = the head section of your webpage.
<title> tag = the title of the webpage or what will show up at the top of the page.
<body> tag = the body section of your webpage. (where most of the content goes)
Now you might have seen that every tag has an ending tag like <title> tag has an ending tag with a back slash before it, like so: </title>. That means that the tag has ended and everything outside the tag will be a different code.
So lets move onto the basic tags for webmasters.
Key:
Blue: Things that must stay the same.
Red: Things that should be changed.
F O N T S & T E X T:
<font size="Font Size Here">Text Here</font>
This will do exactly as it says: Change the font size. You can chose through numbers 1-7. 1 being the smallest, and 7 being the largest.
1234567
<b>Text Here</b>
This will make your text bold. Good for text that needs to stand out.
<i>Text Here</i>
This will make your text italiced.
<font face="Font Name">Text Here</font>
This changes the font face of the text. There are many fonts to chose from.
Here are some basics: Arial | Comic Sans MS | Impact | Courier New
<s>Text Here</s>
This will make your text have a line going through it.
<u>Text Here</u>
This will make your text underlined!
<font color="ColorHere">Text Here</font>
This will change your text color! Just put your color in the ColorHere part. :D
L I N K S
There are many types of links you can have. Please read the descriptions if you are not sure which code does what.
<a href="URL OF WEBSITE">TEXT HERE</a>
This is a simple hyperlink. It will link to another site.
<a href="mailto:[email protected]">TEXT HERE</a>
This is a link to let your visitors email you.
A L I G N I N G T E X T
<p align=DIRECTION>TEXT HERE</p>
Put left, right, or center where it says "DIRECTION".
Left
Center
Right
For a simple center script put in.
<center>TEXT HERE</center>
Text Areas
Text areas are cool little scripts that will help you put text in your website in a cool way. These are good for rules and other things.
<textarea>TEXT HERE</textarea>
This is a simple textarea.
<ilayer name="scroll1">
<div id="scroll3"
style="width:100;height:75;
background-color:COLORHERE;
overflow:auto">
TEXT HERE
</textarea></div>
This is a more complicated textarea that allows HTML. You can edit the background color, the text inside, the width, and the height.
I M A G E S
<img src="Image URL">
A simple image tag. Put some graphics on your page. :8
M O R E S T U F F
<marquee>TEXT HERE</marquee>
A simple marquee. This will make your text scroll across your page.
There are many more codes than HTML.
F U N S T U F F
<table border=2 bordercolor=blue
cellspacing=0><tr><td>
<applet codebase=http://www.ClockBot.com/
code=clockbot.Clock width=125 height=25>
<param name=bgColor value="#FFFFFF">
<param name=fgColor value="#9966FF">
<param name=shadowColor value="#FFFFFF">
<param name=fontName value="arial">
<param name=fontSize value="20">
<param name=xoff value="2">
<param name=yoff value="2">
<param name=xstart value="10">
<param name=ystart value="21">
<param name=rot value="0">
<param name=msleep value="300">
</applet></table>
This code will insert a simple java clock into your site. Don't edit any of this code. :)
<BGSOUND SRC="MIDE URL HERE!"AUTOSTART="true"HIDDEN="true" LOOP="infinite">
Add background music to your site.
[Edited By Partie2] (Forum Moderator) Great Help. Thread been stickered. :)