HTML 4.0.1 Bangla Ebook by Faruk

1
eiee
i-
(For All Users)
dl h r
(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
p p
m ! i
" ag% & !'!"

p
o& )*p+ gr-
.
(https://www.facebook.com/groups/Wordpress2Smashing)
o& )*p+ gr- o&+ i

(http://www.wpbangla.com)
/
dl h r
(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
p0.
% + +
(https://www.facebook.com/zamil.hossainsezan32)
sn
sn
Extra Network
www.otirikto.net
[+4*4 ]
i k n &

[- i o& )*p+ gr-
.- !]
+m* dl % - r(https://www.facebook.com/faruk.ice09) -8 / 9 k;& i+ <
=.> & i e?) u i&
(ICE) B 4C4<& D*
p4&4 /i 9
E4k + + & 4 B E / s 4 g9& / ; g9& /4i

/ / a> + e+9
B / / 4
ei i e a
Bi /9 e.
%I J % + + i& (https://www.facebook.com/zamil.hossainsezan32)

+ -& % , o& )*p+ gr- & u a -l e-E* & 4 - p4 +
e i- p 4 % i / e +e+e+ i 9 ./4 -
. gr- L> 4 - eiee-e u-o i- p 4 %
E B E B u i / D 4
e-
i& +
e- u E; uJ+ % .&9 o &4 / M/
&9 E i i / D 4 -9
% + + i a a Ln . +i +
o& )*p+ g-
. (https://www.facebook.com/groups/Wordpress2Smashing/)- o
a a Ln . 4 . %J * ea
<. %4 - i4 k sn .C;4
./ e
+ L ;
ei i +s*t
ang% an4 9 8 ei i

+mTU* -
C4 & .& ;
i + W 98& . & r + +

+ + & r
- . bB L>
j 4U , 4 i E E
- dl h r
+T-t
-t
aL> &-e
aL> & e +T
!.!.eiee <?
!..eiee < B
!..E E p& %
!.'.o& ) i n HTML-i E;?
aL> &-di
aL> & di Zr
.!.eiee > + sT>
..eiee Zr
..eiee Zr B E bg .
..!.> B (HTML Tag)
...eiee e? (HTML Element)
.. . eiee )k? (HTML Document)
..'.eTu(Attribute)
.'.) i- )
aL> &-4
aL> & 4 %) +
.!. %) + (<head></head> > B)
.. i > B(<title></title>)
.. > B(<meta>)
..!. name eTu > %
...HTTP-EQUIV eTu > %
.'.
> B(<link>)
.^. + > B(<base>)
6
._.s i > B(<style></style>)

.a.skp > B(<script></script>)
aL> &-
aL> & ) +
+
'.!.) + (<body></body> > B)
'..bgcolor e > %
'..!.eiee-e
& >%
'..background e > %
'..!.o& >h4 i

'.'.text e > %
'.^.link e > %
'._.vlink e > %
'.a.alink e > %
'.e. %)
> B (<h1> </h6>)
'.".-> g > B (<p>.</p>)
'.! . b > B (<br>)
'.!!. b
s+(&nbsp) e > %
'.!. % & i s+ <pre>.</pre> > B > %
'.!.e) i i
'.!'.<acronym> > B > %
'.!^.nT / g4<hr> > B
'.!_.Marquee > B > %
'.!a.n> E B
aL> &aL> & - M o& - ? >%

7
^.!.? >% <font>.</font> > B

^..9 > B >% k s i -4*
^.. ? > >%
^.'.D ak+T% (HTML Entities)
^.^.eiee u- . jU< B
^._. s
& 9
aL> &-9&
aL> & 9& o& - s g4
_.!.k s (Ordered List)
_..a) (Unordered List)
_.. s) s
aL> &-+ 4 o& - i >%

a.!.<img> > B s 4
a..+4*4
aL> &- o& -

g4
e.!.% i-
<a>.</a> > B
e.!.!.href n % i- kk) )eTu > %
e.!..Title eTu > %
e.!..Target eTu > %
e..i?
g4
e..i
%+ > %
e.'.eiee ii

e.^.+4*4
aL> &-& o& - g4

8
".!. g4 (<table>...</table>)> B

".. >h4 eTu +T%
"..!.align eTu >%
"...width eTu > %
"...Border eTu > %
"..'.Cellspacing eTu > %
"..^.Cellpadding eTu > %
".._.bgcolor eTu >%
"..a.rowspan eTu > %
"..e.colspan eTu > %
"..<caption> > B eTu +T%
".'. > g u?) i >%
".^.eiee > g u?) -
aL> &-. o& - >%

! .!
! .
g4 (<form>...</form>) > B
! .!
! .!
! .Method eTu
! .!
! .
.Action eTu
! .!
! .
.Enctype eTu
! ..eiee i- > B
! .
.!
! . k
k l g4
- +o& )*
! .
.
.-
-
+o& )* l g4
! .
.
. k
k g4
! .
.'
'. )o
)o g4
! .
.^
^. k
k e& g4
9
! .
._
_.
g4
! .
.a
a.+
+ g4
! .
.e
e.i
i g4
! ..".+ g4
! .
.!
! .D-) u
D-) u s g4
! ..!!.- ) g4
aL> &-eB o& - o >%

!!.!.eiee iframe > B
aL> &- eiee u

!.!.<table> > B >% u g4
!..CLASS o ID eTu
!..eiee <div> > B

!.'.<div> > B >% u g4
aL> &- 4

!.!.eiee 4.01- e + > B
10
aL> &-e +T

eiee <?
eiee % o& ) i Tt E .& o& - g4 %& - E. e.k o& ) i
)- %4 4 - api eiee 4 % HTML e -TU*r- % Hyper
Text Markup Language 4 e p g
> r& & eiee -
Markup Language o
%& , E 4g Markup > B +; ei Markup > B % o& - n e? p.*
4 .* E- e o& - k, i, e ,a)o, )o i4> . e? 4 - ;
ei e?g o& - p.* p.* 4 L* U i % *- > B
eiee > B E o& - au- % eiee ) b u e o& - o-
u+ i k View Page Source k <html>..</html> >B W 9 )
./4 -o& E & E % eiee )
eiee < B

e &,o& - g4 , - n ? sns , ) i e
- u .o&
%& eiee >% eiee e T k> e eiee )k?(o& -) g4 E
n p * (b u ) eiee L %& o& - * U tT
E E p& %
eiee / n . k e) +o&> >% o %, - mu
Notepad E k e) 9 +/ i ) /4 - 4 -> ) un4 +
sU Notepad++
oun4 e) E/ - ei + ) /4 o 4 u- ./4 - E- Adobe
Dreamweaver, HTML Kit >% 4 - - 44 - . Notepad++ >% 4
e eiee ) n E e b u %i % E Internet Explorer,
Mozilla Firefox, Google Chrome i4> .
o& ) i n HTML-i E;?

s 4 B i o& ) i ; o& ) i % e o& - h I g4< E/
ep
e/ px % ep ? E Lr a> u? / 9 8 + >% 4
11
- . a> u? y4 Bi 4 %& eg i % e e ep e + & +
o& ) i n eiee i E;? e & o& ) i n eiee -i E;
eiee >% - ZL t o& - n ? p.* 4 - e- CSS(Cascading
Style Sheets) >% o& - n s i >% 4 - o& ) i n eiee,
+e+e+ o - i % ei 4 >% s> o& + i g4 E & (s> o& + i %
E/ ep ) nt o& )- %4 % oa 9 4 %
) i
% s
+ p4r4 &

hostghor.com
aL> &-di Zr
eiee > + sT>
eiee e BI di B %& e % %) + E <head> > B .& Zr %& e
</head>
> B .& D %& an % ) + E <body> > B .& Zr %& e
</body> > B .& D %& ei
12
d + <html> o </html> > B W /4 % e eiee e > + I
./ i<html>
<head>
e/ CSS, Java Script ) >% 4 -
<title>
e/ o& - (title) >% 4 -
</title>
</head>
<body>
e o& - E 4<& ? +T% (Text,Image,Table,Form,Audio,Video i4> .) ei > B L>
/4 %
</body>
</html>
eiee Zr
Notepad++ e e T4 - / ) g i- r-
13
e File n4 k Save Ase k r 4 e ui?) o- %-
14
e File name:-e k index.html index.htm e

