HTML Tutorial in Bangla

eiee u
| ( HTML Tut or i al i n

Bangl a)
eiee u

en (Elements)

( Tag)
a
u ( Attributes)
ac ( Paragraph)

(Heading)

i b

(List)

n (Font)
(Link)
i-i
i-i
e
i (Entity)
n (Comments)
! (Images)
(Tables)
(Colors)

g
un (Background)
$ (Frame)
%u (Layout)
u (Embed Music)
'o (Vedio)
(body)
' (Div)

l o i

o p

+++++
, (Form)
k l
k e.
o

%/
(Upload)
0/
u s
2
:

o.
%
s#$ eiee u

u
e
eiee e a3, 4c Hypertext Markup Language.e

p
g

.,
, %/

o. '/
4 4 ei
+
% '
'
2 4 e
2
2 +4
e
2i %/ e
o. / 67 /
e/ 8 +e+e+ 2
4 9 / % p

/

/
'
skp /

e
2 e a
p %/
9 o. /
i
4o.
= 4+>
PHP+Database 2 %/ /=

, ?
+ Driven WebSite 67 /

webcoachbd.com e u
.
/@ %/

. eiee 2 /

8 +
eiee 2(a3,
% eiee

3
. 2)

/
Notepad open 67 4
84
i
/
.i / a
a
'
n e +i
8 Netbeans or Dreamweaver.% 8 0o.'
e
a'j
3

4
4 e2i /

eiee 2 8 b '
'

eiee en(Elements)
eiee
(Tag)
eiee a
u (Attribute)
e >. ,
/ /

s
.
4 >>
eiee e
& u
( HTML El ement s)
2
:

E+ %
en+(Elements):
en+ 4 HTML e ndn

HTML page e p k a ,

en+
en+

(tag) e
H 67 HTML en a s
+! 8
%/

2 +
Web
page e

4 /
Paragraph text,

,' i
+ ! i elements ei /
e en(Element) a . I

(opening tag) ,en e H
J a e > n

(closing tag)
1. <p> - opening paragraph tag
2. Element Content - paragraph words
3. </p> - closing tag
p Web page e a p.
7.
en(Element) 3
e
4
L: HTML,head, title e body
elements e
>. %

4.!
<html> Element...</html>
+
p3 HTML 2
HTML b p3 e > less than o greater than ( < >) h 4. 8:
<html>
! 2
/ > </html>
4 a3,
% <html> Welcome to Bangladesh </html>
Welcome to Bangladesh ei 2
Web page e p 4%
2 +4 Notepad e 2 Web page 67
/
e % Notepad Open 4 p3
start All Programs > Accessories >Notepad

/ Notepad 4
/ m
2
1.<html>
2.Welcome to Bangladesh
3.</html>
e'
2
/ Notepad e
i 4 save e k
/ index.html
save
+'

i Double click open
2
8 2
Browser e open 4.! 2 +4 e
web
Page 67 4.
<head> element
e kn head, kn +sn E H

. <head> elements 8
/ header , head
elements e H
2

+
+ b
u
p, 4.
%

i en e
H p
/

<title> element
<head> en e
R <title> en
2 4. 8i b
title elements e opening (<title>)e
closing(</title>) tag e H 2
4.
browser e
i

4+
p, 4.
1.<html>
2.<head>
3.<title> My WebPage!</title>
4.</head>
5.</html>
<body> element
body element 8
web page e p, + >.
H
8 + >.
%
web page e 2

i
body element
e H
2 4.
1.<html>
2.<head>
3.<title>My WebPage!</title>
4.</head>
5.<body>
6.Hello World! All my content goes here!
7.</body>
8.</html>
ei

/
/ /s .html extension +' 8
b
u
2 e 67 p3 o /
2
eiee +# u
( HTML Tag Tut or i al i n Bangl a)
2
:

E+ %
82 %/ eiee kn u/ 4 ,

4
+ +. %/
2 /
e e '
p, 4 8
paragraph 2 paragraph e
, 2 e

e pH
a %!
.

(opening tag)
2.H
J a(contents)
.>

(closing tag)
eiee
e
H %/ web page e %/
/!n
,
/
S
/

1.<p>A Paragraph Tag</p>

e T, !
4
ak 4o.
u %

2

4
1.<body> Body Tag (acts as a content shell)

2.<p>Paragraph Tag</p>
3.<h2>Heading Tag</h2>
4.<b>Bold Tag</b>
5.<i>Italic Tag</i>
6.</body>
CLOSI NG +# 23 +#:
+#:
! !
%! 8
closing tag
p
i

en H

+
4c line break tag
e
<br/> / p

4 8
> '
4

4 a3,
% e
i 2

a/
i 4 2

e
4

4
%
!
%! 8
>'
4

4. 8 i
, i/

1.<img src="/../mypic.jpg" /> -- Image Tag
2.<br /> -- Line Break Tag
3.<input type="text" size="12" /> -- Input Field
p,:
--Line Break--
eiee eT6u u

( HTML At t r i but e t ut or i al i n Bangl a)
2
:

E+ %

+mp+

eu 4

4. H 8 %
e 67 attributes
4

e ps, uc
I /
% attributes value . e ps o uc

/

1.<tag attributes ="value" attributes ="value">
1.<table width="150" height="100">
Class
id attribute e 4
p
. ei !
'n
%! Class
id attribute +
+ in

'
i /,
an
e '
%! >
'
skp ,+e+e+ (e
+m, / u

e %

4.!
1.<p>Paragraph type 1 Italics</p>
2.<p>Paragraph type 2 Bold</p>
p,
Paragraph type 1 Italics
Paragraph type 2 Bold
eiee 9: eT6u

eT6u ( HTML NAME ATTRI BUTE)
BUTE)
Name attribute Class
id attribute 4 'n Name attribute p
.i ,
a
i/ in +
3 2
8
.
1.<input type="text" name="TextField" />
p,:
ei attribute TextField p, >. '
i /,
an
e a a
(javascript , css)
eiee i
eT6u
eT6u ( HTMLL- TI TLE ATTRI BUTES)
ei attribute
eiee en e

e !
popup k 8k e '
8k 82 o / 9

u/
u+
2
4. 2 !
popup k p,
<h2 title="Hello There!">Titled Heading Tag</h2>
p,
Ti t l ed Headi ng Tag
eiee ei: eT6u
eT6u ( HTMLL - ALI GN ATTRI BUTES)
8 %/ en +
n
as
/,

align attribute . /
align 'n '
8
. 8 left, right & center l 4+
left align ,
3

1.<h2 align="center">Centered Heading</h2>
Cent er ed Headi ng
1.<h2 align="left">Left aligned heading</h2>
2.<h2 align="center">Centered Heading</h2>
3.<h2 align="right">Right aligned heading</h2>
Lef t al i gned headi ng

Cent er ed headi ng
Ri ght al i gned headi ng
GENERI C ATTRI BUTES:
Attribute . o / +m',

s
i
8
. ! eiu .
4 8
a HTML Tag e +
3
+4 4

8
.
Attribute Options
Function
align
right, left, center
+
n
(Horizontally) aligns tags
valign
top, middle, bottom
um(Vertically) aligns tags
bgcolor
numeric, hexadecimal, RGB

Element e background color ,
values
background URL
Background image u/ element ,

Element e Name 8
Cascading Style Sheets (css)
id
4

7 , a8
.7
+
3 4

4.
Element e ^7

+ 8
Cascading Style Sheets (css)
class
4

7 , a8
.7
+
3 4

4.
width
Numeric Value
Tables, images, or table cells e width ,
height
Numeric Value
Tables, images, or table cells e height ,
title
4

7 , a8
.7
%/
elements e "Pop-up" title
eiee A+gC u
( HTML Par agr aph Tut or i al i n Bangl a)
2
:

E+ %

2

p

kt /

g

4

4. e 2i +
H
e E
<p>

ac (/

g
) ,
4. ei
4

/

g
k u/ a

i
+J` 4.
1.<p>Avoid losing floppy disks with important school...</p>
2.<p>For instance, let's say you had a HUGE school...</p>
p,:
Avoid losing floppy disks with important school/work projects on them. Use
the web
to keep your content so you can access it from anywhere in the world. It's
also a quick
way to write reminders or notes to yourself. With simple html skills, (the
ones you have
gained so far)it is easy.
For instance, let's say you had a HUGE school or work project to complete.
Off hand,
the easiest way to transfer the documents from your house could be a 3.5"
floppy disk.
However, there is an alternative. Place your documents, photos, essays, or
videos onto
your web server and access them from anywhere in the world.
eiee A+gC
JUSTI FI CATI ON)
A+gC- sC
H: ( HTML PARAGRAPH JUSTI
o
, kn e %
8'

2
justify + +

'
eiee e justify 4

ei
/

1.<p align="justify">For instance, let's say you had a HUGE school or
work...</p>
p,:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest
way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an
alternative. Place your documents, photos, essays, or videos onto your web server and access
them from anywhere in the world.
eiee A+gC
CENTERI NG)
A+gC- KK ( HTML PARAGRAPH CENTERI
o
, kn e /

g
e p
i display window e H as

1.<p align="center">For instance, let's say you had a HUGE school or
work...</p>
p,:
eiee A+gC
ALI GN RI GHT)
A+gC- ei: L
: ( HTML PARAGRAPH ALI
o
, kn e /

g
e p
i display window e
/
as

1.<p align="right">For instance, let's say you had a HUGE school or
work...</p>
p,:
eiee 9MLN u

( HTML Headi ng Tut or i al i n Bangl a)
2
:

E+ %
eiee e 4

+
H

i
+

i 4+
2
8
. 4
e H
2
k bold 4+
p,
4. e %
8
4 e m u/ ', 4 m
1 4 6 e H +7
d e2
1 +. @ e 6 +.
!
4
1.<body>
2.<h1>Headings</h1>
3.<h2>are</h2>
4.<h3>great</h3>
5.<h4>for</h4>
6.<h5>titles</h5>
7.<h6>and subtitles</h6>
8.</body>
Headings
ar e
GREAT
f or
titles
and subtitles
k
>. ei8 p 4 e s
i b option %! e
4 e built in attribute 4 2
+.
a

i b 4. 8
.
9MLN e6N A+gC e e
t 6+6M:
6+6M:
%
4 e paragraph e+
3 4
/
u
4 .
4
1.<h1 align="center">Essay Example</h1>
2.<p>Avoid losing floppy disks with important school/work projects...</p>
3.<p>For instance, let's say you had a
4.HUGE school or work project to complete.
Off ...</p>
p,:
Essay Example
Avoid losing floppy disks with important school/work projects on them. Use the web to keep
your content so you can access it from anywhere in the world. It's also a quick way to write
reminders or notes to yourself. With simple html skills, (the ones you have gained so far by
now) it is easy.
eiee i: 9b u

( HTML Li ne Br eak)
2
:

E+ %
%
% 2!
i b
a
4 e 'n
i b
e

i > %/
a
i 4 2

+
4
8

eiee
e

d

i b h
4.
i b
paragraph !
@
o a
HTML element(tables, lists, and
headings)e
4

4.
1.<p>
2.Will Mateson<font color="red"><br/></font>
3.Box 61<font color="red"><br /></font>
4.Cleveland, Ohio<font color="red"><br/></font>
5.</p>
p,:
i b e +
4
8 I address 67 /

Will Mateson
Box 61
Cleveland, Ohio
%
I +
p f
>
/

1.<p>Sincerely,<br />
2.<br />
3.<br />
4.Kevin Sanders<br />
5.Vice President</p>
p,:
Sincerely,
Kevin
Vice President
Sanders
%o e
>.
2
p.
8
i b
e
closing tag e p.
i
HTML HORI ZONTAL RULE:
RULE:
Horizontal rule <hr/>

p

4 <hr/>
4
screen e u/ +
n

i p,
line break tag e Horizontal rule tag e
closing tag i
1.<hr />
2.Use
3.<hr /><hr />

4.Them
5.<hr />
6.Sparingly
7.<hr />
p,:
Use
Them
Sparingly
Horizontal rule
gn/

>. +4 p

kt 4

4.
1.<font color="red"><hr /></font>
2.<p>1. "The Hobbit", JRR Tolkein.<br />
3.2. "The Fellowship of the Ring" JRR Tolkein.</p>
p,:
1.
"The
Hobbit",
2. "The Fellowship of the Ring" JRR Tolkein.
p,:
Goal s
1. Find a Job
2. Get Money
3. Move Out
Start attributes . ic

8
.7 m 4 s
8
.
1.<h4 align="center">Goals</h4>
2.<ol start="4" >
JRR
Tolkein.
3.<li>Buy Food</li>
4.<li>Enroll in College</li>
5.<li>Get a Degree</li>
6.</ol>
p,:
Goal s
4.Buy Food
5.Enroll in College
6.Get a Degree
eiee k s

s ( HTML ORDERED LI STS
STS CONTI NUED)
%o
p
H

4 s(ordered list) .! e
+
H
1,2,3 m /,

m
T, 4 /

@ 4

!
4
type attribute 4
m /,
4.
1.<ol type="a">
2.<ol type="A">
3.<ol type="i">
4.<ol type="I">
Or der ed Li st Types:
Lower-Case Letters
Upper-Case Letters
Lower-Case Numerals Upper-Case Numerals
a. Find a Job
A. Find a Job
i.
Find a Job
I.
Find a Job
b. Get Money
B. Get Money
ii.
Get Money
II.
Get Money
c. Move Out
C. Move Out
iii.
Move Out
III.
Move Out
eiee 6:k s

s ( HTML UNORDERED LI STS)
STS)
<ul>
+
4
8 s 67
4. s %
p
8 1. squares 2.discs 3.circles default
4+
+
H
full discs
4

4.
1.<h4 align="center">Shopping List</h4>
2.<ul>
3.<li>Milk</li>
4.<li>Toilet Paper</li>
5.<li>Cereal</li>
6.<li>Bread</li>
7.</ul>
p,:
Shoppi ng Li st
Milk
Toilet Paper
Cereal
Bread
%
type attributes 4
unordered list e a
4
/

<ul type="square">
<ul> type="dics">
<ul> type="circle">
type="square"
type="disc"
type="circle"
Milk
Milk
Milk
Toilet Paper
Toilet Paper
Toilet Paper
Cereal
Cereal
Cereal
Bread
Bread
Bread
eiee 9LC
:H: s
s ( HTML DEFI NI TI ON LI STS)
STS)
Definition list e 4
+
H
a'H
2 /
i <dl> tag
4
Definition list 67
4. 8

Define a3,
% +j
.
i
bold %
2

u Definition list tag e H %o tag an,'k
+
4
1. <dt> 2. <dd>
<dl> tag: s e ei
4

4.
<dt> tag: 8
+j
.(Define)
ei
4

2
4.
<dd> tag: <dt> tag e 8
2
4.!
+m, e2
%

4.
1.<dl>
2.<dt><b>Fromage</b></dt>
3.<dd>French word for cheese.</dd>

4.<dt><b>Voiture</b></dt>
5.<dd>French word for car.</dd>
6.</dt>
p,:
Fromage
French
Voiture
French word for car.
word
for
cheese.
eiee 9L u
( HTML Col or code)
2
:

E+ %
Color set
/d %! +
H
!

8

, +

,
, +, 7 eiee e

value 2

+. +
+ e
2
4. 16 E

2
4
XY
XY 9Z :
:
Black
Yellow
Red
Maroon
Gray
Lime
Green
Olive
Silver
Aqua
Blue
Navy
White
Fuchsia
Purple
Teal
eieeeiee- N Ad$ \6 : ( HTMLL - COLORI NG SYSTEM: RGB VALUE)

% %/

/ web design e HTML rgb 4
/
,

Non-IE browser, HTML
rgb +
/
,
%/

8 CSS 2

4 %/
u ei >. +mn

Red, Green e Blue ei

+` 4c rgb p
0(82

3

) 4 255(82 9

+m, 3
) rgb 4 rgb(RED,GREEN,BLUE)
RED, GREEN e6N BLUE e ::
::
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)"
Red
Green
Blue
eieeeiee- N Ad$:
Ad$:9Mk
La ( HTMLL - COLORI NG SYSTEM: HEXADECI MAL)
p3 p3 Hexadecimal system R e
ei system e o I practice

