HTML and DHTML

HTML Hyperlinks
• The HTML <a> tag defines a hyperlink.

• A hyperlink (or link) is a word, group of words, or
image that user can click on to jump to another
document.
• When you move the cursor over a link in a Web
page, the arrow will turn into a little hand.
• The most important attribute of the <a> element
is the href attribute, which indicates the link's
destination.
• By default, links will appear as follows in all
browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
HTML Link Syntax
• The HTML code for a link is simple.
<a href="url">Link text</a>
• The href attribute specifies the destination of a
link.
Example
• <a href="http://www.w3schools.com/">Visit
W3Schools</a>
which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to
W3Schools' homepage.
• Tip: The "Link text" doesn't have to be text. It

can be an image or any other HTML element.
HTML Links - The target Attribute
• The target attribute specifies where to open the
linked document.
• The example below will open the linked
document in a new browser window or a new
tab:
• Example
<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
• Following are possible options:
Option Description
_blank Opens the linked document
in a new window or tab.
_self Opens the linked document
in the same frame.
_parent Opens the linked document
in the parent frame.
_top Opens the linked document in
the full body of the window.
Targetframe Opens the linked document in a
named targetframe.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com">
This is a link</a>
</body>
</html>
Output:
This is a link
The following example which links
http://www.tutorialspoint.com at your page:
<!DOCTYPE html> <html> <head>
<title>Hyperlink Example</title> </head>
<body> <p>Click following link</p>
<a href="http://www.tutorialspoint.com"
target="_self">Tutorials Point</a> </body>
</html>
This will produce following result, where you
can click on the link generated Tutorials Point
to reach to the home page of Tutorials Point.
Setting Link Colors
• You can set colors of your links, active links
and visited links using link, alink and vlink
attributes of <body> tag.
Example
<!DOCTYPE html> <html> <head>
<title>Hyperlink Example</title> <base
href="http://www.tutorialspoint.com/">
</head> <body alink="#54A250" link="#040404"
vlink="#F40633"> <p>Click following link</p>
<a href="/html/index.htm" target="_blank"
>HTML Tutorial</a> </body> </html>
• This will produce following result. Just check
color of the link before clicking on it, next
check its color when you activate it and when
the link has been visited.
Click following link

HTML Tutorial
HTML IMAGE LINKS
• It's simple to use an image as hyperlink. We just
need to use an image inside hyperlink at the place
of text as shown below:
<!DOCTYPE html> <html> <head> <title>Image
Hyperlink Example</title> </head> <body>
<p>Click following link</p> <a
href="http://www.tutorialspoint.com"
target="_self"> <img src="/images/logo.png"
alt="Tutorials Point" border="0"/> </a> </body>
</html>
HTML Tables
• The HTML tables allow web authors to
arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
• The HTML tables are created using the
<table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to
create data cells.
Example
<!DOCTYPE html> <html> <head> <title>HTML
Tables</title> </head>
<body> <table border="1">
<tr> <td>Row 1, Column 1</td>
<td>Row 1, Column 2</td> </tr>
<tr> <td>Row 2, Column 1</td>
<td>Row 2, Column 2</td> </tr> </table> </body>
</html>
This will produce following result:
Here border is an attribute of <table> tag and it is used to

put a border across all the cells. If you do not need a
border then you can use border="0".
Table Heading
Table heading can be defined using <th> tag.

This tag will be put to replace <td> tag, which
is used to represent actual data cell.
Normally you will put your top row as table
heading as shown below, otherwise you can
use <th> element in any row.
• Example
• <!DOCTYPE html> <html> <head> <title>HTML
Table Header</title> </head> <body>
<table border="1"> <tr> <th>Name</th>
<th>Salary</th> </tr> <tr> <td>Ramesh
Raman</td> <td>5000</td> </tr> <tr>
<td>Shabbir Hussein</td> <td>7000</td> </tr>
</table> </body> </html>
Cellpadding and Cellspacing Attributes
• There are two attributes called cellpadding

