0% found this document useful (0 votes)

3 views128 pages

HTML Notes

The document provides an overview of HTML (Hyper Text Markup Language), explaining its evolution, structure, and key components such as elements, tags, and the Document Object Model (DOM). It details the differences between static and dynamic DOM, various types of elements used in HTML, and the significance of the head and body sections in an HTML document. Additionally, it discusses semantic elements introduced in HTML5 and how to arrange content into columns using CSS styles.

Uploaded by

sharmakeshav0206

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

3 views128 pages

HTML Notes

Uploaded by

sharmakeshav0206

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 128

HTML

(Hyper Text Markup Language) What is Hyper Text?

- Hyper means “beyond”

- Hyper text resembles text that contains content beyond what we see.

What is a Markup Language?

- The markup is derived from common computer terminology, where “marking up” is the process of
preparing for presenta on.

- Markup language is a presenta on language.

Evolu on of Markup Languages

- GML [Generic Markup Language] at “CERN” Labs

- SGML [Standard Generic Markup Language]

- Early 1990’s “Tim Berners Lee” introduced “HTML” for “Mosaic” browser.

- IETF (Internet Engineering Task Force) 1993

- 1995 HTML 2.0

- 1997 HTML 3.2

- 1997 HTML 4.0

- 2014 HTML 5.0

- 2017 HTML 5.2 [W3C and WHATWG]

Web Hypertext Applica on Technology Work
Group
World Wide Web Consor um

What is DHTML?

- Dynamic HTML. [Obsolete – No Longer in use]

What is HTML?

- It is a markup language.

- It is used for presenta on.

- HTML is used to present DOM.

What is DOM?

- Browser presents content in a hierarchy called DOM.

- Document Object Model

- It is a hierarchy used to present contents in HTML.

What is Sta c DOM and Dynamic DOM?

- The DOM which is ini ally loaded by HTML is sta c.

- HTML can present sta c DOM.

- Sta c DOM can’t handle interac ons.

- JavaScript, jQuery, Angular JS, React etc. are used to convert the sta c DOM into dynamic DOM.

How HTML Presents the DOM? - By using Elements

What are the elements used for presen ng DOM?

- Normal Elements

- Void Elements

- RC Data Elements

- Raw Text Elements

- Foreign Elements

Element Type Descrip on

Normal Elements
- Elements which return a presenta on directly on call back
[without any addi onal a ributes].

- Elements in HTML are built by using tags.

- Normal Elements require a start tag and end tag.

- Normal Elements will start returning presenta on but can’t

stop implicitly.

- They require explicit end tag.

- Usually require start and end tags.

Ex:
<b> Bold </b>

Void Elements
- The term void refers to element that doesn’t return any
presenta on directly on call back.

- Void means no return type.

- They can return only the speciﬁc content and stop implicitly.

- Void elements doesn’t require “End Tag”.

Ex:
<img> tag Image – Element

RC Data Elements
- Rich Content Elements

- These elements will not allow any another element with in the
context.
Ex:
<textarea> </textarea>

Raw Text Elements - These elements are presented without a tag.

Ex:
© ©
₹
Foreign Element - These are HTML elements used in HTML but requires addi onal
library.

- Every browser can’t understand these elements.

- You have to import a library that makes the browser compa ble
with element.
Ex:
SVG, MathML, Canvas

What is Element and What is Tag?

- HTML presents using Elements.

- Elements are built by using Tags.

Image - Element

<img> - Tag

Anchor - Element
<a> - Tag

Bold - Element
<b> - Tag

What is diﬀerence between A ribute and Property?

- A ributes are used sta cally in Tags.

- Proper es are use dynamically in Programming. var img = new Image();

img.src = “shoe.jpg”; //src is property

- Every a ribute of HTML tag doesn’t have rela ve property.

Structure of HTML Page

- Every HTML page comprises of 2 sec ons at high level

o Document Declara on o Document

Scope

Document Declara on:

- It comprises of informa on about HTML version.

- It informs the parser that we are using HTML 5 to design web page.

- The document declara on in HTML 5 is deﬁned by using the following En ty

<!DOCTYPE html>

Note: Comments in HTML are wri en with in “”

Document Scope:

- It speciﬁes the boundary of HTML document.

- It deﬁnes the start and end of every document in browser.

- Document scope in HTML is deﬁned by using

- Every document scope must specify which language content it is presen ng.

- Language is deﬁned by using the a ribute “lang”

Sec ons in HTML document scope

- Every HTML document scope comprises of 2 major sec ons

o Head Sec on o Body Sec on

Head Sec on:

- Head sec on comprises of content, which is intended to load into memory when page is requested by
client.

- The content from memory of browser can be accessed by page or browser when ever required.

- Typically head sec on is deﬁned with <head>

</head>

- It comprises of contents like o Title o Link o Meta o Script o Style Title Element:

- It comprises of tle, which is displayed in the browser tle bar.

- The tle is also used in bookmarking the page.

<html lang="en-IN">
<head>
< tle>Amazon Shopping</ tle>
</head>
</html>

Link Element:

- It is used to link external ﬁles to your web page.

- External ﬁles include short cut icons, stylesheets etc.

Ex: Link Shortcut Icon to Web Page [Favicon]

- Favicon must be an “icon” ﬁle with extension “.ico”

- Size of icon is between 16x16 pixels and 32x32 pixels

- Create a new folder by name “Icons” in your project.

- Add a new ﬁle into “Icons” folder by name

“favicon.ico”

- Right Click on Icons folder and “Reveal in Explorer”

- Right Click on “icon ﬁle” and select “Open with Paint”

- Set the page size 32 x 32 pixels

- Design your icon

- Save

- Go to your web page and link the icon ﬁle

<html lang="en-IN">
<head>
< tle>Amazon Shopping</ tle> <link rel="shortcut icon"
href="Icons/favicon.ico">
</head>
</html>

Note: Never use physical path directly in web development.

FAQ: When to use “\” back slash “/” forward slash?

- Virtual Path: “/” forward slash

“Icons/favicon.ico”
- Physical Path: “\” back slash
“C:\Icons\Favicon.ico”

Meta in Head Sec on

- The terms meta refers to “Meta Data”.

- Meta Data contains informa on about your page, which is provided to SEO [Search Engine
Op miza on] to make the page more SEO friendly.

- Meta is one of the op ons used in SEO. It Is not only the op on for SEO.

- Meta is also used for Responsive Pages. It is not only the op ons for Responsive.

<!DOCTYPE html>

<head>

< tle>Amazon Shopping</ tle>

<link rel="shortcut icon" href="../Icons/favicon.ico">

<meta charset="u -8">

<meta name="descrip on" content="something about your website..">

<meta name="author" content="Author Name for Blog">

<meta h p-equiv="refresh" content="4">

</head>

</html>

Body Sec on

- It comprises of content to display in browser workspace.

- The body sec on is conﬁgured by using “<body>” element. Syntax:

<body>
Some content
</body>
- Body tag comprises following a ributes

A ribute Descrip on

bgcolor It sets a background color for page.

text It sets color for text in page. [Foreground color] Ex:

<body bgcolor="red" text="yellow">
Welcome to Amazon
Shopping </body>

backgroun d It sets a background image for body sec on.

Ex: <body
background="../Images/banner3.jp g" text="white">
Welcome to Amazon
Shopping </body>

alink It deﬁnes color for ac ve link.

vlink It deﬁned color for visited link.
Ex:
<body vlink="green" alink="red">
<a href="home.html">Home</a> <a

href="h p://www.amazon.in">Am azon</a> </body>

le margin

rightmargi n

topmargin

bo ommar
gin

Sets the space between the content and browser window.

Ex:
<body le margin="50" rightmargin="50" topmargin="50"
bo ommargin="20"> Some paragraph.. </body>
align It aligns the en re body content to
le , center, right or jus fy Ex:
<body align=”jus fy”>
</body>

Seman cs of HTML Body

- Seman c elements are the elements used for a generic purpose.

- HTML 5 body sec on introduced new seman cs that can make body content more SEO friendly.

- HTML 5 body sec on related seman c elements are container elements.

- A container comprises of content like text, headings, tables, pictures etc.

aside It is a container used to deﬁne content, which is not rela ve to current
website.

ar cle It is a container used to deﬁne content, which is rela ve to the current

website and which summarizes the topics.

dialog It is a container, which can popup and allow interac ons with page.

ﬁgure It is used to encapsulate any image with cap on.

ﬁgcap on It is used to deﬁne a cap on for image.

header It deﬁnes the content to display at the top margin of page.

footer It deﬁnes the content to display at the bo om margin of page.

sec on It deﬁnes the content between header and footer.

main It deﬁnes the main content in sec on.

nav It deﬁnes the naviga on area.

menu It deﬁnes the items used for naviga on.

div It is a container used for division of content in page.

span It is a container used to span with exis ng content.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Layout Design</ tle>

<style> header
{

background-color: maroon; color:white; text-

align: center; font-size: 24px; border-radius: 30px;

} footer
{

background-color: maroon; color:white; text-

align: center; font-style: italic; border-radius: 30px;
}

sec on { height: 500px;

} main { text-align: center;
}
menu div

width: 200px; background-color:maroon; color:white; text-align:

center; font-size: 23px; margin-top: 20px; padding: 10px; border-
radius: 30px;
}

menu div:hover { background-color: black;

color:white; cursor: grab;
} main { font-size: 23px;
}

main span { background-color: yellow;

color:red; font-size: 32px; font-weight: bold;

} aside { ﬂoat:right; height: 40px;

width: 100px; border:2px solid maroon; font-size:
20px;
} ar cle { text-align: center; margin-top:
100px; margin-le : 600px; posi on: absolute;
border:2px do ed maroon; padding: 20px; border-radius:
20px; background-color: lightgreen;
}

</style>

</head>

<body>

Amazon Shopping

</header>

<sec on> <aside>

ads here.. </aside>
<ar cle>

<div>DEC Sale 70%</div>

<div>Latest Updates</div>

</ar cle>

<nav>

<menu>

<div>Home</div>
<div>Electronics</div>

<div>Footwear</div>

<div>Fashion</div>

</menu>

</nav>

<main>

Year End Sale. <span>Amazon oﬀers 50% OFF</span>. Ends on DEC - 30.

<ﬁgure> your image

<ﬁgcap on>Fig:1</ﬁgcap on>

</ﬁgure>

</main>

Chat with HR

</dialog>

</sec on>

<div>© copyright 2020 Amazon</div>

<div>Electronics | Footwear | Fashion | Support</div>

</footer>

</body>

</html> Task:

How to arrange content into columns?

- By using style a ributes o column-count o

column-rule o column-gap

Ex:
<!DOCTYPE html>

<html>

<head>

< tle>News Online</ tle>