Save as type:-e k All types(*.*)+k
save k r u- . Save in a- I .4 - i & +
e/ i )k- + 9 )k- B& ./ 9 4 e i g4 %&9-
i E e b u .& o- 4 u- ./4 - -
) |D e/ <head> o <body> d + ./4 - 0 ,-4*<4 p4 + e

) & s 4 , 4 B e / %) + o& - n <title >
> B >% %&9e/ <title> My first web page </title> >% b u i My
first web page / ./ E 0 eg & -4*4 s 4 %&9 e- ) +
(<body>.</body>)-e h1,h2,h3,h4,h5,h6 ei 9& > B d %)
>% %&9 T4
* >% %& <h1>,<h2,..<h6> ei 9& > B d <p></p> > B d o& -
-> g / %& e/ e L U . t - s 4
HTML Zr B E bg .

15
!. eiee )k? (HTML Document)

. eiee e?(Element)
.eiee > B(Tag)
'.eiee eTu(Attribute)
D& g m %
! .> B
> B (HTML Tag): > B % eiee-e p U E L> eiee ) / %& p4 > B
Zr %& (<)er b .& ,e- e <o& )* e
D %& ) er (> ) b .&E
<html>,<head>,<body> % e e > B p4 > B . . a* % a* J p4 > B
. e
e Case Sensitive & , 4 Small Letter- e / > B / e grt-TU* & % E
> B .& Zr %& +i > B .&i D 4 % ZL D <o& )* e -T* e B e | + (/) .4 %
E- > + I 4 ./9 E, %) + Zr %&9 <head> > B .& D %&9 </head> > B
.&9 > B &9 E . D > B >% o %& , eg a- > B E -> g /4
D > B </p> >% o % e a- > B
.eiee
eiee e? (HTML Element): eiee > B d i eiee e? BI4
eiee e? % eiee-e ndnd E L> o& - n e? p.* %& e
eiee )k? e? - html, head, title e
body e9 8 oa e?
&9
eiee e? 4g g;> 4 mr-
Start Tag/Opening Tag .& Zr %&

End Tag/Closing Tag .& D %&
Start o End > B W Element Content
9 kt Element Content o 4 -
9 Element-e End Tag o 4 -
> - W n e E E- -> g /4 p <p> > B .& Zr 4
%& 4 - -> g D&st e
+D </p> .& D 4 %& e/ -> g Zr o D > B
(<p>Element Content</p>)&i % -> g e? ai > B e
e? - *> W4 - ,
+ Zr o D > B et i % eiee e?
16
. eiee
eiee )k? (HTML Document): eiee e? d BI4 o& - i %
eiee )k?
eiee )k? pL d a

% head o body + eiee )k?
i api something.html/.htm Extension .& save 4 %
'.eTu
eTu(Attribute):
e o& - n k, i o 9 4 - e
e. as ,
eTu
s i n LU %4 - o& - e? as , s i -4* < 4g .; o& )*i
% eTui W4 ; %0? e u. %U L> D& - E - u- u. %U ./
s %)
g - . ./ 0 nt E. i ) . W/ ./ 4 % ?
% ei E eTu + % E>u- u. %U ei <h1>My First Heading</h1> i s
ik +& + b u ) ./ My First Heading / - W/ ./ 0
<h1 align=center> My First Heading </h1>
e/ align e eTu >% %&9 E value % center,E %)
o& -
W/ ./ E 0 + p4 eTu e e L 4 - eTu + L Ur- %<HTML Tag Attribute_Name=Attribute_Value></HTML Tag>
) i- )
o& - Source Code ./ ./4 - E, <html> > B u- <!doctype>
> B &9 e %& Doctype Declaration eiee i b u ) %
) i- +%i i? p 4 - 4 i ) i- . < e % )k? LU .* a* J
)k? D & 4, HTML e 44 +*, W3C d &nt4 i4> .? Doctype Declaration e
+ L U r- %
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
e/ %) o ) + & s 4 , 4 B e / +s
eiee ) api <html></html> > B W /4 % Zr E -
17
aL> &-4 %) +
%) + (<head></head> > B):
> B
e4k 9 E eiee d a
& BI4-E p a
% %) + ei + E
9 & 4 api <head></head> ei > B L> /4 % <head>.</head> > B .&
%) + BI4 %) + )k? +m*4 4> E- )k? i, )k? D&st,
)k? >h4 s i< skp i4> . ei + E 9 / %& 4 o& - )4 ./ E & ;
i ZL ./ E & Eg ./ E & +g + +* ) %) +
(<head>.</head> > B W) m > B g
. i > B
/. > B
B.
> B
. + > B
.s i > B
.skp > B
. i
i > B (<title></title>): %) e? p > B %0 i > B
<title></title> > B .& BI4 ei > B W E 9 / %& 4 b u -e i ./ E & T4
o& + i D& st + +
B4 / e +
kp i ei ei > B W / %& + * i E 4
- o& - +% i)k
4 - e n E E title e gt a-+<
e Valid HTML
Document g4 4 api title > B >% 4 % E- - E. www.youtube.com ei o&
+ i E 4 b u i ./4 - Broadcsst Yourself; ei %&9 ./<head>
<title> Broadcsst Yourself</title>
</head>
i > B kt E d + +& / .

18
i > B b +

/> ' -e L>
i > B W an > B >% E E
<title><p>Paragraph Here</p></title> - e
/.
> B(<meta>):
> B
i > B - >% %& <meta> > B ei > B >% %&
)k? +m*4 4> +n n E- o& - g4 9 4 -&, 4 o& + i I ,
4 an n o4>, o& + i D&st e
oa 9 + * i i)k
e n e > B gt
a-+< e D > B i <meta> > B + L r- %
<meta name=meta_Name content=meta_Content>
> B + name, http-equiv o content 4 eT >% %&
name o http-equiv
eTu + content eT >% %& di eT e L* U n

m name o http-equiv eT & %
! .name eTu > %

i.<meta name=Developer content=Abdullah Al -Faruk>
e/ name o content attribute >% developer o 4 .o& %&9
ii.<meta name=keywords content=html,java,css,php,joomla>
e/ - <o& )*g .o& %&9
iii.<meta name=Description content=This tutorial about web design & developing >
e/ o& - +
kp U* .o& %&9
iv.<meta name=robots content=noindex/nofollow/all/index>
robots <o& )* > % - o& - + * i i)k 4 -
v. )k? .; +& an - ) n refresh >% %&
<meta name=refresh content=3,http://www.iceschool.com>
19
an / E &<meta http-equiv= refresh content=3,http://www.iceschool.com>

e p4 4 - - o& - ) %
.HTTP-EQUIV eTu > %

.; +& - o& - update 4 <meta> > B ei attribute >% %&
<meta http-equiv=expires content=sat,30 dec,2011,12.00AM,GMT>
e 30 dec-e - b u + * )k? e n4 - +
g%
B.
> B(<link>):
> B
e )k? + )k? +

E B s - %& <link> > B
>% o +% E & e )k? + ek i +

E B g4 %&
> B
>%
> B + L U4 >% %& )k? ek s i< skp +
E B n
+e+e+ +&
> B & s 4 )k?
> B>% &
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
. +
+ > B(<base>)
: e o&+ i +s

> B
e o& - )l %+ >%
n >% %& + > B <base> > B L> )k? +URL & .o& %& )k?
% i- g4 n <base> > B >% sL E
<base href=http://www.iceiuacademy.com/html/>
e E. . iceiuacademy e % - %& e
ei - E. Admission Form
- .4 i 4 e n . >% % - + + + p. E &
E
<head>
<base href="http://www.iceiuacademy.com/admissionform" />
<base target="_blank" />
</head>
+ Base Tag & s 4
20
.s i
s i > B(<style></style>):
> B
<style> o </style> > B >% L> )k?
s i< Ek %& e . e/ B , +e+e+ +& B s i > B + type
e eTu >% %&
E
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
.skp
skp > B(<script></script>):
<script>o </script> > B L> )k? client-side
> B
script E JavaScript E B %& skp +& e B, e/ B
i a- . + , + *+ , >

9 ?
www.extratelecombd.com
21
aL> &- ) +

) + (<body></body> > B):
> B
e eiee )k? p L d a
%- %) + o ) + %) + & -T*
%&9,e/ ) + & s 4 4 B e / ei
+ E 9 & 4 api <body></body> ei > B L> /4 % <body></body>
> B .& ) + BI4 Body Section e d > Bi (<body> o </body>) a- a* J e. >%
o % e o& - E 4<& ? (Image, Text, Table, Form, Frame, Paragraph, Heading
Etc.) ei + /4 % <body> > B + 9& eTu >% o& - D*U<&
4 %&
.bgcolor
/.background
B.text
.link
.vlink
.alink
.bgcolor e > % ei eTu >% o& - > g u?)

