Scribd
Upload
19K views

HTML Tutorial in Bangla

Uploaded by

Bubun Goutam
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
19K views

HTML Tutorial in Bangla

Uploaded by

Bubun Goutam
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

eiee u

   |  ( HTML Tut or i al i n


Bangl a)
eiee u


e n (Elements)

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


 (Heading)

i b


(List)




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

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

l o i


 o p 

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

 o 

%/
 (Upload)
0/
u s
2 
:

 o.
 %

s #$ eiee u


  
u
   e

eiee e a3, 4c Hypertext Markup Language.e



 p
g
 
 .,
, %/ 


o. '/
4 4 ei 
  +
% '
'
 2 4 e
2
2 +4

e
2i %/  e
o. / 6 7   /
e / 8  +e+e+ 2 
4 9 / %   p
 
/


/
'
skp /

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

PHP+Database 2 %/  /=


, ? 
+ Driven WebSite 6 7   /


webcoachbd.com e u
.
   /@ %/  

. eiee 2 /


8 + 
 eiee 2(a3,
% eiee 
 
3
. 2)

/
Notepad open  6 7 4
84   
i 
/
 .i     / a 
 a
'
n e   +i  
8 Netbeans or Dreamweaver.% 8  0o.'
e 
 a 'j
3
 
4 
4 e2i     /
 
eiee 2 8 b  '
'


 

eiee e n(Elements)

eiee 
(Tag)

eiee a
 u (Attribute)

e >.  ,
/ /

  s
 .
4 >>

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

 E+ %

e n+(Elements):
e n+ 4 HTML e  nd n

HTML page e p  k a ,

e n+
e n+ 

(tag) e 
H 6 7 HTML e n  a s 
+ ! 8
%/

2 +
 Web
page e 
 
4 /
 Paragraph text, 
 
, '  i
 + ! i elements ei /
e e n(Element)   a . I   

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


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


4.!

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

/ Notepad 4
/ m 
 2

1.<html>
2.Welcome to Bangladesh
3.</html>

e'
 2
/ Notepad e 
i  4 save e k   
/ index.html 
 save  
+' 

i Double click  open  
2
8 2
 Browser e open 4.! 2 +4 e
web
Page 6 7 4. 

<head> element
e kn head, kn +sn E  H

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

 +
+ b
u
 p , 4. 
%

i  e n e 
H p
   /

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


 4+
 p , 4.
1.<html>
2.<head>
3.<title> My WebPage!</title>
4.</head>
5.</html>

<body> element
body element 8
web page e p , + >. 
H
  8 + >. 
%
web page e 2
 
i 

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

ei 
  
/
  / /s  .html extension  +'  8
 b
u
 2 e  6 7 p3 o  /
2

eiee + # u
   ( HTML Tag Tut or i al i n Bangl a)
2 
:

 E+ %

82 %/  eiee kn u/ 4  , 


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


 e pH
  a %!
.   

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

 (closing tag)
eiee 
 e 
H %/  web page e %/
/!n  
,
/
S
 /
 
1.<p>A Paragraph Tag</p>


 e T, !
4
 ak 4o.
u   %
 

 2

4

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


2.<p>Paragraph Tag</p>
3.<h2>Heading Tag</h2>
4.<b>Bold Tag</b>
5.<i>Italic Tag</i>
6.</body>

CLOSI NG + # 2 3 + #:
+ #:
! ! 
 %! 8
 closing tag 
p
 i 


 e n H
  
+ 
  4c line break tag
e 
<br/> / p
 
4 8
> '
 4

4 a3,
% e 
i 2

  a/ 
i 4 2
  

 e 
  4

4
%
! 
 %! 8
  >'
 4

4. 8 i 
, i/ 

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

p,:

--Line Break--

eiee eT6u u


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

 E+ %


  +mp+
 
 e  u 4

4. H  8  %
e   6 7   attributes 
4
  
e ps, uc
I   /
% attributes value .   e ps o uc

  /

1.<tag attributes ="value" attributes ="value">
1.<table width="150" height="100">

Class 
id attribute e 4
p
. ei  !
'n
%! Class 
id attribute +
+ i n   

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

 e %



4.!
1.<p>Paragraph type 1 Italics</p>
2.<p>Paragraph type 2 Bold</p>

p,
Paragraph type 1 Italics
Paragraph type 2 Bold

eiee 9: eT6u


eT6u ( HTML NAME ATTRI BUTE)
BUTE)
Name attribute  Class 
id attribute 4 'n Name attribute  p
.i ,  
a
 i/ i n +
3 2

8
.
1.<input type="text" name="TextField" />

p,:
ei attribute  TextField p, >. ' 
i  /,
an
 e a   a
(javascript , css)
eiee  i
 eT6u
eT6u ( HTMLL- TI TLE ATTRI BUTES)
ei attribute  
 eiee e n e 

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


 u/ 
u+
2
4. 2 !
popup  k p, 
<h2 title="Hello There!">Titled Heading Tag</h2>
p,

Ti t l ed Headi ng Tag
eiee e i: eT6u
eT6u ( HTMLL - ALI GN ATTRI BUTES)
8  %/  e n +
n
 as
 / ,    
  
align attribute .   /
  align  'n ' 

8
. 8 left, right & center l 4+
 left align  ,
 3

