HTML Tutorial

HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites that allow our users to interact with it.
An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from a preset options.
In HTML, a form is defined using the <form></form> tags. The actual form elements are defined between these two tags.

The Input Tag

This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.

Text

Text fields are used for when you want the user to type text or numbers into the form.

<input type="text" />

Radio Buttons

Radio buttons are used for when you want the user to select one option from a pre-determined set of options.

<input type="radio" name="lunch" value="pasta" /><br />
<input type="radio" name="lunch" value="rissotto" />

Checkboxes

Checkboxes are similar to radio buttons, but enable the user to make multiple selections..

<input type="checkbox" name="lunch" value="pasta" /><br />
<input type="checkbox" name="lunch" value="rissotto" />

Submit

The submit button allows the user to actually submit the form.

<input type="submit" />

Select Lists

A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.
The select list is created using the select in conjunction with the option tag.

<select>
  <option value ="sydney">Sydney</option>
  <option value ="melbourne">Melbourne</option>
  <option value ="cromwell">Cromwell</option>
  <option value ="queenstown">Queenstown</option>
</select>

Form Action

Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.
Creating an action page is outside the scope of this tutorial. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.
You nominate an action page with the action attribute.
Example HTML Code:

<form action="/html/tags/html_form_tag_action.cfm" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>

This results in:

Oh, one last thing. You 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)

Providing this attribute is optional. If you don't provide it, the method will be post.

HTML Tables

<table>
<tr>
<td> this is first column  </td>
<td> this is my column second column </td>
</tr>
</table>



this is first column 
this is second column

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

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 Frames

Two Column Frameset

HTML Code:

The frameset (frame_example_frameset_1.html):
The left frame (frame_example_left.html):
The right frame (frame_example_right.html):

<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>
</body>
</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>

Add a Top Frame

You can do this by "nesting" a frame within another frame.
HTML Code:

The frameset (frame_example_frameset_2.html):
The top frame (frame_example_top.html):
(The left and right frames don't change)

<html>
<body style="background-color:maroon">
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</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>

Remove the Borders

You 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):
(The left, right, and top frames don't change)

<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>

Load Another Frame

Most 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):
The left frame (frame_example_left_2.html):
The yellow frame (frame_example_yellow.html):
The lime frame (frame_example_lime.html):

<html>
<body style="background-color:Lime">
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>

<html>
<body style="background-color:yellow">
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>

<html>
<body style="background-color:green">
<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>

<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>

Tag Reference

Here's some more info on the above tags.

The frameset Tag

In your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.

Attribute	Description
rows	Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100%
cols	Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100%

The frame Tag

For each frame you want to display, you specify a frame tag. You nest these within the frameset tag.

Attribute	Description
name	Assigns a name to a frame. This is useful for loading contents into one frame from another.
longdesc	A long description - this can elaborate on a shorter description specified with the title attribute.
src	Location of the frame contents (for example, the HTML page to be loaded into the frame).
noresize	Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not).
scrolling	Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values: auto yes no
frameborder	Whether the frame should have a border or not. Possible values: 1 (border) 0 (no border)
marginwidth	Specifies the margin, in pixels, between the frame's contents and it's left and right margins.
marginheight	Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins.

The noframe Tag

The 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>

                         <<---Previous