H >. a
+4 4. 8
ei Hexadecimal system + kt g48
e 4 m Hexadecimal system in

standard color
Hexadecimal 4 6 digit

u/s
/ p3 digit(RR), Red value , /, digit(GG),
Green value , e +,> digit(BB), Blue value ,
eiee 9Mk
La
9Mk
La N
bgcolor="#RRGGBB"
eiee - N 9L ( HTMLL - COLOR CODE: BREAKI NG THE CODE)
CODE)
2

4.! '
T, Hexadecimal system e Numbering system H, 16 digit e un7

Decimal
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

i T, m 4+
4

4. ei T, / m /
n
4. e u
4 .
4
e 6s6 9Mk
La:
9Mk
La:
bgcolor="#FFFFFF"
e2
"F" 4c +
c, /
e ei

("#FFFFFF") +

, >. s
%

4.!
9Mk
La at:
(15 * 16) + (15) = 255
u/ +=t
s p3 F e
(15) 16 d

/,
+
3 8
4 255
8
p
3

kt +,
c %o u
4 .
4
u
4:
u
4
bgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112

05(BB - Blue)
(0 * 16) + (5) = 5
eiee C& u

( HTML Font Tut or i al i n Bangl a)
2
:

E+ %
<font>

4
o +
i k s
i, +
i e

8

4. size, color e face attributes

4
%/ n
s
i /
<basefont>

4
/ + k ei s
i, +
i e

e +
8
.
<font> e <basefont>

4

+e+e+(+e+e+ u
.
%

4.!)
4

u
C& \ ( FONT SI ZE)
Size attribute e +
4
8 n e +
i I
4. n e %
e g48

4c 1(+. !
) 4 7(+.
@) n e l %
4c 3
1.<p>
2.<font size="5">Here is a size 5 font</font>
3.</p>{}
p,:
Here is a size 5 font.

C& N ( FONT COLOR)

attribute e +
48 font e color +
4.
1.<font color="#990000">This text is hexcolor #990000</font>
2.<br />
3.<font color="red">This text is red</font>
p,:
This text is hexcolor #990000
This text is red
C& 9Ca ( FONT FACE)
n face e kt +, 4o.
u
%/
+s e H,
n is .

3

4 %/ 9 n 2
/

e
/, l 4+
Times New Roman n 2 /

1.<p>
2.<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
3.has had its font...</font>
4.</p>
p,:
This paragraph has had its font formatted by the font tag!
96aC& ( BASEFONT)
Basefont
e +
4
8 %/ o / l n + /
basefont
4

+I /3 2

4
01.<html>
02.<body>
03.<basefont size="2"
04.<p>This paragraph
07.</basefont>
08.</body>
09.</html>
color="green">
has had its font...</p>
p,:
This
paragraph
has
had
its
font
formatted
This
paragraph
has
had
its
font
formatted
This paragraph has had its font formatted by the basefont tag!
by
by
the
the
basefont
basefont
>
i font
basefont
4

+e+e+ (+e+e+ u
.
%

4.!) 4

'

Attributes: Review
Attribute= "Value"
Description
size=
"Num. Value 1-7"
Size of your text, 7 is biggest
color=
"rgb,name,or hexidecimal" Change font color
face=
"name of font"
Change the font type
pf ak
sn si:
si:
n
s
i 8
H s
i
8
.
1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
2.your font to achieve a desired look.</p>
p,:
tag!
tag!
ustomize your font to achieve a desired look.
eiee N u

( HTML Li nk)
2
:

E+ %
e
H o +
i
H k
7 +8
+s
/ 4. anchor tag e +
4
8 +8
. 67
4.
k , i, , e +
4
8o 67
8
.
eieeeiee- MiA
kk | HTMLL- HYPERTEXT REFERENCE ( HREF)
href attribute e e
n , 8
+
3
+
J/,
Hypertext reference 4 /
Internal, Local, Global
Internal: ei / H 67 4o.
Local : %/
web site e '
/ +
3 67 4o.
Global: %/
web site e
4 a web site e +
3 67 4o.
Internal - href="#anchorname"
Local - href="/../pics/picturefile.jpg"
Global - href="http://www.tizag.com/"
eiee 9kk N

N ( HTMLL - TEXT LI NKS)
<a> e </a> tag d

83
t +8
e >
R
. href attribute e +
4
8
H +8
s
/ 4

H,
4. href attribute opening tag e H
2 4. opening e closing tag e H 2

! ,

/ web / 4+
2
8

1.<a href="http://www.tizag.com/" target="_blank" >Tizag Home</a>
2.<a href="http://www.espn.com/" target="_blank" >ESPN Home</a>
3.<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
p,: Global Link

Tizag Home ESPN Home Yahoo Home
eiee N
#l ( HTMLL - LI NK TARGET)
Target attribute d

R
., 4. / 2 4 /J3 window a3
2 4 ei browser window
target=" _blank"
_self"
browser window page 2

current window page Load .
_parent" Loads new page into a frame that is superior to where the link lies
_top"
+ frames cancel , current browser window page Load .
e
u
4 .
4
8 '
%/ p. web site ESPN.COM e +
3 4. Target attribute
e'
browser 8k 4. 8 ESPN.COM web site 2

+. + window +4 open 4 8

, %/
web site e +
3 3
/

1.<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>
p,: _blank Target:

ESPN.COM
eiee i
i u
( HTML E mai l )
2
:

E+ %
eiee ii e %/ eiee standard anchor tag <a>

4

/ href attribute , +

+
h
/ inverted comma e H
p ii I

<a href= "mailto: abc@mail.com" >Email Example</a>

p,:
Email Example
a$k eiee i
i 9L:
9L:
%/ ii I

. ak >. 8
/
8
4c 1. subject 2.body
Subject - ii e subject e %/ i 8
information +
4 /

Body - ii e body %/ i information +
4 /

<a href= "mailto:
a@b.com?subject=Web Page Email&body=This email
is from your website" >
2nd Email Example</a>
e'
8
2
4 82 u ei ii u/ k 2 subject e body +
8
4 8
8
%/ (Subject e body ) ul2

e e
+H
%!
4 %/ e
R /
8 %/

! i %/
o +
i 3 %+
a
u%a
3
p,:
2nd Email Example
eiee e: i
i N ( HTML Emai l Li nk, Anchor )
2
:

E+ %
ii 67
+4 8 %/
u %/
site e Email ii e
H
/

+2
8 >.

Email /
S
+ >. ul2 /

<a href="mailto: ferdous@yahoo.com?subject=Feedback" > Ferdous@yahoo.com</a>
p,:
mailto: ferdous@webcoachbd.com?subject=feedback
a +. 4