1.<h2 align="center">Centered Heading</h2>

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

Lef t al i gned headi ng


Cent er ed headi ng
Ri ght al i gned headi ng
GENERI C ATTRI BUTES:
Attribute . o /  +m',
 
s
i 
8
.    ! ei u .
4 8
a HTML Tag e +
3
+4 4

8
.
Attribute Options

Function

align

right, left, center

+
n
 (Horizontally) aligns tags

valign

top, middle, bottom

um(Vertically) aligns tags

bgcolor

numeric, hexadecimal, RGB


Element e background color , 
values

background URL

Background image u/ element , 


Element e Name 8
Cascading Style Sheets (css)

id

4

7 ,  a8
.7

+
3 4

4.

Element e ^7 


+ 8
Cascading Style Sheets (css)
class

4

7 ,  a8
.7

+
3 4

4.

width

Numeric Value

Tables, images, or table cells e width ,  

height

Numeric Value

Tables, images, or table cells e height ,  

title

4

7 ,  a8
.7

%/
elements e "Pop-up" title

eiee A+ g C u
   ( HTML Par agr aph Tut or i al i n Bangl a)
2 
:

 E+ %


 2

 p
 
kt /

g
 
 4

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

ac (/

g
) , 
4. ei 
 4

 /

g
  k u/  a
 


i
+J ` 4.
1.<p>Avoid losing floppy disks with important school...</p>
2.<p>For instance, let's say you had a HUGE school...</p>

p,:
Avoid losing floppy disks with important school/work projects on them. Use
the web
to keep your content so you can access it from anywhere in the world. It's
also a quick
way to write reminders or notes to yourself. With simple html skills, (the
ones you have
gained so far)it is easy.
For instance, let's say you had a HUGE school or work project to complete.
Off hand,
the easiest way to transfer the documents from your house could be a 3.5"
floppy disk.
However, there is an alternative. Place your documents, photos, essays, or
videos onto
your web server and access them from anywhere in the world.

eiee A+ g C
JUSTI FI CATI ON)
A+ g C- sC
H: ( HTML PARAGRAPH JUSTI
o
, kn e %
8'
 
 2
 justify  +  +
  
   '
 eiee e justify 4

ei 
  /

1.<p align="justify">For instance, let's say you had a HUGE school or
work...</p>

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

o
, kn e  /

g
 e p 
i display window e H as
  
1.<p align="center">For instance, let's say you had a HUGE school or
work...</p>

p,:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest
way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an
alternative. Place your documents, photos, essays, or videos onto your web server and access
them from anywhere in the world.
eiee A+ g C
ALI GN RI GHT)
A+ g C- e i: L
: ( HTML PARAGRAPH ALI
o
, kn e  /

g
 e p 
i display window e 
/
 as
  
1.<p align="right">For instance, let's say you had a HUGE school or
work...</p>

p,:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest
way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an
alternative. Place your documents, photos, essays, or videos onto your web server and access
them from anywhere in the world.

eiee 9MLN u


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

 E+ %

eiee e 4  


 +
H

i  
+

i  4+
 2
8
. 4  
 e H
2
 k bold 4+
 p ,
4. e %
8
4  e m u/ ',  4  m 
1 4 6 e H +7
d e2
 1 +. @ e 6 +.
!
4 
1.<body>
2.<h1>Headings</h1>
3.<h2>are</h2>
4.<h3>great</h3>
5.<h4>for</h4>
6.<h5>titles</h5>

7.<h6>and subtitles</h6>
8.</body>

Headings
ar e
GREAT
f or
titles
and subtitles

k 
>. ei8 p  4  e s 
i b option %! e
4  e built in attribute 4  2
+.
a
 
i b 4. 8
.
9MLN e6N A+ g C e e
t 6+6M :
6+6M :
%
4  e paragraph e+
3 4
  /
 u
4  .
4
1.<h1 align="center">Essay Example</h1>
2.<p>Avoid losing floppy disks with important school/work projects...</p>
3.<p>For instance, let's say you had a
4.HUGE school or work project to complete.

Off ...</p>

p,:

Essay Example
Avoid losing floppy disks with important school/work projects on them. Use the web to keep
your content so you can access it from anywhere in the world. It's also a quick way to write
reminders or notes to yourself. With simple html skills, (the ones you have gained so far by
now) it is easy.
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest
way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an
alternative. Place your documents, photos, essays, or videos onto your web server and access
them from anywhere in the world.

eiee  i: 9b u


   ( HTML Li ne Br eak)
2 
:

 E+ %

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

i >  %/
 a 
i 4 2
 
 
+
4
8
 
eiee
e

 d


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

4.
1.<p>
2.Will Mateson<font color="red"><br/></font>
3.Box 61<font color="red"><br /></font>
4.Cleveland, Ohio<font color="red"><br/></font>
5.</p>

p,:
i b e +
4
8 I address 6 7   /

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

1.<p>Sincerely,<br />
2.<br />
3.<br />
4.Kevin Sanders<br />
5.Vice President</p>

p,:
Sincerely,

Kevin
Vice President

Sanders

% o e
>. 
2
p.
 8 
i b 
 e 
 closing tag e p.
 i
HTML HORI ZONTAL RULE:
RULE:
Horizontal rule  <hr/> 
 

p
 
4 <hr/> 
 4
 screen e u/ +
n
 
i p,
 line break tag e  Horizontal rule tag e 
 closing tag i
1.<hr />
2.Use

3.<hr /><hr />


4.Them
5.<hr />
6.Sparingly
7.<hr />

p,:
Use

Them
Sparingly
Horizontal rule 
 gn/ 

   >. +4 p
 
kt 4

4.
1.<font color="red"><hr /></font>
2.<p>1. "The Hobbit", JRR Tolkein.<br />
3.2. "The Fellowship of the Ring" JRR Tolkein.</p>

p,:
1.
"The
Hobbit",
2. "The Fellowship of the Ring" JRR Tolkein.

p,:
Goal s
1. Find a Job
2. Get Money
3. Move Out

Start attributes .  ic


8
.7 m 4 s   
8
.
1.<h4 align="center">Goals</h4>
2.<ol start="4" >

JRR

Tolkein.

3.<li>Buy Food</li>
4.<li>Enroll in College</li>
5.<li>Get a Degree</li>
6.</ol>

p,:
Goal s
4.Buy Food
5.Enroll in College
6.Get a Degree

eiee k s


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


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

 m 
T, 4 /
 

@ 4
 
!
4
 type attribute 4
 m / ,  
4.
1.<ol type="a">
2.<ol type="A">
3.<ol type="i">
4.<ol type="I">

Or der ed Li st Types:
Lower-Case Letters

Upper-Case Letters

Lower-Case Numerals Upper-Case Numerals

a. Find a Job

A. Find a Job

i.

Find a Job

I.

Find a Job

b. Get Money

B. Get Money

ii.

Get Money

II.

Get Money

c. Move Out

C. Move Out

iii.

Move Out

III.

Move Out

eiee 6: k s


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

4.
1.<h4 align="center">Shopping List</h4>
2.<ul>
3.<li>Milk</li>

4.<li>Toilet Paper</li>
5.<li>Cereal</li>
6.<li>Bread</li>
7.</ul>

p,:
Shoppi ng Li st

Milk

Toilet Paper

Cereal

Bread

%
type attributes 4
 unordered list e a
  4
  /

<ul type="square">
<ul> type="dics">
<ul> type="circle">
type="square"

type="disc"

type="circle"

Milk

Milk

Milk

Toilet Paper

Toilet Paper

Toilet Paper

Cereal

Cereal

Cereal

Bread

Bread

Bread

eiee 9LC
:H: s
s ( HTML DEFI NI TI ON LI STS)
STS)
Definition list e 4
+
H
 a 'H
 2 /
i <dl> tag 
4
 Definition list 6 7 
4. 8

Define a3,
% +j
.   
i 
 bold %
 2

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

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

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

4.
1.<dl>
2.<dt><b>Fromage</b></dt>

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


4.<dt><b>Voiture</b></dt>
5.<dd>French word for car.</dd>
6.</dt>

p,:
Fromage
French
Voiture
French word for car.

word

for

cheese.

eiee   9 L u
   ( HTML Col or code)
2 
:

 E+ %

Color set 
 /d  %! +
H
 ! 

8 

, +

, 
, +, 7 eiee e 

value 2

+. +
+ e 
 2
4.  16 E  

 
 2
4
XY
XY 9Z   :
  :
Black
Yellow
Red
Maroon

Gray
Lime
Green
Olive

Silver
Aqua
Blue
Navy

White
Fuchsia
Purple
Teal

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


%  %/
  
/ web design e  HTML rgb 4
 /
,  

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

8  CSS 2 
 
4 %/
 u  ei >. +mn


Red, Green e Blue ei  



 + ` 4c rgb p 
 0(82 
 

3
 
) 4 255(82 9


 +m, 3
) rgb    4 rgb(RED,GREEN,BLUE)
RED, GREEN e6N BLUE e  ::
 ::
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)"
Red
bgcolor="rgb(0,255,0)"
Green
bgcolor="rgb(0,0,255)"
Blue