sec on { margin-top: 20px;

column-count: 5; column-gap: 30px;
column-rule: do ed; text-align: jus fy;
} footer { margin-top: 20px;
column-count: 4; text-align: le ; background-
color:gray; color:white;

padding: 20px;

</style>

</head>

<body>

THE HINDU

</header>
<sec on>

<div>

Depending on how you obtained the Windows so ware, this is a license agreement between (i) you
and the device manufacturer or so ware installer that distributes the so ware with your device; or (ii) you and
Microso Corpora on (or, based on where you live or, if a business, where your principal place of business is
located, one of its aﬃliates) if you acquired the so ware from a retailer. Microso is the device manufacturer
for devices produced by Microso or one of its aﬃliates, and Microso is the retailer if you acquired the
so ware directly from Microso . Note that if you are a volume license customer, use of this so ware is subject
to your volume license agreement rather than this agreement.

This agreement describes your rights and the condi ons upon which you may use the Windows
so ware. You should review the en re agreement, including any supplemental license terms that accompany
the so ware and any linked terms, because all of the terms are important and together create this agreement
that applies to you. You can review linked terms by pas ng the (aka.ms/) link into a browser window.

</sec on>

<div>

<div>Movie News</div>

<div>Sports</div>

<div>Stock</div>

</div>

<div>

<div>Facebook</div>

<div>YouTube</div>

</div>

<div>

<div>[email protected]</div>

<div>www.epaper.com/hindu</div> <div>www.thehindu.com</div>

</div>

<div>

<div>[email protected]</div>

<div>www.epaper.com/hindu</div>

<div>www.thehindu.com</div>

</div>

</footer>

</body>

</html> Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Menu</ tle>

<style> menu div { width:

200px; height: 30px; padding:
10px; background-color: darkcyan;
color:white; text-align: center;
border-radius: 10px; display: inline;
margin-top: 50px;
}

</style>

</head>

<body>

<nav>

<menu>

<div>About</div>

<div>Contact</div>

<div>Login</div>

</menu>

</nav>

</header>

</body>

</html>

Basic HTML elements and En es for presen ng content in body sec on

- Line Breaks o Browser ignores the line breaks given in editor.

o You have to manually add line break by using “<br>” element.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

</head>

<body>

Welcome to HTML.<br>

This is our sta c Page.<br> <br>

Contents in body sec on <br> without seman cs. </body>

</html>

FAQ: What is diﬀerence between <br> and <br/>?

- There is not such element called “<br/>” in HTML.

- Always use only <br>

- <br/> is used to indicate that it is a self-ending or void element.

- Blank Spaces o Browser ignores addi onal spaces between words and characters.

o Browser allows only one characters space

between words or chars.

o To add manual space, you have to use “&nbsp” [non-breakable space]. o It

is “Raw Text Element” Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

</head>

<body>

H  T  M  L

</body>

</html>

- Pre-forma ed Text o It is used to present the content exactly as deﬁned in source code.

o It will keep the spaces and line breaks are deﬁned in editor.
o The content must be deﬁned with-in “<pre>” element.
Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

<style> pre { background-color: lightgrey;

border:2px solid black; padding:10px;

width: 400px;

}
</style>

</head>

<body>

<div>Sample C Program</div>

<div>

<pre>

#include <stdio.h> main

{

prin ("Welcome to HTML");

</pre>

</div>

</body>

</html>

- Code Element o <code> is an element used to deﬁne code snippet in web page.

o It allows to browser and SEO to understand that the content enclosed in some computer code.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

<style> pre { background-color: lightgrey;

border:2px solid black; padding:10px; width: 400px;
}

</style>

</head>

<body>

<div>Sample C Program</div>

<div>

<pre>

<code>

#include <stdio.h> main

{

prin ("Welcome to HTML");

}

</code>

</pre>

</div>

</body> </html>

Variables in HTML Code Presenta on:

- You can <var> for variable in HTML.

- Variables are designated with <var> for code snippet.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

</head>

<body>

<code>

<var>x</var> = 10; <br> <var>y</var> = 20; <br>

<var>z</var> = <var>x</var> + <var>y</var>;

</code>

</body> </html>

Address in HTML body

- The <address> element is used to deﬁne your contact details in web page.

- SEO uses the address and can display in search results.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

</head>

Naresh-I-Technologies <br> [email protected] <br>

phone: 040-59595842
</address>

</body>

</html>

Headings in HTML

- Headings need a diﬀerent appearance in page.

- HTML provides pre-deﬁned heading levels.

- HTML headings levels are deﬁned by using <hn>.

- “n” refers to level number from 1 to 6.

Syntax:
<h1> </h1>
<h2> </h2> ………………. <h6>
</h6>

- Heading levels from 1 to 6 will decrease the size.

- Heading can be deﬁned with “align” a ribute, which can align le , center, right or jus fy.

FAQ: Why to use heading element for headings?

- Heading elements will make your topics SEO friendly.

- SEO can iden fy the topics on your page if they are deﬁned in heading.

Note:

- Don’t use headings for highligh ng any word or sentence in a paragraph.

- Heading by default will have line break above and below.

- Don’t use too many headings in a page. SEO can SPAM your page.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

</head>

<body>

<h2>Web Terminology</h2>

It is a virtual directory on web server.

It is a Hypertext document.

</body> </html>

Data List with Terms and Deﬁni ons:

- Data List is deﬁned with <dl>

- Data list is a collec on of terms defined with <dt> and defini on defined with <dd> Syntax:
<dl>
<dt>Term</dt>
<dd> Defini on </dd>
<dt> Term </dt>
<dd> Defini on </dd>
<dd> Defini on </dd>
</dl> Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

<style> dt { font-weight: bold; background-

color: lightgrey;
}

</style>

</head>

<body>

<h2>Web Terminology</h2>

<dl>

<dt>Web Server</dt>

<dd>It resembles so ware and hardware.</dd>

<dd>It handle the request and response.</dd>

<dd>It is a virtual directory.</dd>

<dd>It is an hyper text document.</dd>

</dl>

</body>

</html> Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

<style> dt { font-weight: bold; background-

color: lightgrey;
}

</style>

</head>

<body>

<h2>Product Details</h2>

<dl>

<dt>Product Name</dt>

<dd>Samsung TV</dd>

<dt>Product Price</dt> <dd>45600.54</dd>

<dt>Stock Status</dt>

<dd>Available</dd>

</dl>

</body> </html>

Details and Summary

- It is used to display the content in detail only when required.

- It allows to expand and collapse your content.

- It saves the screen space. Syntax:

<details>
<summary> Your Title </summary> some text…
</details>

- You can specify “open” a ribute to show the details.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

<style> dt { font-weight: bold; background-

color: lightgrey;
}

</style>

</head>

<body>

<h2 align="center">Web Development</h2>

HTML is a markup language.Depending on how you obtained the Windows so ware, this is a license
agreement between (i) you and the device manufacturer or so ware installer that distributes the so ware with
your device; or (ii) you and Microso Corpora on (or, based on where you live or, if a business, where your
principal place of business is located, one of its aﬃliates) if you acquired the so ware from a retailer. Microso
is the device manufacturer for devices produced by Microso or one of its aﬃliates, and Microso is the
retailer if you acquired the so ware directly from Microso . Note that if you are a volume license customer,
use of this so ware is subject to your volume license agreement rather than this agreement.

</details>

CSS defines style for HTML elements.Depending on how you obtained the Windows so ware, this is a
license agreement between (i) you and the device manufacturer or so ware installer that distributes the
so ware with your device; or (ii) you and Microso Corpora on (or, based on where you live or, if a business,
where your principal place of business is located, one of its affiliates) if you acquired the so ware from a
retailer. Microso is the device manufacturer for devices produced by Microso or one of its affiliates, and
Microso is the retailer if you acquired the so ware directly from Microso . Note that if you are a volume
license customer, use of this so ware is subject to your volume license agreement rather than this agreement.

</details>

<summary>JavaScript</summary>

It is used to handling client side interac ons.

Depending on how you obtained the Windows so ware, this is a license agreement between (i) you and the
device manufacturer or so ware installer that distributes the so ware with your device; or (ii) you and
Microso Corpora on (or, based on where you live or, if a business, where your principal place of business is
located, one of its aﬃliates) if you acquired the so ware from a retailer. Microso is the device manufacturer
for devices produced by Microso or one of its aﬃliates, and Microso is the retailer if you acquired the
so ware directly from Microso . Note that if you are a volume license customer, use of this so ware is subject
to your volume license agreement rather than this agreement.

</details>

</body>

</html>

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

</head>

<body>

<h2>Amazon Shopping</h2>

<summary>Electronics</summary>

<dl>

<dd>Televisions</dd>

<dd>Cameras</dd>

<dd>Watches</dd>

</dl>

</details>

<summary>Footwear</summary>

<dl>

<dd>Sports</dd> <dd>Sneakers</dd>

<dd>Casuals</dd>

</dl>

</details>

</body> </html>
Field Set and Legends

- Field set is container with frame.

- Legend puts a cap on for ﬁeld set. Syntax:

<ﬁeldset>
<legend> Title </legend>
Your conten…
</ﬁeldset> Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Demo</ tle>

</style>

</head>

<body>

<ﬁeldset>

<legend align="center">Annexure-1</legend> HTML is a markup language.

Depending on how you obtained the Windows so ware, this is a license agreement between (i) you and
the device manufacturer or so ware installer that distributes the so ware with your device; or (ii) you and
Microso Corpora on (or, based on where you live or, if a business, where your principal place of business is
located, one of its aﬃliates) if you acquired the so ware from a retailer. Microso is the device manufacturer
for devices produced by Microso or one of its aﬃliates, and Microso is the retailer if you acquired the
so ware directly from Microso . Note that if you are a volume license customer, use of this so ware is subject
to your volume license agreement rather than this agreement.

</ﬁeldset>

<ﬁeldset>

<legend align="center">Annexure-2</legend> JavaScript is used for client side interac ons.

Depending on how you obtained the Windows so ware, this is a license agreement between (i) you and
the device manufacturer or so ware installer that distributes the so ware with your device; or (ii) you and
Microso Corpora on (or, based on where you live or, if a business, where your principal place of business is
located, one of its affiliates) if you acquired the so ware from a retailer. Microso is the device manufacturer
for devices produced by Microso or one of its affiliates, and Microso is the retailer if you acquired the
so ware directly from Microso . Note that if you are a volume license customer, use of this so ware is subject
to your volume license agreement rather than this agreement.
</fieldset>

</body>

</html>

Paragraphs and Blockquotes

- HTML ignores the line breaks and paragraph marks.

- You have to manually add paragraphs by using <p> element.

- It supports “align” a ribute, which can set text le , center, right or jus ﬁed.

- Paragraphs will have a line break before and a er.

Syntax:
<p>
Your Content
</p>

- Blockquote is similar to paragraph but have le and right indenta on for text.
[Indenta on is space between margin and text] - It is deﬁned by using “<blockquote>” element.

- In SEO blockquote is used a summary for content in page.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Paragraph</ tle>

<style> blockquote { padding-le : 150px; padding-right: 150px;

font-style: italic; border-top: 2px double darkcyan; border-bo om: 2px
double darkcyan; width: 400px;
}

</style>

</head>

<body>

<blockquote align="jus fy">

</blockquote>

<p align="jus fy">

This agreement describes your rights and the condi ons upon which you may use the Windows
so ware. You should review the en re agreement, including any supplemental license terms that
accompany the so ware and any linked terms, because all of the terms are important and together create
this agreement that applies to you. You can review linked terms by pas ng the (aka.ms/) link into a
browser window.

</p>

<p align="jus fy">

Microso Corpora on (or, based on where you live or, if a business, where your principal place of
business is located, one of its aﬃliates) if you acquired the so ware from a retailer. Microso is the device
manufacturer for devices produced by Microso or one of its aﬃliates, and Microso is the retailer if you
acquired the so ware directly from Microso . Note that if you are a volume license customer, use of this
so ware is subject to your volume license agreement rather than this agreement.

</p>

</body>

</html>

Ordered and Unordered List

- Order List will add auto numbering for a list of op ons, which can update automa cally when you add
or delete items.

- Orders List is deﬁned by using <ol> Element.

- Items in list are deﬁned by using <li>.

Syntax:
<ol>
<li> Item-1 </li>
<li> Item-2 </li>
</ol>

Ex:

<body>

<h2>Web Terminology</h2>

<ol>

<li>Internet</li>

<li>Web Server</li>

</ol>

</body>

- <ol> can be deﬁned with following a ributes

A ribute Descrip on
Type If speciﬁes the numbering type, which can be:

- a

- A

- i

- I

- 1
Ex:
<ol type="a">
<li>Internet</li>
<li>Web Server</li>
<li>Web Site</li>
<li>Web Page</li>
</ol>

start It deﬁnes the numbering level to start with.

[number] Ex:
<ol type="A" start="5">
<li>Internet</li>
<li>Web Server</li>
<li>Web Site</li>
<li>Web Page</li> </ol>

reversed It arranges the numbering in

reverse order. It is not support on old version browser.
Ex:
<ol reversed start="5">
<li>Internet</li>
<li>Web Server</li>
<li>Web Site</li>
<li>Web Page</li> </ol>

lang It speciﬁes the numbering language according to speciﬁed region. It

is supported only on modern browsers.

Ex:
<ol lang="hi" >
<li>Internet</li>
<li>Web Server</li>
<li>Web Site</li>
<li>Web Page</li> </ol>

Numbering can be deﬁned in mul -level:

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Paragraph</ tle>

</head>
<body>

<h2>Web Terminology</h2>

<li>

HTML

<li>Normal Elements

<ol type="a"> <li>Bold</li>

<li>Italic</li>

</ol>

</li>

<li>Void Elements

<li>Line Break</li>

<li>Image</li>

</ol>

</li>

</ol>

</li>

<li>

JavaScript

<li>Variables</li>

<li>Data Types</li>

</ol>

</li>

</ol>

</body>

</html>

- Numbering will not con nue the previous list once you end it.

Ex:

<body>

<ol>

<h2>Web Terminology</h2>
<li>Web Site</li>

<h2>Terms con nued..</h2>

<li>Internet</li>

</ol>

</body>

FAQ: How can we arrange list items side by side?

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Paragraph</ tle>

<style> ol { display: ﬂex;

list-style: none;
} li {
margin-le :
40px;
border:2px solid
darkcyan;
background-
color: darkcyan;
color:white;
padding:5px;
text-align:
center;
border-radius:
10px;
width: 200px;
}

</style>

</head>

<body>

<li>About</li>

<li>Contact</li>

<li>Signin</li>

</ol>

</body>

</html>

Unordered List

- It is used to deﬁne bulleted list.

- Bulleted list comprises symbol instead of numbering.

- Unordered list is deﬁned by using “<ul>”

- List items are deﬁned by using “<li>”

- The a ribute “type” deﬁnes the symbol type, which can be

o disc o circle o
square Ex:

<body>

<li>Web Sever</li>

</ul>

</body>

FAQ: How to deﬁne custom symbol as bullet symbol?

- By using style a ribute “list-style-image”

- It uses “url()” that speciﬁes the name and loca on of image to display.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>List</ tle>

} li {
font-size: 34px;

</style>

</head>

<body>

<ul>

<li>Web Sever</li>

</ul>

</body>

</html>

Unordered list can be nested:

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>List</ tle>

<style>

</style>

</head>

<body>

<ul>

<li>Web Sever

<ul>

<li>Apache Tomcat</li> </ul>

</li>

<li>Web Page

<li>Dynamic Page</li>

</ul>

</li>

</ul>

</body>

</html>

List can be “Assorted” with combina on of Ordered and Unordered:

Ex:

<body>

<li>HTML

<ol>

<li>Normal Elements

<li>Italic</li>

</ul>

</li>

<li>Void Elements

<li>Image</li>

<li>Break</li>

</ul>

</li>

</ol>

</li>

<li>JavaScript</li>

</ol>

</body>

Library for Icons and Symbols used in real-world applica on development

“Fontawesome”

- Visit the following URL h ps://fontawesome.com/how-to-use/on-theweb/setup/hos ng-font-

awesome-yourself
- Click on
“Download Fontawesome Free for Web”

- It will download “fontawesome ZIP” folder

- Extract the ZIP folder and copy all its sub folders

- Go to your project and create a new folder by name “Fonts”

- Paste all the copied sub folders into “Fonts” folder. - Now your project is ready to use “Fontawesome”

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Menu</ tle>

<link rel="stylesheet" href="../fonts/css/all.css">

<style> ul { list-style: none;

} li {
margin-top: 20px; border:1px solid darkcyan;
padding: 5px; width: 200px; background-color: lightcyan;
color:blue;
}

</style>
</head>

<body>

<ul>

<li> <span class="fa fa-home"></span> <span>Home</span></li>

<li> <span class="fa fa-tv"></span> Electronics</li>

<li> <span class="fa fa-tshirt"></span> Fashion</li>

<li> <span class="fa fa-shoe-prints"></span> Footwear</li>

<li> <span class="fa fa-bell"></span>

No ﬁca ons</li>

<li> <span class="fa fa-user"></span> Login</li>

</ul>

</body>

</html> Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Fontawesome</ tle>

<link rel="stylesheet" href="../fonts/css/all.css">

<style>

ul { list-style: none;
width: 140px;
} li{
margin-top: 10px; border-bo om: 1px solid gray; padding:
10px;
} li:hover { background-color: black;
color:white; cursor:grab;
}

</style>

</head>

<body>

<ul>

<li><span class="fa fa-home"></span>

<li><span class="fa fa-user-circle"></span> <span>Proﬁle</span> </li>

<li><span class="fa fa-bell"></span> <span>No ﬁca ons</span> </li>

</ul>
</body>

</html>

Text Forma ng in HTML

- Text forma ng includes changing the font, font style, size, color and eﬀects etc.

- HTML provides the following elements for forma ng the text.

Element Descrip on

<font> It is used to conﬁgure the following op ons for text

- Face: It deﬁnes font family like, Arial, Time New Roman, Sans-
Serif etc.
Ex:
<font face="Segoe Script">
Welcome to HTML
</font>

- Size: It deﬁnes the font size, which can be from 1 to 7 levels.

[Default size is 3]

- Color: It deﬁnes color for text.

Note: <font> is deprecated [Obsolete] from HTML 5. It is

recommended to deﬁne font only with CSS.

Ex:

<body>
<font face="Arial" color="red" size="5">Welcome to HTML</font>

</body> Ex:
<body>

<font size="4" color="red">W</font> <font size="5" color="blue">E</font>

<font size="7" color="yellow">C</font>

<font size="6" color="green">O</font>

<font size="5" color="blue">M</font>

<font size="4" color="red">E</font>

</body>

FAQ: How to deﬁne colors in HTML?

- HTML allows 2 techniques for colors o Color Name / Color Shade Name o Hexadecimal Code

Colors in HTML

- Color Names:

o HTML allows you to deﬁne 16 Million colors.

o Only 17 colors are known by their name.
 Aqua
 Blue
 Gray Lime
 Navy
 Orange
 Red
 Teal
 Yellow
 Black
 Fuchsia
 Green
 Maroon
 Olive

 Purple

 Silver

 White

 Transparent o HTML also support hundreds of color shade

names

 Darkcyan

 Lightcyan

 Lightgreen etc..

Ex:

<body bgcolor=”lightgreen”> </body>

- Hexadecimal Color Code o Hexadecimals colors are basically “RGB” color o R-Red, G-Green, B-Blue

o Hexadecimal number system is 16 base number system, where we use 16 diﬀerent values
ranging from “0 to F”.

o Hexadecimal color can be deﬁned in 3 or 6

chars followed by hash “#”

 3 Chars Code #RGB

 6 Chars Code

#RRGGBB

o Red, Green and Blue Value can be “0 to F”

Hexa: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
[0 is minimum, f is maximum]

- First place is for Red

- Second Place is for Green

- Third place is for Blue Ex:

#FF0000 - Red #F00

#00FF00 - Green #0F0

#0000FF - Blue #00F

#FFFF00 - Yellow #FF0

#000000 - Black #000

#FFFFFF - White #FFF

Ex:

<body bgcolor=”#ﬀ00ﬀ”> </body>

Font Styles and Font Eﬀects

Font Style Tag

Bold <b> <strong>

Italic <i> <em> [Emphasized]

Font Eﬀects Tag

Underline <u> <ins>

Strikeout <strike> <del>

Super Script <sup> Character posi on raised from base line

Sub Script <sub> Character posi on lowered from base line

- HTML document is designed and reviewed by developer.

- Documents have 2 modes o Design Mode o Review Mode

- In review mode the design can be modiﬁed.

- Modiﬁca ons are indicated using few review tags like <em> <ins> <del> <strong> etc.

Ex:

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="../fonts/css/all.css"> <style>

#ra ng { background-color: green;

color:white; font-weight: bold; padding: 4px;
border-radius: 5px;
} li {
margin-bo om: 5px;

} ul {
margin-le : -20px;

</style>

</head>

<body>

<td>

<div>

</div>

</td>

<td>

<div>

<b><font face="sans-serif" color="blue" size="5">Realme 7 (Mist Blue, 64 GB)</font></b>

<br>

<font face="arial" color="gray">

<span id="ra ng">4.3 <span class="fa fa-star"></span> </span>

1,73,000 Ra ngs & 18,000 Reviews

</font>

<br>

<font color="gray" face="arial">

<ul>

<li>6 GB RAM | 64 GB ROM |

Expandable Upto 256 GB</li>
<li>16.51 cm (6.5 inch) Full HD+ Display</li>

<li>64MP + 8MP + 2MP + 2MP |

16MP Front Camera</li>

<li>5000 mAh Lithium-ion Ba ery</li>

<li>MediaTek Helio G95

Processor</li>

</ul>

</font>

</div>

</td>

<td>

<div>

<font face="arial" size="5">

<b>

₹ 14,999

</b>

</font>

<br>

<font color="gray" face="arial">

</font>

<font color="green" face="arial">

16% Oﬀ

</font>

<br>

Upto <font face="arial"><b>₹ 13,200 </b></font> oﬀ on Exchange.

</div>

</td>

</tr>

</table>

</body>

</html>
Images in HTML

- The HTML <img> tag is used to embed images into page.

- Browser can’t support all image types.

- Whenever you are conﬁguring images, browser veriﬁes its “MIME” type.

- MIME [Mul purpose Internet Mail Extension] Ex:

Flower.jpg image/jpeg [MIME Type]
Flower.jpeg
Flower.jﬁf
Flower.pjpeg

- You have to use only supported image types. - HTML standard Image types
Abbrevia o n File Format MIME Type File
Extensio n

APNG Animated Image/apng .apng

Portable
Network
Graphics

BMP Bitmap File Image/bmp .bmp

GIF Graphics Image/gif .gif

Interchange Format

ICO Microso Icon Image/x-icon .ico,

.cur

JPEG Joint Image/jpeg .jpg,

Photograph .jpeg,
ic Expert .jﬁf,
Group .pjpeg,
.pjp

PNG Portable Image/png .png

Network
Graphics

SVG Scalar Image/svg+x ml .svg

Vector
Graphics

TIFF Tagged Image/ ﬀ . ﬀ,

Image File . f
Format

WebP Web Image/webp .webp

Picture
Format

FAQ: Tell me about XML format Image in HTML?

- SVG is XML format image.

- This image format can’t be blocked by ﬁrewall.

- XML format images can be available oﬄine. - Cross pla orm [Every Device]

A developer must know the type of image suitable for situa on.
Image Type Purpose

PNG
- High resolu on

- High deﬁni on
- Occupy more space in memory

- Hight pixel depth.

- Good for providing image which user can download and

use for later.

JPG
- Compressed Image format - Occupies less space.

- Less pixel depth than PNG

- High resolu on

- High deﬁni on

- Loose the quality on ZOOM.

- Good for on screen presenta on.

GIF
- Low resolu on

- Low deﬁni on

- Less pixel depth than JPG - Only 256 colors

- Can have anima on.

- Good for logos, bullets, bu ons.

SVG
- SVG is XML format image.

- This image format can’t be blocked by ﬁrewall.

- XML format images can be available oﬄine.

- Cross pla orm [Every Device]

- Vector Graphics [2D] - Not pixel based.

- Zoom image – Quality increase

WebP
- It embeds image into page.

- When you try to save image, it saves en re page.

- It will not allow to capture the image separately.

- If you are using images for adver sements then you have to conﬁgure the size also as per standards
Leaderboard and height] 728 x 90 [pixels in width

Half Page 300 x 600

Medium Rectangle 300 x 250

Large Rectangle 336 x 280

- Photoshop is the tool used for publishing and edi ng images.

- The tag <img> is used to embed image into page.

- It is a void element.

- <img> is conﬁgure with following a ributes

A ribute Descrip on

alt It deﬁnes the alterna ve text to display when image is unable to load.

src It speciﬁes the name path of image to display.

Width & height It speciﬁes the width and height in pixels or in percentage.

border It speciﬁes border for image in pixels.

tle It speciﬁes the screen p to display for image when mouse is over the image.

align Align image le or right.

Image will not support center.
Align will wrap text around image.

Hspace Horizontal space between text and image.

Vspace Ver cal space between text and image.

Note:
In latest versions of HTML “hspace and vspace” are obsolete.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Images in HTML</ tle> </head>

<p>Depending on how you obtained the Windows so ware, this is a license agreement between (i) you
and the device manufacturer or so ware installer that distributes the so ware with your device; or (ii) you and
Microso Corpora on (or, based on where you live or, if a business, where your principal place of business is
located, one of its aﬃliates) if you acquired the so ware from a retailer. Microso is the device manufacturer
for devices produced by Microso or one of its aﬃliates, and Microso is the retailer if you acquired the
so ware directly from Microso . Note that if you are a volume license customer, use of this so ware is subject
to your volume license agreement rather than this agreement.

</p>

</body>

</html>

- Image a ributes which are used with integra on of server-side technologies.

A ribute Descrip on
crossorigin It speciﬁes the accessibility of resources from cross-origin. [CORS
– Cross Origin Resource Sharing]

- Allow Anonymous [Allow All to access]

- Use Creden als [Need

Authen ca on] Ex:
<img crossorigin="anonymous" src="h ps://cdn/Images/nike.jpg"
width="200" height="200">

decoding It speciﬁes how to load the image along with other content in page.

- Sync: Synchronized, it will block other content while loading

image.

- Async: Allows to load image along with other contents.

Ex:

<img decoding="async" src="../Images/nike.jpg" width="200"

height="200">
Importance
- It deﬁnes the priority for image.

- It can be low, high or auto.

- Images with high priority are loaded ﬁrst.

Ex:
<img importance="auto" src="../Images/nike.jpg" width="200"
height="200">

Ex:
<!DOCTYPE html>
<html>
<head>
< tle>Images in HTML</ tle>
<style> .card { width: 250px; padding:
10px; border:2px solid darkcyan; border-radius:
10px;
margin:30px;
}
.card-header {

text-align: center;
background-color:lightgoldenrodyellow;
font-size: 26px;
padding:3px;
}
.card-footer {
text-align: center;
background-color:lightgoldenrodyellow;
padding: 3px;
}
.card-img {
border:2px solid darkcyan;
border-radius: 100px;
}
.card-body { text-align: center;
}
.card-deck {
display: ﬂex;
}
</style>
</head>
<body>
<div class="card-deck">
<div class="card">
<div class="card-body">
<img class="card-img" src="../Images/shoe.jpg" width="200"
height="200"> </div>
<div class="card-header">
<h3>Nike Casuals</h3>
</div>

<div class="card">
<div class="card-header">
<h3>Shirt</h3>
</div>

<div class="card">
<div class="card-header">
<h3>Jeans</h3>
</div>
<div class="card-body">

<img class="card-img" src="../Images/jeans.jpg" width="200"

height="200"> </div>
<div class="card-footer">
<p>₹ 3000.66</p>
<p>more..</p>
</div> </div>

</div>
</body> </html>

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Card</ tle>

<style> .card { width: 300px; border:2px solid

black; border-top-le -radius:20px; border-top-right-radius:
20px; margin:30px;
}
.card-body { padding: 10px;
text-align: jus fy; font-family: Arial;
}

.card-img { border-top-le -radius:20px; border-top-right-radius:

20px;
}

.card-deck { display: ﬂex;

}

</style>

</head>

<body>

<div>

</div>

Microso is the device manufacturer for devices produced by Microso or one of its </p>

</div>

<div>

</div>

</div>

</body>

</html> Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Card</ tle> <style> .card { width:

300px; border:2px solid black; border-top-le -
radius:20px; border-top-right-radius: 20px;
margin:30px;
}

.card-body { padding: 10px;

text-align: jus fy; font-family: Arial;
}

.card-img { border-top-le -radius:20px; border-top-right-radius:

20px;
}

.card-deck { display: ﬂex;

}

</style>

</head>

<body>

<div>

</div>

</div>

<div>

</div>

</div>

</body>

</html>

Hyperlinks in HTML

- Link is clickable text, picture or graphic that navigates the user to any speciﬁed loca on when clicked.

- Hyperlink is clickable text, picture of graphics that navigates over “H p”.

- Hyperlinks are required to design naviga on in website.

Note: According the Web Designing standards every website must have a proper naviga on mechanism. User
must able to reach to any topic just with one click.

- HTML Hyperlinks are created by using “Anchor” Element.

- Anchor is designed by using “<a>” tag.

- Hyperlinks in Website are classiﬁed into 2 types o Intra document links o Inter document links

Intra document link

- It is a hyperlink that handles naviga on from one loca on to another within the page.

- User can navigate to any loca on within the page.

- In order to navigate to any loca on within page, you have to deﬁne unique reference ID for the target
element.
Ex:
<h2 id=”electronics”> </h2>
<div id=”footwear”> </div>
<img id=”pic”>

- The anchor element uses “href” a ribute that speciﬁes the target loca on.

- “href” will set the speciﬁed path in “URL”.

- You can refer any ID by using “#” Syntax:

FAQ: How to change color for Visited, Ac ve and Normal Links?

- You can use <body> tag a ributes o alink o vlink

- You can deﬁne with styles o a:link { } o a:visited { }

o a:ac ve { }

FAQ: How to remove underline for Hyperlink?

- You can use “style”

- text-decora on:none

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Intra Document Naviga on</ tle>

<link rel="stylesheet" href="../fonts/css/all.css">

<style> .container { display: ﬂex;

column-count: 2; column-gap: 60px;
}

.content { height: 400px;

overﬂow: scroll;

} ul { list-style: none;
} li {
width: 100px; margin-top: 20px; border:2px
solid darkcyan; padding: 5px; border-radius: 5px;
background-color: darkcyan; color:white;
} a{ color:white; text-
decora on: none;
}

a:hover { text-decora on: underline; }

</style>

</head>

<body>

<li> <a href="#electronics"><span class="fa fatv"></span> Electronics</a> </li>

<li> <a href="#footwear"><span class="fa fashoe-prints"></span> Footwear</a></li>

<li> <a href="#fashion"><span class="fa fatshirt"></span> Fashion</a></li>

</ul>

</div>

<h2 id="electronics">Electronics</h2>

<img src="../Images/speaker.jpg" width="100" height="100">

<img src="../Images/earpods.jpg" width="100" height="100">

<p>Depending on <span><a style="color:blue" href="#wild">See:Wild Life</a></span> how you

obtained the Windows so ware, this is a license agreement between (i) you and the device manufacturer or
so ware installer that distributes the so ware with your device; or (ii) you and Microso Corpora on (or,
based on where you live or, if a business, where your principal place of business is located, one of its aﬃliates)
if you acquired the so ware from a retailer. Microso is the device manufacturer for devices produced by
Microso or one of its aﬃliates, and Microso is the retailer if you acquired the so ware directly from
Microso . Note that if you are a volume license customer, use of this so ware is subject to your volume license
agreement rather than this agreement.</p>

<h2 id="footwear">Footwear</h2>

<img src="../Images/shoe.jpg" width="100" height="100">

<img src="../Images/shoe1.jpg" width="100" height="100">

Microso is the device manufacturer for devices produced by Microso or one of its aﬃliates, and Microso is
the retailer if you acquired the so ware directly from Microso . Note that if you are a volume license
customer, use of this so ware is subject to your volume license agreement rather than this agreement.</p>

<h2 id="fashion">Fashion</h2>

<img src="../Images/jeans.jpg" width="100" height="100">

<img src="../Images/shirt.jpg" width="100" height="100">

<img src="../Images/wild.jpg" width="200" height="200">

</div>

</body>

</html>

- Intra document links can use target selector of “css” in order to highlight the target content if it is not
scrollable.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Intra Document Links</ tle>

<style> ul { list-style: none;

display: ﬂex; margin-le : -60px; }
li {
margin-le : 30px; border:2px solid darkcyan;
background-color: darkcyan; width: 200px; padding: 5px;
text-align: center;
} a{ color:white; text-
decora on: none;
}

.topic { border:2px solid darkcyan; padding: 10px;

background-color: darkcyan; color:white; margin-top:
20px;
}

.topic:target { background-color: black; color:white;

}

</style>

</head>

<body>

<nav>

<ul>

<li><a href="#js">JavaScript</a></li>

</ul>
</nav>

</header>

<div id="html" class="topic">

<p>It is a markup language..</p>

</div>

<div id="css" class="topic">

<p>It deﬁnes styles for HTML</p>

</div>

<div id="js" class="topic">

<h2>JavaScript</h2>

<p>It is a language.</p>

</div>

</body>

</html>

- You can handle Scrolling of content in a page with a “S cky Posi on”.

Ex:

<!DOCTYPE html>

<html>

<dd>Selectors</dd>

<dd>Transi ons</dd>
<dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd>

<dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd>

<dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd>

<dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd>

<dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd> <dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd>

<dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd>

<dd>Responsive Design</dd>

<dd>Selectors</dd>

<dd>Transi ons</dd>

<dd>Responsive Design</dd>

<dt>JavaScript</dt>

<dd>Variables</dd>

<dd>Data TypeScript</dd>

<dd>Operators</dd>

<dd>Statements</dd>

<dd>Variables</dd>

<dd>Data TypeScript</dd>

<dd>Operators</dd>

<dd>Statements</dd>

<dd>Variables</dd> <dd>Data TypeScript</dd>

<dd>Operators</dd>

<dd>Statements</dd>

<dd>Variables</dd>

<dd>Data TypeScript</dd>

<dd>Operators</dd>

<dd>Statements</dd>

<dd>Variables</dd>

<dd>Data TypeScript</dd>

<dd>Operators</dd>

<dd>Statements</dd>

</dl>

</body>

</html>

Inter Document Links

- Hyperlinks that handle naviga on to any URL or any another page in website.

- It also refers Hyperlink which can invoke email and call clients.

- Naviga on can be to o File [word document, presenta on, pdf]

o URL
o Email Client o Mobile Dial applica on o HTML Page

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Inter Document Links</ tle>

</head>

<body>

<ol>

<li><a href="newsonline.html">News Online</a></li>

<li><a href="../Images/shoe.jpg">Nike Casuals</a></li>

<li><a href="../docs/cssdemo.pdf">CSS Tutorial PDF</a></li>

<li><a href="h p://www.amazon.in">Amazon Shopping</a></li>

<li>Contact : <a
href="mailto:[email protected]">[email protected]</a></li> <li>Call : <a
href="tel:+919876543210">+919876543210</a></li>

</ol>

</body> </html>

Note:

- Every ﬁle that you conﬁgured as target in Hyperlink can’t open in browser. Files require special plugins
to open the content and show in browser.

- If plugin is missing on not available then the linked ﬁle will be downloaded.

FAQ: How to download any ﬁle through a link without opening it in browser?

- We can use “download” a ribute for Hyperlink.

Ex: <a href="../docs/cssdemo.pdf" download="" >CSS Tutorial PDF</a>

<a href="../docs/cssdemo.pdf" download="css tutorial" >CSS Tutorial PDF</a>

FAQ: How to open link target in a new Tab?

- Usually, the link target opens in the same browsing tab.

- You can deﬁne link with “target” a ribute with value “_blank” to open in a new tab.

Syntax:

<a href="../Images/shoe.jpg" target="_blank" >Nike

Casuals</a>

FAQ: How to open link target in a new Window?

- You have to use JavaScript “window.open()” method for hyperlink.

Syntax:

<a
href="javascript:window.open('../Images/shoe.jpg','Nik e','width=500 height=400')"> Nike Casuals</a>

FAQ: How to open link target in the same window along with exis ng content?

- You can embed the link target into same window along with exis ng content by using “iFrame”

- Iframe allows to embed any external linked document into the page at speciﬁed loca on.
Ex:

<iframe src="h ps://www.youtube.com/embed/siKFFOW2gw" width="600" height="500"></iframe>

Ex:

- Add “Pages” folder in your project

- Add following ﬁles into folder o Home.html

o Electronics.html o Footwear.html
o Fashion.html

- Add another ﬁle in “public” folder o Index.html

“Code you can ﬁnd in Pages a ached to notes”

Frames in HTML

[Obsolete – No Longer in use]

- HTML provides <frameset> that can split the browser window into mul ple windows.

- <frameset> is a collec on of “frames”.

- Every frame is designed by using <frame>.

Note: It is not embedding the content into page. It is spli ng the window into horizontal or ver cal panes. -
The document that is designed with frame can’t contain body sec on.

Syntax:

<!DOCTYPE html>

<html>

<head>

< tle>Shopping | Online</ tle>

</head>

<frameset rows="15%, 70%, 15%">

</frameset>

</html>

- You can’t add any content directly inside frame.

- Frame can handle only a document [Picture, PDF, text, HTML] by using “src” a ribute.

Syntax:

<!DOCTYPE html>

<html>

<head>

< tle>Shopping | Online</ tle>

</head>

<frameset rows="15%, 70%, 15%">

</frameset>

</html> Ex:
1.Add following ﬁles into “Pages”
a. Menu.html
b.Footwer.html
c. Home.html
d.Electronics.html
e.Footwear.html
f. Fashion.html
2.Menu.html
<head>
<link rel="stylesheet" href="../fonts/css/all.css">
<style>
ul {
list-style: none;

}
li {
width: 100px; padding:10px; margin-top: 30px;
background-color: darkcyan;
color:white;
}
a{
text-decora on: none;
color:white;
} </style> </head>
<body> <ul>
<li><a href="../Pages/home.html" target="frameBody"> <span class="fa fahome"></span>
Home</a></li>
<li><a href="../Pages/electronics.html" target="frameBody"> <span class="fa
fatv"></span> Electronics</a></li> <li><a href="../Pages/footwear.html"
target="frameBody"> <span class="fa fa-shoeprints"></span> Footwear</a></li>
<li><a href="../Pages/fashion.html" target="frameBody"> <span class="fa fatshirt"></span>
Fashion</a></li>
</ul> </body>
3.Index.html
<!DOCTYPE html>
<html>
<head>
< tle>Shopping | Online</ tle>
</head>
<frameset cols="15%, 70%, 15%" noresize>
<frame src="../Pages/menu.html"></frame>
<frame name="frameBody" src="../Pages/home.html"></frame>
<frame src="../Pages/footer.html"></frame>
</frameset>
</html>

Ex: Image Link

<!DOCTYPE html>

<html>

<head>

< tle>Image Links</ tle>

<style> .container { display: ﬂex;

column-count: 2; column-gap: 40px;
}

iframe { border:none;
} img { border:2px solid;
}

.rightPanel { width: 1000px;

}

</style>

</head>

<body>

<div class="le Panel"> <h3>Preview</h3>

<div>

<a href="../Images/earpod1.png" target="frameBody">

<img src="../Images/earpod1.png" width="50" height="50">

</a>

</div>
<div>

<a href="../Images/shoeanimated.gif" target="frameBody">

<img src="../Images/shoeanimated.gif" width="50" height="50">

</a>

</div>

<iframe name="frameBody" width="100%" height="500">

</iframe>

</div>

</body>

</html>

Tables in HTML

- Tables are used to organize the data in rows and columns.

- HTML uses tables to present content in rows and columns.

- Early version of HTML [4] used tables for designing en re document.

- HTML 5 introduced new elements and a ributes for designing tables.

- HTML 5 table elements are

Element Descrip on

<table> It is a collec on of rows and columns.

<cap on> It sets cap on for table.

<thead> It deﬁnes the table header sec on.

<tbody> It deﬁnes the table body sec on.

< oot> It deﬁnes the table footer sec on.

<th> It deﬁnes column heading content.

<tr> It deﬁnes the table row.

<td> It deﬁnes the table cell content.

<colgroup> It groups a set of columns to deﬁne eﬀects.

Ex:
<!DOCTYPE html>
<html>
<head>
< tle>Tables</ tle>
</head>
<body>
<table width="400" border="1">
<cap on>Products Table</cap on> <colgroup span="2" style="backgroundcolor:
yellow;" ></colgroup>
<thead>

<tr>
<th>Product Id</th>
<th>Name</th>
<th>Price</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>JBL Speaker</td>
<td> ₹ 5600.55</td>
<td>
<img src="../Images/speaker.jpg" width="50" height="50">
</td>
</tr>
<tr>
<td>2</td>
<td>Nike Casuals</td>
<td>₹ 3000.44</td>
<td>
<img src="../Images/shoe.jpg" width="50" height="50">
</td>
</tr>
</tbody>
< oot>
<tr>
<td></td>
<td>© copyright 2021</td>
<td></td>
<td></td>
</tr>
</ oot>
</table>
</body>
</html>

Forma ng Tables in HTML

- Table element provides several a ributes that are used to conﬁgure and format the table appearance.

Border, Frame and Rules:

Frame Frame is deﬁned for en re table.
Frame uses the values:

- Box

- Void

- Above

- Below

- Rhs
- Lhs
Syntax:
<table frame=”box”>

Rules It is deﬁned for rows and columns.

Rules can use following values:

- All

- None

- Groups

- Rows

- Cols Syntax:
<table frame=”box” rules=”groups”>

Border It is deﬁned for table cell.

Border can use only 0 or 1.
0 – without border
1- with border

Note: Border can’t be applied if table is deﬁned with rules.

Syntax:
<table border=”1” frame=”void”> <table border=”1” rules=”all”> border will
not be applied to table.

Cell Spacing and Padding

cellspacing It sets space between cells.

cellpadding It sets space between border and cell content.

Syntax:

<table width="600" cellpadding="10" cellspacing="10" border="1" frame="void">

Alignments
align It aligns the content horizontally le , center, right or jus fy.
Syntax:
<table align=”center”>
<tbody align=”center”>
<tr align=”center”>
<td align=”center”>

valign It aligns the content ver cally top, center, bo om.

Syntax:
<tbody valign=”top”> <tr valign=”bo om”>
<td valign=”center”>

Syntax:

<tbody align=”center” valign=”center”>

Height and width

Height It deﬁnes height for row.
Syntax:
<tr height=”200”>
<th height=”200”>
<td height=”200”>
Width It deﬁnes cell width.
<td width=”200”>
<th width=”200”>

Syntax:

<table width=”300” height=”100”>

Merging or Rows and Columns

colspan It can merge speciﬁed number of columns into single column.

rowspan It can merge speciﬁes number of rows into single row.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Tables</ tle>

</head>

<body>

<table border="1" width="400">

<thead>

<tr>

<th rowspan="3">Head Sec on</th>

</tr>

<tr>

<th colspan="3">Address</th>

</tr>

<tr>

<th>First Name</th>

<th>City</th>
<th>State</th>

<th>Postal Code</th>

</tr>

</thead>

<tbody>

<tr>

<th rowspan="5">Body Sec on</th>

</tr>

<tr>

</tr>

A ributes

- frame

- border

- rules

- width

- height

- align

- valign

- bgcolor

- background

- cellspacing

- cellpadding

- colspan

- rowspan

Ex:

<!DOCTYPE html>
<html>
<head>
< tle>Products Catalog</ tle>
</head>
<body>
<table align="center" width="100%" cellspacing="20" cellpadding="10" border="0">
<tr bgcolor="lightgreen">
<td colspan="2" align="center">
<h1>Amazon Shopping</h1>
</td>
</tr>
<tr>
<td width="200">
<img src="../Images/speaker.jpg" width="200" height="200">
</td>
<td>
<table width="100%" height="100"
border="1">
<colgroup span="1" style="backgroundcolor: yellow;"></colgroup>

<tr>
<td>Name</td>
<td>JBL Speaker</td>
</tr>
<tr>
<td>Price</td>
<td>4600.55</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200">
<img src="../Images/shoe.jpg" width="200" height="200">
</td>
<td>
<table width="100%" height="100"
border="1">
<colgroup span="1" style="backgroundcolor: yellow;"></colgroup>
<tr>
<td>Name</td>
<td>Nike Casuals</td>
</tr>
<tr>
<td>Price</td>
<td>4600.55</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200">
<img src="../Images/shirt.jpg" width="200"
height="200"> </td>
<td>
<table width="100%" height="100"
border="1">
<colgroup span="1" style="backgroundcolor: yellow;"></colgroup>
<tr>
<td>Name</td>
<td>Shirt</td>
</tr>
<tr>
<td>Price</td>
<td>4600.55</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="lightgreen">
<td colspan="2" align="center">
<i>© copyright 2021</i>
</td>
</tr>
</table>
</body>
</html>

Ex:

<!DOCTYPE html>

<html>

<head>
< tle>Table Layout</ tle>

<link rel="stylesheet" href="../fonts/css/all.css">

<style> ul { list-style: none;

} ul > li { font-size: 20px;
color:white; margin-top: 10px;
} ol { list-style: none;
margin-le : -20px;
} ol > li { width: 150px;
border:2px solid black; padding:13px;
margin-top: 25px; font-size: 20px;
background-color: black; color:white; border-
radius: 10px;
}

iframe { border:none;
} a{ color:white; text-
decora on: none;
}

</style>

</head>

<body>

<table frame="void" border="1" width="100%" cellspacing="20" cellpadding="10">

<img src="../Images/amazon-header.png" width="100%">

</td>

</tr>

<ol>

<li>

<a href="../Pages/home.html" target="frameBody"> <span class="fa fahome"></span>

Home</a>

</li>

<li>

<a href="../Pages/electronics.html"
target="frameBody"> <span class="fa fa-tv"></span> Electronics</a>

</li>
<li>

<a href="../Pages/fashion.html" target="frameBody"> <span class="fa fatshirt"></span>

Fashion</a>

</li>

<li>

<a href="../Pages/footwear.html" target="frameBody"> <span class="fa fa-shoeprints"></span>

Footwear</a>

</li>

</ol>

<li>Press Release</li>

<li>Gi a smile</li>

</ul>

</td>

<td>

<ul>

</li>

<li>About Us</li>

<li>Press Release</li>

<li>Gi a smile</li>

</ul>

</td>

<td>

<ul>

<li>

<h2>Get to Know Us</h2>

</li>

<li>About Us</li>

<li>Press Release</li>

<li>Gi a smile</li>

</ul>

</td>

<td>

<ul>

<li>

<h2>Get to Know Us</h2>

</li>

<li>About Us</li>

<li>Press Release</li>

<li>Gi a smile</li>

</ul>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html> Task:
Forms in HTML

- Form provides an UI from where user can interact with our applica on.

- Interac on includes insert, update, delete, query etc.

- Form is a container with collec on of elements like bu on, textbox, checkbox, radio, list box etc.

- HTML form is created by using following elements o <form> o <input> o <select> o <op on> o
<datalist> o <textarea> o <meter> o <progress> etc.

Form Container

- Form container is deﬁned by using <form> tag.

- A web page can contain mul ple forms. Hence you have to deﬁne a start and end tag. Syntax:
<form>

</form>

- A page can submit the details only when they are enclosed a form.

- You have to make sure that the form elements are present inside <form> container.
Syntax:
Name : <input type=”text” name=”Name”> // Not good

- HTML form element provides following a ributes

A ribute Descrip on

Id It deﬁnes a unique ID for form.

name It deﬁnes a reference for form.

class It deﬁnes a CSS class for form.

method It indicates the request method for form, which can be:

- GET

- POST
The default form method is GET
ac on It speciﬁes the target where the data is submi ed. It refers to the server-
side page to submit form data.
Ex: page.jsp, page.aspx, page.php, page.asp

Syntax:
<form method=”post” ac on=”page.aspx”>

target It can open the target page in a new tab or in a frame.

Syntax:
<form method=”post” ac on=”page.aspx” target=”_blank”>
novalidate
- HTML 5 introduced valida ons.

- Valida on is the process of verifying the user input and restrict to

speciﬁc type or range.

- Some of the valida ons provided by HTML 5 are not suitable for
our requirements. Hence we have to by-pass [Ignore] the
valida ons by using “novalidate”.

Ex:
<form novalidate>
Email:
<input type=”email” name=”Email”>
<bu on>Submit</bu on> </form>

Note: Always use “Camel Case” for naming.

[camelCase]

Preﬁx must speak about object type

Suﬃx must speak about its purpose.

btnDelete, frmRegister Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Forms in HTML</ tle>

</style>

</head>

<body>

<form id=”frmLogin” class=”form-login”

name=”frmLogin”>

</form>

</body>

</html>

GET vs POST
GET POST

GET method is used to fetch [Access] data from POST method is used to submit data to server.
server. - If you are designing a form to submit the client
- If you are designing a form to get data from data to server, then use POST method.
server and display in page, then use GET
method.

If submit form data on GET request it will be added Data will be in Form
into URL as Query String. Message Body
Any one can view your data. It is not appended into URL, it is not visible to users.

It is not safe. It is safe

It is easy to hack data. It is hard to hack data.

It allows to bookmark the data. It can’t be bookmarked.

It is stored in browser logs. [history] It is not stored in browser history.

You can’t submit complex data, like binary data. It It can submit complex data.
allows only ASCII type.

You can submit limited data. Query string allows There is no limit for submi ng data.
2048 chars.

The data can be cached. Data can’t be cached.

It will store data in cache and saves round trip.

FAQ: Can we submit form data on GET request? A.Yes. But not recommended.

Form Input Elements

- HTML <input> element allows to input any type of value.

- HTML <label> element is used to set a label for ﬁelds.

Text Input / String Input:

HTML <input> can use the a ribute “type” to deﬁne the type of value to accept as input. You can use
“type=text” if you want to allow string type.
HTML provides several a ributes for input element.
The a ributes suitable for text input are:

A ribute Descrip on

Id It deﬁnes a unique ID

name It deﬁnes a reference name.

class It speciﬁes the classes to implement.

value It speciﬁes the default value to display in side textbox.

Syntax:
<input type="text" value="David"
name="txtName">

placeholder It deﬁnes the water mark text for input element. The water mark can’t
display if there is a value deﬁned.

autofocus It can set focus to the text box automa cally on page load. Only one
element in “Form” can be set with autofocus.

Syntax:
<input type="text" placeholder="Last

Name" autofocus>
readonly It will not allow to change value.
It will not allow to input value. If you want to display a value but should
not allow to modify the value, then you can mark it as readonly.

Syntax:
<input type="text" readonly name="txtId" value="101">

disabled It will not allow to input or change value.

It will not submit value.

Syntax:
<input type="text" disabled name="txtId" value="101">

Disabled vs Readonly

- Readonly can submit the value

- Can’t submit the value

required
- It will not allow to submit empty. - It is used for mandatory ﬁelds.

- If textbox is not deﬁned with value, then it will not allow to submit
the form.

- However if form is deﬁned with “novalidate” then you can

submit empty.

Syntax:
<input type="text" name="txtId" required>

minlength It ensures that the input value minimum length matches the lower bound
value.

maxlength It restricts the input value to speciﬁed maximum number of chars.

You can restrict the length of string in textbox by using minlength and
maxlength.

Syntax:
<input name="txtName" type="text" required minlength="4"
maxlength="10">

size It is used to deﬁne the width of textbox. The default width is 20.

Syntax:
<input type="text" size="2" name="txtPin" maxlength="10">
list - It uses a data list that contains op ons to display as autocomplete
text.

- Data list is designed by using

<datalist> element

- Data list contains a set of op ons deﬁned by using <op on>

element.

pa ern
- It is used to verify the format of input value and restrict the value
to speciﬁc format.

- Pa ern uses “Regular

Expression” to verify the input value.

- Regular Expression is built by using meta character and quan ﬁers.

Note: Form element can’t submit its value if not deﬁned with “name” a ribute. Hence name is mandatory to
submit the element value.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Forms in HTML</ tle>

</style>

</head> <body>
<form>

<div>

Home | About | Contact

</div>

<div>

<input type="text" placeholder="First Name">

</div>

<div>

<input type="text" placeholder="Last Name"> </div>

<div>

<bu on>Submit</bu on>

</div>

</form>

</body>

</html>

FAQ: Can we change the color of placeholder? A.Yes. By using “CSS – Placeholder Selector” Syntax:
input::placeholder { color:red; font-
weight: bold; font-family: Arial;
}

FAQ: Can we change the eﬀect for element in focus? A.Yes. By using CSS – Focus selector.
Syntax:

input:focus { border:none; box-

shadow: 2px 3px 4px green;

2px - horizontal

3px - ver cal 4px - blur

Ex: Textbox with Data list

<!DOCTYPE html>

<html>

<head>

< tle>Google</ tle>

</head>

<body>

<form>

<div>

<h1 align="center">Google</h1>

</div>

<input type="text" size="40" list="terms" >

<op on>JavaScript Examples</op on> <op on>JavaScript Tutorial</op on>

<op on>CSS Examples</op on>

<op on>CSS Tutorial</op on>

</datalist>

</div>

</form>

</body>

</html>

Pa ern for Input Element

[Regular Expression]

- Regular Expression is used to verify the format of input value.

- Regular Expression is built by using Meta Characters and Quan ﬁers.

- Pa ern uses a Regular Expression to verify format of input value.

Syntax:
<input type=”text” pa ern=”regExp”>
Meta Character Descrip on

? It deﬁnes zero or one occurrence of a character.

Ex:
<input pa ern="colou?r" placeholder="color / colour" type="text"
name="txtTest">

* It deﬁnes zero or more occurrences of a character.

Ex:
<input pa ern="colou*r" type="text" name="txtTest">
[color, colour, colouur, coloruuur etc..]

+ It deﬁnes one or more occurrences of a character.

Ex:
<input pa ern="colou+r" type="text"
name="txtTest"> [colour, colouur…]
. [dot] Matches any single character in the speciﬁed string.

Ex:
<input pa ern="b.y" type="text" name="txtTest"> [buy, boy] Ex:
<input pa ern=".y" type="text" name="txtTest"> [by, my]

Ex: cow, toy, boy [ pa ern=”.o.” ]

Ex: cat, bat, mat, rat [ pa ern=”.at”]

\ It is used as escape sequence character for special chars. [Chars used by

parser] \+91 = +91
\d It allows only numeric value, any single digit [0-9].

Ex:
<input pa ern="\d\d" type="text"
name="txtTest"> [any 2 digits number]

Ex:
<input pa ern="\d?\d" type="text" name="txtTest"> [one or 2 digits]

Ex:
<input pa ern="[0-9]" type="text" name="txtTest">

\D Not a digit [^0-9] or \D only non-digit.

[^0-9] Any value other than number.

^ Exclude

Ex:
<input pa ern="\D\D" type="text" name="txtTest">
\w Matches alpha numeric characters with underscore.
Equivalent to [A-Za-z0-9_]

Ex:
<input pa ern="\w\w" type="text" name="txtTest">

\W Matches any character that is not a word character. [^A-Za-z0-9_]

Ex:
<input pa ern="\W" type="text"
name="txtTest">
[%$#@&]

^ Exclude speciﬁed

\s Match a single white space character. Including space, tab, form feed, line
feed, and other Unicode chars.
\n – line feed
\f – form feed
\t – horizontal tab
\v – ver cal tab

Ex:
<input pa ern="\w\s\w" type="text" name="txtTest">

le |right The “|” is used as OR. We can conﬁgure mul ple by using OR. It can match
with any of the speciﬁed.

Ex:
<input pa ern="green|red|blue" type="text" name="txtTest">

[A-Z] Only uppercase le ers allowed

[a-z] Only lowercase le ers allowed

[0-9] Only numeric allowed.

[a-zA-Z] Both upper and lowercase allowed.

[a-Z] Both upper and lowercase allowed.

[a-zA-Z0-9] Alpha numeric allowed

[a,d,s] Only speciﬁed chars allowed.

[^a,d,s] Excluding the speciﬁed all others allowed.

[a-mA-M4-9] Only chars in speciﬁed range allowed.

[^a-mA-M4- Excluding speciﬁed chars range all others allowed.

9]
(abc) Exactly the speciﬁed group allowed in speciﬁed order.

$ Matches the end of input. “Ends with”.

\^ Matches the beginning of input.

“Starts with”.

Quan ﬁers are used to deﬁne the range of value

Quan ﬁer Descrip on

{n} Exactly speciﬁed number of chars. n – refers to number. {8}

{n,m} Minimum-n and Maximum-m

{4,10} - 4 to 10

{n, } Minimum-n and Maximum-any

{4, }

Write a pa ern to validate Name?

[Name can alpha numeric with lower, upper and underscore between 4 to 15 chars]

Ex: \w{4,15}

Write a pa ern to validate “XX-0000-XX”?

<input pa ern="\^[A-Z]{2}-[0-9]{4}-[A-Z]{2}$" type="text" name="txtTest">

Write a pa ern to validate UK mobile number?

+447890-6970-69

\^\+44\d{4}-\d{4}-\d{2}$

\^\+44[0-9]{4}-[0-9]{4}-[0-9]{2}$

Write a pa ern to allow only alpha numeric with _ 4 to 15 chars but

Atleast one or many characters can be Uppercase.

John_123N

(?=.*[A-Z])\w{4,15} Ex:
<input pa ern="(?=.*[A-Z])\w{4,15}" type="text" name="txtTest">

Number Input:

- HTML can use input type as “number”.

- It allows only numeric values.

- All basic a ributes are similar to text input.

- Instead of max length and min length number uses “Min and Max”.

- Min: speciﬁes the minimum range of value.

- Max: speciﬁes the maximum range of value.

- Step: speciﬁes the increment and decrement step value. [By default it is 1] Syntax:

<input type="number" min="15" max="35" step="5" value="17" name="txtAge">

<input type="number" min="1.5" max="5.5" step="0.1" value="1.5" name="txtAge">

Date Input:

- HTML allows to input date value by using the “type=date”.

- It is not supported on all browsers. hence we have to implement using jQuery. o date
o date me-local o month o
week

Syntax:

<input type="date" min="2021-01-28" max="2021-0320" name="txtDob">

<input type="date" min="2021-01-28" value="2021-01-

29" max="2021-03-20" name="txtDob">

- You can also use “type=date me-local” which allows both date and me input.

<input type="date me-local" name="txtDob">

- You can also use “type=month” for month input. - You can use “type= me” for me input.
Range Input:

- It will display a slider that allows to select a range of values.

- Its a ributes are similar to number.

- Slider value you can show using JavaScript.

- Slide value can be submi ed but can’t display on page in every browser.

<input type="range" min="1000" value="1000" max="10000" name="txtDob">

Password Input:

- It is similar to text in all a ributes.

- It will mask the text with password char “*”

- You can conﬁgure by using “type=password” Syntax:

URL Input:

- It validates URL format.

- If you want the user to input website address [URL] and restrict to URL format the you can deﬁne
“type=url” Syntax:

<input type="url" name="txtUrl">

Email Input:

- It validates email address format.

- You can deﬁne “type=email” Syntax:

Color Input:

- HTML provides a color picker by using “type=color”.

- It allows to select a color for color panel. - The color code/name is submi ed. Syntax:

<input type="color" name="txtColor">

File Input:
- It allows the client to browse and select any ﬁle from computer to upload into server.

- However it is just a control for selec ng ﬁle, upload logic we have to write by using
“JavaScript/JQuery”.

- You can deﬁne by using “type=ﬁle”.

- You can use “mul ple” a ribute to enable selec on for mul ple ﬁles.

Syntax

<input type="ﬁle" mul ple name="txtPhoto">

- You can configure specific type dynamically using MIME type or you can also use a ribute “accept” for
filtering the file type.

Syntax:

<input type="ﬁle" accept=".jpg" mul ple name="txtPhoto">

Radio Bu ons:

- Radio bu ons are used to exhibit “Mutex” [Mutual Exclusion] mechanism.

- Radio bu ons allow to select one or mul ple.

- Once radio bu on is checked, it can’t be unchecked.

- To uncheck the radio bu on, you have to reload the page or conﬁgure “Mutex”

- “Mutex” is a mul -threading mechanism that loads all tasks into memory but allow only one task in
process.

- To conﬁgure mutex all radios must run on same thread, which you can deﬁne by using “common
name”.

- “Checked” a ribute is used to select radio.

- By default, radio submits “ON” as value. - You can deﬁne a value to submit.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Regular Expression</ tle>

</head>
<body>

<form>

<div>

<label>Upload Photo</label>

<div>

<input type="radio" value="Male" name="gender" checked> Male

<input type="radio" value="Female"

name="gender"> Female

<bu on>Submit</bu on>

</div>

</form>

</body> </html>

CheckBox

- Checkbox allows user to select and deselect any op on.

- You can use checkbox for selec ng one or mul ple op ons from a group of choices.

- The a ributes are same as radio bu ons o Id o Name

o Class o Value o Checked
etc.

- It is deﬁned by using input a ribute “type=checkbox”.

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Regular Expression</ tle>

</head>

<body>

<form>

<div>
<label>Select Courses</label>

<div>

<input type="checkbox" name="course" value="Java" checked> Java

<input type="checkbox" name="course" value=".NET"> .NET

<bu on>Submit</bu on>

</div>

</form>

</body>

</html>

Ex: Apply eﬀects checkbox checked property with CSS

<!DOCTYPE html>

<html>

<head>

< tle>CheckBox</ tle>

<style> .container { width: 500px; height:

200px; padding:5px; background-color: lightgray;
}

.terms+span { color:red;
}

.terms:checked+span { color:green;
}

</style>

</head>

<body>

<form>

<div>

<label>Terms of Service</label>

<div>

<p>Depending on how you obtained the Windows so ware, this is a license agreement between
(i) you and the device manufacturer or so ware installer that distributes the so ware with your device; or (ii)
you and Microso Corpora on (or, based on where you live or, if a business, where your principal place of
business is located, one of its aﬃliates) if you acquired the so ware from a retailer. Microso is the device
manufacturer for devices produced by Microso or one of its aﬃliates, and Microso is the retailer if you
acquired the so ware directly from Microso . Note that if you are a volume license customer, use of this
so ware is subject to your volume license agreement rather than this agreement.</p>

</div>

<div>

<input class="terms" type="checkbox"> <span>I Accept</span>

</div>

</form>

</body>

</html>

FAQ: How to design a checkbox list?

- HTML is not provided with checkbox list control, you have to design with CSS overﬂow technique.

<!DOCTYPE html>

<html>

<head>

< tle>Checkbox list</ tle>

<style> ul { list-style: none;

margin-le : -40px;
}

.container { border: 2px solid;

width: 120px; height: 60px;
overﬂow:auto;
}

</style>

</head>

<body>

<h2>Select Courses</h2>

<ul>

<li> <input type="checkbox"> Java </li>

<li> <input type="checkbox"> .NET </li>

<li> <input type="checkbox"> PHP </li> <li> <input type="checkbox"> UI </li>

<li> <input type="checkbox"> Fullstack </li>

<li> <input type="checkbox"> Oracle </li>

</ul>

</div>

</body> </html>

Dropdown list:

- It allows the user to select any one op on from a group of choices.

- It shows the list of items using a dropdown menu.

- HTML provides the following elements for designing dropdown list:

<select> It is used to conﬁgure a list.

<op on> It is used to conﬁgure a list item.

<optgroup> It is used to group a set of op ons into one category.

- Every <op on> comprises of following a ributes o value o selected

o disabled

- Every <op on> comprises of following proper es o value o text o selected o disabled

- Every op on is RC data type Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Dropdown</ tle>

</head>

<body>

<h3>Select a Category</h3>

<form>

<op on>Select a Category</op on>

<op on value="Ele101">Electronics</op on>

<op on selected>Footwear</op on>

<op on disabled>Fashion</op on>

</select>

<bu on>Submit</bu on>

</form>

</body> </html>

Ex: Op on Group

<!DOCTYPE html>

<html>

<head>

< tle>Dropdown</ tle>

</head>

<body>

<h3>Select a Product</h3>

<form>

<op on>Select a Product</op on>

<optgroup label="Electronics" >

<op on>Samsung TV</op on>

<op on>LG Mobile</op on>

</optgroup>

<op on>Nike Casuals</op on>

<op on>Lee Boot</op on>

</optgroup>

</select>

<bu on>Submit</bu on>

</form>

</body> </html>

ListBox

- It everything same as dropdown list in elements and a ribute.

- It allows to select one or mul ple.

- To change the dropdown into listbox you have use the a ribute “size or mul ple” Syntax:

<select size=”3” mul ple>

</select>

<!DOCTYPE html>

<html>

<head>

< tle>Dropdown</ tle>

</head>

<body>

<h3>Select a Product</h3>

<form>

<select size="3" mul ple name="lstProducts">

<optgroup label="Electronics" >

<op on>Samsung TV</op on>

<op on>LG Mobile</op on>

</optgroup>

<op on>Nike Casuals</op on>

<op on>Lee Boot</op on>

</optgroup>

</select>

<bu on>Submit</bu on>

</form>

</body>

</html>

Textarea

- It is used to handle mul line input.

- It is similar to textbox but allows mul ple lines.

- It is RC data element used to present plain text.

- A ributes are similar to text input, addi onally uses

o Rows
o Cols Syntax:
<textarea rows=”4” cols=”40>

Your text… / op onal

</textarea> Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Text Area</ tle>

<style> dt { font-weight: bold;

}

</style>

</head>

<body>

<dl>

<dt>Address</dt>

<dd>

<textarea disabled rows="4" cols="40">

<b>Your Address.. here..</b>

</textarea>

</dd>

<dt>Comments</dt>

<dd>

<textarea rows="4" cols="40">

</textarea>

</dd>

</dl>

</body>

</html>

Meter Element
- It is used to display the grade meter.

- It can display a value range with o min

o max
o value o low o high

Syntax:

<meter min=”” max=”” value=”” low=”” high=”” id=”” class=”” name=””> Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Meter</ tle>

<style> meter { width:

300px; height: 40px; }

</style>

</head>

<body>

<ﬁeldset>

<legend>Meter</legend>

<dl>

<dt>Normal Style</dt>

<dd>

</dd>

<dt>Meter 40%</dt>

<dd>

<meter min="1" max="100" value="40">

</meter>

</dd>

<dt>Meter 100%</dt>

<dd>

<meter min="1" max="100" value="100"> </meter>

</dd>
<dt>Meter Poor</dt>

<dd>

<meter min="1" max="100" value="100" low="60" high="80">

</meter>

</dd>

<dt>Meter Weak</dt>

<dd>

<meter min="1" max="100" value="100" low="20" high="80"></meter>

</dd>

</dl>

</ﬁeldset>

</body>

</html>

Progress Element:

- It is used to show the status of any task performed in the page.

- The task includes ac ons like o Copying o Downloading o Uploading o Connec ng etc.

- It is used to display the me elapsed or the remaining to complete the task.

- Specially progress is used in pages that use “Ajax”

[Asynchronous JavaScript And XML]

- A ributes used for progress o Min o Max

o Value Syntax:
<progress min=”” max=”” value=”” name=””> </progress>

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Progress</ tle>

</head>

<body>

<dl>
<dt>Preparing for Download</dt>

<dd>

</dd>

<dt>80% Downloaded</dt>

<dd>

<progress min="1" value="80" max="100"></progress>

</dd>

<dt>Download Completed</dt>

<dd>

<progress min="1" max="100" value="100"></progress>

</dd>

</dl>

</body>

</html>

Form Output Element:

- It is a container element into which applica on can inject the result of a calcula on or
the outcome of user input.

- It is deﬁned by using <output> tag. - It requires a form event “oninput”

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Output Element</ tle>

</head>

<body>

<dl>

<input type="number" id="qty" name="qty" value="1">

</dd>

<dt>Price</dt>

<dd>

<input type="text" id="price"

name="price">

</dd>

<dt>Total</dt>

<dd>

<output name="total" for="qty price"

></output>

</dd>

</dl>

</form>

</body>

</html>

Bu ons:

- Bu ons are used to conﬁrm user ac ons.

o Record Ac ons

 Insert, Update, Delete, Edit o Record Naviga on

 Next, Previous, First, Last o Miscellaneous Ac ons

 Submit, Register, Login, Reset, Save, Open, Print, Cancel

etc.

- HTML 5 provides “bu on” element for designing bu on.

- Bu ons in HTML are classiﬁed into 2 groups o Generic Bu ons o Non-Generic Bu ons

- Generic Bu ons have pre-deﬁned func onality o Submit: Have the ability to submit “form”.
<input type=”submit”>
<bu on type=”submit”> Text </bu on>
<bu on> Text </bu on> o Reset: Have the ability to reset the form.
<input type=”reset”>
<bu on type=”reset”> Text </bu on>

Note: HTML <bu on> Allows images and symbols. HTML <input type=”submit”> Will not allow
symbols or images.

Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Bu on</ tle>

<link rel="stylesheet" href="/fonts/css/all.css">

</head>

<body>

<form>

<dl>

<dd><input type="text" value="TV"

name="txtName"></dd>

<dt>Price</dt>

<dd><input type="text" name="txtPrice"></dd>

<dt>Stock</dt>

<dd><input type="checkbox"> Available</dd>

</dl>

<bu on>

<span class="fa fa-user"></span> Login

</bu on>

<img src="/Images/cancel.png" width="40" height="20">

</bu on>

</form>

</body>

</html>

- Non-Generic Bu on: It is a simple bu on without any pre-deﬁned func onality.

Ex:

<bu on type="bu on">

<span class="fa fa-print"></span> Print

</bu on>
<input type="bu on" value="Save">

Note: Generic bu on can have the default func onality only when deﬁned in “<form>” element.

Bu on size must be minimum 44x44 pixels.

Ex: Change Bu on Border Radius

<!DOCTYPE html>

<html>

<head>

< tle>Bu on</ tle>

<link rel="stylesheet" href="/fonts/css/all.css">

<style> bu on { border:2px solid red; border-

radius: 25px; height: 50px; background-color: lightpink;
}

</style>

</head>

<body>

<form>

<dl>

<dt>Price</dt>

<dd><input type="text" name="txtPrice"></dd> <dt>Stock</dt>

<dd><input type="checkbox"> Available</dd>

</dl>

<bu on type="reset">Reset</bu on>

</form>

</body> </html>

Ex: Amazon Login

<!DOCTYPE html>

<html>

<head>
< tle>Amazon Login</ tle>

<style> .container { border:1px solid gray;

border-radius: 5px; width: 400px; height:
400px; jus fy-content: center; margin:auto;
padding:40px;
} h1 { font-family: sans-serif;
font-weight:lighter;
} label { font-weight: bold;
font-family: Arial;
}

.form-control { width: 100%; height: 30px;

<p><a href="#">Recover Password</a></p> <p><a href="#">Edit Account Details</a></p>

</details>

</div>

</body>

</html>

Mul media in HTML

- Mul media is all about anima ons, audio and video.

- HTML provides various elements for presen ng anima ons, audio and video in page.

Marquee:

- It is used to display sliding and scrolling content in page.

- <marquee> is a container that can contain scrolling and sliding content.

Syntax:
<marquee> Your content
</marquee>

- You can use the following a ributes to handle marquee

A ribute Descrip on
Scrollamount Control the marquee scrolling speed [1 to 100].

Syntax:
<marquee scrollamount="15">
Flash.. Flash.. 70% OFF on electornics. </marquee>

direc on It speciﬁes the scrolling direc ons, which can be le , right, up or

down.

Syntax:
<marquee direc on=”up”>
</marquee>

Width and Height Sets the width and height for marquee content.

Syntax:
<marquee width=”100” height=”300”> </marquee>

behavior It changes the marquee behaviour from scrolling to

sliding. It can be deﬁned as “alternate, scroll and slide”.
Ex:
<marquee behavior="alternate" scrollamount="15">
Flash.. Flash.. 70% OFF on electornics. </marquee>

Loop It speciﬁes the number of me marquee content need to display.

Ex:
<marquee loop="3"
scrollamount="15">
Flash.. Flash.. 70% OFF on electornics. </marquee>

Scrolldelay It delays the start of marquee.

Bgcolor It sets background color for marquee area.

Syntax:
<marquee bgcolor=”yellow”>
</marquee>

Marquee Events are “onmouseover” and “onmouseout”.

The methods “start()” is to start marquee and “stop()” to stop the marquee()”.

Ex:
<!DOCTYPE html>

<html>

<head>

< tle>Marquee</ tle>

<style>

</style>

</head>

<body>

Embed Audio and Video Content

- HTML can use “<embed>” element to embed any mul media content into page.

- HTML 5 introduces <video> and <audio> elements for embedding mul media.

Video Element:

- HTML Video Element <video> embeds a media player into web page.

- The media player will support video playback in document.

- You can embed “audio” content with <video> tag. But recommended to use <audio> tag for audio
content, as it provides be er a ributes for audio.

- The commonly used a ributes for “<video>” element

A ribute Descrip on

autoplay It uses “boolean” value

[true/false]. It enables auto play when set to true.

controls It is used to deﬁne controls for media player. Controls can be like
seekbar, and play/resume etc.
crossorign It indicates whether to use CORS.

Height /width To deﬁne width and height of media player.

Loop It uses a boolean value, which allows to loop the video con nuously.

Muted It uses boolean value to mute the video on loading.

Poster It is used as thumbnail for video before playback.

Src It deﬁnes the name and loca on of video content.

Syntax:
<video muted src=”” poster=””>
Message – Is displayed when browser is unable to use video element.
</video>

Note: You can also use <source> tag for conﬁguring video source. This technique is used to embed mul ple
videos.

Syntax:

<source src=”name.avi”> </source>

<source src=”name.ogg”> </source>

</video>

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Video</ tle>

</head>

<body>

<h2>Video Element</h2>

<video controls width="300" height="200" src="../docs/class.mp4">

<p>Video is not supported on your browser</p>

</video>

</body> </html>

Ex:

<!DOCTYPE html>

<html>

<head>

< tle>Video</ tle>

</head>

<body>

<h2>Video Element</h2>

<video poster="../Images/amazon.PNG" width="300" height="200">

<source src="../docs/class.mp4" >

<p>Video is not supported on your browser</p>

</video>

<h2>Video Embed</h2>

<embed src="../docs/class.mp4" >

</body>

</html>

Note: Audio element is also similar to video. [mp3, MIDI]

Syntax:

</audio>

Poster can’t be deﬁned for audio on various browsers.

BigPond - Why Emotional Different
100% (3)
BigPond - Why Emotional Different
9 pages
Project Report On e Commerce Website
58% (24)
Project Report On e Commerce Website
49 pages
Sudhakar Sharma UI Notes
100% (5)
Sudhakar Sharma UI Notes
495 pages
WEB Tech
No ratings yet
WEB Tech
122 pages
HTML, Css & Js Guest
No ratings yet
HTML, Css & Js Guest
219 pages
Module1 HTML Doc
No ratings yet
Module1 HTML Doc
192 pages
Energy Meter
67% (3)
Energy Meter
79 pages
Practical File HTML
No ratings yet
Practical File HTML
90 pages
HTML Notes
No ratings yet
HTML Notes
40 pages
Ilovepdf Merged
No ratings yet
Ilovepdf Merged
304 pages
HTML Forms
No ratings yet
HTML Forms
87 pages
Munish Kumar (HTML)
No ratings yet
Munish Kumar (HTML)
23 pages
Actc HTML Notes
No ratings yet
Actc HTML Notes
48 pages
RE 630 Iec61850prot 756793 ENd
100% (1)
RE 630 Iec61850prot 756793 ENd
304 pages
Orinoco Ap-600 Ug
No ratings yet
Orinoco Ap-600 Ug
142 pages
Webdev Lesson3
100% (1)
Webdev Lesson3
32 pages
HTML Css Notes
No ratings yet
HTML Css Notes
7 pages
Unit 2 Study Materials
No ratings yet
Unit 2 Study Materials
16 pages
Web Programming
No ratings yet
Web Programming
178 pages
Front End Development: HTML Documents
No ratings yet
Front End Development: HTML Documents
42 pages
HTML and CSS Depth
No ratings yet
HTML and CSS Depth
23 pages
Chapter 1 - HTML
No ratings yet
Chapter 1 - HTML
142 pages
HTML Tags
No ratings yet
HTML Tags
94 pages
HTML
No ratings yet
HTML
94 pages
1
No ratings yet
1
61 pages
Web Design (5 Units) - 240327 - 100411
No ratings yet
Web Design (5 Units) - 240327 - 100411
62 pages
HTML CSS JavaScript
No ratings yet
HTML CSS JavaScript
45 pages
HTML Notes
No ratings yet
HTML Notes
45 pages
MM211 - Lecture 03 HTML 1
No ratings yet
MM211 - Lecture 03 HTML 1
58 pages
CH 4 HTML - CSS
No ratings yet
CH 4 HTML - CSS
39 pages
En s3000 Dats Quidway s3000 Ei Intelligent Ethernet Switches v1.03 (20060303)
No ratings yet
En s3000 Dats Quidway s3000 Ei Intelligent Ethernet Switches v1.03 (20060303)
2 pages
HTML5
No ratings yet
HTML5
53 pages
Info 600 Intro HTML 2
No ratings yet
Info 600 Intro HTML 2
42 pages
Web Technologies
No ratings yet
Web Technologies
27 pages
Lecture 4
No ratings yet
Lecture 4
25 pages
g10 CA Html1
No ratings yet
g10 CA Html1
15 pages
Nmap With Wireshark
No ratings yet
Nmap With Wireshark
19 pages
HTML Note.
No ratings yet
HTML Note.
26 pages
Introduction To HTML CSC 221
No ratings yet
Introduction To HTML CSC 221
23 pages
HTML by Shudhakar Sir
No ratings yet
HTML by Shudhakar Sir
30 pages
Summary Judgment Order in Authors Guild v. Google (Google Books)
No ratings yet
Summary Judgment Order in Authors Guild v. Google (Google Books)
30 pages
Ecommerce Technologies File
No ratings yet
Ecommerce Technologies File
48 pages
HTML
No ratings yet
HTML
7 pages
WDT Final Material
No ratings yet
WDT Final Material
5 pages
Lecture0 (HTML and CSS)
No ratings yet
Lecture0 (HTML and CSS)
29 pages
HTML Introduction
No ratings yet
HTML Introduction
19 pages
Not All Lawyers Are Antisocial: Social Media Regulation and The First Amendment
No ratings yet
Not All Lawyers Are Antisocial: Social Media Regulation and The First Amendment
26 pages
Hypertext Markup Language Basic Code and Tags
No ratings yet
Hypertext Markup Language Basic Code and Tags
15 pages
Matlab For UPF Students
No ratings yet
Matlab For UPF Students
3 pages
Management Information Systems and Computer Applications For Hospitality
No ratings yet
Management Information Systems and Computer Applications For Hospitality
45 pages
HTML Basics: HTML, Text, Images, Tables
No ratings yet
HTML Basics: HTML, Text, Images, Tables
65 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
MS-220 StudyGuide ENU FY23Q1 3.1
No ratings yet
MS-220 StudyGuide ENU FY23Q1 3.1
7 pages
HTML
No ratings yet
HTML
10 pages
The Exam Is 1hr 30 Mins Mixture of Multiple Choice, Short and Long Answers Answer All Questions Do Not Use Brand Names
No ratings yet
The Exam Is 1hr 30 Mins Mixture of Multiple Choice, Short and Long Answers Answer All Questions Do Not Use Brand Names
29 pages
G&EPON 1GE+1FE+WiFi+CATV ONU (V2802WT) Introduction - V1.0
No ratings yet
G&EPON 1GE+1FE+WiFi+CATV ONU (V2802WT) Introduction - V1.0
5 pages
Servo Valve
No ratings yet
Servo Valve
29 pages
Digital Banjara Credentials PDF
No ratings yet
Digital Banjara Credentials PDF
41 pages
L3 OSI Layers
No ratings yet
L3 OSI Layers
19 pages
HTMLComplete Notes
No ratings yet
HTMLComplete Notes
18 pages
Pccet 1
No ratings yet
Pccet 1
7 pages
HTML Reviewer
No ratings yet
HTML Reviewer
2 pages
HTML (Hyper Text Markup Language)
No ratings yet
HTML (Hyper Text Markup Language)
18 pages
Training Course
No ratings yet
Training Course
51 pages
Different Type Network Security Threats and Solutions, A Review
No ratings yet
Different Type Network Security Threats and Solutions, A Review
11 pages
Installation and Instructions
No ratings yet
Installation and Instructions
17 pages
Computer Network and Network Types
No ratings yet
Computer Network and Network Types
4 pages
Wit Unit2
No ratings yet
Wit Unit2
9 pages
Food Advisor Software Requirements Specification
No ratings yet
Food Advisor Software Requirements Specification
15 pages
Safari - 6 Mars 2024 À 07:11
No ratings yet
Safari - 6 Mars 2024 À 07:11
1 page
Introduction To HTML
No ratings yet
Introduction To HTML
16 pages
Web-Module I
No ratings yet
Web-Module I
35 pages
HTML Notes
No ratings yet
HTML Notes
8 pages
Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8
No ratings yet
Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8
16 pages
Tag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" Element
No ratings yet
Tag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" Element
4 pages
Mikrotik & Ubiquiti Cjenovnik - Septembar 2019
No ratings yet
Mikrotik & Ubiquiti Cjenovnik - Septembar 2019
3 pages
CreatingWebPages Part1
No ratings yet
CreatingWebPages Part1
19 pages
Error - Permission Denied (Publickey) - GitHub Docs
No ratings yet
Error - Permission Denied (Publickey) - GitHub Docs
6 pages
SGCertified Integration Architecture Designerstudyguide 1
No ratings yet
SGCertified Integration Architecture Designerstudyguide 1
13 pages
Open Blustacks Folder in Windows
No ratings yet
Open Blustacks Folder in Windows
3 pages
Packet Tracer Skills Based Assessment
No ratings yet
Packet Tracer Skills Based Assessment
15 pages
Guide To HTML
No ratings yet
Guide To HTML
17 pages
Lecture 0 - CS50's Web Programming With Python and JavaScript
No ratings yet
Lecture 0 - CS50's Web Programming With Python and JavaScript
1 page
A Model Pie Chart Report - Step by Step: The Task
No ratings yet
A Model Pie Chart Report - Step by Step: The Task
9 pages
Qwe 444
No ratings yet
Qwe 444
2 pages
Security Leaflet LNP3020T ENG Ver.1.0 (Low)
No ratings yet
Security Leaflet LNP3020T ENG Ver.1.0 (Low)
2 pages
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet
Ultra HTML Reference
From Everand
Ultra HTML Reference
Mike Abelar
2/5 (1)
Web Scraping for SEO with Python
From Everand
Web Scraping for SEO with Python
Enrique Vicente
No ratings yet
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet