My Book

LEARN HTML ONLY IN A DAY
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
2.How to make HTML documentation easier..5
3.HTML Programs..6
a)
b)
c)
d)
using <head> and <title> tags...7

<body> </body> tag......8
Dealing with headings....9
<center> </center> tag....10
1

e)
f)
g)
h)
i)
j)
k)
l)
Back ground color to HTML documentation....11

<marquee> </marquee> tag...12
Bodys font color..13
How to insert an image file to a HTML documentation
.....14
How to insert a music file to a HTML documentation
.17
How to insert a video file to a HTML
documentation..19
Providing back ground image to a HTML
document...21
Resizing an image22
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
1.How to creat a HTML file:2

At first open the text editor (Notepad)
Write the html code in the notepad.
The above figure shows that the sai.html file is saved at the desktop and the sai file is now a html
file.
2.How to make HTML documentation easier:6
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.
3.HTML Programs:a) using <head> and <title> tags:-
Write this above html code in a notepad and save it as sai1.html
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>
</body>
11

</html>
d)<center> </center> tag :The coding I have used for <center> and </center> tag in notepad is:<html>
<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>
<body>
<body bgcolor="green">
</body>
</html>
13
f)<marquee> </marquee> tag:The coding I have used for <marquee> and </marquee> tag in notepad is:<html>
<body>
<marquee>MY NAME IS SAIRAM PANIGRAHI</marquee>
</body>
</html>
14
g)Bodys font color:<html>

<body>
<body bgcolor="green" text="yellow">
</body>
</html>
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

<body>
<img src="a.jpg">
</body>
</html>
17
Case 2:
If the html file and the image file is placed separetly at different locations then the html coding
will be:<html>
<body>
<img src="d:/a.jpg"> [Here the image file is present at d drive]
</body>
</html>
18
i)How to insert a music file to a HTML documentation:<html>

<head> <title>LEARN HTML ONLY IN A DAY</title> </head>
<body>
<img src="d:/a.jpg">
<embed src="a.mp3">
</body>
</html>
Like image insertion to the html documentation, it has also 2 cases:Case 1:If the html file and the music file is placed with in a folder then the html coding will be:19

<embed src="a.mp3">
Case 2:If the html file and the music file is placed separetly at different locations then the html coding
will be:<embed src="d:/a.mp3"> [Here the music file is present at d drive]
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>
<body>
<embed src="a.avi">
</body>
21

</html>
Case 2:-
If the html file and the video file is placed separetly at different locations then the html coding
will be:-
<embed src="g:/a.avi"> [Here the video file is present at g drive]
22
k)Providing back ground image to a HTML document:<html>

<body>
<body background="a.jpg" text="yellow">
</body>
</html>
23
l)Resizing an image:<html>
<body>
<img src="a.jpg" height="500" width="500">
</body>
</html>
24
m) Font resizing:<html>
<body>
<font face="verdana" size="+10" >
</body>
25

</html>
n) <pre> </pre> tag:<html>

<body>
<pre>
main()
{
int a,b,c;
print("Enter the value of a & b");
26

scanf("%d%d",&a,&b);
c=a+b;
printf("The sum is",c);
}
getch();
return 0;
</pre>
</body>
</html>
27
The <pre> </pre> tag helps the html documentation to maintain a systematic manner.
28

0) <abbr title> </abbr> tag :<html>
<body>
<img src="a.jpg">
I have completed my b.tech from <abbr
TECHNOLOGY">RIT</abbr> colg............
</body>
</html>
29
title="ROLAND
INSTITUTE
OF

p) <acronym title> </acronym> tag:<html>
<body>
<img src="a.jpg">
I have completed my b.tech from
technology">rit</acronym> colg............
</body>
</html>
q)<a href> </a> tag :-
30
<acronym
title="roland
institute
of

<html>
<body>
<body bgcolor="pink">
<a href="sai5.html">CLICK HERE TO GO TO THE NEXT PAGE</a>
</body>
</html>
r)<ins> </ins> and <del> </del> tags:<html>

<body>
31

<img src="a.jpg">
I have completed my b.tech from <del> NIST</del> <ins>RIT</ins> colg............
</body>
</html>
s)<p> </p> and <br> tags:<html>

<body>
<img src="a.jpg">
32

<p>HI <br> HOW R U ALL <br> BYE FNDS </P>
</body>
</html>
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>
<body>
<img src="c.jpg" height="100" width="100" alt="picture is currently unavilable">
33

</html>
u)<hr> </hr> tag:<html>

<body>
<P>NAME=SAIRAM PANIGRAHI<BR>
BRANCH=ECE</P>
<hr size="1000" width="1000" color="yellow">
</hr>
</body>
34

</html>
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.
<table> =>This command defines table in HTML page.

<tr> =>It defines a table row.
<td> =>Td stands for table data.
<th> =>Th is table header, this command is useful for giving heading in row and column.
4.2 Note on Creation of tables in HTML:i.

ii.
iii.
iv.
v.
vi.
<tr>, <td> & <th> often do not need end tags.

The default table has no borders.
<rowspan= > =>It defines how many row the cell will occupy.
<colspan= > => It determines how many columns cell should occupy.
<cellspacing= > => This command is used to increase the distance between the cell.
<cellpadding= > => This command is used to creat more white space between the cell
content and its borders.
35

vii.
viii.
ix.
<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

</html>
4.3 Showing the table border:<html>

