Basic HTML

5
m -
dl - r (https://www.facebook.com/faruk.ice09) k i
i e u i я (ICE) । p i
k я । s g । g i
a e । । ei i e a i । e
я я i (https://www.facebook.com/zamil.hossainsezan32)
, o p gr u a l । e я p
e i- p । i e e e i । e
gr я ei e e -e u o i- p । я i
u i । e u u o я
i i । я я i a a n i
o p g (https://www.facebook.com/groups/Wordpress2Smashing/)- o
a a n e я a । i k sn
e я ।
ei i st । ang an ei i m
я । я я b
i । r । j , i
я r ।
- dl h r

6
tttt
aaaa -eeee
. .ei e e ?
. .ei e e я
. . p я
. .o я i яn HTML-i ?
aaaa -didididi rrrr
. .ei e e sT
. .ei e e r
. .ei e e r bg я
. . . (HTML Tag)
. . .ei e e e (HTML Element)
. . . ei e e k (HTML Document)
. . .e T u (Attribute)
. . i
aaaa -
. . (<head>…</head> )
. . i (<title>…</title>)
. . (<meta>)
. . . name e T u
. . .HTTP-EQUIV e T u
. . (<link>)
. . (<base>)

7
. .s i (<style>…</style>)
. . skp (<script>…</script>)
aaaa -
. . (<body>…</body> )
. .bgcolor e
. . .ei e e -e
. .background e
. . .o h i я
. .text e
. .link e
. .vlink e
. .alink e
. . (<h1> </h6>)
. . g (<p>….</p>)
. . b (<br>)
. . b s (&nbsp) e
. . i s <pre>…….</pre>
. .e iя i
. .<acronym>
. . n <hr>
. .Marquee
. . n
aaaa - oooo яяяя

8
. . <font>….</font>
. . k s i
. . я
. . ak (HTML Entities)
. .ei e e u
. . s
aaaa - oooo яяяя ssss
. .k s (Ordered List)
. . a (Unordered List)
. . s s।
a - o я i я
. .<img> s
. .
a - o я
. . i <a>….</a>
. . .href n i kk) )e T u
. . .Title e T u
. . .Target e T u
. .i
. .i я
. .ei e e i i
. .
a - oooo яяяя

9
. . (<table>...</table>)
. . h e T u
. . .align e T u
. . .width e T u
. . .Border e T u
. . .Cellspacing e T u
. . .Cellpadding e T u
. . .bgcolor e T u
. . .rowspan e T u
. . .colspan e T u
. .<caption> e T u
. . g u i я
. .ei e e g u
a - o я
. . (<form>...</form>)
. . .Method e T ue T ue T ue T u
. . .Action e T ue T ue T ue T u
. . .Enctype e T ue T ue T ue T u
. .ei e e i
. . . kkkk llll
. . . oooo llll
. . . kkkk
. . . oooo
. . . kkkk eeee

10
. . .
. . .
. . .i яi яi яi я
. . .
. . .D uD uD uD u ssss
. . .
a -e o я
. .ei e e iframe
a - ei e eei e eei e eei e e uuuu
. .<table> u
. .CLASS o ID e T u
. .ei e e <div>
. .<div> u
a -
. .ei e e 4.01- e

11
a -e
ei e e ?
ei e e o я i t o я । e я k o я i
a i ei e e я । HTML e r Hyper
Text Markup Language e p g я । ei e e - Markup Language o
, g Markup ei Markup я o я n e p
। - e o я k , i я, e ,a o, o i e ;
ei e g o я p p i
ei e e я। o я au ei e e । b uя e o я o
u i k View Page Source k <html>……..</html>
o ei e e ।
ei e e я
e ,o я , я n s ns , я i e я u o
ei e e । ei e e e k e ei e e k (o я)
n p (b uя ) я । ei e e o я t ।
p я
ei e e яn k e o o , mu
Notepad k e i । un s Notepad++
oun e e i o u - Adobe
Dreamweaver, HTML Kit । Notepad++ ।
e ei e e яn e b uя i । Internet Explorer,
Mozilla Firefox, Google Chrome i ।
o я i яn HTML-i ?
s я i o я i ; o я i e o я h
e p । e p e p ? r a u

12
a u i eg i e e e p । e
o я i яn ei e e i ? e । o я i яn ei e e -i ।
ei e e t o я n p । e CSS(Cascading
Style Sheets) o я n s i । o я i яn ei e e ,
e e o я i । ei s o i (s o i
e p )। nt o oa я ।
i s
p r
hostghor.com
a -di r
ei e e sT
ei e e e di । e <head> r e </head>
an <body> r e </body> । ei

13
d <html> o </html> । e ei e e e
i-
<html>
<head>
e CSS, Java Script ।
<title>
e o я (title) ।
</title>
</head>
<body>
e o я (Text,Image,Table,Form,Audio,Video i ) ei
।
</body>
</html>
ei e e r
Notepad++ e e я g i r -

14
e File n k Save As…e k r । e ui o -

15
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 ।
e i k । k e i -
i e b uя o u -
e <head> o <body> d , p e
s , e o я яn <title >
।e <title> My first web page </title> b uя i “My
first web page” । eg s । e
(<body>….</body>)-e h1,h2,h3,h4,h5,h6 ei d ।
<h1>,<h2,………..<h6> ei d । <p>……</p> d o я
g । e e t s ।
HTML rrrr bgbgbgbg яяяя

16
. ei e e k (HTML Document)
. ei e e e (Element)
.ei e e (Tag)
.ei e e e T u (Attribute)
g m
. (HTML Tag): ei e e -e p ei e e । p
r (<)e b ,e e o e e (> ) b ।
<html>,<head>,<body> e e । p a a p я
e e Case Sensitive , Small Letter- e । e grt
r i i o –e e e (/) ।
- , r <head> </head>
। o , eg a । g
</p> o e a ।
.ei e eei e eei e eei e e eeee (HTML Element): ei e e d i ei e e e ।
ei e e e ei e e -e nd nd o я n e p ।e
ei e e k e - html, head, title e body। e oa e
।
ei e e e g mr -
• Start Tag/Opening Tag r ।
• End Tag/Closing Tag ।
• Start o End Element Content ।
• k t Element Content o ।
• Element-e End Tag o ।
яn e - g p <p> r
g st e </p> । e g r o
(<p>Element Content</p>) i g e । a i e e ,
r o e t i ei e e e ।

17
. ei e eei e eei e eei e e kkkk (HTML Document): ei e e e d o я i
ei e e k । ei e e k p d a head o body । ei e e k
i a i something.html/.htm Extension save ।
.e T ue T ue T ue T u (Attribute): e o я n k , i я o e e a s ,
s i n । o я e a s , s i g o i
e T ui । …? e u - u u
s g я nt i ?
ei я e T u ।u u ei “<h1>My First Heading</h1>” i s
i k b uя “My First Heading ” я ।
<h1 align=”center”> My First Heading </h1>
e align e e T u value “center”, o я
। p e T u e e । e T u r -
<HTML Tag Attribute_Name=”Attribute_Value”>………</HTML Tag>
iiii
o я Source Code , <html> u <!doctype>
।e Doctype Declaration । ei e e i b uя
i яi i p । i i । e я k a
k , HTML e , W3C d nt i ? Doctype Declaration e
r
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
e o s , e s
ei e e a i <html>…………</html> । r -

18
a -
(<head>…</head> ):
e k я ei e e d a - p a । ei
a i <head>…</head> ei । <head>……….</head>
। k m । - k i , k st,
k h s i skp i । ei o я ;
i g g я ।
(<head>……….</head> ) m g
. i
.
.
.
.s i
. skp
. iiii (<title>…</title>): e p i
<title>……</title> । ei b uя -e i ।
o i st e kp i ei ei । i я
o я я i k e яn title e g t a । e Valid HTML
Document a i title । - www.youtube.com ei o
i b uя i Broadcsst Yourself; ei я -
<head>
<title> Broadcsst Yourself</title>
</head>
iiii k tk tk tk t dddd

19
► i b - ।
► i an ।
<title><p>Paragraph Here</p></title> - e ।
. (<meta>): i <meta> । ei
k m n яn। - o я , o i ,
an n o , o i st e oa । i я i k e яn e g t
a । e i। <meta> r
<meta name=”meta_Name” content=”meta_Content”>
name, http-equiv o content e T । name o http-equiv
e T u content e T di e T e яn।
m name o http-equiv e T
.name e T ue T ue T ue T u
i.<meta name=”Developer” content=”Abdullah Al -Faruk”>
e name o content attribute developer o o ।
ii.<meta name=”keywords” content=”html,java,css,php,joomla”>
e я o g o ।
iii.<meta name=”Description” content=”This tutorial about web design & developing” >
e o я kp o ।
iv.<meta name=”robots” content=”noindex/nofollow/all/index”>
robots o o я i я i k ।
v. k an яn refresh ।
<meta name=”refresh” content=”3,http://www.iceschool.com”>

20
an -
<meta http-equiv=” refresh” content=”3,http://www.iceschool.com”>
e p o я ।
.HTTP-EQUIV e T ue T ue T ue T u
o я update <meta> ei attribute ।
<meta http-equiv=”expires” content=”sat,30 dec,2011,12.00AM,GMT”>
e 30 dec-e b uя k e n g ।
. (<link>): e k k s <link>
। o я e k ek i
। k ek s i skp яn।
e e s я । k
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
. (<base>): e o i s e o я l
яn । <base> k URL я o । k
i яn <base> s я ।
<base href=”http://www.iceiuacademy.com/html/”>
e iceiuacademy e я e ei я Admission Form
я i e яn я p ।
<head>
<base href="http://www.iceiuacademy.com/admissionform" />
<base target="_blank" />
</head>
Base Tag s ।

21
.s is is is i (<style>…</style>): <style> o </style> k
s i k । e e я , e e । s i type
e e T u ।
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
. skpskpskpskp (<script>…</script>): <script>o </script> k client-side
script JavaScript । я skp e , e ।
i a , ,
?
www.extratelecombd.com

22
a -
(<body>…</body> ):
я e ei e e k p d a - o ।
,e s । e ei
a i <body>…</body> ei । <body>……</body>
। Body Section e d i (<body> o </body>) a a e
o । e o я (Image, Text, Table, Form, Frame, Paragraph, Heading
Etc.) ei । <body> e T u o я
।
.bgcolor
.background
.text
.link
.vlink
.alink
.bgcolor eeee ei e T u o я g u ।
- k color.html u
<html>
<head>
<title>Show a Background Color</title>
</head>
<body bgcolor=”red”>
<h1>Background Color is RED</h1>
</body>

23
</html>
e <body bgcolor=”RED”> g u । e k r e
bgcolor=”red” g u o , nt i e
? e । u o я , e m
-
ei e eei e eei e eei e e -eeee
o я d । k n m e ।
pppp dddd
, , , я, । ei e e e e
। o
:
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
dddd dddd
я RED-GREEN-BLUE(RGB)। e n an n ।
Red, Green e Blue ei rgb । p ( )
( m )। rgb rgb(RED,GREEN,BLUE)। u k r -
Red, Green eeee Blue eeee :
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue

24
p k t ।
dddd
ei e e -e яn я e k ।
k n e p яn di я । ”RRGGBB”-e RR=Red;GG=Green;BB=Blue.।
-"#RRGGBB" a p e h i (#) k n яn di я я яn
di я e яn di я । e я o k m ? n
g m e o A F n
g k m ।
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
k 0 1 2 3 4 5 6 7 8 9 A B C D E F
------------------ t । e k t k t m F
।
u
bgcolor="#FFFFFF"
bgcolor=”#0055AA”
[ d d ut । e i ]
ei g a n
i । a o ।
[ d ei e e -e u d
। ]
.background eeee ei e T u o я g u i я
। i я d -
<body background=”i я .i я ” >
<body background=”web.png” > e web i я .png ।
l ei e e k i l a i h i я ।
oooo hhhh i яi яi яi я
.gifGraphic Interchange Format ( h h )

25
.jpegJoint Photographic Experts Group (e ek .jpg )
.png Portable Network Graphic(.gif o .jpeg e i e a s )
.BMPWindows Bitmap.
.text eeee ei e T u o я k ।
<body text=”GREEN”> ,e <body> o </body> k я ।
.link eeee ei e T u o я i k
। <body link=”BLUE”> ,e o я ।
.vlink eeee g i k Already Visit
ei Attribute । । <body vlink=”RED”> ,e Visited Link e ।
.alink eeee u s ei
Attribute ।
<body alink=”GREEN”> e Link e я ।
o я s ।
n o я n p o sn
я । m n s o
(<h1> </h6>):
a , g ei ।
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> ei o ।e k h1>h2>h3>h4>h5>h6> a

26
h1 k n । o я
। align e T u e a s ।
<html>
<body>
<h1 align=”left”>Left Alignment</h1> e l।
<h2 align=”right”>Right Alignment</h2> o я ।
<h3 align=”center”>Center Alignment</h3> o я ।
<h4 align=”justify”>Justify Alignment</h4> a o я di я
।
</body>
</html>
gggg (<p>….</p>):
g яn <p>......</p> ।e a । g a s яn
align e T u ।
<p align=”center”>Here a Paragraph</p>
align=”left”[ l left align e o ]
align=”right”[o я я i g a s ]
align=”center”[ a s nd, i o p n ]
align=”justify”[ g i o u p n ]
g s iя яn o g m

27
bbbb (<br>): e g g n g
<br> । ei i b , ei e i s n i
। g яn s <br> i b । -
<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 ।
bbbb ssss (&nbsp) eeee
ei e e -e e s , я (Enter Key), e s । i
k a k s &nbsp । g &nbsp , g
s ।
<p> Java script is an&nbsp&nbsp&nbsp interpreted object oriented promramming.</p>।e
s ।
iiii ssss <pre>…….</pre>
&nbsp i <pre> ।ei s , я
(Enter Key), a g s g s ।
<pre>Hyper Text Markup
Language</pre>
Output: Hyper Text Markup
Language

28
e iяe iяe iяe iя iiii
e s g e o e , g u u
e k , iuя я g e st । e яn
title e T । 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 s u e k "HTML is
a Markup Language" ।
<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

29
display that content. The computer application.That translates this description is called a Web
browser. </p>
</body>
</html>
<acronym>
o я e b u b m e k
।<acronym> ei я ।
<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
nnnn <hr>
o я n яn <hr> । e i। m e T u g
e u

30
*align: a s
align=”center”[ l ]
align=”left”
align=”right”
*color: ।
*size: u । e k ।
*width: p s । e k u i ।
u
<hr align=”center” size=”10” width=”50” color=”RED”>
Marquee
n uя o i i , mp g я e an <marquee>
ei я ।e k t g sk ।
<marquee> g sk e </marquee>
marquee h e T u g -
direction=”left”[ g ]
direction=”right”[ ]
direction=”up”[ u ]
direction=”down”[u ]
u
<marquee direction=”right” scroll amount=”2”>HTML Is The Basic Of Web
Design</marquee>
n

31
ei e e p я я , s
।e n a n , я e я iuя я
।ei n b uя o я u p a n i
e u । n

e 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
p r
hostghor.com

32
a - o я
<font>….</font>
o я a n grt e e । s i t p
। e p p CSS-e। n o HTML o CSS
। я яn HTML –e <font>…</font> । e color, face e
size e T u s i । e u i p a e CSS
ut ।
i.Color e Te Te Te T uuuu
ei e T u ।
<font color=”#ff0022”>Some Text Here</font>
ii.Face e T ue T ue T ue T u
u ei e T u । e u l
mu ।
<font face=”Arial”> Some Text Here </font>।
e e u l nt ।
<font face=”Arial”,”Times New Roman”,”Solaiman Lipi”> Some Text Here </font>।
iii.Size e T ue T ue T ue T u
p । e / i । l e
। e + - h n । p t
iя di ।u
. <font size=+1>Web development</font>[ e ]
.<font size=-2>Web development</font> [ e ]
a i ; e -

33
l + (size=e * )
e яn - +( * )= + =
e яn - +(- * )= - =
Size Attribute e 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

34
g e T u 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>
kkkk s is is is i ।।।।
*iiii
i.<I>Some Text Here</I>
ii.<address>Some Text Here</address>
iii.<cite>Some Text Here</cite>
* llll

35
i.<B> Some Text Here</B>
ii.<EM>Emphasized Text</EM>
iii.<strong> Some Text Here</strong>
* iiii
<U> Some Text Here</U>
* llll + iiii + iiii
<B><I><U> Some Text Here</U></I></B>
*an nan nan nan n
1.<blockquote> ..</blockquote> [ ud p яn ]
2.<Q>…..</Q> [ i i ud 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 яn ]
8.<sample>Program e Sample Output</sample>
9.<strike> </strike>
10.<big>Text Font яn</big>
11.<small> Text Font яn
12.<TT> i i </TT>
13.<blink>Text j яn</blink>

36
14.<sub>:H<sub>2</sub>O[Output:H2O]
15.<sup>a<sup>2</sup>+b<sub>2</sub>[Output(a2
+b2
)]
яяяя
n k । nt e e s h
iuя mu o । ea s iuя k । e o i
u d । ei s яn mu h я
। o я h iuя mu o
я u l e o ।e i
p । e । я
I.cursive
Ii.fantasy
Iii.monospace
Iv.sans-serif
v.serif
uuuu
<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>

37
</body>
</html>
p
akakakak (HTML Entities):
ak g HTML । (&,””,<>)। ak g
। (∞, ,α,Ủ, i )। e k t
Entity Code।p ak di Entity Code - o b । e Entity Code -
b
&#956 ; μ
Entity Code m o
ak b
“ " #quot;
< < <
> > >
& & &
® ® ®
© © ©
μ μ

38
♥ ♥ &hearts;
♠ ♠ &spades;
♣ ♣ &clubs;
♦ ♦ &diams;
p я Entity Code g ।
ei e eei e eei e eei e e uuuu
ei e eei e eei e eei e e -eeee u di ।
.b e b e e i b । d g e i
i u i । u -
<p>First Paragraph </p><p> Second Paragraph</p>
u
First Paragraph
Second Paragraph
a e я e b । ei e e -e <p>,<h1> <h6>, <hr> i b
e ।
. k e e i । e i b । b e
e i k e ।
ssss
e u an u s i s । s g । -
.p u s । -
<p><B>HTML</p> e <B> i।
. s k । -
<p><B>HTML</p></B> e <B> k i।
.b u an b u s ।
<p>html is the basic of <h1>Web Design</h1></p>

39
4.b u k u s ।
<B>Something<p>Paragraph here</p></B> e ।
k
www.cricketw.com
a - o я s
n я n я яn s । - я s, i s , s
i । n p ei s । o я sn u s
яn s e (<li>….</li>) । <li>….</li> s । e
a । p ei e e s । <ol> r a
s(ordered list), <ul> r a s e <dl> r
j s(definition list)। ordered o unordered list-i HTML-e p s। e
ei d i -
1.<ol> - ordered list(Numbered List)
2.<ul> - unordered list(Bulleted List)

40
. kkkk ssss (Ordered List):
m an u s яn Ordered List । e e b u ।
Ordered List p <ol>….</ol> । e type e T u
m । u
. p s । m i s
k s i <ol>….</ol> ।
. e i g s <li>…</li> । e u -
An Ordered List:
• Coffee
• Tea
• Milk
u u k r e sg , , ... k n , e l। nt i
sg a,b,c…. i,ii,iii….k n ? ei я яn o
p s(ordered list) । eg , , m m
। type e T u m -
1.<ol type="a"> // a,b,c…ei 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 ।
uuuu

41
Letters list:
• Apples
• Bananas
Lowercase letters list:
• Apples
• Bananas
Roman numbers list:
• Apples
• Bananas
Lowercase Roman numbers list:
• Apples
• Bananas
Start e T u я i n m s r । -

42
pppp :
4.Buy Food
5.Enroll in College
6.Get a Degree
. aaaa (Unordered List)
e s Serial Number , e n Symbol । <ul>…<ul>
Unordered List p । Type Attribute n Symbol o । u
pppp :
An Unordered List:
• Coffee
• Tea
• Milk
<ul> s । s p . squares(■) .disc
.circles(○) । default full discs । <ul> type e T u
n m o । -

43
<ul type="square">
<ul> type="dics">
<ul> type="circle">
u
p
Disc bullets list:
• Apples
• Bananas
Circle bullets list:
• Apples
• Bananas
Square bullets list:
• Apples
• Bananas
ssss ssss

45
i s
p r
hostghor.com
a - oooo яяяя i яi яi яi я
p o i i i я । i я o я n o
o । o я sn я n s i , g u p я
i я g to a । o я sn я i я । <img> o я
i я k ।e i, e src e T u i я я
। -

46
<img src=”i я /i я .( )i я ”>
<img src=”image/web.jpg”>
e Image l e web.jpg e i я ।
nt l HTML i i i я i я
। -
<img src=”web.jpg”>
e i я o i i я i я я o
।
<img src=”http://www.image.google.com/ html/html5.jpg”>
<img> o e T u g -
.widthoooo height e T ue T ue T ue T u
o я e i я я p <img> width o height e T u e
। e p k । width o height e T u o я dr
b uя n i я iя । width o height e T u i я e
i я ।
<img src=”image/web.jpg “width=”300” height=”200”>
.Align e T ue T ue T ue T u
i я a s align e T u ।
<img src=”html.jpg” align=”left”>
k i я align e T u m k g
*align=”top”[ k a s i я u ]

47
*align=”middle”[ k a s i я ]
*align=”bottom”[ k a s i я ]
.........................................................................................................
*align=”left”[ i я a s o я ]
*align=”right”[ i я a s o я ]
.Border e T ue T ue T ue T u
l i я । i я ei e T u ।
l e я s i ।e
k ।
<img src=”faruk.png” border=”4”>
.hspace oooo vspace e T ue T ue T ue T u
g i я k i я n t (u /d ) hspace e
u m t(u o ) vspace e T u ।
<p>Use of hspace and vspace Attribute <img src=”wp.jpg” hspace=”20” vspace=”10”></p>
.Alt e T ue T ue T ue T u
b uя i я p iuя i я n я
i я i я s e k i , u i я
m e o k । alt e T u ei я
।
<img src=”joomla.jpg” alt=”joomla admin panel picture”>
<img src=”photo.jpg” alt=”my photo with my friends”>

48
i я s alt e T u -e h k e k
k n ।
<img src=”joomla.jpg” alt=”[joomla admin panel picture]”>
ei k n k s i r i <img> s ।
<I><img src=”joomla.jpg” alt=”joomla admin panel picture”></I>
<img> title e T u -e e iя i । e u o
Alt k title e T u k ।
<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>
uuuu

49
.o я t k i я ।
.a i я i я ।
. Width o height e T u i я iя
i я i я r ।
.alt e T u r ।
.o i я
i i я ।
.e i я e a g i я ।
a - oooo яяяя
iiii <a>….</a>
o i an grt e । ei e e -e e o я
nt g e t ; e o e o i an o i
।o я k an я o । a
(<a>…</a> ) e । k i e i e D u
,e u , o я s t e i g
i । href, title, o target e T u । r -
<a href=” я ” target=" k n я яi
n ui " title=” u u n o я m
i ” > b uя , u k n я o </a> ।e u -
<a href="http://www.google.com/" target="_blank" title=”Search Engine”>Google Home</a>
e k Google Home , k www.google.com o i o
।
e h e T u g m s
.href( iiii kkkkkkkk nnnn ) e T ue T ue T ue T u
я (URL) ei e T u ।

50
<a href=”http://www.facebook.com ” target=”_self” >Facebook</a>
b uя Facebook , u k www.facebook.com o p ।
Hypertext reference Internal, Local, Global ।
.i ( Internal): e i я i i k n । e
m s ।
. ( Local): я ei e e -e e o я । e
a g я e an k e m o i । ei я
a o i n я n i k n । -
o i я яn index.html, About Us я яn about.html; Blog я яn
blog.html; Tutorial я яn tutorial.html i n я । e i
я an n я k ; ei я яn index.html i -
<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 ei e e i e e i l o । l
k t u l ]
. g ( Global): ei d e o i an o i । -
o i index.html i -
<a href=”http://www.facebook.com ” target=”_self” >Facebook</a>
.Title e T ue T ue T ue T u
i title e T u iuя n я m i o
e я ।
<a href=”http://www.WebTechnologyBlog.com” title=“ я p k ......”> < a>
e u u o “ я p k ......” ei ।
e e iя i o ।
.Target e T ue T ue T ue T u

51
k я я Open Window Open
target e T u । target e T u k o я h , o яo
e । e T u яi я o ।u
<a href=”http://www.facebook.com “ target=”_blank”>Facebook</a>
e Window Open
<a href=”http://www.facebook.com “ target=”_self”>Facebook</a>
e я Open ।
iiii
i bg e i я an a an я s a
। e я e o i n я
। e я e я n a । e o я
a ei я । -ui (http://en.wikipedia.org)
“HTML” e a k । я p e k
। я g k । e -e u k
я । я e
я e । s ei я -

52
p k a ( ) / h яn <a> name e T u ।
e href e T u i ( -u k)
।
e u
. p , , , , , , i g ।
. i k r p name="C7" Chapter 7 h । Chapter 7
я e Chapter 7 ; u sk
। e i Chapter 7 e e я u o k
Chapter 7 я e i। ei я яn-
. i Chapter 7 h i hrefe T u
। e s ।
i яi яi яi я

53
a o i e i я u u
e । ei я (<a> o </a>) <img> s ।i я
<html>
<body>
<a href="http://www.WebTechnolohyBlog.com">
<img src="smiley.gif" alt="Web Design tutorial" width="32" height="32" />
</a>
</body>
</html>
e k t e , e a i alt iuя i я n
alt e k i ।
ei e eei e eei e eei e e i ii ii ii i
k i i o href e T u i
o i s e i i i ।
<a href= "mailto:abc@mail.com" >Email Example</a>
e mailto: k t e p ।
pppp :
Email Example
ei u u , s mailto:abc@mail.com ।e k
b uя abc@mail.com i e i ।
i i i a k d - .subject e .body
.subject i i subject-e i । subject e title
e T u ।
.body body- i st ।
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

54
e k i h i e To e я a@b.com Subject e я Web Page
Email o Body This email from your site eg a ।
** u i i i- i । -
<a href=”mailto: faruk@iceiuacademy.com?subject=Feedback&body=Good Job”> %
faruk@iceiuacademy.com </a>
s e i e D o ।
<a href=”mailto: ice.iu.academy@gmail.com?subject=Feedback”> 3ice.iu.academy@gmail.com</a>
. i я ?
. ?
. u ?
. i s o o i k ?
jjjj ?
rrrr eeee

55
a - oooo яяяя
<table>….</table>
n я яn o я u s яn g t a । e o я
n a k , i я i s e sn o я । <table>….</table>
o я । o g яn
a i p я । g mr
.<tr>….</tr> [ ei d row ]
.<td>….</td>[ ei d i ]
.<th>….</th>[ ei d o ]
[ d g Optional। ]
r , p e
u k r - e d / e । o k r -p e
। p / ; e p / g
g । яn m -
u t p e -
<tr> <!—e e -->
<th>Name</th> <!— p o -->
<th>Roll No.</th>
<th>Age</th>
</tr>
[ d k r p <th>…</th> ]

56
e d -
<tr> <!—e e -->
<td>Faruk</td> <!— p i -->
<td>0818002</td>
<td>22</td>
</tr>
e <table>...</table> । m m o -
b uя
hhhh e T ue T ue T ue T u

57
яn h e T u g - align, width, border, cellspacing, cellpadding e
bgcolor। m eg
align e T ue T ue T ue T u
s e o я a s , i align e T u e a s
।
<table align=”left”> [e l]
<table align=”right”>[ o я ]
<table align=”center”>[ o я nd ]
width e T ue T ue T ue T u
p s width e T u । di ei e T u -
.<table width=”60%”>[ e k t p s b uя %]
e k t b uя o ।
. <table width=”100”>[ e k t p s k ]
ut । e k t ।
[ d width e T u b uя я p a
я я p ]
Border e T ue T ue T ue T u
l । o border e T u । nt
( p ) o ।u u k r <table border=”1”> ;
e ।
Cellspacing e T ue T ue T ue T u
Cellspacing e T u s । cellspacing
d cell e s (space) a । l cellspacing e T u ।ei
k । <table cellspacing=”3”>
e u

58
p
Cellpadding e T ue T ue T ue T u
t ei e T u । l e k a
t k ।e k । <table cellpading=”2”>
e u
p

59
bgcolor e T ue T ue T ue T u
ei e T u g u ।
<table bgcolor=”red”> e g u ।
rowspan e T ue T ue T ue T u
e g e яn <td> o <th> rowspan e T u । g
e u rowspan e T u ।
<td rowspan=”2”>
<th rowspan=”2”>
e d d e t ।
u k r -

60
u -
colspan e T ue T ue T ue T u
colspan e rowspan e i। colspan e । g e
u colspan e T u ।
<td colspan=”2”>
<th colspan=”2”>
u k r -
u -

61
<caption> e T ue T ue T ue T u
<caption> o । align e T u a s caption
। l caption u ।
<caption align=”top”>
<caption align=”bottom”>
<caption align=”left”>
<caption align=”right”>
e u -
u -
g ug ug ug u i яi яi яi я
g u e T u e i я g u i я । u

62
pppp
ei e eei e eei e eei e e g ug ug ug u :
u u e s । e
g u ।
p

63
e s i p k b uя r
www.ashianskyshopbd.com
a - o я
(<form>...</form>)
ei e e -e a n grt e । p p o i i ।
iuя i ( n ,a g , n , i ) яn ei e e -e । eeee
gggg яnяnяnяn llll । h <form>….</form> ।।।।
ntntntnt iiii oooo gggg pppp
яnяnяnяn eeee iiii яяяя - eieieiei ।।।। <form> method, action e enctype
e T u । ei e T u g я , eieieiei pppp
egegegeg яяяя ।।।। e T u g m o -

64
.Method e T ue T ue T ue T u
Method e T u p t । d Method
-
1.Get Method (<form method=”GET”></form>)( l)
2.Post Method (<form method=”POST”></form>)
URL e яn Get Method । iuя o o
Address
http://www.sitename.com/login.php?/username=faruk&password=1254893/
яn Post Method । e k t s a
।
.Action e T ue T ue T ue T u
p яn p g skp Action e T u я o
<form action=”registration.php” method=”post”>
.Enctype e T ue T ue T ue T u
a mn k t Get Method o । e k t Post Methot o Enctype e T u
o । ei e T u d p o ।
<form method=”post” action=”order.php” enctype=”text/plain”>
ei e e i
ei e e -e e a । input h h । <input /> e
closing p я i। Input fields form-e p । Input fields e я an k

65
g Text Field, Password Field, Radio button, Check Box, Text Area, Button, e form
submission buttons। n l m
kkkk llll
n o i я s p e First name, Last name n
k l/ , ei k l kt k i । iuя
o o l (e i k e l) яn <input> । <input>
h e T u g - type, name, size, maxlength। g e T u e
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>
u -
1.type =”text” [ e l k ।]
2.name - ei e T u l h । ei p ei e T u
।
3.Size=”20”[ e ak p s l o । default size characters ]
4.maxlength=”20”[ e l ak i । maxlength attribute s
i characters i e iя s o ।
characters i d maxlength attribute । size e maxlength e i
o p я ]
6.value=”Your Name Here”[ k l l ,e ]
oooo llll

66
Password Field k l i। type=”password” ।an n e T u k l i।
<form>
Password: <input type="password" name="password" />
</form>
u -
kkkk
h a k яn k । e e e a k ।
u
oooo
e a t e a k яn Radio Button । checked
e T u ,e o a l t ।

67
u
kkkk eeee
iuя яn Text Area । kk e e opening e closing
। kk e e o я e kk e p ।
<form>
<p>Comment:</p>
<textarea rows=”5” cols=”8”> text area </textarea>
</form>
e rows o cols e Textarea Size ।
яn m i r

68
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
яn । submit button e
e activate । e k t b value e T u e u
p । "Submit" or "Continue" ei b d value e T u e h ।
<form>
<input type=”submit” value=”Login”>
<input type=”submit” value=” Continue”>
<input type=”submit” value=”Press”>
</form>
u
i яi яi яi я
i я o ।
<input type=”image” src=”button.bmp”>
k e s a s । -
<input type="reset" value="Reset" />

69
D uD uD uD u ssss
D u s e iuя яn e e iuя
e k । r e e e e я p
k (a g e ) e e a , D u s
яi । D u s p <select> r e
i g iuя i g p <option> ।
<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 e T u p a Yellow White p
m i selected e T u । p <option> value e T u e
g t ।value e T u ( bl,mr..) ।
<select> size e T ue T ue T ue T u
<select> size e T u s i u
u i size=2 d a sk ।
<select name="color" size=2>
<option selected="selected" value="ye"> Yellow </option>
</select>
<select> multiple e T ue T ue T ue T u

70
multiple e T u e a k s । -
<select multiple=”yes”>
<option selected="selected" value="ye"> Yellow </option>
</select>
selected e T u u a k ।
a s a gr ।<optgroup> 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>
u -

71
upload form iuя pictures, movies, e я webpage upload । e
upload form e input form । type attribute e file
upload form ।
Upload File: <input type="file"/>
upload i e size e webserver e space k । e
яn hidden input field e o specific attributes ।
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
input type="file"/>
e value 100 file 100kb ।
i s
p r
hostghor.com

72
a -e o я
ei e eei e eei e eei e e iframe
e o я o я p iframe । ei k
<iframe src=" o i e i o i "></iframe>
iframe e T u
1.width
2.height
3.frameborder
Width o height e T u iframe o я k я p ।
e k , i p ।
<iframe src="iframe.htm" width="200" height="200"></iframe>
<iframe src="demo_iframe.htm" width="50%" height="60%"></iframe>
Frameborder e T u iframe-e ।
<iframe src=" iframe.htm" frameborder="0"></iframe>
e i ।
a - ei e eei e eei e eei e e uuuu
e o я sn я u grt a । o я n ( o ) k
d i ei e e u ।e o я a i u m
я । k , a o i i e o । t

73
ei e e i u nt ei e e o e e e t u
। di u –
. (<table>...</table>) । [e k t ei e e i ]
. (<div>...</div>) । [ei e e o e e d i ]
t k r e o я n । e i u ।
<table> uuuu
<table> o d e o я u m o
<html>
<body>
<table width="500" border="0">
<tr>

74
<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

75
o sn u e u я i , e
<div> ut ।
CLASS oooo ID e T ue T ue T ue T u
s i (CSS) o skp(JavaScript) яn o я n u n e T u
। e an ID, CLASS o STYLE। ID Attribute-e p u n n
h । e CLASS Attribute-e e u e igr s h
। d g d я i i e ID m
s i s g я i
।
<p id=”1”> This is first Paragraph </p>
<p id=”2”> This is second Paragraph</p>
a g g e i я i i e iCLASS h
। -
<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 e T u n ei e e u s i । e e e -e a ।
e i e ।
<a href=”first.htm” STYLE=”font-style:bold”>Link to first Document</a>

76
e k l ।
ei e eei e eei e eei e e <div>
<div>...</div> an n e t я a body e । <div> b
e ei e e -e n u gr я । a
я e o я n a e n a n я i । e e e k t
Div e a grt । e e я ।
<div> h g e T u
Id e e e iu i o ।
Align ei e T u left,right,center, justify ।
Width e p s
Height e u
Title e m a k p ।
style strong visualization e яn style attribute e p ।
e 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

77
o я d ।
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

78
<div> uuuu
u e i я -
<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>

79
u
a -
ei e eei e eei e eei e e 4.01- eeee
<!DOCTYPE> k ।
<html> ei e e k ।
<body> ei e e k a ।
<h1> to <h6> ei e e ।
<p> ei g p ।
<br /> e i b ।

80
<hr /> n ।
 e n p ।
-e
<acronym> b m p ।
<abbr> ।
<address> a ।
<b> k l ।
<bdo> k ।
<big> k p ।
<blockquote> ।
<cite> k i ।
<code> k mu ।
<del> k ।
<dfn> k ।
<em> l ।
<i> k i ।
<ins> in k ।
<kbd> k ।
<pre> k p ।
<q> яn ।
<samp> k mu ।
<small> k p ।
<strong> l k p ।

81
<sub> skp k p ।
<sup> s skp k p ।
<tt> i k p ।
<form> ।
<input /> i l ।
<textarea> k e ।
<button> ।
<select> D u s k ।
<optgroup> s e i g e t ।
<option> s i g ।
<label> i e p ।
<fieldset> e ।
<legend>
<fieldset> o
।
i яi яi яi я
<img /> i я p ।
<map> i я яn ।
<area /> i я я ।
<a> p
<link /> k i k s ।

82
ssss
<ul> a s p ।
<ol> a s p ।
<li> s i p ।
<dl> s p ।
<dt> s e p ।
<dd> p ।
<table>
<caption> o ।
<th> ।
<tr> / ।
<td> e ।
<thead>
<tbody>
<tfoot>
<col /> e e ।
<colgroup> gr ।
kkkk s is is is i
<style> k s i p ।
<div> k ।
iiii

83
<head> k m p ।
<title> k i p ।
<meta> k i p ।
<base />
e o i s e o я l
яn ।
[ d dr i p ei e e -e u
a e i । gr я ]

Basic HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (10)

Basic HTML