7 +H,
Email 2 .
4.
mailto: ferdous@webcoachbd.com?subject=feedback
<a href="mailto: ferdous@webcoachbd.com?subject=Feedback&body=Sweet site!">
ferdous@ webcoachbd.com</a>
p,: Complete Email:
mailto: ferdous@webcoachbd.com?subject=feedback&body
=sweet site!
eiee
u
(HTML-download links)

u

i place
k e
u
image link 4
>. e 4.
/@+kt thumbnail 4

u /, + s
%

4.!
HTML Code:
<a href="http://www.webcoachbd.com/pics/htmlT/blanktext.zip">Text Document</a>
p,: Download a Text Document:
Text Document
eiee LCl N
N ( HTMLL - DEFAULT LI NKS; BASE)
<base>
eiee head element e H
2
4.e'
default URL +
4. / +
%/
4
/ <base> tag s
/ /

view source
print?
1.<head>
2.<base href="http://www.webcoachbd.com/">
3.</head>
eiee e:i u

( HTML Ent i t i es Tut or i al i n Bangl a)
2
:

E+ %
e
i 4 symbol e
l >. a symbol 8
, , /
i , 6 d
p i
o / p,
4 e
i >.
4
p e
i e a 3
8:
1.p Entity e/
+n (ampersand) . 4.- &
2.
/ Entity e
copy
3.> semicolon 8
4.-;
Ai
&copyet 2
67 - Copyright symbol.
a$k 9sa
%
/

g

e 4
e H 2! b
u
H b H e s+ /
e /

%
e
i 4
ak s+ /
u
4 .
4
1.<p>Everything that goes up, must come down!</p>
p,:
Everything that goes up, must come down!
%
eiee e + e g
h 4

67 e+ h o / e 2

i e
i 4

4
1.<p>
2.Less than - < <br />
3.Greater than - > <br />
4.Body tag - <body>
5.</p>
p,:
Less
Greater
Body tag - <body>
than
than
<
>
eiee
& 6 m6+ ( HTML Comment s Tut or i al i n Bangl a)
2
:

E+ %
n %/
o '/
4+
e e /3 2
8
d

%/ e
nt /
8
n
n
i b
u
d

sk
4

%

ignore
1. eiee kn e ' note 2
reminder 2
2.skp
8
'
skp e ! n
n p.
.
3.Temporarily comment p.
8k /8,n eiee en a+m, 3


<img src="http://www.webcoachbd.com/pics/ferdousSugar.jpg" height="100"
width="200"/>
a

n eo opening tag e closing tag %!

82 eiee in p,

2 n
uI.
<input type="text" size="12" />
p,: Input Field:
eiee 26 u

( HTML I mages Tut or i al i n Bangl a)
2
:

E+ %
! e
t /, >. e +I 4
%

4 <img/>
4
%
o / e i . %+
/

1.<img src="/sunset.gif" />
p,:
eieeeiee- 26 SRC:

Src attribute t /, >. Src e a3, +
+,(source) a3,
% i u%a
82
picture file as
u/
. %
i +
+, , s /

1. Standard URL 4

(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)
2. web server e file /
%/

(src="/../sunset.gif")
ei picture file e location e +
3 .eiee file e location e +m, %!
URL Types:
Local Src
Location Description
src="/sunset.gif"
picture file e .html file ei directory as

src="/../sunset.gif"
picture file /, directory as

.html file
src="/../pics/sunset.gif"
pic directory e picture file /, directory as

.html file e

eieeeiee- ALTERNATI VE ATTRI BUTE:

BUTE:
Alt attribute , s a
' k a3,
% 82 i p, 4.
2 a
' k p, 4. i p,

4o.

4 /