eieeeiee- N Ad$:
Ad$:9Mk
La  ( HTMLL - COLORI NG SYSTEM: HEXADECI MAL)
p3 p3 Hexadecimal system R e  
 ei system e   o I practice 

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

standard color
Hexadecimal 4 6 digit 

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

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

Decimal

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

i T, m 4+
 4

4. ei T, / m /
n 
4.  e u
4  .
4

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

 ("#FFFFFF") +



,   >. s
 %



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

  /  , 
 +
3 8
   4 255 
 8
 p
3 


 
 kt +,
c  % o u
4  .
4

u
4 :
u
4 
bgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)

(7 * 16) + (0) = 112


05(BB - Blue)
(0 * 16) + (5) = 5

eiee C& u


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

 E+ %

<font> 
 
4
 o  +
i  k s
i, +
i e 

8
 
4. size, color e face attributes

4
 %/  n  
s
i   /
<basefont> 
 
4
 / +  k  ei s
i, +
i e


e + 
8
.
<font> e <basefont> 
 
4

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


4.!) 
4

u 
C& \ ( FONT SI ZE)
Size attribute e +
4
8 n e +
i I 
4. n e %
e g48
 
 4c 1(+. !
) 4 7(+.
@) n e l %
4c 3
1.<p>
2.<font size="5">Here is a size 5 font</font>
3.</p>{}

p,:

Here is a size 5 font.


