Professional Documents
Culture Documents
eiee
i-
(For All Users)
dl h r
(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
p p
m ! i
/
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 ]
+m*
dl % - r(https://www.facebook.com/faruk.ice09) -8 / 9 k;& i+ <
=.> & i e?) u i&
(ICE) B 4C4<& D*
B / / 4
ei i e a
Bi /9 e.
e-
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
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
aL> &-
aL> & )
+
+
'.!.)
+ (<body></body> > B)
'..bgcolor e > %
'..!.eiee-e
& >%
'..background e > %
aL> &-9&
aL> & 9& o&
- s g4
_.!.k s (Ordered List)
_..a) (Unordered List)
_..
s) s
! .!
! .!
! .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
10
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
)
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> .
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
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
14
! .> 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
> - 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?
'.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>
/.
> 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
B.
> B(<link>):
> B
.
+
+ > B(<base>)
: e o&+ i +s
> B
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
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
21
-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
bgcolor="rgb(0,255,0)"
Green
bgcolor="rgb(0,0,255)"
Blue
23
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
+*
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 >%
]
>%
%& 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 %
<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 %&
L* U %& ei
)
+ 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 E E s i n o9 > B > % %& Eg m %
26
b > B (<br>):
<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+( )
e > %
s+
eiee-e e L
s+,> (Enter Key), > -4*4 %& ZL e
s+ +C; 4 i
k W a4k
s+ +C; 4 %   >% 4 % E4g   >% %,44g
s+ +C; %E
<p> Java script is an    interpreted object oriented promramming.</p>e/ 4
s+ g4 %
<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>
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>
nT
/ g4<hr>
> B
g4
o&- nT
/ g4 n <hr> > B >% %& e
D > B
i m eTug
>% e u -4* E &
29
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 & %
<!--Your Comment Here-->
e u. %U
./<html>
<body>
<h1> First Heading</h1> <!--This is first heading-->
<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> <!--This is a paragraph about html-->
</body>
</html>
) i
% s
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>
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
<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>
<font face=arial size=+3 > www.webtechnologyblog.com </font><br>
<font face=arial size=+4 > www.webtechnologyblog.com </font><br>
</body>
</html>
p.*
33
*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
?) 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)]
36
</body>
</html>
p.*
bB4
μ ;
μ
ak
<
>
&
+
/> B4
"
<
>
&
®
©
μ
bB4
#quot;
<
>
&
®
©
μ
37
♥
♠
♣
♦
♥
♠
♣
♦
.
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
39
) |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
Apples
Bananas
Apples
Bananas
Apples
Bananas
Start eTu .& i0 nE &< m %4 s Zr E & E41
p.*:
4.Buy Food
5.Enroll in College
6.Get a Degree
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.*
Apples
Bananas
Apples
Bananas
Apples
Bananas
s) s
43
p.*
44
) i
% s
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
.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
k W i >% 4 % align eTu m k > g >% %&
*align=top[
k as i u- . ]
46
+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
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
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
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
+4*4
!. g4 - E i
./ 4 I4 9 ?
.
./ +I
.&9 ?
.) u )
.
./ - I 9 ?
'.- + i
% s - o
./ +
o i )k I 9 ?
!_!^'^!_ e
54
b u 4 ./ E
56
D*U<& n >h4 eTug %- align, width, border, cellspacing, cellpadding e
-k ]
>% ut ekt
++& I
[ d width eTu >% b u 4
p.* a* J
E - )
+ - &B 8
p.*4 %]
57
p.*
p.*
58
<table cellpading=2>
59
60
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
.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>
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 %
) |DU
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>]
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-
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
multiple eTu L> - e aL D& +k sE B .4 -
E<select multiple=yes>
<option value="bl">Black</option>
<option value="wh">White</option>
<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>
70
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
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
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
u-
76
u-
77
</div>
</body>
</html>
78
u-
U*
+ L U > B+T%
<!DOCTYPE>
<html>
<body>
<h1> to <h6>
eiee
%)
.*
<p>
<br />
e i
b g4
79
<hr />
nT / g4
<!--...-->
e n> p %&
>
-e > B+T%
<acronym>
<abbr>
<address>
<b>
k l
<bdo>
k . .*
<big>
8 k p
<blockquote>
<cite>
<code>
<del>
k W . B ./ &
<dfn>
<em>
l ./ &
<i>
<ins>
<kbd>
<pre>
<q>
<samp>
<small>
<strong>
l
k p.*
80
<sub>
<sup>
<tt>
<input />
<textarea>
<button>
g4 %&
<select>
<optgroup>
<option>
<label>
<fieldset>
<legend>
i p 4
<map>
<area />
g44 > B+T%
<a>
p > B
<link />
81
a) s p
<ol>
a)* s p
<li>
s i p
<dl>
) s p
<dt>
) s e * p
<dd>
* U* p
<caption>
<th>
<tr>
<td>
<thead>
%) ?
<tbody>
<tfoot>
?
<col />
<colgroup>
)k? s i p %&
<div>
i
82
<head>
<title>
)k? i p
<meta>
<base />
)k? i p
83