Web

Programming
MODULE-2: HTML5 Page layout , Page Navigation, Tables, Forms and Media

Vidyalankar School of
Information Technology
Wadala (E), Mumbai
www.vsit.edu.in
Compiled by: Prof. Pallavi Tawde
pallavi.sawant@vsit.edu.in
 Certificate
This is to certify that the e-book titled “WEB programming”
comprises all elementary learning tools for a better understating of the relevant
concepts. This e-book is comprehensively compiled as per the predefined eight
parameters and guidelines.

Signature Date: 11-12-2019

Ms. Pallavi Tawde
Assistant Professor
Department of IT

DISCLAIMER: The information contained in this e-book is compiled and distributed for
educational purposes only. This e-book has been designed to help learners understand
relevant concepts with a more dynamic interface. The compiler of this e-book and
Vidyalankar Institute of Technology give full and due credit to the authors of the contents,
developers and all websites from wherever information has been sourced. We acknowledge
our gratitude towards the websites YouTube, Wikipedia, and Google search engine. No
commercial benefits are being drawn from this project.
Unit I Internet and the World Wide Web, HTML 5

HTML5 Page layout and navigation:

Creating navigational aids: planning site organization, creating text based navigation bar, creating
graphics based navigation bar, creating graphical navigation bar, creating image map, redirecting to
another URL, creating division based layouts: HTML5 semantic tags, creating divisions, creating
HTML5 semantic layout, positioning and formatting divisions.

HTML5 Tables, Forms and Media:

Creating tables: creating simple table, specifying the size of the table, specifying the width of the
column, merging table cells, using tables for page layout, formatting tables: applying table borders,
applying background and foreground fills, changing cell padding, spacing and alignment, creating user
forms: creating basic form, using check boxes and option buttons, creating lists, additional input types in
HTML5, Incorporating sound and video: audio and video in HTML5, HTML multimedia basics,
embedding video clips, incorporating audio on web page.

Recommended Books :

HTML5 Step by Step by Faithe Wempen

Web Design The Complete Reference by Thomas Powell

Prerequisites
Unit II Pre- Sem. II Sem. III Sem. IV Sem. V Sem. VI
requisites
HTML5 Page Advanced
layout, navigation, Web Projects
HTML5 Tables, Programming
Forms and Media
HTML5 Page layout and navigation

Creating navigational aids

One way to make your Web site easily accessible is to place a consistent navigation bar
on each page. A navigation bar is a set of hyperlinks that connect to the major pages of your Web
site. These hyperlinks can be either text-based or graphical.

Planning Your Site’s Organization

 Before building your navigation bar, create a diagram that outlines the site’s planned
structure.
 A navigation bar should contain links to the most important sections of the Web site, plus a
link to the Home page.
 The navigation bar should not contain hyperlinks to every page in the site unless the site is
extremely small and simple.
 The navigation bar should contain minimum four and maximum seven hyperlinks.
 The organization of The Garden Company’s site is shown below
  In the figure above , the level directly below the Home page consists of five pages.
 The navigation bar will contain hyperlinks to each of these pages. Three of these are
introductory pages for larger sections of content; the introductory pages of those sections will
link to each page within that section.
 This Web site is modest in scope initially, but there is plenty of room for future expansion.
 You could add dozens of additional tips, problem-solving techniques, and products.
 You could even create subsections within one of the main areas if the content becomes too
overwhelming for a single page.

Creating a Text-Based Navigation Bar

On simple Web pages, text-based navigation bars are usually placed at the top of the page, in
a single horizontal line. Some Web designers also place a copy at the bottom of each page so visitors
don’t need to scroll back up to the top of a page to access the links.
HTML5 includes a <nav> tag to place the code for a navigation bar. The <nav> tag is
designed to help browsers and style sheets identify sets of links as a navigational element, and
handle them appropriately.
The example below adds a text-based navigation bar to the html page

Navigation.html
<nav>
<hr>
<p style="margin:0px">
<a href="index.htm">Home</a> &nbsp;
<a href="tips.htm">Tips and Tricks</a> &nbsp;
<a href="problems.htm">Problem-Solving</a> &nbsp;
<a href="products.htm">Products</a> &nbsp;
<a href="about.htm">About Our Store</a> &nbsp;
<a href="contact.htm">Contact Us</a></p>
<hr>
</nav>