E- )k / color.html + u- ./
<html>
<head>
<title>Show a Background Color</title>
</head>
<body bgcolor=red>
<h1>Background Color is RED</h1>
</body>
22
-4* E &
</html>
e/ <body bgcolor=RED> >% > g u?) % e D& k r e/
bgcolor=red >% > g u?) -o ./ 0 , nt E. i e % ./
4 ? % e + L 9 4 u- & o& - + E &, e D& m
%-
eiee-e
e
& >%
eiee
o& - + 4 -d4 9 k n+ m e. %
p -d4
+ L 9 E , + . , , +, < 9 eiee e >% +& + + e.
/ E4 - !_ .o& %
!_
:
!_

Black
Gray
Silver
White
Yellow
Lime
Aqua
Fuchsia
Red
Green
Blue
Purple
Maroon
Olive
Navy
Teal
d4<& -d4
4 RED-GREEN-BLUE(RGB) e 4
& +n& an n
& +C;
Red, Green e
Blue ei 4 +; %0 rgb p4> (E/ ) %4
^^(E/ +m* ) rgb % rgb(RED,GREEN,BLUE) u. %U k> r-
Red, Green e
Blue e :

bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)"
Red
Green
Blue
23
^^ E p kt +*
4C4<& -d4
eiee -e
& n 9& ) e %k )+ ) % %& ) BI4 %&
&
k n+ e
p4 n di ) &9ERRGGBB-e/ RR=Red;GG=Green;BB=Blue. ) /
+ L U & %-"#RRGGBB" a* J p e h + i (#) 4 - k n& n di ) + n
di ) e
+D < n di ) e )+ o %k )+ m ? " -E*n !
+
/> >% E +
/> g BI4 %& 4 % )+ m e
" o A F -E*n !_ +
/> >%
E +
/> g BI4 %& 4 % %k )+ m
)+
0 1
9 10
11
%k )+ 0 1
9 A
------------------
& B t 89 ekt
12
13
14
15
F
% E kt +m F %
+*
u. %U
bgcolor="#FFFFFF"
bgcolor=#0055AA
[ d 4C4<& -d4 % ut- e i >% ]
ei )g - . /4 % + * a * - +/ - -9n
) +& .i % a - - +o&> >% 4 -
[ d eiee-e E/ E/ + . % ++& u- 4 -d4 >%
]
/.background e > % ei eTu >% o& - > g u?) i
>%
%& i >% -d4 %<body background=i .i > >
<body background=web.png > e/ web % i .png % 4 >
E l eiee )k? + %&9 +i l api > h4 i 4 %
o& >h4 i

.gifGraphic Interchange Format (h >h4)
24
.jpegJoint Photographic Experts Group (e ek % .jpg )

.png Portable Network Graphic(.gif o .jpeg e -i e as )
.BMPWindows Bitmap.
B.text e > % ei eTu >% o& - + k
L* U %& E
<body text=GREEN> ,e <body> o </body> > B L> + k + ./
.link e > % ei eTu >% o& - E 4<& % i- k L* U
%&E<body link=BLUE> ,e o& - E 4<&
< ./
.vlink e > %
> % E g % i- k Already Visit %&9 4 .
L* U %&
ei Attribute >% %&E<body vlink=RED> ,e Visited Link e ./
.alink e > % 4* E u- +* s - %&9 4
L* U %& ei
Attribute >% E

<body alink=GREEN> e Link e + ./
o& - >% %& 4 + s 4
) + n > B >% o& - n ? p.* o 4 . sn
+ %& m n > B s 4 U* .o& %
%)
> B (<h1> </h6>):
%)
a* J , D& - g >% 4 ei > B >% %&
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> ei 9& > B >% .o& %&e. k % h1>h2>h3>h4>h5>h6> a* J
25
h1 >% 8 ? ./ E 4 - k n& 9 ./ E + L U4 o& - M - D
align eTu >% e. as -4* E &E
<html>
<body>
<h1 align=left>Left Alignment</h1> e )l
<h2 align=right>Right Alignment</h2> %)
o& - ) . ./
<h3 align=center>Center Alignment</h3> %)
o& - W/ ./
<h4 align=justify>Justify Alignment</h4> %)
a 8 % o& - di - +- &B M

</body>
</html>
-> g > B (<p>.</p>):

-> g g4< n <p>......</p> > B >% %&e D > B a- -> g as I n
align eTu >% %& E
<p align=center>Here a Paragraph</p>
align=left[)l %+ left align e >% o %]

align=right[o& - ) * ig as ]
align=center[ as nd, i ) o p n + % ]
align=justify[ -> g i ) o u& p n + %]
-> g E E s i n o9 > B > % %& Eg m %
26
b > B (<br>):
e -> g D -> g /4 n4 -> g > B >%
<br> > B >% E & ei > B i b > B %& , U ei > B e i M s / n4 i

g4 ZL -> g nE - E s <br> > B .& i b g4 4 - E-
<p> You can use a web page editor like Microsoft FrontPage, Adobe Dreamweaver or
similar to create web pages. Webpage editor software works like Microsoft Word (a
complicated editor program used for creating and editing pages of books, letters etc.)<br>
Second option is to learn html codes and write html pages in a simple text editor. As
mention eerier, your codes will be seen as WebPages when viewed in a web browser.
e d . . -> g - o& E
b
s+(&nbsp)
e > %
s+
eiee-e e L s+,> (Enter Key), > -4*4 %& ZL e s+ +C; 4 i
k W a4k s+ +C; 4 % &nbsp >% 4 % E4g &nbsp >% %,44g
s+ +C; %E
<p> Java script is an&nbsp&nbsp&nbsp interpreted object oriented promramming.</p>e/ 4
s+ g4 %
% & i s+ <pre>.</pre> > B > %

E. &nbsp >% 4 i 4 <pre> > B >% 4 - ei > B W s+,>
(Enter Key), > -4*4 %& a* J E4g s+ >% %& 44g s+ g4 %& E
<pre>Hyper
Text Markup
Language</pre>
Output:
Hyper
Text Markup
Language
27
e) i i
D& e s 4 -> g / D& e .o& E4 - e E, -> g u- u+
+* / e &4 k ./ E , E ./ iu +% W4 - -> g e D&st < e n
>% %& title eT u. %
<html>
<head>
<title> Use of title attribute in a paragraph tag</title>
</head>
<body>
<p title="HTML is a Markup Language">HTML is an acronym for HyperText Markup Language.
HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist
of two essential parts: information content and a set of instructions that tells a computer how to
display that content. The computer application.That translates this description is called a Web
browser. </p>
</body>
</html>
u- ./ -> g u- E s u+ +* / e k W "HTML

a Markup Language"
is
/ ./ 0
<html>
<head>
<title> Use of title attribute in a paragraph tag</title>
</head>
<body>
<p title="HTML is a Markup Language">HTML is an acronym for HyperText Markup Language.
HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist
of two essential parts: information content and a set of instructions that tells a computer how to
28
display that content. The computer application.That translates this description is called a Web
browser. </p>
</body>
</html>
<acronym> > B > %

o& - e D b u- +* / b +m* e 4> &4 k ./
E &<acronym> > B >% ei %&E
<p><acronym title= HTML is a Markup Language>HTML</acronym> is the basic markup
language for web page.It is created by Tim Berners Lee.It is controlled by < acronym
title=World Wide Web Connection>W3C</ acronym ></p>
u-
nT / g4<hr>
> B
g4
o&- nT / g4 n <hr> > B >% %& e D > B i m eTug
>% e u -4* E &
29
*align: / as -4* 4

align=center[)l > ]
align=left
align=right
*color: / L* U 4
*size: / u4 U*& 4 e -k %&
*width: / p+s4 U*& 4 e 4 -k u&i %4 -
u. %
<hr align=center size=10 width=50 color=RED>
Marquee > B > %

n u o& + i ./4 - i E , + mp4 +
.g - e. an. E & <marquee>
> B >% ei E &ekt + L 4 %)
-> g sk %&E
<marquee>- E / g sk 4 4 e/ /4 %</marquee>
marquee > B >h4 eTug %direction=left[ / g ) E ]
direction=right[ ) ]
direction=up[ u-]
direction=down[u- ]
u. %U
<marquee direction=right scroll amount=2>HTML Is The Basic Of Web
Design</marquee>
n> E B
30
eiee ) 8 % +/ p& <& ) / 4, -4* 4 W4 +s
%&e U ) n a
n> E B E &, E 4 / +% eiu )- +% W4
- ei n> b u o& - u- p a* J n> E / %& 4 + +* )i
e u- ./ E & n> E B & %

e u. %U ./<html>
<body>
<h1> First Heading</h1> 
<p> HTML documents, the foundation of all content appearing on the World Wide Web (WWW),
consist of two essential parts: information content and a set of instructions that tells a
computer how to display that content. </p> 
</body>
</html>
) i
% s
+ p4r4 &

