html-basic.pdf

CS-04 NETWORKING & INTERNET ENVIRONMENT UNIT - 3
Page 1 of 18 Study notes by : BHAVESH CHAVDA
Basic of HTML & Advance HTML 5
Fundamental of HTML
HTML Overview
Tim Berner Lee White at CERN, the European Laboratory invented HTML It is collection of
platform independent style that defines the various components of WWW.
They wanted to set a documentation, in which one could mark the title, heading, font
type selection etc. they called it as GML (General Markup Language) HTML is subset of a
very complicated language called SGML (Standard Generalized Markup Language.)
SGML is an international standard, which describes how to store text on computer and
mark it up to add extra information
Understand HTML
HTML stands for HyperText Markup Language and is used to create web pages.
Hypertext is a way of organizing information so readers can choose their own path through
the material. Instead of clicking through sequentially organized pages, a hypertext user
clicks specially highlighted text, called a hyperlink (or just a link for short), to go directly to
information of interest.
Markup Language you simply “mark up” a text document with tags that tell a Web browser
how to structure and display it.
HTML originally was developed with the intent of defining the structure of documents
(headings, paragraphs, lists, and so forth) to facilitate the sharing of scientific information
between researchers.
The name of the source file has to end with the extension “.htm” or “.html “
HTML tags and HTML Elements
The tag begins with a “less than” sign (<), and end by a “greater than” sign (>).
HTML tags are divided into two types
1. Singular tag
The second type of tag is the singular or stand-alone tag. A stand-alone tag does not have a
companion tag.
Example: <br> tag will insert a new line break.
2. Paired tag
A tag is said to be paired tag if it, along with a companion tag.
Example: <b> (Bold) tag is a paired tag.
It has its companion tag i.e. </b> cause the text contained between them to be rendered in
bold effect. The opening tag achieves the effect and the closing tag turns the effect off.
All HTML pages are made up of elements.
An element as a container in which a portion of a page(content) is placed.

Whatever is contained inside an element will take on the characteristics of that element.
Example
<b>This is an example of bold</b>
<h3>welcome to harivandana</h3>
Attributes and Value
Some types of tag need extra information. This is called the tag’s attribute. “Attribute”
is written only with starting tag (“<Tag>”).
An attributes is used to define the characteristics of an element and is placed inside the
element’s opening tag.
That’s an attribute needs a value to go with it.
Tag Value
<IMG SRC = “Rom.gif” >
Attribute
<img src=”sunset.jpg” height=”500” width=”1000”>
Tags are not case sensitive. But most of the attribute values are case sensitive
Structure of HTML
This section describes the tags that indicate the basic structure of a web page.
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
</head>
<body>
//content goes here
</body>
</html>
1. HTML Section:
The html element acts as a container for the whole document. The html tag identifies a
document as an HTML document. All Html documents should start with the <HTML> tag
and end with the </html> tag.
2. Head Section:
The HEAD tag defines an HTML document header. The HEAD section comes between a
<HEAD> and </HEAD> tags. The web browser displays none of the information in the
header, except for text contained by the TITLE tag. The HEAD tag can contain TITLE,
BASE, ISINDEX, META, SCRIPT, STYLE, and LINK tags.

3. Body Section:
The BODY tag specifies the main content of a document. You should put all content that
is to appear in the web page between the <BODY> and </BODY> tags. You can specify
the background color, image,even change the text color etc. using its attribute. You can
specify actions to occur when the document finishes loading or is unloaded or when
document receive or loses focus.
Head Tag
The head tag is a container for all the head elements. Elements inside the <head> can
include scripts, instruct the browser wehre to find style sheet, provide meta information
and more.
1. Title tag (document title):
This tag is used to set the title of the page. The title will be displayed on the left up
corner of the browser page. If no title is specified, the default title depends on the
browser being used.
<title>Title of the HTML Page</title>
2. Base tag:
The BASE tag specifies the base URL for the document. All relative links in the
document are derived from this base URL. For example, if the base is
http://home.netscape.com/", the relative link "page1.html" resolves to
"http://home.netscape.com/page1.html". Base tag does not require closing tag.
<base href=”http:// home.netscape.com/” target=”_blank”>
Attributes of base tag
 href: This attribute is required. It specifies the location of the document with
