Introduction to HTML

LANGUAGE REFERENCES
HyperText Markup Language (HTML) is a markup language designed for the creation of web pages with hypertext and
other information to be displayed in a web browser. HTML is used to structure information denoting certain text as
headings, paragraphs, lists and so on and can be used to describe, to some degree, the appearance and semantics of
a document. HTML's grammar structure is the HTML DTD that was created using SGML syntax.
Markup Language combines text and extra information about the text. The extra information, for example about the text's
structure or presentation, is expressed using markup, which is intermingled with the primary text. The best-known markup
language in modern use is HTML (HyperText Markup Language), one of the foundations of the World Wide Web.
Web page or webpage is a resource on the World Wide Web, usually in HTML/XHTML format with hypertext links to
enable navigation from one page or section to another. Varying filename extensions can be used, such as .htm, .html, or
.php to name a few. Web pages often use graphic files to provide illustration. A web page is displayed using a web
browser, which can have a Graphical User Interface, like Internet Explorer, Mozilla Firefox, or Opera, or can have a
Command Line Interface, like Lynx.
Hypertext is a user interface paradigm for displaying documents which, according to an early definition (Nelson 1970),
"branch or perform on request." The most frequently discussed form of hypertext document contains automated crossreferences to other documents called hyperlinks. Selecting a hyperlink causes the computer to display the linked
document within a very short period of time.
Web browser is a software application that enables a user to display and interact with text, images, and other information
typically located on a web page at a website on the World Wide Web or a local area network. Text and images on a web
page can contain hyperlinks to other web pages at the same or different websites. Web browsers allow a user to quickly
and easily access information provided on many web pages at many websites by traversing these links.
Uniform Resource Locator (URL) is a string of characters conforming to a standardized format, which refers to a
resource on the Internet (such as a document or an image) by its location. For example, the URL of this page on
Wikipedia is http://en.wikipedia.org/wiki/Uniform_Resource_Locator.
An HTTP URL, commonly called a web address, is usually shown in the address bar of a web browser.
Standard Generalized Markup Language (SGML) is a metalanguage in which one can define markup languages for
documents. SGML is a descendant of IBM's Generalized Markup Language (GML), developed in the 1960s by Charles
Goldfarb, Edward Mosher and Raymond Lorie (whose surname initials also happen to be GML). SGML should not be
confused with the Geography Markup Language (GML) developed by the Open GIS Consortium; cf, or the Game Maker
scripting language, GML.
BRIEF HISTORY
Tim Berners-Lee, who pioneered the use of hypertext for sharing information, created the first web browser, named
WorldWideWeb, in 1990 and introduced it to colleagues at CERN in March 1991. Since then the development of web
browsers has been inseparably intertwined with the development of the web itself.
The explosion in popularity of the web was triggered by NCSA Mosaic which was a graphical browser running originally on
Unix but soon ported to the Apple Macintosh and Microsoft Windows platforms. Version 1.0 was released in September
1993, and was dubbed the killer application of the Internet. Marc Andreessen, who was the leader of the Mosaic team at
NCSA, quit to form a company that would later be known as Netscape Communications Corporation.
NCSA Mosaic was originally designed and programmed for Unix's X Window System by Marc Andreessen and Eric Bina
at NCSA. Development of Mosaic began in December 1992. Version 1.0 was released on April 22, 1993, followed by two
maintenance releases during summer 1993

Markup element types

Structural markup. Describes the purpose of text. For example, : <h2>Golf</h2>

directs the browser to render "Golf" as a second-level heading, similar to the "Markup element types" title at the
start of this section. Structural markup does not denote any specific rendering, but most web browsers have
standardised on how elements should be formatted. By default, for example, headings like these will appear in
large, bold text. Further styling should be done with Cascading Style Sheets (CSS).
Presentational markup. Describes the appearance of the text, regardless of its function.
For example, <b>boldface</b>
will render "boldface" in bold text. In the majority of cases, using presentational markup is inappropriate, and
presentation should be controlled by using CSS. In the case of both <b>bold</b> and <i>italic</i> there are
elements which usually have an equivalent visual rendering but are more semantic in nature, namely
<strong>strong emphasis</strong> and <em>emphasis</em> respectively. It is easier to see how an aural user
agent should interpret the latter two elements. Note that most presentational markup elements have become
deprecated under the HTML 4.0 specification, in favour of CSS based style design.
Hypertext markup. Links parts of the document to other documents.
For example : <a href="http://wikipedia.org/">Wikipedia</a>

