HTML
HTML – Hyper Text Markup Language
HTML is markup language which provides a set of
tags suitable to making up webpages.
HTML is a scripting language to web pages and
output of programs can be seen after using
browser.
HTML is a hyper text language because it supports
font styled text, pictures, graphics and animations.
The HTML documents are plain text tiles. These are
created by using text editor like notepad.
HTML is a tag-based system . A tag is a special
instruction to browser.
A tag is made up to left operation (<) and a right
operation (>) and a tag name contains one or
more parameters.
The browser won’t generate any error.
SYNTAX:
< tagname [parameter = value] >
Left operator
Right Operator
NOTE :
Don’t give any space between ledt
operator and tagname.
In HTML, the every tag can have
corresponding ending tag proceed by
backslash symbol.
Structure of HTML Document :-
o All HTML documents does follow same
basic structure.
o It has two blocks –
Head Block
Body Block
o Head block contains information used by
the browser and title of the document.
o Body block contains that displayed on
screen and tags which contains how that
content is formatted by browser.
o The basic HTML document is –
<html>
<head>
<title> A HTML document</title>
</head>
<body>-------------------------</body>
</html>
o In html document , the every tag can
havd corresponding ending tag proceed
by blackslash symbol (/).
Ex: <html> -------------- </html>
Starting tag Ending
tag
Basic HTML tags :
o <html>-------------</html>
This is the basic tag of HTML document.
By using this tag the browser can
identifies the weather it is html
document or not.
o <head>--------------</head>
This tag indicates the first part of html
document and it contains control
information and title of the HTML
document.
o <body>---------------</body>
It indicates the second part of HTML
document and it contains all the
remaining information about webpage.
The body tag has different parameters
which indicates background, background
colour …..etc.
o Blocks(<p>---------</p>, heading tags)
The two major blocks of text in the HTML
document are paragraph and headings.
i. <p [align = “ left ” ! ” center “ ! “
right “]----------</p>
It specifies the paragraph.
ii. Heading tags :
Heading tags are simple forms of
text foarmating that vary text
steps based on header level.
Those are <h1>…</h1>
<h3>…</h3>
<h2>…</h2>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
iii. EXAMPLE:
<html>
<head>
<title> My first document </title>
</head>
<body bgcolor = “skyblue”>
<p> This document displays the title
of the document and different text
headings </p>
<h1> Web Technologies </h1>
<h2> Web Technologies </h2>
<h3> Web Technologies </h3>
<h4> Web Technologies </h4>
<h5> Web Technologies </h5>
<h6> Web Technologies </h6>
</body>
</html>
o TEXT :
The text on a HTML page can be altered
in a number of ways.
i. <font size = “[+/-n]” color =
“#rrggbb”>---</font>
By using this tag we can set the size
and color to the text.
ii. <b>---</b>
It bolds the text.
iii. <u>---</u>
It underlines the text.
iv. <i>---</i>
Italic text.
v. <em>---</em>
To emphasis (new standard to Italic).
vi. <strong>---</strong>
To strong (new standard to bold).
vii. <s>---</s>
Strikes the text.
EXAMPLE :
<html>
<head>
<title> Text </title>
</head>
<body>
<h1>Changing font styles</h1>
<font size= “7”> larger </font>
<font size = “3”> medium </font>
<font color= “red”> Red </font>
<font color= “blue”> Blue </font>
<b> <u> <i> Text Style </i> </u>
</b>
<b> Web Technologies </b>
<u> Web Technologies </u>
<i> Web Technologies </i>
<em> Web Technologies </em>
<strong> Web Technologies </strong>
<s> Web Technologies </s>
</body>
</html>
o Horizontal Rule <hr/> :
<hr [width = n] [size = n] [align =
{left/right/center} [NoShade]]/>
o Subscripts & Super Scripts :
<sub>---</sub> :- Subscripts
<sup>---</sup> :- Super Scripts
EXAMPLE :
<html>
<body>
<b>Formula for water</title>
<hr/>
H<sub> 2 </sub> 0
<br/>
<b> Basic mathematical formula </b>
<hr/>
(a+b) <sup> 2 </sup> = a <sup> 2
</sup> + b <sup> 2 </sup> + 2*a*b
</body >
</html>
o Character Escape Sequences :
& < > &quol; ©
& < > || c
o Anchor tag <a>
Anchor tag is used to create link
between two documents, minimum it
requires a parameter i.e ‘href’ which
indicates destination document.
The most important capability of html
is its ability to create hyperlinks.
Hyperlinks can be applied to either
text or images.
SYNTAX : <a href = “address”> Text
</a>
EXAMPLE : a)[Link] –
<html>
<head>
<title> Welcome</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>
b)[Link]-
<html>
<head>
<title>Home</title>
</head>
<body>
<a href = “[Link]”>Clik
here</a>
</body>
</html>
o Lists :
List is a collection of items and they may
be ordered or unordered.
HTML provides 3 types of list
i. Ordered List:
<ol>---</ol>
ii. Unordered List:
<ul>---</ul>
iii. Defination List:
<dl>---</dl>
i. Ordered List:- <ol>---</ol>
This is used to display the list of
items in a order. It can use the
numbers or roman numbers or
alphabets as type of order.
It has one inbuild tag i.e <li>---
</li>
In this list the default order is
numeric.
Example:1
<ol>
<li>orange</li>
<li>grape</li>
</ol>
>o/p:
1)orange
2)grape
Example:2
<ol type= ‘A’>
<li> mango </li>
<li> orange </li>
</ol>
>o/p: A)mango
B)orange
Example:3
<ol type = ‘I’ start = 3>
<li>cricket</li>
<li>football</li>
</ol>
>o/p:
III) cricket
ii. Unordered list:- <ul>---</ul>
This is used to display the list of
items by using different types of
symbols.
In this also these is a inbuilt tag
i.e <li>---</li>.
In this the default symbol is dot
(•).
Example:1
<ul>
<ul type = “circle”>
<li>orange</li>
<li>cricket</li>
<li>apple</li>
<li>football</li>
</ul>
</ul>
>o/p:
>o/p:
orange
o apple
cricket
o football
Example:2
iii. Definition list: <dl>---</dl>
The definition list is used to specify
list of terms and their definations.
It has the following tags:
<dl> tag specifies the definition
list.
<dt> tag specifies the defined
term.
<dd> tag specifies the definition
for term.
Example:
<dl>
<dt>HTML</dt>
<dd>HTML is the markup
language</dd>
<dt>XML</dt>
<dd>XML is the extended markup
language</dd>
</dl>
>o/p:
HTML
HTML is the markup language.
XML
XML is the extended markup
language.