HTML Tutorial For Beginners
Getting Started
First make a new html document. File -> New -> Text Document, then rename extention to .html. If that doesn't work right click (here and click save page as. Use start -> Run -> Type Notepad. Open the index.html as write jibberish. Double click on index.html, if it shows what you wrote, we're on the right track.
Basic Codes
The first thing you'll notice is that html does does not retain the formatting when you click the enter button to move down a line. It all gets jumbled into one. So instead of using
You'll have to use
BR just means line break, or next line.
Text Effects
We can make text bold, italic, underlined, or even change it's color. The most common mistake is not remember thing that you have to end the tags, so it will know when to stop italicizing a quote for example. To end a tag, we use it's original tag but with a "/" first.
<b>This Text is bold.</b>
This Text is bold.
<i>This Text is Italicized.</i>
This Text is Italicized.
<u>This Text is underlined.</u>
This Text is underlined.
<font color="red">Red</font>
Red
<hr>
returns (a line)
So it's pretty straight forward. These are just memorization, take the time to mess with them, even though basic, to be sure you're on the right track.
Images
Get an image of your choice in the same directory as index.html. Use this code, <img(age) src(search)="thenameoftheimage.jpg">.
<img src="c.gif">returns
Don't Panic
It's not important you memorize these codes, just know where to find and what they do.
Links
The code for links is the most difficult for beginners remember.
<a href="http://www.jimmyr.com/">JimmyR</a>
A href!? Ooo, that's weird. Yes, well remember it as
<anchor h-ref(hypertext reference)="http://theaddress">
Anchor meaning, we're moving the ship's location(navigating) and hypertext just meaning link. Adding the http:// is important because or else it looks for a file called www.jimmyr.com.
<a href="http://www.eliteskills.com/">Poetry Club</a>
Returns
Poetry Club
HTML Structure
The structure of a document is basically:
<html>
<head><title>Whatever Title</title></head>
<body>
This is the main content...
</body>
</html>
This confuses many beginners. You won't get any errors if you don't use this, but it's preferred. The title will show up, not on the page, but the top of the browser window. Do what you were doing before but put all the content between the BODY tag.
HTML Tables
This is another dreaded code for beginners.
<table><tr><td>This is a table</td></tr></table>
This basically says
<make a table><first row><first column>Contents of the table</end column></end row></end table>
So lets make a new table with two rows and three columns.
<table border=1>
<tr><td>Column 1 Row 1</td><td>Column 2 Row 1</td><td>Column 3 Row 1</td></tr>
<tr><td>Column 1 Row 2</td><td>Column 2 Row 2</td><td>Column 3 Row 2</td></tr>
</table>
Well, that's a mess, but simply count the <td>s and the <tr>s and you'll see that there's three TDs in each of the two TRs thus making a table with 2 rows and three columns.
| Column 1 Row 1 | Column 2 Row 1 | Column 3 Row 1 |
| Column 1 Row 2 | Column 2 Row 2 | Column 3 Row 2 |
Now lets make a simple layout with a two column table, the links being on the left and the content being on the right.
<table padding=10><tr><td bgcolor="blue" width=80 valign="top">
<a href="http://www.jimmyr.com/education/">Dmoz</a><br><a href="http://www.jimmyr.com/">Jimmy</a>
</td><td width=210 bgcolor="orange" valign="top">
This is the main content of the page. <b>blah</b> and <i>stuff</i>...
</td></tr></table>
| Dmoz Jimmy | This is the main content of the page. blah and stuff... |
Notice we've added a width,valign, and padding property. Width sets how many pixels wide, so if you were making a real layout, you'd have to make it wider. Valign puts all the content at the top. Bgcolor sets a color for the table.
Well Done
You can now make a basic html site from scratch, for more properties and codes just search "learn html" on google or yahoo. The hardest part is just getting started. See our guide on best free hosting sites to get a .com people can reach you at or check out our hosting a site from your computer article. For a more descriptive free html tutorial, go to w3schools.
Page Generated on: Saturday, May 28th 2005
Last Modified on: Wednesday, June 1st 2005