HTML element indicates structure in an HTML document. More specifically, it is an SGML element that meets the
requirements of one or more of the HTML Document Type Definitions (DTDs). HTML elements generally consist of three
parts: a start tag marking the beginning of an element, some amount of content, and an end tag. Elements may represent
headings, paragraphs, hypertext links, lists, embedded media, and a variety of other structures.

Many HTML elements include attributes in their start tags, defining desired behavior. The end tag is optional for many
elements; in a minimal case, an empty element has no content or end tag. There are a few elements that are not part of
any official DTDs, yet are supported by some browsers and used by some web pages. Such elements may be ignored or
displayed improperly on browsers not supporting them. Informally, HTML elements are sometimes referred to as "tags"
(an example of synecdoche), though many prefer the term tag strictly in reference to the semantic structures delimiting the
start and end of an element.
HTML Basic Structure
HTML THE FIRST AND LAST TAGS IN A DOCUMENT SHOULD ALWAYS BE THE HTML TAGS. THESE ARE THE
TAGS THAT TELL A WEB BROWSER WHERE THE HTML IN YOUR DOCUMENT BEGINS AND ENDS. THE
ABSOLUTE MOST BASIC OF ALL POSSIBLE WEB DOCUMENTS IS: <HTML>
</HTML>

HEAD. THE HEAD TAGS CONTAIN ALL OF THE DOCUMENT'S HEADER INFORMATION. WHEN I SAY "HEADER," I
DON'T MEAN WHAT APPEARS AT THE TOP OF THE BROWSER WINDOW, BUT THINGS LIKE THE
DOCUMENT TITLE AND SO ON. SPEAKING OF WHICH...

TITLE. THIS CONTAINER IS PLACED WITHIN THE HEAD STRUCTURE. BETWEEN THE TITLE TAGS, YOU SHOULD
HAVE THE TITLE OF YOUR DOCUMENT. THIS WILL APPEAR AT THE TOP OF THE BROWSER'S TITLE BAR,
AND ALSO APPEARS IN THE HISTORY LIST. FINALLY, THE CONTENTS OF THE TITLE CONTAINER GO
INTO YOUR BOOKMARK FILE, IF YOU CREATE A BOOKMARK TO A PAGE.

BODY. BODY COMES AFTER THE HEAD STRUCTURE. BETWEEN THE BODY TAGS, YOU FIND ALL OF THE STUFF
THAT GETS DISPLAYED IN THE BROWSER WINDOW. ALL OF THE TEXT, THE GRAPHICS, AND LINKS, AND
SO ON -- THESE THINGS OCCUR BETWEEN THE BODY TAGS. WE'LL GET TO WHAT HAPPENS THERE
STARTING WITH THE NEXT CHAPTER.
So, putting everything we've covered thus far into one file, we have:
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Basic Tags
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest
heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line
break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
Comment Tags
If you want to leave yourself notes in an HTML document, but don't want those notes to show up in the browser
window, you need to use the comment tag. To do that, you would do the following:
<!-- Hi, I'm a comment. -->
Your note would go where the text Hi, I'm a comment. appears. Yes, you do need an exclamation point after the
opening bracket, but not before the closing bracket. That's the way the standard is written
Text Formatting Tags
Tag

Description

<b>

Defines bold text

<big>

Defines big text

<em>

Defines emphasized text

<i>

Defines italic text

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<ins>

Defines inserted text

<del>

Defines deleted text

<s>

Deprecated. Use <del> instead

<strike>

Deprecated. Use <del> instead

<u>

Deprecated. Use styles instead

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.
To display a less than sign (<) in HTML, we have to use a character entity.
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we
want the browser to actually display these characters we must insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon
(;).
To display a less than sign in an HTML document we must write: &lt; or &#60;
The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all
browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.
Non-breaking Space
The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If
you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.
The Most Common Character Entities:
Result

Description

Entity Name

Entity Number

non-breaking space

&nbsp;

&#160;

<

less than

&lt;

&#60;

>

greater than

&gt;

&#62;

&

ampersand

&amp;

&#38;

"

quotation mark

&quot;

&#34;

'

apostrophe

&apos; (does not work in IE)

&#39;

Some Other Commonly Used Character Entities:

Result

Description

Entity Name

Entity Number

cent

&cent;

&#162;

pound

&pound;

&#163;

yen

&yen;

&#165;

section

&sect;

&#167;

copyright

&copy;

&#169;

registered trademark

&reg;

&#174;

multiplication

&times;

&#215;

division

&divide;

&#247;

The HTML <font> Tag

The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML.Even if a lot of people
are using it, you should try to avoid it, and use styles instead.

<font color="red"> Sample Text </font>

Font Attributes

Attribute

Example

Purpose

Size="number"

size="2"

Defines the font size

Size="+number"

size="+1"

Increases the font size

size="-number"

size="-1"

Decreases the font size

face="face-name"

face="Times"

Defines the font-name

color="color-value"

color="#eeff00"

Defines the font color

color="color-name"

color="red"

Defines the font color

The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).
The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of
HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.
The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src
attribute is the URL of the image you want to display on your page.
The syntax of defining an image:

<img src="url">
The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images"
on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser puts the image where the image tag occurs in the document. If you put an image tag between two
paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined
text:

<img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser
will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on
a page, to improve the display and usefulness of your document for people who have text-only browsers.
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a
hexadecimal number, an RGB value, or a color name:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background
The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of
the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the
entire browser window.
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second line above).
Note: If you want to use a background image, you should keep in mind:
Will the background image increase the loading time too much?
Will the background image look good with other images on the page?
Will the background image look good with the text colors on the page?
Will the background image look good when it is repeated on the page?
Will the background image take away the focus from the text?
Basic Notes - Useful Tips
The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML
(HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations.
Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).
The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and
the words between the open and close of the anchor tag will be displayed as a hyperlink.

The Target Attribute

With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump
directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below
is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line
below defines a named anchor:

<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.
To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:
<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list
starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

Coffee
Milk

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl>
tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.
List Tags
Tag

Description

<ol>

Defines an ordered list

<ul>

Defines an unordered list

<li>

Defines a list item

<dl>

Defines a definition list

<dt>

Defines a definition term

<dd>

Defines a definition description

Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data
cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain
text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1">
<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>

How it looks in a browser:

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

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful,
but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>
</table>
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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>

How it looks in a browser:

Heading

Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

How it looks in a browser:

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

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

How it looks in a browser:

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

Basic Notes - Useful Tips

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change
in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML
tutorial.
Table Tags
Tag

Description

10

<table>

Defines a table

<th>

Defines a table header

<tr>

Defines a table row

<td>

Defines a table cell

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows and colspan to span multiple columns.
Note: if you would like to place headers at the top of your columns, use the <th> tag as shown below. By default these
headers are bold to set them apart from the rest of your table's content.
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Column 1
Row 1 Cell 1

Column 2

Column 3

Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Cell Padding and Spacing

With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing
defines the width of the border, while padding represents the distance between cell borders and the content within. Color
has been added to the table to emphasize these attributes.
HTML Code:
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 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>
The FORM Tag
You've probably been wondering how the browser knows where a form begins and ends. For that matter, how does the
browser know where to send the data? Yes, of course, to the CGI program, but... where is that program located? The data
has to be sent to a specific location.
This is accomplished by using the <FORM> tag. This tag has two attributes which must be used if the form is to have any
prayer of working correctly. The attributes are METHOD and ACTION.
Here's what an empty form would look like:
<FORM method="post" action="/cgi-bin/program1">
</FORM>
METHOD attribute has two possible values: GET and POST. If you want the data to go from the browser to the CGI
program, as discussed below, then use the method POST. I'm not even sure what GET does, to be honest, but as soon as
I figure it out I'll explain it (briefly) here.

