SlideShare uma empresa Scribd logo
1 de 54
Baixar para ler offline
ei e e uei e e uei e e uei e e u |||| ( HTML Tut or i al i n( HTML Tut or i al i n( HTML Tut or i al i n( HTML Tut or i al i n
Bangl a)Bangl a)Bangl a)Bangl a)
ei e eei e eei e eei e e uuuu
e n (Elements)
( Tag)
a u ( Attributes)
a c ( 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)
u s
: яoяoяoяo
s ei e es ei e es ei e es ei e e u eu eu eu e
• ei e e e a c Hypertext Markup Language.e p g я , я।
• o ei я e я।
• e i e o я e e e я p
• я sk p e e a p o я i o
PHP+Database Driven WebSite ।
• webcoachbd.com e u ei e e ।
я ei e e (a ei e e )
Notepad open i i a a n e i
Netbeans or Dreamweaver. o e я a j e i ।
ei e e b я -
• ei e e e n(Elements)
• ei e e (Tag)
• ei e e a u (Attribute)
e s >>
ei e e eei e e eei e e eei e e e uuuu ( HTML El ement s)( HTML El ement s)( HTML El ement s)( HTML El ement s)
:
e ne ne ne n (Elements): e n HTML e nd n HTML page e p k a
e n (tag) e HTML e n a s Web
page e Paragraph text, , i i elements ei я ।
e e n(Element) a (opening tag) ,e n e 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 я e n(Element) e : HTML,head, title e body
elements । e ।
<html> Element...</html>
p HTML HTML b p e less than o greater than ( < >) h :
<html> । </html> a <html> Welcome to Bangladesh </html>।
Welcome to Bangladesh ei Web page e p я Notepad e Web page
eя Notepad Open p
start All Programs > Accessories >Notepad
Notepad m
1.<html>
2.Welcome to Bangladesh
3.</html>
e Notepad e i save e k index.html save ।
i Double click open । Browser e open я e web
Page ।
<head> element
e k n head, k n s n <head> elements я header head
elements e b uя p i e n e p ।
<title> element
<head> e n e <title> e n i b title elements e opening (<title>)e
closing(</title>) tag e browser e i p ।
1.<html>
2.<head>
3.<title> My WebPage!</title>
4.</head>
5.</html>
<body> element
body element web page e p web page e i
body element e ।
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 b uя e я p o я
।
ei e e uei e e uei e e uei e e u ( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)
:
ei e e k n u , e e p
paragraph paragraph e , e ।
e p a
. (opening tag)
. a (contents)
. (closing tag)।
ei e e e web page e n ।
1.<p>A Paragraph Tag</p>
e ak o u ।
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 NGCLOSI NGCLOSI NGCLOSI NG ::::
closing tag p я i e n c line break tag
e <br/> p a e i a i
я e ।
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--
ei e eei e eei e eei e e e T ue T ue T ue T u uuuu ( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)
:
mp я e u e attributes
e ps, uc attributes value e ps o uc ।
1.<tag attributes ="value" attributes ="value">
1.<table width="150" height="100">
Class id attribute e p e i n Class id attribute i n
i an e я skp , e e (e m u e
।
1.<p>Paragraph type 1 Italics</p>
2.<p>Paragraph type 2 Bold</p>
p
Paragraph type 1 Italics
Paragraph type 2 Bold
ei e e e Tei e e e Tei e e e Tei e e e T u ( HTML NAME ATTRI Bu ( HTML NAME ATTRI Bu ( HTML NAME ATTRI Bu ( HTML NAME ATTRI BUTE)UTE)UTE)UTE)
Name attribute Class id attribute n Name attribute p i a i i n
।
1.<input type="text" name="TextField" />
p :
ei attribute TextField p i an e a a (javascript , css)
ei e e i e Tei e e i e Tei e e i e Tei e e i e T uuuu ( HTML( HTML( HTML( HTML---- TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)
ei attribute ei e e e n e e popup k k e k o я
u u popup k p ।
<h2 title="Hello There!">Titled Heading Tag</h2>
p
Ti t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng Tag
ei e e e i e Tei e e e i e Tei e e e i e Tei e e e i e T uuuu ( HTML( HTML( HTML( HTML---- ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)
e n n a s align attribute align n
left, right & center । l left align ।
1.<h2 align="center">Centered Heading</h2>
Cent er ed Headi ngCent er ed Headi ngCent er ed Headi ngCent 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 gnedLef t al i gnedLef t al i gnedLef t al i gned headi ngheadi ngheadi ngheadi ng
Cent er ed headi ngCent er ed headi ngCent er ed headi ngCent er ed headi ng
Ri ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ng
GENERI CGENERI CGENERI CGENERI C ATTRI BUTES:ATTRI BUTES:ATTRI BUTES:ATTRI BUTES:
Attribute o я m s iя ei u a HTML Tag e
я ।
Attribute Options Function
align right, left, center n (Horizontally) aligns tags
valign top, middle, bottom u m(Vertically) aligns tags
bgcolor
numeric, hexadecimal, RGB
values
Element e background color ।
backgroundURL Background image u element ।
id a
Element e Name Cascading Style Sheets (css)
।
class a
Element e Cascading Style Sheets (css)
।
width Numeric Value Tables, images, or table cells e width ।
height Numeric Value Tables, images, or table cells e height ।
title a elements e "Pop-up" title ।
ei e e g uei e e g uei e e g uei e e g u ( HTML( HTML( HTML( HTML Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)
:
я p k t g e i e ।
<p> a c ( g ) ei g k u a i
।
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.
ei e e gei e e gei e e gei e e g ---- я sя sя sя s ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON)
o k n e justify ei e e e justify
e i я ।
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.
ei e e gei e e gei e e gei e e g ---- ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –CENTERI NG)CENTERI NG)CENTERI NG)CENTERI NG)
o k n e g e p i display window e a s ।
1.<p align="center">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.
ei e e gei e e gei e e gei e e g ---- e ie ie ie i ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT)
o k n e g e p i display window e a s ।
1.<p align="right">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.
ei e eei e eei e eei e e uuuu ( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)
:
ei e e e i i e k bold p
e e m u m 1 6 e d e 1 e 6
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 ear ear ear e
GREATGREATGREATGREAT
f orf orf orf or
titles
and subtitles
k ei p e яs i b option । e e built in attribute ।
a i b ।
eeee gggg e e te e te e te e t ::::
e paragraph e u ।
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.
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.
ei e e i b uei e e i b uei e e i b uei e e i b u ( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak)
:
i b a e n i b e i a i
ei e e e
d i b h i b paragraph o a HTML element(tables, lists, and
headings)e ।
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 address ।
Will Mateson
Box 61
Cleveland, Ohio
p ।
1.<p>Sincerely,<br />
2.<br />
3.<br />
4.Kevin Sanders<br />
5.Vice President</p>
p :
Sincerely,
Kevin Sanders
Vice President
o e p я i b e closing tag e p я i।
HTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULE::::
Horizontal rule <hr/> p <hr/> 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 />
pppp :
Use
Them
Sparingly
Horizontal rule gn я p k t ।
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", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.
pppp :
Goal sGoal sGoal sGoal s
1. Find a Job
2. Get Money
3. Move Out
Start attributes я ic m s ।
1.<h4 align="center">Goals</h4>
2.<ol start="4" >
3.<li>Buy Food</li>
4.<li>Enroll in College</li>
5.<li>Get a Degree</li>
6.</ol>
pppp :
Goal sGoal sGoal sGoal s
4.Buy Food
5.Enroll in College
6.Get a Degree
ei e e k sei e e k sei e e k sei e e k s ( HTML ORDERED LI ST( HTML ORDERED LI ST( HTML ORDERED LI ST( HTML ORDERED LI STSSSS CONTI NUED)CONTI NUED)CONTI NUED)CONTI NUED)
o p s(ordered list) e 1,2,3 m m
type attribute m ।
1.<ol type="a">
2.<ol type="A">
3.<ol type="i">
4.<ol type="I">
Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types:
Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
a. Find a Job
b. Get Money
c. Move Out
A. Find a Job
B. Get Money
C. Move Out
i. Find a Job
ii. Get Money
iii. Move Out
I. Find a Job
II. Get Money
III. Move Out
ei e e kei e e kei e e kei e e k ssss ( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI STS)S)S)S)
<ul> s s p 1. squares 2.discs 3.circles । default
full discs ।
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>
pppp :
Shoppi ng Li stShoppi ng Li stShoppi ng Li stShoppi ng Li st
• Milk
• Toilet Paper
• Cereal
• Bread
type attributes unordered list e a ।
<ul type="square">
<ul> type="dics">
<ul> type="circle">
type="square" type="disc" type="circle"
Milk
Toilet Paper
Cereal
Bread
• Milk
• Toilet Paper
• Cereal
• Bread
o Milk
o Toilet Paper
o Cereal
o Bread
ei e eei e eei e eei e e ssss ( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI STS)TS)TS)TS)
Definition list e a i <dl> tag Definition list
Define a j i bold u Definition list tag e o tag an k
1. <dt> 2. <dd> ।
<dl> tag: s e я ei ।
<dt> tag: j (Define) ei ।
<dd> tag: <dt> tag e m e ।
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>
pppp :
Fromage
French word for cheese.
Voiture
French word for car.
ei e e uei e e uei e e uei e e u ( HTML Col or code)( HTML Col or code)( HTML Col or code)( HTML Col or code)
:
Color set d , , , я, ei e e e value
e 16 ।
::::
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
ei e eei e eei e eei e e ---- d яd яd яd я ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: RGB VALUE)RGB VALUE)RGB VALUE)RGB VALUE)
web design e я HTML rgb Non-IE browser, HTML
rgb CSS u ei m n я ।
Red, Green e Blue ei c rgb । p 0( ) 255(
m )। rgb rgb(RED,GREEN,BLUE)।
RED, GREENRED, GREENRED, GREENRED, GREEN eeee BLUEBLUEBLUEBLUE 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
ei e eei e eei e eei e e ---- dddd :::: kkkk ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: HEXADECI MAL)HEXADECI MAL)HEXADECI MAL)HEXADECI MAL)
p p Hexadecimal system e ei system e я o practice a
я ei Hexadecimal system k t g e Hexadecimal system in
standard color।
Hexadecimal 6 digit u s p digit(RR), Red value digit(GG),
Green value e digit(BB), Blue value ।
ei e eei e eei e eei e e kkkk
bgcolor="#RRGGBB"
ei e eei e eei e eei e e ---- ( HTML( HTML( HTML( HTML---- COLORCOLORCOLORCOLOR CODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CODE)ODE)ODE)ODE)
Hexadecimal system e Numbering system 16 digit e un
।
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 m ei m n e u ।
e se se se s kkkk ::::
bgcolor="#FFFFFF"
e "F" c c e ei ("#FFFFFF") s
।
kkkk tttt::::
(15 * 16) + (15) = 255
u t s p F e (15) 16 d 255 p
k t c o u ।
uuuu :
bgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5
ei e e uei e e uei e e uei e e u ( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)
:
<font> o i k s i , iя e size, color e face attributes
n s iя <basefont> я k e i s i , iя e
e ।
<font> e <basefont> e e ( e e u ) u ।
( FONT SI ZE)( FONT SI ZE)( FONT SI ZE)( FONT SI ZE)
Size attribute e n e iя n e e g c 1( ) 7(
)। n e l c 3।
1.<p>
2.<font size="5">Here is a size 5 font</font>
3.</p>{}
pppp :
Here is a size 5 font.
( FONT COLOR)( FONT COLOR)( FONT COLOR)( FONT COLOR)
attribute e font e color ।
1.<font color="#990000">This text is hexcolor #990000</font>
2.<br />
3.<font color="red">This text is red</font>
pppp :
This text is hexcolor #990000
This text is red
( FONT( FONT( FONT( FONT FACE)FACE)FACE)FACE)
n face e k t o u s e n i s n
e l Times New Roman n ।
1.<p>
2.<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
3.has had its font...</font>
4.</p>
pppp :
This paragraph has had its font formatted by the font tag!
( BASEFONT)( BASEFONT)( BASEFONT)( BASEFONT)
Basefont e o я l n basefont ।
01.<html>
02.<body>
03.<basefont size="2" color="green">
04.<p>This paragraph has had its font...</p>
05.<p>This paragraph has had its font...</p>
06.<p>This paragraph has had its font...</p>
07.</basefont>
08.</body>
09.</html>
pppp :
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
i font basefont e e ( e e u ) ।
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
p ak snp ak snp ak snp ak sn s is is is i ::::
n s iя s i ।
1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
2.your font to achieve a desired look.</p>
pppp :
Customize your font to achieve a desired look.
ei e e uei e e uei e e uei e e u ( HTML Li nk)( HTML Li nk)( HTML Li nk)( HTML Li nk)
:
e o i k s anchor tag e
k , i я, e o ।
ei e eei e eei e eei e e ---- i kki kki kki kk | HTML| HTML| HTML| HTML---- HYPERTEXT REFERENCEHYPERTEXT REFERENCEHYPERTEXT REFERENCEHYPERTEXT REFERENCE ( HREF)( HREF)( HREF)( HREF)
href attribute e e n ।
Hypertext reference Internal, Local, Global ।
Internal: e i я o ।
Local : web site e я o ।
Global: web site e a web site e o
Internal - href="#anchorname"
Local - href="/../pics/picturefile.jpg"
Global - href="http://www.tizag.com/"
ei e e kkei e e kkei e e kkei e e kk ( HTML( HTML( HTML( HTML---- TEXT LI NKS)TEXT LI NKS)TEXT LI NKS)TEXT LI NKS)
<a> e </a> tag d t e href attribute e s
href attribute opening tag e opening e closing tag e ,
web я ।
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>
pppp : Global Link
Tizag Home ESPN Home Yahoo Home
ei e eei e eei e eei e e ( HTML( HTML( HTML( HTML---- LI NKLI NKLI NKLI NK TARGET)TARGET)TARGET)TARGET)
Target attribute d , я window a e i browser window ।
target=" _blank" browser window page ।
_self" 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 я p web site ESPN.COM e Target attribute
e browser k ESPN.COM web site window open
web site e ।
1.<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>
pppp : _blank Target:
ESPN.COM
ei e e i iei e e i iei e e i iei e e i i uuuu ( HTML E mai l )( HTML E mai l )( HTML E mai l )( HTML E mai l )
:
ei e e i i e я ei e e standard anchor tag <a> href attribute ,
h inverted comma e i i ।
<a href= "mailto: abc@mail.com" >Email Example</a>
pppp :
Email Example
a ka ka ka k ei e eei e eei e eei e e i ii ii ii i ::::
i i a k c 1. subject 2.body
Subject - i i e subject e яi information ।
Body - i i e body яi information ।
<a href= "mailto:
a@b.com?subject=Web Page Email&body=This email
is from your website" >
2nd Email Example</a>
e u ei i i u k subject e body
(Subject e body ) u l ।
e e e i o i a u
।
p :
2nd Email Example
ei e e eei e e eei e e eei e e e i ii ii ii i ( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )
:
i i я u site e Email i i e
Email u l ।
<a href="mailto: ferdous@yahoo.com?subject=Feedback" > Ferdous@yahoo.com</a>
pppp :
mailto: ferdous@webcoachbd.com?subject=feedback
a Email ।
mailto: ferdous@webcoachbd.com?subject=feedback
<a href="mailto: ferdous@webcoachbd.com?subject=Feedback&body=Sweet site!">
ferdous@ webcoachbd.com</a>
pppp : Complete Email:
mailto: ferdous@webcoachbd.com?subject=feedback&body
=sweet site!
ei e eei e eei e eei e e uuuu (HTML-download links)
u я i place k e u я image link e я
k t thumbnail u s ।
HTML Code:
<a href="http://www.webcoachbd.com/pics/htmlT/blanktext.zip">Text Document</a>
pppp : Download a Text Document:
Text Document
ei e e lei e e lei e e lei e e l ( HTML( HTML( HTML( HTML---- DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)
<base> ei e e head element e e default URL я я
я я <base> tag s ।
view source
print?
1.<head>
2.<base href="http://www.webcoachbd.com/">
3.</head>
ei e e e i я uei e e e i я uei e e e i я uei e e e i я u ( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)
:
e i symbol e l a symbol , i , d p i o я p
e i я ।
p e i e a :
1.p Entity e n (ampersand) - &
2. Entity e – copy
3. semicolon -;
iiii
&copye t © - Copyright symbol.
a k sa k sa k sa k s
g e e b uя b e s e
e i a k s u ।
1.<p>Everything that goes up, must come &nbsp;&nbsp;&nbsp;&nbsp;down!</p>
pppp :
Everything that goes up, must come down!
ei e e e e g h e h o я e i e i
।
1.<p>
2.Less than - &lt; <br />
3.Greater than - &gt; <br />
4.Body tag - &lt;body&gt;
5.</p>
pppp :
Less than - <
Greater than - >
Body tag - <body>
ei e eei e eei e eei e e mmmm ( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)
:
n o e e d e nt n n i b uя d sk ।
ignore ।
1. ei e e k n e note я я reminder
2. sk p я я skp e n n p я .
3.Temporarily comment p я k n ei e e e n a m ।
<!--Note to self: This is my banner image! Don't forget -->
<img src="http://www.webcoachbd.com/pics/ferdousSugar.jpg" height="100"
width="200"/>
a n e o opening tag e closing tag ।
<!-- Opening Comment
-- > Closing Comment
ei e eei e eei e eei e e ---- <<<<!!!!- -- -- -- - eieieiei - -- -- -- - >:>:>:>:
o a я a m k t a m я <!— -- > n e
।
<!-- <input type="text"> size="12" /> -- Input Field -->
ei e e i n p n u ।
<input type="text" size="12" />
pppp : Input Field:
ei e e uei e e uei e e uei e e u ( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)
:
e t e я <img/> o я e i я
।
1.<img src="/sunset.gif" />
pppp :
ei e eei e eei e eei e e ---- SRC:SRC:SRC:SRC:
Src attribute t Src e a (source) a i я u picture file a s ।
u i я s ।
1. Standard URL
(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)
2. web server e file
(src="/../sunset.gif")
ei picture file e location e .ei e e file e location e m ।
URL Types:
Local Src Location Description
src="/sunset.gif" picture file e .html file e i directory a s ।
src="/../sunset.gif" picture file directory a s .html file ।
src="/../pics/sunset.gif"
pic directory e picture file directory a s .html file e
।
ei e eei e eei e eei e e ---- ALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTE:E:E:E:
Alt attribute s a k a i я p a k p । i я p
o i browser i я i я c ।
1.<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful
Sunset" />
pppp :
ei e eei e eei e eei e e ---- HEI GHTHEI GHTHEI GHTHEI GHT eeee WI DTH:WI DTH:WI DTH:WI DTH:
i я height e width я height e width attribute ।
1.<img src="/sunset.gif" height="50" width="100">
pppp :
ei e eei e eei e eei e e ---- VERTI CALLYVERTI CALLYVERTI CALLYVERTI CALLY eeee HORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GN ::::
Align e valign attribute i я a s ।
1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center
u
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>
pppp :
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!
ei e eei e eei e eei e e ---- i яi яi яi я ::::
i я ।
1.<a href="http://www.webcoachbd.com/">
2.<img src="/sunset.gif">
3.</a>
p :
ei e eei e eei e eei e e ---- THUMBNAI LS:THUMBNAI LS:THUMBNAI LS:THUMBNAI LS:
Thumbnails i я i я , i я ei picture quality k
Thumbnails e m i я i я я ।
1.<a href="/sunset.gif">
2.<img src="/thmb_sunset.gif">
3.</a>
ei e e uei e e uei e e uei e e u ( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)
:
Horizontal e vertical e tabular data p k t a t k n e n
nt я o я i e t । e in cell ei e e
<table> e </table> ।
1.<tr> Horizontal ।
2 <td> Horizontal data cell ।
3 <th> data cell e heading я ।
4 <tfoot> footer я ।
1.<table border="1">
2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
3.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
4.</table>
pppp :
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
a g ea g ea g ea g e ssss ::::
Rowspan a s e colspan a s
header <th> <th> default header l
।
01.<table border="1">
02.<tr>
03.<th>Column 1</th>
04.<th>Column 2</th>
05.<th>Column 3</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>
09.<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
10.<tr><td colspan="3">Row 3 Cell 1</td></tr>
11.</table>
pppp :
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
CELL PADDI NGCELL PADDI NGCELL PADDI NGCELL PADDI NG eeee SPACI NGSPACI NGSPACI NGSPACI NG
e cellpadding e a ( , ) e s (space)
a e cellspacing cell e s (space) a ।
01.<table border="1" cellspacing="10"
02.bgcolor="rgb(0,255,0)">
03.<tr>
04.<th>Column 1</th>
05.<th>Column 2</th>
06.</tr>
07.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
08.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
09.</table>
pppp :
Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 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>
6.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
7.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
8.</table>
pppp :
Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
ei e e g u uei e e g u uei e e g u uei e e g u u ( HTML( HTML( HTML( HTML Backgr ound Col or s Tut or i alBackgr ound Col or s Tut or i alBackgr ound Col or s Tut or i alBackgr ound Col or s Tut or i al
i n Bangl a)i n Bangl a)i n Bangl a)i n Bangl a)
:
bgcolor e u o я e g un nt Bgcolor e u a ei e e
e <body> e <table> e a k
g un s i i e e g un(CSS u ) ।
:
<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>
pppp :
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!
g ug ug ug u eeee ::::
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>
pppp :
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)".
eeee ::::
1.<table>
2.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
3.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
4.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
5.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
6.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
7.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
8.</table>
pppp :
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 g ue t g ue t g ue t g u COLORCOLORCOLORCOLOR eeee FONT COLOR:FONT COLOR:FONT COLOR: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>
pppp :
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>
pppp :
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.
ei e e g u uei e e g u uei e e g u uei e e g u u ( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n
Bangl a)Bangl a)Bangl a)Bangl a)
:
g un e u e ei e e i я g un i я ।
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>
pppp :
This table has
a background
image
ei e eei e eei e eei e e ---- g ug ug ug u ::::
u u e । e
g un ।
1.<table height="200" width="300"
2.background="http://www.tizag.com/pics/htmlT/background.jpg" >
3.<tr><td>This table has a background image</td></tr>
4.</table>
pppp :
This table has a background image
ei e eei e eei e eei e e ---- g ug ug ug u
n e o n g un e n n g un n n i я
i gif jpeg ।
1.<table height="100" width="150"
2.background="http://www.tizag.com/pics/htmlT/pattern.jpg" >
3.<tr><td>This table has a background patterned image</td></tr>
4.</table>
pppp :
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>
pppp :
ei e e uei e e uei e e uei e e u ( HTML Fr ame)( HTML Fr ame)( HTML Fr ame)( HTML Fr ame)
:
e e i e i b uя ui n a ei e e k n p ।
ei e eei e eei e eei e e ---- A GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGE::::
e e e e n । u k i o я n
я ।
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 :
e k
frameset – e e parent tag page e characteristics frameset e
।
frameset cols="#%, *"- Cols(column) e width u u (1st
column)
total page e 30% e "*", e a total page e 70% content(2nd
column) ।
frame src="/" o я e ।
iiii ::::
1.<html><head></head>
2.<frameset rows="20%,*">
3.<frame src="/title.html">
4.<frameset cols="30%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">
7.</frameset>
8.</html>
frameset rows="#%, *"-e a frameset cols="#%, *"- i।
FRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMESPACI NG:ESPACI NG:ESPACI NG:ESPACI NG:
FrameBorder e FrameSpacing attribute e e Spacing e ugly gray lines
।
1.<html><head></head>
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%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">
7.</frameset>
8.</html>
p :
e k
NORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLI NG:NG:NG:NG:
Noresize attribute e iя ।
scrolling="(yes/no)"- e scroll ।
1.<html><head></head>
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>
a ga ga ga g яяяя pppp ।।।।
ei e e u uei e e u uei e e u uei e e u u ( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)
:
ei e e u s ei e e
u ।
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>
pppp :
Tables inside
tables!
ei e e sei e e sei e e sei e e s uuuu
Standard layout u a s , e content p k e
o i e ।
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>
11.<tr><td>Links!</td></tr>
12.<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>
18.</td></tr></table>
pppp :
Place a banner here
Lin
ks!
Lin
ks!
Lin
ks!
Content goes here
01.<table title="Shell" height="250" width="400"
02.border="0" bgcolor="black" cellspacing="1" cellpadding="0">
03.<tr height="50"><td bgcolor="white">
04.<table title="banner" id="banner">
05.<tr><td>Banner goes here</td></tr>
06.</table>
07.</td></tr>
08.<tr height="25"><td bgcolor="white">
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>
19.</td></tr></table>
pppp :
Banner goes here
Links! Links! Links!
Content goes here
ei e e u я uei e e u я uei e e u я uei e e u я u ( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)
:
o я e music a я Embed e music e src attribute e media
file e ।
1.<embed src="/Madine Ko Jain.mp3" />
EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – p mp mp mp m ::::
Embeded media player e s iя attribute ।
1. width - media player e p s
2. height - media player e uc
3. hidden – e media player p ei attribute
я o я e music я n option ।
1.<embed src="/last breath.mp3" width="360" height="165" />
EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – pppp ::::
Embeded media player e p s iя attribute ।
autostart – ei attribute e false true । true o я ।
loop - ei attribute e false true। true false ।
volume - ei attribute d media file e volume e 0-100।
view source
print?
1.<embed src="/beethoven.mid" autostart="false" loop="false"
2.volume="60" />
ei e eei e eei e eei e e oooo uuuu ( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)
:
Music i e o i <embed /> o я e p । image e embed e closing e
p я i। src attribute e URL(local global) o o я p ।
1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg"
2.autostart="false" />
p :
href attribute e o URL o o я p ।
1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">
2.motiontween1easy.swf</a>
( i k play)
ei e eei e eei e eei e e ---- oooo
Flash movies (.swf), AVI's (.avi), and MOV's (.mov)। embed e ।
.swf files - ei c
.wmv files – ei c i k ui n я i ।
.mov files - ei c e ki i
.mpeg files – e e standard Moving Pictures Expert Group d compression movie
i ।
u in swf, mpeg ei ।
ei e eei e eei e eei e e ---- EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES:
Src attribute e <embed /> e attribute volume, autostart, hidden, and
loop ।
autostart - ei attribute e false true । true я o
।
hidden - ei attribute e 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 o false .
playcount - Setting a playcount a c media x number n repeat a o repeat
(playcount="2" e a video i ).
volume - ei attribute d media file e volume set e 0-100।
ei e eei e eei e eei e e ( HTML Body)( HTML Body)( HTML Body)( HTML Body)
:
Body tag web page e element Tables, Lists, Forms, paragraph element
Body element e ।
HTMLHTMLHTMLHTML ---- BODY MARGI NS:BODY MARGI NS:BODY MARGI NS:BODY MARGI NS:
Attributes
Leftmargin: body element. e я ।
topmargin :body element e u я ।
1.<body topmargin="50">
2.<body leftmargin="50">
pppp :
Top Margin
Left Margin
HTMLHTMLHTMLHTML ---- BASE TEXT:BASE TEXT:BASE TEXT:BASE TEXT:
Text attributes e Body tag e k e ।
1.<body text="red" >
view source
print?
1.<body text="rgb(255,0,0)" >
ei e eei e eei e eei e e uuuu ( HTML Di v( HTML Di v( HTML Di v( HTML Di v Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a)
:
<div> a e t я a body e ।
Div e n block e n an a e t ।
e e e k t Div e n a t ।
attributes ।
id
width
height
title
style
strong visualization e я style attribute e p ।
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
ei e e uei e e uei e e uei e e u
u a o 3 al div e n ।
beginning and ending e div e n ei e e e n ।
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 paragraph with all of your
readable material.</p>
09.</div>
pppp :
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>
pppp :
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.
ei e e l e iei e e l e iei e e l e iei e e l e i ( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)
:
<b> bold tag k l ।
1.<b>This text is entirely BOLD!</b>
pppp : Bold:
This text is entirely BOLD!
k highlight bold tag .
1.<p><b>Don't</b> touch that!</p>
pppp :
Don't touch that!
dictionary fashion. я bold tag ।
1.<p><b>Cardio:</b> Latin word meaning of the heart.</p>
pppp : Dictionary
Cardio: Latin word meaning of the heart.
HTMLHTMLHTMLHTML ---- I TALI C( S)I TALI C( S)I TALI C( S)I TALI C( S)
The italics tag key word or phrase highlight u ei tags font face
stylize 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>!
pppp : HTML Italics:
Italic tag!
Emphasized Text!
Create a blockquote!
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>
pppp : HTML Dictionary
HTML
Hyper Text Markup Language
or
HTML
Hyper Text Markup Language
HTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CSSSS
<b> and the <i> tags u i e text format e я ।
k ।
1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>
pppp :
Phillip M. Rogerson MD
<b> and the <i> tags u i k ।
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>
pppp : Format Links:
Include several external links throughout your texts as references to your viewers, we will
discuss HTML Links in a later lesson.
ei e e eei e e eei e e eei e e e prepreprepre ( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e)
:
code tag e text computer code e e text e font face,
size, e letter spacing ।
1.This text has been formatted to be computer <code>code</code>!
pppp : 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.
HTMLHTMLHTMLHTML ---- CODE LI NKSCODE LI NKSCODE LI NKSCODE LI NKS
link web page e ।
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>
pppp : Code Links:
Feel free to search Google for anything you wish to find on the internet.
HTMLHTMLHTMLHTML ---- <PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG
<pre> tag e HTML coding e i b , s k p
a i u ।
1.<pre>
2.Roses are Red,
3.e s Violets are blue,
4.I may sound crazy,
5.e s But I love you!
6.</pre>
pppp :
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!
ei e e s skpei e e s skpei e e s skpei e e s skp,,,, skpskpskpskp,,,,sT isT isT isT i
:
1.<p>This text is <sup>superscripted!</sup></p>
pppp : Superscript:
This text is superscripted!
HTMLHTMLHTMLHTML – EXPONENTSEXPONENTSEXPONENTSEXPONENTS
a exponential я <sup> tag ।
1.2<sup>3</sup> = 8
2.14<sup>x</sup>
pppp : Exponents:
23
= 8
14x
HTMLHTMLHTMLHTML – ::::
u p n reference я <sup> tag ।
1.<p>"It was a lover's tryst<sup>1</sup>."
2.<hr />
3.1. Secret meeting between lovers
pppp : Footnote
"It was a lover's tryst1
."
1. Secret meeting between lovers
HTMLHTMLHTMLHTML ---- SUBSCRI PTSUBSCRI PTSUBSCRI PTSUBSCRI 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
HTMLHTMLHTMLHTML – STRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGH
<del> tag e k o ।
1.<p>This text is <del>scratched</del> out!</p>
pppp : Strikethrough
This text is scratched out!
HTMLHTMLHTMLHTML ---- CHECK OFF TASK:CHECK OFF TASK:CHECK OFF TASK: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>
pppp :
1. Clean my room
2. Cook Dinner
3. Wash Dishes
ei e eei e eei e eei e e ( HTML For m)( HTML For m)( HTML For m)( HTML For m)
:
web server (name, email address, credit card, i ) g k t webmaster e я Forms
t tool я a form i g e ,
order , я , forum e k я s i ।
TEXT FI ELDSTEXT FI ELDSTEXT FI ELDSTEXT FI ELDS
m forms я Input fields c form sandwich e ।
<input> tag e attributes m n я u ।
type - ei attribute input field e p text, submit, e password ।
name - ei attribute given field e reference ।
size - ei attribute field e horizontal width ।
maxlength – ei attribute character e maximum m
<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>
pppp : Input Forms
Name:
Password:
HTMLHTMLHTMLHTML ---- I NPUT TAGS:I NPUT TAGS:I NPUT TAGS:I NPUT TAGS:
Input fields e я an k checkboxes, text fields, radios, e form submission
buttons। <input /> tag e closing tag p я i।
HTML -Type Attribute:
Type attributes e e p input tag input tag ।
1. "text"
2. "password"
3. "checkbox"
4. "radio"
5. "submit"
6. "reset"
HTMLHTMLHTMLHTML – CHECKBOXES:CHECKBOXES:CHECKBOXES:CHECKBOXES:
Checkboxes 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 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>
pppp : Checkboxes:
Select your favorite cartoon characters.
Goofy
Donald
Bugs Bunny
Scooby Doo
Email Myself
HTMLHTMLHTMLHTML ---- SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS:
Input type e "submit" a k t u l ।specifies a very unique button.
submit button e e activate ।
submission button i attribute p я c value attribute।
b value attribute e button u p "Submit" or "Continue"
b value attribute e .
1.<input type="submit" value="Submit" />
2.<input type="submit" value="Continue Please!" />
p : Submit Buttons
Submit Continue Please!
HTMLHTMLHTMLHTML ---- RESET BUTTONS:RESET BUTTONS:RESET BUTTONS:RESET BUTTONS:
input type reset button। Setting the type to reset button k form e
s a s "start over" button reset button e
।
view source
print?
1.<input type="reset" value="Reset Fields" />
2.<input type="reset" value="Start Over" />
pppp : Reset Buttons:
Reset Fields Start Over
ei e e kk lei e e kk lei e e kk lei e e kk l ( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d)
:
Text fields kt k i e i web server e
scripting language (PHP, PERL, or ASP) e p k ।
HTMLHTMLHTMLHTML ---- TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:
Size attribute e text area e size nt default size 20 characters ।
1.<input type="text" size="5" />
2.<input type="text" size="15" />
3.<input type="text" size="25" />
pppp : Text Fields:
HTMLHTMLHTMLHTML ---- TEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTH::::
maxlength attribute s ic characters i e iя
s o characters i d maxlength attribute size e
maxlength e i o p я ।
1.<input type="text" size="5" maxlength="5" />
2.<input type="text" size="15" maxlength="15" />
3.<input type="text" size="25" maxlength="25" />
pppp : Maxlength Attribute
HTMLHTMLHTMLHTML ---- TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE:
value attribute i k l ।
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!
ei e e kk eei e e kk eei e e kk eei e e kk e ( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea)
:
kk e b e e iuя Paragraphs, essays, or memos
kk e e kk e e opening e closing kk e e
o я e kk e p ।
1.<textarea>Text Area!</textarea>
p
HTMLHTMLHTMLHTML ---- TEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND ROWS:OWS:OWS:OWS:
Adjust the of the text area size e appearance attributes p я
cols androws। p attribute e я text area ।
1.<textarea cols="20" rows="10">Text Area!</textarea>
2.<textarea cols="40" rows="2">Text Area!</textarea>
3.<textarea cols="45" rows="5">Text Area!</textarea>
p :
HTMLHTMLHTMLHTML ---- TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP:
wrap attribute k textarea text field e
Wrap e :
1.soft
2.hard
3.off
wrap attribute e Soft word text area but form word
(Line breaks a )
wrap attribute e Hard word text area e i e Line breaks a
। form text box e c।
wrap attribute e Off word text area e e i a ।
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">
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 : No Wrapping
HTMLHTMLHTMLHTML ---- TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY:
readonly attribute e value yes no। readonly attribute e yes textarea e
k n ।
1.<textarea cols="20" rows="5" wrap="hard" readonly="yes">
2.As you can see many times word wrapping is often the desired
3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>
p :
HTMLHTMLHTMLHTML – DI SABLEDDI SABLEDDI SABLEDDI SABLED
disabled attribute p textarea highlight , e e
।
1.<textarea cols="20" rows="5" wrap="hard" disabled="yes">
2.As you can see many times word wrapping is often the desired
3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>
p :
ei e eei e eei e eei e e oooo ( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)
:
Radios e p i e a k o e
"multiple choice" ei kiя e p я Radios ।
1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
pppp : Radios:
Italian:
Greek:
Chinese:
e i e i n o o u ।
1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
4.
5.Male: <input type="radio" name="gender" />
6.Female: <input type="radio" name="gender" />
pppp : Multiple Radios:
Italian:
Greek:
Chinese:
Male:
Female:
ei e eei e eei e eei e e ---- RADI O CHECKED:RADI O CHECKED:RADI O CHECKED:RADI O CHECKED:
checked e u ,e radio a l t ।
1.Italian: <input type="radio" name="food" checked="yes" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
p :Default Italian:
Italian:
Greek:
Chinese:
ei e eei e eei e eei e e ( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m)
:
upload form iuя pictures, movies, e я webpages upload e upload
form e input form । type attribute e file upload form
।
1.<input type="file"/>
pppp :::: UPLOAD FORMUPLOAD FORMUPLOAD FORMUPLOAD FORM
MAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZE
upload i e size e webserver e space k e я
hidden input field e o specific attributes ।
1.<input type="hidden" name="MAX_FILE_SIZE" value="500" />
2.<input type="file"/>
e value 100 file c 100kb ।
p :
ei e e D u sei e e D u sei e e D u sei e e D u s ( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st )
:
Drop down lists forms. internet e Drop down lists o k p i
s d Drop down lists e a a ic select
।
Drop down lists <select> and <option> tags <select> tag e Drop down lists
e <option> tag e Drop down lists e ।
1.<select>
2.<option>California -- CA</option>
3.<option>Colorado -- CO</option>
4.<option>Connecticut -- CN</option>
5.</select>
pppp :::: DROP DOWN LI STDROP DOWN LI STDROP DOWN LI STDROP DOWN LI ST
selected attributee n select a s p ।
HTMLHTMLHTMLHTML ---- SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS:
size attribute drop down list s p ।
size attribute select options e p s scroll
selected attributee n select a s p ।
1.<select size="3">
2.<option>California -- CA</option>
3.<option>Colorado -- CO</option>
4.<option>Connecticut -- CN</option>
5.</select>
pppp :::: SELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMS
California -- CA
Colorado -- CO
Connecticut -- CN
HTMLHTMLHTMLHTML ---- SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:
multiple attribute e e a select ।
1.<select multiple="yes" size="3">
2.<option>California -- CA</option>
3.<option>Colorado -- CO</option>
4.<option>Connecticut -- CN</option>
5.</select>
pppp :::: MULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONS
California -- CA
Colorado -- CO
Connecticut -- CN
Html bangla

Mais conteúdo relacionado

Mais procurados (20)

CSS Boc model
CSS Boc model CSS Boc model
CSS Boc model
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Html ppt
Html pptHtml ppt
Html ppt
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html forms
Html formsHtml forms
Html forms
 
HTML X CSS
HTML X CSSHTML X CSS
HTML X CSS
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Html
HtmlHtml
Html
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html ppt computer
Html ppt computerHtml ppt computer
Html ppt computer
 
Jquery
JqueryJquery
Jquery
 
Bangla HTML Tutorial
Bangla HTML TutorialBangla HTML Tutorial
Bangla HTML Tutorial
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 

Semelhante a Html bangla

#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)Coder Tech
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)christopherfross
 
HTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteHTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteMahinda Gamage
 
Web technologies: Lesson 2
Web technologies: Lesson 2Web technologies: Lesson 2
Web technologies: Lesson 2nhepner
 
Body Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.SivakumarBody Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.SivakumarSivakumar R D .
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quidePL dream
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideJerry Wijaya
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideAshok Suragala
 
Система рендеринга в Magento
Система рендеринга в MagentoСистема рендеринга в Magento
Система рендеринга в MagentoMagecom Ukraine
 

Semelhante a Html bangla (20)

Bangla html
Bangla htmlBangla html
Bangla html
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)
 
Advance HTML
Advance HTMLAdvance HTML
Advance HTML
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
HTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteHTML Web design english & sinhala mix note
HTML Web design english & sinhala mix note
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html1
Html1Html1
Html1
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Web technologies: Lesson 2
Web technologies: Lesson 2Web technologies: Lesson 2
Web technologies: Lesson 2
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Hardcore HTML
Hardcore HTMLHardcore HTML
Hardcore HTML
 
Body Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.SivakumarBody Section in HTML - R.D.Sivakumar
Body Section in HTML - R.D.Sivakumar
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick learning guide
Html5 quick learning guideHtml5 quick learning guide
Html5 quick learning guide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Система рендеринга в Magento
Система рендеринга в MagentoСистема рендеринга в Magento
Система рендеринга в Magento
 
LEARN HTML IN A DAY
LEARN HTML IN A DAYLEARN HTML IN A DAY
LEARN HTML IN A DAY
 

Último

AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 

Último (20)

AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 

Html bangla

  • 1. ei e e uei e e uei e e uei e e u |||| ( HTML Tut or i al i n( HTML Tut or i al i n( HTML Tut or i al i n( HTML Tut or i al i n Bangl a)Bangl a)Bangl a)Bangl a) ei e eei e eei e eei e e uuuu e n (Elements) ( Tag) a u ( Attributes) a c ( 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) u s : яoяoяoяo s ei e es ei e es ei e es ei e e u eu eu eu e • ei e e e a c Hypertext Markup Language.e p g я , я।
  • 2. • o ei я e я। • e i e o я e e e я p • я sk p e e a p o я i o PHP+Database Driven WebSite । • webcoachbd.com e u ei e e । я ei e e (a ei e e ) Notepad open i i a a n e i Netbeans or Dreamweaver. o e я a j e i । ei e e b я - • ei e e e n(Elements) • ei e e (Tag) • ei e e a u (Attribute) e s >> ei e e eei e e eei e e eei e e e uuuu ( HTML El ement s)( HTML El ement s)( HTML El ement s)( HTML El ement s) : e ne ne ne n (Elements): e n HTML e nd n HTML page e p k a e n (tag) e HTML e n a s Web page e Paragraph text, , i i elements ei я । e e n(Element) a (opening tag) ,e n e 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 я e n(Element) e : HTML,head, title e body elements । e ।
  • 3. <html> Element...</html> p HTML HTML b p e less than o greater than ( < >) h : <html> । </html> a <html> Welcome to Bangladesh </html>। Welcome to Bangladesh ei Web page e p я Notepad e Web page eя Notepad Open p start All Programs > Accessories >Notepad Notepad m 1.<html> 2.Welcome to Bangladesh 3.</html> e Notepad e i save e k index.html save । i Double click open । Browser e open я e web Page । <head> element e k n head, k n s n <head> elements я header head elements e b uя p i e n e p । <title> element <head> e n e <title> e n i b title elements e opening (<title>)e closing(</title>) tag e browser e i p । 1.<html> 2.<head> 3.<title> My WebPage!</title> 4.</head> 5.</html> <body> element body element web page e p web page e i body element e । 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 b uя e я p o я ।
  • 4. ei e e uei e e uei e e uei e e u ( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a) : ei e e k n u , e e p paragraph paragraph e , e । e p a . (opening tag) . a (contents) . (closing tag)। ei e e e web page e n । 1.<p>A Paragraph Tag</p> e ak o u । 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 NGCLOSI NGCLOSI NGCLOSI NG :::: closing tag p я i e n c line break tag e <br/> p a e i a i я e । 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--
  • 5. ei e eei e eei e eei e e e T ue T ue T ue T u uuuu ( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a) : mp я e u e attributes e ps, uc attributes value e ps o uc । 1.<tag attributes ="value" attributes ="value"> 1.<table width="150" height="100"> Class id attribute e p e i n Class id attribute i n i an e я skp , e e (e m u e । 1.<p>Paragraph type 1 Italics</p> 2.<p>Paragraph type 2 Bold</p> p Paragraph type 1 Italics Paragraph type 2 Bold ei e e e Tei e e e Tei e e e Tei e e e T u ( HTML NAME ATTRI Bu ( HTML NAME ATTRI Bu ( HTML NAME ATTRI Bu ( HTML NAME ATTRI BUTE)UTE)UTE)UTE) Name attribute Class id attribute n Name attribute p i a i i n । 1.<input type="text" name="TextField" /> p : ei attribute TextField p i an e a a (javascript , css) ei e e i e Tei e e i e Tei e e i e Tei e e i e T uuuu ( HTML( HTML( HTML( HTML---- TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES) ei attribute ei e e e n e e popup k k e k o я u u popup k p । <h2 title="Hello There!">Titled Heading Tag</h2> p Ti t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng Tag ei e e e i e Tei e e e i e Tei e e e i e Tei e e e i e T uuuu ( HTML( HTML( HTML( HTML---- ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES) e n n a s align attribute align n
  • 6. left, right & center । l left align । 1.<h2 align="center">Centered Heading</h2> Cent er ed Headi ngCent er ed Headi ngCent er ed Headi ngCent 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 gnedLef t al i gnedLef t al i gnedLef t al i gned headi ngheadi ngheadi ngheadi ng Cent er ed headi ngCent er ed headi ngCent er ed headi ngCent er ed headi ng Ri ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ng GENERI CGENERI CGENERI CGENERI C ATTRI BUTES:ATTRI BUTES:ATTRI BUTES:ATTRI BUTES: Attribute o я m s iя ei u a HTML Tag e я । Attribute Options Function align right, left, center n (Horizontally) aligns tags valign top, middle, bottom u m(Vertically) aligns tags bgcolor numeric, hexadecimal, RGB values Element e background color । backgroundURL Background image u element । id a Element e Name Cascading Style Sheets (css) । class a Element e Cascading Style Sheets (css) । width Numeric Value Tables, images, or table cells e width । height Numeric Value Tables, images, or table cells e height ।
  • 7. title a elements e "Pop-up" title । ei e e g uei e e g uei e e g uei e e g u ( HTML( HTML( HTML( HTML Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a) : я p k t g e i e । <p> a c ( g ) ei g k u a i । 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. ei e e gei e e gei e e gei e e g ---- я sя sя sя s ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON) o k n e justify ei e e e justify e i я । 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. ei e e gei e e gei e e gei e e g ---- ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –CENTERI NG)CENTERI NG)CENTERI NG)CENTERI NG)
  • 8. o k n e g e p i display window e a s । 1.<p align="center">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. ei e e gei e e gei e e gei e e g ---- e ie ie ie i ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT) o k n e g e p i display window e a s । 1.<p align="right">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. ei e eei e eei e eei e e uuuu ( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a) : ei e e e i i e k bold p e e m u m 1 6 e d e 1 e 6 1.<body> 2.<h1>Headings</h1> 3.<h2>are</h2> 4.<h3>great</h3> 5.<h4>for</h4> 6.<h5>titles</h5>
  • 9. 7.<h6>and subtitles</h6> 8.</body> Headings ar ear ear ear e GREATGREATGREATGREAT f orf orf orf or titles and subtitles k ei p e яs i b option । e e built in attribute । a i b । eeee gggg e e te e te e te e t :::: e paragraph e u । 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. 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.
  • 10. ei e e i b uei e e i b uei e e i b uei e e i b u ( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak) : i b a e n i b e i a i ei e e e d i b h i b paragraph o a HTML element(tables, lists, and headings)e । 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 address । Will Mateson Box 61 Cleveland, Ohio p । 1.<p>Sincerely,<br /> 2.<br /> 3.<br /> 4.Kevin Sanders<br /> 5.Vice President</p> p : Sincerely, Kevin Sanders Vice President o e p я i b e closing tag e p я i। HTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULE:::: Horizontal rule <hr/> p <hr/> screen e u n i p line break tag e Horizontal rule tag e closing tag i। 1.<hr /> 2.Use
  • 11. 3.<hr /><hr /> 4.Them 5.<hr /> 6.Sparingly 7.<hr /> pppp : Use Them Sparingly Horizontal rule gn я p k t । 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", JRR Tolkein. 2. "The Fellowship of the Ring" JRR Tolkein. pppp : Goal sGoal sGoal sGoal s 1. Find a Job 2. Get Money 3. Move Out Start attributes я ic m s । 1.<h4 align="center">Goals</h4> 2.<ol start="4" >
  • 12. 3.<li>Buy Food</li> 4.<li>Enroll in College</li> 5.<li>Get a Degree</li> 6.</ol> pppp : Goal sGoal sGoal sGoal s 4.Buy Food 5.Enroll in College 6.Get a Degree ei e e k sei e e k sei e e k sei e e k s ( HTML ORDERED LI ST( HTML ORDERED LI ST( HTML ORDERED LI ST( HTML ORDERED LI STSSSS CONTI NUED)CONTI NUED)CONTI NUED)CONTI NUED) o p s(ordered list) e 1,2,3 m m type attribute m । 1.<ol type="a"> 2.<ol type="A"> 3.<ol type="i"> 4.<ol type="I"> Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types: Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals a. Find a Job b. Get Money c. Move Out A. Find a Job B. Get Money C. Move Out i. Find a Job ii. Get Money iii. Move Out I. Find a Job II. Get Money III. Move Out ei e e kei e e kei e e kei e e k ssss ( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI STS)S)S)S) <ul> s s p 1. squares 2.discs 3.circles । default full discs । 1.<h4 align="center">Shopping List</h4> 2.<ul> 3.<li>Milk</li>
  • 13. 4.<li>Toilet Paper</li> 5.<li>Cereal</li> 6.<li>Bread</li> 7.</ul> pppp : Shoppi ng Li stShoppi ng Li stShoppi ng Li stShoppi ng Li st • Milk • Toilet Paper • Cereal • Bread type attributes unordered list e a । <ul type="square"> <ul> type="dics"> <ul> type="circle"> type="square" type="disc" type="circle" Milk Toilet Paper Cereal Bread • Milk • Toilet Paper • Cereal • Bread o Milk o Toilet Paper o Cereal o Bread ei e eei e eei e eei e e ssss ( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI STS)TS)TS)TS) Definition list e a i <dl> tag Definition list Define a j i bold u Definition list tag e o tag an k 1. <dt> 2. <dd> । <dl> tag: s e я ei । <dt> tag: j (Define) ei । <dd> tag: <dt> tag e m e । 1.<dl> 2.<dt><b>Fromage</b></dt>
  • 14. 3.<dd>French word for cheese.</dd> 4.<dt><b>Voiture</b></dt> 5.<dd>French word for car.</dd> 6.</dt> pppp : Fromage French word for cheese. Voiture French word for car. ei e e uei e e uei e e uei e e u ( HTML Col or code)( HTML Col or code)( HTML Col or code)( HTML Col or code) : Color set d , , , я, ei e e e value e 16 । :::: Black Gray Silver White Yellow Lime Aqua Fuchsia Red Green Blue Purple Maroon Olive Navy Teal ei e eei e eei e eei e e ---- d яd яd яd я ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: RGB VALUE)RGB VALUE)RGB VALUE)RGB VALUE) web design e я HTML rgb Non-IE browser, HTML rgb CSS u ei m n я । Red, Green e Blue ei c rgb । p 0( ) 255( m )। rgb rgb(RED,GREEN,BLUE)। RED, GREENRED, GREENRED, GREENRED, GREEN eeee BLUEBLUEBLUEBLUE 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
  • 15. ei e eei e eei e eei e e ---- dddd :::: kkkk ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: HEXADECI MAL)HEXADECI MAL)HEXADECI MAL)HEXADECI MAL) p p Hexadecimal system e ei system e я o practice a я ei Hexadecimal system k t g e Hexadecimal system in standard color। Hexadecimal 6 digit u s p digit(RR), Red value digit(GG), Green value e digit(BB), Blue value । ei e eei e eei e eei e e kkkk bgcolor="#RRGGBB" ei e eei e eei e eei e e ---- ( HTML( HTML( HTML( HTML---- COLORCOLORCOLORCOLOR CODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CODE)ODE)ODE)ODE) Hexadecimal system e Numbering system 16 digit e un । 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 m ei m n e u । e se se se s kkkk :::: bgcolor="#FFFFFF" e "F" c c e ei ("#FFFFFF") s । kkkk tttt:::: (15 * 16) + (15) = 255 u t s p F e (15) 16 d 255 p k t c o u । uuuu : bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green)
  • 16. (7 * 16) + (0) = 112 05(BB - Blue) (0 * 16) + (5) = 5 ei e e uei e e uei e e uei e e u ( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a) : <font> o i k s i , iя e size, color e face attributes n s iя <basefont> я k e i s i , iя e e । <font> e <basefont> e e ( e e u ) u । ( FONT SI ZE)( FONT SI ZE)( FONT SI ZE)( FONT SI ZE) Size attribute e n e iя n e e g c 1( ) 7( )। n e l c 3। 1.<p> 2.<font size="5">Here is a size 5 font</font> 3.</p>{} pppp : Here is a size 5 font. ( FONT COLOR)( FONT COLOR)( FONT COLOR)( FONT COLOR) attribute e font e color । 1.<font color="#990000">This text is hexcolor #990000</font> 2.<br /> 3.<font color="red">This text is red</font> pppp : This text is hexcolor #990000 This text is red ( FONT( FONT( FONT( FONT FACE)FACE)FACE)FACE) n face e k t o u s e n i s n e l Times New Roman n । 1.<p> 2.<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph 3.has had its font...</font>
  • 17. 4.</p> pppp : This paragraph has had its font formatted by the font tag! ( BASEFONT)( BASEFONT)( BASEFONT)( BASEFONT) Basefont e o я l n basefont । 01.<html> 02.<body> 03.<basefont size="2" color="green"> 04.<p>This paragraph has had its font...</p> 05.<p>This paragraph has had its font...</p> 06.<p>This paragraph has had its font...</p> 07.</basefont> 08.</body> 09.</html> pppp : This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! i font basefont e e ( e e u ) । 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 p ak snp ak snp ak snp ak sn s is is is i :::: n s iя s i । 1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize 2.your font to achieve a desired look.</p> pppp :
  • 18. Customize your font to achieve a desired look. ei e e uei e e uei e e uei e e u ( HTML Li nk)( HTML Li nk)( HTML Li nk)( HTML Li nk) : e o i k s anchor tag e k , i я, e o । ei e eei e eei e eei e e ---- i kki kki kki kk | HTML| HTML| HTML| HTML---- HYPERTEXT REFERENCEHYPERTEXT REFERENCEHYPERTEXT REFERENCEHYPERTEXT REFERENCE ( HREF)( HREF)( HREF)( HREF) href attribute e e n । Hypertext reference Internal, Local, Global । Internal: e i я o । Local : web site e я o । Global: web site e a web site e o Internal - href="#anchorname" Local - href="/../pics/picturefile.jpg" Global - href="http://www.tizag.com/" ei e e kkei e e kkei e e kkei e e kk ( HTML( HTML( HTML( HTML---- TEXT LI NKS)TEXT LI NKS)TEXT LI NKS)TEXT LI NKS) <a> e </a> tag d t e href attribute e s href attribute opening tag e opening e closing tag e , web я । 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> pppp : Global Link Tizag Home ESPN Home Yahoo Home ei e eei e eei e eei e e ( HTML( HTML( HTML( HTML---- LI NKLI NKLI NKLI NK TARGET)TARGET)TARGET)TARGET) Target attribute d , я window a e i browser window ।
  • 19. target=" _blank" browser window page । _self" 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 я p web site ESPN.COM e Target attribute e browser k ESPN.COM web site window open web site e । 1.<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a> pppp : _blank Target: ESPN.COM ei e e i iei e e i iei e e i iei e e i i uuuu ( HTML E mai l )( HTML E mai l )( HTML E mai l )( HTML E mai l ) : ei e e i i e я ei e e standard anchor tag <a> href attribute , h inverted comma e i i । <a href= "mailto: abc@mail.com" >Email Example</a> pppp : Email Example a ka ka ka k ei e eei e eei e eei e e i ii ii ii i :::: i i a k c 1. subject 2.body Subject - i i e subject e яi information । Body - i i e body яi information । <a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a> e u ei i i u k subject e body (Subject e body ) u l । e e e i o i a u
  • 20. । p : 2nd Email Example ei e e eei e e eei e e eei e e e i ii ii ii i ( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor ) : i i я u site e Email i i e Email u l । <a href="mailto: ferdous@yahoo.com?subject=Feedback" > Ferdous@yahoo.com</a> pppp : mailto: ferdous@webcoachbd.com?subject=feedback a Email । mailto: ferdous@webcoachbd.com?subject=feedback <a href="mailto: ferdous@webcoachbd.com?subject=Feedback&body=Sweet site!"> ferdous@ webcoachbd.com</a> pppp : Complete Email: mailto: ferdous@webcoachbd.com?subject=feedback&body =sweet site! ei e eei e eei e eei e e uuuu (HTML-download links) u я i place k e u я image link e я k t thumbnail u s । HTML Code: <a href="http://www.webcoachbd.com/pics/htmlT/blanktext.zip">Text Document</a> pppp : Download a Text Document: Text Document ei e e lei e e lei e e lei e e l ( HTML( HTML( HTML( HTML---- DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE) <base> ei e e head element e e default URL я я я я <base> tag s । view source print? 1.<head> 2.<base href="http://www.webcoachbd.com/">
  • 21. 3.</head> ei e e e i я uei e e e i я uei e e e i я uei e e e i я u ( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a) : e i symbol e l a symbol , i , d p i o я p e i я । p e i e a : 1.p Entity e n (ampersand) - & 2. Entity e – copy 3. semicolon -; iiii &copye t © - Copyright symbol. a k sa k sa k sa k s g e e b uя b e s e e i a k s u । 1.<p>Everything that goes up, must come &nbsp;&nbsp;&nbsp;&nbsp;down!</p> pppp : Everything that goes up, must come down! ei e e e e g h e h o я e i e i । 1.<p> 2.Less than - &lt; <br /> 3.Greater than - &gt; <br /> 4.Body tag - &lt;body&gt; 5.</p> pppp : Less than - < Greater than - > Body tag - <body>
  • 22. ei e eei e eei e eei e e mmmm ( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a) : n o e e d e nt n n i b uя d sk । ignore । 1. ei e e k n e note я я reminder 2. sk p я я skp e n n p я . 3.Temporarily comment p я k n ei e e e n a m । <!--Note to self: This is my banner image! Don't forget --> <img src="http://www.webcoachbd.com/pics/ferdousSugar.jpg" height="100" width="200"/> a n e o opening tag e closing tag । <!-- Opening Comment -- > Closing Comment ei e eei e eei e eei e e ---- <<<<!!!!- -- -- -- - eieieiei - -- -- -- - >:>:>:>: o a я a m k t a m я <!— -- > n e । <!-- <input type="text"> size="12" /> -- Input Field --> ei e e i n p n u । <input type="text" size="12" /> pppp : Input Field: ei e e uei e e uei e e uei e e u ( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a) :
  • 23. e t e я <img/> o я e i я । 1.<img src="/sunset.gif" /> pppp : ei e eei e eei e eei e e ---- SRC:SRC:SRC:SRC: Src attribute t Src e a (source) a i я u picture file a s । u i я s । 1. Standard URL (src=http://www. webcoachbd.com/pics/htmlT/sunset.gif) 2. web server e file (src="/../sunset.gif") ei picture file e location e .ei e e file e location e m । URL Types: Local Src Location Description src="/sunset.gif" picture file e .html file e i directory a s । src="/../sunset.gif" picture file directory a s .html file । src="/../pics/sunset.gif" pic directory e picture file directory a s .html file e । ei e eei e eei e eei e e ---- ALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTE:E:E:E: Alt attribute s a k a i я p a k p । i я p o i browser i я i я c । 1.<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" /> pppp :
  • 24. ei e eei e eei e eei e e ---- HEI GHTHEI GHTHEI GHTHEI GHT eeee WI DTH:WI DTH:WI DTH:WI DTH: i я height e width я height e width attribute । 1.<img src="/sunset.gif" height="50" width="100"> pppp : ei e eei e eei e eei e e ---- VERTI CALLYVERTI CALLYVERTI CALLYVERTI CALLY eeee HORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GN :::: Align e valign attribute i я a s । 1. align (Horizontal) o right o left o center 2. valign (Vertical) o top o bottom o center u 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> pppp : 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! ei e eei e eei e eei e e ---- i яi яi яi я ::::
  • 25. i я । 1.<a href="http://www.webcoachbd.com/"> 2.<img src="/sunset.gif"> 3.</a> p : ei e eei e eei e eei e e ---- THUMBNAI LS:THUMBNAI LS:THUMBNAI LS:THUMBNAI LS: Thumbnails i я i я , i я ei picture quality k Thumbnails e m i я i я я । 1.<a href="/sunset.gif"> 2.<img src="/thmb_sunset.gif"> 3.</a> ei e e uei e e uei e e uei e e u ( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a) : Horizontal e vertical e tabular data p k t a t k n e n nt я o я i e t । e in cell ei e e <table> e </table> । 1.<tr> Horizontal । 2 <td> Horizontal data cell । 3 <th> data cell e heading я । 4 <tfoot> footer я । 1.<table border="1"> 2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> 3.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> 4.</table> pppp : Row 1 Cell 1 Row 1 Cell 2
  • 26. Row 2 Cell 1 Row 2 Cell 2 a g ea g ea g ea g e ssss :::: Rowspan a s e colspan a s header <th> <th> default header l । 01.<table border="1"> 02.<tr> 03.<th>Column 1</th> 04.<th>Column 2</th> 05.<th>Column 3</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> 09.<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> 10.<tr><td colspan="3">Row 3 Cell 1</td></tr> 11.</table> pppp : Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 CELL PADDI NGCELL PADDI NGCELL PADDI NGCELL PADDI NG eeee SPACI NGSPACI NGSPACI NGSPACI NG e cellpadding e a ( , ) e s (space) a e cellspacing cell e s (space) a । 01.<table border="1" cellspacing="10" 02.bgcolor="rgb(0,255,0)"> 03.<tr> 04.<th>Column 1</th> 05.<th>Column 2</th> 06.</tr> 07.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> 08.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> 09.</table> pppp : Column 1 Column 2 Row 1 Cell 1 Row 1 Cell 2
  • 27. Row 2 Cell 1 Row 2 Cell 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> 6.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> 7.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> 8.</table> pppp : Column 1 Column 2 Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 ei e e g u uei e e g u uei e e g u uei e e g u u ( HTML( HTML( HTML( HTML Backgr ound Col or s Tut or i alBackgr ound Col or s Tut or i alBackgr ound Col or s Tut or i alBackgr ound Col or s Tut or i al i n Bangl a)i n Bangl a)i n Bangl a)i n Bangl a) : bgcolor e u o я e g un nt Bgcolor e u a ei e e e <body> e <table> e a k g un s i i e e g un(CSS u ) । : <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> pppp : 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! g ug ug ug u eeee ::::
  • 28. 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> pppp : 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)". eeee :::: 1.<table> 2.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> 3.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> 4.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> 5.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> 6.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> 7.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> 8.</table> pppp : 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 g ue t g ue t g ue t g u COLORCOLORCOLORCOLOR eeee FONT COLOR:FONT COLOR:FONT COLOR: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>
  • 29. 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> pppp : 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> pppp : 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. ei e e g u uei e e g u uei e e g u uei e e g u u ( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n Bangl a)Bangl a)Bangl a)Bangl a) : g un e u e ei e e i я g un i я । 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> pppp : This table has a background image ei e eei e eei e eei e e ---- g ug ug ug u :::: u u e । e g un । 1.<table height="200" width="300" 2.background="http://www.tizag.com/pics/htmlT/background.jpg" > 3.<tr><td>This table has a background image</td></tr>
  • 30. 4.</table> pppp : This table has a background image ei e eei e eei e eei e e ---- g ug ug ug u n e o n g un e n n g un n n i я i gif jpeg । 1.<table height="100" width="150" 2.background="http://www.tizag.com/pics/htmlT/pattern.jpg" > 3.<tr><td>This table has a background patterned image</td></tr> 4.</table> pppp : 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> pppp : ei e e uei e e uei e e uei e e u ( HTML Fr ame)( HTML Fr ame)( HTML Fr ame)( HTML Fr ame) : e e i e i b uя ui n a ei e e k n p । ei e eei e eei e eei e e ---- A GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGE:::: e e e e n । u k i o я n я । 1.<html> 2.<head> 3.</head> 4.<frameset cols="30%,*"> 5.<frame src="/menu.html"> 6.<frame src="/content.html">
  • 31. 7.</frameset> 8.</html> p : e k frameset – e e parent tag page e characteristics frameset e । frameset cols="#%, *"- Cols(column) e width u u (1st column) total page e 30% e "*", e a total page e 70% content(2nd column) । frame src="/" o я e । iiii :::: 1.<html><head></head> 2.<frameset rows="20%,*"> 3.<frame src="/title.html"> 4.<frameset cols="30%,*"> 5.<frame src="/menu.html"> 6.<frame src="/content.html"> 7.</frameset> 8.</html> frameset rows="#%, *"-e a frameset cols="#%, *"- i। FRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMESPACI NG:ESPACI NG:ESPACI NG:ESPACI NG: FrameBorder e FrameSpacing attribute e e Spacing e ugly gray lines । 1.<html><head></head> 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%,*"> 5.<frame src="/menu.html"> 6.<frame src="/content.html"> 7.</frameset> 8.</html> p : e k NORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLI NG:NG:NG:NG:
  • 32. Noresize attribute e iя । scrolling="(yes/no)"- e scroll । 1.<html><head></head> 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> a ga ga ga g яяяя pppp ।।।। ei e e u uei e e u uei e e u uei e e u u ( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a) : ei e e u s ei e e u । 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> pppp : Tables inside tables! ei e e sei e e sei e e sei e e s uuuu Standard layout u a s , e content p k e o i e । 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">
  • 33. 10.<tr><td>Links!</td></tr> 11.<tr><td>Links!</td></tr> 12.<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> 18.</td></tr></table> pppp : Place a banner here Lin ks! Lin ks! Lin ks! Content goes here 01.<table title="Shell" height="250" width="400" 02.border="0" bgcolor="black" cellspacing="1" cellpadding="0"> 03.<tr height="50"><td bgcolor="white"> 04.<table title="banner" id="banner"> 05.<tr><td>Banner goes here</td></tr> 06.</table> 07.</td></tr> 08.<tr height="25"><td bgcolor="white"> 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> 19.</td></tr></table> pppp :
  • 34. Banner goes here Links! Links! Links! Content goes here ei e e u я uei e e u я uei e e u я uei e e u я u ( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a) : o я e music a я Embed e music e src attribute e media file e । 1.<embed src="/Madine Ko Jain.mp3" /> EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – p mp mp mp m :::: Embeded media player e s iя attribute । 1. width - media player e p s 2. height - media player e uc 3. hidden – e media player p ei attribute я o я e music я n option । 1.<embed src="/last breath.mp3" width="360" height="165" /> EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – pppp :::: Embeded media player e p s iя attribute ।
  • 35. autostart – ei attribute e false true । true o я । loop - ei attribute e false true। true false । volume - ei attribute d media file e volume e 0-100। view source print? 1.<embed src="/beethoven.mid" autostart="false" loop="false" 2.volume="60" /> ei e eei e eei e eei e e oooo uuuu ( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a) :
  • 36. Music i e o i <embed /> o я e p । image e embed e closing e p я i। src attribute e URL(local global) o o я p । 1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg" 2.autostart="false" /> p : href attribute e o URL o o я p । 1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf"> 2.motiontween1easy.swf</a> ( i k play) ei e eei e eei e eei e e ---- oooo Flash movies (.swf), AVI's (.avi), and MOV's (.mov)। embed e । .swf files - ei c
  • 37. .wmv files – ei c i k ui n я i । .mov files - ei c e ki i .mpeg files – e e standard Moving Pictures Expert Group d compression movie i । u in swf, mpeg ei । ei e eei e eei e eei e e ---- EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES: Src attribute e <embed /> e attribute volume, autostart, hidden, and loop । autostart - ei attribute e false true । true я o । hidden - ei attribute e 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 o false . playcount - Setting a playcount a c media x number n repeat a o repeat (playcount="2" e a video i ). volume - ei attribute d media file e volume set e 0-100। ei e eei e eei e eei e e ( HTML Body)( HTML Body)( HTML Body)( HTML Body) : Body tag web page e element Tables, Lists, Forms, paragraph element Body element e । HTMLHTMLHTMLHTML ---- BODY MARGI NS:BODY MARGI NS:BODY MARGI NS:BODY MARGI NS: Attributes Leftmargin: body element. e я । topmargin :body element e u я । 1.<body topmargin="50"> 2.<body leftmargin="50"> pppp : Top Margin
  • 38. Left Margin HTMLHTMLHTMLHTML ---- BASE TEXT:BASE TEXT:BASE TEXT:BASE TEXT: Text attributes e Body tag e k e । 1.<body text="red" > view source print? 1.<body text="rgb(255,0,0)" > ei e eei e eei e eei e e uuuu ( HTML Di v( HTML Di v( HTML Di v( HTML Di v Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a) : <div> a e t я a body e । Div e n block e n an a e t । e e e k t Div e n a t । attributes । id width height title style strong visualization e я style attribute e p । 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>
  • 39. SEARCH LINKS Google ei e e uei e e uei e e uei e e u u a o 3 al div e n । beginning and ending e div e n ei e e e n । 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 paragraph with all of your readable material.</p> 09.</div> pppp : 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>
  • 40. 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> pppp : 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. ei e e l e iei e e l e iei e e l e iei e e l e i ( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c) : <b> bold tag k l । 1.<b>This text is entirely BOLD!</b> pppp : Bold: This text is entirely BOLD! k highlight bold tag . 1.<p><b>Don't</b> touch that!</p> pppp : Don't touch that! dictionary fashion. я bold tag । 1.<p><b>Cardio:</b> Latin word meaning of the heart.</p> pppp : Dictionary Cardio: Latin word meaning of the heart.
  • 41. HTMLHTMLHTMLHTML ---- I TALI C( S)I TALI C( S)I TALI C( S)I TALI C( S) The italics tag key word or phrase highlight u ei tags font face stylize 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>! pppp : HTML Italics: Italic tag! Emphasized Text! Create a blockquote! 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> pppp : HTML Dictionary HTML Hyper Text Markup Language or HTML Hyper Text Markup Language HTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CSSSS <b> and the <i> tags u i e text format e я । k । 1.<p>Phillip M. Rogerson <b><i>MD</i></b></p> pppp : Phillip M. Rogerson MD
  • 42. <b> and the <i> tags u i k । 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> pppp : Format Links: Include several external links throughout your texts as references to your viewers, we will discuss HTML Links in a later lesson. ei e e eei e e eei e e eei e e e prepreprepre ( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e) : code tag e text computer code e e text e font face, size, e letter spacing । 1.This text has been formatted to be computer <code>code</code>! pppp : 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. HTMLHTMLHTMLHTML ---- CODE LI NKSCODE LI NKSCODE LI NKSCODE LI NKS link web page e । 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> pppp : Code Links: Feel free to search Google for anything you wish to find on the internet. HTMLHTMLHTMLHTML ---- <PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG <pre> tag e HTML coding e i b , s k p a i u । 1.<pre> 2.Roses are Red,
  • 43. 3.e s Violets are blue, 4.I may sound crazy, 5.e s But I love you! 6.</pre> pppp : Roses are Red, Violets are blue, I may sound crazy, But I love you! ei e e s skpei e e s skpei e e s skpei e e s skp,,,, skpskpskpskp,,,,sT isT isT isT i : 1.<p>This text is <sup>superscripted!</sup></p> pppp : Superscript: This text is superscripted! HTMLHTMLHTMLHTML – EXPONENTSEXPONENTSEXPONENTSEXPONENTS a exponential я <sup> tag । 1.2<sup>3</sup> = 8 2.14<sup>x</sup> pppp : Exponents: 23 = 8 14x HTMLHTMLHTMLHTML – :::: u p n reference я <sup> tag । 1.<p>"It was a lover's tryst<sup>1</sup>." 2.<hr /> 3.1. Secret meeting between lovers pppp : Footnote "It was a lover's tryst1 ." 1. Secret meeting between lovers HTMLHTMLHTMLHTML ---- SUBSCRI PTSUBSCRI PTSUBSCRI PTSUBSCRI PT
  • 44. 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 HTMLHTMLHTMLHTML – STRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGH <del> tag e k o । 1.<p>This text is <del>scratched</del> out!</p> pppp : Strikethrough This text is scratched out! HTMLHTMLHTMLHTML ---- CHECK OFF TASK:CHECK OFF TASK:CHECK OFF TASK: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> pppp : 1. Clean my room 2. Cook Dinner 3. Wash Dishes ei e eei e eei e eei e e ( HTML For m)( HTML For m)( HTML For m)( HTML For m) : web server (name, email address, credit card, i ) g k t webmaster e я Forms t tool я a form i g e , order , я , forum e k я s i । TEXT FI ELDSTEXT FI ELDSTEXT FI ELDSTEXT FI ELDS
  • 45. m forms я Input fields c form sandwich e । <input> tag e attributes m n я u । type - ei attribute input field e p text, submit, e password । name - ei attribute given field e reference । size - ei attribute field e horizontal width । maxlength – ei attribute character e maximum m <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> pppp : Input Forms Name: Password: HTMLHTMLHTMLHTML ---- I NPUT TAGS:I NPUT TAGS:I NPUT TAGS:I NPUT TAGS: Input fields e я an k checkboxes, text fields, radios, e form submission buttons। <input /> tag e closing tag p я i। HTML -Type Attribute: Type attributes e e p input tag input tag । 1. "text" 2. "password" 3. "checkbox" 4. "radio" 5. "submit" 6. "reset" HTMLHTMLHTMLHTML – CHECKBOXES:CHECKBOXES:CHECKBOXES:CHECKBOXES: Checkboxes 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 radio button e name e value attributes ।
  • 46. <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> pppp : Checkboxes: Select your favorite cartoon characters. Goofy Donald Bugs Bunny Scooby Doo Email Myself HTMLHTMLHTMLHTML ---- SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS: Input type e "submit" a k t u l ।specifies a very unique button. submit button e e activate । submission button i attribute p я c value attribute। b value attribute e button u p "Submit" or "Continue" b value attribute e . 1.<input type="submit" value="Submit" /> 2.<input type="submit" value="Continue Please!" /> p : Submit Buttons Submit Continue Please! HTMLHTMLHTMLHTML ---- RESET BUTTONS:RESET BUTTONS:RESET BUTTONS:RESET BUTTONS: input type reset button। Setting the type to reset button k form e s a s "start over" button reset button e । view source print? 1.<input type="reset" value="Reset Fields" /> 2.<input type="reset" value="Start Over" /> pppp : Reset Buttons:
  • 47. Reset Fields Start Over ei e e kk lei e e kk lei e e kk lei e e kk l ( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d) : Text fields kt k i e i web server e scripting language (PHP, PERL, or ASP) e p k । HTMLHTMLHTMLHTML ---- TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE: Size attribute e text area e size nt default size 20 characters । 1.<input type="text" size="5" /> 2.<input type="text" size="15" /> 3.<input type="text" size="25" /> pppp : Text Fields: HTMLHTMLHTMLHTML ---- TEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTH:::: maxlength attribute s ic characters i e iя s o characters i d maxlength attribute size e maxlength e i o p я । 1.<input type="text" size="5" maxlength="5" /> 2.<input type="text" size="15" maxlength="15" /> 3.<input type="text" size="25" maxlength="25" /> pppp : Maxlength Attribute HTMLHTMLHTMLHTML ---- TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE: value attribute i k l । view source print?
  • 48. 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! ei e e kk eei e e kk eei e e kk eei e e kk e ( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea) : kk e b e e iuя Paragraphs, essays, or memos kk e e kk e e opening e closing kk e e o я e kk e p । 1.<textarea>Text Area!</textarea> p HTMLHTMLHTMLHTML ---- TEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND ROWS:OWS:OWS:OWS: Adjust the of the text area size e appearance attributes p я cols androws। p attribute e я text area । 1.<textarea cols="20" rows="10">Text Area!</textarea> 2.<textarea cols="40" rows="2">Text Area!</textarea> 3.<textarea cols="45" rows="5">Text Area!</textarea> p :
  • 49. HTMLHTMLHTMLHTML ---- TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP: wrap attribute k textarea text field e Wrap e : 1.soft 2.hard 3.off wrap attribute e Soft word text area but form word (Line breaks a ) wrap attribute e Hard word text area e i e Line breaks a । form text box e c। wrap attribute e Off word text area e e i a । 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"> 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 : No Wrapping
  • 50. HTMLHTMLHTMLHTML ---- TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY: readonly attribute e value yes no। readonly attribute e yes textarea e k n । 1.<textarea cols="20" rows="5" wrap="hard" readonly="yes"> 2.As you can see many times word wrapping is often the desired 3.look for your text areas. Since it makes everything nice and 4.easy to read. 5.</textarea> p : HTMLHTMLHTMLHTML – DI SABLEDDI SABLEDDI SABLEDDI SABLED disabled attribute p textarea highlight , e e । 1.<textarea cols="20" rows="5" wrap="hard" disabled="yes"> 2.As you can see many times word wrapping is often the desired 3.look for your text areas. Since it makes everything nice and 4.easy to read. 5.</textarea> p : ei e eei e eei e eei e e oooo ( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)
  • 51. : Radios e p i e a k o e "multiple choice" ei kiя e p я Radios । 1.Italian: <input type="radio" name="food" /> 2.Greek: <input type="radio" name="food" /> 3.Chinese: <input type="radio" name="food" /> pppp : Radios: Italian: Greek: Chinese: e i e i n o o u । 1.Italian: <input type="radio" name="food" /> 2.Greek: <input type="radio" name="food" /> 3.Chinese: <input type="radio" name="food" /> 4. 5.Male: <input type="radio" name="gender" /> 6.Female: <input type="radio" name="gender" /> pppp : Multiple Radios: Italian: Greek: Chinese: Male: Female: ei e eei e eei e eei e e ---- RADI O CHECKED:RADI O CHECKED:RADI O CHECKED:RADI O CHECKED: checked e u ,e radio a l t । 1.Italian: <input type="radio" name="food" checked="yes" />
  • 52. 2.Greek: <input type="radio" name="food" /> 3.Chinese: <input type="radio" name="food" /> p :Default Italian: Italian: Greek: Chinese: ei e eei e eei e eei e e ( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m) : upload form iuя pictures, movies, e я webpages upload e upload form e input form । type attribute e file upload form । 1.<input type="file"/> pppp :::: UPLOAD FORMUPLOAD FORMUPLOAD FORMUPLOAD FORM MAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZE upload i e size e webserver e space k e я hidden input field e o specific attributes । 1.<input type="hidden" name="MAX_FILE_SIZE" value="500" /> 2.<input type="file"/> e value 100 file c 100kb । p : ei e e D u sei e e D u sei e e D u sei e e D u s ( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st ) : Drop down lists forms. internet e Drop down lists o k p i s d Drop down lists e a a ic select । Drop down lists <select> and <option> tags <select> tag e Drop down lists
  • 53. e <option> tag e Drop down lists e । 1.<select> 2.<option>California -- CA</option> 3.<option>Colorado -- CO</option> 4.<option>Connecticut -- CN</option> 5.</select> pppp :::: DROP DOWN LI STDROP DOWN LI STDROP DOWN LI STDROP DOWN LI ST selected attributee n select a s p । HTMLHTMLHTMLHTML ---- SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS: size attribute drop down list s p । size attribute select options e p s scroll selected attributee n select a s p । 1.<select size="3"> 2.<option>California -- CA</option> 3.<option>Colorado -- CO</option> 4.<option>Connecticut -- CN</option> 5.</select> pppp :::: SELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMS California -- CA Colorado -- CO Connecticut -- CN HTMLHTMLHTMLHTML ---- SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES: multiple attribute e e a select । 1.<select multiple="yes" size="3"> 2.<option>California -- CA</option> 3.<option>Colorado -- CO</option> 4.<option>Connecticut -- CN</option> 5.</select> pppp :::: MULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONS California -- CA Colorado -- CO Connecticut -- CN