i ` 4. !
browser i
i 2 /
c
1.<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful

Sunset" />
p,:
eieeeiee- 26 HEI GHT e6N WI DTH:

i height e width I
height e width attribute
4

4.
1.<img src="/sunset.gif" height="50" width="100">
p,:
eieeeiee- VERTI CALLY e6N HORI ZONTALLY ALI GN 26:

26:
Align e valign attribute 4
i as
H,
/

1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center
u
4 .
4
1.<p>This is paragraph 1, yes it is...</p>

2.<p>
3.<img src="/sunset.gif" align="right">
4.The image will appear along the...isn't it?
5.</p>
6.<p>This is the third paragraph that appears...</p>
p,:
This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this
image alignment works.

The image will appear along the right hand side
of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the
specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be
perfect. But we aren't talking about that, so it's rather a waste, isn't it? This is the third paragraph
that appears below the paragraph with the image!
eieeeiee- i

N Ma
6 6+6M
6+6M:
6M:
i 4+
4

8
.
1.<a href="http://www.webcoachbd.com/">
2.<img src="/sunset.gif">
3.</a>
p,:
eieeeiee- THUMBNAI LS:

Thumbnails 4 !
+
i i 8
@, '

i +
3 ei
H picture quality k

8
.Thumbnails e
m
i 8
i 4+

1.<a href="/sunset.gif">
2.<img src="/thmb_sunset.gif">
3.</a>
eiee 96 u

( HTML Tabl es Tut or i al i n Bangl a)
2
:

E+ %
4 Horizontal +
e vertical

+ e
tabular data p, kt a t /, kn en
.nt o.
i

! e
%
t /, +
e
in
+ cell + eiee
<table>
. 4. e </table>
. > 4.
1.<tr>
Horizontal +
,
2 <td>
9 Horizontal +
data cell ,
3 <th>
data cell e heading 4+

4 <tfoot>
footer 8

4
4.
1.<table border="1">
2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
4.</table>
p,:
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
a
:g
a e6N

6s:
6s:
Rowspan
4
a
+
s
e colspan
4
a

s

4. %/ 8

header

4 <th>

4
4 <th>

4
default 4+
header
l
%
2

01.<table border="1">
02.<tr>
03.<th>Column 1</th>
06.</tr>
07.<tr><td rowspan="2">Row 1 Cell 1</td>
08.<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
10.<tr><td colspan="3">Row 3 Cell 1</td></tr>
11.</table>
p,:
Row 1 Cell 1 Row 1 Cell 2
CELL PADDI NG e6N SPACI NG

e2
cellpadding
R
. ,
e H H
J a (2
, +2
) e H s+ (space)

a e cellspacing

R
. cell e H s+(space)

a
01.<table border="1" cellspacing="10"
02.bgcolor="rgb(0,255,0)">
03.<tr>
06.</tr>
09.</table>
p,:
Column 1
Column 2
1.<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">

2.<tr>
3.<th>Column 1</th>
4.<th>Column 2</th>
5.</tr>
8.</table>
p,:
Column 1
Column 2
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
eiee 6+gu&L N u

( HTML Backgr ound Col or s Tut or i al
i n Bangl a)
2
:

E+ %
bgcolor eu >'
o / e
g
un .nt Bgcolor eu a eiee

e H
4

8
. +. '
4. <body> e <table>
e H
4
ak 4+

g
un s
i
i +e+e+
g
un(CSS u
.
%

4.!) 2 /

S:
S
<tagname bgcolor ="value">
1.<body bgcolor="Silver">
2.<p>We set the background of this paragraph to be silver. The body tag is
3.where you change the pages background. Now continue the lesson to
4.learn more about adding background colors in your HTML!
5.</p>
6.</body>
p,:
We set the background of this paragraph to be silver. The body tag is where you change the
pages background. Now continue the lesson to learn more about adding background colors in
your HTML!
96
6+gu&L e 9x# :
01.<table bgcolor="lime" border="1"><tr>

02.<td>A lime colored table background using color names.</td>
03.</tr></table>
04.
05.
06.<table bgcolor="#ff0000" border="1"><tr>
07.<td>A red colored table background using hexadecimal values
"#FF0000".</td>
08.</tr></table>
09.
10.
11.<table bgcolor="rgb(0, 0, 255)" border="1"><tr>
12.<td>A blue colored table background using RGB values "rgb(0, 0,
255)".</td>
13.</tr></table>
p,:
A lime colored table background using color names.
A red colored table background using hexadecimal values "#FF0000".
A blue colored table background using RGB values "rgb(0, 0, 255)".
96
a e6N

9x# :
:
1.<table>
2.<tr bgcolor="#FFFF00"><td>This
3.<tr bgcolor="#AAAAAA"><td>This
8.</table>
Row
Row
Row
Row
Row
Row
is
is
is
is
is
is
Yellow!</td></tr>
Gray!</td></tr>
Yellow!</td></tr>
Gray!</td></tr>
Yellow!</td></tr>
Gray!</td></tr>
p,:
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
e
t 6+gu&L COLOR e6N FONT COLOR:
1.<table bgcolor="#000000">
2.<tr><td bgcolor="#009900">
3.<font color="#FFFF00" align="right">Green Bay</font></td>
4.<td><font color="#FFFFFF">13</font></td></tr>
5.<tr><td bgcolor="#0000FF">
6.<font color="#DDDDDD" align="right">New England</font></td>
7.<td><font color="#FFFFFF">27</font></td></tr>
8.</table>
p,:
Green Bay 13
New England 27
1.<table bgcolor="#777777">
2.<tr><td>
3.<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">
4.This paragraph tag has...
5.</font></p>
6.</td></tr>
7.</table>
p,:
This paragraph tag has a gray background with green colored font. You should see Monotype
Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted
as standard fonts.
eiee 6+gu&L u

( HTML Backgr ound Tut or i al i n
Bangl a)
2
:

E+ %

g
un eu e +
4
8 eiee i
g
un i 4+
2

8
.
1.<table height="50" width="100"
2.background="http://www.tizag.com/pics/htmlT/background.jpg" >
3.<tr><td>This table has a background image</td></tr>
4.</table>
p,:
This table has
a background
image
eieeeiee- 6+gu&L A:
A:
u/ u
4 2
.! 8 e %
! %
+

++
4. 8 e %
! %

. @ 4.
g
un ! / 4
2.background="http://www.tizag.com/pics/htmlT/background.jpg" >
3.<tr><td>This table has a background image</td></tr>
4.</table>
p,:
This table has a background image
eieeeiee- A+:lL 6+gu&L
'n
e +yo.
. 'n /

,
g
un ! e
n/
n
g
un ! 67
8
.
n/
n i

i gif
2 4 jpeg .
2.background="http://www.tizag.com/pics/htmlT/pattern.jpg" >
3.<tr><td>This table has a background patterned image</td></tr>
4.</table>
p,:
1.<table background="http://www.tizag.com/pics/htmlT/transparent.gif" >

2.<tr><td>This table has a red transparent background image</td></tr>
3.</table>
p,:
eiee 9y u

( HTML Fr ame)
2
:

E+ %
$ e
H ei +. ei b
u
uin
a
eiee kn p,
8
.
eieeeiee- A GENERI C FRAME PAGE:
PAGE:
$ 4
4 e $ e % e $ e
n 82 u k 2 +i o / n
/ 2

1.<html>
2.<head>
3.</head>
4.<frameset cols="30%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">
7.</frameset>
8.</html>
p,:
e2
k
frameset e
e
parent tag 8
$ page e characteristics , /J3 /J3 $frameset e H
, 3

frameset cols="#%, *"- Cols(column) 8
$ e width , u/ u
4 %
(1st column)
,
! 8
total page e 30% e "*", e a3, total page e 70% content(2nd column) , 4.
frame src="/" o / e
$
4.
6+: 6 i
9x# :
:
1.<html><head></head>
2.<frameset rows="20%,*">
3.<frame src="/title.html">
4.<frameset cols="30%,*">
7.</frameset>
8.</html>
frameset rows="#%, *"-e a3, frameset cols="#%, *"- i
FRAMEBORDER AND FRAMESPACI NG:

FrameBorder e FrameSpacing attribute e +
4
8 $ e Spacing e $ H ugly gray lines
'
8
.
2.<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
3.<frame src="/title.html">
4.<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
7.</frameset>
8.</html>
p,:
e2
k
NORESI ZE AND SCROLLI NG:
Noresize attribute e +z` $ %

+
i /

scrolling="(yes/no)"- $ e ' scroll 4

4
2.<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
3.<frame src="/title.html" noresize scrolling="no">
4.<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
5.<frame src="/menu.html" scrolling="auto" noresize>
6.<frame src="/content.html" scrolling="yes" noresize>
7.</frameset>
8.</html>
ag4
2 p
+ 2
eiee 9\u u

( HTML Layout Tut or i al i n Bangl a)
2
:

E+ %
eiee %u 4 2 E >. ' s

/ eiee
%u 67
4.
1.<table bgcolor="black" border="1" heigh="200" width="300">
2.<tr><td>
3.<table bgcolor="white" heigh="100" width="100">
4.<tr><td>Tables inside tables!</td></tr>
5.</table>
6.</td></tr></table>
p,: '

Tables inside
tables!
eiee s&LLl 9\u
Standard layout +
H
u/ as