11

ACTION attribute contains the URL of the CGI program which processes the data sent by the browser. In the example
above, the program (program1) resides in the cgi-bin directory of the server which contains the form itself. The value of
ACTION can be either a relative or a full URL.
Any tag which is allowed inside of the <BODY> container is allowed inside a form. Headings, paragraphs, lists, tables,
images, links-- anything and everything goes. In addition, there are certain tags which are allowed to exist inside a form,
and nowhere else.
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
<input>
<input>
</form>
Input Objects
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly
used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute
defines the name of the file to send the content to. The file defined in the action attribute usually does something with the
received input.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

12

Textarea Object
Defines a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write
an unlimited number of characters. The default font in the text-area is fixed pitch.
Source

Output

<textarea rows="2" cols="20">

The cat was playing in the garden. Suddenly a dog showed
up.....
</textarea>
Required Attributes
DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute

Value

Description

DTD

cols

number

Specifies the number of columns visible in the text-area

STF

rows

number

Specifies the number of rows visible in the text-area

STF

Optional Attributes
Attribute

Value

Description

DTD

disabled

disabled

Disables the text-area when it is first displayed

STF

name

name_of_textarea

Specifies a name for the text-area

STF

readonly

readonly

Indicates that the user cannot modify the content in the text-area

Select Object
The select element creates a drop-down list. Tip: Use this tag in the form element to accept user input.
Example
Source

Output

<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel">Opel</option>
<option value ="audi">Audi</option>
</select>

Optional Attributes
DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute

Value

Description

DTD

disabled

disabled

When set, it disables the drop-down list

STF

multiple

multiple

When set, it specifies that multiple items can be selected at a time STF

name

unique_name

Defines a unique name for the drop-down list

STF

size

number

Defines the number of visible items in the drop-down list

STF

13

HTML Form Components and Elements

Control elements that are commonly used:
text boxes for text and numerical entries
selection lists for long lists of options, usually appearing in a dropdown list box
radio buttons, also called option buttons, to select a single option
from a predefined list
check boxes to specify an item as either present or absent
groups boxes to organize form elements
text areas for extended entries that can include several lines of text
buttons that can be clicked to start processing
The <form> tag identifies the beginning and end of a form. A single page
can include several different forms, but you cannot nest one form inside
another. The general syntax of the <form> tag is:
<form attributes>
form elements and layout tags
</form>
Between the <form> and </form> tags, place the various tags for each of the fields in the form. Use standard HTML tags
to specify the forms appearance. A single Web page can contain multiple forms, the <form> tag includes the name
attribute. The name attribute identifies each form on the page.
The name attribute is also needed for programs that retrieve values from the form.
There are two possible values for the method attribute: get or post.
the get method (the default) packages the form data by appending it to the end of the URL specified in the action
attribute the post method sends form data in a separate data stream, allowing the Web server to receive the data
through what is called standard input the post method is considered the preferred way of sending data to a Web server
The post method is also safer, because some Web servers limit the amount of data sent via the get method and will
truncate the URL, cutting off valuable information
Form Input Text

: <INPUT TYPE=TEXT NAME=name MAXLENGTH=length SIZE=size VALUE=value >

The text type input tag specifies a single line text entry field within the form that contains it.
The NAME attribute is a required field and is used to identify the data for the field.
The MAXLENGTH attribute specifies the number of characters that can be entered into this field.
The SIZE attribute specifies the amount of display space this field should take up.
The default for SIZE will vary by browser.
The VALUE attribute specifies the initial value of the field.
Form Input Check Box :<INPUT TYPE=CHECKBOX NAME=name VALUE=value CHECKED >
The checkbox type input tag specifies a Boolean choice within the form that contains it. If more than one checkbox
appears in the form with the same name the user can select none, one or several of the choices.
The NAME attribute is a required field and is used to identify the data for the field.
The VALUE attribute specifies the value that is returned if the box is checked. If the CHECKED attribute is specified, the
box is initially selected.
Form Input Radio Button

