Unit2 Ecommerce

HTML?
HTML stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages.
• Sir Tim Berners-Lee developed HTML in around 1990, and he is

considered as the Father of HTML.
• In 1996, the World Wide Web Consortium (W3C) became the

authority to maintain the HTML specifications.
• HTML became an international standard (ISO) in 2000.

Versions of HTML
"HTML 2.0" was the first standard HTML specification which was
published in 1995. HTML 4.01 was a major version of HTML and it was
published in late 1999. Though HTML 4.01 version is widely used but
currently we are having HTML-5 version which is an extension to HTML
4.01, and this version was published in 2012.
HTML Full Form - Each Term Explained
• HTML full form is Hypertext Markup Language. Now, What is a markup
language?, What is Hypertext? Let's explain each term:
• Hypertext: Hypertext means, text with a link embedded in it. If you click on
that link, it will open a new webpage.
• Markup language: Markup language uses tags to define elements within a

document. It contains familiar words that are human-readable
like form, table, link, title, etc. Every tag in a markup language has a
special meaning of its own and performs a particular operation.
Features of HTML
• HTML describes the structure of a webpage.
• Human-readable HTML tags represent elements in a webpage. Hence,
they are easy to remember.
• HTML is universally supported by all browsers. It is a standard markup
language for website development.
• HTML 5 can give support in enhancing the experience in gaming
arena.
• It is easy to learn and implement. You can quickly learn HTML
programming in a few days and create your first web page.
• It is platform independent, i.e., it works on all the operating systems.
About HTML
• With HTML you can create your own Web site.
• HTML stands for Hyper Text Markup Language.
• HTML is not a programming language, it is a Markup
Language.
• A markup language is a set of markup tags.
• HTML uses markup tags to describe web pages.
• HTML is not case sensitive language.
• HTML documents contain HTML tags and plain text.
Why to Learn HTML?
• Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers. Now, HTML is being
widely used to format web pages with the help of different tags available in
HTML language.
• HTML is a MUST for students and working professionals to become a

great Software Engineer specially when they are working in Web
Development Domain.
Key advantages of learning HTML
• Create Web site - You can create a website or customize an
existing web template if you know HTML well.
• Become a web designer - If you want to start a career as a
professional web designer, HTML and CSS designing is a must
skill.
• Understand web - If you want to optimize your website, to boost
its speed and performance, it is good to know HTML to yield
best results.
• Learn other languages - Once you understands the basic of
HTML then other related technologies like JavaScript, php, or
angular are become easier to understand.
Example
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a Paragraph </p>
</body>
</html>
Explanation of HTML tags used in the Example
• <!DOCTYPE>- The doctype declaration indicates the document type and version of HTML used on the
webpage. Each HTML version has a different doctype declaration. HTML5 Doctype is used in this
example.
• <html>- The HTML tag is the root tag that describes the whole webpage. It is a paired tag, i.e., it has a
closing tag also, </html>. Everything will be written inside these tags.
• <head>- Head tag contains information about the document like its title, author information, description
of the webpage, and so on. It has different tags to perform these functions. It is also a paired tag.
• <title>- Title tag is used inside <head>, and it specifies the title of the document.
• <body>- The body tag contains all the information which will be displayed on the webpage. If you want
anything to be displayed on the webpage, you have to write it within these tags.
• <h1>- Heading tag is used to define headings. <h1> is the largest heading, followed by <h2>, <h3>, to
<h6>
Lets Discuss
1. Do all website use HTML?
2. Is there any alternative for HTML?
3. Is HTML a Programming language?
4. Is HTML hard to understand?
4. What are tags in HTML?
5. What is the meaning of Markup Language?
1. Do all website use HTML?
Yes, all the websites present on the internet use HTML for their
structure. Even different CMS, like wordpress, magento, etc,
where coding knowledge is not necessary, also use HTML to
create websites.
2. Is there any alternative for HTML?

No, there is no alternative to HTML. It is a standard for creating
webpages on the internet. HTML creates a base of the website.
This base is then modified by using CSS, JavaScript, JQuery,
Bootstrap, etc to beautify the website and to make it dynamic.
3. Is HTML a Programming language?
No, HTML is not a programming language. A programming language
use logic to produce a result, it use conditional statements, variables,
functions, etc. Whereas HTML stands for Hypertext Markup Language,
i.e.it is a markup language, which uses Tags to mark and define
elements.
4. Is HTML hard to understand?

HTML is an easy language to learn. Anyone with some technical or non-
technical background can opt to learn HTML. Being a markup language,
it is easy to understand as it uses human-readable standard words for
tags.
4. What are tags in HTML?
An HTML tag is a keyword surrounded by the sign '<>'. All these tags
has a special meaning to web browser. Each tag's work is predefined
and the content we write or insert between these tags will be displayed
on the web page as per the definition of that tag. For example: <p>This
is a paragraph</P>, this line will display a paragraph because the
content we write between <p> tags get displayed as a paragraph in the
browser.
5. What is the meaning of Markup Language?

A Markup language uses tags that can be predefined (in HTML), or
user-defined (in XML). Any markup language is very easy to learn as it
uses human-readable tags that are easy to remember.
1. <html> … </html> — The root element
All web pages start with the html element. It’s also
called the root element because it’s at the root of the
tree of elements that make up a web page.
<html>
(all other page elements go here)
</html>
2. <head> … </head> — The document head
The head element contains information about the web

page. There are many elements that you can put inside
the head element, such as:
•title
•link, which you can use to add style sheets to your page
<head>
<title>E-Commerce Lab</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
3. <title> … </title> — The page title
The title element contains the title of

the page. The title is displayed in the
browser’s title bar
<title>
E-Commerce Lab
</title>
4. <body> … </body> — The page’s content
The body element appears after

the head element in the page. It should
contain all the content of your web page:
text, images, and so on.
<body>
(all page content goes here)
</body>
5. <h1> … </h1> — A section heading
Headings let you break up your page content