Output:
Creating a Graphical Navigation Bar
To create graphical navigation bar use <img> tag within the <a> tag, like this:
<a href="product.htm"><img src="product_button.gif"></a>

The example below adds a graphic-based navigation bar to the html page

In Notepad, in the upper navigation bar, change the hyperlinks so that they reference the button
graphics in the /images folder rather than displaying text.
<nav>
<hr>
<p style="margin:0px">
<a href="index.htm"><img src="images/btn_home.gif" style="border:none"></a>
<a href="tips.htm"><img src="images/btn_tips.gif" style="border:none"></a>
<a href="problems.htm"><img src="images/btn_problem.gif" style="border:none"></a>
<a href="products.htm"><img src="images/btn_products.gif" style="border:none"></a>
<a href="about.htm"><img src="images/btn_about.gif" style="border:none"></a>
<a href="contact.htm"><img src="images/btn_contact.gif" style="border:none">
</a></p>
<hr>
</nav>

The above code reference the button graphics in the /images folder rather than displaying text.

Output:

Creating an Image Map

HTML <img> tag

Definition and Usage

The <img> tag embeds an image in an HTML page.

Attribute Description

src Defines the name of the image file or complete path if images not in the
same folder

Align Align lines to left, right, or center of the documents

Width Specifies the width of the image

Height Specifies the height of the image

Border Specifies the border of the image

alt Specifies the alternate text for the image

Example :

An image is marked up as follows:

<img src="angry.gif" alt="Angry face" />

Mapping :
There are two types of mapping :

i) Client side mapping (all the pages that are to be opened are at the client side terminal.)

ii) Server Side mapping (all the pages are to be connected through the server.)

The regions that are selected for hyperlinks in an image is called as Hot Spot or Hot Region.

ISMAP is the attribute when we create SERVER SIDE MAPPING

USEMAP is the attribute when we create CLIENT SIDE MAPPING

HTML <map> tag

Definition and Usage

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The name attribute is required in the map element. This attribute 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 :

An image-map, with clickable areas :

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" >

<map name="planetmap">

<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" >

<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" >

<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" >

</map>
HTML <area> tag
Definition and Usage

The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).

The area element is always nested inside a <map> tag.

Attribute Value Description

shape rect, circle, poly Specifies the shape of area

coords number Specifies the co-ordinates of particular shape

href url Specifies the page that will be displayed on the click of that area

Source: https://www.youtube.com/watch?v=ljPSQHyk_XI
Redirecting to Another URL

To redirect to the new page use a <meta> tag in the <head> section of the
page.
For example, to redirect to the page support.microsoft.com after a five-second
delay, use the following:
<meta http-equiv="refresh" content="5; url=http://support.microsoft.com">
Be sure to use a semicolon (not a comma) between the delay (the content
attribute) and the url attribute.

Attribute Description
Name Name for the property. Can be anything. Examples include, keywords, description,
author, revised, generator etc.
Content Specifies the property's value.
Scheme Specifies a scheme to interpret the property's value (as declared in the content
attribute).
http-equiv Used for http response message headers. For example http-equiv can be used to
refresh the page or to set a cookie. Values include content-type, expires, refresh and
set-cookie.

Creating Division-Based Layouts

A division-based layout defines the area of a page with <div> tags, or some of
the new HTML5 semantic tags such as <article> and <aside>, and then applies
formatting to each area using styles.

Advantages of creating Division-Based Layouts

1. One big advantage of division-based layouts is that you can place the styles
in an external style sheet, and then make style changes to many pages at
once simply by modifying the style sheet.
For example, moving the navigation bar from the left to the right on a dozen pages is
easy with a division-based layout that uses an external style sheet, but it’s a huge
chore with a table-based layout.
2. Another advantage is that division-based layouts reduce the number of lines
of code needed to produce a page.

Understanding HTML5 Semantic Tags

HTML5 adds some semantic tags to define layouts in more intuitive ways than the generic
<div> tag is capable of. A semantic tag is one in which the name of a tag reflects its purpose.

The table below shows some Semantic tags

Tag Description
<header> Defines the masthead or other header information on the page. Typically
 the header is repeated on every page of a site, although that is not required.
