Welcome to HTML Tutorial

may have noticed the above example uses a method attribute. This attribute specifies the HTTP method to use when the form is submitted.
Possible values are:
  • get (the form data is appended to the URL when submitted)
  • post (the form data is not appended to the URL)
In HTML, the original purpose of tables was to present tabular data. Although they are still used for this purpose today, many web designers tended to use tables for advanced layouts. This is probably due to the restrictions that HTML has on layout capabilities - it wasn't really designed as a layout language.
Anyway, whether you use tables for presenting tabular data, or for page layouts, you will use the same HTML tags.
Basic table tagsIn HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.
HTML Code:
<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:
Table cell 1Table cell 2 You'll notice that we added a border attribute to the table tag. This particular attribute allows us to specify how thick the border will be. If we don't want a border we can specify 0 (zero). Other common attributes you can use with your table tag include width, width, cellspacing and cellpadding.
You can also add attributes to the tr and td tags. For example, you can specify the width of each table cell.
Widths can be specified in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:
Table cell 1Table cell 2 Table HeadersMany tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.
Most browsers display table headers in bold and center-aligned.
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:
Table headerTable header Table cell 1Table cell 2 ColspanYou can use the colspan attribute to make a cell span multiple columns.
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:
Table header Table cell 1Table cell 2 RowspanRowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

This results in:
Table headerTable cell 1 Table cell 2 ColorYou can apply color to your table using CSS. Actually, you can apply any applicable CSS property to your table - not just colors. For example, you can use CSS to apply width, padding, margin, etc
HTML Code:
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

This results in:
Table headerTable cell 1 Table cell 2

Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page. If used tastefully, image maps can be really effective. If not, they can potentially confuse users.
To create an image map:
  1. First, you need an image. Create an image using the usual method (i.e. via an image editor, then save as a gif or jpeg into your website's image folder).
  2. Use the HTML map tag to create a map with a name. Inside this tag, you will specify where the clickable areas are with the HTML area tag
  3. Use the HTML img tag to link to this image. In the img tag, use with the usemap attribute to define which image map to use (the one we just specified).
Image Map ExampleHTML Code:
<img src ="/pix/mueller_hut/mueller_hut_t.jpg"
width="225" height="151" border="0"
alt="Mueller Hut, Mount Cook, and I"
usemap ="#muellermap" />

<map id ="muellermap"
name="muellermap">
<area shape ="rect" coords ="90,80,120,151"
href ="javascript:alert('Me');"
alt="Me" />
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
href ="http://en.wikipedia.org/wiki/Mount_Cook"
alt="Mount Cook" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
href ="http://www.natural-environment.com/places/mueller_hut.php"
alt="Mueller Hut" />
</map>

This results in:
OK, compared to our previous lessons, this code is looking quite complex. However, once you really study it, it is not that complex. All we are doing, is specifying an image, then we are creating a map with coordinates. The hardest part is getting all the coordinates right.
In our example, we use the area in conjunction with the shape and coord attributes. These accept the following attributes:
shapeDefines a shape for the clickable area. Possible values:
  • default
  • rect
  • circle
  • poly
coordsSpecifies the coordinates of the clickable area. Coordinates are specified as follows:
  • rect: left, top, right, bottom
  • circle: center-x, center-y, radius
  • poly: x1, y1, x2, y2, ...

 In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content.
Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags are nested with a frameset tag.
So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together.
Creating FramesTwo Column FramesetHTML Code:
The frameset (frame_example_frameset_1.html):
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>

The left frame (frame_example_left.html):
<html>
<body >
<p>This is the left frame (frame_example_left.html).</p>
</body>
</html>

The right frame (frame_example_right.html):
<html>
<body >
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>

View the result Add a Top FrameYou can do this by "nesting" a frame within another frame.
HTML Code:
The frameset (frame_example_frameset_2.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>

The top frame (frame_example_top.html):
<html>
<body >
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</html>

(The left and right frames don't change)
View the result Remove the BordersYou can get rid of the borders if you like. Officially, you do this using frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.
HTML Code:
The frameset (frame_example_frameset_3.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>

(The left, right, and top frames don't change)
View the result Load Another FrameMost websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).
This is achieved using the name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target attribute.
Tip: You could use base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.
HTML Code:
The frameset (frame_example_frameset_4.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left_2.html" />
<frame name="content" src ="/html/tutorial/frame_example_yellow.html" />
</frameset>
</html>

The left frame (frame_example_left_2.html):
<html>
<body >
<p>This is the left frame (frame_example_left_2.html).</p>
<p>
<a target="content" href="frame_example_yellow.html">Yellow</a><br />
<a target="content" href="frame_example_lime.html">Lime</a>
</p>
</body>
</html>

The yellow frame (frame_example_yellow.html):
<html>
<body >
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>

The lime frame (frame_example_lime.html):
<html>
<body >
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>

View the result
Tag ReferenceHere's some more info on the above tags.
The frameset TagIn your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.
AttributeDescription rowsSpecifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100% colsSpecifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100% The frame TagFor each frame you want to display, you specify a frame tag. You nest these within the frameset tag.
AttributeDescription nameAssigns a name to a frame. This is useful for loading contents into one frame from another. longdescA long description - this can elaborate on a shorter description specified with the title attribute. srcLocation of the frame contents (for example, the HTML page to be loaded into the frame). noresizeSpecifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not). scrollingWhether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values:
  • auto
  • yes
  • no
frameborderWhether the frame should have a border or not. Possible values:
  • 1 (border)
  • 0 (no border)
marginwidthSpecifies the margin, in pixels, between the frame's contents and it's left and right margins. marginheightSpecifies the margin, in pixels, between the frame's contents and it's top and bottom margins. The noframe TagThe noframes tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.
HTML Code:
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<noframes>
<body>Your browser doesn't support frames.
Therefore, this is the noframe version of the site.</body>
</noframes>
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>

HTML entities (also known as character entity references) enable you to use characters that aren't supported by the document's character encoding or your keyboard. For example, you can type &copy; to output a copyright symbol.
You can also use numeric character references. Numeric character references can be defined with either a decimal or hexadecimal value (although decimal is more common). The numeric character reference for the copyright symbol is &#169; (decimal) and &#xA9; (hexadecimal).
A key benefit that numeric character references have over entities is that they can be used to specify any unicode character, whereas entities can only specify some.
Entity ExampleMany web developers use entities for outputing HTML code to the browser (or at least, outputing one of the characters used by the HTML language).
Lets say you have a website about web design. And lets say you want to display the tag required for creating a horizontal rule 20% wide. Well, if you type the tag (<hr width="20%" />) into your code, the browser is simply going to render it as it should be (rather than output the actual code example). Like this...
... you see, instead of displaying the code, the browser rendered the code.
What you should have typed in is this:
&lt;hr width="50%" /&gt; The &lt; replaces the < and the &gt; replaces the >.

You may have noticed that many websites have multiple columns in their layout - they are formatted like a magazine or newspaper. Many websites achieved this HTML layout using tables.
HTML layout with tablesTables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table. This table has a different column or row for each main section.
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the header and footer column spans both columns (using the colspan attribute):
This HTML code...
<table width="400px" border="0">
<tr>
<td colspan="2" >
Header
</td>
</tr>
<tr>
<td >
Left menu<br />
Item 1<br />
Item 2<br />
Item 3...
</td>
<td >
Main body
</td>
</tr>
<tr>
<td colspan="2" >
Footer
</td>
</tr>
</table>

produces this layout...
Header Left menu
Item 1
Item 2
Item 3... Main body Footer HTML layout with DIV, SPAN and CSSAlthough we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.
The div element is a block level element used for grouping HTML elements. Once grouped, formatting can be applied to the div element and everything contained within it. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.
Using our previous HTML layout, we can use DIV and CSS to achieve a similar effect. The following code...
<div >
<div >
Header
</div>
<div >
Left menu<br />
Item 1<br />
Item 2<br />
Item 3...
</div>
<div >
Main body
</div>
<div >
Footer
</div>
</div>

produces this layout...
Header Left menu
Item 1
Item 2
Item 3... Main body Footer One change to this that I'd recommend is that you place the CSS into an external style sheet.
One major benefit of using CSS is that, if you place your CSS in a separate location (i.e. an external style sheet), your site becomes much easier to maintain.


HTML is quite limited when it comes to the appearance of its elements. This is not so good if you're trying to give a website a unique look and feel, or you're trying to adhere to a corporate identity.
But, never fear - CSS is here!
CSS stands for Cascading Style Sheets, and its purpose is to enable web authors/designers to apply styles across their websites. With CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).
Example of Style Sheet UsageHTML Code:
<p >HTML Styles with CSS</p> This results in:
HTML Styles with CSSThe above code is an example of inline styles. It is called inline because we declared the styles within the HTML tag itself. We could also use embedded styles or even external styles.
Embedded styles refers to declaring all styles in one place (usually the head of the document). Each element then knows to use the style that was previously declared.
External styles refers to creating a separate file that contains all style information. This file is then linked to from as many HTML pages as you like - even the whole site.

A script is a small, embedded program that can add interactivity to your website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu.
Because HTML doesn't actually have scripting capability, you need to use the <script> tag to generate a script, using a scripting language.
The <script> tags tell the browser to expect a script in between them. You specify the language using the type attribute. The most popular scripting language on the web is JavaScript.
Adding a ScriptYou can specify whether to make a script run automatically (as soon as the page loads), or after the user has done something (like click on a link).
In either case, a generally accepted convention is to place your scripts between the <head></head> tags. This ensures that the script is ready to run when it is called.
HTML Code:
<script >
alert("I am a script. I ran first!")
</script>

This would open a JavaScript alert as soon as the page loads.
Triggering a ScriptIn many cases, you won't want the script to run automatically. You might only want the script to run if the user does something (like hover over a link), or once the page has finished loading.
These actions are called intrinsic events (events for short). There are 18 pre-defined intrinsic events that can trigger a script to run. You use event handlers to tell the browser which event should trigger which script. These are specified as an attribute within the HTML tag.
Lets say you want a message to display in the status bar whenever the user hovers over a link. The act of hovering over the link is an event which is handled by the onmouseover event handler. You add the onmouseover attribute to the HTML tag to tell the browser what to do next.
HTML Code:
Treat yourself to a <a href="http://www.great-workout.com/killer-ab-workout.cfm" onMouseover="window.status='Go on, you know you want to'; return true">Killer Ab Workout</a> This results in:
Treat yourself to a Killer Ab Workout Status bar messages aren't supported by all browsers. If you see no change to the status bar, it's likely that your browser doesn't support this piece of JavaScript.
Before we move on, check out the list of intrinsic events as specified by HTML 4.01
Calling an External ScriptYou can also place your scripts into their own file, then call that file from your HTML document. This is useful if you want the same scripts available to multiple HTML documents - it saves you from having to "copy and paste" the scripts into each HTML document. This makes it much easier to maintain your website.
HTML Code:
<script src="external_scripts.js"></script> Hide Scripts from Older BrowsersAthough most (if not all) browsers these days support scripts, some older browsers don't. If a browser doesn't support JavaScript, instead of running your script, it would display the code to the user. To prevent this from happening, you can simply place HTML comments around the script. Older browsers will ignore the script, while newer browsers will run it.
HTML Code:
<script >
<-- Hide from older browsers
alert("I am a script. I ran first!")
Unhide -->
</script>

Alternate Information for Older BrowsersYou can also provide alternative info for users whose browsers don't support scripts (and for users who have disabled scripts). You do this using the <noscript> tag.
HTML Code:
<script >
<-- Hide from older browsers
alert("I am a script. I ran first!")
Unhide -->
</script>

<noscript>
You need JavaScript enabled to view this page.
</noscript>

Set a Default Scripting LanguageYou can specify a default scripting language for all your script tags to use. This saves you from having to specify the language everytime you use a script tag within the page.
HTML Code:
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />



This lesson discusses HTML website templates (basically a prebuilt website where you can fill in the blanks).
One question many people ask before learning HTML is "Do I have to be good at design?".
The answer to that is "Not at all!".
OK, if you want a career building websites, it can help if you are a good designer. But, this is not essential. Many web developers either outsource their design to a professional designer, or purchase HTML website templates. They prefer to concentrate on building the actual website rather than designing the website.
An HTML website template is basically a prebuilt website, where you, the developer, can modify as required. All the HTML/CSS code and images are included in the template, and a good template will be compatible with most modern browsers. Some website templates come with a flash version and a non-flash version (i.e. HTML version).
Benefits of Using a Website TemplateHere are some benefits of using an HTML website template:
  • Speeds up development time - you don't need to spend hours designing your website, then converting that into code, then checking for browser compatibility etc.
  • More professional looking website - unless you're a very good designer, it will be difficult to achieve a great looking website every time. And, if you're not a good designer, your websites will reflect this.
  • Learning - using an HTML website template is a great way to learn from other developers. Once you've downloaded the template, you have full access to the code, so you can learn the tricks the developers used in achieving an effect.
  • Cheaper & easier than hiring a professional designer.
Free Website TemplatesQuackit provides a large selection of free website templates. You can choose from a list of simple templates, or more advanced templates depending on your level of comfort and the layout that you need   Knowledge of website hosting is essential if you plan to make your website available for the world to see.
It's one thing to build a website using HTML, but so far in this tutorial, everything we've done has been on our own local machine. Unless you have your own web server with a permanent high-speed connection to the Internet, you'll need a website hosting provider to host your website.
If you already have a hosting provider that's great! But, if you don't, you'll need to start looking for one.
Basic Web Hosting ConceptsWhether you already have a web host or you're just beginning, you should know at least a little bit about the following hosting concepts:
It can be very difficult for a beginner to find information about this. Furthermore, there are many experienced web developers who don't know exactly what it is their web host does. I recommend that you make some effort to become familiar with the basic web hosting concepts, such as those outlined above.