, ' e content
p, k e
4
'
o +
i e 6`
01.<table cellspacing="1" cellpadding="0" border="0"
02.bgcolor="black" height="250" width="400">
03.<tr height="50"><td colspan="2" bgcolor="white">
04.<table title="Banner" id="banner" border="0">
05.<tr><td>Place a banner here</td></tr>
06.</table>
07.</td></tr>
08.<tr height="200"><td bgcolor="white">
09.<table title="Navigation" border="0">
10.<tr><td>Links!</td></tr>
13.</table>
14.</td><td bgcolor="white">
15.<table title="Content" id="content" border="0">
16.<tr><td>Content goes here</td></tr>
17.</table>
p,:
Place a banner here
Lin
ks!
Lin
Content goes here
ks!
Lin
ks!
01.<table title="Shell" height="250" width="400"

02.border="0" bgcolor="black" cellspacing="1" cellpadding="0">
04.<table title="banner" id="banner">
05.<tr><td>Banner goes here</td></tr>
06.</table>
07.</td></tr>
09.<table title="Navigation" id="navigation">
10.<tr><td>Links!</td>
11.<td>Links!</td>
12.<td>Links!</td></tr>
13.</table>
14.</td></tr>
15.<tr><td bgcolor="white">
16.<table title="Content" id="content">
17.<tr><td>Content goes here</td></tr>
18.</table>
p,:
Banner goes here

Links! Links! Links!
Content goes here
eiee u u

( HTML Embed Musi c Tut or i al i n Bangl a)
2
:

E+ %
o / e music {

a +4 Embed
e +
4
8 music {

4. e src attribute e +
4
8 media
file e
I
4.
1.<embed src="/Madine Ko Jain.mp3" />
EMBED ATTRI BUTES pzHl

: a
f aml$:
$:
$
Embeded media player e
4 /
s
i attribute + 4
1. width - media player e p+s
2. height - media player e uc
3. hidden 8 e
+ 4. media player p, 4
% +/
ei attribute 4

8 %/ 3
o / e
music ' n
option

1.<embed src="/last breath.mp3" width="360" height="165" />
EMBED ATTRI BUTES xlp|} :

Embeded media player e
8,pT
7
s
i attribute + 4
autostart ei attribute e

false
true 8
true .
4. o / 2

+
3 +
3
4
loop - ei attribute e
false
true true +
3

/ 4 % false 3
4
volume - ei attribute d

media file e volume +
4. e +7
4 0-100
view source
print?
1.<embed src="/beethoven.mid" autostart="false" loop="false"
2.volume="60" />
eiee Lo u

( HTML Vi deo Tut or i al i n Bangl a)
2
:

E+ %
Music
i e 'o
i <embed />
. o / e p,
8
. image
e embed
e
closing
e
p.
i src attribute e
H +I URL(local
global) I 'o o / p,
8
.
1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg"
2.autostart="false" />
p,:
%/ href attribute e
Ho +I URL I 'o o / p,
8
.
1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">
2.motiontween1easy.swf</a>
(
i
k play)
eiee - Lo :
Flash movies (.swf), AVI's (.avi), and MOV's (.mov) embed
e+ +
/
,
.swf files - ei 4c |

.wmv files ei 4c

ik
+ uin

i/
.mov files - ei 4c e/ ki
i
.mpeg files e e standard 8

Moving Pictures Expert Group d

compression movie

i 67 4.!
u/
H in
4
4. swf, mpeg ei

eiee - EMBED ATTRI BUTES:
Src attribute e <embed />
e %
attribute .! +
4
volume, autostart, hidden, and
loop
autostart - ei attribute e
false
true 8
true .
4. / 2

+
3 +
3 'o 4.
8

hidden - ei attribute e
H play/stop/pause .nt embedded object is hidden or not. Values
are true or false. (Hide your embeded media if you just want background noise).
loop - ei attribute e
false
true true +
3
'o / 4 % false 3
4
.
playcount - Setting a playcount +
a3, 4c media x number /8,n repeat 4 a 4o.
repeat
/, (playcount="2" e a3, video i ).
volume - ei attribute d

media file e volume set
4. e +7
4 0-100
eiee 6L ( HTML Body)

2
:

E+ %
Body tag 8
web page e + element H
Tables, Lists, Forms, paragraph element

Body element e H
2 4.
HTML - BODY MARGI NS:
Attributes
Leftmargin: body element. e
/

topmargin :body element e u/

1.<body topmargin="50">
2.<body leftmargin="50">
p,:
Top
Margin
Left Margin
HTML - BASE TEXT:

Text attributes e
H Body tag e ' + k e

I
8
.
1.<body text="red" >
view source
print?
1.<body text="rgb(255,0,0)" >
eiee L u

( HTML Di v Tut or i al i n Bangl a)
2
:

E+ %
<div>
a

e /
t 4+

a
body
e
Div en
4
block en 8

an
3 a

et
+e+e+ e kt Div en a t /,
' m
attributes .
4
id
width
height
title
style
, strong visualization e ' style attribute e
H

p,
8
.
1.<body>
2.<div style="background: green">
3.<h5 >SEARCH LINKS</h5>
4.<a target="_blank" href="http://www.google.com">Google</a>
5.</div>
6.</body>
SEARCH LINKS
Google
eiee L 9\u

%u a3
$ !
@
o 3. al
' 4+
div en 4

8
.
beginning and ending
e
H div en + eiee en H
/

01.<div id="menu" align="left" >
02.<a href="/">HOME</a> |
03.<a href="/">CONTACT</a> |
04.<a href="/">ABOUT</a>
05.</div>
06.<div id="content" align="left" bgcolor="white">
07.<h5>Content Articles</h5>
08.<p>This paragraph would be your content
readable material.</p>
paragraph with all of your
09.</div>
p,:
HOME | CONTACT | ABOUT
Content Articles
This paragraph would be your content paragraph with all of your readable material.
01.<div id="menu" align="left" >
02.<a href="/">HOME</a> |
03.<a href="/">CONTACT</a> |
04.<a href="/">ABOUT</a> |
05.<a href="/">LINKS</a>
06.</div>
07.<div id="content" align="left" >
08.<h5>Content Articles</h5>
09.<p>This paragraph would be your content

10.paragraph with all of your readable material.</p>
11.<h5 >Content Article Number Two</h5>
12.<p>Here's another content article right here.</p>
13.</div>
p,:
HOME | CONTACT | ABOUT | LINKS
Content Articles
This paragraph would be your content paragraph with all of your readable material.
Content Article Number Two
Here's another content article right here.
eiee 96l e6N i ( HTML Bol d & I t al i c)

2
:E+

E+ %
<b> bold tag 4

%
k
l /

1.<b>This text is entirely BOLD!</b>
p,: Bold:
This text is entirely BOLD!
k highlight bold tag 4
/
.
1.<p><b>Don't</b> touch that!</p>
p,:
Don't touch that!
dictionary fashion.2
%
bold tag 4
/

1.<p><b>Cardio:</b> Latin word meaning of the heart.</p>
p,: Dictionary
Cardio: Latin word meaning of the heart.
HTML - I TALI C( S)
The italics tag key word or phrase highlight 4

u ei tags %/
font face
stylize

%J
k
Emphasized tag p
.i italics tag e
1.Italic <i>tag</i>!
2.<em>Emphasized</em> Text!
3.Create a <blockquote>blockquote</blockquote>!
4.Format your <address>addresses</address>!
p,: HTML Italics:

Italic tag!
Emphasized Text!
Create
Format your addresses!
1.<b>HTML</b>
2.<i>Hyper Text Markup Language</i>
1.<b>HTML</b>
2.<em>Hyper Text Markup Language</em>
p,: HTML Dictionary

HTML
Hyper Text Markup Language
or
HTML
Hyper Text Markup Language
HTML BOLD AND I TALI CS

CS
<b> and the <i> tags u'.i e+
3 text format e 4

8
.
H
k I 3

2
1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>
p,:
Phillip M. Rogerson MD
a blockquote!
<b> and the <i> tags u'.i k 4

/
'
R
8
.
1.<p>Include several external
2.links throughout your texts as references to your viewers,
3.we will discuss
4.<a href="/" target="_blank" title="Tizag Links">
5.<b><i>HTML Links</i></b>
6.</a>
7.in a later lesson.</p>
p,: Format Links:

Include several external links throughout your texts as references to your viewers, we will
discuss HTML Links in a later lesson.
eiee 9L e6N pre +# ( HTML Code & Pr e)

2
:E+

E+ %
code tag e
H %/
text computer code e 2 /
e
+
H
'
text e font face,
size, e letter spacing /, /

1.This text has been formatted to be computer <code>code</code>!
p,: Computer Code

This text has been formatted to be computer code!
Use this tag to separate any computer code you wish to display on your website. It is not always
necessary, but the tag exists if you so desire.
HTML - CODE LI NKS
/J3 link 4+
%/
web page e 2
/

1.<p>Feel free to search <a href="http://www.google.com" target="_blank">
2.<code>Google</code>
3.</a> for
4.anything you wish to find on the internet.</p>
p,: Code Links:

Feel free to search Google for anything you wish to find on the internet.
HTML - <PRE> PREFORMATTI NG

<pre> tag e +H
4 HTML coding e +. 8'
%

i b, s+ ,
I +'
k p,
4a3,
% 8'

2 +'
i %u / 2

1.<pre>
2.Roses are Red,
3.e2
.
s+ %!Violets are blue,
4.I may sound crazy,
5.e2
.
s+ %!But I love you!
6.</pre>
p,:
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!
eiee sAskp,
sAskp,a6skp,
a6skp,sTi

2
:E+

E+ %
1.<p>This text is <sup>superscripted!</sup></p>
p,: Superscript:
This text is superscripted!
HTML EXPONENTS
a exponential 4

<sup> tag 4
4.
1.2<sup>3</sup> = 8
2.14<sup>x</sup>
p,: Exponents:
23 =
14x
HTML C
::
::
u/
+
pn 2
8
.
2
reference .
<sup> tag 4
4. 8

,
1.<p>"It was a lover's tryst<sup>1</sup>."
2.<hr />
3.1. Secret meeting between lovers
p,: Footnote
"It was a lover's tryst1."
1. Secret meeting between lovers
HTML - SUBSCRI PT
1.<p>This text is <sub>subscripted!</sub></p>
p,:
This text is subscripted!
1.<p>H<sub>2</sub>0 - Water
2.<p>O<sub>2</sub> - Oxygen
3.<p>CO<sub>2</sub> - Carbon Dioxide
p,:
H2O - Water
O2 - Oxygen
CO2 - Carbon Dioxide
HTML STRI KETHROUGH
<del> tag e
H
2
k+ o.
8
.
1.<p>This text is <del>scratched</del> out!</p>
p,: Strikethrough
This text is scratched out!
HTML - CHECK OFF TASK:
1.<ol>
2.<li>Clean my room</li>
3.<li><del>Cook Dinner</del></li>
4.<li><del>Wash Dishes</del></li>
5.</ol>
p,:
1. Clean my room
2. Cook Dinner
3. Wash Dishes
eiee Cl ( HTML For m)

2
:

E+ %
web server 4 3(name, email address, credit card, i

) g4 kt webmaster e Forms
t /, tool 4+

%/

4
a8
.7 form , 4 i/ g4 %/ e2
3
+. /
,
order /
,
4

7 /+2

/
,%/
forum e 9 k s
/
i

TEXT FI ELDS
'
+m, forms 67 4. +
%/
%
4 Input fields 4c form
sandwich e

<input> tag e ! attributes %! ++ +mn

u
type - ei attribute input field e p
' H,
8 text, submit, e password
name - ei attribute given field e
8
/, %/ reference % /

size - ei attribute field e horizontal width +
maxlength ei attribute character e maximum m H,

<form method="post" action="mailto:
youremail@email.com">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />
Password: <input type="password" size="10" maxlength="10" name="password">
</form>
p,: Input Forms

Name:
Password:
HTML - I NPUT TAGS:
Input fields e H 8+ + an', k +
4
checkboxes, text fields, radios, e form submission
buttons <input /> tag e
closing tag p.
i
HTML -Type Attribute:
Type attributes e +
4
8 e p
input tag , /

input tag .
4
1. "text"
2. "password"
3. "checkbox"
4. "radio"
5. "submit"
6. "reset"
HTML CHECKBOXES:
Checkboxes +
H

4

7 e
single question e a

!
i .
Check boxes allow for multiple items to be selected for a certain group of choices. checkbox e
name e value attributes 8
radio button e name e value attributes %
<form method="post" action="mailto:

youremail@email.com">
Select your favorite cartoon characters.
<input type="checkbox" name="toon" value="Goofy">Goofy
<input type="checkbox" name="toon" value="Donald">Donald
<input type="checkbox" name="toon" value="Bugs">Bugs Bunny
<input type="checkbox" name="toon" value="Scoob">Scooby Doo
<input type="submit" value="Email Myself">
</form>
p,: Checkboxes:
Select your favorite cartoon characters.
Goofy
Donald
Bugs Bunny
Scooby Doo
Email Myself
HTML - SUBMI T BUTTONS:

Input type e H "submit" a/ +

67 kt ul28
specifies a very unique button. 82
%
submit button e
/
2 , e
,
activate 4
84 %
submission button 67 !
i attribute p.

4c value attribute %
8
b value attribute e
4+
,

button u/ p, 4 "Submit" or "Continue"
b
value attribute e
4+
4
4. .
1.<input type="submit" value="Submit" />
2.<input type="submit" value="Continue Please!" />
p,: Submit Buttons

Submit
Continue Please!
HTML - RESET BUTTONS:

+,> input type 4 reset button Setting the type to reset button k

H %/ form e +!
%
/, s
'
as
. . 8 /
"start over" button %/ reset button e
4

/

view source
print?
1.<input type="reset" value="Reset Fields" />
2.<input type="reset" value="Start Over" />
p,: Reset Buttons:
Reset Fields
Start Over
eiee 9kk Cl ( HTML Text Fi el d)

2
:

E+ %
Text fields 4 !
%.
kt 8
%/

k i/ e +i 3 web server /
S
+
4
8 e+
3
scripting language 8 (PHP, PERL, or ASP) e
H pk.
4.
HTML - TEXT FI ELD SI ZE:
Size attribute e
H text area e size .nt
8
. default size 4 +
H
20 characters f,
1.<input type="text" size="5" />
p,: Text Fields:
HTML - TEXT FI ELD MAXLENGTH:

AXLENGTH:
maxlength attribute , s
!
@
4

7
ic
characters i/ /
e %/ 8 +
i
, s o 3
characters i/ +7
d maxlength attribute 4

4. size e
maxlength ei 4o.
p.

1.<input type="text" size="5" maxlength="5" />
p,: Maxlength Attribute
HTML - TEXT FI ELD VALUE:

value attribute 4
%/ % 3i k l ! 2
2 /
8
+ 2 /

view source
print?
1.<input type="text" size="5" maxlength="5" value="55555" />

2.<input type="text" size="15" maxlength="15" value="Corndog" />
3.<input type="text" size="25" maxlength="25" value="Tizag Tutorials!" />
Text Field Values:

55555
Corndog
Tizag Tutorials!
eiee 9kk e ( HTML Text Ar ea)

2
:

E+ %
kk e
b e e
iu
3 3 % m 4 Paragraphs, essays, or memos +=4
/`
kk e
+

8
. e +

8
. kk e
e opening e closing
.! kk e

e
'
! 2
o / e kk e
p, 4.
1.<textarea>Text Area!</textarea>
p,
HTML - TEXT AREA COLS AND ROW

ROWS:
Adjust the of the text area size e appearance I 4
attributes p.

4
cols androws p attribute e +2

4 8 @
4 @ text area 4
1.<textarea cols="20" rows="10">Text Area!</textarea>
p,:
HTML - TEXTAREA WRAP:

wrap attribute k
8,
/ H,
82 textarea text field e 2
2 2 +
> %+
Wrap e H + %!8:
1.soft
2.hard
3.off
wrap attribute e Soft
word text area ' @. but form +

4. 2 @

word
2
8
.
(Line breaks a/ 8
4.
)
wrap attribute e Hard
word text area ' @. e
i e > Line breaks a/ 8

4.
/ form +
2
8
. 8'
text box e 2
! I +'
2
c
wrap attribute e Off
word text area ' @.
e e
i a 3

1.<textarea cols="20" rows="5" wrap="hard">
2.As you can see many times word wrapping is often the desired
3.look for your textareas. Since it makes everything nice and
4.easy to read.
5.</textarea>
p,:Text Area Wrapping:
1.<textarea cols="20" rows="5" wrap="off">

3.look for your textareas. Since it makes everything nice and
4.easy to read.
5.</textarea>
p,: No Wrapping
HTML - TEXTAREA READONLY:

readonly attribute e value yes
no readonly attribute e
yes 3
%/

H textarea e
k / /
n /, /

1.<textarea cols="20" rows="5" wrap="hard" readonly="yes">

3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>
p,:
HTML DI SABLED
disabled attribute p.
textarea 2
highlight 4.
, H+ H
e e 2
/, /

1.<textarea cols="20" rows="5" wrap="hard" disabled="yes">

3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>
p,:
eiee 9Lo 96$ ( HTML Radi o but t on)
2
:

E+ %
Radios 4 e p
i/ , 8
4

7 8
e a/ +k o

e
I'

4"multiple choice" ei H ki e p Radios 4

+. '

