Syllabus
Dr. NGPASC
COIMBATORE | INDIA 1
UNIT-II
ANATOMY OF HTML FILE
Basic structure of an HTML document
The basic structure of an HTML document consists of 5
elements:
1.<!DOCTYPE>
2.<html>
3.<head>
4.<title>
5.<body>
Dr. NGPASC
COIMBATORE | INDIA 2
UNIT-II
STRUCTURE
Dr. NGPASC
COIMBATORE | INDIA 3
UNIT-II
The DOCTYPE
1.A DOCTYPE declaration must be specified on the first line of each
web document:
[Link] DOCTYPE tells the web browser which version of HTML the
page is written in.
<html>
[Link] <html> tag tells the browser that the page will be formatted in
HTML and which world language the page content is in.
[Link] <html> tag is the container for all other HTML elements
Dr. NGPASC
COIMBATORE | INDIA 4
UNIT-II
<head>
1. The <head> element is a container for metadata (data about data)
and is placed between the <html> tag and the <body> tag.
2. The following elements can go inside the <head> element:
i)<title>
ii)<style>
iii)<base>
iv)<link>
<title>
[Link] title tag is the only tag used inside the head tags
[Link] <title> tag
[Link] a title in the browser toolbar
[Link] a title for the page when it is added to favorites
[Link] a title for the page in search-engine results
Dr. NGPASC
COIMBATORE | INDIA 5
UNIT-II
<body>
1. The <body> tag defines the document's body.
2. The <body> element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
3. There can only be one <body> element in an HTML document.
Every web document must include one and only one
instance of DOCTYPE, <html>, <head>, <body>, and <title>.
Dr. NGPASC
COIMBATORE | INDIA 6
UNIT-II
Dr. NGPASC
COIMBATORE | INDIA 7
UNIT-II
HTML Lists
1. HTML lists allow web developers to group a set of related items
2. HTML Lists help to display a list of information semantically.
3. There are three types of lists in HTML:
[Link] list or Bulleted list (ul)
[Link] list or Numbered list (ol)
[Link] list or Definition list (dl)
Dr. NGPASC
COIMBATORE | INDIA 8
UNIT-II
Unordered list or Bulleted list (ul)
1. The unordered or bulleted list in HTML is used to display the elements in a
bulleted format.
2. HTML 3.0 gives you the ability to customise the bullets
3. An HTML unordered list starts with the <ul> tag and ends with the </ul> tag.
4. <LH> </LH> tag is used to give list header
5. <LI> </LI> tag is used to give list elements
Syntax:
<ul>List of Items</ul>
Dr. NGPASC
COIMBATORE | INDIA 9
UNIT-II
Example of HTML Unordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<lh>List of Fruits</lh>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 10
UNIT-II
You can mark your list items with the different bullets
The CSS list-style-type property is used to define the style of the list item
marker.
Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
Dr. NGPASC
</ul> COIMBATORE | INDIA 11
UNIT-II
Ordered list or Numbered list (ol)
1. Ordered List or Numbered List (ol) In HTML, all the list items in an ordered
list are marked with numbers by default instead of bullets
2. An HTML ordered list starts with the <ol> tag and ends with the </ol> tag.
3. Ordered lists are appropriate where the exact ordering of items are
important to the meaning of the content.
4. For example, a recipe would likely use an ordered list because the steps
occur in sequence. Any step-by-step process is best presented as an
ordered list.
Syntax:
<ol>List of Items</ol>
Dr. NGPASC
COIMBATORE | INDIA 12
UNIT-II
Example of HTML Ordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA
UNIT-II
Instead of numbers, you can mark your list items with the alphabet: A, B, C
or a,b,c, or roman numerals: i, ii, iii, etc.
example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol type="A">
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 14
UNIT-II
Description list or Definition list (dl)
1. In an HTML Description list or Definition List, the list items are listed like
a dictionary or encyclopedia.
2. Each item in the description list has a description.
3. You can use a description list to display items like a glossary.
4. You will need the following HTML tags to create a description list:
i.<dl> (Definition list) tag – Start tag of the definition list
ii.<dt> (Definition Term) tag – It specifies a term (name)
iii.<dd> tag (Definition Description) – Specifies the term definition
iv.</dl> tag (Definition list) – Closing tag of the definition list
Syntax:
<dl>
<dt>definition term</dt>
<dd>definition description</dd>
</dl>
Dr. NGPASC
COIMBATORE | INDIA 15
UNIT-II
Example of HTML Description List
<!DOCTYPE html>
<html>
<head>
<title>HTML Description List</title>
</head>
<body>
<dl>
<dt><b>Apple</b></dt>
<dd>A red colored fruit</dd>
<dt><b>Honda</b></dt>
<dd>A brand of a car</dd>
<dt><b>Spinach</b></dt>
<dd>A green leafy vegetable</dd>
</dl>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 16
UNIT-II
Nested Lists
1. An HTML Nested list refers to a list within another list.
2. We can nest any type of list inside another list
3. Some of the common type of nested lists are
[Link] ordered list
[Link] unordered list
iii.a ordered list nested inside an unordered list
Dr. NGPASC
COIMBATORE | INDIA 17
UNIT-II
Example of an HTML Nested Ordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Ordered List</title>
</head>
<body>
<ol>
<li>Banana</li>
<li> Apple
<ol>
<li>Green Apple</li>
<li>Red Apple</li>
</ol>
</li>
<li>Pineapple</li>
<li>Orange</li>
</ol>
</body>
</html>Dr. NGPASC
COIMBATORE | INDIA 18
UNIT-II
<li>Spinach</li>
Example of an HTML Nested Unordered List
<li>Cauliflower</li>
<!DOCTYPE html>
<li>Beetroot</li>
<html>
</ul>
<head>
<li>Cereals</li>
<title>HTML Nested Unordered List</title>
<li>Nuts</li>
</head>
</ul>
<body>
</body>
<ul>
</html>
<li>Fruits</li>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
</ul>
<li>Vegetables</li>
<ul>
Dr. NGPASC
COIMBATORE | INDIA
19
UNIT-II
HTML – Fonts
1. font tag in HTML is used to set the font size, color, and face of the text
in an HTML document.
2. The font tag in HTML is used inside the <body> tag.
3. The syntax of font tag in html is very simple. We need to open the font
tag and provide the size, color, and face values.
Syntax
<font size=" " color=" " face=" "> Our Text </font>
4. The content in between the font tag in HTML gets the
specified size, color, and face.
Dr. NGPASC
COIMBATORE | INDIA 20
UNIT-II
Font Tag Attributes
Dr. NGPASC
COIMBATORE | INDIA 21
UNIT-II
Example:
<!DOCTYPE html>
<title>font tag in html</title>
</head>
<body>
<font size="1">Welcome to the platform!</font><hr>
<font size="2">Welcome to the platform!</font><hr>
<font size="3">Welcome to the platform!</font><hr>
<font size="4">Welcome to the platform!</font><hr>
<font size="5">Welcome to the platform!</font><hr>
<font size="6">Welcome to the platform!</font><hr>
<font size="7">Welcome to the platform!</font><hr>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 22
UNIT-II
HTML Anchor
• The HTML anchor tag defines a hyperlink that links one page to another
page.
• It can create hyperlink to other web page as well as files, location, or any
URL.
href attribute of HTML anchor tag
The href attribute is used to define the address of the file to be linked. In
other words, it points out the destination page.
syntax of HTML anchor tag
<a href = “name of file or url to be linked"> Link Text </a>
Dr. NGPASC
COIMBATORE | INDIA 23
UNIT-II
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href="[Link] target="_blank"> this
link </a>to go on home page of JavaTpoint.</p>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 24
UNIT-II
HTML Image
• HTML img tag is used to display image on the web page.
• HTML img tag is an empty tag that contains attributes only
• Closing tags are not used in HTML image element.
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of
HTML image tag are given below.
• src
• alt
• width
• Height
• Align
• Border
Dr. NGPASC
COIMBATORE | INDIA 25
UNIT-II
Attributes Values Description
src "image Required, Image path should be absolute
source url path.
path"
width "size_px" Specifies the Width to display the image.
Height "size_px" Specifies the Height to display the image.
Align "left" Specifies the image align side.
"right"
Border "Size" Specifies the image border size.
eg. "0"
alt "alternate display an alternative text in case if image
Dr. NGPASC
text"
COIMBATORE | INDIA cannot be displayed 26
UNIT-II
Use of height and width attribute with img tag
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>HTML image example with height and width</p>
<img src="[Link]" height="180" width="300" alt="animal image">
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 27
UNIT-II
If the specified image is not available the output will be
Dr. NGPASC
COIMBATORE | INDIA 28
UNIT-II
HTML Audio
•HTML audio tag is used to define sounds such as music and other audio clips.
•The <audio> tag contains one or more <source> tags with different audio
sources. The browser will choose the first source it supports.
•The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
•Currently there are three supported file format for HTML 5 audio tag.
1.mp3
[Link]
[Link]
Dr. NGPASC
COIMBATORE | INDIA 29
UNIT-II
Attributes of HTML Audio Tag
Dr. NGPASC
COIMBATORE | INDIA 30
UNIT-II
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 31
UNIT-II
HTML – Colors
I. Colors are very important to give a good look and feel to your website.
II. You can specify colors on page level using <body> tag or you can set
colors for individual tags using bgcolor attribute.
III. The <body> tag has following attributes which can be used to set
different colors
bgcolor − sets a color for the background of the page.
text − sets a color for the body text.
alink − sets a color for active links or selected links.
link − sets a color for linked text.
vlink − sets a color for visited links − that is, for linked text that
you have already clicked on.
Dr. NGPASC
COIMBATORE | INDIA 32
UNIT-II
HTML Color Coding Methods
There are following three different methods to set colors in your
web page −
Color names − You can specify color names directly like
green, blue or red.
Hex codes − A six-digit code representing the amount of
red, green, and blue that makes up the color.
Color decimal or percentage values − This value is
specified using the rgb( ) property.
Dr. NGPASC
COIMBATORE | INDIA 33
UNIT-II
EXAMPLE
!DOCTYPE
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "pink">
<p>text colour is blue background colour is pink</p>
<table bgcolor = "black">
<tr><td>
<font color = "white"This text will appear white on black
background.</font>
</td></tr>
</table>
</body>
</html
Dr. NGPASC
COIMBATORE | INDIA 34
UNIT-II
HTML hr tag
❖The <hr> tag in HTML stands for horizontal rule and is used to insert a
horizontal rule or a thematic break in an HTML page
❖The <hr> tag is an empty tag, and it does not require an end tag.
❖Syntax :
<hr> ...
hr Attributes:
Dr. NGPASC
COIMBATORE | INDIA 35
UNIT-II
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<p>There is a horizontal rule below this paragraph.</p>
<hr>
<p>This is a horizontal rule above this paragraph.</p>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 36
UNIT-II
Borders
✔Borders can be applied to most HTML elements within the body.
✔To make a border around an element, all you need is border-style.
✔The values can be solid , dotted , dashed, double , groove,
ridge, inset and outset.
✔border-width sets the width of the border, most commonly using
pixels as a value.
✔ border-color sets the color.
✔In Html, we can add the border using the following two different
ways:
Using Inline Style attribute
Using Internal CSS
Dr. NGPASC
COIMBATORE | INDIA 37
UNIT-II
Using Inline Style attribute
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using inline property
</Title>
</Head>
<Body>
<font style="border:blue;
border-width:10px; border-style:outset;">
JavaTpoint </font>
<center>
<h1 style="border:orange; border-width:5px; border-style:solid;"> Hello User!!! </h1>
<h2 style="border:green; border-width:8px; border-style:dashed"> Your are at JavaTp
oint Site!.... </h2>
</center>
</Body>
</Html>Dr. NGPASC
COIMBATORE | INDIA 38
UNIT-II
Using Internal CSS
<!Doctype Html>
<Html>
<Head>
<Title>
Add the border using internal CSS
</Title>
<style type = "text/css">
h1 {
border-color: blue;
border-width: .25em;
border-style: double;
}
h2 {
border-color: orange;
border-width: 5px;
border-style: inset;
}
</style>
Dr. NGPASC
</Head>COIMBATORE | INDIA 39
<Body>
UNIT-II
HTML align Attribute
I. The align Attribute in HTML is used to specify the alignment of text
content of The Element.
II. this attribute is used in all elements.
III. The Align attribute can also be set using CSS property “text-align: ” or in
<img> “vertical-align: “.
V. Syntax:
<element_name align="left | right | center | justify">
V. Attribute Values:
left: It sets the text left-align.
right: It sets the text right-align.
center: It sets the text center-align.
justify: It stretch the text of paragraph to set the width of all lines equal.
Dr. NGPASC
COIMBATORE | INDIA 40
UNIT-II
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>
HTML p align Attribute
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML p align Attribute</h2>
<p align="left">
Left align content
</p>
<p align="center">
center align content
</p>
<p align="right">
Right align content
</p>
</body>
</html> Dr. NGPASC
COIMBATORE | INDIA 41
UNIT-II
mailto HTML Tag
▪A mailto link is the type of HTML hyperlink that redirects the programmer to a
default mail client with a predefined recipient address.
▪When the user clicks on the mailto to generate a link, the default mail client
opens on the user's computer to send an email.
▪The mail client has predefined parameters such as Cc, Bcc, subject and body
content, that are used to send email to one or more recipients.
▪Syntax
<a href="[Link] ?{subject} = {subject}" >Click message
<a>
Dr. NGPASC
COIMBATORE | INDIA 42
UNIT-II
Creating a mailto tag in HTML
To create a mailto link in HTML, we need to use the HTML <a> tag with
its href attributes, and then use the mailto link.
EXAMPLE:
<html>
<head>
<title> Use of MailTo tag in HTML </title>
<body>
<a href="[Link] subject=Learn about MailTo tags in HT
ML">
Click to send email
</a>
</body>
</head>
</html>
Dr. NGPASC
COIMBATORE | INDIA 43
UNIT-II
Click on the Click to send email link; it redirects to the installed mail account, as shown below.
Dr. NGPASC
COIMBATORE | INDIA 44
UNIT-II
HTML <pre> Tag
❑The <pre> tag in HTML is used to define the block of preformatted
text which preserves the text spaces, line breaks, tabs, and other formatting
characters which are ignored by web browsers.
❑Text in the <pre> element is displayed in a fixed-width font, but it can be
changed using CSS.
❑The <pre> tag requires a starting and end tag.
❑Texts within <pre>.......</pre> tag is displayed in a fixed-width font.
❑The HTML <pre> tag also supports the width attribute. The width attribute
specifies the desired width of the pre-formatted text.
Dr. NGPASC
COIMBATORE | INDIA 45
UNIT-II
Example:
<html>
<head>
<title>pre tag with CSS</title>
<style>
pre {
font-family: Arial;
color: #009900;
margin: 25px;
}
</style>
</head>
<body>
<pre>
GeeksforGeeks
A Computer Science Portal For Geeks
</pre>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 46
UNIT-II
CSS Transition:
The CSS transitions are effects that are added to change the element gradually
from one style to another
You should specify two things to create CSS transition.
The CSS property on which you want to add an effect.
The time duration of the effect.
If you don't specify the duration part, the transition will have no effect because
its default value is 0.
The transition effect is started when you move cursor over an element.
Dr. NGPASC
COIMBATORE | INDIA 47
UNIT-II
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: orange;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>Move the cursor over the div element above, to see the transition effect.</p>
</body>
</html> Dr. NGPASC
COIMBATORE | INDIA 48
UNIT-II
Before moving the cursor on the element
Before moving the cursor on the element
Dr. NGPASC
COIMBATORE | INDIA
UNIT-II
CSS filter
i. CSS filters are used to set visual effects to text, images, and other
aspects of a webpage.
ii. he CSS filter property allows us to access the effects such as color or
blur, shifting on the rendering of an element before the element gets
displayed.
iii. Some of the filters are
invert() , drop-shadow() , brightness(), saturate(),blur() , hu
e-rotate() , contrast() , opacity() , grayscale() , sepia() , url(
)
Syntax
filter: Dr.
filter type
NGPASC
COIMBATORE | INDIA 50
UNIT-II
brightness()
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: brightness(130%);
}
</style>
</head>
<body>
<img src = "[Link]" > <h2>Original Image </h2>
<img src = "[Link]" id = "img1"> <h2>brightness(130%)</h2>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 51
UNIT-II
blur()
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: blur(2px);
}
</style>
</head>
<body>
<img src = "[Link]" > <h2>Original Image </h2>
<img src = "[Link]" id = "img1"> <h2>blur(2px)</h2>
</body>
</html> Dr. NGPASC
COIMBATORE | INDIA 52
UNIT-II
invert()
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: invert(60);
}
</style>
</head>
<body>
<img src = "[Link]" > <h2>Original Image </h2>
<img src = "[Link]" id = "img1"> <h2>invert(60)</h2>
</body> Dr. NGPASC
COIMBATORE | INDIA 53
</html>
UNIT-II
drop-shadow()
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{
text-align:center;
}
#img1 {
filter: drop-shadow(10px 20px 30px yellow);
}
</style>
</head>
<body>
<img src = "[Link]" > <h2>Original Image </h2>
<img src = "[Link]" id = "img1"> <h2> dropshadow(10px 20px 30px yellow);</h2>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 54
UNIT-II
HTML - <base> Tag
•The HTML <base> tag is used to specify a base URI, or URL, for relative
links.
•you can set the base URL once at the top of your page in header section,
then all subsequent relative links will use that URL as a starting point.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML base Tag</title>
<base href = "[Link] />
</head>
<body>
HTML:
<img src = "/images/[Link]" />
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 55
UNIT-II
HTML - Meta Tags
1. The META elements can be used to include name/value pairs
describing properties of the HTML document, such as author,
expiry date, a list of keywords, document author etc.
2. This tag is an empty element and so does not have a closing
tag but it carries information within its attributes.
3. You can include one or more meta tags in your document
based on what information you want to keep in your document
Dr. NGPASC
COIMBATORE | INDIA 56
UNIT-II
Attributes
Dr. NGPASC
COIMBATORE | INDIA 57
UNIT-II
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 58