into readable chunks. They work much like
headings and subheadings in a book or a
report.
HTML actually supports 6 heading

elements h1, h2, h3, h4, h5, and h6.
h1 is for the most important headings, h2 is
for less important subheadings, and so on.
<html>
<head>
<title>Heading Example</title> • This is heading 1
</head>
<body>
• This is heading 2
<h1>This is heading 1</h1> • This is heading 3
• This is heading 6
<h4>This is heading 4</h4>
</body>
</html>
6. <p>…</p> Paragraph Tag
<html>
<head>
<title>Paragraph Example</title> • Here is a first
</head> paragraph of text.
<body> • Here is a second
<p>Here is a first paragraph of paragraph of text.
text.</p> • Here is a third
<p>Here is a second paragraph of paragraph of text.
text.</p>
<p>Here is a third paragraph of
text.</p>
</body>
</html>
Font Tag
• This element is used to format the size, typeface and color of the
enclosed text.
• The commonly used fonts for web pages are Arial, Comic Sans MS ,
Lucida Sans Unicode, Arial Black, Courier New, Times New Roman,
Arial Narrow, Impact,
Verdana.
• The size attribute in font tag takes values from 1 to 7.

Font Tag Code
<html>
<head>
<title> fonts</title>
</head>
<body>
<br><font color=“green" size="7" face="Arial"> INFORMATION CHANNEL </font>
<br><font color=“green" size="6" face="Comic Sans MS "> INFORMATION CHANNEL </font>
<br><font color=“green" size="5" face="Lucida Sans Unicode"> INFORMATION CHANNEL </font>
<br><font color=“green" size="4" face="Courier New"> INFORMATION CHANNEL </font>
<br><font color=“green" size="3" face="Times New Roman"> INFORMATION CHANNEL </font>
<br><font color=“green" size="2" face="Arial Black"> INFORMATION CHANNEL </font>
<br><font color=“green" size="1" face="Impact"> INFORMATION CHANNEL </font>
</body>
<html>
HTML - Attributes
An attribute is used to define the characteristics of an HTML

element and is placed inside the element's opening tag. All
attributes are made up of two parts − a name and a value
Parts of HTML Attribute
• The name is the property you want to set. For example, the
paragraph <p> element in the example carries an attribute whose
name is align, which you can use to indicate the alignment of
paragraph on the page.
• The value is what you want the value of the property to be set and
always put within quotations. The below example shows three
possible values of align attribute: left, center and right.
Example
<html>
<head>
<title>Align Attribute Example</title> </head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
Some <body> Attributes
• Text: The default color for regular text inside the document.
• Bgcolor: A color to fill the background of the document.
• Background: The URL of an image that will be used to cover the
background of the document.
• Example
<body background=“ecom.jpg” text=red >
HTML Elements
Html Elements
These elements fall into three distinct groups:

• block-level elements,
• text-level elements,
• character entities.
The elements are presented from top to bottom, from
larger, block-oriented structures (such as paragraphs),
to smaller units (such as the actual character entities)
Core Attributes
HTML core attributes are

• ID,
• CLASS,
• STYLE,
• TITLE.
ID Attribute
The ID attribute is used to set a unique name for a

tag in a document. For example, using the
paragraph element, <P>,
<P ID="FirstParagraph">This is the first paragraph

of text.</P>
CLASS Attribute
The CLASS attribute is used to indicate the class or
classes that a tag may belong to. Like ID, CLASS is used
to associate a tag with a name, so
<P ID="FirstParagraph" CLASS="important">
This is the first paragraph of text.
</P>
not only names the paragraph uniquely as FirstParagraph,
but also indicates that this paragraph belongs to a class
grouping called important. Class names don’t have to be
unique to a document
Style Attribute
The STYLE attribute is used to add style sheet

information directly to a tag. For example,
<P STYLE="font-size: 18pt">This is the first
paragraph of text.</P>
sets the font size of the paragraph to be 18 point.
Title Attribute
The TITLE is used to provide advisory text about a tag or its
contents. In the case of
<P TITLE="Introductory paragraph">
This is the first paragraph of text.
</P>
the TITLE attribute is set to indicate that this particular paragraph
is the introductory paragraph. Browsers (currently, only Internet
Explorer 4 and higher) may display this advisory text in the form
of a tool tip, which may be useful to provide context sensitive
help, extra information, or other advice to the user.
Language Attributes
One major goal of HTML 4 was to provide better support for languages
other than English. The use of other languages may require that text
direction be changed from left to right across the screen to right to left.
Nearly all HTML elements now support the DIR attribute, which can be
used to indicate text direction as either LTR (left to right) or RTL (right
to left). For example, This is a right-to-left paragraph.
<P dir=“RTL”> This is a right-to-left paragraph.</P>
<p lang=“fr”> C’est Francais.</p>
<p lang=“en”> This is English.</p>
Block-Level Elements
• Block-level elements define structural content blocks, such as
paragraphs or lists.
• If a document is written carefully in a block style, it may be possible to

