HTML Tutorial - Getting Started With HTML

by Ben Sinclair
Wednesday, 27th July 2005

This is a tutorial I wrote when I finally got my head around HTML. Hopefully you will find it useful!

The purpose of this tutorial is to teach you the basics on how to create your own Webpages. So here we go...

What is HTML?

HTML stands for the HyperText Markup Language. HTML is the major language for creating websites on the Internet today. Just about every website is created in HTML. HTML files are plain text files, so they can be created and edited on any type of computer... Windows, Mac, UNIX, whatever.

Before You Start

Before you start your page, there are a few things you may need. Firstly, a HTML Editor, but if you don't have one of these, which you probably don't have, you can just use a text editor such as Notepad. That's what I normally use. All that a HTML Editor does is supply you with all the HTML stuff that you can use, but after you study all my tutorials you probably won't need one. But just in case you want to check out the HTML editor that I use from time to time, go to: http://www.coffeecup.com

There are also WYSIWYG (What You See Is What You Get) editors available which are much easier than a text or HTML editor and you hardly even need to know any HTML at all. But I recommend learning the basic of HTML. Some of the more popular WYSIWYG editors are called Microsoft FrontPage and Macromedia Dreamweaver

With HTML you can have bold and italicized, Larger and Smaller, or it could look like Typewriter Text. You can even color it!

What you've just read in text, two paragraphs above, will look like this in HTML:

With HTML you can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look like <tt>Typewriter Text</tt>. You can even <font color="red">color</font> it!

HTML code for this looks like a lot of gobbledygook, doesn't it?.

So what do these "<" and ">" things do and what are they called? They're called "lesser than" and "greater than" and when you place a certain word within these, you are making something known as a HTML Ttag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Most opening tags require a closing tag, but not all do. Tags make up the entire structure of a HTML document.

Here is an example:

<b>This Is Your Text</b>

<b> = Opening Tag
</b> = Closing Tag

Within just about every HTML Tag has its own little settings within it. Here's an example:

<hr width="10%" color="green">

Instead of the plain <hr> we have added some more settings to make it a little more interesting. Each tag has it's own settings. Some settings will only work on certain HTML Tags. You will see this as you read on in this tutorial.

Contents

Now that you know what HTML is, here is what you should expect to read in this tutorial:

Page #2 - Document Structure & Heading Tag

Page #3 - Line Tag & Paragraph Tag

Page #4 - Break Tag & Font Tag

Page #5 - The Bold, Italic And Underlined Tag Linking Text And Images 5

Page #6 - List Tags

Page #7 - Table Tag

Page #8 - Frame Tag

Page #9 - Color Chart

Getting Started

OK, now let's get started with your first webpage. First open up your HTML Editor or Notepad.

Here is an example of a basic HTML Document Structure... Just about every webpage on the Internet is set-up using this structure...

<html>
<head>
<title>This is Ben's Web page</title>
</head>
<body>Body goes here</body>
</html>

Let's explain a little about what everythign does in the above code...
Copy and paste the code example into your Editor. Then save the document as sample.html. HTML webpages should be saved with a .html file extension. Once the sample document is saved, open it in your favourite web browser and you should see your very own, basic of course, webpage. Cool Huh?

Keep reading to find out what you can add to this page.

The Heading Tag

One of the tags that you can use in the body is called a heading tag. There are a total of six Heading Tags.

The first one is called <H1>. This makes your font really big.

The last one is called <H6>. This makes your font really small.

Every heading gets smaller and smaller as you increase the number all the way to six.

The Line Tag

Ever wondered how to get a horizontal line on a webpage? Well this is how.

Just simply write <hr> and this is what it looks like:


You can also change the height and width and color of it by typing this:

<hr width="50%" size="10" color="blue">

Or this:

<hr width="10%" size="4" color="red">

These will give your lines a bit of style. Experiment and see how you go.

Adding Images to Webpages

This is the code to get an image on your page:

<img src="pic.gif">[code]

You can also change the width and height of the image. Also you can get a message in a little box when you put your mouse over the image:

[code]<img src="pic.gif" width="100" height="100" align="center" alt="hello">

Please note that you have to create an image called pic.gif and put it in the same folder as the .html document. Otherwise you get one of those lovely Red X's.

The Paragraph Tag

The paragraph tag looks like this: <p>. Obviously when you add this HTML tag it creates a new paragraph in your text.

You can also align your paragraph by typing this: <p align="center">, <p align="right"> or <p align="left">

And remember to end the paragraph with the closing tag: </p>

Here is an example of a paragraph in HTML code:

<p>Mr Man went for a walk.</p> <p>Then he went home.</p>

And this is what it looks like on the Webpage:

Mr Man went for a walk.

Then he went home.

The Line Break Tag

The break tag looks like this: <br>

Instead of putting the text on a new paragraph, it puts it on the line underneath.

Here is an example of a break in HTML code:

Bob stands up<br>Bob sits down/code]

And this is what it looks like on the page:

[code]Hello people
Bye people

Instead of a white space which would be added by the Paragraph tag it puts it on the line directly underneath.

The Font Tag

The font tag isn't as common as it used to be but it still works. Here is an example of the Font Tag in HTML code:

<font color="red" face="courier new" size="+1">This font's color is red, type is Courier New and size is +1</font>

The Bold, Italic And Underlined Tag

You already know what these tags are from the first page:

Bold Text - <b>

Italic Text - <i>

Underlined Text - <u>

Here's an example:

I like to <i>run</i> and skip.

That would make the text "run" italic.

Linking Text And Images to other Webpages

You can have as many pages on your website as you like. But for people to find them, you need to link the webpages to each other.

This is how you link text to a page:

<a href="page.html">Link Here</a>

This is how you link text to another website:

<a href="http://www.domainname.com">Link Here</a>

This is how you link an image to a page:

<a href="http://www.domainname.com"><img src="pic.gif></a>

And this is how you link to an email message:

<a href="maito:someone@someplace.com">Click here to email me!</a>

And don't forget the </a> at the end of each link.

Replace whatever is in the href="" with the real webpages name which you are linking to.

Changing Background Color and Images

You might like to change the background color of your webpage. This can be done by adding a setting to the <body> tag. This is how you change the background color to a different color:

<body bgcolor="blue">

That would set the background color to blue.

And this is how you change the background to an image:

<body background="pic.gif">

Simple as that. Play around with it.

List Tags

Creating list will allow you to order specific points easily. Here is an example of bullet points in HTML code:

<ul>
<li>red</li>
<li>blue</li>
<li>pink</li>
<li>green</li>
<li>purple</li>
</ul>

And this is what it looks like on the page:
Here is how you make a simple Definition List:

<dl>
<dt>Pavement
<dd>Something used for paths for people to walk on.
<dt>Incredible
<dd>Hard to believe.
<dt>Dangerous
<dd>A possible cause of harm or injury.
</dl>

And this is what it looks like on the page:
Pavement
Something used for paths for people to walk on.
Incredible
Hard to believe.
Dangerous
A possible cause of harm or injury.
Pretty cool huh?

Tables

Now into the mroe advanced stuff...

What are tables used for?

Tables are used to make data a lot easier to interpret or to just give your document a more professional image.

<table border=4>
<tr>
<th>What are tables used for?</th>
</tr>
<tr>
<td>Tables are used to make data a lot easier to interpret or to just give your document a more professional image. </td>
</tr>
</table>

Copy and paste it into your HTML webpage and see how it turns out.

What are tables used for?

Tables are used to make data a lot easier to interpret or to just give your document a more professional image.

Tables are one of the most challenging things to code with HTML. It isn't very hard, it just takes a while to get used to it. Tables start with the <table> tag, and usually contain the border=n(number) setting within the opening tag. If the border=0, than the table's border is invisible. Usually when you do not use the border setting, the table border will become invisible. This is useful when you want to align text in rows and columns, but don't want a table border around it.

border=1 is a thin border, border=2 is a little thicker, border=3 a little more thicker and so on. The table MUST end with a </table> tag, or the table will not appear at all!

And here is the HTML code for a table that has no border:

<table border=0>
<tr>
<td>This table has a border of 0.</td>
</tr>
</table>

This table has a border of 3. It is the same code as above, but you change the <table border=0> to <table border=3>

<table border=3>
<tr>
<td>This table has a border of 3.</td>
</tr>
</table>

Each row within the table is defined by the opening <tr> tag and the </tr> closing tag. Within each table row are table cells, which are defined by the <td> opening and </td> closing tags. Most table rows contain more than one cell. Many times, you will need a heading for a column of cells of the first row. To do this, you will use the <th> opening and </th> closing tag. The table heading tag makes the text in that cell BOLD and CENTERED. You only need to use the heading cells when necessary.

Here is an example of a table with multiple rows and columns... Copy and paste it into your HTML page to see what it looks like.

<table border=2>
<tr>
<th>Heading A</th><th>Heading B</th><th>Heading C</th>
</tr>
<tr>
<td>Cell A</td><td>Cell B</td><td>Cell C</td>
</tr>
<tr>
<td>Cell D</td><td>Cell E</td><td>Cell F</td>
</tr>
</table>

Here is another example:

<table border=2>
<tr>
<th>Heading A</th><th>Heading B</th><th>Heading C</th>
</tr>
<tr>
<td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td>
</tr>
<tr>
<td>Cell E</td><td>Cell F</td>
</tr>
</table>

Notice how the rowspan=2 settinge was added. This allows that cell to span two rows. If you want a cell to span more than one column then use the colspan=n setting.

Also, you may wish to use the ALIGN and VALIGN attributes to align the contents of cells.

If you wish to change the horizontal alignment of the contents of a certain cell, add ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT to the opening <td> tag.

If you wish to change the vertical alignment of the contents of a cell, use the VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM attributes. You may also want to try out the WIDTH=n% attribute, to change the width of a table or a cell.

Frames

Even more complicated! This is a little tutorial explaining how frames works... I recommend reading more into frames after reading this.

What are Frames?

Frames are a way to divide the browser screen into two or more separate pages. This will allow easier navigation under some circumstances. Often frames are used to add a side menu bar to a website where the constant back and forth clicking would become awkward in a single page.

In the following example, the side menu bar allows the user to just click in the side menu bar, and their choice loads into the main window.

Example: Side Menu Bar

This is what the index.html will look like:

<html>
<head>
<title>title here</title>
</head>

<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>

<noframes>
Your browser does not support frames.
<a href="frameless_main.html">Please visit the frameless page.</a>
</noframes>

</html>

Notice that there is no actual <body> coding. It is common courtesy, however, to place a <noframes> area after the frameset, but this is completely optional. This <noframes> area only displays in browsers that are not able to show frames. If you create a special page for those without frames, you may be doubling your work. It is best, with effort and practice, to create a page, in this case, main.html, that will work in both frames and noframes browsers.

Then your noframes would read:

<noframes>
Your browser does not support frames.
<a href="main.html">Please visit the frameless page.</a>
</noframes>

About <frameset> and <frame>

The frameset tag is used to declare multiple frames. As you can see in our first example, the menu bar side, there was one frameset. It read:

<frameset cols="15%,85%">

This tells the browser that we are creating a column of framed pages, the first one is to take up 15% of the total browser screen, and the second is to take up 85% of the total browser screen. Then we introduced <frame>, which is what actually loads the pages. Each frame must have a src, which is short for source, such as src="some_page.html". So, because we used two framed areas within the frameset, we need two frame tags, each of them to load a page.

<frameset cols="15%,85%">
<frame src="menu_bar.html' name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>

Replace whatever is located in the src="" with an actual HTML webpage you created... using frames will allow you to show 2 or more webpages on the one webpage.

If we would like to add a third column, we would need to add a third size definition in the cols(columns) so that all the columns would add up to 100% and add another frame tag inside the frameset.

Here is an example:

<frameset cols="15%,70%,15%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
<frame src="side_bar.html" name="rightwindow">
</frameset>

Likewise, we can use a rows definition instead of a columns definition. If we wanted the menu to be a bottom menu bar, we would do something like this:

<frameset rows="80%,20%">
<frame src="main.html" name="mainwindow">
<frame src="menu_bar.html" name="bottommenu">
</frameset>

If you wanted the menu at the top, just switch it around:

<frameset rows="20%,80%">
<frame src="menu_bar.html" name="topmenu">
<frame src="main.html" name="mainwindow">
</frameset>

Special Linking with Frames

Okay, so let's go back to our original example, the side menu bar.

Here is the original source for index.html

<html>
<head>
<title>title here</title>
</head>

<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>

</html>

Now we are going to need to create our menu_bar.html page, and our main.html page. Each of these must be edited separately. Both pages are almost exactly like a regular HTML page, except that there is an advanced linking option called the target attribute. If you added regular links in menu_bar.html and clicked on them, each page would load into the small, side frame! To get around this, you'll want to add a target attribute to each link that you want to load in the main window.

Here is the source for menu_bar.html:

<a href="cats.html" target="mainwindow">Load cats</a>
<a href="dogs.html" target="mainwindow">Load dogs</a>
<a href="birds.html" target="mainwindow">Load birds</a>

When you click on any of the above links, they will end up loading in the larger window instead of the smaller window.

If you wanted to change the menu, to say cats instead of dogs from the main window, you could do something like <a href="cats.html" target="sidemenu">Load cats into the side menu bar</a> in main.html.

There are three important target attributes you should be aware of:
Special settings for the <frame> tag

There are two special settingss you should be aware of for the <frame> tag.

Let's go back to the side menu example.

<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>

If you wanted to lock in the sidemenu frame (the menu bar frame) so that the user couldn't resize it, add the words noresize to the frame you want to lock:

<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu" noresize>
<frame src="main.html" name="mainwindow">
</frameset>

This does not prevent you from changing the pages inside the windows, it just prevents the user from modifying the frame size when the page loads.

You can also have no frame border by typing in this:

<frameset cols="15%,85%" frameborder="NO" border="0">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>

The other useful attribute is scrolling. If you always want a scrollbar to appear in the main window. Add scrolling="yes". If you don't want a scrollbar? Add scrolling="no". If it doesn't bother you either way then add scrolling="auto".

Here is an example:

<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu" noresize>
<frame src="main.html" name="mainwindow" scrolling="yes">
</frameset>

More Advanced Frames

You can embed a frameset anywhere there is a frame if you want to split that section further. Want a special, fixed area for your logo graphic at the top of the menu bar?

Try this:

<frameset cols="15%,85%">
<frameset rows="20%,80%">
<frame src="logo.html" noresize>
<frame src="menu_bar.html" name="sidemenu" noresize>
</frameset>
<frame src="main.html" name="mainwindow" scrolling="yes">
</frameset>

Here is something to think about. How would you get four even frames in two rows?

You could do:

<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>

Three even columns?

<frameset cols="33%,33%,33%">
<frame>
<frame>
<frame>
</frameset>

How about three rows, the first one 1/4 of the screen, the second 1/2 of the screen, and the third 1/4 of the screen?

<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame>
</frameset>

Same as above, but the very bottom frame split into two equal columns? old...

<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame><-- replace this
</frameset>

new...

<frameset rows="25%,50%,25%">
<frame>
<frame>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
</frameset>

There you are! Now you know how to create frames! Like I said at the top of the page, read more into frames for mroe information.

You might remember us added some settigns such as color="blue" or color="green". But how would you get a light blue or a dark green? Easy - they are called color codes.

The color codes consit of both numbers and letters. here's an example: color="#0000FF". That would display as the color blue.

Check out this free color chart. Mouse over a color you want and ti will give you the color code for that color.

The codes appear in numbers and letters rather than just the name of the color itself. With HTML you have the choice to either write the name of the color or use the HTML code. However, you will find that the HTML code will be more accurate.

The End

That's it. In this tutorial you learnt some of the basic tags in HTML. I recommend you play around with the code I gave you. You should also read some more advanced HTML tutorials to learn more. Maybe even bye a book from the store or borrow a book from the library. Good luck!

Here are some HTML Tags That Have Been Used In Previous Tutorials

 Name

 Opening Tag

 Closing Tag

 HTML Tag:

 <html>

</html> 

 Head Tag:

 <head> 

 </head> 

Title Tag:

<title> 

 </title>

Body Tag:

 <body>

</body>  

Paragraph Tag:

 <p>

</p> 

 Break Tag:

 <br>

 No Ending Tag

 Heading Tags:

<h1> 

 </h1>

 Font Color Tag:

 <font color="red">

 </font>

Font Size Tag:

 <font size=+1>

 </font>

Font Type Tag:

 <font face="arial">

 </font>

 Line Tag:

 <hr>

No Ending Tag 

 Bold Text Tag:

 <b>

 </b>

Italicized Text Tag:

 <i>

</i> 

 Underlined Text Tag:

 <u>

 </u>

 Link Tag:

 <a href="page.html">

 </a>

Backgound Tag:

 <body bgcolor="red">

 </body>

Table Tag:

 <table>

</table> 

Frame Tag:

 <frame>

</frame> 

Ben Sinclair is the webmaster of Webmaster-Resources101.com, Webmaster-Forums101.com and DevTutors.com
View the original article HTML Tutorial - Getting Started With HTML