HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages. What is HTML? learn html

HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages.

What is HTML? learn html

What is HTML?

What tools are needed to make a webpage?

All that is needed is 'notepad' and a second browser, notepad is a simple text editor in windows, click start on your taskbar then programs and then goto accessories, finally click notepad.

What does html look like?

Most html tags work in pairsThe first <HTML> tag tells the browser that it is reading a html document. The </HTML> tag with the / in it tells the browser that the html has ended.Take a look belowThe first <HEAD> tag tells the browser that it is reading the head of a html document. The </HEAD> tag with the / in it tells the browser that the head part has ended.One more exampleThe first <TITLE> tag tells the browser that it is reading the title of a html document. The </TITLE> tag with the / in it tells the browser that the title has ended.

The minimal webpage:-

<HTML><HEAD><TITLE>my first web page</TITLE></HEAD><BODY>

This is my very first webpage, aint i clever?

</body></HTML>

This is my very first webpage, aint i clever?

Output:-

What is Web Page

Web page is a page which is displayed on the internet. Web pages are created by using HTML syntax. In web pages we can insert the picture ,table , graphics by using different tags of html language.

HTML TAGS

Html tags are standard set of codes that are typed in between greater than and less than signs on the keyboard. Like

<HTML>

There are basically two types of HTML tags

Padded Tags

Unpadded Tags

Padded Tags:- Padded tags are those tags which are required to be closed at the end. The Padded tag is closed with forward hash (/) before the tag name.

<HTML>……..</Html>

<Head>……..</Head>

<Body>……..</Body>

Unpadded tags:- unpadded tags is just the opposite of Padded Tags, as they need not be closed at the end.

<HR>

<BR>

Layout of Web Page

Title

Heading

Body

Footer

Basic Tags:-

<HTML>….……..</HTML>

<TITLE>…………</TITLE>

<HEAD>………..</HEAD>

<BODY>…………</BODY>

BASIC TAGS

Tags Description

<HTML>………</HTML> Indicates the beginning of HTML document

<Title> ………….</Title> Indicates title for the web page.

<Head>………….</Head> Indicates the beginning of document header.

<Body>………..</Body> Indicates the beginning of HTML text.

<Html>

<Title> MY Page </Title>

<Head> Punsoft life skills academy </head>

<Body> this is my first web page </body.

</Html>

Output of this

My page

Punsoft life skills academy

This is my first web page.

Title

Head

Body

Formatting TagsFormatting Tags are used to design, styles and colors to the text.

Format Tags DescriptionParagraph <P> Indicates paragraph break

<BR> Indicates line break

<PRE>….</PRE>

Indicates Preformatted text

<Blockquote>…..<Blockquote>

Indicates block of text, indented

<HR> Indicates Block of text, indented

<center> It indicate the alignment of text or picture in center of a page.

<html><body>

<h1 style="text-align:center">This is heading 1</h1>

<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>

</body></html>

Output:-This is heading 1

The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The

heading above is aligned to the center of this page.

Note:- to make your text in center of page you can also use the option (tag) <center> simply.

Center Aligned Heading

Use of horizontal line in HTML

<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr />

<p>This is a paragraph</p><hr />

<p>This is a paragraph</p><hr />

<p>This is a paragraph</p>

</body></html>

Output:The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

Text formatting tags

Format Tags Description

Character <I>….</I> Indicates italics

<U>…..</U> Underlines the text

<B>……</B> Indicates bold text

<TT>……</TT> Indicates “typewriter” font

<EM>……</EM> Emphasizes the text (usually italics)

<ADDRESS>….</ADDRESS>

Indicates information about the author who created the web page in a unique font.

<STRONG>…….</STRONG>

Indicates typical Bold Font

<CITE>………</CITE> Highlights Citation

<CODE>…….</CODE>

Used to enclose program codes

<abbre >

Title=“……..” It is used as abbreviation of full text.

<html>

<body>

<p>This is a paragraph. we are using this option to display the result of this option on the web page </p>



</body>

</html>

Output:-This is a paragraph. we are using this option to display the result of this option on the web page

This is a paragraph. we are using this option to display the result of this option on the web page

This is a paragraph. we are using this option to display the result of this option on the web page

Use of Paragraph option.<p>

<html>

<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><big>This text is big</big></p>

<p><em>This text is emphasized</em></p>

<p><i>This text is italic</i></p>

<p><small>This text is small</small></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html>

Output:-Text formatting

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is subscript and superscript

Pre and p options

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Preformatted text (how to control line breaks and spaces)

OutputThis is

preformatted text.

It preserves both spaces

and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10

print I

next i

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre

Abbreviation tags:

<html>

<body>

<abbr title="United Nations">UN</abbr>

<br />

<acronym title="World Wide Web">WWW</acronym>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body>

</html>

Output of abbreviation tag

UN

WWW

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

<html>

<body>

<p>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

</p>

<bdo dir="rtl">

Here is some Hebrew text

</bdo>

</body>

</html>

Output

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

Txet werbeH emos si ereH

Note:- <bdo dir="rtl"> tag show the text in opposite direction like mirror effect.

Use of Some other tags (coding)

<html>

<body>

<code>Computer code</code>

<br>

<kbd>Keyboard input</kbd>

<br>

<tt>Teletype text</tt>

<br>

<samp>Sample text</samp>

<br>

<var>Computer variable</var>

<br><p>

<b>Note:</b> These tags are often used to display computer/programming code.

</p>

</body></html>

Output:-

Computer code Keyboard input

Teletype text Sample text Computer variable

Note: These tags are often used to display computer/programming code.

<html>

<body>

<abbr title="United Nations">UN</abbr>

<br />

<acronym title="World Wide Web">WWW</acronym>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body></html>

Header <H1>…</H1>

First-level heading (big size)

<H2>…..</H2>

Second-level heading

<H3>….</H3>

Third -level of heading

<H4>….</H4>

Fourth-level of heading

<H5>…..</H5>

Fifth-level of heading

<H6>……</H6>

Sixth-level of heading

<H7>……</H7>

Smallest level of heading

<html>

<body>

<h1>This is heading 1</h1>






</body></html>

Output:-This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Use of heading tags:

Additional Tags

Tag Attribute Function

<! ………> Indicates comment tag in Html. The browser does not interpret it.

<body> Bgcolor=“……” It is used to give the background color of the page

Background=“…”

It is used to display the image on the page as a background

These tags are used in body tag.

<Sub>…...</Sub>

It is used to show text in subscript form

<Sup>…..</Sup>

It is used to show text in superscript form

Use of background tags/attributes

<html>

<body style="background-color:orange">

<h2>Look: Colored Background!</h2>

</body>

</html>

Output:-

Look: Colored Background!

Note:- This option is also used as <body Bgcolor=“orange”> both have same effects.

Output:-

This is a regular paragraph

<html>

<body>



<p>This is a regular paragraph</p>

</body></html>

Use of comment tag.

Color codes in html000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF



660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF



990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF



CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF




CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF




FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Lists in HTML

List mean to make/arrange the information in order. Listing of item is possible in html. List is divided into two parts.

Order list:

Unordered list:

items to be listed are typed after <li> tag which mean <list item>. It is a unpadded tag it mean there is no need to close it, it is op

Ordered list:-

The ordered list consists of alphabetical order and numeric order. The ordered list begins with <ol> tag and is a padded tag hence the list ends with a </ol> tag.

This tag must be closed at the end of list.

Example:-

<ol>Names of cities

<li> Chandigarh

<li> Ropar

<li>Patiala </ol>Output:- Names of cities1. Chandigarh2. Ropar3. Patiala

Note:- by default numbers are shown in ordered list.

Example and other features of ordered list:

Alphabets in ordered list:

For uppercase list:

<ol type=A>

<li> Chandigarh

<li> Ropar

<li>Patiala </ol>

Output:-

A. ChandigarhB. RoparC. Patiala

Alphabets in ordered list: For uppercase list:<ol type=a> <li> Chandigarh<li> Ropar<li>Patiala </ol>

Output:-

a) Chandigarhb) Roparc) Patiala

Other options of ordered list:

Roman Characters as ordered

list:-Uppercase:

<ol type=I>

<li> Chandigarh

<li> Ropar

<li>Patiala </ol>

Output:-

I. ChandigarhII. RoparIII. Patiala

Roman Characters as ordered

list:-Lower case:<ol type=i><li> Chandigarh<li> Ropar<li>Patiala </ol>

Output:-

i. Chandigarhii. Ropariii. Patiala

To start the list from particular number- in ordered list only

<ol type=“1”start=7>

<li> Chandigarh

<li> Ropar

<li> Ludhiana

<li> Patiala</ol>

Output:-

7. Chandigarh 8. Ropar 9. Ludhiana 10.Patiala

<ol type=“a”start=5>

<li> Chandigarh<li> Ropar<li> Ludhiana<li> Patiala</ol>

Output:-

e. Chandigarh f. Ropar g. Ludhiana h. Patiala

Unordered list:-

The unordered list consists of bullets. The unordered list begins with <ul> tag and is a padded tag hence the list ends with a </ul>. <li>Tag is sub tag or attribute of this list.

Example:- default bullets as unordered list.

<ul><li> Chandigarh

<li> Ropar>

<li> Patiala

<li> Ludhiana </ul>

Output :-•Chandigarh•Ropar•Patiala•Ludhiana

To change the shape of the bullets from default to square.

<ul type=“square”>

<li> Chandigarh

<li> Ropar

<li> Patiala

<li> Ludhiana</ul>

Output:-ChandigarhRoparPatialaLudhiana

<ul type=“Circle”><li> Chandigarh<li> Ropar<li> Patiala<li> Ludhiana</ul>

Output:-oChandigarhoRoparoPatialaoLudhiana

What is Nested list:-

List within a list is known as a nested list. It can be extended up to several levels. The most common example of nested list is index or contents of any book.

Images in HTMLImages can be inserted on the wed page using HTML tags. There

are different types of images or graphics file formats like gif, jpeg(jpg), Wmf, etc. that can be easily inserted on a web

page through HTML tags.

HTML tag associated with inserting images and its attributes with their functions are given in the following table:

Image Tags in HTML


<Img Places an image file within the page.

Src=“ The address or the file name of the image.

Alt=“….” A text message that can be displayed

Align=“…..” Left, right and Center

Height=“…” Value assigned in pixels

Width=“…..” Value assigned in pixels

Hspace=“….” Value assigned in pixels(horizontal space)

Vspace=“….” Value assigned in pixels(Vertical space)

Border=“….” Value assigned in numbers (0,1,2,3…)

Loop=“…….” Value assigned in numbers (0,1,2,3…)For animation files

The image tag is inserted anywhere in the head or the body tags and is typed as follows: <img Src=“c:\image\ast09.jpg” height=“500” width=“500” alt=“name of picture” border=“10”>

<html>

<title> Inserting Images</title>

<head>

<center>

This is a picture of roses</head>

<body>

<img Src=“C:\images\Roses.jpg” align=“center”>

</body>

</html>

This is a picture of Roses

Output of these tags

Links in HTML

Links:-link is a connection of one test/picture with other text/picture.

In Html links are necessary to link different web pages in a web site. It is also necessary for linking from one part of the document to another part in the same document.

Types of Links:-

Internal links

External links

Tags for hyperlinks

Tag Attributes Function

<a>……</a> The anchor tag when used with the href attribute creates a link to another document or anchor

Href=“......” The address of the document or anchor point to link to.

name-=“…” The name for this anchor point in the document

Id=“…..” The id tad is exactly like the name tag.(include both name and id for maximum past and future compatibility.)

Internal Link Internal Links are those links that are inserted within a single

current document. It mean it is a link within a document.

It is used when Document is too large and it needs link from Top to Bottom or Bottom to Top.

Syntax

1.<a name=“location name’>

<a href=“# location name”> link text </a>

Type the text as you required

2.<a href=“#a1”> link text </a>

<a name=a2>