hostghor.com
31
aL> &- - M o& - ? >%

? >% <font>.</font> > B
? o& - a4>n grt-TU* e e? C4 s i . ? E t4 + 4 ? p- *
%& e + p- * + * p& B ./ E CSS-e ? --TU* &n - o& E HTML o CSS >%
L> ? +
|; n HTML e <font></font> > B >% %& e + color, face e
size eTu >% ? s i -4* E & e 4 u- . i )p) a* J e -4* CSS
>% ut
i.Color eTu
eTu >%
? L* U %& ei eTu + % E> E
<font color=#ff0022>Some Text Here</font>
ii.Face eTu >%

? u L* U %& ei eTu L> 4 e ? ul/ 4 % E 4 +
mu E
<font face=Arial> Some Text Here </font>
e/ e L ? ul/ E4 - nt 4 . W >% 4 % E
<font face=Arial,Times New Roman,Solaiman Lipi> Some Text Here </font>
iii.Size eTu
eTu >%
? p %& -&? %+ e -&? % !/a i + )l %+ e !
-&? e + + - h +% ! a -E*n +
/> >% ? -4* E & p4 t E B
? + i di -&? -4*4 %&u. %
!. <font size=+1>Web development</font>[ e !' -&? ]
.<font size=-2>Web development</font> [ e e -&? ]
%+ %& ai W4 - 9 ; e E 32
)l !+ (size=e/ E .*)

!
e n %+ E - !+(!*)= !+=!'

e n %+ E - !+(-*)= !-'=e
Size Attribute & e u. %U m .o& %
<html>
<head>
</title>Font Size</title>
</head>
<body>
<font face=arial size=-2> Error! Hyperlink reference not valid.>
<font face=arial size=-1 > www.webtechnologyblog.com </font><br>
<font face=arial > www.webtechnologyblog.com </font><br>
<font face=arial size=+1 > www.webtechnologyblog.com </font><br>
<font face=arial size=+2> www.webtechnologyblog.com </font><br>
</body>
</html>
p.*
33
+g eTu >% e ) .o& %

<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
9 > B >% k s i -4* E & E
*i
i ./ 4
i.<I>Some Text Here</I>
ii.<address>Some Text Here</address>
iii.<cite>Some Text Here</cite>
* l
l ./ 4
34
i.<B> Some Text Here</B>

ii.<EM>Emphasized Text</EM>
iii.<strong> Some Text Here</strong>
*?) i
?) i ./ 4
<U> Some Text Here</U>
* l
l + i + ?) i ./ 4
<B><I><U> Some Text Here</U></I></B>
*an n
an n
1.<blockquote> ..</blockquote> [ udC4 p n ]
2.<Q>..</Q> [ i i udC4 p n ]
3.<dfn>Definition</dfn>[ ) .& n]
4.<samp>Sample Computer Code Text</samp>
5.<kbd>keyboard</kbd>
6.<var>Variable</var>
7.<code>.</code>[ Programming code W n ]
8.<sample>Program e Sample Output</sample>
9.<strike> W . B</strike>
10.<big>Text Font 8 ./ n</big>
11.<small> Text Font 9 ./ n
12.<TT> i- i 4 ./4 </TT>
13.<blink>Text j n</blink>
35
14.<sub>:H<sub>2</sub>O[Output:H2O]
15.<sup>a<sup>2</sup>+b<sub>2</sub>[Output(a2+b2)]
? > >%

n ? >% )k? D*U<& 4 E & nt e e 8 +s % - >h4 ?
iu mu o 4 - eas & iu - )k? ./4 - e4 o& + i
g4 udp >%4 % ei +s + L n mu >h4 + ?+T% & ?
> 4 B %&9 o& - - >h4 ? E. iu mu o E. -
? > ul/ 4 > L> e ? 9 o& %ei > ?
./4 p & 9 9 e/ ? > + -4 % - M ? > %
I.cursive
Ii.fantasy
Iii.monospace
Iv.sans-serif
v.serif
u. %U + ? > >% ./ %

<html>
<head>
<title>Generic Font Families</title>
</head>
<body>
<h3> Generic Font Families</h3>
<p style="font-family:serif; font-size:14pt;">serif family</p>
<p style="font-family:sans-serif; font-size:14pt;">sans-serif family</p>
<p style="font-family:cursive; font-size:14pt;">cursive family</p>
<p style="font-family:fantasy; font-size:14pt;">fantasy family</p>
<p style="font-family:monospace; font-size:14pt;">monospace family</p>
36
</body>
</html>
p.*
D ak+T% (HTML Entities):

9 ak &9 Eg + + HTML ) W / E & E (&,,<>) 9 ak &9 Eg
< )* .& / E & E(,,,, i4> .) e+ kt 9 ) >% %& E . %&
Entity Codep4 ak di LU Entity Code &9 -+
/> B4 o bB4E e Entity Code %+
/> B4
bB4
&#956 ;
μ
9 Entity Code m .o& %
ak
<
>
&
+
/> B4
"
<
>
&
®
©
μ
bB4
#quot;
<
>
&
®
©
μ
37
♥
♠
♣
♦
&hearts;
&spades;
&clubs;
&diams;
+ * - - p& <& Entity Code +

g% 4 -
eiee u- . jU< B

eiee-e
eiee e + u- . +T% di B B E &E
!.b e b e
e. B - i b g4 %& E d -> g > B ei
i / 4 . u- . . i ./ E u. %U + % E> ./ %<p>First Paragraph </p><p> Second Paragraph</p>
u-
First Paragraph
Second Paragraph
a* J e e b g4 9 eiee-e <p>,<h1> <h6>, <hr> i4> . % b
e?
. k e e i 4 - e. B - i b g4 %& b e? .
+ e?i k e?
s
& 9
e u- . W an u- . s - i % s
s
4 g & E!.p4 u- . -- s) %4 %E<p><B>HTML</p> e U <B> > B D %& i
. s) k +I %4 % E<p><B>HTML</p></B> e U <B> > B k i
.b u- . an b u- . W s) E4 - E
<p>html is the basic of <h1>Web Design</h1></p>
38
4.b u- . k u- . W s E E

<B>Something<p>Paragraph here</p></B> e
k & 4 + L U 4>

www.cricketw.com
aL> &-9& o& - s g4

. g.n < n n s g4 4 %& E- s, i& s , s
i4> . n +
/> p4< .& ei s g4 %& I 4 4> < o& - sn u-s -
n s e? (<li>.</li>) >% %& <li>.</li> > B >% 4> < s g4 %& e
D > B a- 4 p eiee s .> <ol> > B .& Zr L % a) )
s(ordered list), <ul> > B .& Zr L %4 %< a) ) s e
<dl> > B .& Zr
+
j T s(definition list) 4 ordered o unordered list-i % HTML-e pL s e/
ei d &i 1.<ol> - ordered list(Numbered List)
2.<ul> - unordered list(Bulleted List)
39
. k s (Ordered List):

4> < +& m an+ u-s - n Ordered List >% %& e e b u- .
Ordered List p %& <ol>.</ol> > B L> e + type eTu >% L* U %&
+& m % u. %U ./
) |DU
!. p L* U .4 % E s L % ' m i L* U .&9 E . g4 s %
k s 4 i <ol>.</ol> > B >% 9
. e- E ig s g4 4 . <li></li> > B W /4 % e u- ./-
An Ordered List:
Coffee
Tea
Milk
u- u- k r e/ sg g4 %&9 !,,... k n+ , e )l nt E. i
. sg a,b,c. i,ii,iii.k n+ % 4 ? % ei n &9 o
p L % s(ordered list) &9 eg + L !,, m -4* m U* %4 - 4
8 % 4 9 % 4 type eTu >% m -4* %&1.<ol type="a"> // a,b,cei k ./
2.<ol type="A"> //A,B,C... ei k ./
3.<ol type="i"> // i,ii,iii... ei k ./
4.<ol type="I">// I,II,III... ei k ./
u. %U ./
40
4 ./
Letters list:
Apples
Bananas
Lowercase letters list:
Apples
Bananas
Roman numbers list:
Apples
Bananas
Lowercase Roman numbers list:
Apples
Bananas
Start eTu .& i0 nE &< m %4 s Zr E & E41
p.*:
4.Buy Food
5.Enroll in College
6.Get a Degree
a) (Unordered List)