and cellspacing which you will use to adjust
the white space in your table cells. The
cellspacing attribute defines the width of the
border, while cellpadding represents the
distance between cell borders and the content
within a cell.
Example
Table Cellpadding</title> </head> <body>
<table border="1" cellpadding="5"
cellspacing=“10"> <tr> <th>Name</th>
<th>Salary</th> </tr> <tr> <td>Ramesh
Raman</td> <td>5000</td> </tr> <tr>
<td>Shabbir Hussein</td> <td>7000</td>
</tr> </table> </body> </html>
Colspan and Rowspan Attributes
We use colspan attribute if we want to merge

two or more columns into a single column.
Similarly use rowspan if we want to merge
two or more rows.
Example
• <!DOCTYPE html> <html> <head>
<title>HTML Table Colspan/Rowspan</title>
</head> <body> <table border="1"> <tr>
<th>Column 1</th> <th>Column 2</th>
<th>Column 3</th> </tr> <tr><td
rowspan="2">Row 1 Cell 1</td><td>Row 1
Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell
3</td></tr> <tr><td colspan="3">Row 3 Cell
1</td></tr> </table> </body> </html>
Tables Backgrounds
You can set table background using one of the

following two ways:
• bgcolor attribute - You can set background
color for whole table or just for one cell.
• background attribute - You can set background
image for whole table or just for one cell.
You can also set border color also using
bordercolor attribute.
Example
Table Background</title> </head> <body>
<table border="1" bordercolor="green"
bgcolor="yellow"> <tr> <th>Column 1</th>
<th>Column 2</th> <th>Column 3</th> </tr>
<tr><td rowspan="2">Row 1 Cell
1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr> <tr><td>Row 2 Cell
2</td><td>Row 2 Cell 3</td></tr> <tr><td
colspan="3">Row 3 Cell 1</td></tr> </table>
</body> </html>
Here is an example of using background attribute.
Here we will use an image available in /images
directory.
• Example
<!DOCTYPE html> <html> <head> <title>HTML Table
Background</title> </head> <body> <table
border="1" bordercolor="green"
background="/images/test.png"> <tr>
<th>Column 1</th> <th>Column 2</th>
<th>Column 3</th> </tr> <tr><td
rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell
2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2
Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td
colspan="3">Row 3 Cell 1</td></tr> </table>
</body> </html>
Table Height and Width
• You can set a table width and height using

width and height attributes. You can specify
table width or height in terms of pixels or in
terms of percentage of available screen area.
• Example
Table Width/Height</title> </head> <body>
<table border="1" width="400" height="150">
<tr> <td>Row 1, Column 1</td> <td>Row 1,
Column 2</td> </tr> <tr> <td>Row 2, Column
1</td> <td>Row 2, Column 2</td> </tr>
</table> </body> </html>
• Table Caption
The caption tag will serve as a title or
explanation for the table and it shows up at the
top of the table. This tag is deprecated in
newer version of HTML/XHTML.
• Example
Table Caption</title> </head> <body> <table
border="1" width="100%"> <caption>This is
the caption</caption> <tr> <td>row 1, column
1</td><td>row 1, column 2</td> </tr> <tr>
<td>row 2, column 1</td><td>row 2, columnn
2</td> </tr> </table> </body> </html>
Table Header, Body, and Footer
• Tables can be divided into three portions: a header, a
body, and a foot. The head and foot are rather similar
to headers and footers in a word-processed
document that remain the same for every page, while
the body is the main content holder of the table.
• The three elements for separating the head, body,
and foot of a table are:
• <thead> - to create a separate table header.
• <tbody> - to indicate the main body of the table.
• <tfoot> - to create a separate table footer.
• A table may contain several <tbody> elements to
indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should appear
before <tbody>
• Example
• <!DOCTYPE html> <html> <head>
<title>HTML Table</title> </head> <body>
<table border="1" width="100%"> <thead>
<tr> <td colspan="4">This is the head of the
table</td> </tr> </thead> <tfoot> <tr> <td
colspan="4">This is the foot of the table</td>
</tr> </tfoot> <tbody> <tr> <td>Cell 1</td>
<td>Cell 2</td> <td>Cell 3</td> <td>Cell
4</td> </tr> </tbody> </table> </body>
</html>
TABLE ELEMENT - ATTRIBUTES
• DIR – specifies the direction of text in a table
- Default direction of text is from left-to- right
- Syntax to specify right-to-left direction
<TABLE DIR= “RTL”>….</TABLE>
• SUMMARY – provides a brief description of the

purpose and structure of a table.
- browser uses this attribute when it
represents a table for non – visual media like sound files
- <TABLE SUMMARY = text>
• FRAME
- Specifies which side of the border is visible in the browser
- must specify the border attribute before the frame attribute is
specified
- <TABLE FRAME = value> , Values of the Frame Attribute
VALUE DESCRIPTION
VOID Removes all external borders
ABOVE Displays external border only at the top of the table
BELOW Displays external border only at the bottom of the
table
HSIDES Displays external border at the top and bottom of
the table
VSIDES Displays external border at the right and left sides
of the table
LHS Displays external border only on the left hand edge
of the table
RHS Displays external border only on the Right hand
edge of the table
• RULES
- Used to specify border between cells
- specify the BORDER attribute before the RULES attribute
- <TABLE RULES = “value”>
- Possible values of the RULES:
VALUE DESCRIPTION
NONE Removes all internal rules from the table
GROUPS Displays rules between row groups and column groups
ROWS Displays rules between the rows of the table
COLS Displays rules between columns of the table
ALL Displays rules between all rows and columns

TABLE ROW ELEMENT- ATTRIBUTES
• ALIGN
- Used to specify the horizontal alignment of the content for all
cells of a row
- By default the browser aligns the cell content to the left
- <TR ALIGN = “LEFT,RIGHT, or CENTER”>
• VALIGN
- Used to specify the vertical alignment of the cell content
for all cells of a row
- By default the browser aligns the cell content at the
center
- <TR VALIGN = “TOP,BOTTOM, or MIDDLE”>
• BGCOLOR
- used to specify the background color of the
row
- <TR BGCOLOR = “#RRGGBB”>
TABLE DATA ELEMENT- ATTRIBUTES
• ABBR - to provide an abbreviated form of a
cell’s content
• AXIS – to specify the category of a cell , each
category forms an axis
• HEADERS – specifies the header information for a
data cell
• SCOPE – to specify the header information for a
set of data cells for which the header
information is already specified
• ALIGN – specifies the horizontal alignment of
data within a cell (same as used for TR tag)
• VALIGN - to specify the vertical alignment of
the data within a cell
• Example
• This table, which lists vehicle details, shows
the abbr attribute at th and td level:
• <table border="1"> <tr> <th abbr="Make">Car
manufacturer (make)</th> <th
abbr="Model">Vehicle model
(name/spec)</th> <th abbr="Revised">Date
of last revision </th> </tr> <tr> <td
abbr="VW">Volkswagen</td> <td
abbr="Golf">Golf 2.8 GTi</td> <td
abbr="2007">June 2007</td> </tr> </table>
• Example
• In this code, four table headers are grouped
into three categories—name, contact, and
location—using axis:
• <tr> <td axis="name">Fred</td> <td
axis="contact">fred@megacorp.com</td> <td
axis="contact">123456</td> <td
axis="location">1/A</td> </tr>
• Example
• <table border="1"> <tr> <th colspan="4"
id="hdr_work">Work Contact Points</th> </tr>
<tr> <th id="hdr_n">Name</th> <th
id="hdr_e">Email</th> <th id="hdr_p">Phone</th>
<th id="hdr_f">Floor/Block</th> </tr> <tr> <td
headers="hdr_work hdr_n">Fred</td> <td
headers="hdr_work
hdr_e">fred@megacorp.com</td> <td
headers="hdr_work hdr_p">123456</td> <td
headers="hdr_work hdr_f">1/A</td> </tr> </table>
• Example
• The information “Acme Industries” is
associated with all the cells in its row:
• <tr> <th>Company</th> <th>Employees</th>
<th>Founded</th> </tr> <tr> <td
scope="row">Acme Industries</td>
<td>1000</td> <td>1978</td> </tr>
• Example
• Here, the browser default alignment of "left"
in the td is overridden to align the content
"right":
• <tr> <td align="right">Fred</td> <td
align="right">fred@megacorp.com</td> <td
align="right">123456</td> <td rowspan="2"
align="right">1/A</td> </tr>
• Example
• The valign is set to "bottom" for each of these
td elements:
• <tr> <td valign="bottom">Alison</td> <td
valign="bottom">alison@megacorp</td> <td
valign="bottom">888652</td> </tr>
IMAGES
• Images helps to present the ideas in a better

way
• It improves the appearance of the HTML
page
• Graphs or charts can also be added as
images (gif & jpeg)
The <BODY> Tag: BACKGROUND
attribute
• Used to add an image as a background in an HTML
page
• <BODY BACKGROUND = “ image file name”>
</BODY>
• Complete path to image file should be given
• If the image should be static (eg:logo) the attribute
BGPROPERTIES should have the value FIXED
• <BODY BACKGROUND = “ logo.gif” BGPROPERTIES =
“FIXED” >
</BODY>
The <img> Tag and the Src
Attribute
• Image element used to add images along with text
• The SRC attribute specifies the complete path of the
image file.
• Additional attributes:
WIDTH
HEIGHT
HSPACE
VSPACE
ALIGN
ALT
HTML Images - The Alt Attribute
• The required alt attribute specifies an
alternate text for an image, if the image
cannot be displayed.
• <img src="smiley.gif" alt="Smiley face">
• The alt attribute provides alternative

information for an image if a user for some
reason cannot view it (because of slow
connection, an error in the src attribute).
HTML Images - Set Height and Width of an Image
• The height and width attributes are used to specify the
height and width of an image.
• The attribute values are specified in pixels by default:
• <img src="smiley.gif" alt="Smiley face" width="42"
height="42">
• Tip: It is a good practice to specify both the height and

width attributes for an image. If these attributes are
set, the space required for the image is reserved when
the page is loaded. However, without these attributes,
the browser does not know the size of the image.
ALIGN ATTRIBUTE
• Not supported in HTML5.
• Specifies the alignment of an image according
to surrounding elements
• Possible values :
top
middle
left
right
HSPACE Attribute
• Values in pixels
• Specifies the whitespace/ margin on left and
right side of an image
• <IMG HSPACE = value>
VSPACE
• Values in pixels
• Specifies the whitespace / margin on top and
bottom of an image
• <IMG VSPACE = value>
Image Maps
• Used for creating images as Hyperlinks

• Image map are created by placing multiple
hyperlinks on a single image
• For this image is divided into several sections
and each section is linked to a different HTML
page
• To divide an image into sections , the
coordinates of the image should be known
CREATING AN IMAGE MAP
• Image maps are created in two ways:
- Using Specialized software
- Writing HTML code
• Commonly used s/w is Mapthis or Microsoft
Frontpage
• HTML code for creating an image map:
<IMG SRC = “hchart.gif” USEMAP =
“#Desig”>
• USEMAP attribute of image tag is used to
specify the map that we need to use for an
• The <MAP>…</MAP> tags are used to create a
map by specifying the name of the map
• The <AREA> tag is used to specify the shape and
coordinates of a hyperlink section on the image
• SHAPE attribute specifies the shape such as
circle, rectangle or polygon
• COORDS specifies the starting position of the
section , followed by the width and height of the
shape
• HREF specifies the HTML page that must be
referenced by the hyperlink on the section of the
image
<HTML>
<BODY>
<MAP NAME = “Desig”>
<AREA HREF = “ceo.html” SHAPE = “RECT”
COORDS = “ 81, 18, 252,41”>
<AREA HREF = “vpaf.html” SHAPE = “RECT”
COORDS = “ 15, 83, 160, 120”>
<AREA HREF = “vpsm.html” SHAPE = “RECT”
COORDS = “ 164, 83, 311, 121”>
</MAP>
</BODY>
</HTML>
Special Characters & Symbols
 These Characters are recognized in HTML as they

begin with an ampersand and end with with a semi-
colon e.g. &value; The value will either be an entity
name or a standard ASCII character number. They
are called escape sequences.
 The next table represents some of the more
commonly used special characters. For a
comprehensive listing, visit the W3C’s section on
special characters at:
http://www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html
51
Special Characters & Symbols
Special Entity Special Entity
Character Name Character Name
Ampersand & & Greater-than > >
sign
Asterisk &lowast; Less-than sign < <
∗∗
Cent sign ¢ ¢ Non-breaking
space
Copyright © © Quotation mark " "
Fraction one ¼ Registration ® ®
qtr ¼ mark
Fraction one ½ Trademark ™
52
half ½ sign ™
HTML <meta> Tag
Definition and Usage
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the
page, but will be machine parsable.
• Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
• The metadata can be used by browsers (how to
display content or reload page), search engines
(keywords), or other web services.
HTML <meta> Tag
• <meta> tags always goes inside the <head>
element.
• Metadata is always passed as name/value
pairs.
• meta tags do not impact physical appearance
of the document
• The content attribute must be defined if the
name or the http-equiv attribute is defined. If
none of these are defined, the content
attribute cannot be defined.
• In HTML the <meta> tag has no end tag.
Examples
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS,
XML, XHTML, JavaScript">
• Define a description of your web page:
<meta name="description" content="Free Web
tutorials on HTML and CSS">
• Define the author of a page:
<meta name="author" content="Hege Refsnes">
• Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Attributes
Attribute Value Description
1.charset character_set Specifies the
character encoding
for the HTML
document
1.content text Gives the value
associated with the
http-equiv or name
attribute
Attributes
http-equiv content-type Provides an HTTP
default-style header for the
refresh information/value
of the content
attribute
name application-name Specifies a name
author for the metadata
description
generator
keywords
Attributes

Scheme format/URI Specifies a scheme
to be used to
interpret the value
of the content
attribute
Example
Describe metadata within an HTML document:
• <head>
<meta charset="UTF-8">
<meta name="description" content="Free
Web tutorials">
<meta name="keywords"
content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege
Refsnes">
</head>
• Here's a code example of meta tags:
• <head>
<title>Not a Meta Tag, but required anyway
</title>
<meta name="description"
content="Awesome Description Here">
<meta http-equiv="content-type"
content="text/html;charset=UTF-8"> </head>
Example of redirecting current page to another page
after 5 seconds, to redirect page immediately do not
specify content attribute
<!DOCTYPE html> <html> <head> <title>Meta Tags
Example</title>
<meta name="keywords" content="HTML, Meta Tags,
Metadata" />
<meta name="description" content="Learning about
Meta Tags." />
<meta name="revised" content="Tutorialspoint,
3/7/2014" />
<meta http-equiv="refresh" content="5"
url=http://www.tutorialspoint.com" />
</head> <body> <p>Hello HTML5!</p> </body>
</html>
HTML FORMS
• A form is a collection of fields that the user
uses to gather information from the people
visiting the web site
• Forms acts as an user interaction on the web,
it provides data by typing text, clicking radio
buttons, selecting check boxes, selecting
options from drop down lists etc.,
• For example during user registration we
would like to collect information such as
name, email address, credit card, etc.
HTML FORMS
• A form will take input from the site visitor and

then post it to a back-end application such as
CGI, ASP Script or PHP script etc.
• The back-end application will perform
required processing on the passed data based
on defined business logic inside the
application.
THE FORM TAG SYNTAX
• The HTML <form> tag is used to create an
HTML form and it has following syntax:
• <form action="Script URL" method="GET|
POST” form elements like input, textarea
etc.</form>
list of the most frequently used form attributes:
Attribute Description
action Backend script ready to process
the passed data.
method Method to be used to upload
data. The most frequently used
are GET and POST methods.
target Specify the target window or
frame where the result of the
script will be displayed. It takes
values like _blank, _self, _parent etc.
form attributes
Enctype enctype attribute used to specify
how the browser encodes the data
before it sends it to the server.
Possible values are:
• application/x-www-form-urlencoded - This is the
standard method most forms uses in simple
scenarios.
• mutlipart/form-data - This is used when we want to
upload binary data in the form of files like image,
word file etc.
HTML Form Controls
The different types of form controls used to collect
data using HTML form are:
• Text Input Controls
• Checkboxes Controls
• Radio Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
Text Input Controls
There are three types of text input used on forms:
• Single-line text input controls - This control is used
for items that require only one line of user input,
such as search boxes or names. They are created
using HTML <input> tag.
• Password input controls - This is also a single-line
text input but it masks the character as soon as a
user enters it. They are also created using HTML
<input> tag.
• Multi-line text input controls - This is used when the
user is required to give details that may be longer
than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.
Example
Here is a basic example of a single-line text input

used to take first name and last name:
• <!DOCTYPE html><html> <head><title>Text
Input Control</title></head><body>
<form >First name: <input type="text"
name="first_name" /><br>Last name: <input
type="text" name="last_name"
/></form></body></html>
Attributes
Following is the list of attributes for <input> tag for
creating text field.
type Indicates the type of input control and for
text input control it will be set to text.
name Used to give a name to the control which
is sent to the server to be recognized and
get the value.
value This can be used to provide an initial value
inside the control.
Attributes
size Allows to specify the width of the

text- input control in terms of characters.
maxlength Allows to specify the maximum number of

characters a user can enter into the text
box.
Password input controls
Example
Here is a basic example of a single-line
password input used to take user password:
<!DOCTYPE html><html><head><title>Password
Input Control</title></head><body><form
>User ID : <input type="text"
name="user_id" /><br>Password: <input
type="password" name="password"
Attributes
Following is the list of attributes for <input> tag for
creating password field.
password input control it will be set to
password.
name Used to give a name to the control which
is sent to the server to be recognized and
get the value.
value This can be used to provide an initial value
inside the control.
Attributes
size Allows to specify the width of the

text-input control in terms of
characters.
maxlength Allows to specify the maximum number
of characters a user can enter into the
text box.
Multiple-Line Text Input Controls
• Example
Here is a basic example of a multi-line text input
used to take item description:
<!DOCTYPE html><html><head><title>Multiple-
Line Input Control</title></head><body>
<form>Description : <br /><textarea rows="5"
cols="50" name="description">Enter
description
here...</textarea></form></body></html>
Attributes
Following is the list of attributes for <textarea> tag.

name Used to give a name to the control
which is sent to the server to be
recognized and get the value.
rows Indicates the number of rows of text
area box.
cols Indicates the number of columns of
text area box
Checkbox Control
• Checkboxes are used when more than one option is
required to be selected. They are also created using
HTML <input> tag but type attribute is set to
checkbox.
• Example
• Here is an example HTML code for a form with two
checkboxes:
• <!DOCTYPE html><html><head><title>Checkbox
Control</title></head><body><form><input
type="checkbox" name="maths" value="on">
Maths<input type="checkbox" name="physics"
value="on"> Physics</form></body></html>
Attributes
type Indicates the type of input control and
for checkbox input control it will be set
to checkbox.
name Used to give a name to the control
which is sent to the server to be
recognized and get the value.
value The value that will be used if the
checkbox is selected.
checked Set to checked if you want to select it
by default.
Radio Button Control
• Radio buttons are used when out of many options, just
one option is required to be selected. They are also
created using HTML <input> tag but type attribute is
set to radio.
• Example
Here is example HTML code for a form with two radio
buttons:
<!DOCTYPE html><html><head><title>Radio Box
Control</title></head><body><form><input
type="radio" name="subject" value="maths">
Maths<input type="radio" name="subject"
value="physics"> Physics</form></body></html>
Attributes
checkbox input control it will be set to radio.
name Used to give a name to the control which is
sent to the server to be recognized and get
the value.
value The value that will be used if the radio box is
selected.
checked Set to checked if you want to select it by
default.
Select Box Control
• A select box, also called drop down box which provides
option to list down various options in the form of drop
down list, from where a user can select one or more
options.
• Example
Here is example HTML code for a form with one drop
down box
<!DOCTYPE html><html><head><title>Select Box
Control</title></head><body><form><select
name="dropdown"><option value="Maths"
selected>Maths</option><option
value="Physics">Physics</option></select></form>
</body></html>
Attributes
• Following is the list of important attributes of
<select> tag:
name Used to give a name to the control which is
the value.
size This can be used to present a scrolling list
box.
multiple If set to "multiple" then allows a user to
select multiple items from the menu.
Following is the list of important attributes of
<option> tag:
value The value that will be used if an
option in the select box box is
selected.
Selected Specifies that this option should be
the initially selected value when the
page loads.
label An alternative way of labeling
options
File Upload Box
• If you want to allow a user to upload a file to your
web site, you will need to use a file upload box, also
known as a file select box. This is also created using
the <input> element but type attribute is set to file.
• Example
Here is example HTML code for a form with one file
upload box:
• <!DOCTYPE html><html><head><title>File Upload
Box</title></head><body><form><input type="file"
name="fileupload" accept="image/*"
Following is the list of important
attributes of file upload box:
• name
• Used to give a name to the control which is
the value.
• accept
• Specifies the types of files that the server
accepts.
Button Controls
• There are various ways in HTML to create clickable buttons.
You can also create a clickable button using <input> tag by
setting its type attribute to button. The type attribute can take
the following values:
• Type Description
Submit This creates a button that automatically submits a
form.
reset This creates a button that automatically resets
form controls to their initial values.
button This creates a button that is used to trigger a
client-side script when the user clicks that button.
Image This creates a clickable button but we can use an
image as background of the button.
Example
• Here is example HTML code for a form with
three types of buttons:
• <!DOCTYPE html><html><head><title>File
Upload
Box</title></head><body><form><input
type="submit" name="submit" value="Submit"
/><input type="reset" name="reset"
value="Reset" /><input type="button"
name="ok" value="OK" /><input
type="image" name="imagebutton"
src="/html/images/logo.png"
Hidden Form Controls
• Hidden form controls are used to hide data inside
the page which later on can be pushed to the
server.
• This control hides inside the code and does not
appear on the actual page. For example, following
hidden form is being used to keep current page
number.
• When a user will click next page then the value of
hidden control will be sent to the web server and
there it will decide which page has to be displayed
next based on the passed current page.
Example
• Here is example HTML code to show the usage
of hidden control:
• <!DOCTYPE html><html><head><title>File
Upload
Box</title></head><body><form><p>This is
page 10</p><input type="hidden"
name="pagename" value="10" /><input
type="submit" name="submit" value="Submit"
/><input type="reset" name="reset"
value="Reset" /></form></body></html>
DHTML (Dynamic HTML)
• HTML is based on thinking of a web page like a printed
page: a document that is rendered once and that is
static once rendered.
• The idea behind Dynamic HTML (DHTML), however, is to
make every element of a page interactively controllable,
before, during, and after the page is rendered. This
means we can make things move, appear and
disappear, overlap, change styles, and interact with the
user to our heart’s content.
• Through DHTML, users get a more engaging and
interactive web experience without constant calls to a
web server.
Definition
• DHTML is not a language itself, but is a
combination of:
– HTML 4.0 (or XHTML 1.0)
– JavaScript – the Web’s standard scripting
language
– Cascading Style Sheets (CSS) – styles dictated
outside a document’s content
– Document Object Model (DOM) – a means of
accessing a document’s individual elements
– DHTML = HTML + CSS + JavaScript + DOM
Why comes DHTML
• To make Web pages interactive.
• HTML pages have static nature.
• DHTML provides us with enhanced creative
control so we can manipulate any page
element at any time.
• It is the easiest way to make Web pages
interactive.
• It doesn’t increase server workload and
require special software to support.
Like most web technologies, DHTML comes with
its share of pros and cons.
• Advantages:
– File sizes are small: DHTML files are small compared to other
interactive media like Flash, Shockwave, and Java
– It’s supported by major browser manufacturers
– DHTML is a standard
– No plug-ins, ActiveX controls, or Java is necessary
– There are fewer calls to the server
• Disadvantages:
– Only newer browsers support the DHTML “standard”

– Netscape and MS have different DHTML implementations

HTML and DHTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and DHTML

Uploaded by

Copyright:

Available Formats

HTML Hyperlinks

• The HTML <a> tag defines a hyperlink.

• Tip: The "Link text" doesn't have to be text. It

Click following link

This will produce following result:

Here border is an attribute of <table> tag and it is used to

Table heading can be defined using <th> tag.

• There are two attributes called cellpadding

We use colspan attribute if we want to merge

You can set table background using one of the

• You can set a table width and height using

• SUMMARY – provides a brief description of the

GROUPS Displays rules between row groups and column groups

ROWS Displays rules between the rows of the table

COLS Displays rules between columns of the table

ALL Displays rules between all rows and columns

• Images helps to present the ideas in a better

• <img src="smiley.gif" alt="Smiley face">

• The alt attribute provides alternative

• Tip: It is a good practice to specify both the height and

• Used for creating images as Hyperlinks

 These Characters are recognized in HTML as they

Attribute Value Description

• A form will take input from the site visitor and

Here is a basic example of a single-line text input

size Allows to specify the width of the

maxlength Allows to specify the maximum number of

size Allows to specify the width of the

Following is the list of attributes for <textarea> tag.

– Only newer browsers support the DHTML “standard”

You might also like