full path. All relative links in the document are resolved with respect to this
base URL.
 target: It identifies the default window or frame to be used to display any
documents that are opened by activativing links in this document.
3. Meta tag:
Metadata is data about data. It provides metadata for an HTML document. Use
meta elements to specify page title, page description, keywords, author and
character set of a document. It is intended for use by other programs, such as search
engines or web browsers.
<meta name=”author” content=”HTML example”>
Attributes of meta tag
 name:
If the NAME attribute is supplied, the META tag specifies information about
the document.The value can specify description, keywords or authors.
 Content:
provides content information. The value of the CONTENT attribute is always a
single string containing all the attributes and their values separated by
semicolons.

4. Link tag:
The Use the LINK tag to link external files such as style sheets and downloadable
fonts into your document. It is singular tag.
<link rel=”stylesheet” href=”txtFormat.css” type=”text/css”>
Attributes of Link tag
 rel:
specifies the kind of file to be linked. For an external style sheet, the value is
"stylesheet". For a downloadable font definition file, the value is "fontdef".
 type:
specifies more information about the particular type of file to be linked to, if
that information is needed. For style sheets, the value can be "text/css" for
cascading style sheets, or "text/javascript" for JavaScript style sheets.
 src:
specifies the location of the file to be linked
5. Style tag:
The STYLE tag specifies a style sheet. Inside <STYLE> and </STYLE> you can specify
styles for elements, define classes and IDs, and generally establish styles for use
within the document.
<style type=”text/css”>
body {background-color:yellow;}
</style>
Attribute used in style tag is
o type: specifies either a JavaScript style sheet or a cascading style sheet(CSS).
The value can be "text/css" for cascading style sheets, or "text/javascript" for
JavaScript style sheets.
Body Tag
The text written in <BODY> tag is displayed in web page. The Body tag can have a
number of attributes which we will discuss below:
o background:
specifies an image to display in the background of the document. The URL
value can be an absolute URL or a relative. The image is tiled, which means it
is repeated in a grid to fill the entire window
o bgcolor:
sets the color of the background.
o text:
sets the color of normal text in the document.
o link:
sets the default text color of unvisited links in the document.
o alink:
specifies the color to which links briefly change when clicked.
o vlink:
specifies the text color of visited (followed) links in a document.

Example
<body bgcolor ="#FFFFAA" text=”black” link=”blue” alink=”green” vlink=”red” >
....
</body>
Comment Tag (<!-- -- >)
The text written with this tag is not visible in the page. This tag doesn’t have any
ending tag.
For example
<! -- This is a comment -- >
Text Formatting tags
These tags set the characteristics of text. All these tags can use the attributes ID,
CLASS,
LANGUAGE, and STYLE attributes which are not included in the following tags
1. Bold and Strong tag (<b>...</b> and <strong>...</strong>)
The B tag displays text in boldface type.
The STRONG tag also display in bold. This logical tag indicates heavier or stronger
emphasis than <b> does.
Example
This is an example of <B>Bold</B> and <strong>Strong</strong> Format.
Output
This is an example of Bold and Strong Format.
2. Italic and Emphasized tag(<i>...</i> and <em>...</em>)
The Italic tag displays text in Italic type.
The EM tag displays text in an emphasized style. This is similar to italic format.
Example
This is an example of <i>Italic</i> and <em>Emphasize</em>tag.
Output
This is an example of Italic and Emphasize tag.
3. Underline and Strike tag (<u>...</u> and <strike>...</strike>)
The underline tag displays text with underline format.
The STRIKE tag displays text with a line (strike) through it.
Example
This is an example of <u>Underline</u> and <strike>Strike</strike>Tag.
Output
This is an example of Underline and Strike Tag.
4. Big and Small Tag(<big>...</big> and <small>...</small>)
The BIG tag increases the font size from its current value by 1 while The SMALL tag
reduces the font size from its current value by 1.
Example
This text will display <big>Big</big> and <small>Small</small> Tags.

Output
This text will display Big and small Tags.
5. Superscript and Subscript Tag ( <sup>...</sup> and <sub>...</sub>)
The SUP tag displays text as a superscript. A superscript appears slightly above the
baseline (top edge) and in a smaller font.
The SUB tag displays text as a subscript. A subscript appears slightly below the
baseline (bottom edge) and in a smaller font.
Example
This is an example <sup>Superscript</sup> and <sub>Subscript</sub> Tags.
Output
This is an example Superscript
and Subscript Tags.
6. Preformatted Tag(<pre>...</pre>)
The PRE element displays all white space and line breaks exactly as they appear
inside the <PRE> and </PRE> tags.
Example
<pre>
This is an example of pre tag
</pre>
Output
This is an example of pre tag
7. Address Tag(<address>...</address>)
It displays addresses in italic. The intent of the ADDRESS tag is that it shows address
information and is usually placed at the top or bottom of a document.
Example
<address>Harivandan College- Rajkot</address>
Output
Harivandan College- Rajkot
8. Basefont Tag (<basefont>...</basefont>)
The BASEFONT tag sets the default font size for text in the document. You can use
the BASEFONT tag anywhere in the header or body of a document to change the
base font, and you can use it multiple times to change the base font in different
parts of the document.
Attributes of Basefont tag
o color:
defines the desired font(text) color for entire document.
o size:
If specifies the font size from 1 (smallest) to 7 (largest). The default is 3. You
can make it larger or smaller by adding to or subtracting from it.
o face:
specifies a comma-separated list of font faces. Browser uses the first font in
the list if it is available, otherwise it uses the second font in the list if it is

available, nd so on. If none of the specified fonts are available, no font face
change occurs.
Example
<basefont size=”5” color=”red” face=”Monotype Corsiva”>
9. Font Tag(<font>...</font>)
The FONT tag lets you change the color, size, and typeface (font family) of the font.
All text between the <FONT> and </FONT> tags is displayed with the specified font
characteristics.
Attributes of font tag is same as <basefont> attributes
Example
<font size=”4” color=”blue” face=”arial”>
10. Marquee Tag(<marquee>...</marquee>)
Any text enclosed inside this element will scroll across the page. Place some text
between <MARQUEE> and a </MARQUEE> tag. The tag can also be applied on
images.
Attributes of marquee tag
 behavior:
This attribute specifies how the marquee should scroll. Valid values are :
“scroll”, “slide”.The default is scroll.
 direction:
With this attribute you can choose the direction in which your text will move.
The values are "left","right",”up”, “down”.
 height and width:
sets or retrieve the height and width of the marquee, value can be provided
in % or pixels
 scrollamount:
This attribute specifies the amount in pixels the marquee should scroll each
time it’s redrawn. The default value is “6”.
 scrolldelay:
This attribute specifies the amount in milliseconds between times the
marquee is redrawn. The default value is “85”.
 loop:
This attribute specifies the number of times the marquee should repeat itself
when it reaches the end of the message. The default is “infinite”.
Example
<marquee direction=”up” behaviour=”slide” scrollamount=”10”
scrolldelay=”100” loop=”5” height=”500” width=”500”>
This is an example of marquee tag
</marquee>

Formatting Tags
1. Break Line(<br>)
The <br> tag breaks the text there and moves to the next line.
2. Center Tag(<center>...</center>)
This tag is used to center align text. Headings, images and tables can be aligned.
Example
<center> Center Aligned on the Web Page </center>
3. Horizontal Rule tag(<hr>)
The <hr> tag helps you to include solid straight line on you page. If you want to break
your page into logical section.
Attributes used with <hr>tag
o width:
Specifies line width in pixels or by percentage. If you don't define a width for
your rule, it takes up the entire width of the page.
o size:
Specifies the of the horizontal rule.
o align:
Specifies the horizontal alignment of the rule as left(default), center, or
right.
Example
<hr width=”75%” size=”5”>
Anchor tag
A link is simply a connection between one hypertext document and another, created
by enclosing text or an image inside two anchor tags. Anchor tag consist of opening
and closing tag.
Attributes of anchor tag
 href: href stands for Hypertext Reference. The value of this attribute gives the
location (URL) of the page, which you wish to go to when the hypertext or an image
is clicked on. Also refer LINK, ALINK and VLINK attributes of BODY tag for colorful
links.
 target: specifies a window in which to show the destination document Special
target values are:
I. _blank = opens the destination document in a new unnamed window.
II. _self = opens the destination document in the same window as the one in
which the link was clicked.
Example
<a href=”test.html” target=”_blank”>Click Here</a>
URL provided in the href attribute can be provided using different way which is given below:

Image Tag
IMG TAG
The IMG tag specifies an image to be displayed in an HTML document. It doesn’t have
ending tag but have number of attributes for setting size, aligning the image.
Attributes of image tag
 src: The SRC attribute of IMG tag defines the name of the image file, which is to be
displayed
 height and width: specifies the height and width of the image, either in pixels or as a
percentage of the height and width of the window.
 alt: specifies text to be displayed if the browser does not support the IMG tag or if
the user has suspended image loading in the browser.
 border: specifies the width, in pixels, of a border around the image. The value must
be an integer.
 hspace and vspace: The HSPACE attribute specifies how much blank space the
browser should put to the left and right of the image, VSPACE specified the amount
of space to put above and below the image.
Example
<img src=”Winter.jpg” hspace=”20” vspace=”30” border=”3” align=”top” alt=”Winter
Image” height=”300” width=”300”>
List Tag
Lists are powerful tools for arranging similar elements together and giving visitors to your
site an easy way to get groups of information.
HTML provides three different kinds of lists:
i. Numbered List(Ordered List)
ii. Bulleted List(Unordered List)
iii. Definition List
1. Using Numbered Lists(Ordered List)
The OL tag displays an ordered, or numbered, list. You can specify <ol> to
pecify, of creating a numbered list. Use the LI tag to mark an individual list items.
<ol> tag has opening and </ol> closing tag.
Attributes of ol tag
 start: indicates the starting number for the list. The number must be a
positive integer.
 type: defines the type of numbering sequence used for each list item. The
value can be one of the following:
 A specifies a sequence of uppercase letters
 a specifies a sequence of lowercase letters
 I specifies a sequence of uppercase Roman numerals
 i specifies a sequence of lowercase Roman numeral
 1 specifies a sequence of numbers.
Example
<ol start=”3” type=”i”>
<li> Rajkot</li>
<li> Surat</li>

</ol>
Output:
I. Rajkot
II. Surat
2. Using Bulleted Lists(UnOrdered List)
The UL tag displays a bulleted list. You can specify <ul> to specify, of creating a
bulleted list. Use the LI tag to mark an individual list items. <ul> tag has opening and
</ul> closing tag.
Attributes of ul tag
 type: defines the type of bullet used for each list item. The value can be one
of the following:
 CIRCLE specifies a hollow bullet.
 DISC specifies a solid round bullet.
 SQUARE specifies a square bullet.
Example
<ul type=”circle”>
<li>Rajkot</li>
<li>Surat </li>
</ul>
Output
o Rajkot
o Surat
3. Using Definition List:
Definition List
The DL tag encloses a definition list. The intent of a definition list is to display lists of
terms and their corresponding definitions, such as in a glossary. A definition list
ontains terms, which are defined with the DT tag, and definitions, which are defined
with the DD tag.
Definition Term:
The DT tag specifies a term in a definition list. The DT tag must be used in a DL tag.
Usually a DT tag is followed by a DD tag that describes the term in the DT tag. The DT
Tag does not require a closing tag.
Definition Description:
The DD tag displays a definition description in a definition list. The DD tag must be
used within a DL tag and usually follows immediately after a DT tag that indicates the
term being defined. The DD tag does not require a closing tag.

Example
<dl>
<dt>Markup Language </dt>
<dd>HTML </dd>
<dd>XML </dd>
<dt>Scripting Language </dt>
<dd>JavaScript </dd>
</dl>
Output
Markup Language
HTML
XML
Scripting Language
JavaScript
Table Tag
Tables are used to give structure to data, links, images, and so forth on a page.
1. Table Tag
The <table> tag defines a table. Inside the TABLE tag, use the TR tag to define rows in
the table, use the TH tag to define row or column headings, and use the TD tag to define
table cells.
Attributes of table tag
 align: specifies the horizontal placement of the table. The value can be one of