1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
p,: Radios:
Italian:
Greek:
Chinese:
ei , e i 'n + o %o u
4 .
4
1.Italian: <input type="radio" name="food" />
4.
5.Male: <input type="radio" name="gender" />
6.Female: <input type="radio" name="gender" />
p,: Multiple Radios:

Italian:
Greek:
Chinese:
Male:
Female:
eieeeiee- RADI O CHECKED:
checked eu ,e +
4
8 %/

radio a

l 4+
Jt % 3 .
2 /

1.Italian: <input type="radio" name="food" checked="yes" />

p,:Default Italian:
Italian:
Greek:
Chinese:
eiee \A
L ( HTML Upl oad For m)
2
:

E+ %
upload form 4

iu
pictures, movies,
e webpages upload /
e
upload
form 4 e H input form %/ +
H
'
type attribute . e
4+
file 2 upload form 67
/

1.<input type="file"/>
pzHl:: UPLOAD FORM

MAX FI LE SI ZE
upload
i e size e +7

H . %/ %/
webserver e =
space k
/
e
%
hidden input field e %o ! specific attributes 8

1.<input type="hidden" name="MAX_FILE_SIZE" value="500" />

2.<input type="file"/>
e2
value 100
file +,
c 100kb 4 /

p,:
eiee DALu: s ( HTML Dr op down l i st )

2
:

E+ %
Drop down lists 4 E ,

forms. %/

internet e 2! Drop down lists 2o k p

i

%/ 8 s
3
++ >. d

/, 3
Drop down lists e a a/+ 3
8
%/ ic
select
/

Drop down lists
<select> and <option> tags . 67 4. <select> tag e
H Drop down lists
e

,
4. <option> tag e
H Drop down lists e 67
4.
1.<select>
2.<option>California -- CA</option>
3.<option>Colorado -- CO</option>
4.<option>Connecticut -- CN</option>
5.</select>
pzHl:: DROP DOWN LI ST
selected attributee +
4
8 %
/!n >. select
as
. p, /

HTML - SELECTI ON FORMS:
size attribute 4
%/

drop down list ' /
s p, /

size attribute select 8
options e +
3 p, 4 s scroll
/,
selected attributee +
4
8 %
/!n >. select
as
. p, /

1.<select size="3">
5.</select>
pzHl:: SELECTI ON FORMS

California -- CA
Colorado -- CO
Connecticut -- CN
HTML - SELECTI NG MULTI PLES:

multiple attribute e
H %/

e aH >. select /

1.<select multiple="yes" size="3">
5.</select>
pzHl:: MULTI PLE SELECTI ONS

California -- CA
Colorado -- CO
Connecticut -- CN

HTML Tutorial in Bangla

Uploaded by

Document Information

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

HTML Tutorial in Bangla

Uploaded by

Copyright:

Available Formats

eiee u

  |  ( HTML Tut or i al i n

s #$ eiee u

eiee e a3, 4c Hypertext Markup Language.e

PHP+Database 2 %/  /=

82 %/  eiee kn u/ 4  , 

1.<body> Body Tag (acts as a content shell)

eiee eT6u u

eiee 9: eT6u

Lef t al i gned headi ng

right, left, center

top, middle, bottom

um(Vertically) aligns tags

numeric, hexadecimal, RGB

Background image u/ element , 

Element e ^7 

Tables, images, or table cells e width ,  

Tables, images, or table cells e height ,  

eiee 9MLN u

eiee  i: 9b u

3.<hr /><hr />

Start attributes .  ic

eiee k s

Lower-Case Numerals Upper-Case Numerals

eiee 6: k s

3.<dd>French word for cheese.</dd>

eieeeiee- N Ad$ \ 6  : ( HTMLL - COLORI NG SYSTEM: RGB VALUE)

Red, Green e Blue ei  

(7 * 16) + (0) = 112

eiee C& u

Here is a size 5 font.

"Num. Value 1-7"

Size of your text, 7 is biggest

"rgb,name,or hexidecimal" Change font color

Change the font type

ustomize your font to achieve a desired look.

eiee N u

eiee 9kk N

p,: Global Link

  browser window    page 2

+ frames cancel  , current browser window   page Load .

p,: _blank Target:

eiee ii e  %/  eiee standard anchor tag <a> 

<a href= "mailto: abc@mail.com" >Email Example</a>

%/  (Subject e body ) ul2  

eiee e: i u

1.<p>Everything that goes up, must come &nbsp;&nbsp;&nbsp;&nbsp;down!</p>

82 eiee i n p,  

p,: Input Field:

eiee 26 u

eieeeiee- 26 SRC:

picture file e .html file ei directory  as

picture file /,  directory  as

pic directory e picture file /,  directory  as

eieeeiee- ALTERNATI VE ATTRI BUTE:

1.<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful

eieeeiee- 26 HEI GHT e6N WI DTH:

eieeeiee- VERTI CALLY e6N HORI ZONTALLY ALI GN 26:

1.<p>This is paragraph 1, yes it is...</p>

image alignment works.

eieeeiee- THUMBNAI LS:

eiee 96 u

CELL PADDI NG e6N SPACI NG

eiee u

| ( HTML Tut or i al i n

s#$ eiee u

eiee e a3, 4c Hypertext Markup Language.e

PHP+Database 2 %/ /=

82 %/ eiee kn u/ 4 ,

eiee eT6u u

eiee 9: eT6u

um(Vertically) aligns tags

Background image u/ element ,

Element e ^7

Tables, images, or table cells e width ,

Tables, images, or table cells e height ,

eiee 9MLN u

eiee i: 9b u

Start attributes . ic

eiee k s

eiee 6:k s

eieeeiee- N Ad$ \6 : ( HTMLL - COLORI NG SYSTEM: RGB VALUE)

Red, Green e Blue ei

eiee C& u

eiee N u

eiee 9kk N

p,: Global Link

browser window page 2

+ frames cancel , current browser window page Load .

p,: _blank Target:

eiee ii e %/ eiee standard anchor tag <a>

%/ (Subject e body ) ul2

eiee e:i u

1.<p>Everything that goes up, must come down!</p>

82 eiee in p,

p,: Input Field:

eiee 26 u

eieeeiee- 26 SRC:

picture file e .html file ei directory as

picture file /, directory as

pic directory e picture file /, directory as

eieeeiee- ALTERNATI VE ATTRI BUTE:

eieeeiee- 26 HEI GHT e6N WI DTH:

eieeeiee- VERTI CALLY e6N HORI ZONTALLY ALI GN 26:

eieeeiee- THUMBNAI LS:

eiee 96 u

a e cellspacing

eiee 6+gu&L N u

eiee 6+gu&L u

eiee 9y u

frameset rows="#%, "-e a3, frameset cols="#%, "- i

Noresize attribute e +z` $ %

scrolling="(yes/no)"- $ e ' scroll 4

eiee 9\u u

eiee %u 4 2 E >. ' s

p,: '

eiee u u

2. height - media player e uc

EMBED ATTRI BUTES xlp|} :

autostart ei attribute e

eiee Lo u

.wmv files ei 4c

.mpeg files e e standard 8

eiee 6L ( HTML Body)

topmargin :body element e u/

eiee L u

eiee L 9\u

eiee 96l e6N i ( HTML Bol d & I t al i c)

<b> bold tag 4

p,: HTML Italics:

p,: HTML Dictionary

<b> and the <i> tags u'.i k 4

p,: Format Links:

eiee 9L e6N pre +# ( HTML Code & Pr e)

p,: Computer Code

p,: Code Links:

eiee Cl ( HTML For m)

web server 4 3(name, email address, credit card, i

p,: Input Forms

p,: Submit Buttons

p,: Reset Buttons:

eiee 9kk Cl ( HTML Text Fi el d)

p,: Text Fields: