Dan Williamson
05-09-2005, 10:17 PM
Well as i'm bored out of my mind i thought i'd write a long HTML guide.
Basic HTML.
Open Notepad.
<HTML> This starts off your HTML page
<Head> This Starts off your header section
These are header codes.
<Body bgcolor="Hex"> Is for background colour.
<style type="text/css"> Is for a CSS style.
<LINK REL=stylesheet HREF="http://www.your.page/css.css" TYPE="text/css"> Thats linking a external stylesheet.
</head> This ends the header section. we'll move on now.
<Body> This starts your body section.
Now theres a lot of body tags we're going to use a few of them.
First the basic text tags.
<P> <B> <U> <BR> <Hr> In order they do:
New paragraph, Bold text, Underlined, Break, Horizontle rule.
So at the moment you could have:
<Html>
<Head>
<Title>Your Site</Title>
<style type="text/css">
</Head>
<body>
<P><B>Look My Text Is Bold.</B>
<Br> Look what happened here.
</Body>
</Html>
Now this really doesn't do much. so lets move on quickly.
<font face="your font" size="your size #" color="#your color number"> You have set your font font size and font colour with that tag, Although many people use CSS for that now. We'll do the CSS later.
<a href="http://address you want text to link to"> This is a hyperlink and using that and typing Http://www.HabboxForum.com would if you clicked it take you to habbox forum.
<img src="Image.png"> This is inserting an image into your page.
<div align="center"><img src="Habbo.gif"></div>
<div align="left"><img src="Habbo.gif"></div>
<div align="right"><img src="Habbo.gif"></div>
These are aligning your images.
<a href="mailto:your address">your name</a>
This is an email link. Time to move on.
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table> This is a simple 4 cell table tag. You can change border to anything and if you don't want a border simply put <table border="0">
<table border="2">
<tr>
<td bgcolor="#000000">Cell 1</td>
<td bgcolor="#000000">Cell 2</td>
</tr>
<tr>
<td bgcolor="#000000">Cell 3</td>
<td bgcolor="#000000">Cell 4</td>
</tr>
</table>
This would add colour to your tables use any hexademical code.
<table border="2" cellspacing="4" cellpadding="4">
Cell spacing and padding really are what they say.
<table border="2" cellpadding="5" cellspacing="5" width="200"> Theres your table width.
<table style="background-image:url(yourfilename.gif)">
thats to add a background image to your table.
Now just mess around with the table codes etc. We'll move on now.
<style type="text/css">
A:link {text-decoration:none; }
A:visited {text-decoration:none; }
</style>
What that does is simply get rid of the underlining links.
<STYLE TYPE-"type/css">
<!--
BODY {background: #C9C9C9}
A:link {color: #FF0000}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font size:14pt; font-family: desdemona}
-->
</STYLE> What that does is change your bg color to grey instead of HTML code, change ur link colour, and a useful script everytime u use h1 h2 or h3 the properties of that text are already made plus CSS codes make ur load time quicker.
<IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:55px" SRC="Habbo.gif">That positions your image.
<P STYLE="border: double #000000 10px"> Thats good because it adds a border around your text.
<STYLE>
P {border-style: inset}
</STYLE> You have different border types.
<style type="text/css">
<!--
.scrollbar2 {
scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f;
scrollbar-track-color:#800080;
}For scrollbars to make your scrollbar blend in with your background [this only works in IE]
<IFRAME name="inlineframe" src="yoururl.html" width=200 height=200 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME>
This is the iframe code where many people have a content box, But i prefer using PHP includes but for beginners iframes are better.
Now using this tutorial you could create a basic table layout with some interesting CSS in it.
For more tutorials etc try the following sites:
www.Htmlgoodies.com
www.Lissaexplains.com
www.w3schools.com
www.Dynamicdrive.com
www.PHPfreak.com
For cutenews www.Cutephp.com
For tutorials on photoshop etc.
www.Pixel2life.com
www.Xenigma.co.uk
www.Bright-designs.net
Bare in mind this is my first detailed tutorial and it may not be that good but oh well i just want to help people learn the basics.
Basic HTML.
Open Notepad.
<HTML> This starts off your HTML page
<Head> This Starts off your header section
These are header codes.
<Body bgcolor="Hex"> Is for background colour.
<style type="text/css"> Is for a CSS style.
<LINK REL=stylesheet HREF="http://www.your.page/css.css" TYPE="text/css"> Thats linking a external stylesheet.
</head> This ends the header section. we'll move on now.
<Body> This starts your body section.
Now theres a lot of body tags we're going to use a few of them.
First the basic text tags.
<P> <B> <U> <BR> <Hr> In order they do:
New paragraph, Bold text, Underlined, Break, Horizontle rule.
So at the moment you could have:
<Html>
<Head>
<Title>Your Site</Title>
<style type="text/css">
</Head>
<body>
<P><B>Look My Text Is Bold.</B>
<Br> Look what happened here.
</Body>
</Html>
Now this really doesn't do much. so lets move on quickly.
<font face="your font" size="your size #" color="#your color number"> You have set your font font size and font colour with that tag, Although many people use CSS for that now. We'll do the CSS later.
<a href="http://address you want text to link to"> This is a hyperlink and using that and typing Http://www.HabboxForum.com would if you clicked it take you to habbox forum.
<img src="Image.png"> This is inserting an image into your page.
<div align="center"><img src="Habbo.gif"></div>
<div align="left"><img src="Habbo.gif"></div>
<div align="right"><img src="Habbo.gif"></div>
These are aligning your images.
<a href="mailto:your address">your name</a>
This is an email link. Time to move on.
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table> This is a simple 4 cell table tag. You can change border to anything and if you don't want a border simply put <table border="0">
<table border="2">
<tr>
<td bgcolor="#000000">Cell 1</td>
<td bgcolor="#000000">Cell 2</td>
</tr>
<tr>
<td bgcolor="#000000">Cell 3</td>
<td bgcolor="#000000">Cell 4</td>
</tr>
</table>
This would add colour to your tables use any hexademical code.
<table border="2" cellspacing="4" cellpadding="4">
Cell spacing and padding really are what they say.
<table border="2" cellpadding="5" cellspacing="5" width="200"> Theres your table width.
<table style="background-image:url(yourfilename.gif)">
thats to add a background image to your table.
Now just mess around with the table codes etc. We'll move on now.
<style type="text/css">
A:link {text-decoration:none; }
A:visited {text-decoration:none; }
</style>
What that does is simply get rid of the underlining links.
<STYLE TYPE-"type/css">
<!--
BODY {background: #C9C9C9}
A:link {color: #FF0000}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font size:14pt; font-family: desdemona}
-->
</STYLE> What that does is change your bg color to grey instead of HTML code, change ur link colour, and a useful script everytime u use h1 h2 or h3 the properties of that text are already made plus CSS codes make ur load time quicker.
<IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:55px" SRC="Habbo.gif">That positions your image.
<P STYLE="border: double #000000 10px"> Thats good because it adds a border around your text.
<STYLE>
P {border-style: inset}
</STYLE> You have different border types.
<style type="text/css">
<!--
.scrollbar2 {
scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f;
scrollbar-track-color:#800080;
}For scrollbars to make your scrollbar blend in with your background [this only works in IE]
<IFRAME name="inlineframe" src="yoururl.html" width=200 height=200 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME>
This is the iframe code where many people have a content box, But i prefer using PHP includes but for beginners iframes are better.
Now using this tutorial you could create a basic table layout with some interesting CSS in it.
For more tutorials etc try the following sites:
www.Htmlgoodies.com
www.Lissaexplains.com
www.w3schools.com
www.Dynamicdrive.com
www.PHPfreak.com
For cutenews www.Cutephp.com
For tutorials on photoshop etc.
www.Pixel2life.com
www.Xenigma.co.uk
www.Bright-designs.net
Bare in mind this is my first detailed tutorial and it may not be that good but oh well i just want to help people learn the basics.