: <INPUT TYPE=RADIO NAME=name VALUE=value CHECKED >

The radio button type input tag allows a choice among a number of options. Normally more than one radio button will
appear in the form with the same name. The user can then select only one of the of the choices.

14

The NAME attribute is a required field and is used to identify the data for the field. If one of the choices has the CHECKED
attribute it will initially be selected. If none of the choices has the CHECKED attribute then the first one defaults as initially
selected. The VALUE attribute specifies the value that is returned if the box is checked.
Form Input File :
<INPUT TYPE=FILE NAME=name ACCEPT=mime type list>
The file type input tag allows the user to attach one or more files to the form for submission.
The NAME attribute is a required field and is used to identify the data for the field.
The ACCEPT attribute is a list of mime types that will be accepted. (e.g. "image/*" or "image/gif, image/jpeg").
Form Input Password :
<INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length SIZE=size VALUE=value >
The password type input tag specifies a single line text entry field within the form that contains it. The value entered by the
user will be obscured as it is entered.
The NAME attribute is a required field and is used to identify the data for the field.
The MAXLENGTH attribute specifies the number of characters that can be entered into this field. If MAXLENGTH is not
specified then there is no limit on the number of characters entered. If MAXLENGTH is longer than SIZE then the text field
will scroll appropriately.
The SIZE attribute specifies the amount of display space this field should take up. The default for SIZE will vary by
browser.
The VALUE attribute specifies the initial value of the field.
Form Input Reset
:
<INPUT TYPE=RESET>
The reset type input tag specifies a button. When the user clicks the button, all the fields in the form are reset to their
initial values.
Form Input Submit

<INPUT TYPE=SUBMIT NAME=name VALUE=value >

The submit type input tag specifies a button. When the user clicks the button, the form is submitted.
The NAME attribute is used to identify the data for the field.
If no NAME attribute is given then this element does not form part of the submitted response.
The VALUE attribute specifies the label for the button.
Form Select
<SELECT NAME=name MULTIPLE SIZE=size > option entries </SELECT>
<OPTION> content
<OPTION SELECTED> content
<OPTION VALUE=value> content
<OPTION SHAPE=shape>
The select tag specifies a multiple line selection box field within the form that contains it. The user can select one or more
lines if the attribute MULTIPLE is specified. The NAME attribute is a required field and is used to identify the data for the
field.
The SIZE attribute specifies the number of lines of selections that are to be displayed.
The SELECTED attribute of the option tag specifies that the option is to be initially selected.
The VALUE attribute specifies the value to be returned if this option is selected.
If the VALUE attribute is not specified the content of the option is used.
Form Text Area
<TEXTAREA NAME=name COLS=# columns ROWS=# rows> content </TEXTAREA>
The text area tag specifies a multiple line text area field within the form that contains it.
The NAME attribute is a required field and is used to identify the data for the field.
The COLS attribute specifies the width in characters of the text area.
The ROWS attribute specifies the number of lines the text area contains.
The content is used as an initial value for the field. The field can be scrolled beyond the COLS and ROWS size to allow for
larger amounts of text to be entered.

15

FRAMES - SYNTAX
Frames are generated by three things: FRAMESET tags, FRAME tags, and Frame Documents.

FRAME DOCUMENT
A Frame Document has a basic structure very much like your normal HTML document, except the BODY container is
replaced by a FRAMESET container which describes the sub-HTML documents, or Frames, that will make up the page.
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>

