UNIT 2 NOTES E-Comm

Table of Contents
UNIT 2 ....................................................................................................................................... 2
2.1 Introduction to HTML ..................................................................................................... 2
2.2 HTML Tags ..................................................................................................................... 2
2.3 Text Formatting Tags ....................................................................................................... 4
2.4 The Anchor Tag and the href Attribute............................................................................ 5
2.5 IMG Tag........................................................................................................................... 6
2.6 Marquee Tag .................................................................................................................... 6
2.7 DIV tag............................................................................................................................. 6
2.8 HTML Tables................................................................................................................... 6
2.9 HTML LIST ..................................................................................................................... 9
2.9 Adding audio & video files in HTML pages ................................................................. 11
2.10 HTML frames .............................................................................................................. 11
2.11 HTML forms ................................................................................................................ 13
Short Answers Questions ..................................................................................................... 16
Long Answer Questions. ...................................................................................................... 18
MCQ .................................................................................................................................... 22
1
UNIT 2
2.1 Introduction to HTML
HTML stands for Hyper Text Markup Language. An HTML file is a text file containing
markup tags. The markup tags tell the Web browser how to display the page. An HTML file
must have an ‘htm’ or ‘html’ file extension. An HTML file can be created using a simple text
editor. The rule-making body of the Web is World Wide Web Consortium (W3C). W3C
puts together specifications for Web standards. The most essential Web standards are
HTML, CSS and XML. The latest HTML standard is XHTML 1.0.
Example: Creating a simple web page
Start Notepad.
Type in the following text
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic webpage. <b>This text will be displayed in bold</b>
</body>
</html>
Save the file as "firstpage.html".
Double click the saved file the browser will display the page.
Example Explained:
The first tag in your HTML document is <html>. This tag tells your browser that this is the
start of an HTML document. The last tag in your document is </html>. This tag tells your
browser that this is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window. The text between the <title> tags is the
title of your document. The title is displayed in your browser's caption. The text between the
<body> tags is the text that will be displayed in your browser. The text between the <b> and
</b> tags will be displayed in a bold font.
HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. HTM is a
file extension for HTML (Hypertext Markup Language) file format. The HTML file
extension is sometimes abbreviated as .htm for compatibility with older operating systems,
such as Disk Operating System (DOS), Windows 3.x and OS/2., which support eight
character file names with a three character extension..
2.2 HTML Tags

➢ HTML tags are used to mark-up HTML elements
➢ HTML tags are surrounded by the two characters < and >
➢ The surrounding characters are called angle brackets
➢ HTML tags normally come in pairs like <b> and </b>
➢ The first tag in a pair is the start tag, the second tag is the end tag
➢ The text between the start and end tags is the element content
2
➢ HTML tags are not case sensitive, <b> means the same as <B>
Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: <B> means the same as <b>. It is
recommended to always use because Tags can have attributes. Attributes can provide
additional information about the HTML elements on your page. This tag defines the body
element of your HTML page: <body>. With an added bgcolor attribute, you can tell the
browser that the background color of your page should be red, like this: <body
bgcolor="red">.
Attributes always come in name/value pairs like this: name="value".
Attributes are always added to the start tag of an HTML element.
Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most
common, but single style quotes are also allowed. In some rare situations, like when the
attribute value itself contains quotes, it is necessary to use single quotes:
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
<h1>This is a heading</h1>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you
when you edit the source code at a later date.

Note: that you need an exclamation point after the opening bracket, but not before the closing
bracket.
3
2.3 Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the
start of an HTML tag. If we want the browser to actually display these characters we must
insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity
number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <
The advantage of using a name instead of a number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity names, while the support for
entity numbers is very good in almost all browsers.
Note that the entities are case sensitive.
Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML
will remove 9 of them. To add spaces to your text, use the character entity.
Most Common Character Entities

Result Description Entity Name Entity Number
non-breaking space
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
Additional Commonly Used Character Entities
Result Description Entity Name Entity Number
¢ cent ¢ ¢
£ pound £ £
4
¥ yen ¥ ¥
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
2.4 The Anchor Tag and the href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc.
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link, the href attribute is used to address the
document to link to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.
This anchor defines a link to EEE 111 webpage:
<a href="http://www.google.com">Visit google</a>
The line above will look like this in a browser:
Visit google
The Target Attribute in <A>

With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
<a href="http://www.google.com" target="_blank"> Visit google</a>
The Anchor Tag and its Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can
create links that can jump directly into a specific section on a page, instead of letting the user
scroll around to find what he/she is looking for.
Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>
The name attribute is used to create a named anchor. The name of the anchor can be any text
you care to use.
The line below defines a named anchor:
<a href="#down">Bottom of the page</a>
You should notice that a named anchor is not displayed in a special way.
To link directly to the "down" section, add a # sign and the name of the anchor to the end of a
URL, like this:
<a href="http://www.iitmjp.ac.in#down">Jump to down section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "firstpage.html" will look like
this:
<a name="down">Down is here</a>
5
2.5 IMG Tag
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
<img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of img tag
All attributes of HTML image tag are given below.
1) src : It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server. The location of image may be on the
same directory or another server.
2) alt : The alt attribute defines an alternate text for the image, if it can't be displayed.
3) width : It is an optional attribute which is used to specify the width to display the image.
4) height : It specifies the height of the image.
2.6 Marquee Tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.
Syntax
<marquee>This is basic example of marquee</marquee>
Code:
<html>
<head><title>MARQUEE TAG</title></head>
<marquee behavior="alternate" direction="left" bgcolor="yellow"
scrollamount="200">
<font size="20" color=”red”>MAHARAJA SURAJMAL INSTITUTE
</font></marquee>
</html>
2.7 DIV tag
The HTML <div> tag is used to group the large section of HTML elements together.
This is the very important block level tag which plays a big role in grouping various other
HTML tags and applying CSS on group of elements. Even now <div> tag can be used to
create webpage layout where we define different parts ( Left, Right, Top etc) of the page
using <div> tag.
2.8 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. A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
6
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Heading Another Heading
Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
</tr>
7
<tr>
<td></td>
</tr>
</table>
row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays
the border).
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders
visible:
<table border="1">
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>
row 2, cell 1
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
8
Code:
<table border=3>
<tr>
<th colspan=6>IP University Courses</th>
</tr>
<tr>
<th colspan=3>Graduate</th>
<th colspan=3>Post Graduate</th>
</tr>
<tr>
<th>BBA</th>
<th>BCA</th>
<th>B.Tech</th>
<th>MBA</th>
<th>MCA</th>
<th>M.Tech</th>
</tr>
<tr>
<td>240</td>
<td>120</td>
<td>100</td>
<td>200</td>
<td>100</td>
<td>80</td>
</tr>
</table>
2.9 HTML LIST

HTML supports ordered, unordered and definition lists
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small
black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
9
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:
Coffee
Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Coffee
Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag.
Each definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images,
links, other lists, etc.
List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
10
<dt> Defines a definition term
<dd> Defines a definition description
2.9 Adding audio & video files in HTML pages
Adding sound file in HTML Page
Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
Example:
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Adding video file in HTML Page

The HTML <video> tag is used to show a video on a web page.
The controls attribute adds video controls, like play, pause, and volume.
The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do
not support the <video> element.
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
2.10 HTML frames

HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.
A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are organized: into rows and
columns.
11
Creating Frames using <frameset>
The <frameset> tag defines a frameset.

The <frameset> element holds one or more <frame>elements.
Each <frame> element can hold a separate document.
To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames.
Frame Tag
frame is indicated by <frame>tag and it defines which HTML document shall open into
the frame.
<iframe> Tag
The <iframe> tag defines a rectangular region within the document in which the browser can
display a separate document, including scrollbars and borders. The src attribute is used to
specify the URL of the document that occupies the inline frame.
Example
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size
of the iframe:</p>
<iframe src="mypage.html" height="200" width="300" title="Iframe
Example">
</iframe>
</body>
</html>
<noframe> tag
NOFRAMES element to provide alternate content for user agents that do not support frames
or are configured not to display frames.
Example
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="top_frame.htm" />
<frame name="main" src="main_frame.htm" />
<frame name="bottom" src="bottom_frame.htm" />
<noframes>
12
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Attributes of frame tag
Src= indicate the URL of the document to be loaded into the frame.
Name= Gives the frame a unique name.
Scrolling= controls the appearance of horizontal and vertical scrollbars in a frame. This takes
the value yes/no/auto.
noresize= By default you can resize any frame by clicking and dragging on the borders of a
frame. The noresize attribute prevents a user from being able to resize the frame. For example
noresize="noresize".
frameborder=This attribute provides the user agent with information about the frame border.
Possible values:
1: This value tells the user agent to draw a separator between this frame and every adjoining
frame. This is the default value.
0: This value tells the user agent not to draw a separator between this frame and every
adjoining frame.
2.11 HTML forms
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing.
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>
Form Attributes
There are two attributes within the opening < form > tag:
action tells the Web browser where to send the form data when the user fills out and submits
the form. This should either be an absolute URL (such as
http://www.example.com/myscript.php ) or a relative URL (such as myscript.php ,
/myscript.php , or ../scripts/myscript.php.
method tells the browser how to send the form data captured by various form elements. You
can use two methods:
GET: GET method sends the data captured by form elements to the web server encoded into
a URL, which points to a web server. GET is useful for sending small amounts of data (1024
13
bytes) and makes it easy for the user to resubmit the form. GET requests remain in the
browser history
POST: POST method send the data enclosed in the body of the request message. POST
method can send much larger amounts of form data. POST requests do not remain in the
browser history
Forms Elements
text input & password
A text input field –– This allows the user to enter a single line of text. You can optionally
prefill the field with an initial value using the value attribute.
<input type=”text” name=”textField” id=”textField” value=” ”>
A password field — This works like a text input field, except that the entered text is not
displayed. This is, of course, intended for entering sensitive information such as passwords.
Again, you can prefill the field using the value attribute.
<input type=”password” name=”pass” id=”pass” value=””>
Checkbox
A checkbox field — This is a simple toggle; it can be either on or off. The value attribute
should contain the value that will be sent to the server when the checkbox is selected.
<input type=”checkbox” name=”checkboxField” id=”checkboxField value=”yes”>
Radio button
All buttons in a group have the same name attribute. Only one button can be selected per
group.
As with checkboxes, use the value attribute to store the value that is sent to the server if the
button is selected.
<input type=”radio” name=”radioButtonField” id=”radioButtonField1”
value=”radio1”>
Submit button
A submit button — Clicking this type of button sends the filled-in form to the server-side
script for processing. The value attribute stores the text label that is displayed inside the
button (this value is also sent to the server when the button is clicked)
<input type=”submit” name=”submitButton” id=”submitButton” value=”Submit
Form”>
reset button
A reset button — This type of button resets all form fields back to their initial values (often
empty). The value attribute contains the button label text:
<input type=”reset” name=”resetButton” id=”resetButton” value=”Reset Form”>
pull-down menu
14
A pull-down menu — This allows a user to pick a single item from a predefined list of
options.
The size attribute’s value of 1 tells the browser that you want the list to be in a pull-down
menu format. Within the select element, you create an option element for each of your
options.
Place the option label between the <option> ... </option> tags. Each option element can have
an optional value attribute, which is the value sent to the server if that option is selected.
<select name=”pullDownMenu” id=”pullDownMenu” size=”1”>
<option value=”option1”>Option 1</option>
</select>
list box
This works just like a pull-down menu, except that it displays several options at once. To turn
a pull-down menu into a list box, change the size attribute from 1 to the number of options to
display at once:
<select name=”listBox” id=”listBox” size=”3”>
</select>
multi-select list box
This works like a list box, but it also allows the user to select multiple items at once by
holding down Ctrl (on Windows and Linux browsers) or Command (on Mac browsers). To
turn a normal list box into a multi-select box, add the attribute multiple (with a value of
“multiple“) to the select element.
<select name=”multiListBox” id=”multiListBox” size=”3” multiple=”multiple”>
</select>
text area
This is similar to a text input field, but it allows the user to enter multiple lines of text. Unlike
most other controls, you specify an initial value (if any) by placing the text between the
<textarea> ... </textarea> tags, rather than in a value attribute. A textarea element must
include attributes for the height of the control in rows (rows) and the width of the control in
columns (cols):
<textarea name=”textAreaField” id=”textAreaField” rows=”4” cols=”50”></textarea>
Example of HTML form
<html>
15
<body>
<form action="valid.jsp">
Enter name:<input type="text" name="name" value="">
Enter password:<input type="password" name="password">
Enter Email:<input type="email" name="email" value="">
Enter Gender:
<input type="radio" name="gender" id="male" value="male">male
<input type="radio" name="gender" id="female" value="female">female
Select Country:
<select name="country" id="register_country">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
<input type="submit"value="register">
</form>
</body>
</html>
output
Short Answers Questions
Q1. What is HTML?

Ans. HTML is the abbreviation for Hypertext Markup Language. It is the typical documents’
markup language for developing web pages to display on the web browser.
The extensions used to save HTML pages are .html and .htm.
Q2. Define HTML Layout.

Ans. An HTML web page is arranged in a specific layout (format). Here are the sections of
an HTML webpage The primary sections of the layout are:
Header to define a document or a section header.
Main content where the entire web page content is included.
Footer to define a document or a section footer.
16
There are also sections such as articles and the navigation bar that are the parts of a layout.
Q3. What is a Tag in HTML?

Ans. In an HTML page, tags used are to place the content and format the pages. They always
defined between (<) and (>) symbols. For example, <h1>text</h1>.
An opening tag must be preceded with a closing tag and indicated with a ‘/’ symbol.
A tag instructs the browser to format the HTML. Tags have many uses, such as changing the
appearance of text, displaying a graphic, or linking another page.
Q4. What are Attributes in HTML?

Ans. An additional attribute is given to each tag to alter the behavior of the tag. Attributes
are defined directly after the tag name, inside the angular brackets. They appear in opening
tags and can never appear in closing tags.
For example:
You can define an attribute for the <input> tag, such as a text field, checkbox, radio button,
or many more ways.
Q5. What are the different types of lists in HTML?

Ans, HTML lists are used to group a set of related items in lists. It is defined with an <li> tag.
Some commonly used HTML lists:
Ordered List (HTML tag: <ol>)
Unordered List (HTML tag: <ul>)
Description List (HTML tag: <dl>)
Q6. What is an Anchor tag in HTML?

Ans. An anchor tag is used to link two sections, web pages, or website templates in HTML.
Its format is:
<a href=”#” target=”link”></a>
Where ‘href’ is an attribute of the anchor tag used to identify the sections in a document, the
‘link’ is defined in the target attribute, which is to be linked.
Q7. What are the common use of comments?

Ans. Comments are used in an HTML document to make important notes and help
developers mention any modification to be incorporated afterward. They are not displayed in
the browser when the code is executed. A comment is always written in between the ‘—‘
symbol at the beginning and end of the angular brackets.
Syntax:
<!—‘Comment’ !–>
Q8. What are HTML Forms?

Ans. Forms are used to collect the user information when they are filled, and details are
provided to save into the database.
Q9. What is a Marquee Tag in HTML?

Ans. You can put scrolling text with a Marquee tag. With the help of this tag, an image or
text can be scrolled up, down, left, or right.
The text which is scrolled is defined within the <marquee>……</marquee> tag.
Q10. How to make a picture of a background image of a web page?
17
Ans. To make a picture a background image on a web page, you have to use background
attribute of body tag.
<body background=”image.jpg>
Long Answer Questions.
Q1. What is HTML? Discuss the main features of HTML.

Ans. HTML stands for Hyper Text Markup Language. An HTML file is a text file containing
markup tags. The markup tags tell the Web browser how to display the page. An HTML file
must have an ‘htm’ or ‘html’ file extension. An HTML file can be created using a simple text
editor. The rule-making body of the Web is World Wide Web Consortium (W3C). W3C puts
together specifications for Web standards. The most essential Web standards are HTML, CSS
and XML. The latest HTML standard is XHTML 1.0
Features of HTML:
It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to text.
It is a markup language.
Q2. Explain the following HTML Tags.
<A>
<IMG>
<MARQUEE>
<DIV>
<PRE>
Ans. i. An anchor tag is used to link two sections, web pages, or website templates in HTML.
Its format is:
<a href=”#” target=”link”></a>
Where ‘href’ is an attribute of the anchor tag used to identify the sections in a document, the
‘link’ is defined in the target attribute, which is to be linked.
ii. HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.
<img src="good_morning.jpg">
Attributes of img tag
All attributes of HTML image tag are given below.
1) src : It is a necessary attribute that describes the source or path of the image. It instructs
the browser where to look for the image on the server. The location of image may be on the
same directory or another server.
2) alt : The alt attribute defines an alternate text for the image, if it can't be displayed.
3) width : It is an optional attribute which is used to specify the width to display the image.
4) height : It specifies the height of the image.
iii. The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.
Example:
<marquee>This is basic example of marquee</marquee>
IV. The HTML <div> tag is used to group the large section of HTML elements together.
18
This is the very important block level tag which plays a big role in grouping various other
HTML tags and applying CSS on group of elements. Even now <div> tag can be used to
create webpage layout where we define different parts ( Left, Right, Top etc) of the page
using <div> tag.
V. The <pre> tag in HTML is used to define the block of preformatted text which
preserves the text spaces, line breaks, tabs, and other formatting characters which are
ignored by web browsers. Text in the <pre> element is displayed in a fixed-width font, but
it can be changed using CSS. The <pre> tag requires a starting and end tag.
Q3. What are frames? Give an example of iframe.

Ans. HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into frames in a similar way the
tables are organized: into rows and columns.
The <iframe> tag defines a rectangular region within the document in which the browser can
display a separate document, including scrollbars and borders. The src attribute is used to
specify the URL of the document that occupies the inline frame.
Example
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size
of the iframe:</p>
<iframe src="mypage.html" height="200" width="300" title="Iframe
Example">
</iframe>
</body>
</html>
Q4. Write a code for Student Registration form in HTML.

Ans.
<HTML>
<HEAD>
<TITLE>REGISTRATION FORM</TITLE>
</HEAD>
<BODY BGCOLOR="CYAN">
<FORM>
<H1>REGISTRATION FORM</H1>
ENTER NAME:
<INPUT TYPE="TEXT" required="yes" value="ENTER NAME"><BR>
ENTER PASSWORD:<INPUT TYPE="PASSWORD"><BR>
ENTER EMAIL:
<INPUT TYPE="EMAIL" VALUE="ENTER EMAIL"><BR>
ENTER GENDER:<INPUT TYPE="RADIO" NAME="GENDER">MALE<INPUT
TYPE="RADIO" NAME="GENDER">FEMALE<BR>
SELECT COURSE:
<SELECT SIZE="3" MULTIPLE="MULTIPLE">
19
<OPTION>BBA</OPTION>
<OPTION>BCOM</OPTION>
<OPTION>BCA</OPTION>
<OPTION>BED</OPTION>
</SELECT>
<BR>
<INPUT TYPE="SUBMIT" VALUE="REGISTER">
</FORM>
</BODY>
</HTML>
Q5. Discuss HTML Frame. What are the various elements used in creating HTML form?
Ans. An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing.
Forms Elements
A text input field –– This allows the user to enter a single line of text. You can optionally
prefill the field with an initial value using the value attribute.
<input type=”text” name=”textField” id=”textField” value=” ”>
A password field — This works like a text input field, except that the entered text is not
displayed. This is, of course, intended for entering sensitive information such as passwords.
Again, you can prefill the field using the value attribute.
<input type=”password” name=”pass” id=”pass” value=””>
Checkbox
A checkbox field — This is a simple toggle; it can be either on or off. The value attribute
should contain the value that will be sent to the server when the checkbox is selected.
<input type=”checkbox” name=”checkboxField” id=”checkboxField value=”yes”>
Radio button
All buttons in a group have the same name attribute. Only one button can be selected per
group. As with checkboxes, use the value attribute to store the value that is sent to the server
if the button is selected.
<input type=”radio” name=”radioButtonField” id=”radioButtonField1”
value=”radio1”>
Submit button — Clicking this type of button sends the filled-in form to the server-side
script for processing. The value attribute stores the text label that is displayed inside the
button (this value is also sent to the server when the button is clicked)
<input type=”submit” name=”submitButton” id=”submitButton” value=”Submit
Form”>
reset button — This type of button resets all form fields back to their initial values (often
empty). The value attribute contains the button label text:
<input type=”reset” name=”resetButton” id=”resetButton” value=”Reset Form”>
20
pull-down menu — This allows a user to pick a single item from a predefined list of options.
The size attribute’s value of 1 tells the browser that you want the list to be in a pull-down
menu format. Within the select element, you create an option element for each of your
options. Place the option label between the <option> ... </option> tags. Each option element
can have an optional value attribute, which is the value sent to the server if that option is
selected.
<select name=”pullDownMenu” id=”pullDownMenu” size=”1”>
</select>
list box- This works just like a pull-down menu, except that it displays several options at
once. To turn a pull-down menu into a list box, change the size attribute from 1 to the number
of options to display at once:
<select name=”listBox” id=”listBox” size=”3”>
</select>
multi-select list box- This works like a list box, but it also allows the user to select multiple
items at once by holding down Ctrl (on Windows and Linux browsers) or Command (on Mac
browsers). To turn a normal list box into a multi-select box, add the attribute multiple (with a
value of “multiple“) to the select element.
<select name=”multiListBox” id=”multiListBox” size=”3” multiple=”multiple”>
</select>
text area- This is similar to a text input field, but it allows the user to enter multiple lines of
text. Unlike most other controls, you specify an initial value (if any) by placing the text
between the <textarea> ... </textarea> tags, rather than in a value attribute. A textarea element
must include attributes for the height of the control in rows (rows) and the width of the
control in columns (cols):
<textarea name=”textAreaField” id=”textAreaField” rows=”4” cols=”50”></textarea>
21
MCQ
1) HTML stands for -
a. HighText Machine Language
b. HyperText and links Markup Language
c. HyperText Markup Language
d. None of these
2) The correct sequence of HTML tags for starting a webpage is -

a. Head, Title, HTML, body
b. HTML, Body, Title, Head
c. HTML, Head, Title, Body
d. HTML, Head, Title, Body
3) Which of the following element is responsible for making the text bold in HTML?
a. <pre>
b. <a>
c. <b>
d. <br>
4) Which of the following tag is used for inserting the largest heading in HTML?4.9Program
a. <h3>
b. <h1>
c. <h5>
d. <h6>
5) Which of the following tag is used to insert a line-break in HTML?

a. <br>
b. <a>
c. <pre>
d. <b
6) How to create an unordered list (a list with the list items in bullets) in HTML?
a. <ul>
b. <ol>
c. <li>
d. <i>
7) Which character is used to represent the closing of a tag in HTML?

a. \
b. !
c. /
d. .
8) How to create a hyperlink in HTML?

a. <a href = "www.msijanakpuri.com"> Maharaja Surajmal Institute </a>
b. <a url = "www.msijanakpuri.com" Maharaja Surajmal Institute /a>
c. <a link = "www.msijanakpuri.com"> Maharaja Surajmal Institute </a>
d. <a> www.msijanakpuri.com < Maharaja Surajmal Institute /a>
9) How to create an ordered list (a list with the list items in numbers) in HTML?
22
a. <ul>
b. <ol>
c. <li>
d. <i>
10) Which of the following element is responsible for making the text italic in HTML?
a. <i>
b. <italic>
c. <it>
d. <pre>
11) How to insert an image in HTML?

a. <img href = "jtp.png" />
b. <img url = "jtp.png" />
c. <img link = "jtp.png" />
d. <img src = "jtp.png" />
12) How to add a background color in HTML?

a. <marquee bg color: "red">
b. <marquee bg-color = "red">
c. <marquee bgcolor = "red">
d. <marquee color = "red">
13) <input> is -
a. a format tag.
b. an empty tag.
c. All of the above
d. None of the above
14) Which of the following tag is used to make the underlined text?
a. <i>
b. <ul>
c. <u>
d. <pre>
15) How to create a checkbox in HTML?

a. <input type = "checkbox">
b. <input type = "button">
c. <checkbox>
d. <input type = "check">
16) Which of the following tag is used to define options in a drop-down selection list?
a. <select>
b. <list>
c. <dropdown>
d. <option>
17) HTML tags are enclosed in-

a. # and #
b. { and }
c. ! and ?
d. < and >
23
18) Which of the following tag is used to add rows in the table?
a. <td> and </td>
b. <th> and </th>
c. <tr> and </tr>
19) The <hr> tag in HTML is used for -

a. new line
b. vertical ruler
c. new paragraph
d. horizontal ruler
20) Which of the following attribute is used to provide a unique name to an element?
a. class
b. id
c. type
21) Which of the following HTML tag is used to display the text with scrolling effect?
a. <marquee>
b. <scroll>
c. <div>
22) Which of the following HTML tag is the special formatting tag?
a. <p>
b. <b>
c. <pre>
23) Which of the following is the correct way to send mail in HTML?
a. <a href = "mailto: xy@y">
b. <a href = "xy@y">
c. <mail xy@y</mail>
24) Which of the following is the container for <tr>, <th>, and <td> ?
a. <data>
b. <table>
c. <group>
d. All of the above
25) How to insert a background image in HTML?

a. <body background = "img.png">
b. <img background = "img.png">
c. <bg-image = "img.png">
26) What are the types of unordered or bulleted list in HTML?
24
a. disc, square, triangle
b. polygon, triangle, circle
c. disc, circle, square
d. All of the above
27) Which of the following is the correct way to create a list using the lowercase letters?
a. <ol alpha = "a" >
b. <ol type = "a">
c. <ol letter = "a">
28) Which of the following is the correct way to start an ordered list with the count of numeric value
4?
a. <ol type = "1" initial = "4">
b. <ol type = "1" begin = "4">
c. <ol type = "1" num = "4">
d. <ol type = "1" start = "4">
29) Which of the following HTML attribute is used to define inline styles?
a. style
b. type
c. class
30) Which of the following is the paragraph tag in HTML?

a. <p>
b. <b>
c. <pre>
31) An HTML program is saved by using the ____ extension.

a. .ht
b. .html
c. .hml
32) A program in HTML can be rendered and read by -

a. Web browser
b. Server
c. Interpreter
33) The tags in HTML are -

a. case-sensitive
b. in upper case
c. not case sensitive
d. in lowercase
34) Which of the following is the root tag of the HTML document?
a. <body>
b. <head>
c. <title>
25
d. <html>
35) In HTML5, which of the following tag is used to initialize the document type?
a. <Doctype HTML>
b. <\Doctype html>
c. <Doctype>
d. <!DOCTYPE html>
36) Which of the following tag is used to create a combo box (or drop-down box)?
a. <list>
b. <select>
c. <input type = "dropdown">
d. <ul>
37) Which of the following are the attributes of the Top of Form tag?
a. method
b. action
c. Both (a) & (b)
38) Which is the correct way to comment out something in HTML?

a. Using ## and #
b. Using 
c. Using </-- and -/->
d. Using <!-- and -!>
39) Which HTML tag is used to display the power in expression, i.e., (x2 - y2)?
a. <sup>
b. <sub>
c. <p>
40) Which of the following is the correct way to change the font face in HTML?
a. <font name = "Calibri"> ……… </font>
b. <font face = "Calibri"> ……… </font>
c. <font = "Calibri"> ……… </font>
e. Bottom of Form
26

UNIT 2 NOTES E-Comm

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

UNIT 2 NOTES E-Comm

Uploaded by

Copyright:

Available Formats

Table of Contents

HTM or HTML Extension?

2.2 HTML Tags

Quote Styles, "red" or 'red'?

Most Common Character Entities

2.4 The Anchor Tag and the href Attribute

The Target Attribute in <A>

2.7 DIV tag

2.8 HTML Tables

Empty Cells in a Table

2.9 HTML LIST

2.9 Adding audio & video files in HTML pages

Adding sound file in HTML Page

Adding video file in HTML Page

2.10 HTML frames

The <frameset> tag defines a frameset.

Attributes of frame tag

<form action="Script URL" method="GET|POST">

text input & password

multi-select list box

Example of HTML form

Short Answers Questions

Q1. What is HTML?

Q2. Define HTML Layout.

Q3. What is a Tag in HTML?

Q4. What are Attributes in HTML?

Q5. What are the different types of lists in HTML?

Q6. What is an Anchor tag in HTML?

Q7. What are the common use of comments?

Q8. What are HTML Forms?

Q9. What is a Marquee Tag in HTML?

Q10. How to make a picture of a background image of a web page?

Long Answer Questions.

Q1. What is HTML? Discuss the main features of HTML.

Q3. What are frames? Give an example of iframe.

Q4. Write a code for Student Registration form in HTML.

2) The correct sequence of HTML tags for starting a webpage is -

5) Which of the following tag is used to insert a line-break in HTML?

7) Which character is used to represent the closing of a tag in HTML?

8) How to create a hyperlink in HTML?

11) How to insert an image in HTML?

12) How to add a background color in HTML?

15) How to create a checkbox in HTML?

17) HTML tags are enclosed in-

19) The <hr> tag in HTML is used for -

25) How to insert a background image in HTML?

26) What are the types of unordered or bulleted list in HTML?

30) Which of the following is the paragraph tag in HTML?

31) An HTML program is saved by using the ____ extension.

32) A program in HTML can be rendered and read by -

33) The tags in HTML are -

38) Which is the correct way to comment out something in HTML?

You might also like