<footer> Defines the text at the bottom of a page, such as the copyright or contact
information. Again, it is typically repeated on every page of the site.
<article> Defines a block of text that represents a single article, story, or message.
An article can be distinguished from other text in that it can logically stand alone. For
example, on a news site, each news story is an article.
<aside> Defines a block of text that is tangential to the main discussion, such as a note, tip, or
caution. An aside can be distinguished from other text in that it could be pulled out and
discarded without disrupting the main document in which it appears.
<section> Defines a generic content or application section. Examples of sections would be book
chapters or the numbered sections of a thesis; a site’s home page could be split into
sections such as Introduction, News, and Contact Information. A section begins with a
heading such as <h1> followed by other content.

Creating Divisions
Use <div> tag with id attribute to create divisions.
Eg:
<div id="masthead">

Each ID must be unique within the document, but multiple documents can use
the same division names.

The example below creates divisions within the page.

1.
<body>
<div id="masthead">
<a href="http://www.contoso.com" title="Home page">
<img src="images/leaf.gif class="logo""></a>
<h1 class="pagetitle">The Garden Company</h1>
<h5 class="tagline"><i>Helping you help your gardens grow since 1975</i></h5>
</div>
Encloses the logo, company name, and tagline in a <div> tag, and name the tag masthead.

2. Enclose the top navigation bar in a <div> tag, and name the tag topnav.

<div id="topnav">
<hr>
<a href="index.htm"><img src="images/btn_home.gif" style="border:none"></a>
<a href="tips.htm"><img src="images/btn_tips.gif" style="border:none"></a>
<a href="problems.htm"><img src="images/btn_problem.gif" style="border:none"></a>
</hr>
</div>

3. Enclose the body paragraphs in a <div> tag, and name the tag main.
<div id="main">
 <p><b>Fruit trees are now in stock! </b>We have just received a large shipment of peach,
pear, apple, and plum trees with sturdy root systems and healthy foliage, with prices as low
as $29.99. Visit the <a href="products.htm">Products</a> page for details.</p>
</div>

4. Enclose the bottom navigation bar in a <div> tag, and name the tag bottomnav.
<div id="bottomnav">
<hr>
<p style="margin:0px; text-align: center">
<a href="index.htm">Home</a> &nbsp;
<a href="tips.htm">Tips and Tricks</a> &nbsp;
<a href="problems.htm">Problem-Solving</a> &nbsp;
</div>

5. Enclose the copyright notice in a <div> tag, and name the tag copy.
<div id="copy">
<p>Copyright &copy; 2012 The Garden Company&trade;<br>
No material may be reproduced without written permission<br>
<a href="mailto:webmaster@contoso.com?subject=Question/Comment" title=
"webmaster@contoso.com">Contact the Webmaster</a></p>
</div>

Creating an HTML5 Semantic Layout

To create semantic layout we will change a division-based document to the respective
semantic tags .

1. Replace the <div id ”masthead”> tag with <header>, and change its closing
</div> tag to </header>.
<body>
<header>
<a href="http://www.contoso.com" title="Home page">
<img src="images/leaf.gif class="logo""></a>
<h1 class="pagetitle">The Garden Company</h1>
<h5 class="tagline"><i>Helping you help your gardens grow since
1975</i></h5>
</header>

2. Replace the <div id ”topnav”> tag with <nav>, and change its closing </div> tag
to </nav>.
<nav>
<hr>
<a href="index.htm"><img src="images/btn_home.gif"
style="border:none"></a>
<a href="tips.htm"><img src="images/btn_tips.gif" style="border:none"></a>
<a href="problems.htm"><img src="images/btn_problem.gif"
style="border:none"></a>
 <hr>
</nav>

3. Delete the <div id ”main”> tag and its closing </div> tag.

4. Enclose the first paragraph of the body text with an <article> tag.
<article>
<p><b>Fruit trees are now in stock! </b>We have just received a large
shipment of peach, pear, apple, and plum trees with sturdy root systems
and healthy foliage, with prices as low as $29.99. Visit the <a href=
"products.htm">Products</a> page for details.</p>
</article>

5. Enclose the last body paragraph with an <aside> tag.

<aside>
<p><b>What does <i>that</i> mean?</b> Run into an unfamiliar gardening term?
Look it up in our <a href="glossary.htm" target="_blank">Glossary</a>.</p>
</aside>
6. Replace the <div id ”copy”> tag with <footer>, and change its closing </div> tag
to </footer>.
<footer>
<p>Copyright &copy; 2012 The Garden Company&trade;<br>
No material may be reproduced without written permission<br>
<a href="mailto:webmaster@contoso.com?subject=Question/Comment" title=
"webmaster@contoso.com">Contact the Webmaster</a></p>
</footer>
Positioning Divisions

