Scribd
Upload
95 views38 pages

Comprehensive HTML4 Tutorial Guide

1. The document discusses HTML (Hypertext Markup Language), which is used to create web pages. It describes some basic HTML tags like <p>, <h1>, and <b> that are used to define paragraphs, headings, and bold text. 2. The document then covers other common HTML tags like <ul>, <ol>, <li> for lists, and <table>, <tr>, <td> for tables. It also discusses HTML formatting tags for styling text. 3. Finally, the document provides examples of HTML headings from <h1> to <h6> and how the <p> tag is used to define paragraphs on a webpage.

Uploaded by

venusd95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
95 views38 pages

Comprehensive HTML4 Tutorial Guide

1. The document discusses HTML (Hypertext Markup Language), which is used to create web pages. It describes some basic HTML tags like <p>, <h1>, and <b> that are used to define paragraphs, headings, and bold text. 2. The document then covers other common HTML tags like <ul>, <ol>, <li> for lists, and <table>, <tr>, <td> for tables. It also discusses HTML formatting tags for styling text. 3. Finally, the document provides examples of HTML headings from <h1> to <h6> and how the <p> tag is used to define paragraphs on a webpage.

Uploaded by

venusd95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd

3

HTML4 NOTES Created by: - Venu

HTML4 NOTES

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML
tutorial is developed for beginners and professionals. The major points of HTML are given
below:

HTML stands for Hyper Text Markup Language.

HTML is used to create web pages.

HTML is widely used language on the web.

We can create static website by HTML only.

HTML Example with HTML Editor

<!DOCTYPE>  
<html>  
<body>  
<h1>Write Your First Heading</h1>  
<p>Write Your First Paragraph.</p>  
</body>  
</html>  

HTML tags contain three main parts: opening tag, content and closing tag. But some HTML
tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.

Syntax:- <tag> content </tag>

HTML Tag Examples


3
HTML4 NOTES Created by: - Venu

NOTE: HTML Tags are always written in lowercase letters. The basic HTML tags are given
below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags:- DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>,
<pre>, <samp>, <var> and <br>

HTML Link Tags :-<a> and <base>

HTML Image and Object Tags:- <img>, <area>, <map>, <param> and <object>

HTML List Tags: - <ul>, <ol>, <li>, <dl>, <dt> and <dd>
3
HTML4 NOTES Created by: - Venu

HTML Table Tags: - table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags: - form, input, textarea, select, option, optgroup, button, label, fieldset
and legend

HTML Scripting Tags: - script and noscript

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. There are many
formatting tags in HTML. These tags are used to make text bold, italicized, or underlined.
There are almost 12 options available that how text appears in HTML and XHTML.

Here, we are going to learn 12 HTML formatting tags.

1) Bold Text

If you write anything within <b>............</b> element, is shown in bold letters.

Syntax: - <p> <b>Write Your First Paragraph in bold text.</b></p>   
 
2) Italic Text
If you write anything within <i>............</i> element, is shown in italic letters.

Syntax: - <p> <i>Write Your First Paragraph in italic text.</i></p>  

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

Syntax:- <h2>  I want to put a <mark> Mark</mark> on your face</h2> 
Output:- I want to put a Mark on your face

4) Underlined Text: -

If you write anything within <u>.........</u> element, is shown in underlined text.

Syntax:- <p> <u>Write Your First Paragraph in underlined text.</u></p>
3
HTML4 NOTES Created by: - Venu

5) Strike Text

Anything written within <strike>.......................</strike> element is displayed with


strikethrough. It is a thin line which cross the statement.

Syntax: - <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>   

6) Monospaced Font

If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because different
letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides
similar space among every letter.

Syntax: - <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>   
Output: - Hello Write Your First Paragraph in monospaced font.

7) Superscript Text

If you put the content within <sup>..............</sup> element, is shown in superscript;


means it is displayed half a character's height above the other characters.

Syntax: - <p>Hello <sup>Write Your First Paragraph in superscript. </sup></p> 

Write Your First Paragraph in superscript.


Output: - Hello 

8) Subscript Text

If you put the content within <sub>..............</sub> element, is shown in subscript;


means it is displayed half a character's height below the other characters.

Syntax: - <p>Hello <sub>Write Your First Paragraph in subscript. </sub></p>

Output: - Hello Write Your First Paragraph in subscript.


3
HTML4 NOTES Created by: - Venu

9) Deleted Text

Anything that puts within <del>..........</del> is displayed as deleted text.

Syntax: - <p> <del>Delete your first paragraph. </del><ins>Write another paragraph.


</ins></p>  

Output: - Delete your first paragraph.Write another paragraph.

11) Larger Text

If you want to put your font size larger than the rest of the text then put the content within
<big>.........</big>. It increase one font size larger than the previous one.

<p>Hello <big>Write the paragraph in larger font.</big></p> 

Hello Write the paragraph in larger font.

12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.

<p>Hello <small>Write the paragraph in smaller font.</small></p> 

Hello Write the paragraph in smaller font.

HTML HEADING

A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the text
depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags.

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important
heading and h6 is used for least important.
3
HTML4 NOTES Created by: - Venu

<h1>Heading no. 1</h1>   Heading no. 1

<h2>Heading no. 2</h2>  
Heading no. 2

<h3>Heading no. 3</h3>  
Heading no. 3

<h4>Heading no. 4</h4>  
Heading no. 4

<h5>Heading no. 5</h5>  
Heading no. 5

<h6>Heading no. 6</h6>   Heading no. 6

NOTE: - Heading elements (h1....h6) should be used for headings only. They should not be
used just to make text bold or big.

HTML PARAGRAPH
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a
simple example to see how it work. It is a notable point that a browser itself add an empty
line before and after a paragraph.

<p>This is first paragraph.</p>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  

This is first paragraph.

This is second paragraph.

This is third paragraph.


3
HTML4 NOTES Created by: - Venu

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra
line while displaying the page. The browser counts number of spaces and lines as a single
one.

<p>  
I am  
going to provide  
you a tutorial on HTML  
and hope that it will  
be very beneficial for you.  
</p>  
<p>  
Look, I put here a lot  
of spaces                    but            I know, Browser will ignore it.  
</p>  
<p>  
You cannot determine the display of HTML</p>  
<p>because resized windows may create different result.  
</p>  

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

NOTE: - As you can see, all the extra lines and unnecessary spaces are removed by the
browser.
3
HTML4 NOTES Created by: - Venu

HTML ANCHOR

The HTML anchor tag defines a hyperlink that links one page to another page. The "href"
attribute is the most important attribute of the HTML a tag.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

<a href="second.html">Click for Second Page</a>  

HTML IMAGE

HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<h2>HTML Image Example</h2>  
<img src="good_morning.jpg" alt="Good Morning Friends"/>  

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag
are given below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

The location of image may be on the same directory or another server.


3
HTML4 NOTES Created by: - Venu

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of
the alt attribute describe the image in words. The alt attribute is considered good for SEO
prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.

4) height

It specifies the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of height
attribute.

HTML TABLE

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc. But it is recommended to use div tag over table to manage
the layout of the page.

HTML TAGS

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.


3
HTML4 NOTES Created by: - Venu

<colgroup> It specifies a group of one or more columns


in a table for formatting.

<col> It is used with <colgroup> element to


specify column properties for each column.

<tbody> It is used to group the body content in a


table.

<thead> It is used to group the header content in a


table.

<tfooter> It is used to group the footer content in a


table.
<html>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vishnu</td><td>Vardhan</td><td>60</td></tr>
<tr><td>Venu</td><td>Kumar</td><td>80</td></tr>
<tr><td>Adhya</td><td>Udupi</td><td>82</td></tr>
<tr><td>Fake</td><td>People</td><td>72</td></tr>
</table>
</body>
</html>

First_Name Last_Name Marks


Vishnu Vardhan 60
Venu Kumar 80
Adhya Udupi 82
Fake People 72

Note: - In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.
3
HTML4 NOTES Created by: - Venu

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML


2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.

<table border="1">  
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
<tr><td>James</td><td>William</td><td>80</td></tr>  
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
</table>  
First_Name Last_Name Marks
Dr.Vishnu vardhanl 60
Upendra Rao 80
Dr.Bharati Vishnuvardhan 82
Fake Peoples 72

2) CSS Border property

It is now recommended to use border property of CSS to specify border in table.

<style>  
table, th, td {  
    border: 1px solid black;  
}  
</style>  

You can collapse all the borders in one border by border-collapse property.
3
HTML4 NOTES Created by: - Venu

<style>  
table, th, td {  
    border: 2px solid black;  
    border-collapse: collapse;  
}  
</style>  

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>a</td><td>b</td><td>60</td></tr>
<tr><td>c</td><td>d</td><td>80</td></tr>
<tr><td>ei</td><td>f</td><td>82</td></tr>
<tr><td>g</td><td>h</td><td>72</td></tr>
</table>
3
HTML4 NOTES Created by: - Venu

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML


2. By padding property in CSS

The cellpadding attribute of HTML table tag is obsolete now. It is recommended to use CSS.
So let's see the code of CSS.

<style>  
table, th, td {  
    border: 1px solid pink;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 10px;  
}  
</style>  
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
3
HTML4 NOTES Created by: - Venu

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>A</td><td>B</td><td>60</td></tr>
<tr><td>S</td><td>D</td><td>80</td></tr>
<tr><td>E</td><td>Fi</td><td>82</td></tr>
<tr><td>X</td><td>WW</td><td>72</td></tr>
</table>
</body>
</html>

First_Name Last_Name Marks

A B 60

S D 80

E Fi 82

X WW 72

ii> to change border 1px  3px and cellpadding is decrease 10px  4px

First_Name Last_Name Marks


A B 60
S D 80
E Fi 82
X WW 72
3
HTML4 NOTES Created by: - Venu

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

Let's see the example that span two columns.

CSS code:

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 5px;  
}  
</style>  

Html Code
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
3
HTML4 NOTES Created by: - Venu

</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2"><center>Mobile No.</center></th>
</tr>
<tr>
<td>Venu</td>
<td>9880115507</td>
<td>8660344018</td>
</tr>
</table>
</body>
</html>

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

Let's see the example that span two rows.

CSS code:

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
3
HTML4 NOTES Created by: - Venu

    padding: 10px;  
}  
</style>  

Html code:

<!DOCTYPE>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

</style>

</head>

<body>

<table>

<tr><th>Name</th><td>Venu</td></tr>

<tr><th rowspan="2">Mobile No.</th><td>988015507</td></tr>


3
HTML4 NOTES Created by: - Venu

<tr><td>8660344018</td></tr>

</table>

</body>

</html>

HTML table with caption

HTML caption is displayed above the table. It must be used after table tag only.

<!DOCTYPE>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

}
3
HTML4 NOTES Created by: - Venu

</style>

</head>

<body>

<table>

<caption> Records</caption>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Vimal</td><td>k</td><td>70</td></tr>

<tr><td>Milk</td><td>cold</td><td>60</td></tr>

<tr><td>hot</td><td>milk</td><td>42</td></tr>

<tr><td>appy</td><td>juice</td><td>62</td></tr>

</table>

</body>

</html>
3
HTML4 NOTES Created by: - Venu

Styling HTML table even and odd cells

CSS code:

<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
th, td {  
    padding: 10px;  
}  
table#alter tr:nth-child(even) {  
    background-color: #eee;  
}  
table#alter tr:nth-child(odd) {  
    background-color: #fff;  
}  
table#alter th {  
    color: white;  
    background-color: gray;  
}  
</style>  

CSS AND HTML CODE

<!DOCTYPE>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;


3
HTML4 NOTES Created by: - Venu

border-collapse: collapse;

th, td {

padding: 10px;

table#alter tr:nth-child(even) {

background-color: #eee;

table#alter tr:nth-child(odd) {

background-color: #fff;

table#alter th {

color: white;

background-color: gray;

</style>

</head>

<body>

<table id="alter">

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>fake</td><td>people</td><td>60</td></tr>
3
HTML4 NOTES Created by: - Venu

<tr><td>real</td><td>peoples</td><td>80</td></tr>

<tr><td>peoples</td><td>reel</td><td>82</td></tr>

<tr><td>time</td><td>being</td><td>72</td></tr>

</table>

</body>

</html>

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)


2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li>
tag.
3
HTML4 NOTES Created by: - Venu

<ol>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ol>  
1. Aries
2. Bingo
3. Leo
4. Oracle

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol
tag is used for ordered list. There can be different types of numbered list:

o Numeric Number (1, 2, 3)


o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description

Type This is the default type. In this type, the list items are numbered with
"1" numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type In this type, the list items are numbered with upper case letters.
"A"

Type In this type, the list items are numbered with lower case letters.
"a"
3
HTML4 NOTES Created by: - Venu

HTML Ordered List Example


Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we
are not defining type="1" because it is the default type.

<ol>  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  

1. HTML
2. Java
3. JavaScript
4. SQL

ol type="I"
Let's see the example to display list in roman number uppercase.

<ol type="I">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  

I. HTML
II. Java
III. JavaScript
IV. SQL

ol type="i"
3
HTML4 NOTES Created by: - Venu

Let's see the example to display list in roman number lowercase.

<ol type="i">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  

i. HTML
ii. Java
iii. JavaScript
iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

<ol type="A">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  

A. HTML
B. Java
C. JavaScript
D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

<ol type="a">  
3
HTML4 NOTES Created by: - Venu

 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  

a. HTML
b. Java
c. JavaScript
d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

<ol type="i" start="5">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ol>  

v. HTML
vi. Java
vii. JavaScript
viii. SQL
3
HTML4 NOTES Created by: - Venu

HTML Unordered List or Bulleted List


In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li>
tag.

<ul>  
 <li>Aries</li>  
 <li>Bingo</li>  
 <li>Leo</li>  
 <li>Oracle</li>  
</ul>  
o Aries
o Bingo
o Leo
o Oracle

HTML Unordered List | HTML Bulleted List


HTML Unordered List or Bulleted List displays elements in bulleted format. The HTML ul
tag is used for the unordered list. There can be 4 types of bulleted list:

o disc
o circle
o square
o none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description

Type "disc" This is the default style. In this style, the list items are marked with
bullets.

Type "circle" In this style, the list items are marked with circles.

Type In this style, the list items are marked with squares.
3
HTML4 NOTES Created by: - Venu

"square"

Type "none" In this style, the list items are not marked .

HTML Unordered List Example


<ul>  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>  

ul type="circle"
<ul type="circle">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>  

ul type="square"
<ul type="square">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
3
HTML4 NOTES Created by: - Venu

 <li>SQL</li>  
</ul>  

ul type="none"
<ul type="none">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>  

HTML Description List | HTML Definition List


HTML Description List or Definition List displays elements in definition form like in
dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.


2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

<dl>  
  <dt>HTML</dt>  
  <dd>is a markup language</dd>  
  <dt>Java</dt>  
  <dd>is a programming language and platform</dd>  
3
HTML4 NOTES Created by: - Venu

 <dt>JavaScript</dt>  
 <dd>is a scripting language</dd>  
  <dt>SQL</dt>  
  <dd>is a query language</dd>   
</dl>  

HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language

HTML Forms
An HTML form is a section of document that contains interactive controls that
enable a user to submit information to a web server.

What is HTML Form


HTML Forms are required to collect different kinds of user inputs, such as contact details
like name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radio-buttons,
submit buttons, etc. Users generally complete a form by modifying its controls e.g. entering
text, selecting items, etc. and submitting this form to a web server for processing.
The <form> tag is used to create an HTML form. Here's a simple example of a login form:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From Controls</title>
</head>
<body>
3
HTML4 NOTES Created by: - Venu

<form>
<fieldset>
<legend>Sign In</legend>
<label for="user-name">Username:</label>
<input type="text" name="username" id="user-name">
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</fieldset>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female">
<label for="female">Female</label>
</fieldset>
<fieldset>
<legend>Hobbies</legend>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="cricket">
<label for="baseball">Baseball</label>
</fieldset>
<fieldset>
<legend>Address</legend>
<textarea rows="3" cols="30"></textarea>
</fieldset>
<fieldset>
3
HTML4 NOTES Created by: - Venu

<legend>Upload file</legend>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</fieldset>
<fieldset>
<legend>Select Your City</legend>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</fieldset>
<fieldset>
<legend>Action</legend>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>

The following section describes different types of controls that you can use in your form.

Input Element
This is the most commonly used element within HTML forms.
It allows you to specify various types of user input fields, depending on the type attribute. An
input element can be of type text field, checkbox, password field, radio button, submit
button,reset button, etc. and several new input types introduced in HTML5.
The most used input types are described below.

Text Fields
Text fields are one line areas that allow the user to input text.
3
HTML4 NOTES Created by: - Venu

Single-line text input controls are created using an <input> element, whose type attribute


has a value of text. Here's an example of a single-line text input used to take username:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From Text Field</title>
</head>
<body>
<form>
<label for="user-name">Username:</label>
<input type="text" name="username" id="user-name">
</form>
</body>
</html>

Password Field
Password fields are similar to text fields. The only difference is; characters in a password
field are masked i.e. shown as asterisks or dots. This is to prevent others from reading the
password on the screen. This is also a single-line text input controls created using
an <input> element whose type attribute has a value of password.
Here's an example of a single-line password input used to take user password:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From Password Field</title>
</head>
<body>
<form>
3
HTML4 NOTES Created by: - Venu

<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
</body>
</html>

Radio Buttons
Radio buttons are used to let the user select exactly one option from a pre-defined set of
options. It is created using an <input> element whose type attribute has a value of radio.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From Radio Button</title>
</head>
<body>
<form>
<input type="radio" name="sex" id="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female">
<label for="female">Female</label>
</form>
</body>
</html>

Checkboxes
Checkboxes allows the user to select one or more option from a pre-defined set of options.
It is created using an <input> element whose type attribute has a value of checkbox.
<!DOCTYPE html>
3
HTML4 NOTES Created by: - Venu

<html lang="en">
<head>
<title>Example of HTML From Checkbox</title>
</head>
<body>
<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="cricket">
<label for="baseball">Baseball</label>
</form>
</body>
</html>

File Select box


The file fields allow a user to browse for a local file and send it as an attachment to the form
data. It normally rendered as a text box with a button that enables the user to browse for a
file. However, the user can also type the path and name of the file in the text box.
This is also created using an <input> element, whose type attribute value is set to file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From File Select box</title>
</head>
<body>
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
3
HTML4 NOTES Created by: - Venu

</form>
</body>
</html>

Textarea
Textarea is a multiple-line text input control that allows a user to enter more than one line of
text. Multi-line text input controls are created using an <textarea> element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of HTML Textarea</title>
</head>
<body>
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
</body>
</html>

Select Boxes
A select box is a dropdown list of options that allows user to select one or more option from
a pull-down list of options. Select box is created using the <select> element
and <option>element. The option elements within the <select> element define each list item.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From Select Box</title>
3
HTML4 NOTES Created by: - Venu

</head>
<body>
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>
</body>
</html>

Submit and Reset Buttons


A submit button is used to send the form data to a web server. When submit button is
clicked the form data is sent to the file specified in the form's action attribute to process the
submitted data. A reset button resets all the forms control to default values.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From Submit and Reset Button</title>
</head>
<body>
<form action="../html/action.php" method="post" id="users">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
3
HTML4 NOTES Created by: - Venu

</html>

Most frequently used form attributes are:

Attribute Description

name The name of the form.

action URL of the program that processes the information submitted via form.

method The HTTP method that the browser uses to submit the form. Possible values are get and post.

target A name or keyword indicating the target page where the result of the script will be displayed.
The reserved keywords are _blank, _self, _parent and _to

You might also like