FRAME SYNTAX
Frame syntax is similar in scope and complexity to that used by tables, and has been designed to be quickly
processed by Internet client layout engines.
<FRAMESET>
This is the main container for a Frame. It has 2 attributes ROWS and COLS. A frame document has no BODY,
and no tags that would normally be placed in the BODY can appear before the FRAMESET tag, or the
FRAMESET will be ignored. The FRAMESET tag has a matching end tag, and within the FRAMESET you can
only have other nested FRAMESET tags, FRAME tags, or the NOFRAMES tag.
ROWS="row_height_value_list"
The ROWS attribute takes as its value a comma separated list of values. These values can be absolute pixel
values, percentage values between 1 and 100, or relative scaling values. The number of rows is implicit in the
number of elements in the list. Since the total height of all the rows must equal the height of the window, row
heights might be normalized to achieve this. A missing ROWS attribute is interpreted as a single row arbitrarily
sized to fit.
Syntax of value list.
value
A simple numeric value is assumed to be a fixed size in pixels. This is the most dangerous type of value to use
since the size of the viewer's window can and does vary substantially. If fixed pixel values are used, it will almost
certainly be necessary to mix them with one or more of the relative size values described below. Otherwise the
client engine will likely override your specified pixel value to ensure that the total proportions of the frame are
100% of the width and height of the user's window.
value%
This is a simple percentage value between 1 and 100. If the total is greater than 100 all percentages are scaled
down. If the total is less than 100, and relative-sized frames exist, extra space will be given to them. If there are
no relative-sized frames, all percentages will be scaled up to match a total of 100%.
value*
The value on this field is optional. A single '*' character is a "relative-sized" frame and is interpreted as a request
to give the frame all remaining space. If there exist multiple relative-sized frames, the remaining space is divided

16

evenly among them. If there is a value in front of the '*', that frame gets that much more relative space. "2*,*"
would give 2/3 of the space to the first frame, and 1/3 to the second.
Example for 3 rows, the first and the last being smaller than the center row:
<FRAMESET ROWS="20%,60%,20%">
Example for 3 rows, the first and the last being fixed height, with the remaining space assigned to the middle row:
<FRAMESET ROWS="100,*,100">
COLS="column_width_list"
The COLS attribute takes as its value a comma separated list of values that is of the exact same syntax as the list
described above for the ROWS attribute.
The FRAMESET tag can be nested inside other FRAMESET tags. In this case the complete subframe is placed in the
space that would be used for the corresponding frame if this had been a FRAME tag instead of a nested FRAMESET.
<FRAME>
This tag defines a single frame in a frameset. It has 6 possible attributes: SRC, NAME, MARGINWIDTH,
MARGINHEIGHT, SCROLLING, and NORESIZE. The FRAME tag is not a container so it has no matching end
tag.
SRC="url"
The SRC attribute takes as its value the URL of the document to be displayed in this particular frame. FRAMEs
without SRC attributes are displayed as a blank space the size the frame would have been.
NAME="window_name"
The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents (These
are usually from other frames in the same document.) The NAME attribute is optional; by default all windows are
unnamed.
Names must begin with an alphanumeric character.
Named frames can have their window contents targeted with the new TARGET attribute.
MARGINWIDTH="value"
The MARGINWIDTH attribute is used when the document author wants some control of the margins for this
frame. If specified, the value for MARGINWIDTH is in pixels. Margins can not be less than one-so that frame
objects will not touch frame edges-and can not be specified so that there is no space for the document contents.
The MARGINWIDTH attribute is optional; by default, all frames default to letting the browser decide on an
appropriate margin width.
MARGINHEIGHT="value"
The MARGINHEIGHT attribute is just like MARGINWIDTH above, except it controls the upper an lower margins
instead of the left and right margins.
SCROLLING="yes|no|auto"
The SCROLLING attribute is used to describe if the frame should have a scrollbar or not. Yes results in scrollbars
always being visible on that frame. No results in scrollbars never being visible. Auto instructs the browser to
decide whether scrollbars are needed, and place them where necessary. The SCROLLING attribute is optional;
the default value is auto.
NORESIZE
The NORESIZE attribute has no value. It is a flag that indicates that the frame is not resizable by the user. Users
typically resize frames by draggin a frame edge to a new position. Note that if any frame adjacent to an edge is
not resizable, that entire edge will be restricted from moving. This will effect the resizability of other frames.The
NORESIZE attribute is optional; by default all frames are resizable.
<NOFRAMES>
This tag is for content providers who want to create alternative content that is viewable by non-Frame-capable
clients. A Frame-capable Internet client ignores all tags and data between start and end NOFRAMES tags.

17