Note:- Both the text are required to create internal link.

Example:

<Html>

<Body>

<a name=“a1”>

<a href=“#a2”> Bottom </a>

This is a document which shows the link with in a page. All the text is used to show link of top text with bottom text.

<a href=“#a1”> Top </a>

<a name=“a2”>

</body></html>

Note=“#” symbol is used to indicate internal link.

outputBottom

This is a document which shows the link with in a page. All the text is used to show link of top text with bottom text.

Top

Blue color is always shown as link

Note:- when you click on bottom then cursor will be shifted to bottom of the page or vice versa.

External LinkExternal links are links to other web Pages or sites. when we

have some important data or information in any other document then this link is used to connected two different

document with each other.

For example:-

<a href=“xyz.html”> click here to go to xyz file</a>

This example “<a href” refers to the anchor tag and hyperlink tag. “xyz.html” refers to the file to which a hyperlink is being created from the current html document.

“click here to go to xyz file” is the hypertext that will appear in the document as a link.

Link with Picture

In this example a hyperlink is created to an image file and the image file is replaced with inflated picture of the same image.

Small picture is shown as link. when you click on Link ,it will displayed large size of picture.

Syntax:-

<a href=“ret.jpg”><img Src=“ret.jpg” height=“500” width=“500”></a>

Here if you click on small picture of ret then you can see original size of ret picture

<a href=“roses.jpg”><img Src=“ret.jpg” height=“500” width=“500”></a>

Here is you click on small picture of roses then you can see original size of ret picture

Table in HTML

A table is an orderly arrangement of text and/or graphics into vertical column and horizontal rows.

Tables can be created in html using the <table> tag. Table can contain different types of data for

example it can include links, paragraphs, preformatted text, images, another table, and so on.

Table tags


<table>….....….</table>

Indicates the start and the end of the table.

Align=“…….”

Bgcolor=“……” Background color for the table. Values are assigned is in pixels or hexadecimal number.

Background=“….” Background refers to background image.

Width=“…….” Value assigned in percent.%

Border=“……” Value assigned in numbers. (2,3,4)

Bordercolor=“….” Value assigned in pixels or hexadecimal number.

Border colorlight=“….”

Value assigned in pixels or hexadecimal number.

Border colordark=“….”

Value assigned in pixels or hexadecimal number.


Cellpadding Indicates space between border and contents of cell.

Cellspacing Indicates spacing between cells.

<Caption>…</caption>

Indicates heading for the table.

<tr..…</tr> Indicates table rows.

Align=“……’ Row contents to be aligned left, right, center.

Background=“…….” Background refers to background image.

Bgcolor=“…..” Background color for the row. Values are assigned is in pixels or hexadecimal number.

<th>….</th>

Indicates heading for the columns.

<td>….</td>

Indicates individuals table elements or cells.

Align=“……..” Cell contents to be aligned left, right, center.


Background=“……..”

Background refers to background image.

Bgcolor=“……” Background color for the cell. Values are assigned is in pixels or hexadecimal number.

Valign=“…… “ Values assigned for vertical alignment of data in the cell. (top, Center, Bottom, Baseline)

Colspan=“……” Merging cells in different columns.

Rowspan=“…….” Merging cells in different columns.

Notes:- This table provides the different tags associated with tables in html . Tags are the main functions but the attributes are the

Html tags<html>

<title> Table</title>

<body><table border=10 align=center >

<tr><td>1

<td>2<td>3</tr>

<tr> <td>4<td>5<td>6

</tr>

<tr> <td>7<td>8<td>9</tr>

</table></Html>

Output of table tags

1 2 3

4 5 6

7 8 9

Table

Rows and column span

<html><title>

Row span in table </title>

<table border=12 bordercolor=“brown” align=left>

<tr><td Colspan=2>1

<td>3</tr>

<tr><td >4<td Rowspan=2>5<td>6</tr>

<tr> <td>7<td Bgcolor=“pink”>8 </tr>

</table></html>

Output

1 3

4 5 6

7 8

Row span in table

Forms in HTML