/.a)
a)
e L s Serial Number , e -4* n Symbol >% %& <ul><ul> > B >%
Unordered List p %& Type Attribute >% n Symbol .o& %& u. %U
./
p.*:
An Unordered List:
Coffee
Tea
Milk
<ul> > B + % E> s g4< %& s 4 p E !. squares() .disc
.circles() default %+ + L 4 full discs >% %& <ul> > B + type eTu >%
n +m .o& E4 - E42
<ul type="square">
<ul> type="dics">
<ul> type="circle">
u. %U ./
p.*
Disc bullets list:
Apples
Bananas
Circle bullets list:
Apples
Bananas
Square bullets list:
Apples
Bananas
s) s
43
p.*
44
) i
% s
+ p4r4 &

hostghor.com
aL> &-+ 4
+ 4 o& - i >%
p & + o& + ii 9 9 i >% %& i >% o & - .C;n o D*U<&
%& oI o& - sn + 4 E n s i ?, D*U<& > g u?) p& 4
i gto a o& - sn + 4 i >% %& <img> > B >% o& -
i +
Ek 4 %&e D > B i, 4 e + src eTu >% i & .4
%& E45
<img src=i /i .())i > >

<img src=image/web.jpg>
e/ W %0 E Image l e web.jpg e i &9
nt - E l HTML i + 9 +/ i E. i / 4 i ./ 4 %
E<img src=web.jpg>
e i >% + + o& + i i B> i & .o& E4
- E
<img src=http://www.image.google.com/ html/html5.jpg>
<img> > B o9 eTu >% %& Eg %-
.widtho
o height eTu >%
o& - e i - &B & p.*4 % 4 .* %& <img> > B width o height eTu e
L> e. p %& -k width o height eTu >% o& - dr4 ) %& U
b u n4 i + i 4 %& width o height eTu >% 9 i 8 e
8
i 9 E & >% L
<img src=image/web.jpg width=300 height=200>
/.Align eTu >%

i as .; 4 align eTu >% %& E
<img src=html.jpg align=left>
k W i >% 4 % align eTu m k > g >% %&
*align=top[ k as i u- . ]
46
*align=middle[ k as i W ]

*align=bottom[ k as i . ]
.........................................................................................................
*align=left[ i as o& - . ]
*align=right[ i as o& - ) . ]
B.Border eTu >%

)l %+ i )* i )* g4 4 ei eTu >% %& )*
)l %+ e -4* E & 4
-4* s i< L> E &e
L %& -k >% L
<img src=faruk.png border=4>
.hspace o vspace eTu >%

-> g W i k i nT .Tt (u&- /d- ).* %& hspace e
um .Tt(u- o ) .* %& vspace eTu >% E
<p>Use of hspace and vspace Attribute <img src=wp.jpg hspace=20 vspace=10></p>
.Alt eTu >%

U b u E. i p.* >* %& iu i n / L< - ) % U E.
i ) %& 4 i s e B
k i ./ E &,E u- +* / i
+m* - L> e 4> - o& E & + + k ./ E & alt eTu >% ei
%&E
<img src=joomla.jpg alt=joomla admin panel picture>
<img src=photo.jpg alt=my photo with my friends>
47
i s E. alt eTu -e >h4 k ./ & e

+ E 4 T k + E & + U
k n< L> / E4 - E
<img src=joomla.jpg alt=[joomla admin panel picture]>
E. ei k n k s i r- .4 i 4 <img> > B > B W s) 4 %
E
<I><img src=joomla.jpg alt=joomla admin panel picture></I>
<img> > B + title eTu -e L> e) i i >% E & e u+o +&
Alt k -4* title eTu k ./ E
<p><img src=mmm.png title=HTML A Markup Language>HTML is an acronym for
HyperText Markup Language. HTML documents, the foundation of all content appearing on the
World Wide Web (WWW), consist of two essential parts: information content and a set of
instructions that tells a computer how to display that content. The computer application.That
translates this description is called a Web browser. </p>
u-
48
+4*4
!.o& - t 4k i >%
.a 8 + i i >%
. Width o height eTu L> i + i .; &
.; + i i - ) r
'.alt eTu >% r
^.o& i - ) 4 & 9 / - %& E &
4 i / - i - )
_.ei - e+ ag i >%
aL> &-
o& -
g4
% i-
<a>.</a> > B

% o& + i an4 grt-TU* e D& eiee-e L> e o& - g4
nt +g et %&
> B + % E>; e9 8 o e o& + i + an o& + i
+
E B %&
> B L>o& -
k an E - E o& E & a>
> B
(<a></a> > B) e + % E>
g4< %& ZL k & - i e i eD+ u-
.4
- ,e 9 u-
.4 - ,8 o& - s-t g4< e ig4
.4
- i4> .
> B + href, title, o target eTu >% %&
> B + L U r- %<a href= E - +
E B 4 4 I target="
k n4 - 4* -i )
% n4 ui?) 4 / 4 I .4 %" title=
u- u+ & B Bn> o& - +m*
Bi L . > b u E ./ 4 , E u- k Bn> - E o& E </a> e u. %U ./<a href="http://www.google.com/" target="_blank" title=Search Engine>Google Home</a>
e )k? Google Home / ./4 - , E 4 k www.google.com o& + i E o&
E
e > B + >h4 eTug m s 4 %
% i- kk
.href( % i
- kk n ) eTu > %
B* - (URL) L* U %& ei eTu L> E
49
<a href=http://www.facebook.com target=_self >Facebook</a>
b u ZL Facebook ./ E ,E u- k www.facebook.com o& p E

Hypertext reference %4 - Internal, Local, Global
!.i? ( Internal): ei - L>

g4< 4 i? % i- k n+ >% %& e
D& m s 4 %&9
. ( Local): eiee-e L> ZL e o& - g4 E & e
ag - g4 e + an +
Ek e +mTU* o& + i g4 %& ei
a* J o& + i n - + n+
E B B8 4 %& % i- k n L> E- - o& + i % - n index.html, About Us - n about.html; Blog - n
blog.html; Tutorial - n tutorial.html i4> . n - g4 e/ - i %
- + an n - +
Ek ; ei n index.html i 4 )
/<a href="about.html target="_blank"> About Us </a>
<a href=" blog.html target="_blank"> Blog </a>
<a href=" tutorial.html target="_blank"> Tutorial </a>
[ d + eiee i e/ ei l / %&9 L o& %&9 . . l
/ +kt ) ul/ .4 %]
. g ( Global): ei -d44 e o& + i + an o& + i +
E B %& E- -
E. - o& + i +
.4 4 index.html i 4 )
/<a href=http://www.facebook.com target=_self >Facebook</a>
/.Title eTu > %

% i- + title eTu >% iu 4 Bn> - +m* Bi L U .o& E4 -
e - + L> E
<a href=http://www.WebTechnologyBlog.com title= B8 4 pEk + ......> < a>
e/ u- u+o B8 4 pEk + ...... ei / - %+ ./ E
e e) i io %&
B.Target eTu > %
50

k 4 - 4* - Open % 4 Window 4 Open % 4 L* U %&
target eTu L> target eTu + L U4 oEk o& - >h4 %& , 4 + L U o& -o
e >% E & eTu > % 4* -i B* - o- %u. %U
<a href=http://www.facebook.com target=_blank>Facebook</a>

e 4 Window 4 Open %
<a href=http://www.facebook.com target=_self>Facebook</a>
e 4* - Open %
i?
g4
i? L> bg0 ei - an a

an - .s a
+
+
E B B8 4 e B + E e o& + i n - +
g4
%& e e - 4 n a
+
g4 E & e o& -
E/ a 8 %& 4/ ei %& E-ui-)& 4 (http://en.wikipedia.org) - E.
HTML / + * 4 e a 8 )k? ./4 - - p . 4 e k
./4 - - E 4<& ?g %)
k W ./4 - e/ - E %)
-e u- k
? - E/ 9 4 - + .Cp % E. ? - e. 4
4 e& 4 + s ./ ei E &-
51
p )k? a
( %)
) */h4 n <a> > B name eTu >% %&
e- href eTu L> E/ * 4 i ( E-u- k) +/ 4
%
e u. %U ./
) |DU
!. - p a,",!!,!,!_,!e,
i 8 -> g /
. !"
i k> r p name="C7" .& Chapter 7 h4 /9 Chapter 7 +
U e& 4 Chapter 7 ./4 - ; . u+ sk ./4
% e i Chapter 7 e e
- u- . /4 E 4 o/ k
Chapter 7 e& 4 ./ 4 - i ei n. !"
i Chapter 7 E h4 /9 '
i hrefeTu >% 4
%&9 e / / . E E ? E s 4 -
i
%+ > %
52
a o& + i ./ E e i u- u+ +* & B +* C4 -4* %& E & E
e .* ei 4 > B(<a> o </a>) W <img> > B s) 4 %&i