improve its machine readability.
Figure: Block Structured Document
Headings
The heading elements are used to create “headlines” in documents. Six different levels of headings
are supported: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. These range in importance from <H1>,
the most important, to <H6>, the least important.
<HTML>
<HEAD>
<TITLE>Heading Example</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>
Align Attribute
<HTML>
<HEAD>
<TITLE>Heading Alignment Example</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="left">Aligned Left</H1>
<H1 ALIGN="center">Aligned Center</H1>
<H1 ALIGN="right">Aligned Right</H1>
</BODY>
</HTML>
Paragraph
<HTML>
<HEAD>
<TITLE>Paragraph Example</TITLE>
</HEAD>
<BODY>
<P>This is the first paragraph in the example about the P tag.
There really isn't much to say here.</P>
<P ALIGN="center">This is the second paragraph. Again, more of the same. This time the
paragraph is aligned in the center. This might not be such a good idea as it makes the text
hard to read.</P>
<P ALIGN="right">Here the paragraph is aligned to the right. Right-aligned text is also
troublesome to read. The rest of the text of this paragraph is of little importance.</P>
<P ALIGN="justify">Under HTML 4.0-compliant browsers, you are able to justify text. As you
may notice, the way browsers tend to justify text is sometimes imprecise. Furthermore, not all
browsers support this attribute value.</P>
</BODY>
</HTML>
Center and Division Example
<HTML>
<HEAD>
<TITLE>Center and Division Example</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>This heading is centered.</H1>
<P>This paragraph is also centered.</P>
</CENTER>
<BR><BR>
<DIV ALIGN="right">
<H1>Division Heading</H1>
<P>Many paragraphs and other block elements can be affected by a DIV at once.</P>
<P>Notice all the paragraphs are right aligned.</P>
</DIV>
</BODY>
</HTML>
Block Quotes
• Occasionally, you may want to quote a large body of text to make it
stand out from the other text. The <BLOCKQUOTE> element provides
a facility to enclose large block quotations from other works within a
document.
• Though the element is logical in nature, enclosing text within
<BLOCKQUOTE> and </BLOCKQUOTE> usually indents the blocked
information. Like a <P> element, text within beginning and ending
• <BLOCKQUOTE> elements ignores all spacing, tabs, and returns, and
requires the use of <BR> or other elements to modify line wrapping
and spacing.
Example
<HTML>
<HEAD>
<TITLE>Blockquote Example</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Big Company Press Quote</H1>
<P>See the comments the press has about Big Company, Inc. and our great green gadgets:</P>
<BLOCKQUOTE>
"Big Company's Green Gadget is by far the best fictitious product ever produced! Gadget lovers and haters
alike will marvel at the
sheer uselessness of the Green Gadget. It's a true shame that the Green Gadget is limited only to HTML
examples."
<BR><BR>
--Matthew J. Foley, Useless Products Magazine
</BLOCKQUOTE>
<P>With kudos like this, you need to make sure to buy your Green Gadget today!</P>
</BODY>
</HTML>
Preformatted Text
• Occasionally, spacing, tabs, and returns are so important in text that
HTML’s default behavior of disregarding them would ruin the text’s
meaning. In such cases, you may want to preserve the intended
formatting by specifying the text to be preformatted.
• This situation requires an HTML directive that indicates the
preservation of format. The <PRE> and </PRE> tags can be used to
surround text that shouldn’t be formatted by the browser. The text
enclosed within the <PRE> tags
• The browser generally renders the preformatted text in a
monospaced font, usually Courier. Some text formatting, such as bold,
italics, or links, can be used within the <PRE> tags.
< HTML>
<HEAD>
<TITLE>PRE Example</TITLE>
</HEAD>
<BODY>
<PRE>
This is P R E F O R M A T T E D
T
E
X
T.
SPACES are ok! So are RETURNS!
</PRE>
<BR><BR>
<P>
This is NOT P R E F O R M A T T E D
T
E
X
T.
SPACES and RETURNS are lost.
</P>
</BODY>
</HTML
Horizontal Rules
• As sections are added to an HTML document, breaking up the

document into visually distinct regions often is useful. A horizontal
rule, indicated by the <HR> element, is a block-level element that
serves this purpose.
• The <HR> element is an empty element, because it has no close tag
and encloses no data. Adding an <HR> element between two
paragraphs provides a simple way to put a horizontal rule between
two sections
<HTML>
<HEAD>
<TITLE>Horizontal Rule Example</TITLE>
</HEAD>
<BODY>
<P>Size of 10</P>
<HR SIZE="10">
<P>Width of 50% and no shading</P>
<HR WIDTH="50%" NOSHADE>
<P>Width of 200 pixels, size of 3 pixels, and no shading</P>
<HR WIDTH="200" SIZE="3" NOSHADE><P>Width of 100, aligned right</P>
<HR ALIGN="right" WIDTH="100">
<P>Width of 100, aligned left</P>
<HR ALIGN="left" WIDTH="100">
<P>Width of 100, aligned center</P>
<HR ALIGN="center" WIDTH="100">
</BODY>
</HTML>
HTML Element Syntax
• An HTML element is an individual component of an HTML document.

It represents semantics, or meaning. For example, the title element
represents the title of the document.
• Most HTML elements are written with a start tag (or opening tag) and
an end tag (or closing tag), with content in between. Elements can
also contain attributes that defines its additional properties.
HTML Element Syntax Illustration
HTML Tags Vs Elements
• Technically, an HTML element is the collection of start tag, its

attributes, an end tag and everything in between. On the other hand
an HTML tag (either opening or closing) is used to mark the start or
end of an element, as you can see in the above illustration.
• However, in common usage the terms HTML element and HTML tag
are interchangeable
Case Insensitivity in HTML Tags and Attributes
In HTML, tag and attribute names are not case-sensitive (but most
attribute values are case-sensitive). It means the tag <P>, and the tag
<p> defines the same thing in HTML which is a paragraph.
Empty HTML Elements
• Empty elements (also called self-closing or void elements) are not

container tags — that means, you can not write
<hr>some content</hr> or
<br>some content</br>.
• A typical example of an empty element, is the <br> element, which

represents a line break. Some other common empty elements are
<img>, <input>, <link>, <meta>, <hr>, etc.
Nesting HTML Elements
• Most HTML elements can contain any number of further elements (except
empty elements), which are, in turn, made up of tags, attributes, and content
or other elements.
• The following example shows some elements nested inside the <p> element
1. <p>Here is some <b>bold</b> text.</p>
2. <p>Here is some <em>emphasized</em> text.</p>
3. <p>Here is some <mark>highlighted</mark> text.</p>.
Writing Comments in HTML
• Comments are usually added with the purpose of making the source
code easier to understand. It may help other developer (or you in the
future when you edit the source code) to understand what you were
trying to do with the HTML. Comments are not displayed in the
browser.
• An HTML comment begins with , as shown in
the example below:


Physical Text formatting elements
Logical Text formatting elements
Difference between <strong> and <b> tag
Both <strong> and <b> tags render the enclosed text in a bold typeface
by default, but the <strong> tag indicates that its contents have strong
importance, whereas the <b> tag is simply used to draw the reader's
attention without conveying any special importance.
Difference between <em> and <i> tag
Similarly, both <em> and <i> tags render the enclosed text in italic type
by default, but the <em> tag indicates that its contents have stressed
emphasis compared to surrounding text, whereas the <i> tag is used
for marking up text that is set off from the normal text for readability
reasons, such as a technical term, an idiomatic phrase from another
language, a thought, etc.
Character Entities
Example
<HTML>
<HEAD>
<TITLE>Character Entities Example</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Big Company Inc.'s Tagging Products</H1>
<HR>
<P>Character entities like © allow users to insert special characters like
©.</P>
<P>One entity that is both useful and abused is the nonbreaking space.</P>
<BR><BR>
Inserting spaces is easy with  <BR>
Look: S P A
C E S.<BR>
<HR>
<ADDRESS>
Contents of this page © 1999 Big Company, Inc.<BR> The
<B>Wonder Tag</B> <P> is a registered trademark
of Big Company, Inc.
</ADDRESS>
</BODY>
</HTML>
Lists
HTML offers three ways for specifying lists of information. All lists
must contain one or more list elements.
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of
numbers to list your items.
• <dl> − A definition list. This arranges your items in the same
way as they are arranged in a dictionary.
HTML Unordered Lists
• An unordered list is a collection of related items that have no special

order or sequence. This list is created by using HTML <ul> tag. Each
item in the list is marked with a bullet.
• You can use type attribute for <ul> tag to specify the type of bullet
you like. By default, it is a disc. Following are the possible options
<ul type = "square">
<ul type = "disc“ or “fillround”>
<ul type = "circle">
Example
<html>
<head> • Beetroot
<title>HTML Unordered List</title> • Ginger
</head>
• Potato
<body>
<ul> • Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
HTML Ordered Lists
If you are required to put your items in a numbered list instead of

bulleted, then HTML ordered list will be used. This list is created
by using <ol> tag. The numbering starts at one and is
incremented by one for each successive ordered list element
tagged with <li>.
Example
<html>
<head> 1. Beetroot
<title>HTML Ordered List</title>
2. Ginger
</head>
<body> 3. Potato
<ol> 4. Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
The type Attribute
• You can use type attribute for <ol> tag to specify the type of
numbering you like. By default, it is a number.
• Following are the possible options
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
<html>
<head> I. Beetroot
<title>HTML Ordered List</title> II.Ginger
</head> III.Potato
<body> IV.Radish
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Examples
i. Beetroot A. Beetroot
ii. Ginger B. Ginger
iii. Potato C. Potato
iv. Radish D. Radish
a) Beetroot
b) Ginger
c) Potato
d) Radish
The start Attribute
• You can use start attribute for <ol> tag to specify the starting
point of numbering you need.
• Following are the possible options
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example
<html>
<head> iv.Beetroot
<title>HTML Ordered List</title> v. Ginger
</head> vi.Potato
<body> vii.Radish
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
HTML Definition Lists
• HTML and XHTML supports a list style which is
called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/value list.
• Definition List makes use of following three tags.
<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list
Example
html>
<head>
<title>HTML Definition List</title> HTML
</head> This stands for Hyper Text
<body> Markup Language
<dl> HTTP
<dt><b>HTML</b></dt> This stands for Hyper Text
Transfer Protocol
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
</body>
</html>
HTML - Images
Images are very important to beautify as well as to depict many

complex concepts in simple way on your web page. This lab
session will take you through simple steps to use images in your
web pages.
Insert Image
• You can insert any image in your web page by using <img> tag.
Following is the simple syntax to use this tag.
• <img src = "Image URL" ... attributes-list/>
• The <img> tag is an empty tag, which means that, it can contain
only list of attributes and it has no closing tag.
<html>
<head>
<title>Using Image in Webpage</title>
</head>
Example
<body>
<p>Simple Image Insert</p>
<img src = “ecommerce.jpg" alt = "Test Image" />
</body>
</html>
Set Image Width/Height
You can set image width and height based on your requirement
using width and height attributes. You can specify width and
height of the image in terms of either pixels or percentage of its
actual size.
<html>
<head>
<title>Set Image Width and Height</title>
</head>
Example
<body>
<p>Setting image width and height</p>
<img src = “ecommerce.jpg" alt = "Test Image" width = "150" height =
"100"/>
</body>
</html>
Set Image Border
By default, image will have a border around it, you can specify
border thickness in terms of pixels using border attribute. A
thickness of 0 means, no border around the picture.
<html>
<head>
<title>Set Image Border</title>
</head>
Example
<body>
<p>Setting image Border</p>
<img src = “ecommerce.jpg" alt = "Test Image"
border = "3"/>
</body>
</html>
HTML - Tables
• The HTML tables allow web authors to arrange data like text,
images, links, other tables, etc. into rows and columns of cells.
• The HTML tables are created using the <table> tag in which
the <tr> tag is used to create table rows and <td> tag is used to
create data cells. The elements under <td> are regular and left
aligned by default
Example
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Table Heading
Table heading can be defined using <th> tag. This tag will be put
to replace <td> tag, which is used to represent actual data cell.
Normally you will put your top row as table heading, otherwise
you can use <th> element in any row. Headings, which are
defined in <th> tag are centered and bold by default.
<html> <head>
<title>HTML Table Header</title>
</head>
<body>
<tr>
<th>Name</th>
Example </tr>
<th>Salary</th>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which

you will use to adjust the white space in your table cells. The
cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the
content within a cell.
<html> <head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
Example </tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body> </html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more
columns into a single column. Similar way you will
use rowspan if you want to merge two or more rows.

<html> <head> <title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
Example <tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr> </table> </body> </html>
Tables Backgrounds
You can set table background using one of the following two
ways −
• bgcolor attribute − You can set background color for whole
table or just for one cell.
• background attribute − You can set background image for
whole table or just for one cell.
• You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes
deprecated in HTML5.
<html> <head>
<title>HTML Table Background</title> </head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
Example </tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
</tr>
<tr>
</tr>
<tr>
</tr> </table> </body> </html>
<html> <head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = “ecom.jpg">
<tr> <th>Column 1</th>
<th>Column 2</th>
Example <th>Column 3</th> </tr>

<tr> <td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr> <td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td> </tr>
<tr>
</tr>
</table> </body> </html>
Table Height and Width
You can set a table width and height

using width and height attributes. You can specify table width
or height in terms of pixels or in terms of percentage of
available screen area.
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
Example <td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body> </html>
Table Caption
The caption tag will serve as a title or explanation for the table
and it shows up at the top of the table.
Note: This tag is deprecated in newer version of HTML.

<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
Example <caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head
and foot are rather similar to headers and footers in a word-processed document
that remain the same for every page, while the body is the main content holder of
the table.
The three elements for separating the head, body, and foot of a table are −
• <thead> − to create a separate table header.
• <tbody> − to indicate the main body of the table.
• <tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups
of data. But it is notable that <thead> and <tfoot> tags should appear before
<tbody>
<html> <head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
Example <tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</body> </html>
Align and Valign
• Horizontal alignment is controlled by the ALIGN attribute. It can

be set to left, center or right.
• Vertical alignment is controlled by VALIGN. It accepts the

values top, middle or bottom.
HTML - Linking
• A webpage can contain various links that take you directly to

other pages and even specific parts of a given page. These
links are known as hyperlinks.
• Hyperlinks allow visitors to navigate between Web sites by

clicking on words, phrases, and images. Thus you can create
hyperlinks using text or images available on a webpage.
URL
• Every document on the Web has a unique address. This

address is known as Uniform Resource Locator (URL).
• Several HTML tags include a URL attribute value, including

hyperlinks, inline images, and forms. All of them use the same
syntax to specify the location of a web resource, regardless of
the type or content of that resource. That's why it is known a
Uniform Resource Locator.
Absolute and Relative URLs
You may address a URL in one of the following two ways:
• Absolute − An absolute URL is the complete address of a resource. For

example http://www.dspsr.in/html/html_text_links.htm
• Relative − A relative URL indicates where the resource is in relation to

the current page. Given URL is added with the <base> element to
form a complete URL. For example /html/html_text_links.htm
Linking Documents
• A link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing
</a> tag becomes part of the link and a user can click that part
to reach to the linked document. Following is the simple syntax
to use <a> tag.
• <a href = "Document URL" ... attributes-list>Link Text</a>

Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.dspsr.in" target = "_self">DSPSR</a>
</body>
</html>
HTML Target Attribute
HTML target attribute is used to specify the place in the browser

where the linked document should be opened. For example,
whether the user wants to open the link in a new tab, new
window, or in the same tag. The target attribute has different
values for all these different locations.
The target attribute can have one of the
following values:
Value Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same window/tab. This is

the default value.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
_framename Opens the linked document in a named frame.

Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.dspsr.in" target = "_self">DSPSR</a>
<a href = "https://www.dspsr.in" target = "_parent">DSPSR</a>
<a href = "https://www.dspsr.in" target = "_blank">DSPSR</a>
</body>
</html>
Linking to a Page Section
You can create a link to a particular section of a given webpage

by using name attribute. This is a two-step process.
• First create a link to the place where you want to reach with-in a webpage
and name it using <a...> tag as follows −
<h1>HTML Text Links <a name = "top"></a></h1>
• Second step is to create a hyperlink to link the document and place where
you want to reach
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
• This will produce following link, where you can click on the link generated
Go to the Top to reach to the top of the HTML Text Link tutorial.
Go to the Top
HTML Link Colors
By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red
<body alink="green" vlink="red“ link=“yellow”>

HTML Image Link
Images in HTML can also work as a Hyperlink. It means you can
add an image with a link attached to it. When the user clicks on
the image, he gets redirected to the attached link.

Example
<a href="link.html">
<img src="map.png" alt="HTML tutorial" />
</a>
HTML - Marquee Tag
An HTML marquee is a scrolling piece of text displayed either

horizontally across or vertically down your webpage depending
on the settings. This is created by using HTML <marquees> tag.
Example
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
The <marquee> Tag Attributes
Sr.No Attribute & Description
width
This specifies the width of the marquee. This can be a value like 10 or 20% etc.
height This specifies the height of the marquee. This can be a value like 10 or 20% etc.
This specifies the direction in which marquee should scroll. This can be a value like up, down,
direction
left or right.
This specifies the type of scrolling of the marquee. This can have a value like scroll,
behavior
slide and alternate.
scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc.
scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.
This specifies how many times to loop. The default value is INFINITE, which means that the
loop
marquee loops endlessly.
bgcolor This specifies background color in terms of color name or color hex value.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML Scroll Attribute </title>
</head>
<body>
<marquee width="100%" behavior="scroll" direction="up">
This is an example of a scroll marquee Up Side Direction...
</marquee>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee width="100%" behavior="slide" >
This is an example of slide marquee
</marquee>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee width="100%" behavior="alternate">
This is an example of a alternate marquee
</marquee>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<title> HTML Marquee Direction Attribute </title>
</head>
<body>
<marquee width="100%" behavior="scroll" direction="up">
This is an example of a Up side direction marquee...
</marquee>
<marquee width="100%" behavior="scroll" direction="down">
This is an example of a Down side direction marquee...
</marquee>
<marquee width="100%" behavior="scroll" direction="right">
This is an example of a Right side direction marquee...
</marquee>
<marquee width="100%" behavior="scroll" direction="left">
This is an example of a Left side direction marquee...
</marquee>
</body>
</html>
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.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never