Forms are basically used for registration detail that the user may have to enter in the form.

Tag Attribute function

<form>..</form>

Indicates the beginning and end of a form in HTML

Action=file/URL Specifies the location where form data is passed.

Method=get/post

Specifies the method by which the data is sent to the server.

Name=“……’ Name assigned to the form which is not displayed on the browser.

Forms

In html the form is used as a special feature by which the user can fill in certain information in a web page and is send to the server. In a web page the input is collected with the help of the form tag in html. The information collected can be stored in form of a file or a database on the web server. Thus using forms one can create an effective interaction between the client and the server.

Insert text box in form

Text box:- the text box is used to collect small amount of data in a single line/ text box. Data such as Name, E-mail address, Contact number, etc can be collected using this form field.

Rajindra education trust.

Name:- This is a text box.

<html>

<body>

<form name="input" action="html_form_action.asp" method="get">

Type your first name:

<input type="text" name="First Name" value="Mickey" size="20">

<br>Type your last name:

<input type="text" name="Last Name" value="Mouse" size="20">

<br> <input type="submit" value="Submit">

</form> <p>

If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.

</p></body></html>

Output:-Type your first name: Type your last name:

If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.

Mickey

Mouse

Submit

<html>

<body>

<fieldset text=“red”><legend>

Health information:

</legend>

<form action="">

Height <input type="text" size="3">

Weight <input type="text" size="3">

</form></fieldset>

<p> If there is no border around the input form, your browser is too old.</p>

</body>

</html>

Output:-Health information: Height Weight

If there is no border around the input form, your browser is too old.

Important tags of form


<input> It is a basis for data entry

Type=“text” Type Specifies the form field in which data is to be entered

Size=“……” Size of the text field (Value assigned in numbers: 0,1,2,3…)

Name=“…..”

Name of the control, which is not displayed on the browser. It is used to collect data on the server. values assigned can be alpha numeric or alphabets but not numeric.

Maxlength=“….”

Determines maximum number of characters to be entered in the field. (value assigned in numbers 0,1,2,3,..)

Text area

The text area is used to collect information in more than one single line of text, in two or more lines. This form field

scrolls in order to type the entire text to fit in the form field. It is used to collect detail on a particular topic which the visitor can enter as simple as typing out in a sentence of

varying length.

Text area tags.


<textarea>………</textarea>

It is the basis for data entry.

Name=“………”

Name of the control, which is not displayed on the browser. It is used to collect data on the server.

Cols=“……….” Determine the size of the text area in numbers.

Rows=“………” Determine the size of the text area in numbers.

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea.

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea.

Note:-When you see the slide view of this option then you can write anything in this textarea but not now.

The cat was playing in the gar

Check box:The check box is used in order to specify preferences on the

form page. The visitor simply clicks on the check box to select the item listed next to it in the form. The database is collected on the bases of whether the item having a check

box is selected or not.

Check box tagsTag Attribute Function

<input> It is the basis for data entry

Type=“checkbox”

Type specifies the form field in which data is to be entered. (create a checkbox)

Name =“……….”


Value=“……….”

Determines the Boolean value of the form field, which is sent to the server

Checkboxes:

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane" /></form>OutputHow it looks in a browser:I have a bike: I have a car: I have an airplane:

Radio buttons

The radio is used in case when you want that the visitor of the site can select just one option from the list or group.

Like option –male or female.

This button are always shown in circle form.

FemaleGender

Male

Radio buttons:


<input> It is the basis for data entry.

Type=“radio”

Type specifies the form field in which data is to be entered. (creates a radio button)

Name=“…….”


Value=“…….”

Determine the Boolean value of the form field, which is sent to the server. Value assigned can be yes/no

Checked It is used in case of multiple radio buttons only. If none of the buttons are clicked then by default the one with the checked tag will be selected.

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

Example:-

How it looks in a browser:Male Female

<html>

<body>

<form action="">

<input type="button" value="Hello world!">

</form>

</body>

</html>

Select tag

This option is used to give drop down menu list with a list of choices. This field is a similar to using a group of radio buttons, but takes less space on your form. You can configure a drop-down menu to allow one or multiple selections.

