HTML
[Hyper Text Markup
Language]
1
HTML
Hypertext:
It provides a way to create a link
between information in the same
document as well as in different
documents.
Markup Language
Markup refers to the special tags
that are a part of the HTML
document. These tags specify how
the document content should be
displayed.
2
STRUCTURE OF HTML
DOCUMENT.
Every HTML document should have the
following structure:
A head : It is used to identify the
head of a document. Many browsers
don’t require this tag.
A body : The body of HTML document
contains the text that will show up on
the Web page. Moreover it contains
pictures, links to other Web pages etc.
3
HTML Tags
Syntax:
<tag>
</tag>
Moreover, tags are not case sensitive:
<tag>
</tag>
<TAG>
</TAG>
Both of the lines above means same thing.
4
Code Structure of HTML
Document
<html>
<head>
</head>
<body>
</body>
</html>
5
<title>
Tag
The <title> element in a document
must occur within the <head>
element of the document and is one
of the only elements permitted to be
in the head section.
<title> Roll #14 </title>
It gives title to your document.
6
7
8
9
10
<p> & <br>
Tags
For a paragraph break we use tag <P> or <p>.
For a line break we use tag <BR>, <br> or
<Br>.
11
12
13
<pre>
Tag
Pre stands for Preformatted.
Sometimes you want to include
spaces in your text and you don’t
want your browser to ignore these
spaces. Such spaces are included in
the
<pre> </pre> tag.
14
15
16
<hn>
Tag
It is used to give headings. In the tag
<hn> h stands for the heading
where as n can be replaced with any
number between 1-6. Where <h1> is
the largest and <h6> is the smallest
heading size.
<h1>MY PAGE</h1>
17
18
19
<hr>
Tag
<hr> stands for horizontal row.
Attribute Value Description
align left
center Specifies the alignment of a <hr>
right element
noshade noshade
Specifies that a <hr> element should
render in one solid color (noshaded),
instead of a shaded color
size pixels Specifies the height of a <hr> element
width pixels
% Specifies the width of a <hr> element
20
21
22
<B>, <I>, &
<U>
<b> </b> Bolds the data
<I> </I> Italicizes the data
<u> </u>Underlines the data
23
24
25
BGCOLOR
It gives background color to the
body. It is a property of the body tag.
Example:
<body bgcolor=“red” >
</body>
26
27
28
BACKGROUND
This attribute is used to set image as
background to body
Example
<body background=“[Link]”>
</body>
29
30
31
COLORS
Colors can be given by their names
like “green”, “blue”, “cyan” etc.
And also by their hexadecimal
notations like 123ABC, 6789EF etc.
One important thing to notice is that
the color in hexa-decimal notations
are also preceded by a ‘#’ sign.
32
Examples of
bgcolor
<body bgcolor=“red”>
<body bgcolor=“#123ABC”>
Some basic colors are:
#FFFFFF ----- White
#000000 ----- Black
#FF0000 ----- Red
#00FF00 ----- Green
#0000FF ----- Blue
33
Text (color)
Property
<body> tag has another property
called “text.”
<body text=“#10aeff”>
Changes the color of the text, that
appears on the page, to “red.”
34
35
36
Blockquot
e
The blockquote element is used to denote
a long quotation – one that should be set
off from the surrounding text in the
document. Browsers typically display this
type of quotation as indented text.
<blockquote> </
blockquote>
37
38
39
Address
Tag
This element is used to hold addresses.
Typically, it occurs at the end of
documents and is used to enclose the
author’s name and electronic mail
address. Browsers usually display
addresses in italic style.
<address> Sam Andrew<br>
info@[Link] </address>
40
41
42
Center
Tag
This allows text to appear
in the center of page.
<center> I am centered
</center>
43
44
45
Align
Property
With help of align property you can set text,
pictures etc. to center, right or left.
<p align=center> This is centered text </p>
46
47
48
TT
tag
This tag is called monospace tag. It
is called monospace because each
letter in this typeface occupies
exactly the same space. It typically
looks like a typewriter font.
<tt> This is written using tt
tag</tt>
49
50
51
Big
TAG
This tag increases the size of font.
Make text bigger than normal:
<big> I am big </big>
52
53
54
Small
TAG
This tag decreases the size of font.
<small> I am small </small>
<small><small>
I am even smaller
</small></small>
55
56
57
S or strike
TAG
s or strike tags is used to strike through the
text.
<s> I am striked</s><br>
<strike> I am striked as well</strike>
58
59
60
CITE
TAG
This tag is use for citation citation.
Browsers usually display citations in
italics.
<cite> I am cited </cite>
61
62
63
Code
TAG
We use this tag while displaying
programs on internet. Browsers usually
display this text in a fixed-width font.
<code>
A=34;<br>
[Link](“A=” + A);
</code>
64
65
66
DFN TAG
Use to specify definitions.
HTML:
<dfn>
HyperText Markup Language
</dfn>
67
68
69
DEL TAG
Its output is similar to that of <s> or
<strike>. It displays your information
in deleted text.
<del> I am fine. </del>
70
71
72
<EM> TAG
Used to denote emphasis of the
affected text. Browsers usually
display emphasis as italics.
<EM> I am italicized </EM>
73
74
75
<INS>
Tag
Browsers usually display it as an underline
text.
<ins> I am underlined </ins>
76
77
78
<SUB> & <SUP>
Tag
<SUB> displays your information in
subscript.
H<SUB>2</SUB>
<SUP> displays your information in
superscript.
H<SUP>2</SUP>
79
80
81
Font
TAG
Font tag is used to set the following
font properties:
Size
Color
Face
82
83
84
BASEFONT TAG
Unfortunately, BASEFONT was not named
BASEFONTSIZE because what it does is to
set the default font size. I.E. 2.0 and above
supports same attributes for BASEFONT as
for FONT. Default font-size value is 3.
<basefont size=7> My size = 7
</basefont>
85
86
87
Special
Characters
In order to display some special characters on your web
page we use & sign.
Example: To show copyright symbol we use:
©
And many more…
They always end with (;) symbol.
Space
< Less than <
> Greater than >
& Ampersand &
" Quotation “
mark
88
89
90
LIST
S
Definition Lists
Ordered Lists
Unordered Lists
Other Approaches
91
Definition Lists
Definition List includes the following
terms:
<DL> means Definition List
<DT> means definition term
<DD> means Definition description
92
93
94
Unordered
List
Unordered List includes the
following terms:
<UL> means unordered list.
<LI> means list item.
95
96
97
Ordered
List
Ordered Lists includes the following:
<OL> means ordered list
<LI> means list item
98
99
100
Unordered List 3
Unordered list have an option called
“type.” With the help of this option you
can change the appearance of the
bullets that appear on your screen.
Following are the types of bullets
available in UL.
Circle
Disc
Square
101
Examples
<ul type=“circle”>
<ul type=“disc”>
<ul type=“square”>
102
Ordered List
3
Ordered list have an option called
“type.” With the help of this option you
can change the appearance of the
bullets that appear on your screen.
Following are the types of bullets
available in OL.
1 Arabic Numerals
A Uppercase Letters
a Lowercase Letters
I Large Roman
i Small Romans
103
Ordered List
4
Apart from type we also have an
option called “start.” Start tells HTML
what will be the initial value where
as type tells HTML what kind of bullet
I want to use.
104
EXAMPLE:
<OL TYPE=1 START=9>
<OL TYPE=a START=9>
<OL TYPE=A START=9>
<OL TYPE=I START=9>
<OL TYPE=i START=9>
105
106
107
Other Approaches
There are two more methods to
achieve unordered list format:
<DIR>
<MENU>
There is no difference in the output.
108
MENU TAG EXAMPLE
<menu>
<LI>HTML
<LI>DHTML
<LI>XML
<LI>SGML
</menu>
109
110
111
DIR TAG
EXAMPLE
<dir>
<LI>HTML
<LI>DHTML
<LI>XML
<LI>SGML
</dir>
112
113
114
Nested
<ol> Lists
<li> Paste Tomatoes </li>
<ul>
<li> Banana Legs </li>
<li> Principle Borghese </li>
</ul>
<li> Cherry Tomatoes </li>
<ul>
<li>Gold Nugget</li>
<li>Small Fry</li>
</ul>
</ol>
115
116
<ul>
<li>Level One
<ul>
<li>Level Two
<ul>
<li>Level Three
</ul>
</ul>
</ul>
117