<table>
<table border=5>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>10</td>
<td>20</td>
</tr>
37

</table>
</html>
4.4 Use of cell spacing:<html>

<table border=1 cellspacing=10>
<caption>Table</caption>
<tr>
<th>Head1</th> <th>Head2</th>
</tr>
<tr>
<td>100</td> <td>200</td>
</tr>
</table>
38

</html>
4.5 Cell padding:<html>

<table border=1 cellpadding=10>
<caption>Table</caption>
<tr>
<th>Head1</th> <th>Head2</th>
</tr>
<tr>
<td>100</td> <td>200</td>
</tr>
</table>
39

</html>
5. Creation of frames:-
i.
ii.
iii.
iv.
v.
This is a method for dividing browser window in to smaller sub windows.

Each sub window displaying a different HTML document. Frames have the following
characteristics:Each frame is given a name.
Each frame will be targeted by an HTML document.
The frame resizes itself dynamically in response to the changes of visible client area.
5.1 Frame tags:-
<frameset> </frameset>
It defines a collection of frames or other frame set.
5.2
i.
Attributes of frames:Row or column frame

40

ii.
Size of each frame
1) <html>
<frameset cols=50%,25%,25%>
<frame src=sai10.html>
</frameset>
</html>
2) <html>
<frameset rows=50%,25%,25%>
</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

Lists in HTML are of three types:i.
ii.
iii.
Order list
Unorder list
Definition list
i.Order list:Normally in order list,the lists are designed in terms of :{1,2,3..}
{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

</body>
</html>
2) <html>
<body>
<ol type=A>
<li>NIST</li>
<li>RIT</li>
<li>SMIT</li>
</ol>
</body>
43

</html>
3) <html>
<body>
<ol type=I>
<li>HOLLYWOOD</li>
<li>BOLLYWOOD</li>
<li>TOLLYWOOD</li>
</ol>
</body>
44

</html>
4) <html>
<body>
<ol type=i>
<li>SACHIN TENDULKAR</li>
<li>SOURAV GANGULY</li>
<li>RAHUL DRAVID</li>
</ol>
</body>
45

</html>
46

6.1 The different types of order lists in a single program:-
<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>
<h4>Lowercase letter list:</h4>

<ol type=a>
<li>WESTINDIES</li>
<li>SOUTHAFRICA</li>
<li>BANGLADESH</li>
47

</ol>
<h4>Roman number list:</h4>
<ol type=I>
<li>GERMANY</li>
<li>USA</li>
<li>DUBAI</li>
</ol>
<h5>Lowercase Roman number list:</h5>
<ol type=i>
<li>KANADA</li>
<li>KENIYA</li>
<li>SWEDEN</li>
</ol>
</body>
</html>
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

a) Disc
b) Circle
c) Square
<html>
<body>
<h4>disc bullets list:</h4>
<ul type=disc>
<li>MATH </li>
<li>PHYSICS </li>
<li>CHEMISTRY</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type=circle>
<li>IT </li>
<li>BIOLOGY </li>
<li>ELECTRONICS</li>
</ul>
<h4>Sqare bullets list:</h4>

<ul type=square>
<li>ECE </li>
<li>EEE</li>
<li>MECHANICAL</li>
</ul>
</body>
50

</html>
iii. Definition list:<html>

<body>
<h4>A definition list:</h4>
<dl>
<dt>WWW</dt>
<dd>World Wide Web</dd>
<dt>RIT</dt>
<dd>Roland Institute Of Technology</dd>
</dl>
51

</body>
</html>
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>
<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>
<body>
<body bgcolor="pink">
<a href="http://www.google.com"> <img src=f:/a.jpg> </a>
</body>
54

</html>
55

My Book

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

My Book

Uploaded by

Copyright:

Available Formats

LEARN HTML ONLY IN A DAY

2.How to make HTML documentation easier..5

using <head> and <title> tags...7

LEARN HTML ONLY IN A DAY

Back ground color to HTML documentation....11

1.How to creat a HTML file:2

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

Write the html code in the notepad.

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

2.How to make HTML documentation easier:6

LEARN HTML ONLY IN A DAY

3.HTML Programs:a) using <head> and <title> tags:-

LEARN HTML ONLY IN A DAY

Write this above html code in a notepad and save it as sai1.html

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

g)Bodys font color:<html>

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

i)How to insert a music file to a HTML documentation:<html>

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

<embed src="g:/a.avi"> [Here the video file is present at g drive]

LEARN HTML ONLY IN A DAY

k)Providing back ground image to a HTML document:<html>

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

n) <pre> </pre> tag:<html>

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

q)<a href> </a> tag :-

LEARN HTML ONLY IN A DAY

r)<ins> </ins> and <del> </del> tags:<html>

LEARN HTML ONLY IN A DAY

s)<p> </p> and <br> tags:<html>

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

u)<hr> </hr> tag:<html>

LEARN HTML ONLY IN A DAY

<table> =>This command defines table in HTML page.

4.2 Note on Creation of tables in HTML:i.

<tr>, <td> & <th> often do not need end tags.

LEARN HTML ONLY IN A DAY

LEARN HTML ONLY IN A DAY

4.3 Showing the table border:<html>

LEARN HTML ONLY IN A DAY

4.4 Use of cell spacing:<html>

LEARN HTML ONLY IN A DAY

4.5 Cell padding:<html>