Select tag Tag Attributes function

<select>……</select>

Create a drop down menu list.

Name=“…….” Name of the control, which is not displayed on the browser. It is used to collect data on the server.

Size=“………” Specifies the number of items visible at a time

Multiple=“………”

Allows multiple items to be selected at a time.

Defines the list item as option in the select form field.

Value=“………….”

Value assigned to each item as option in the select form field.

selected Specifies the default item selected among list of items.

<html>

<body>

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

</body>

</html> Output:-

Volvo

<html>

<body>

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" selected="selected">Fiat</option>

<option value="audi">Audi</option>

</select></form></body>

</html>

Output:-

Note: Here flat option is selected as a default value. Highlighted in Red color for knowledge.

Fiat

Button: Buttons are provided to the site visitors to click on it so as

to follow a certain command assigned to it. In form we use two sets of buttons i.e. Submit and Reset.

The submit button is used in case the visitor has finished entering the form and wants to submit the data to the server that he has entered.

The reset button is used to reset the form field so as to enter the next record.

Button tags:Tag attribute function

<input> It is the basis for the data entry.

Type=“button” Type specifies the form field through which data is to be submitted.(create a button with the fault on it as “button”.

Type=“submit” “type specifies the form field through which data is to be submitted.(create a submit button with the default text on the button as “submit query”

Type=“reset” Type speciifes the form field through which data is to be submitted. (creates a reset button with the default text on the button as “reset”.

Name=“…..”

Value=“…… Is the text that will appear on the button in the browser.

When the user clicks on the "Submit" button, the content of the form is sent to the server. 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_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>

How it looks in a browser: Username:

Submit

Password:

Password s used in case any security aspect is to be included on the web page. The password field will displayed the data entered in form of asterisks (stars), as the password is not to be visible on the screen.

Hence the text typed in password is masked in star asterisks form in HTML.

Password tagsTag Attribute Function

<input> It is the basis for data entry.

Type=“password”

Type specifies the form field in which data is to be entered. (creates a text box for password with default size.)

Name=“…….” Name of the control, which is not displayed on the browser. It is used to collect data on the server.

Size=“……..” Size of the text field (value assigned in numbers: 0,1,2,3,…)

Maxlength=“……)

Determines maximum number of characters to be entered in the field.(value assigned in numbers: 0,1,2,….)

Frames in HTMLFrame is basically division of the current browser window into

rectangular sections that can open multiple web pages in different section after the main web page is opened in the browser.

Frames divide the web page into different section like in rows and columns.

Frame tags

Tag Attributes Function

<frameset>……..</frameset>

It indicates the start and end tags to create frames.

Cols=“……” Divides the document window into columns. Value are assigned in percentage (%age)

Rows=“……..” Divides the document window into rows. Value are assigned in percentage. (%age)

Specifies the file to be displayed in each frame.

Src=“……..” The location of the file to be opened in the frame.

Name=“………” Specifies the name of the frame.

Tag Attributes function

Noresize Denotes that the size of the frame is fixed and cannot be altered.

Scrolling=“…….” Specifies scroll bars. Values assigned can be yes, no or auto.

Border=“…….” Specifies border for the frame. (value assigned in numbers: 0,1,2,3,4…..)

<no frames> ……. /Noframes>

Specifies that non-Netscape browser displays html codes within these tags.

Note:- to insert frames do not use the head and body tags, as you need to divide the entire document window into frames that open different html files.

Frame tag (vertical frames) <html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</html>

Horizontal frames

<html>

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




</frameset>

</html>

<html>

<frameset cols="25%,50%,25%">




<noframes>

<body>Your browser does not handle frames!</body>

</noframes>

</frameset>

</html>

Rows and column in frame. <html>

<frameset rows="50%,50%">


<frameset cols="25%,75%">



</frameset>

</frameset>

</html>

<html>

<body>

<iframe src="default.asp"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

Some older browsers don't support iframes.

If they don't, the iframe will not be visible.

Documents

HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages. What is HTML? learn html