Scribd
Upload
15 views67 pages

Unit 2

Uploaded by

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

Unit 2

Uploaded by

rupakkumar47071
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

UNIT 2

HTML <comment> tag


• The HTML <comment> tag allows authors to
comment their HTML code. This tag is
supported by IE only.
• It is recommended to use <!--....--> to
comment your tags. This tag is compatible to
all browsers.
• Note − The <comment> tag deprecated in
HTML5. Do not use this element.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML <!--....--> Tag</title>
</head>
<body>
<comment>This is a commented line in IE</comment>
<!-- This is a commented line supported by almost every
browser. It will not appear in output as its a comment. -->
</body>
</html>
HTML <img> Tag
Definition and Usage
• The <img> tag is used to embed an image in an HTML page.
• Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image, if the image for some reason cannot
be displayed

Note: Also, always specify the width and height of an image. If width and height are
not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside
an <a> tag (see example below).

<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src="img_girl.jpg" alt="Girl in a jacket“ width="500" height="600">
</body>
</html>
HTML <map> Tag
Definition and Usage
• The <map> tag is used to define an image map. An image map is an image with clickable areas.
• The required name attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.
• The <map> element contains a number of <area> elements, that defines the clickable areas in the
image map.

Example

<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about
the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href=“1.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href=“2.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href=“3.html">
</map>
</body>
</html>
<figcaption>
Definition and Usage
• The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
• While the content of the <figure> element is related to the main flow, its position is independent of the main flow,
and if removed it should not affect the flow of the document.
• Tip: The <figcaption> element is used to add a caption for the <figure> element.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>The figure and figcaption element</h1>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
HTML <svg> Tag
Definition and Usage
• The <svg> tag defines a container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text, and
graphic images.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>The svg element</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke=“red" stroke-width="4" fill="yellow"
/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
HTML - <a> Tag
Description:
• The HTML <a> tag is used for creating a hyperlink to either
another document, or somewhere within the current document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML a Tag</title>
</head>
<body>
<p>This is a link to <a href =
"http://www.amrood.com">AMROOD.com</a>
</p>
</body>
</html>
Conti…
• The HTML <a> tag also supports the following
additional attributes −
Charset: character_encoding
Defines the character encoding of the linked
document.
Coords:
• if shape = "rect" then coords = "left, top, right,
bottom"
• if shape = "circ" then coords =
"centerx,centery,radius"
• if shape = "poly" then coords = "x1, y1, x2,
y2,..,xn,yn"
Conti…
• Specifies the coordinates appropriate to the
shape attribute to define a region of an image
for image maps.
Download: filename
This downloads the target when user clicks on
the hyperlink.
Href: URL
Specifies the URL of a page or the name of the
anchor that the link goes to.
Name: section name
Marks an area of the page that a link jumps to.
Conti…
Rel: alternate designates style sheet start next prev
contents index glossary copyright chapter section
subsection appendix help bookmark.
Describes the relationship between the current
document and the destination URI.
Rev: alternate designates style sheet start next prev
contents index glossary copyright chapter section
subsection appendix help bookmark.
Specifies the relationship between the target URL
and the current document.
Shape:rect- rectangle, circ- circle, poly- polygon
Specifies the shape of the image map
Conti…
Target:
_blank
_parent
_self
_top
Where to open the target URL.
• _blank - the target URL will open in a new window.
• _self - the target URL will open in the same frame as it was
clicked.
• _parent - the target URL will open in the parent frameset.
• _top - the target URL will open in the full body of the
window.
Type: mime_type
Specifies the MIME (Multipurpose Internet Mail Extensions)
type of the target URL
HTML - <abbr> Tag
Description
• The HTML <abbr> tag is used for indicating an abbreviation like
etc., pvt.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML abbr Tag</title>
</head>
<body>
<p> <abbr title = "Private">pvt.</abbr> <br />
<abbr title = "International Cricket Council">ICC.</abbr> promotes
the global game. <br />
</p>
</body>
</html>
HTML - <address> Tag
Description
• The HTML <address> tag is used for indicating an
address. The address usually renders in italic.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML address Tag</title>
</head>
<body>
<address> 600 Wisdon Apartments<br /> Filmcity,
Kondiura<br /> New Delhi - 50027 </address>
</body>
</html>
HTML - <area> Tag
Description
• The HTML <area> tag is used for defining an area in an image map.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML area Tag</title>
</head>
<body>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm"
alt = "Perl Tutorial" target = "_blank" />
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href =
"/html/index.htm" target = "_blank" />
<area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm"
target = "_blank" />
</map>
</body>
</html>
Conti…
<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more
about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
<aside> tag
Description
• The HTML <aside> tag is used to specify a section of a page aside
from the related section. This tag can be used for glossary
definitions, author biography, author profile etc.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML aside Tag</title>
</head>
<body>
<aside> <h3>Java History</h3>
<p>Java is a programming language developed by James Gosling in
1994.</p>
</aside>
</body>
</html>
HTML - <audio> Tag
Description
• The HTML <audio> tag is used to embed audio in web pages.
<!DOCTYPE html>
<html>
<head>
<title>HTML audio Tag</title>
</head>
<body>
<p>Click on Play button...</p>
<p>(Song: Kalimba which is provided as a Sample Music in
Windows)</p>
<audio controls> <source src = "/html/Kalimba.mp3" type =
"audio/mpeg">
</audio>
</body>
</html>
<track>
• The <track> tag specifies text tracks for <audio> or <video> elements.
• This element is used to specify subtitles, caption files or other files containing text,
that should be visible when the media is playing.
• Tracks are formatted in WebVTT format (.vtt files).