Floating a Division to the Right or Left

The easiest way to place one division beside another is to use the float style rule. For example, to
make a navigation bar that floats to the left of the main body text, you can set the navigation bar’s
division to a certain width (perhaps 150 pixels or so), and then float it like this:
<div id="topnav" style="width: 150px; float: left">
Alternatively, if you were using the <nav> tag for the navigation bar, it would look like this:
<nav style="width: 150px; float: left">

Positioning a Division on the Page

If you need a division to be in a specific spot on the page, use the position style rule, which has three
possible values:

Attribute Description
position: absolute This value specifies a fixed position with respect to the parent element. Unless
the element is within some other tag, the parent element is generally the <body>
tag; in this case, the element would have a fixed position relative to
the upper-left corner of the page.
position: relative This value specifies an offset from the element’s natural position.
Other elements on the page are not affected, even if the new position causes
elements to overlap.
position: fixed This value specifies a fixed position within the browser window that
doesn’t change even when the display is scrolled up or down. Internet Explorer
does not support this setting.
For example, to position a division called main exactly 100 pixels from the top of the page and 200 pixels
from the left side, create this style rule in the style sheet:
#main {position: absolute; top: 100px; left: 200px}

Formatting Divisions
You can use styles to specify the font family, font style, font weight, alignment, color.
For example, to add a khaki-colored background to the navigation bar, use the following:
nav {float: left; width: 150px; padding-top: 15px; background-color: khaki}

HTML5 Tables, Forms and Media

HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data
cell. Table row can also contain <th> tag i.e. table heading. A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc.

The <caption> Tag:

The <caption> tag is used to specify a description table and allows you to place caption above and
below tables.

Attribute: align=top, bottom, left, right

Attributes of <Table> tag

Attribute Value Description

Align Left,right,center Specifies the alignment of the table

Width Pixel/percentage Specifies the width of the table

Border Number Specifies the width of the border of the table. If the value
of the attribute is not set, then the table will have no
border.

Cellspacing Pixel Specifies the width of the border between individual cells
of a table and the border of the table itself.

Cellpadding Pixel Specifies the space to be left, in pixels, between the

border of each table cell and their content.

Bgcolor Color Sets background color for the table

Bordercolor Color Sets border color for the table

Background Image url Sets background image for the table

Attributes of <TR> tag

Attribute Value Description

Align Left,right,center Specifies the alignment of the table row

Border Number Specifies the width of the border of the table row.

Bgcolor Color Sets background color for the table row.

Bordercolor Color Sets border color for the table row.

Background Image url Sets background image for the table.

Attributes of <TH> and <TD> tag

Attribute Value Description

Align Left,right,center, Specifies the alignment of the table cell

justify

Width Pixel Specifies the width of the table cell

Height Pixel Specifies the height of the table cell

Border Number Specifies the width of the border of the table. If the
value of the attribute is not set, then the table will have
no border.

Bgcolor Color Sets background color for the table cell

Bordercolor Color Sets border color for the table cell

Background Image url Sets background image for the table

Valign Top,center,bottom Specifies the vertical alignment of the contents of the

cell in the row.

Rowspan number This will merge the current cell with a specified number
of its adjacent cells on the same column. It should have
the value larger than one.

Colspan Number This will merge the current cell with a specified number
of its adjacent cells on the same row. It should have the
value larger than one.

Example:

<table border="1">

<caption>Table Caption</caption>

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>
 <tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

How it looks in a browser :

Table Caption

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Table cells that span more than one row/column

This example demonstrates how to define table cells that span more than one row or one column.

<html>

<body>

<h4>Cell that spans two columns:</h4>

<table border="1">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Vidyalankar</td>

<td>42324232</td>

<td>42321160</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

 <table border="1">

<tr>

<th>First Name:</th>

<td>Vidyalankar</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>42324232</td>

</tr>

<tr>

<td>42321160</td>

</tr>

</table>

</body>

</html>

Output of Table with rowspan and colmnspan :

Cell that span two columns :

Name Telephone

Vidyalankar 42324232 42321160

Cell that span two rows :

First Name Vidyalankar

42324232
Telephone
42321160

Cell padding

This example demonstrates how to use cellpadding to create more white space between the cell content and
its borders.

<html>

<body>

<h4>Without cellpadding:</h4>

<table border="1">
 <tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

Cell spacing

This example demonstrates how to use cellspacing to increase the distance between the cells.

<html>

<body>

<h4>Without cellspacing:</h4>

<table border="1">

<tr>

<td>First</td> <td>Row</td></tr>
 <tr>

<td>Second</td> <td>Row</td>

</tr>

</table>

<h4>With cellspacing:</h4>

<table border="1"

cellspacing="10">

<tr>

<td>First</td>

<td>Row</td>

</tr> <tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

Source:- https://www.youtube.com/watch?v=4Us2q5eSWNc
Forms and Input
A form is an area that can contain form elements.

Form elements are elements that allow user to enter information (like text fields, textarea fields, dropdown
menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.

<form>

<input>

<input>

< /form>

Attribute Value Description

Method Get/post Specifies the method of response

Action page url Specifies the url of the page that should be called when
user clicks the submit button

Name text Specifies the name of the form

Input

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most
commonly used input types are explained below.

Attribute Value Description

Type Text,password,radio,checkbox, Specifies the tpe of input box

submit,Reset,hidden,file,email,url

Size Number Specifies the width of the input box

Maxlength Number Specifies the length of character that can be entered in

the input box

Name Text Specifies the name of the input box

Value Text/number Sets the value to the input box

Checked NA If this attribute is set then radio button or checkbox is by

default selected.

Required NA If this attribute is set for textbox then entry in the textbox
is must.
A. Text Fields

Text fields are used when you want user to type letters, numbers etc. in a form.

<form>

First name :

<input type= “text” name= “firstname”><br>

Last name :

<input type= “text” name= “lastname”>

Password:

<input type= “password” name= “pass”>

< /form>

The output on previous page shows how it looks in a browser. Note that the form itself is not visible. Also
note that in most browsers, the width of the text field is 20 characters by default.

B. Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices. Note that
only one option can be chosen.

<form>

<input type= “radio” name= “gender” value= “male”> Male<br>

<input type= “radio” name= “gender” value= “female”> Female

< /form>

C. Checkboxes

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

<form>

<input type= “checkbox” name= “bike”>I have a bike<br>

<input type= “checkbox” name= “car” >I have a car

< /form>

D. Text Area Box

The difference between the Text Box (above) and the Text Area is that the Text Box only allows for one
line. The Text Area, however, is much larger and will allow for as many words as you want.

Here’s a Text Area Box:

 < textarea name= “comment” rows= 6 cols= 40 >< /textarea>

Please note that the <textarea> requires a </textarea> command, whereas the TEXT BOX command above
did not.

 textarea (all one word): This yells to the form command above that here will sit another form item.
This one will be a text area box.

 name is the same as before. The information the reader puts in this box will arrive in your email box
denoted by whatever name you use. In this case, what is written in this box will arrive in your email box
with the words, “comment=”.

 rows tells the computer how many rows of text it will accept, and…

 cols tells the computer how many characters will be in each row. This text box will accept 6 rows of text
each being 40 characters long.

E. PopUp Box(Combo Box)

The PopUp box, unless clicked on, only shows one item. Click on it to see all the choices. The below
PopUp box is for people to choose their favorite color :

Here are the commands that placed the PopUp box on the page:

<select name= “Favorite_Color” size= “1”>

<option selected>Blue

<option>Red

<option>Yellow

<option>Green

<option>Black

<option>Orange

<option>Purple

< /select>

 select tells the computer another form is going here. This time it’s a SELECT or PopUp form.

 name: Same as above. This is the heading of the form item. It denotes how the results of the reader will
arrive at your email box. In this case it will say; “Favorite_Color=” and then the reader’s choice.

 size:- denotes the size of the box. Here, 1 means one line or item is shown.

Multiple :- Multiple items can be selected from list box

 option selected denotes which option will appear in the box. Note on the page that “Blue” is visible.
 option denotes another choice that will be visible when clicked on item.

 </select> finishes off the entire deal.

If the list’s choices fall into categories, you might want to break them up into sections.

To format a list as shown in the previous example, surround the groups of options with
an <optiongroup> tag. Include a label attribute that specifies the heading text for each
option group. Here’s the code for the preceding example:

<p>Select your printer model:

<select name="printers" size="1">
<optgroup label="Inkjet">
<option>SuperJet 1400</option>
<option>SuperJet 1405</option>
<option>SuperJet 1405 Plus</option>
</optgroup>
<optgroup label="Laser">
<option>SuperLaser Value Edition</option>
<option>SuperLaser Pro</option>
<option>SuperLaser Plus</option>
</optgroup>
</select></p>
Form Tags :

Tags Description

<form> Defines a form for user input

<input> Defines an input field

<textarea> Defines a text-area (a multiline text input control)

<lable> Defines a lable

<select> Defines a selectable list (a drop-down box)

<button> Defines a push button

More Examples

Checkboxes  This example Radiobuttons  This example

demonstrates how to create checkboxes demonstrates how to create radiobuttons
on a HTML page. A user can select or on a HTML page.
unselect a checkbox.

<html><body>
<html><body>
<form>Male:
<form>
<input type= “radio” checked name= “Sex”
I have a bike :
value= “male”><br>
<input type = “checkbox” name= “Bike” >
<br> Female: <input type= “radio”

I have a car: name= “Sex” value= “female”>

<input type= “checkbox” name= “Car”> < /form>

< /form> <p>When a user clicks on a radiobutton,

the button becomes checked, and all other
< /body></html> buttons with the same name become
unchecked < /p>

< /body></html>

Simple drop down box  This example Another drop down box  This example
demonstrates how to create a simple demonstrates how to create a simple
dropdown box on a HTML page. A dropdown box with a preselected value.
dropdown box is a selectable list.

<html><body>
<html><body>
<form>
<form>
<select name= “cars”>
<select name= “cars”>
<option value= “Volvo”>Volvo
<option value= “volvo”>Volvo
<option value= “saab”>Saab
<option value= “saab”>Saab
<option value= “fiat”>Fiat
<option value= “fiat” selected>Fiat
<option value= “audi”>Audi
<option value= “audi”>Audi
< /select>
< /select>
< /form>
< /form>
< /body>< /html>
< /body>< /html>
 Textarea  This example demonstrates Create a button  This example
how to create a textarea (a multiline text demonstrates how to create a button. On
input control). A user can write text in the the button you can define your own text.
textarea. In a textarea you can write an
<html><body>
unlimited number of characters.
<form><input type= “button”

value= “Hello world!”>

<html><body>
< /form>
<p> This example cannot be edited
because our editor uses a textarea for < /body>< /html>
input, and your browser does not allow a
textarea inside a textarea. < /p>
Fieldset around data  This example
demonstrates how to draw a border with a
<textarea rows= “10”cols= “30” > The Cat caption around your data.
was playing in the garden. < /textarea>
<html><body>
< /body></html>
<fieldset><legend>

Health information:

< /legend>

<form>Height <input type= “text” size=

“3”>

Weight <input type= “text”

size= “3”>< /form>< /fieldset>

<p>If there is no border around the input

form, your browser is too old. </p>

< /body></html>

Source:- https://www.youtube.com/watch?v=tbw_d6QEcIc
Q. Write HTML code to design the following page : [M-09]

B.Sc. IT Student Feedback Sheet

Semester

Subjects

Teacher

1. The lecturer’s knowledge of the subject  Good  Insufficient

is :

2. The lecturer’s method of teaching is :  Very Interesting

 Not clear

3. Any other suggestions :

4. Would you like to recommend the same  Yes  No

teacher for the next batch ?

Solution :

<html>

<head>

<title>Online Registration Form </title>

</head>

<body bgcolor=yellow>

<form>

<h2>Online Registration</h2> <br> <br>

Login ID :

<input type="text" name="Login ID" value=" " size="40"> <br>

Password:
<input type="sword" name="password" size="40"> <br>

Name :

<input type="text" name="User Name" value=" " size="40"> <br>

Last Name :

<input type="text" name="Last Name" size="40"> <br>

Address :

<textarea name="address" rows=10 cols=20> </textarea> <br>

Country :

<select name="country" size="1">

<option selected> India

<option> Pakistan

<option> England

<option> Australia

<option> Nepal

<option> Bangladesh

</select> <br>

Handicapped :

<input type="radio" name="decision" value="Yes"> Yes

<input type="radio" name="decision" value="No"> No <br>

Languages Known :

<input type="Checkbox" name="Languages" value="English">

<input type="Checkbox" name="Languages" value="Hindi">

<input type="Checkbox" name="Languages" value="French">

<input type="Checkbox" name="Languages" value="German"> <br>

Education :

<input type="radio" name="education" value="Under-graduate"> Under-graduate

<input type="radio" name="education" value="Graduate"> Graduate <br>

<input type="button" name="submit" value="Submit">

<input type="button" name="Reset" value="Reset">

 </form>

</body>

</html>

Additional Input Types in HTML5

HTML5 provides several other field types that can add that extra bit of polish to
your forms. If the user’s browser doesn’t support them, it renders and treats them as
text fields, so you can use them freely without worrying about backward
compatibility.
1. Spin boxes are used to increment numeric values.

The preceding spin box was created by using the following code:
<input type="number" name="copies" min="0"max="100" step="1"
value="1">
The min and max attributes control the minimum and maximum values,
respectively.
The step attribute specifies how much the value increments or decrements when
you click the up or down arrow buttons.
The value attribute specifies the default value.

2. A slider is a sliding bar that you can drag from side to side. Its type is range,
and its attributes are nearly identical to those for a spin box.

<input type="range" name="copies" min="1"max="4" step="1" value="1">

3. A date picker pops up a calendar on which the user can click and select a date.
Use the date type to get a date picker in HTML5-compliant browsers, as
follows:
<input type="date">
For a standard date, use type ”date”. This enables the user to select a specific date
from a calendar. You can also use any of the following types for other date and time-
related selections:
● Type ”month” selects an entire month
● Type ”week” selects an entire week
● Type ”time” selects a time only (no date)
● Type ”datetime” select both a date and a time
● Type ”datetime-local” selects both a date and time using the user’s local time zone
Incorporating Sound and Video

Embedding Video Clips

<video> tag
The <video> tag specifies video, such as a movie clip or other video streams.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

 MP4 = MPEG 4 files with H264 video codec and AAC audio codec
 WebM = WebM files with VP8 video codec and Vorbis audio codec
 Ogg = Ogg files with Theora video codec and Vorbis audio codec

Example
<html>
<body>
 <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier
versions.</p>

</body>
</html>

Output:

<embed> tag
The <embed> element creates an embedded panel in which a third-party application, such as
a Flash-based object, can run.
Example:
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>

<audio> tag
The <audio> tag defines sound, such as music or other audio streams.
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Example
<html>
<body>

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p><strong>Note:</strong> The audio tag is not supported in Internet Explorer 8 and earlier
versions.</p>
</body>
</html>
Output:
Questions:

1. List the different kinds of the form fields.

2. Explain the <input> tag.
3. Explain <select> and <option> tag with example.
4. What are Image Maps.
5. Explain Server side & Client side image mapping.
6. Explain table tag with attributes.
7. Explain <video> tag.
8. Explain <audio> tag.
9. Explain the steps to create text-based navigation bar
10. Explain the steps to create graphic-based navigation bar

MCQ

1. Which tag allows you to add a row in a table?

a. <td> and </td>
b. <cr> and </cr>
c. <th> and </th>
d. <tr> and </tr>

2. Which attribute is used to name an element uniquely?

a. Class
b. Id
c. Dot
d. all of above

3. Which tag creates a check box for a form in HTML?

a. <checkbox>
b. <input type="checkbox">
c. <input=checkbox>
d. <input checkbox>

4. To create a combo box (drop down box) which tag will you use?
a. <select>
b. <list>
c. <input type="dropdown">
d. all of above
5. Which attribute you’ll use with TD tag to merge two cells horizontally?
a. merge=colspan2
b. rowspan=2
c. colspan=2
 d. merge=row2
6. Which of the following is an attribute of <Table> tag?
a. SRC
b. LINK
c. CELLPADDING
d. BOLD

7. HTML5 features, include native audio and video support without the need for.
a. Flash
b. Canvas
c. Svg
d. None of the above

8. Which boolean attribute if specified, will allow video automatically seek back to the start
after reaching at the end.
a. autoplay
b. autobuffer
c. loop
d. controls

9. Which boolean attribute if specified, the audio will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.
a. autobuffer
b. loop
c. autoplay
d. preload

10. Which Specifies the length of text field.

a. length
b. size
c. width
d. All of the above