recommended to use frames in your webpages −
• Some smaller devices cannot cope with frames often because
their screen is not big enough to be divided up.
• Sometimes your page will be displayed differently on different
computers due to different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame
technology.
Creating Frames
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. Each
frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "30%,40%,30%">

Example <frame src = "v.html" />
<frame src = "a.html" />
<frame src = "video.html" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">

<frame name = "left" src = “1.html" />
Example
<frame name = "center" src = “2.html" />
<frame name = "right" src = “3.html" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
The <frame> Tag Attributes
Attribute Value Description
frameborder 0 It specifies whether to display a border around the frame or
1 not, and its default value is 1
longdsec URL It specifies a page which contains the long description of the
content of the frame.
marginheight pixels It specifies the top and bottom margins of the frame.
marginwidth pixels It defines the height of the margin between frames.
name text It is used to assign the name to the frame.
noresize noresize It is used to prevent resizing of the frame by the user.
scrolling yes It specifies the existence of the scrollbar for overflowing

no content.
auto
src URL It specifies the URL of the document which we want to
display in a frame.
Example
<frameset rows="30%,70%>
<frameset cols= "50%, 50%">
<frame src= "file1.html">
<frame src= "file2.html">
</frameset>
<frameset cols="50%,50%">
<frame src="file3.html">
<frame src="file4.html">
</frameset>
</frameset>
HTML - Embed Multimedia
• Sometimes you need to add music or video into your web page. The
easiest way to add video or sound to your web site is to include the
special HTML tag called <embed>. This tag causes the browser itself
to include controls for the multimedia automatically provided
browser supports <embed> tag and given media type.
• You can also include a <noembed> tag for the browsers which don't
recognize the <embed> tag. You could, for example, use <embed> to
display a movie of your choice, and <noembed> to display a single
JPG image if browser does not support <embed> tag.
HTML - AUDIO Tag
The HTML <audio> element is used to play an audio file on a web page.
The AUDIO tag of HTML5 supports only three audio file formats i.e.
.ogg, .mp3, .wav
<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>
Attributes: Audio Tag
Attribute Description
Plays the audio file as soon as the
autoplay
Web page loads
Displays the controls on the Web
controls
page, such as play and pause buttons
loop Replays the audio file
Specifies whether the audio file is
preload
preloaded on the Web page or not
Provides the location of the audio file
src
to play
HTML – Video Tag
The HTML <video> element is used to show a video on a web page. The
VIDEO tag supports the .ogv and .mp4 file formats.
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogv">
Your browser does not support the video tag.
</video>
Attributes: Video Tag
Attribute Description
audio Controls the default state of the video's audio channel
autoplay Plays the audio file as soon as the Web page loads
Displays the controls on a Web page, such as play and
controls
pause buttons
height Specifies the height of the VIDEO tag
loop Replays the video file
Specifies whether the video file is preloaded on the
preload
Web page or not
Provides an image to be displayed when the video file is
poster
not available
src Provides the location of the video file to play
width Specifies the width of the VIDEO tag
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = “abc.mpeg" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" >
</noembed>
</embed>
</body>
</html>
Supported Video Types
You can use various media types like Flash movies (.swf), AVI's (.avi),
and MOV's (.mov) file types inside embed tag.
• .swf files − are the file types created by Macromedia's Flash program.
• .wmv files − are Microsoft's Window's Media Video file types.
• .mov files − are Apple's Quick Time Movie format.
• .mpeg files − are movie files created by the Moving Pictures Expert
Group.
The <embed> Tag Attributes
1 align
Determines how to align the object. It can be set to either center, left or right.
autostart
2 This boolean attribute indicates if the media should start automatically. You can set it either true or false.
loop
3 Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false)
4 playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
5 hidden
Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes.
6 width
Width of the object in pixels
7 height
Height of the object in pixels
8 name
A name used to reference the object.
9 src
URL of the object to be embedded.
10 volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
HTML Forms
HTML Forms are required, when you want to collect some data from
the site visitor. For example, during user registration you would like to
collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc. The
back-end application will perform required processing on the passed
data based on defined business logic inside the application.
HTML Form Structure
The HTML <form> tag defines a form that is used to collect user
input. All the form elements should be written inside <form> and
</form> tags.
Syntax:
<form>
....
Form Elements..
....
</form>
Example
HTML Form Controls
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
Text Input Controls
There are three types of text input used on forms −
• Single-line text input controls − This control is used for items that require
only one line of user input, such as search boxes or names. They are
created using HTML <input> tag.
• Password input controls − This is also a single-line text input but it masks
the character as soon as a user enters it. They are also created using HTML
<input> tag.
• Multi-line text input controls − This is used when the user is required to
give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag.
Example:Single-line text input controls
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
Attributes for <input> tag
type Indicates the type of input control and for text input control it will be set to text.
name Used to give a name to the control which is sent to the server to be recognized and get the
value.
value
This can be used to provide an initial value inside the control.
size
Allows to specify the width of the text-input control in terms of characters.
maxlength
Allows to specify the maximum number of characters a user can enter into the text box.
Example: Password input controls
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
Example:Multi-line text input controls
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
Attributes for <textarea> tag
name Used to give a name to the control which is sent to the server to be recognized
and get the value.
rows
Indicates the number of rows of text area box.
cols
Indicates the number of columns of text area box
Checkbox Control
Checkboxes are used when more than one option is required to be

selected. They are also created using HTML <input> tag but type
attribute is set to checkbox.
Example: Checkbox controls
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on">
Maths
<input type = "checkbox" name = "physics" value = "on">
Physics
</form>
</body>
</html>
Attributes for <checkbox> tag
1
type
Indicates the type of input control and for checkbox input control it
will be set to checkbox..
2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.
3 value
The value that will be used if the checkbox is selected.
4 checked
Set to checked if you want to select it by default.
Radio Button Control
Radio buttons are used when out of many options, just one option is
required to be selected. They are also created using HTML <input> tag
but type attribute is set to radio.
Example:Radio button controls
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths">
Maths
<input type = "radio" name = "subject" value = "physics">
Physics
</form>
</body>
</html>
Attributes for <radio button> tag
1 type
Indicates the type of input control and for checkbox
input control it will be set to radio.
2 name
Used to give a name to the control which is sent to the
server to be recognized and get the value.
3 value
The value that will be used if the radio box is selected.
4 checked
Set to checked if you want to select it by default.
Select Box Control
A select box, also called drop down box which provides option to list
down various options in the form of drop down list, from where a user
can select one or more options.
Example:Select box controls
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
Attributes for <select> tag
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select multiple items from the menu.
Attributes for <option> tag
The value that will be used if an option in the select box box is
value
selected.
Specifies that this option should be the initially selected value

selected
when the page loads.
label
An alternative way of labeling options
Select Box Control
A select box, also called drop down box which provides option to list
down various options in the form of drop down list, from where a user
can select one or more options.
Example:Select box controls
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
Attributes for <select> tag
1 name
Used to give a name to the control which is sent to the server to be recognized and get the
value.
2 size
This can be used to present a scrolling list box.
3 multiple
If set to "multiple" then allows a user to select multiple items from the menu.
Button Controls
There are various ways in HTML to create clickable buttons. You can also
create a clickable button using <input>tag by setting its type attribute to
button.
<INPUT TYPE="BUTTON" VALUE="Press Me">
<BUTTON> element is functionally equivalent to <INPUT TYPE="BUTTON">,

which is not supported by the official HTML 3.2 definition.
<BUTTON>Press Me</BUTTON>
Attributes
Sr.No Type & Description
submit This creates a button that automatically submits a form.
This creates a button that automatically resets form controls to their

reset
initial values.
This creates a button that is used to trigger a client-side script when

button
the user clicks that button.
This creates a clickable button but we can use an image as background

image
of the button.
Example: button controls
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =
“unit2.jpg" />
</form>
</body>
</html>
File Upload Box
If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box. This is
also created using the <input> element but type attribute is set to file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
Attributes
name Used to give a name to the control which is sent to the

server to be recognized and get the value.
accept Specifies the types of files that the server accepts.

Hidden Form Controls
Hidden form controls are used to hide data inside the page which later
on can be pushed to the server. This control hides inside the code and
does not appear on the actual page. For example, following hidden
form is being used to keep current page number. When a user will click
next page then the value of hidden control will be sent to the web
server and there it will decide which page will be displayed next based
on the passed current page.
Example:Hidden controls
<!DOCTYPE html>
<html>
<head>
<title> Hidden controls </title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form and the
<legend> element defines a caption for the <fieldset> element.
Example:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Output
Form Attributes
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET and POST
methods.
target Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser encodes the data
before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms
use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the
form of files like image, word file etc.
The Action Attribute
The action to be performed after the submission of the form is decided

by the action attribute. Generally, the form data is sent to a webpage
on the web server after the user clicks on the submit button.
The action attribute value defines the web page where information
proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to
process your form.
Example:
<!DOCTYPE html>
<html>
<h3>Example of a Submit And Reset Button</h3>
<body>
<form action="test.php" method="post" id="users">
Username:
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
The Target Attribute in HTML Forms
The Target attribute is used to specify whether the submitted result will
open in the current window, a new tab or on a new frame. The default
value used is “self” which results in the form submission in the same
window. For making the form result open in a new browser tab, the
value should be set to “blank”.
• <form action="/test.php" target="_blank">

Method attribute
The method attribute defines the HTTP method which browser used to
submit the form. The possible values of method attribute can be:
POST: We can use the post value of method attribute when we want to
process the sensitive data as it does not display the submitted data in URL.
<form action="action.html" method="post">
GET: The get value of method attribute is default value while submitting the
form. But this is not secure as it displays data in URL after submitting the
form.
<form action="action.html" method="get">
Hypertext Transfer Protocol (HTTP)
Hypertext Transfer Protocol (HTTP) is an application-layer protocol for
transmitting hypermedia documents, such as HTML. It was designed for
communication between web browsers and web servers, but it can also
be used for other purposes.

Difference between GET and POST
Points GET METHOD POST METHOD
Data Pass Limited amount of data can be sent because Large amount of data can be sent because data
data is sent in header. is sent in body.
Security Get request is not secured because data is data Post request is secured because data is not
sent is part of the URL, and this data saved in exposed in URL bar and parameters are not
browser history and server logs in plaintext. stored in browser history or in web server logs.
Bookmarked Request can be bookmarked and cached. Request can not be bookmarked and cached.
Usability GET method should not be suitable when you POST is good for when you are sending
are sending sensitive data like user id or sensitive data because your data are sended in
Passwords. encrypted form.
Data Length Data length restricted, usually to 2048 No restrictions on the amount of data that can
characters. be sent.
Hacked Easier to hack. More difficult to hack.
The Autocomplete Attribute
• The autocomplete attribute specifies whether a form should have

autocomplete on or off.
• When autocomplete is on, the browser automatically complete values
based on values that the user has entered before.
<form action="/action_page.php" autocomplete="on">

HTML – Images Map
A client-side image map is an image divided into selectable

regions defined by <area> elements (“hotspots”) that allow user
interaction.
The HTML <map> tag defines an image map. An image map is

an image with clickable areas. The areas are defined with one or
more <area> tags.
How Does it Work?
• The idea behind an image map is that you should be able to

perform different actions depending on where in the image you
click.
• To create an image map you need an image, and some HTML

code that describes the clickable areas.
1. The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:
<img src=“ecommerce.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.
2. Create Image Map
Then, add a <map> element.
The <map> element is used to create an image map, and is linked to the image
by using the required name attribute:
<map name="workmap">
The name attribute must have the same value as the <img>'s usemap attribute .
3. The Areas
Then, add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You must define the shape of the clickable area, and you can choose one of these values:
• rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region
You must also define some coordinates to be able to place the clickable area onto the image.
Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and
one for the y-axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top:
The coordinates 270,350 is located 270 pixels from the left margin and
350 pixels from the top:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:
337,300
Then specify the radius of the circle:
44 pixels
<area shape="circle" coords="337, 300,

44" href="coffee.htm">
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = “ecommerce.jpg" alt = "Test Image" usemap="#workmap"/>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.html">
</map>
</body>
</html>
• Use the HTML <map> element to define an image map
• Use the HTML <area> element to define the clickable areas in the
image map
• Use the HTML usemap attribute of the <img> element to point to
an image map
HTML – Cascading Style Sheet (CSS)
• Cascading Style Sheets (CSS) describe how documents are presented on

screens, in print, or perhaps how they are pronounced. W3C has actively
promoted the use of style sheets on the Web since the consortium was founded
in 1994.
• Cascading Style Sheets (CSS) provide easy and effective alternatives to specify
various attributes for the HTML tags. Using CSS, you can specify a number of
style properties for a given HTML element. Each property has a name and a
value, separated by a colon (:). Each property declaration is separated by a semi-
colon (;).
Example
First let's consider an example of HTML document which makes use of <font> tag
and associated attributes to specify text color and font size
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
Example </head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>
Different ways of using CSS
• External Style Sheet − Define style sheet rules in a separate .css file and then
include that file in your HTML document using HTML <link> tag.
• Internal Style Sheet − Define style sheet rules in header section of the HTML
document using <style> tag.
• Inline Style Sheet − Define style sheet rules directly along-with the HTML
elements using style attribute.
External Style Sheet
If you need to use your style sheet to various pages, then its
always recommended to define a common style sheet in a
separate file. A cascading style sheet file will have extension as
.css and it will be included in HTML files using <link> tag.
Example
Consider we define a style sheet file style.css which has following rules −
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
Here we defined three CSS rules which will be applicable to three different classes
defined for the HTML tags
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body> </html>
Internal Style Sheet
If you want to apply Style Sheet rules to a single document only,

then you can include those rules in header section of the HTML
document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in

an external CSS file.
Example
<!DOCTYPE html>
<html> </head>
<head>
<body>
<title>HTML Internal CSS</title> <p class = "red">This is red</p>
<style type = "text/css"> <p class = "thick">This is thick</p>
.red { <p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
color: red; </body>
}
.thick{ </html>
font-size:20px;
}
.green {
color:green;
}
</style>
Inline Style Sheet
• You can apply style sheet rules directly to any HTML element using
style attribute of the relevant tag. This should be done only when you
are interested to make a particular change in any HTML element only.
• Rules defined inline with the element overrides the rules defined in
an external CSS file as well as the rules defined in <style> element.

Unit2 Ecommerce

Uploaded by

Copyright:

Available Formats

Unit2 Ecommerce

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

Unit2 Ecommerce

Uploaded by

Copyright:

Available Formats

HTML?

• Sir Tim Berners-Lee developed HTML in around 1990, and he is

• In 1996, the World Wide Web Consortium (W3C) became the

• HTML became an international standard (ISO) in 2000.

• Markup language: Markup language uses tags to define elements within a

• HTML is a MUST for students and working professionals to become a

2. Is there any alternative for HTML?

4. Is HTML hard to understand?

5. What is the meaning of Markup Language?

The head element contains information about the web

The title element contains the title of

The body element appears after

Headings let you break up your page content

HTML actually supports 6 heading

• The size attribute in font tag takes values from 1 to 7.

An attribute is used to define the characteristics of an HTML

These elements fall into three distinct groups:

HTML core attributes are

The ID attribute is used to set a unique name for a

<P ID="FirstParagraph">This is the first paragraph

The STYLE attribute is used to add style sheet

• If a document is written carefully in a block style, it may be possible to

• As sections are added to an HTML document, breaking up the

• An HTML element is an individual component of an HTML document.

• Technically, an HTML element is the collection of start tag, its

• Empty elements (also called self-closing or void elements) are not

• A typical example of an empty element, is the <br> element, which

• An unordered list is a collection of related items that have no special

If you are required to put your items in a numbered list instead of

Images are very important to beautify as well as to depict many

• <img src = "Image URL" ... attributes-list/>

There are two attributes called cellpadding and cellspacing which

columns into a single column. Similar way you will

use rowspan if you want to merge two or more rows.

Example <th>Column 3</th> </tr>

You can set a table width and height

Note: This tag is deprecated in newer version of HTML.

• Horizontal alignment is controlled by the ALIGN attribute. It can

• Vertical alignment is controlled by VALIGN. It accepts the

• A webpage can contain various links that take you directly to

• Hyperlinks allow visitors to navigate between Web sites by

• Every document on the Web has a unique address. This

• Several HTML tags include a URL attribute value, including

You may address a URL in one of the following two ways:

• Absolute − An absolute URL is the complete address of a resource. For

• Relative − A relative URL indicates where the resource is in relation to

• <a href = "Document URL" ... attributes-list>Link Text</a>

HTML target attribute is used to specify the place in the browser

_self Opens the linked document in the same window/tab. This is

_parent Opens the linked document in the parent frame.

_framename Opens the linked document in a named frame.

You can create a link to a particular section of a given webpage

By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue

<body alink="green" vlink="red“ link=“yellow”>

Images in HTML can also work as a Hyperlink. It means you can

the image, he gets redirected to the attached link.

An HTML marquee is a scrolling piece of text displayed either

HTML frames are used to divide your browser window into