| HTML Tutorial :: Chapter One |
So you want to learn HTML?
Well here's a good place to start. So kick back and relax, and in no time you'll be a web-master!
Part One: The Basics
First of all, you might want to know what 'HTML' stands for; HyperTextMarkupLanguage -- or HTML for short :)
So, you might want to know how to start... Right? So here's how to create a document-- or a webpage, like this one:
<html>
<head>
<title>Test</title>
</head>
<body>
</body>
</html>
So, now to-- wait, you don't know what this means? Then to explain it:
<html> This is the beginning of the document. All HTML documents have to start with <html> and end with </html>. Actually, all objects or declarations of HTML have to start like this and end like this-- like the "head" property, for instance.
<head> This is the header property-- all scripts that are not apart of the contents of the document go here, like the title,
This is the title of the page, and will be displayed instead of the sites url.
This is the body-- where all contents go, like images, text, etc.
<body>
</body>
</html>
So, now that we have all of that down, let's add something to our lifeless document...:
<html>
<head> //this is a comment!
<title>Test</title>
</head>
<body>
<p>Hello, world.</p> //this is a paragraph!
</body>
</html>
There are two new things -- a paragraph and two comments. First of all, a paragraph displays text-- like this statement, for instance. A comment is a statement of code that doesn't affect the document at all-- it can explain what the code means or tell who the code is by, etc. All in all, it's there to tell people about the document, but doesnt change the document. So, it's still kind of... I don't know... Plain, boring? Well, then, let's fix that:
<html>
<head> //this is a comment!
<title>Test</title>
</head>
<body bgcolor="black">
<p><font color="yellow">Hello, world.</font></p> //this is a paragraph!
</body>
</html>
What we just did was change the background color and also the font color of the text. To do this... Well, it's pretty obvious from what we did :P But if you don't know, we changed a property of the background-- it's color-- by using hte 'bgcolor=""' statement in the body tag and the text's color by using the 'fontcolor=""' statement. Once again, all statements that are tags have to end with a / before them as tags-- more reference can be found here. As you will notice, I will use references to the w3schools site a lot -- I learned HTML and CSS from them :) Not to mention some Javascript, PHP, and MySQL, but anyway, if at any time you find that this tutorial is hard to understand or just isn't that good, then please, be my guest and go on over to w3schools.org . You won't regret it! But now for the final part of this lesson; tables and styles. A table is, well, a table of data. Here's an example:
<table>
<tr>
<td>data here</td>
</td>
</table>
This is how it works...;
A table must begin with a 'table' tag, as shown above. Next, it needs a 'table row', or tr for short. Inside of the <tr>, there must be a 'table data' tag to show data or whatever it is you want to show in the table. This is <td> for short ;) For more reference on this, go here.
Next up are styles. Styles are a way that something is shown. You will be shown how to do three basic styles(for now):
<h1>(For different sized headers)
<h2> (same as above)
<h3> (read above)
<h4> (by now if you don't get that all of the tags that have 'h's and numbers are for headers, then you probably shouldn't be reading this tutorial... No I'm just kidding :3)
<h5> (but really now, this is kinda making me worried if you don't know by now)
<h6> (if you have the time to read all of these, then man you must be bored... Or a very good observant-er-ee-er)
<h7> (wow, if you read all of them :P )
<em>(For italics)
<strong>(For bold)
<u>(For underlined text)
<font color ="">(for the font color :P)
For more reference on styles, go here.
So, this is all for today! Please come back... Err.. Tomorrow? Anyway, whenever I put up chapter two, please come back and enjoy it :) But until then, all I can suggest is to go to w3schools.com/html/ and check out what they have there. But until then, this is it! Bye!
For my older HTML tutorials, go here
sephiroth12(xxxjj18)
|
| By : sephiroth12 |
| E-mail:xxxjj18@gmail.com |
| Date/time : 23/12/08 03:41:29 |
|