C& N ( FONT COLOR)


attribute e +
48 font e color + 
4.
1.<font color="#990000">This text is hexcolor #990000</font>
2.<br />
3.<font color="red">This text is red</font>

p,:
This text is hexcolor #990000
This text is red
C& 9Ca ( FONT FACE)
n face e kt +, 4o.
u  
 %/
+s e H,
 n  is .

3
 
4 %/  9 n  2
/
 
e 
/ , l 4+
 Times New Roman n  2 /

1.<p>
2.<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
3.has had its font...</font>

4.</p>

p,:
This paragraph has had its font formatted by the font tag!

96aC& ( BASEFONT)
Basefont 
 e +
4
8 %/  o  / l n +   /
   basefont 
4

+I /3 2

4
01.<html>
02.<body>
03.<basefont size="2"
04.<p>This paragraph
05.<p>This paragraph
06.<p>This paragraph
07.</basefont>
08.</body>
09.</html>

color="green">
has had its font...</p>
has had its font...</p>
has had its font...</p>

p,:
This
paragraph
has
had
its
font
formatted
This
paragraph
has
had
its
font
formatted
This paragraph has had its font formatted by the basefont tag!

by
by

the
the

basefont
basefont

>  
i font 
basefont 
4

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


4.!) 4

'


Attributes: Review
Attribute= "Value"

Description

size=

"Num. Value 1-7"

Size of your text, 7 is biggest

color=

"rgb,name,or hexidecimal" Change font color

face=

"name of font"

Change the font type

pf ak
sn s i:
s i:
n  
s
i  8
 H  s
i 
8
.
1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
2.your font to achieve a desired look.</p>

p,:

tag!
tag!

ustomize your font to achieve a desired look.

eiee N u


   ( HTML Li nk)
2 
:

 E+ %

 e 
H o  +
i 
H  k
7 +8
 +s
/ 4. anchor tag e +
4
8 +8
 .  6 7 
4.
 k , i, , e +
4
8o  6 7 
8
.
eieeeiee- M iA
kk | HTMLL- HYPERTEXT REFERENCE ( HREF)
href attribute e e  
 n ,  8
+
3  
+
J/,
Hypertext reference 4 /
 Internal, Local, Global
Internal: ei / H  6 7 4o.

Local : %/
web site e ' 
 / +
3  6 7 4o.

Global: %/
web site e 
4 a web site e +
3  6 7 4o.

Internal - href="#anchorname"
Local - href="/../pics/picturefile.jpg"
Global - href="http://www.tizag.com/"

eiee 9kk N


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

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

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

 ! ,

/ web /  4+
 2
8

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

p,: Global Link


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


R
., 4. / 2 4 /J3 window  a3
 2 4 ei browser window 

target=" _blank"
_self"

  browser window    page 2




current window    page Load .

_parent" Loads new page into a frame that is superior to where the link lies
_top"

+ frames cancel  , current browser window   page Load .

 e
u
4  .
4
8 '
 %/   p. web site ESPN.COM e +
3    4. Target attribute
 e'
 browser 8k 4. 8 ESPN.COM web site  2

+. +   window +4 open 4 8
 
, %/
web site e +
3 3
 /

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

p,: _blank Target:


ESPN.COM

eiee i
i u
   ( HTML E mai l )
2 
:

 E+ %

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


4
  
/ href attribute , +

+
 h 
/ inverted comma e H 
p ii I


<a href= "mailto: [email protected]" >Email Example</a>


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

. a  k  >. 8
   /
  8
4c 1. subject 2.body
Subject - ii e subject e %/  i 8
 information + 
4   /
 
Body - ii e body  %/  i information + 
4   /
 
<a href= "mailto:
[email protected]?subject=Web Page Email&body=This email
is from your website" >
2nd Email Example</a>

e'
 8  
 2  
4 82  u ei ii  u/ k   2 subject e body  +
8
 4 8
 8

%/  (Subject e body ) ul2  


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

! i %/
o +
i 3 %+ 
 a 
 u%a

3
p,:
2nd Email Example

eiee e: i
i N ( HTML Emai l Li nk, Anchor )
2 
:

 E+ %

ii  6 7 
+4 8  %/  
 u %/
site e Email    ii  e 
H 
  /
 
+2
 8 >. 

Email /
S
 + >. ul2   /
 
<a href="mailto: [email protected]?subject=Feedback" > [email protected]</a>
p,:
mailto: [email protected]?subject=feedback
a +. 4

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

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

u  /  , + s
 %


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

3.</head>

eiee e: i u


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

 E+ %

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

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

e
i 4
 a  k s+  /
 u
4  .
4

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

p,:
Everything that goes up, must come down!
%
eiee e +  e g
 h 4
 
 6 7  e+ h o  / e 2
 
i e
i 4

  4
1.<p>
2.Less than - &lt; <br />
3.Greater than - &gt; <br />
4.Body tag - &lt;body&gt;
5.</p>

p,:
Less
Greater
Body tag - <body>

than
than

<
>

eiee 
& 6 m6+ ( HTML Comment s Tut or i al i n Bangl a)
2 
:

 E+ %

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

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

 sk 
4

 
 %

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

<!--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
eiee - <!- - ei 9t  
& M
f 
6 - - >:
o  '/
4+
 %/  a 