Example

<html>
<body>
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
</body>
</html>
HTML - <base> Tag
Description
• The HTML <base> tag is used to specify a base URI, or URL, for
relative links.
• For example, you can set the base URL once at the top of your
page in header section, then all subsequent relative links will use
that URL as a starting point.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href = "https://www.tutorialspoint.com" />
</head>
<body> HTML: <img src = "/images/html.gif" />
</body>
</html>
Conti...
Attribute Value Description

href URL Specifies the URL of a page or the name of the anchor that
the link goes to.

target _blank Where to open the target URL.


_parent
_self _blank − the target URL will open in a new window.
_top _self − the target URL will open in the same frame as it was
clicked.

_parent − the target URL will open in the parent frameset

_top − the target URL will open in the full body of the window
HTML - <basefont> Tag
Description
• The HTML <basefont> tag is used to specify a base font for the
document to use. This base font is applied to complete document.
This tag is depreciated now.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML basefont Tag</title>
</head>
<body> <basefont face = "cursive,serif" color = "#ff9900" size = "4"/>
<p>The HTML basefont tag is now deprecated. You should use CSS
font to set font properties instead.</p>
</body>
</html>
Conti…
• The HTML <basefont> tag also supports the
following additional attributes −
Attribute Value Description

color rgb(x,x,x) Deprecated −


#xxxxxx Specifies the color
colorname of the text.

face font names Deprecated −


separated by Specifies the font
comma family of the text.

size 1 to 7 Deprecated −
Specifies the font
size of the text.
HTML - <bdo> Tag
Description
• The HTML <bdo> tag is used to override the default text
direction.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML bdo Tag</title>
</head> <body>
<bdo dir = "rtl">Here's some English embedded in text in
another language requiring a right-to-left
presentation.</bdo>
</body>
</html>
Conti…
• The HTML <bdo> tag also supports the
following additional attributes −

Attribute Value Description

dir ltr|rtl Defines the text