the following
 Left: aligns the table on the left (the default).
 right: aligns the table on the right.
 center: aligns the table on the center
 bgcolor: sets the color of the background for the table. This color can be
overriden by a BGCOLOR tag in the TH, TR, or TD tags.
 border: indicates the thickness, in pixels, of the border to draw around the table.
Give the value as an integer. A value of 0 means the table has no border.
 cellpadding: determines the amount of space, in pixels, between the border of a
cell and the contents of the cell. The default is 1.
 e. cellspacing: determines the amount of space, in pixels, between individual
cells in a table. The default is 2.
 height and width: specifies the height and width of the table. The height and
width value can be a number of pixels, given as an integer, or a percentage of the
height of the page or parent element.
 g. background: sets or retrieve background image on the table with src attribute
specifying the path of an image.

2. TR tag:
The TR tag specifies a table row. Use the TR tag inside a TABLE tag. The TR tag can
contain TD tags, which indicate table cells.
Attributes of tr tag
 align: specifies the horizontal placement of the table.The value can be of the
following:
 CENTER centers the table .
 LEFT aligns the table to the left (the default).
 RIGHT aligns the table to the right.
 valign: specifies the vertical placement of the content in the cell:.The value can
be of the following:
 BASELINE aligns the content with the cell's baseline.
 BOTTOM aligns the content with the cell's bottom.
 MIDDLE centers the content within the cell (the default).
 TOP aligns the content with the cell's top.
 bgcolor: sets the default color of the background of the table row.
3. TD tag and TH tag:
The TD (table data) tag specifies text in a cell in a table. Use the TD tag inside a TR tag
inside a TABLE tag.
The TH (table heading) tag specifies a table cell whose contents are usually displayed in a
bolder font than regular table cells.
Attributes of td tag:
o align,valign,bgcolor same as tr tag’s attribute
o colspan: To make a cell span more than one columns, use the colspan=" "
attribute. Give the number as an integer.
o rowspan: To make a cell span more than one rows, use the rowspan=" "
attribute. Give the number as an integer.
o height and width: specifies the suggested height and width of the table cell, in
pixels.
4. caption(table caption):
The CAPTION tag defines a caption for a table. Place the CAPTION tag within the TABLE
tag.
A caption can be used to display a title for your table.
Attribute of caption tag
 align: specifies the placement of the caption within a table.The value can be any
of the following:
 BOTTOM places the caption at the bottom of the table.
 TOP places the caption at the top of the table. TOP is the default.
 LEFT places the caption on the left of the table.
 RIGHT places the caption on the right of the right of the table.

Example
<table border=”2” cellpadding=”5” cellspacing=”4” bgcolor=”violet” >
<tr>
<th colspan=”2”>Harivandana College</th> <tr> <tr>
<td>name</td> <td rowspan=”2”>Image</td> </tr> <tr>
<td>city</td>
</tr>
</table>
output
Frameset and Frame Tag
A frame is region of a window that acts as a window itself. The main window can contain
multiple frames, so that different regions of the window display different contents. A
frameset is a set of frames.
1. Frameset Tag
The FRAMESET tag defines a set of frames that appear in a web browser window.
The FRAMESET tag contains one or more FRAME tags that each describes a frame.
An HTML document that contains a FRAMESET tag cannot contain a BODY tag. You
can use FRAMESET tags nested inside FRAMESET tags.
Attributes of Frameset Tag
o cols: This attribute defines a frameset in columns. The default setting is one
column, which takes up 100% of the page. The value of each item in the
columnWidthList can be one of the following:
 Width of a frame in pixels.
 Width of a frame as a percentage of its parent frame or window.
 An asterisk (*), which means "as much space as possible," which is the
space left over after space has been allocated to all columns that specify
their width as pixel value or a percentage value . The total available left-
over space is divided equally between all columns that use an asterisk.
o rows: The rows attribute defines a frameset in rows. The default setting is
one row, taking up 100% of the page. The value of rows attribute is same as
cols specified in cols attribute.
o border: specifies the thickness of frame borders for all frames in an
outermost frameset. A setting of 0 causes all frames in the frameset to have
no border between them. A setting of 3 causes a border of 3 pixels. If no
BORDER tag is present, the default is 5 pixels. The BORDER tag can be used
only on an outermost FRAMESET tag.
o bordercolor: specifies the color of a frame's borders.
o frameborder: determines how frame borders are displayed. The frameborder
attribute enables you to turn a border on or off. You can individually specify

whether you want the frames within your frameset to have borders. The
value of the frameborder attribute
 1- to display the border
 0- to hide the border.
2. Frame Tag
The FRAME tag creates a frame, which is an individual, independently scrollable
region of a web browser. You can think of it as a window within a window. The
FRAME tag must be used within a FRAMESET tag.
Attributes of Frame tag
o Frameborder and bordercolor same as <frameset> tag’s attributes.
o marginheight and marginwidth: marginheight: specifies a margin, in pixels,
between the top and bottom edges of the frame and the frame contents.
marginwidth specifies a margin, in pixels, between the left and right edges of
the frame and the frame contents.
o name: specifies the name of the frame. The value of the NAME attribute
must begin with an alphanumeric character.
o noresize: specifies that users cannot resize the frame. If a frame adjacent to
an edge is not resizable, the entire edge is not resizable, and consequently
other frames adjacent to that edge are not resizable.
o scrolling: specifies whether scrollbars are available on a frame:
 YES specifies that scrollbars are always available.
 NO specifies that scrollbars are never available.
 AUTO specifies that the browser determines whether to display scroll
bars based on the size of the frame and its content. If you do not specify a
value for SCROLLING, the default value is AUTO.
o src: specifies the URL for the document to be displayed in the frame. If you
do not specify the SRC attribute, the frame is displayed with no content.
3. Noframes Tag
The content in the <noframes> element will be displayed only when someone visits the
site with a browser that doesn’t support frames. Frame-supporting browsers will ignore
it.
Example
<frameset cols=”20%,60%,*” border=10>
<frame src=”first.html” name=”first”>
<frameset rows=”50%,*”>
<frame src=”third.html” name=”third”>
<frame src=”fourth.html name=”four”>
</frameset>
<frame src=”second.html name=”second”>
</frameset>

Form Tag
The FORM tag creates an HTML form. The form can contain interface elements such as text
fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and
make choices.
All elements in the form must be defined between the <FORM> and </FORM> tags.Tthe
form can contain other elements such as headings, paragraphs, tables, and so on.
A document can have multiple forms, but forms cannot be nested -- you cannot have a
form within a form.
Attributes of Form Tag
o action: specifies the URL of the program to be invoked when the form is submitted.
The action can also be a mailto: URL if the form results are to be mailed to someone.
o method: specifies how information is sent to program invoked by submitting the
form.
 GET (the default) appends the input information to the URL which on most
receiving systems becomes the value of the environment variable
QUERY_STRING.
 POST sends the input information in a data body that is available on stdin
with the data length set in the environment variable CONTENT_LENGTH.
o name: specifies the name of the form. The name is not displayed on the form.
There are three HTML elements that you use to create input controls:
1. <input>
2. <select> and <option>
3. <textarea>
1. <input> Tag
The INPUT tag defines a form element that can receive user input. The TYPE attribute
determines the specific sort of form control to be created.
TYPE can be one of the following:
I. Input type=”Button”
A button apears in the form. You must specify JavaScript code as the value of
the ONCLICK attribute to determine what happens when the user clicks the
button.
Attributes
 name: specifies the name of the button. The name does not appear in the
form.
 value: specifies the text to be displayed in the button.
Example
<INPUT TYPE="button" VALUE="Close Window">
II. Input type=”Checkbox”
A checkbox is a toggle that the user can select (switch on) or deselect (switch
off.)
Attributes

 name: specifies the name of the input element. This value is the
name portion of the name/value pair for this element that is sent to
the server when the form is submitted.
 checked: indicates that the checkbox is displayed with a tick mark to
indicate that it is selected.
 value: specifies the value to be returned to the server if the checkbox
is selected when the form is submitted. The default value is ON.
Example
Music<input type=”checkbox” name=”hobby” value=”draw” checked>
Reading<input type=”checkbox” name=”hobby” value=”draw” checked>
III. Input type=”Radio”
Only one radio button in the set can be selected at one time. When the user
selects a button in the set, all other buttons in the set are deselected.
Attributes
 name: specifies the name of the input element. This value is the
name portion of the name/value pair for this element that is sent to
the server when the form is submitted. All radio buttons that have
the same name constitute a radio group.
 checked: indicates that the radio button is displayed selected.
 value: specifies the value to be returned to the server when the
radio button is selected and the form is submitted. The default value
is ON.
Example
Male<input type=”radio” name=”gender” value=”male” checked>
Female<input type=”radio” name=”gender” value=”female” >
IV. Input type=”Reset”
When a user presses a reset button, all elements in the form are reset to
their default values.
Attributes
 name: specifies the name of the input element.
 value: specifies the text to display on the face of the reset button.
Example
<input type=”reset” value=”Clear Form”>
V. Input type=”Submit”
When a user clicks a submit button, the form is submitted, which means that
the ACTION specified for the form is invoked.
Attributes
 value: specifies the text to display on the face of the submit button.
Example
<input type=”submit” value=”Login”>
VI. Input type=”text”
A text element is a single line text input field in which the user can enter text.

Attributes
 maxlength: specifies the maximum number of characters a text box
can accept.
 size: specifies the length of the input field, in characters.
 value: specifies the initial value of the text element.
Example
<input type=”text” maxlength=”10” size=”15” name=”firstname”>
VII. Input type=”Password”
A password element is a text input field in which each character typed is
Is played as a character such as * or a black dot to conceal the actual value.
Attributes are same as input type=”text”
Example
<input type=”password” name=”pass” size=”20”>
VIII. Input type=”Image”
This places an image, serving as a custom button, on an HTML form. When a
user clicks the image, the form is submitted to the server.
Attributes
 src: specifies the URL of the image to be displayed in the document.
 align: specifies the alignment of the image in relation to the
surrounding text. The default align is bottom. The possible values are
LEFT, RIGHT, TOP, ABSMIDDLE, ABSBOTTOM, TEXTTOP, MIDDLE,
BASELINE, and BOTTOM.
Example
<CENTER><INPUT TYPE="image" SRC="signnow.gif"></CENTER>
2. Select and option
SELECT TAG
The SELECT tag defines a selection list on an HTML form. A selection list displays a list of
options from which the user can select an item.
Attributes
 multiple: specifies that multiple items can be selected. If this attribute is
omitted, only one item can be selected from the list. If multiple is enabled, the
user usually needs to hold down the Shift key to select additional items.
 name: specifies the name of the select element.
 size: specifies the number of options visible when the form is displayed. If the
list contains more options than specified by size, the list is displayed with
scrollbars.
OPTION TAG
The OPTION tag specifies an option and placed inside a <select> tag. When the form
containing the selection list is submitted to the server, a name/value pair is sent for each
selected option in the list.

Attributes
 value:specifies a value that is returned to the server when the option is selected
and the form is submitted. When no VALUE attribute is present, the value
returned is the same as the text following the <OPTION> tag.
 Selected: specifies that the option is selected by default.
Example
<select name=”city” MULTIPLE>
<option SELECTED>Porbandar</option>
<option>Junagadh </option>
<option>Rajkot </option>
</select>
3. TextArea
The TEXTAREA tag defines a multiline input field on an HTML form. A text area field lets
the user enter words, phrases, or numbers.
Attributes
 cols: defines the width (number of characters per line) the text area can
accommodate without scrolling.
 name: specifies the name of the text area element.
 rows: defines the number of lines (number of rows) the text area can
accommodate without scrolling.
Example:
<textarea cols=”20” rows=”4” name=”addr”>Enter you address</textarea>

html-basic.pdf

More Related Content

Similar to html-basic.pdf (20)

Recently uploaded (20)

html-basic.pdf