Académique Documents
Professionnel Documents
Culture Documents
INTRODUCTION
HTML is a language for describing web pages.HTML stands for Hyper Text Mark Up Language.
HTML is not a programming language, it is a markup language. A markup language is a set of
markup tags.HTML uses markup tags to describe web pages.
HTML markup tags are usually called HTML tags. HTML tags are keywords surrounded by
angle brackets like <html>. HTML tags normally come in pairs like <b> and </b>. The first tag
in a pair is the start tag, the second tag is called the end tag. Start and end tags are also called
opening and closing tags.
HTML documents describes web pages. HTML documents contain HTML tags and plain text.
HTML documents are also called web pages. The purpose of a web browser (like Internet
Explorer or Firefox) is to read HTML documents and display them as web pages. The browser
does not display the HTML tags, but uses the tags to interpret the content of the page.
HTML can be written and edited using many different editors like Dreamweaver and Visual
studio. However, in this book we use a plain text editor (like Notepad) to edit HTML.
When you save a HTML file, you can use either the .html
Or the .htm file extension.
HTML is not case sensitive , we may define the HTML tags both in upper case as well as in
lower case letters like < HTML> and <html>.
TABLE OF CONTENTS
1.How to creat a HTML file...1
3.HTML Programs..6
a)
b)
c)
d)
m)Font resizing....23
n)<pre> </pre> tag..24
0) <abbr title> </abbr> tag...26
p) <acronym title> </acronym> tag.27
q)<a href> </a> tag.28
r)<ins> </ins> and <del> </del> tags...29
s)<p> </p> and <br> tags..30
t)Src and alt attribute...31
u)<hr> </hr> tag32
4.Creation of tables....33
5.Creation of frames...38
6. Creation of lists..4
7.Some important notes.51
The above figure shows that the sai.html file is saved at the desktop and the sai file is now a html
file.
Move the sai.html file to a new folder, so the entire html documentation will be stored with in
this folder only which will helpful to a HTML beginner to know the html process easily.
The
coding I have used for <head> and <title> tags in notepad is:-
<html>
<head> <title>LEARN HTML ONLY IN A DAY</title> </head>
</html>
After opening of the sai.html file the web browser will look like this.
b)<body> </body> tag:write the below html code in a notepad and save this as .html file extension.
<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
MY NAME IS SAIRAM PANIGRAHI
</body>
</html>
The web browser of <body> </body> tag is look like this.
10
c)Dealing with headings:write the below html code in a notepad and save this as .html file extension.
<html>
<head><title>LEARN HTML ONLY IN A DAY </title></head>
<body>
<h1>MY NAME IS SAIRAM PANIGRAHI</h1>
<h2>MY NAME IS SAIRAM PANIGRAH</h2>
<h3>MY NAME IS SAIRAM PANIGRAHI</h3>
<h4>MY NAME IS SAIRAM PANIGRAHI</h4>
<h5>MY NAME IS SAIRAM PANIGRAHI</h5>
<h6>MY NAME IS SAIRAM PANIGRAHI</h6>
</body>
11
d)<center> </center> tag :The coding I have used for <center> and </center> tag in notepad is:<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<center>MY NAME IS SAIRAM PANIGRAHI</center>
</body>
</html>
12
e)Back ground color to HTML documentation:write the below html code in a notepad and save this as .html file extension.
<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="green">
MY NAME IS SAIRAM PANIGRAHI
</body>
</html>
13
f)<marquee> </marquee> tag:The coding I have used for <marquee> and </marquee> tag in notepad is:<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="green">
<marquee>MY NAME IS SAIRAM PANIGRAHI</marquee>
</body>
</html>
14
15
h)How to insert an image to a HTML documentation :In this HTML documentation we have to placed the html file and the image file with in a folder
togetherly or if the image is an another location we must have to give the images location
properly.
Case 1:
If the html file and the image file is placed with in a folder then the html coding will be:-
<html>
16
17
Case 2:
If the html file and the image file is placed separetly at different locations then the html coding
will be:<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="green" text="yellow">
<center>MY NAME IS SAIRAM PANIGRAHI</center>
<img src="d:/a.jpg"> [Here the image file is present at d drive]
</body>
</html>
18
20
j)How to insert a video file to a HTML documentation :Like image and music insertion, video file insertion has also 2 cases:Case 1:If the html file and the video file is placed with in a folder then the html coding will be:<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="green" text="yellow">
<center>MY NAME IS SAIRAM PANIGRAHI</center>
<img src="d:/a.jpg">
<embed src="a.avi">
</body>
21
Case 2:-
If the html file and the video file is placed separetly at different locations then the html coding
will be:-
22
23
l)Resizing an image:<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="green" text="yellow">
<center>MY NAME IS SAIRAM PANIGRAHI</center>
<img src="a.jpg" height="500" width="500">
</body>
</html>
24
m) Font resizing:<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="green" text="yellow">
<font face="verdana" size="+10" >
<center>MY NAME IS SAIRAM PANIGRAHI</center>
<img src="d:/a.jpg">
</body>
25
27
The <pre> </pre> tag helps the html documentation to maintain a systematic manner.
28
29
title="ROLAND
INSTITUTE
OF
30
<acronym
title="roland
institute
of
t)Src and alt attribute:A src attribute should be assigned the address of the image to be displayed and an alt attribute
must satisfy a text alternative in case the browser cant display the image.
<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="green" text="yellow">
<center>MY NAME IS SAIRAM PANIGRAHI</center>
<img src="c.jpg" height="100" width="100" alt="picture is currently unavilable">
33
34
4. Creation of tables in HTML :It is data structure where the different type of data are stored in the form of row and column.
4.1 Tags used:i.
ii.
iii.
iv.
<align> =>This command is useful for assign the alignment of text horizontally .It has 3
default value. They re left, right and center.
<table width= > =>It sets the width of entire table.
<table border= > =>It sets the border of table. If table border=0,then no border around
the table.
<html>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</tr>
<tr>
<td>10</td> <td>20</td> <td>30</td> <td>40</td>
</tr>
</table>
36
38
39
5. Creation of frames:-
i.
ii.
iii.
iv.
v.
<frameset> </frameset>
It defines a collection of frames or other frame set.
5.2
i.
1) <html>
<frameset cols=50%,25%,25%>
<frame src=sai10.html>
<frame src=sai11.html>
<frame src=sai12.html>
</frameset>
</html>
2) <html>
<frameset rows=50%,25%,25%>
<frame src=sai10.html>
<frame src=sai11.html>
<frame src=sai12.html>
</frameset>
</html>
After running the above two programs in the web browser, we can easily get the respective
frame divisions in the browser.
6. Creation of lists:-
41
Order list
Unorder list
Definition list
{A,B,C.}
{a,b,c}
{I,II.III..}
{i,ii,iii...}
1) <html>
<head><title>AN ORDER LIST PROGRAM</title></head>
<body>
<ol type=1>
<li>SAIRM</li>
<li>SAI</li>
<li>BUNU</li>
</ol>
42
2) <html>
<head><title>AN ORDER LIST PROGRAM</title></head>
<body>
<ol type=A>
<li>NIST</li>
<li>RIT</li>
<li>SMIT</li>
</ol>
</body>
43
3) <html>
<head><title>AN ORDER LIST PROGRAM</title></head>
<body>
<ol type=I>
<li>HOLLYWOOD</li>
<li>BOLLYWOOD</li>
<li>TOLLYWOOD</li>
</ol>
</body>
44
4) <html>
<head><title>AN ORDER LIST PROGRAM</title></head>
<body>
<ol type=i>
<li>SACHIN TENDULKAR</li>
<li>SOURAV GANGULY</li>
<li>RAHUL DRAVID</li>
</ol>
</body>
45
46
<html>
<head> <title>The different types of order lists in a single program </title></head>
<body>
<h4>Numbered list:</h4>
<ol type=1>
<li>INDIA</li>
<li>SRILANKA</li>
<li>ENGLAND</li>
</ol>
<h4>Letter list:</h4>
<ol type=A>
<li>NEWZLAND</li>
<li>AUSTRALIA</li>
<li>PAKISTAN</li>
</ol>
47
48
This is the web browser designing of The different types of order lists in a single program
ii. Unorder list:Different types of unorder lists:Normally in unorder list, the lists are designed in terms of :49
50
7. Some important notes for HTML documentation:1.Every HTML document should look basically as follows:<html>
<head>
<title>The title of the document</title>
</head>
<body>
..document body
</body>
</html>
2.HTML is not case sensitive:{CASE-1}
{CASE-2}
52
<HTML>
<head>
<HEAD>
<title>HELLO</title>
<TITLE>HELLO</TITLE>
</head>
<HEAD>
<body>
<BODY>
HI.
HI..
</body>
</BODY>
</html>
</HTML>
{CASE-3}
<HTML>
<head>
<title>HELLO</TITLE>
</HEAD>
<BODY>
HI..
</body>
</html>
For the above three html documentation cases the web browser will look like the same as
follows.
53
3.We can also make link from one web page to another web page by clicking on an image.
The coding is:<html>
<head><title>LEARN HTML ONLY IN A DAY</title></head>
<body>
<body bgcolor="pink">
<center>MY NAME IS SAIRAM PANIGRAHI</center>
<a href="http://www.google.com"> <img src=f:/a.jpg> </a>
</body>
54
55