direction.
HTML - <bdi> Tag
Description
• The HTML <bdi> tag is Bi-directional isolation element which is used to embed text
with a different direction from another text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML bdi Tag</title>
</head>
<body>
<p>Tutorialspoint list of tutorials:</p>
<ul>
<li>Web: <bdi>HTML</bdi></li>
<li>Programming: <bdi>Java</bdi></li>
<li>Scripting: <bdi>VBScript</bdi></li>
<li>Mobile: <bdi>Android</bdi></li>
</ul>
</body>
</html>
HTML - <bgsound> Tag
Description
• The HTML <bgsound> tag is used to play a soundtrack in the
background. This tag is for Internet Explorer only.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML bgsound Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mdi"/>
<p>This does create any result on the screen but it plays sound file in
the background.</p>
</body>
</html>
HTML - blink Tag
Description
• The HTML <blink> tag is used to enclose a text to make it
blink. This tag was supported by Netscape and now this is
obsolete.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML blink Tag</title>
</head>
<body>
<blink>This text will blink in Netscape Version 5.0</blink>
</body>
</html>
HTML - <body> Tag
Description
• The HTML <body> tag is used for indicating the
main content section of the HTML document.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML body Tag</title>
</head>
<body> Body of the document... </body>
</html>
Conti…
• The HTML <body> tag also supports the following additional attributes −
Attribute Value Description

alink rgb(x,x,x) Deprecated − Specifies the color of the active links


#xxxxxx in the document.
colorname
background URL Deprecated − Specifies the background image file
path.
bgcolor rgb(x,x,x) Deprecated − Specifies the background color.
#xxxxxx
colorname
link rgb(x,x,x) Deprecated − Specifies the color of all the links in
#xxxxxx the document.
colorname
text rgb(x,x,x) Deprecated − Specifies the color of the text in the
#xxxxxx document.
colorname
vlink rgb(x,x,x) Deprecated − Specifies the color of the visited links
#xxxxxx in the document.
colorname
HTML - <blockquote> Tag
Description
• The HTML <blockquote> tag is used for indicating long quotations (i.e. quotations
that span multiple lines). It should contain only block-level elements within it, and
not just plain text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML blockquote Tag</title>
</head>
<body>
<blockquote>Browsers generally render blockquote text as indented text. If your quoted
text needs to display within a non-quoted paragraph, you should use the HTML q
tag. Most browsers surround q text with quotation marks.</blockquote>
<q>Browsers generally render blockquote text as indented text. If your quoted text
needs to display within a non-quoted paragraph, you should use the HTML q tag.
Most browsers surround q text with quotation marks.</q>
</body>
</html>
Conti…
• The HTML <blockquote> tag also supports the
following additional attributes −

Attribute Value Description

cite URL URL of the quote, if


it is taken from the
web.
HTML - Button Tag
Description
• The HTML <button> tag is used for creating a button within HTML
form. You can also use <input> tag to create similar buttons.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Button Tag</title>
</head>
<body>
<form> <button name = "button" value = "OK" type = "button">Click
Me</button> </form>
</body>
</html>
• The HTML <button> tag also supports the following additional attributes −
Attribute Value Description

autofocus autofocus Specifies that the button should have input focus when the
page loads.
disabled disabled Specifies the button is disabled.
form form_id Specifies the forms to which button belongs.
formaction URL Specifies the link where the form submits.
formenctype application Specifies how the form data is encoded before sending it to
multipart/form-data server.
text/plain
formmethod get Specifies how to send form data.
post
formnovalidate formnovalidate Specifies that the form data should not be validated.

formtarget _blank Specifies where the response should be validated.