%+ >% & %
<html>
<body>
<a href="http://www.WebTechnolohyBlog.com">
<img src="smiley.gif" alt="Web Design tutorial" width="32" height="32" />
</a>
</body>
</html>
ekt e D / . E, e/ api alt >% 4 % U iu E. i n
/ 4 alt e ki %+ ./
eiee ii

k
E g4< ii
o + 4 % ZL href eTu 4 i *)
L> B E o& + i I 9 4 s e ii I .i %E
<a href= "mailto:abc@mail.com" >Email Example</a>
e/ mailto: %
kt e p
p.*:
Email Example
ei
u- u+ & E , s + mailto:abc@mail.com / ./ e/ k -
b u abc@mail.com i I & e i - I& .
- i - ii
a4k d D& E B 4 - E %0-!.subject e
.body
!.subject ii subject-e - - i / .4 - subject e -4* title
eTu >% E4 -
.body body- 4 i D&st / .4 -
u. %U
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" >
2nd Email Example</a>
p.*:
2nd Email Example
53
e/ k - i& h i / e

To e &B & a@b.com Subject e &B & Web Page
Email o Body 4 This email from your site eg B& a +
**- E. u - + i i 4 i- i L> 4 - E<a href=mailto: faruk@iceiuacademy.com?subject=Feedback&body=Good Job> %
faruk@iceiuacademy.com </a>
>% < sL * e + + i eD+ .o& E4 -
<a href=mailto: ice.iu.academy@gmail.com?subject=Feedback> 3ice.iu.academy@gmail.com</a>
+4*4
!. g4 - E i ./ 4 I4 9 ?
. ./ +I
.&9 ?
.) u )
. ./ - I 9 ?
'.- + i % s - o ./ +
o i )k I 9 ?
+ j - .4 ?

r
!_!^'^!_ e
54
aL> &-& o& - g4

g4<table>.</table> > B
g4
n n o& - 4> u-s - n gt a-+< e9 8 - o& - & B
B n a
k, i i4> . s - e sn o& - g4 E & <table>.</table>
> B >% o& - g4 %& > B W o9 > B Eg g4 n
api p& > Bg mr-
.<tr>.</tr> [ ei > B d row + g4 %& ]

/.<td>.</td>[ ei > B d + 4 ) i- %& ]
B.<th>.</th>[ ei > B d + %)
.o& %& ]
[ d +g > B D > B Optional ]
Zr , p 9 4 e g4
u- 4 k> r- e/ d /+ e

4 &9 ok> r-p4 e
%)
&9 g4 +& p /+ g4 4 %& ; e- p4 / + 4 E4g )
/ %& 44g g4 %& D& W n m L - L - %u- t E ./ %&9 4 p + e g4 -
<tr> <!e e + g4 % -->

<th>Name</th> <! p4 %) .o& %&9-->
<th>Roll No.</th>
<th>Age</th>
</tr>
[ d k> r p4 <th></th> > B + B .&9]
55
e d4<& + g4 -
<tr> <!e e + g4 % -->

<td>Faruk</td> <! p4 + ) i- %&9-->
<td>0818002</td>
<td>22</td>
</tr>
e + ) <table>...</table> > B W /4 % +mTU* ) m .o& %-
b u 4 ./ E
>h4 eTu +T%
56
D*U<& n >h4 eTug %- align, width, border, cellspacing, cellpadding e
bgcolorm eg %
align eTu >%

s e o& - . as , - i align eTu >% e as -4*
4 - E
<table align=left> [e )l]

<table align=right>[ o& - ) . ]
<table align=center>[ o& - nd ]
width eTu > %

ps4 U*& %& width eTu L> di ei eTu >% E &!.<table width=60%>[ ekt ps4 % b u _ %]
ekt b u 9 o 9 %
. <table width=100>[ ekt ps4 % !
-k ]

>% ut ekt ++& I
[ d width eTu >% b u 4 p.* a* J E - )
+ - &B 8 p.*4 %]
Border eTu > %

)l %+ . )* )* .o& %& border eTu L> nt
+( p4 ) )* .o& E & u- u. %U k> r <table border=1> .&9 ; E
. e )* ./ 0
Cellspacing eTu > %

Cellspacing eTu >% + +T% L> M s L* U %& cellspacing 4 W &
d cell e L> s+(space) a
)l %+ cellspacing eTu ei %&
-k E <table cellspacing=3>
e u. %U ./
57
p.*
Cellpadding eTu > %

+ )* + ?? .Tt .* 4 ei eTu >% %&)l %+ e ! -k a* J +
)* + ?? .Tt ! -ke -k %&E
e u. %U ./
p.*
58
<table cellpading=2>
bgcolor eTu >%

ei eTu L> > g u?) >% E & E
<table bgcolor=red> e > g u?) ./
rowspan eTu > %

e L + +g e + -4 n <td> o <th> > B + rowspan eTu >% %&Eg
+ e<T4 4 0 4 . L> +& u- + + rowspan eTu >% 4 %E
<td rowspan=2>
<th rowspan=2>
e/ d d + et %&9
u. %U k> r-
59
4 u- ./ E -
colspan eTu > %

colspan e >% rowspan e 4i ZL colspan e<T4 Eg e<T4 4 0 4 .
L> +& u- + colspan eTu >% 4 %E
<td colspan=2>
<th colspan=2>
u. %U k> r-
4 u- ./ E -
60
<caption> > B eTu +T%

<caption> > B >% .o& %& align eTu >% as caption %
4 L* U %& )l %+ caption u-
<caption align=top>
<caption align=bottom>
<caption align=left>
<caption align=right>
e u. %U ./-
4 u- ./ E -
> g u?) i >%

> g u?) eTu e + % E> i > g u?) i %+ ./ E & u. %U ./
61
p.*
-:
eiee > g u?) -
u- u. % ./ E 0 E e 9 + +s %&
9 & 8 %& 4 > g u?) 9 - %
p.*
62
E. e
e& s i - E p ) k 4 b u r

www.ashianskyshopbd.com
aL> &-. o& - >%

g4 (<form>...</form>) > B
eiee-e a4>n grt-TU* e D& p & p4 o& + ii 9 9 * >% %&
iu i- (n>,a)* g%, n, i) & n eiee-e >% %& e &
* % 4> +
g% n 9 l * g4 >h4 > B % <form>.</form> > B > B
>% ZL g4 4 - nt i-C4 ) + * - I o ) g p++
n e + * + i) > r& E--ei E -ei- . % <form> > B + method, action e
enctype
eTu >% %& ei eTug - 44 . B , -ei- .& p++ +&
eg B eTug & m % L U .o& %63
.Method eTu
Method eTu >% * p.t ) + * + %& d Method >% ) +
%& 1.Get Method (<form method=GET></form>)()l)
2.Post Method (<form method=POST></form>)
URL e + * ) + n Get Method >% %&E iu E. o - +o& )* .&
B 4 Address 4 ./ E
http://www.sitename.com/login.php?/username=faruk&password=1254893/
8 4> + * + n Post Method >% %& ekt 4> &s ) a
%+
+ * + %&
/.Action eTu
+ * ) p++ n p g skp >% Action eTu L> 4 & .o& %& E
<form action=registration.php method=post>
B.Enctype eTu
aL 4>+mn * kt Get Method >% - o& E & ekt Post Methot o Enctype eTu
>% - o& E & ei eTu d * pC4 L* U .o& %& E
<form method=post action=order.php enctype=text/plain>
eiee i- > B

eiee-e e a > B &9
4 L> input > B h >h4 <input /> > B e
closing > B p& i Input fields %0 form-e p U Input fields e L> E+ + an*k
64
+g % Text Field, Password Field, Radio button, Check Box, Text Area, Button, e
form
submission buttons n l & m %
k l g4

n o& + i s 4 B p e + E/ First name, Last name n
k l/ , ei k l % 9 &4 kt E - E k i- 4 . iu
o - +o& )* l (e i k / E & e l) g4 n <input> > B >% %& <input>
> B + >h4 eTug %- type, name, size, maxlength +g eTu >% e
u. %U ./<html>
<body>
<form>
First name:<input type="text" size="20" maxlength="20" value="Here Your Firstname"
name="firstname"><br/>
Last name: <input type="text" size="20" maxlength="20" value="Here Your Lastname" name="lastname">
</form>
</body>
</html>
4 u4- ./ E -
) |DU
1.type =text [ e l k / E ]
2.name - ei eTu .& l h4 / %& -ei- .& p++ +& ei eTu
L %&
3.Size=20[ e ak p+s l - o& E default size % + L 4 characters ]
4.maxlength=20[ e l ak i- E maxlength attribute .*s 9 8
>% < 4 i0 4 characters i- 4 - e - E. + i .*s o
characters i- +< d 4 maxlength attribute >% %& size e
maxlength ei
%o& p& ]
6.value=Your Name Here[ k l > )l %+ ,e -4*E B>]
- +o& )* l g4

65
Password Field k l 4i ZL type=password %an n eTu >% k l 4i E
<form>
Password: <input type="password" name="password" />
</form>
4 u4- ./ E -
k g4
h .& a- +k n k g4 %& e/ e e L a- +k E E
u-
)o g4
e L a- t e a- +k n Radio Button g4 %& checked
eTu,e + % E> - )o a )l %+ Ct B .& /4 -
E
66
u-
k e& g4

iu 8 ? - n Text Area g4 g4 %&kk e& e opening e
closing
> B &9 kk e& > B e 4 9 / 4 o& - e kk e& 4 p.*4 %&
E
<form>
<p>Comment:</p>
<textarea rows=5 cols=8> text area </textarea>
</form>
e/ rows o cols e L> Textarea Size L* U %&
g4
g4 n m ) i- r
67
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
+ g4
* ) + * + n + g4 %& E/ submit button e - . 4/ *
e 4* activate % ekt E b value eTu e %+ * 4 u-
p.*4 % "Submit" or "Continue" ei b d value eTu e %+ >h4 %& E
<form>
<input type=submit value=Login>
<input type=submit value= Continue>
<input type=submit value=Press>
</form>
u-
i g4
io %+ >% E & E
<input type=image src=button.bmp>
+ g4
+ k L> - * e +9 -* s as & & E4 - E<input type="reset" value="Reset" />
68
D-) u s g4

D-) u s e L> - iu n e e 4 g4< 4 - E/ iu E
e +k .4 - Lr - e * g4< 4 % e
e/ e p&
+
E 4 +k .4 - (ag
e L>) e e a- /4 %,4/ D-) u s L> +
+%i 4 - D-) u s g4< 4 p <select> > B .& ) Zr 4 % e- E
ig iu 9 i +g p4 <option> > B L> /4 %E
<html>
<body>
<form>
<select name="color">
<option value="bl">Black</option>
<option value="wh">White</option>
<option value="ye" selected="selected">Yellow</option>
</select>
</form>
</body>
</html>
u- u. % ./ selected eTu p a- Yellow ./ 0 - E. White p
./ 4 % m i selected eTu >% p4 <option> > B value eTu 9 e /
gt-T* E/ * ) + * - I value eTu L ( E bl,mr..) 4 %&
<select> > B size eTu

<select> > B size eTu .& - I .4 - E s & i ./ E u-
u. %i E. size=2 . 4 % d a- ./ sk ./4 %
<select name="color" size=2>
<option selected="selected" value="ye"> Yellow </option>
</select>
<select> > B multiple eTu

69
multiple eTu L> - e aL D& +k sE B .4 - E<select multiple=yes>
<option selected="selected" value="ye"> Yellow </option>
</select>
E. selected eTu uI& . 4 % a- +k) ./
- a- s E. a 8 %& 4 % gr- 4 - <optgroup> e? .& e E & E
<html>
<body>
<form>
<select name="TutorialInfo">
<optgroup label="Web Design">
<option value="html"> HTML Tutorial</option>
<option value="css"> CSS Tutorial</option>
<option value="photoshop"> Photoshop Tutorial</option>
</optgroup>
<optgroup label="Web Development">
<option value="js"> JavaScript Tutorial</option>
<option value="php"> PHP Tutorial</option>
<option value="database"> MySql Tutorial</option>
</optgroup>
</form>
</body>
</html>
4 u- ./ E -
70
- ) g4

upload form >% iu pictures, movies, e webpage upload 4 - e
upload form % e L input form - + L type attribute .& e %+ file /
upload form g4< 4 - E
Upload File: <input type="file"/>
upload i e size e +< L .& - - webserver e T> space k 4 - e
n hidden input field e
o9 specific attributes E B
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
input type="file"/>
e/ value 100 file +* 100kb %4 -
) i
% s
+ p4r4 &

hostghor.com
71
aL> &-eB o& - o >%

eiee iframe > B
e o& - W o& - p.* 4 iframe > B >% %& ei > B +> k %
<iframe src=" E o& + i ./4 e/ +i o& + i I .4 % "></iframe>
iframe > B + E + eTu >% %&
1.width
2.height
3.frameborder
Width o height eTu >% iframe o& - 4k &B & p.*4 % 4 L* U %&
e. -k , 4 - i 4 4 p 4 - E
<iframe src="iframe.htm" width="200" height="200"></iframe>
<iframe src="demo_iframe.htm" width="50%" height="60%"></iframe>
Frameborder eTu >% iframe-e )* .T %& E

<iframe src=" iframe.htm" frameborder="0"></iframe>
e ! >% )* i E
aL> &- eiee u

e o& - sn + 4 u grt a-+< o& - n B (+ o ) k
-d4i % eiee ue D*U<& o& - g4 4 api u +m*
4 % k> ./4 - E, aL
o& + ii e L + o & BI4 B ZL t
72
eiee >% i u g4 %4 nt 4* eiee o +e+e+ et u g4
%& di u g4 E &
!. > B (<table>...</table>) >% [ekt ZL eiee %i %]
. ) > B (<div>...</div>) >% [eiee o +e+e+ d i . %]
t k> r e o& - n B B %&9 e i % u
<table> > B >% u g4

<table> > B >% 4 o d ; e o& - u. %U m .o& %
<html>
<body>
<table width="500" border="0">
<tr>
73
<td colspan="2" bgcolor=#FFA500">

<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor=#FFD700;width=100px;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td bgcolor=#EEEEEE height=200px width=400px">
Content goes here</td>
</tr>
<tr>
<td colspan="2" bgcolor=#FFA500">
Copyright 2012| Error! Hyperlink reference not valid.>
</tr>
</table>
</body>
</html>
u-
74
E.o > B >% sn u g4 E & 4 e + u ) i %+ >% %& , e
-4* <div> > B >% ut
CLASS o ID eTu
s i<(CSS) o skp(JavaScript)>% n o&- n u- . n eTu >%
%& e L> an4 % ID, CLASS o STYLE ID Attribute-e L> p4 u- . n n
h4 E & e
CLASS Attribute-e L> e L u- . ei gr- +.s %+ h4
E &E d -> g E. . d ) i 4 i 4 4 . e ID m .& /
E4 - E 4 4 . s i L* U +& .s .4 - -> g ) i 4
%
<p id=1> This is first Paragraph </p>
<p id=2> This is second Paragraph</p>
ag -> g E. ei ) i i 4 4 . ei CLASS h4 / E4
- E<p class=2> This is first Paragraph </p>
<p class=2> This is second Paragraph </p>
<p class=2> This is third Paragraph </p>
style eTu >% n eiee u- . s i %& e + +e+e+-e a
)
> B +& e B 4 i e E
<a href=first.htm STYLE=font-style:bold>Link to first Document</a>
75
e k l ./ E
eiee <div> > B

<div>...</div> > B an n > B e - t %+ a body > B e 4 <div> > B % b
e? E eiee-e n u- . gr- + 4 >% %& ) > B a* J ) > B
% e o& - n a
B e
n a
n ) i + % E> +e+e+ e kt
Div e? a grt-* +e+e+ & +& ) > B --TU* >% W E
<div> > B >h4 4g eTu .& %
Id e + % E> e? e iu i) .o& %&
Align ei eTu left,right,center, justify %4 -
Width e? ps4
Height e? u4
Title e? +m* a4k 4> p.
style .*. strong visualization e n ) style attribute e L> p.* E &
e u. %U ./
<html>
<body>
<div style="background:#ff0011" align="center">
<h1>Visit My blog </h1>
<a href="http://www.webtechnologyblog.com">WebTechnology</a>
</div>
<div style="background:#00ff11" align="center">
<p>This is a paragraph</p>
</div>
</body>
</html>
u-
76
./ o& - d . ) g4 %&9

u. %U ./
<html>
<head>
<title>Use of DIV Tag</title>
</head>
<body>
<div id="menu" align="center" style="background:#aa0000" >
<a href="/">HOME</a> |
<a href="/">HTML</a> |
<a href="/">CSS</a> |
<a href="/">PHP</a>
</div>
<div id="content" align="center" style="background:#aa0000" >
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<h5 >Content Article Number Two</h5>
<p>Here's another content article right here.</p>
</div>
</body>
</html>
u-
77
<div> > B >% u g4

u. %U ./ ei ) > B >% %&9<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright 2012| Error! Hyperlink reference not valid.>
</div>
</body>
</html>
78
u-
aL> &- 4

eiee 4.01- e + > B
> B
U*
+ L U > B+T%
<!DOCTYPE>
)k? LU .*
<html>
eiee )k? .*
<body>
eiee )k? ) a

.*
<h1> to <h6>
eiee %)
.*
<p>
ei > B .& -> g p %&
<br />
e i b g4
79
<hr />
nT / g4

e n> p %&
>
-e > B+T%
<acronym>
D b +m* 4> p.
<abbr>
U* T 9 4 L
<address>
a 4> 4 L
<b>
k l
<bdo>
k . .*
<big>
8 k p
<blockquote>
g44 >% %&
<cite>
k i % ./ &
<code>
k mu ) 4 ./ &
<del>
k W . B ./ &
<dfn>
k ) * ./ &
<em>
l ./ &
<i>
k i % ./ &
<ins>
in ) k ./ &
<kbd>
< )* k ./ &
<pre>
> -4* k p.*
<q>
* n >% %&
<samp>
k mu ) 4 ./ &
<small>
9 k p 4 >% %&
<strong>
l k p.*
80
<sub>
+ skp k p.*
<sup>
s- skp k p.*
<tt>
i- k p.*
g44 > B+T%

<form>
g4 > B
<input />
i- l g44 >% %&
<textarea>
k e& g4 4 >% %&
<button>
g4 %&
<select>
D-) u s +k %&
<optgroup>
s ei LU D&g et
<option>
s ig ./ &
<label>
i- e? p.*
<fieldset>
* + e? - )* g4
<legend>
<fieldset> >% E )* .o& %& 4 .4 >%

%&
i >% > B+T%

<img />
i p 4
<map>
i > - n >% %&
<area />
i > - W &B L* U

g44 > B+T%
<a>

p > B
<link />
)k? + i )k? +

E B s -
81
s g44 > B+T%

<ul>
a) s p
<ol>
a)* s p
<li>
s i p
<dl>
) s p
<dt>
) s e * p
<dd>
* U* p
g4 > B+T%

<table>
g4 > B
<caption>
.o& %&
<th>
+ %) .4 >% %&
<tr>
/+ g44 >% %&
<td>
e + g44 >% %&
<thead>
%) ?
<tbody>
) ?
<tfoot>
?
<col />
e e L g44 >% %&
<colgroup>
gr- g44 >% %&
)k? s i L* U > B+T%

<style>
)k? s i p %&
<div>
)k? . . + g44 >% %&
i
82
<head>
)k? +m*4 4> p
<title>
)k? i p
<meta>
<base />
)k? i p
e o&+ i +s

e o& - )l %+
>% n >% %& + > B
[d / dr4i p % eiee ^-e u-

a+ L U e i
gr- &4 / M/ ]
83

HTML 4.0.1 Bangla Ebook by Faruk

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML 4.0.1 Bangla Ebook by Faruk

Загружено:

Авторское право:

Доступные форматы

1

" ag% & !'!"

o& )*p+ gr- o&+ i

i k n &

p4&4 /i 9 

E4 k  +  +  &  4    B E /    s 4 g9& /  ;  g9& /4i

%I J   % + +   i& (https://www.facebook.com/zamil.hossainsezan32)

e- u   E; uJ+ % .&9 o &4 / M/

&9 E  i  i / D 4 -9

 % + +   i a a Ln . +i + 

ang%  an4 9 8 ei i 

 C4     & .&  ;  

i +   W 98& . &  r +  + 

- .   bB  L>

._.s i > B(<style></style>)

'..!.o& >h4 i 

aL> &aL> & - M o& - ? >% 

^.!.? >%  <font>.</font> > B

aL> &-+ 4 o& - i >% 

aL> &- o& - 

aL> &-& o& -  g4

".!.  g4 (<table>...</table>)> B

aL> &-. o& -  >% 

aL> &-eB  o& - o >% 

aL> &-  eiee u

!..eiee <div> > B

aL> &- 4

aL> &-e  +T

eiee <   B

o& ) i n HTML-i E;?

+   p4r4 &

e  File n4 k  Save Ase k r  4 e  ui?) o- %-

e  File name:-e k index.html  index.htm e

 i E  e  b u  .& o-   4 u-  ./4 - -

) |D  e/  <head> o <body>   d +   ./4 - 0 ,-4*<4 p4 +   e

HTML Zr   B E bg     . 

!. eiee )k? (HTML Document)

eiee e? 4g g;>   4 mr-

Start Tag/Opening Tag .& Zr %&

eiee )k? pL  d a

 i api something.html/.htm Extension .& save 4 %

 i > B kt E d  + +&   / . 

 i > B b +

eTu +  content eT >%   %& di eT e   L* U   n

! .name eTu > % 

an   / E &<meta http-equiv= refresh content=3,http://www.iceschool.com>

.HTTP-EQUIV eTu > % 

e  )k? +    )k? +

>%  o +%   E & e  )k? +  ek     i +

e  o& - )l  %+ >% 

<style> o </style> > B >%   L>  )k?

  i a- . + , + *+ , > 

aL> &-  ) +  

.bgcolor e > %  ei eTu >%   o& - > g u?) 

^^   E  p      kt +*

% E   kt +m   F %

/.background e > %  ei eTu >%   o& - > g u?) i

o& >h4 i 

.jpegJoint Photographic Experts Group (e ek % .jpg )

B.text e > %  ei eTu >%   o& - +  k 

L* U  %& E

ei Attribute >%   %&E<body vlink=RED> ,e  Visited Link e    ./ 

.alink e > %  4*  E  u- +* s -  %&9 4  

" ag% & !'!"

o& )*p+ gr- o&+ i

i k n &

p4&4 /i 9

E4k + + & 4 B E / s 4 g9& / ; g9& /4i

%I J % + + i& (https://www.facebook.com/zamil.hossainsezan32)

e- u E; uJ+ % .&9 o &4 / M/

&9 E i i / D 4 -9

% + + i a a Ln . +i +

ang% an4 9 8 ei i

C4 & .& ;

i + W 98& . & r + +

- . bB L>

._.s i > B(<style></style>)

'..!.o& >h4 i

aL> &aL> & - M o& - ? >%

^.!.? >% <font>.</font> > B

aL> &-+ 4 o& - i >%

aL> &- o& -

aL> &-& o& - g4

".!. g4 (<table>...</table>)> B

aL> &-. o& - >%

aL> &-eB o& - o >%

aL> &- eiee u

!..eiee <div> > B

aL> &- 4

aL> &-e +T

eiee < B

o& ) i n HTML-i E;?

+ p4r4 &

e File n4 k Save Ase k r 4 e ui?) o- %-

e File name:-e k index.html index.htm e

i E e b u .& o- 4 u- ./4 - -

) |D e/ <head> o <body> d + ./4 - 0 ,-4*<4 p4 + e

HTML Zr B E bg .

!. eiee )k? (HTML Document)

eiee e? 4g g;> 4 mr-

Start Tag/Opening Tag .& Zr %&

eiee )k? pL d a

i api something.html/.htm Extension .& save 4 %

i > B kt E d + +& / .

i > B b +

eTu + content eT >% %& di eT e L* U n

! .name eTu > %

an / E &<meta http-equiv= refresh content=3,http://www.iceschool.com>

.HTTP-EQUIV eTu > %

e )k? + )k? +

>% o +% E & e )k? + ek i +

e o& - )l %+ >%

<style> o </style> > B >% L> )k?

i a- . + , + *+ , >

aL> &- ) +

.bgcolor e > % ei eTu >% o& - > g u?)

^^ E p kt +*

% E kt +m F %

/.background e > % ei eTu >% o& - > g u?) i

o& >h4 i

.jpegJoint Photographic Experts Group (e ek % .jpg )

B.text e > % ei eTu >% o& - + k

L* U %& E

ei Attribute >% %&E<body vlink=RED> ,e Visited Link e ./

.alink e > % 4 E u- + s - %&9 4

Attribute >% E

-> g > B (<p>.</p>):

align=left[)l %+ left align e >% o %]

e -> g D -> g /4 n4 -> g > B >%

<br> > B >% E & ei > B i b > B %& , U ei > B e i M s / n4 i

% & i s+ <pre>.</pre> > B > %

u- ./ -> g u- E s u+ +* / e k W "HTML

<acronym> > B > %

align: / as -4 4

Marquee > B > %

+ p4r4 &

aL> &- - M o& - ? >%

ii.Face eTu >%

)l !+ (size=e/ E .*)

+g eTu >% e ) .o& %

9 > B >% k s i -4* E & E

? > >%

u. %U + ? > >% ./ %