a+m,
2 /
  +kt a+m, 
 <! -- > n 
 e '
2
/
 
<!-- <input type="text"> size="12" /> -- Input Field -->

82 eiee i n p,   


 2 n 
 uI. 
<input type="text" size="12" />

p,: Input Field:

eiee 26 u


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

 E+ %

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

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

1.<img src="/sunset.gif" />

p,:

eieeeiee- 26 SRC:


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

1. Standard URL 4

(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)
2. web server e file  / 
%/
 
(src="/../sunset.gif")
ei picture file e location e +
3 .eiee file e location e +m, %!
URL Types:
Local Src

Location Description

src="/sunset.gif"

picture file e .html file ei directory  as


 

src="/../sunset.gif"

picture file /,  directory  as


  .html file 

src="/../pics/sunset.gif"

pic directory e picture file /,  directory  as


  .html file e


eieeeiee- ALTERNATI VE ATTRI BUTE:


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

4o.

 4 /
 
i ` 4. ! 
browser i 
i 2 /
c 

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


Sunset" />

p,:

eieeeiee- 26 HEI GHT e6N WI DTH:


i height e width I 
 height e width attribute 
4

4.
1.<img src="/sunset.gif" height="50" width="100">

p,:

eieeeiee- VERTI CALLY e6N HORI ZONTALLY ALI GN 26:


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

1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center
 u
4  .
4

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


2.<p>
3.<img src="/sunset.gif" align="right">
4.The image will appear along the...isn't it?
5.</p>
6.<p>This is the third paragraph that appears...</p>

p,:
This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this

image alignment works.


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

 N Ma
6 6+6M
6+6M :
6M :

i  4+
 4

8
.
1.<a href="http://www.webcoachbd.com/">
2.<img src="/sunset.gif">
3.</a>

p,:

eieeeiee- THUMBNAI LS:


Thumbnails 4 !
+
i i 8
@, '
 
 i +
3   ei  
H picture quality k


8
.Thumbnails e
m 
 i 8
i  4+
 

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

eiee 96 u


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

 E+ %

  4 Horizontal +
e vertical 
 
+ e
tabular data p, kt a  t /, kn e n
.nt  o. 
i
 
! e
%
   t /, +
e 
 in
+ cell  + eiee
  <table> 
 .   4. e </table> 
 . > 4.
1.<tr> 
 Horizontal +
, 
2 <td> 
 9 Horizontal +
data cell , 
3 <th> 
 data cell e   heading 4+
 

4 <tfoot> 
   footer 8
 
 4
4.
1.<table border="1">
2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
3.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
4.</table>

p,:
Row 1 Cell 1

Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

a
:g
 a  e6N 


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

 s

4. %/  8 

 header  
 
4 <th> 
 
4
  4 <th> 
 
4
  default 4+
 header  
l
%
 2

01.<table border="1">
02.<tr>
03.<th>Column 1</th>
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>

p,:
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

CELL PADDI NG e6N SPACI NG


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



a e cellspacing  


R
.    cell e H s+(space) 


a
01.<table border="1" cellspacing="10"
02.bgcolor="rgb(0,255,0)">
03.<tr>
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>

p,:

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>

p,:

Column 1

Column 2

Row 1 Cell 1

Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

eiee 6+ g u&L N u


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

 E+ %

bgcolor e  u  >'
 o  / e   
g
un .nt  Bgcolor e  u  a eiee

 e H 
4

8
.  +. '
 4. <body> e <table> 
 e H 
4
  a  k 4+


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


4.!) 2 /
 
S:
S
<tagname bgcolor ="value">
1.<body bgcolor="Silver">
2.<p>We set the background of this paragraph to be silver. The body tag is
3.where you change the pages background. Now continue the lesson to
4.learn more about adding background colors in your HTML!
5.</p>
6.</body>

p,:
We set the background of this paragraph to be silver. The body tag is where you change the
pages background. Now continue the lesson to learn more about adding background colors in
your HTML!
96
 6+ g u&L e   9x #  :

01.<table bgcolor="lime" border="1"><tr>


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

p,:
A lime colored table background using color names.
A red colored table background using hexadecimal values "#FF0000".
A blue colored table background using RGB values "rgb(0, 0, 255)".
96
 a  e6N 


   9x #  :
 :
1.<table>
2.<tr bgcolor="#FFFF00"><td>This
3.<tr bgcolor="#AAAAAA"><td>This
4.<tr bgcolor="#FFFF00"><td>This
5.<tr bgcolor="#AAAAAA"><td>This
6.<tr bgcolor="#FFFF00"><td>This
7.<tr bgcolor="#AAAAAA"><td>This
8.</table>

Row
Row
Row
Row
Row
Row

is
is
is
is
is
is

Yellow!</td></tr>
Gray!</td></tr>
Yellow!</td></tr>
Gray!</td></tr>
Yellow!</td></tr>
Gray!</td></tr>

p,:
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
e
t 6+ g u&L COLOR e6N FONT COLOR:
1.<table bgcolor="#000000">
2.<tr><td bgcolor="#009900">
3.<font color="#FFFF00" align="right">Green Bay</font></td>
4.<td><font color="#FFFFFF">13</font></td></tr>

5.<tr><td bgcolor="#0000FF">
6.<font color="#DDDDDD" align="right">New England</font></td>
7.<td><font color="#FFFFFF">27</font></td></tr>
8.</table>

p,:
Green Bay 13
New England 27
1.<table bgcolor="#777777">
2.<tr><td>
3.<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">
4.This paragraph tag has...
5.</font></p>
6.</td></tr>
7.</table>

p,:

This paragraph tag has a gray background with green colored font. You should see Monotype
Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted
as standard fonts.

eiee 6+ g u&L u


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

 E+ %


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

8
.
1.<table height="50" width="100"
2.background="http://www.tizag.com/pics/htmlT/background.jpg" >
3.<tr><td>This table has a background image</td></tr>
4.</table>

p,:
This table has
a background
image
eieeeiee- 6+ g u&L  A:
 A:
u/ u
4  2
.! 8   e %
!  %
 +
  
 ++
4.  8    e %
!  %

. @ 4.  
g
un !  / 4
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>

p,:
This table has a background image
eieeeiee- A+  :lL 6+ g u&L
 'n 
e  +yo.
.  'n /

, 
g
un !  e  
n/
 n 
g
un !  6 7 
8
. 
n/
 n i

i gif  
2 4 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>

p,:

1.<table background="http://www.tizag.com/pics/htmlT/transparent.gif" >


2.<tr><td>This table has a red transparent background image</td></tr>
3.</table>

p,:

eiee 9y u


   ( HTML Fr ame)
2 
:

 E+ %

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

1.<html>
2.<head>
3.</head>
4.<frameset cols="30%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">

7.</frameset>
8.</html>

p,:
e2
 k  
frameset e
e
parent tag 8
$ page e characteristics ,   /J3 /J3 $frameset e H
,  3

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

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

FRAMEBORDER AND FRAMESPACI NG:


FrameBorder e FrameSpacing attribute e +
4
8 $ e Spacing e  $ H ugly gray lines
' 
8
.
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,:
e2
 k  
NORESI ZE AND SCROLLI NG:

Noresize attribute e + z` $ %


+
i   /


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


4 

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>

ag4  
   2 p
+  2

eiee 9\u u


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

 E+ %

eiee %u 4 2 E  >.   '   s


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

p,:   '  


Tables inside
tables!
eiee s &L Ll 9\u
Standard layout +
H
 u/ a s 

,  ' e content 
p, k e
4

'
 o  +
i e 6 `
01.<table cellspacing="1" cellpadding="0" border="0"
02.bgcolor="black" height="250" width="400">
03.<tr height="50"><td colspan="2" bgcolor="white">
04.<table title="Banner" id="banner" border="0">
05.<tr><td>Place a banner here</td></tr>
06.</table>
07.</td></tr>
08.<tr height="200"><td bgcolor="white">
09.<table title="Navigation" border="0">

10.<tr><td>Links!</td></tr>
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>

p,:

Place a banner here

Lin
ks!
Lin
Content goes here
ks!
Lin
ks!

01.<table title="Shell" height="250" width="400"


02.border="0" bgcolor="black" cellspacing="1" cellpadding="0">
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>

p,:

Banner goes here


Links! Links! Links!
Content goes here

eiee u u


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

 E+ %

o  / e music { 

a +4 Embed 
 e +
4
8 music { 

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

EMBED ATTRI BUTES pzHl


: a
f aml$:
$:
$
Embeded media player e 
4 /  
s
i    attribute  +   4
1. width - media player e p+s

2. height - media player e uc

3. hidden 8  e 
 + 4.  media player  p , 4 
%  +/
   ei attribute 4
 
8  %/   3
 o  / e 
music  ' n 
option 


1.<embed src="/last breath.mp3" width="360" height="165" />

EMBED ATTRI BUTES  xlp| } :


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

autostart ei attribute e  


 false 
true 8  
 true .
4.  o  / 2

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

volume - ei attribute d

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

eiee Lo u


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

 E+ %

Music 
i e  ' o 
i  <embed /> 
 . o  / e p, 
8
. image 
 e  embed 
 e 
 closing 
 e
p.
 i src attribute e 
H +I URL(local 
global) I  ' o o  / p, 
8
.

1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg"
2.autostart="false" />

p,:

%/  href attribute e 
Ho +I URL I  ' o o  / p, 
8
.
1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">
2.motiontween1easy.swf</a>

(
i 
 k  play)
eiee - Lo  :
Flash movies (.swf), AVI's (.avi), and MOV's (.mov) embed 
 e+    +
/
, 
.swf files - ei    4c |


.wmv files ei    4c 


ik
+ uin
 

i/
.mov files - ei    4c e/ ki
i  

.mpeg files e e standard   8


Moving Pictures Expert Group d

compression movie

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

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

+
3 +
3 ' o    4.
8

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

media file e volume set 
4. e +7
4 0-100

eiee 6L ( HTML Body)


2 
:

 E+ %

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

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


topmargin :body element e u/ 



1.<body topmargin="50">
2.<body leftmargin="50">

p,:
Top

Margin

Left Margin

HTML - BASE TEXT:


Text attributes e 
H Body tag e ' +  k e 

I 
8
.
1.<body text="red" >

view source
print?
1.<body text="rgb(255,0,0)" >

eiee L u


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

 E+ %

<div> 
 a
 
 e /
t 4+
 
 a
body 
 e 
Div e n 
4
block e n 8

an
 3 a
 
 
 et 
+e+e+ e kt Div e n a  t /,
 ' m 
attributes .
4

id
width
height
title
style
, strong visualization e  ' style attribute e 
H 

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

SEARCH LINKS
Google

eiee L 9\u


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

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

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

paragraph with all of your

09.</div>

p,:
HOME | CONTACT | ABOUT
Content Articles

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

09.<p>This paragraph would be your content


10.paragraph with all of your readable material.</p>
11.<h5 >Content Article Number Two</h5>
12.<p>Here's another content article right here.</p>
13.</div>

p,:
HOME | CONTACT | ABOUT | LINKS
Content Articles

This paragraph would be your content paragraph with all of your readable material.
Content Article Number Two

Here's another content article right here.

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


2 
: E+

 E+ %

<b> bold tag 4


 %
 k 
l   /

1.<b>This text is entirely BOLD!</b>

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

p,:
Don't touch that!
dictionary fashion.2
 %
bold tag 4
  /

1.<p><b>Cardio:</b> Latin word meaning of the heart.</p>

p,: Dictionary
Cardio: Latin word meaning of the heart.

HTML - I TALI C( S)
The italics tag  key word or phrase  highlight   4

u  ei tags %/
font face 
stylize 

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

p,: HTML Italics:


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

1.<b>HTML</b>
2.<em>Hyper Text Markup Language</em>

p,: HTML Dictionary


HTML
Hyper Text Markup Language
or
HTML
Hyper Text Markup Language

HTML BOLD AND I TALI CS


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

8
.
H 
 k I 3



2 
1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>

p,:
Phillip M. Rogerson MD

a blockquote!

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


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

p,: Format Links:


Include several external links throughout your texts as references to your viewers, we will
discuss HTML Links in a later lesson.

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


2 
: E+

 E+ %

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

1.This text has been formatted to be computer <code>code</code>!

p,: Computer Code


This text has been formatted to be computer code!
Use this tag to separate any computer code you wish to display on your website. It is not always
necessary, but the tag exists if you so desire.
HTML - CODE LI NKS
/J3 link 4+
 %/
web page e 2
 /
 
1.<p>Feel free to search <a href="http://www.google.com" target="_blank">
2.<code>Google</code>
3.</a> for
4.anything you wish to find on the internet.</p>

p,: Code Links:


Feel free to search Google for anything you wish to find on the internet.

HTML - <PRE> PREFORMATTI NG


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

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

1.<pre>
2.Roses are Red,

3.e2
 .
s+ %!Violets are blue,
4.I may sound crazy,
5.e2
 .
s+ %!But I love you!
6.</pre>

p,:
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!

eiee sA skp,
sA skp,a 6skp,
a 6skp,sT i

2 
: E+

 E+ %

1.<p>This text is <sup>superscripted!</sup></p>

p,: Superscript:
This text is superscripted!

HTML EXPONENTS
a exponential 4

 <sup> tag 4
  4.
1.2<sup>3</sup> = 8
2.14<sup>x</sup>

p,: Exponents:
23 =
14x

HTML C
: :

: :
u/
+ 
pn 2
8
. 
 2
reference .
 <sup> tag 4
4. 8
 
 ,  
1.<p>"It was a lover's tryst<sup>1</sup>."
2.<hr />
3.1. Secret meeting between lovers

p,: Footnote
"It was a lover's tryst1."
1. Secret meeting between lovers
HTML - SUBSCRI PT

1.<p>This text is <sub>subscripted!</sub></p>

p,:
This text is subscripted!
1.<p>H<sub>2</sub>0 - Water
2.<p>O<sub>2</sub> - Oxygen
3.<p>CO<sub>2</sub> - Carbon Dioxide

p,:
H2O - Water
O2 - Oxygen
CO2 - Carbon Dioxide
HTML STRI KETHROUGH
<del> tag e 
H 
 2
 k+ o.
8
.
1.<p>This text is <del>scratched</del> out!</p>

p,: Strikethrough
This text is scratched out!
HTML - CHECK OFF TASK:
1.<ol>
2.<li>Clean my room</li>
3.<li><del>Cook Dinner</del></li>
4.<li><del>Wash Dishes</del></li>
5.</ol>

p,:
1. Clean my room
2. Cook Dinner
3. Wash Dishes

eiee Cl ( HTML For m)


2 
:

 E+ %

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


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

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

7 / +2
 
  /
 ,%/
forum e 9  k  s 
 /
  i

TEXT FI ELDS

'
 +m, forms 6 7   4. +
%/
 %
 4 Input fields 4c form 
 sandwich e 

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

u 
type - ei attribute input field e p
' H,
  8 text, submit, e password
name - ei attribute given field e 
   8
 /  ,  %/  reference % /
 
size - ei attribute field e horizontal width + 
maxlength ei attribute character e maximum m H,
 
<form method="post" action="mailto:
[email protected]">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />
Password: <input type="password" size="10" maxlength="10" name="password">
</form>

p,: Input Forms


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

1. "text"
2. "password"
3. "checkbox"
4. "radio"
5. "submit"
6. "reset"

HTML CHECKBOXES:
Checkboxes +
H
 
4

7 e
single question e a

!
i   .
Check boxes allow for multiple items to be selected for a certain group of choices. checkbox e
name e value attributes 8
radio button e name e value attributes  %  

<form method="post" action="mailto:


[email protected]">
Select your favorite cartoon characters.
<input type="checkbox" name="toon" value="Goofy">Goofy
<input type="checkbox" name="toon" value="Donald">Donald
<input type="checkbox" name="toon" value="Bugs">Bugs Bunny
<input type="checkbox" name="toon" value="Scoob">Scooby Doo
<input type="submit" value="Email Myself">
</form>

p,: Checkboxes:
Select your favorite cartoon characters.
Goofy
Donald
Bugs Bunny
Scooby Doo
Email Myself

HTML - SUBMI T BUTTONS:


Input type e H "submit" a/ +
  
 6 7 kt ul28
 specifies a very unique button. 82
%
submit button e 
/ 
2 , e 
,
 activate 4
84 %
submission button 6 7  ! 
i   attribute p.
 
4c value attribute %
8
b value attribute e 
 4+
 ,
  

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

p,: Submit Buttons


Submit

Continue Please!

HTML - RESET BUTTONS:


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

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

view source
print?
1.<input type="reset" value="Reset Fields" />
2.<input type="reset" value="Start Over" />

p,: Reset Buttons:

Reset Fields

Start Over

eiee 9kk Cl ( HTML Text Fi el d)


2 
:

 E+ %

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

p,: Text Fields:

HTML - TEXT FI ELD MAXLENGTH:


AXLENGTH:
maxlength attribute  , s 
!
@
4

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

4. size e
maxlength ei 4o.
p.

1.<input type="text" size="5" maxlength="5" />
2.<input type="text" size="15" maxlength="15" />
3.<input type="text" size="25" maxlength="25" />

p,: Maxlength Attribute

HTML - TEXT FI ELD VALUE:


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

view source
print?

1.<input type="text" size="5" maxlength="5" value="55555" />


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

Text Field Values:


55555
Corndog
Tizag Tutorials!

eiee 9kk e ( HTML Text Ar ea)


2 
:

 E+ %

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

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

 e
' 
 ! 2 
o  / e  kk e
 p , 4.
1.<textarea>Text Area!</textarea>

p,

HTML - TEXT AREA COLS AND ROW


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

4
cols androws p attribute e  +2
 
  4 8 @ 
 4  @ text area 4
1.<textarea cols="20" rows="10">Text Area!</textarea>
2.<textarea cols="40" rows="2">Text Area!</textarea>
3.<textarea cols="45" rows="5">Text Area!</textarea>

p,:

HTML - TEXTAREA WRAP:


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

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

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

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

p,:Text Area Wrapping:

1.<textarea cols="20" rows="5" wrap="off">


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

HTML - TEXTAREA READONLY:


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

H textarea e
 k  /   /
 n / ,    /
 

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


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,:

HTML DI SABLED
disabled attribute p.
  textarea 2
highlight 4. 
, H+  H
  e e 2
 / ,    /



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


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,:

eiee 9 Lo 96 $  ( HTML Radi o but t on)

2 
:

 E+ %

Radios 4 e p
i/ , 8
4

7 8
 e a/ +k     o 

 

 e 
 I'

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

+. '

1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />

p,: Radios:
Italian:
Greek:
Chinese:
ei , e i 'n +  o % o u
4  .
4
1.Italian: <input type="radio" name="food" />
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" />

p,: Multiple Radios:


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

radio  a

 l 4+
 Jt % 3  .
2 /
 
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:

eiee \A
 L ( HTML Upl oad For m)
2 
:

 E+ %

upload form 4


 iu
pictures, movies, 
e   webpages upload   /
 e
upload
form 4 e H  input form %/  +
H
'
 type attribute . e 
 4+
 file 2 upload form 6 7
  /
 
1.<input type="file"/>

pzHl:: UPLOAD FORM


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

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

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


2.<input type="file"/>

e2
 value 100 
 file +,
c 100kb 4 /

p,:

eiee DAL u: s ( HTML Dr op down l i st )


2 
:

 E+ %

Drop down lists 4 E  ,


 forms. %/

internet e 2! Drop down lists 2o  k p

i

%/  8 s
 3
 ++ >. d

/, 3
 Drop down lists e a a/+ 3
 8
%/  ic
 select  
/
 
Drop down lists 
<select> and <option> tags . 6 7 4. <select> tag e 
H Drop down lists

e 

 ,
 4. <option> tag e 
H Drop down lists e  6 7 
4.
1.<select>
2.<option>California -- CA</option>
3.<option>Colorado -- CO</option>
4.<option>Connecticut -- CN</option>
5.</select>

pzHl:: DROP DOWN LI ST

selected attributee +
4
8 %
/!n >. select 
as
. p,   /

HTML - SELECTI ON FORMS:
size attribute 4
 %/

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

1.<select size="3">
2.<option>California -- CA</option>
3.<option>Colorado -- CO</option>
4.<option>Connecticut -- CN</option>
5.</select>

pzHl:: SELECTI ON FORMS


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

HTML - SELECTI NG MULTI PLES:


multiple attribute e 
H %/

e a H >. select   /
 
1.<select multiple="yes" size="3">
2.<option>California -- CA</option>
3.<option>Colorado -- CO</option>
4.<option>Connecticut -- CN</option>
5.</select>

pzHl:: MULTI PLE SELECTI ONS


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

You might also like