_self
_parent
_top
name name Specifies the button name.
type button Specifies the button type.
reset
submit
value text Specifies button's initial value.
< progress > tag
• The <progress> tag represents the completion progress of a
task.
• Tip: Always add the <label> tag for best accessibility
practices!
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The progress element</h1>
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
</body>
</html>
HTML <time> Tag
Definition and Usage
• The <time> tag defines a specific time (or datetime).
• The datetime attribute of this element is used translate the time into a
machine-readable format so that browsers can offer to add date reminders
through the user's calendar, and search engines can produce smarter search
results.
Example
<!DOCTYPE html>
<html>
<body>
<h1>The time element</h1>
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
<p><b>Note:</b> The time element does not render as anything special in any of the
major browsers.</p>
</body>
</html>
Conti…
<html>
<body>
<p> The Cure will be celebrating their 40th
anniversary on
<time datetime="2018-07-07">July 7</time> in
London's Hyde Park.</p>
<p> The concert starts at <time
datetime="20:00">20:00</time> and you'll be able
to enjoy the band for at least <time
datetime="PT2H30M">2h 30m</time>.</p></body>
</html>
Time with Form tag
<!DOCTYPE html>
<html>
<body>
<h1>Show a Time Input Control</h1>
<p>If the browser supports it, a time picker pops up when entering the input
field.</p>
<form action="/action_page.php">
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit">
</form>
</body>
</html>
HTML <var> Tag
Definition and Usage
• The <var> tag is used to defines a variable in programming or in a
mathematical expression. The content inside is typically displayed in italic.
• Tip: This tag is not deprecated. However, it is possible to achieve richer
effect by using CSS.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>The var element</h1>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where
<var>b</var> is the base, and <var>h</var> is the vertical height.</p>
</body>
</html>
Lists
• List is nothing but the collections of items or
elements. There are two types of lists -
unordered lists and ordered lists.
• The unordered list is useful for simply listing
the items but if we want the items in some
specific sequence then the ordered lists are
used. Let us discuss how to use these types
lists in the HTML document.
Unordered List
<!DOCTYPE html> Following are some core subjects on
<html> computer science
<head> <ul type="circle">
<title> Use of Unordered List </title>
<li>Operating system</li>
<li>Computer Network</li>
</head>
<li>Database management
<body> Systems</li>
<h2>All About Computer ...</h2> <li>Web Programming</li>
Following are some popular operating <li>Software Engineering</li>
systems used in computer </ul>
<ul type="disc"> Following are some popular Web
browsers
<li>DOS</li>
<ul type="square">
<li>Windows 98</li> <li>Intenet Explorer</li>
<li>Windows XP</li> <li>Mozilla Firefox</li>
<li>Windows Professional</li> <li>Netscape Navigator</li>
<li>Windows Vista</li> </ul>
<li>Unix</li> </body>
</ul> </html>
Ordered List
• The ordered list is a list of items which must
follows some specific sequence. We can
number the text using tag. Following table
shows various styles by which the list can be
numbered.
Conti…
<!DOCTYPE html> <h4>The list is starting from
<html> 5</h4>
<head> <ol start="5">
<title> Ordered List Demo <li>Ice cream</li>
</title>
<li>Mango</li>
</head>
<body>
<li>Juice</li>
<h4>This is a typical List</h4> <li>Pop Corn</li>
<ol type="A"> <li> and so on</li>
<li>First</li> </ol>
<li>Second</li> </body>
<li>Third</li> </html>
<li>Forth</li>
<li> and so on</li>
</ol>
Tables
• For systematic arrangement of information we often require tabular structure.
HTML allows us
• to create tables on the web pages.
• Many web designers are using invisible tables on the web pages.
• The biggest advantage of using tables on the web pages is that the information gets
arranged
• systematically.
• The table is a matrix of rows and columns and the area formed due to intersection of
a row and a
• column is called cell.
• 2.8.1 Basic Table Tag
• To create a table on the web page the table beginning tag is <table> and </table> tag
is used for
• ending the table.
• Within <table> … </table> tag we can create rows and columns.
• The rows are created using <tr> </tr> and columns are created using <td> </td>
HTML Document[TabDemo.html]
<!DOCTYPE html>
<html>
<head>
<title> Table Demo </title>
</head>
<body>
<br/><br/>
<center>
<table border="5">
<caption align="bottom">
<b> Table Demo </b>
</caption>
<tr>
<td>This is Left cell-row 1</td>
<td>This is Right cell -row 1</td>
</tr>
<tr>
<td>This is Left cell-row 2</td>
<td>This is Right cell-row 2</td>
</tr>
</table>
</center>
</body>
</html>
Script Explanation
• 1) In above program, the parameter border=“5” is set
in order to set the table border. You can give any value
to set the desired border.
• 2) The caption to the table is given by the parameter
caption, we can set this caption either at the top or at
the bottom by using the parameter align.
• 3) Then using the tag the table row can be set. The tag
is used to create columns from left to right.
• 4) Thus in the above program we are filling up the
table values from top to bottom and from left to right.
Just refer the output provided along with the program
for clear understanding of look and feel of the table.
HTML Forms
FORMS:
• Form is a typical layout on the web page by which a user can interact with
the web page.
• Typical component of forms are text, text area, checkboxes, radio buttons
and push buttons.
• HTML allows us to place these form components on the web page and
send the desired information to the destination server.
• All these form contents appear in the <form> tag. The form has an
attribute action which gets executed when user clicks a button on the
form.
Various attributes of form are –
Attribute Description
Action It specifies the url where the form should be submitted.
Method It specifies the HTTP methods such as GET, POST
Name This attribute denotes the name of the form.
target It specifies the target of the address in the action attribute.
Text
• Text is typically required to place one line text. For example if you
want to enter some name then it is always preferred to have Text
field on the form.
• The text field can be set using
<input type="text" size=”30” name =”username” value=" ">
• The input type is text and the value of this text field is “ ” That
means the blank text field is displayed initially and we can enter
the text of our choice into it. There is size parameter which allows
us to enter some size of the text field.
Some other parameters or attributes can be

• maxlength that allows us to enter the text of some maximum


length.
• name indicates name of the text field.
• align denotes the alignment of the text in the text field. The
alignment can be left, right, bottom and top.
Conti…
Example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
<b>Input String:</b>
<input type=”text” size=”25” value=” “>
</form>
</body></html>
Password type
<form name=”form1”>
Password:<input type=”password”/>
</form>
Text Area
Text field is a form component which allows us to enter single line
text,
what if we want to have multiple line text?
Then you must use textarea component.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
Enter the Desired text here
<textarea cols="40" rows="5" name="myname">
</textarea>
</form>
</body>
</html>
Conti…
Various parameters that can be set for the text area can
be
• row denotes total number of rows in the text area.
• col specifies total number of columns in the text area.
• name denotes the name of the text area which can be
utilised for handling that component for some specific
purpose.
• wrap can be virtual or physical. If the wrap is virtual
then the line breaks get disappeared when the text is
actually submitted to the server. But if the wrap is
assigned to the physical then the line breaks (if any)
appear as it is in the text.
Checkbox
It is the simplest component which is used particularly when we want to make some selection from several
options.
For having the checkbox we have to specify the input type as checkbox. For example
<input type="checkbox" name="option1" value="mango" checked="checked">Mango<br/>
If we want to get the checkbox displayed as checked then set checked="checked"
Ex:
<!DOCTYPE html>
<html>
<head>
<title>My Form with Check box</title>
</head>
<body>
<form name ="checkboxForm">
<div align="center"><br>
Select the fruit(s) of your choice<br/>
<input type="checkbox" name="option1" value="mango"
checked="checked">Mango<br/>
<input type="checkbox" name="option2" value="apple">Apple<br/>
<input type="checkbox" name="option3" value="guava">Guava<br/>
</div>
</form>
</body>
</html>
Radio Button
This form component is also use to indicate the
selection from several choices.
• Using input type=“radio” we can place radio
button on the web page.
• This component allows us to make only one
selection at a time.
• We can create a group of some radio button
component.
• Following HTML document displays the radio
buttons for two different groups.
Conti…
Ex:
<!DOCTYPE html>
<html >
<head>
<title>My Form with radio buttons Page</title>
</head>
<body>
<form name="myform">
<div align="left"><br>
<b>Select Fruit which you like the most</b><br/>
<input type="radio" name="group1" value="Mango">Mango<br/>
<input type="radio" name="group1" value="Apple" checked> Apple<br/>
<input type="radio" name="group1" value="Grapes"> Grapes
<br/><br/><br/>
<b>Select Flower which you like the most</b><br/>
<input type="radio" name="group2" value="Rose"> Rose<br/>
<input type="radio" name="group2" value="Lotus">Lotus<br/>
<input type="radio" name="group2" value="Jasmine" checked>Jasmine<br/>
</div>
</form>
</body>
</html>
Button
• We can create the button using <input type
=”button”> tag.
• There are two types of buttons that can be
created in HTML. One is called submit button
and the another one is reset button.
• Various parameters of submit button are
• 1) name denotes the name of the submit
button.
• 2) value is for writing some text on the text on
the button.
• 3) align specifies alignment of the button.
Conti…
Ex:
<!DOCTYPE html>
<html >
<head>
<title> My Page </title>
</head>
<body>
<form name="myform" action="http://www.localhost.com/cgi-bin/hello.cgi"
method="POST">
<div align="center">
<br/><br/>
<input type="text" size="35" value=" ">
<br><input type="submit" value="Send">
<input type="reset" value="Reset"><br>
</div>
</form>
</body>
</html>
Menus
• HTML allows us to have pop down menu on the
web page so that the desired selection can be
made.
• The parameter select is for the menu component
and option parameter is for setting the values to
the options of drop down menu.
• We can make some specific option selected by
selected value = .
• In the following HTML document we have created
one drop down menu in which various fruits are
enlisted. By default “Banana” is set as selected.
Conti…
Ex:
<!DOCTYPE html>
<html >
<head>
<title> My Page </title>
</head>
<body>
<form name="myform">
<div align="center">
<select name="My_Menu">
<option value="Mango">Mango</option>
<option value="Strawberry">Strawberry</option>
<option selected value="Banana">Banana </option>
<option value="Apple">Apple</option>
</select>
</div>
</form>
</body>
</html>
Examples on Forms
Ex1:
<form action="mailto:[email protected]">
Name: <input name="Name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br>
<center><input type="submit"></center>
</form>
<input> input field
Ex2:
<form method=post action="/cgibin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Conti…
Ex3:
<form method=post action="/cgibin/example.cgi">
<input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; fontsize:
12px; background-color: #72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Ex4:
<form method=post action="/cgibin/example.cgi">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td>
<td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit"
src="yourimage.gif"></td>
</tr> </table>
</form>
Ex5:
<form method=post action="/cgibin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Conti…
Ex6:
<form method=post action="/cgibin/example.cgi">
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit">
</center>
</form>
Conti…
Ex7:
<form method=post action="/cgibin/example.cgi">
Select an option: <br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<br> <br>
Select an option: <br>
<input type="checkbox" name="selection">
Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Frames
• HTML frames allow us to present documents in multiple views.
• Using multiple views we can keep certain information visible and
at the same time other views are scrolled or replaced.
• For example, within the same window, one frame can display a
company information, a second frame can be a navigation menu
and a third frame may display selected document that can be
scrolled through or replaced by navigating in the second frame.
• Various frames can be set in one browser window .
• To set the frames in the browser window we use frame set.
• For example -
• <frameset cols="150,*">
• will allow us to divide the window into two columns (i.e. in two
vertical frames). One frame occupying the size of 150 pixels and
the other occupies the remaining portion of the window. Here *
means any number of pixels.
Conti…
• Similarly
<frameset rows="*,120">
• will divide the window into two rows (i.e. in two horizontal frames). The
second part of horizontal frame will be of 120 pixels and upper
horizontal frame will occupy remaining portion of the window.
• Similarly we can also specify the frameset in percentage form. For
example
• <frameset rows="30%,70%">
• Using frameset we can divide the rows and columns in any number of
frames. For example
• <frameset rows = “20%,30%,50%” cols = “30%,*”>
• This will create a frames in the browser’s window as follows -
Frame 1 Frame 2
Frame3 Frame 4
Frame 5 Frame 6
Conti…
• In every layout frame we can load the desired
html page by using frame src. For example By
this statement we are loading the web page
bulleted1.html in the specific frame and the
frame is named as Left_Vertical.
Attributes in frameset tag :
Attribute Value Purpose
Cols Pixels It specifies the
% number and size of
* columns in a frameset
Rows Pixels It specifies the
% number and size of
* rows in a frameset
Attributes of frame tag
The tag has no end tag. The tag defines one
frame within a tag. Various attributes of frame
tag are

You might also like