1. |
:
• (HTML) Hyper Text Markup Language. ! , "
! ।
• # $ " % ! &# গ # ( % #।% # ( # & ।
• ( " # " *% + % " # । " য - & & & ( % . " %
- % " #
• % " / 0 " , /0 ( 1 ( " . # " $ (2
।&# ( 3 " "+ $ #& ( " " 4 $ #& Driven #& *% + % " # ।
য & গ # ( % ( 5 $ # )
" $। Notepad open *% + । য % % % " $ - 62 2 " $ 7$ $ &
# য Netbeans # Dreamweaver. য - 8 9% % % 62 %
" ।
( % য (:! # - -
• ; (Elements)
• গ (Tag)
• < # (Attribute)
; (HTML Elements)
(Elements): ;& HTML = #>।% HTML page % ? ( # ।
;& ! গ(tag) @ *% +। HTML ;! A #- ।&# B য " & Web
page #- % % " Paragraph text, # , গ( % - &# B elements " ।
;(Element) % ( গC%। 62 গ(opening tag) , ; @ D % ( # ( 3 #E
গ(closing tag) ।
1. <p> - opening paragraph tag
2. Element Content - paragraph words
3. </p> - closing tag
% Web page %# + ;(Element) ! F: HTML,head, title # body elements ।
! #3 B।
<html> Element...</html>
&# HTML 62 % HTML ( : # ( 3 less than greater than ( < >) G - % । য :
<html> । B " ( 3 </html> গ - % #। 5 <html> Welcome to Bangladesh </html>। Welcome
to Bangladesh Web page - (% #। # & Notepad Web page *% + % " ।
- Notepad Open % #।
start All Programs > Accessories >Notepad
% " Notepad # " H $ #
1.<html>
2.Welcome to Bangladesh
3.</html>
# " Notepad I % save J # % " index.html save #।
& I Double click open # । - # য Browser open B। # & web Page
*% + গ ।
<head> element
$K ; head, $K ; &L E M @ - । <head> elements য " header -( । head elements
@ গ & & N - (% । ; @ ( % " ।
<title> element
<head> ; O <title> ; % । য (:! title elements opening (<title>) #
2. closing(</title>) tag @ % browser # ( & # - (% ।
1.<html>
2.<head>
3.<title> My WebPage!</title>
4.</head>
5.</html>
<body> element
body element য web page - (% & #3 ! @ । য &# #3 ! web page - % %
body element গ @ % ।
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>
$! " $ " "P .html extension - & য N # *% + # "
- ।
গ (HTML Tag Tutorial in Bangla)
: I -M&
য " $K ; " % , $ % # &# & " গ - % " # । # - (% #
য paragraph - % paragraph % , # - % # % ।
গ @ % ( B
. 62 গ(opening tag)
.@ D % ((contents)
গ. (3 গ (closing tag)।
গ @ " web page " "B> % # % " Q % " ।
1.<p>A Paragraph Tag</p>
গ #R B % S %। % ! গ - ।
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>
Closing :
B B গ B য - closing tag - । % ; @ । & গ line break tag
# % <br/> 2 " ( । য # (3 # # # । 5 # - - " %
62 গ # # ।
B গ B য - # (3 # # # য গ, " গ।
1.<img src="/../mypic.jpg" /> -- Image Tag
2.<br /> -- Line Break Tag
3.<input type="text" size="12" /> -- Input Field
-( :
--Line Break--
3. < # (HTML Attribute tutorial in Bangla)
: I -M&
গ &T& < # # # । @2 য - # *% + % # attributes # #
# U, V% C % " । attributes value - # U V% - % " ।
1.<tag attributes ="value" attributes ="value">
1.<table width="150" height="100">
Class # id attribute # # % # B W% B। Class # id attribute & & ; I
% # "- X - B # (3 /0 , & & & ( ! &Y " # %
B।
1.<p>Paragraph type 1 Italics</p>
2.<p>Paragraph type 2 Bold</p>
-(
Paragraph type 1 Italics
Paragraph type 2 Bold
(HTML Name Attribute)
Name attribute Class # id attribute % W। Name attribute I # " ; & - য ।
1.<input type="text" name="TextField" />
-( :
attribute TextField -( #3 % # "- X # ( #- (javascript , css)
(HTML- Title attributes)
attribute ; ( # B popup ? যZ # যZ য # "
. ( " & % B popup ? -( ।
<h2 title="Hello There!">Titled Heading Tag</h2>
-(
Titled Heading Tag
(HTML- align attributes)
য - " ; & X #U " #% % % # % align attribute - % " । align # W #
য য left, right & center । $I[ & # left align # % ।
1.<h2 align="center">Centered Heading</h2>
Centered Heading
1.<h2 align="left">Left aligned heading</h2>
2.<h2 align="center">Centered Heading</h2>
3.<h2 align="right">Right aligned heading</h2>
Left aligned heading
Centered heading
Right aligned heading
Generic attributes:
Attribute - # " &Y # P য । # B < # - য HTML Tag
& & # # য ।
Attribute Options Function
align right, left, center & X (Horizontally) aligns tags
valign top, middle, bottom (Vertically) aligns tags
bgcolor
numeric, hexadecimal, RGB
values
Element background color -( ।
backgroundURL Background image " element -( ।
id # # + -( য +
Element Name য Cascading Style Sheets (css) & # #
।
4. class # # + -( য +
Element ] + # & য Cascading Style Sheets (css) & # #
।
width Numeric Value Tables, images, or table cells width -( ।
height Numeric Value Tables, images, or table cells height -( ।
title # # + -( য + " elements "Pop-up" title ।
" I (HTML Paragraph Tutorial in Bangla)
: I -M&
( S ^ " I গ # # । # & @ # M ।
<p> গ - - (" I) -( । গ # # I " I ? " I
&D _ ।
1.<p>Avoid losing floppy disks with important school...</p>
2.<p>For instance, let's say you had a HUGE school...</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.
- (HTML paragraph –justification)
$ $K ; য # justify &# - & % % # justify # #
% " ।
1.<p align="justify">For instance, let's say you had a HUGE school or
work...</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.
- (HTML paragraph –centering)
$ $K ; % " I % display window @ #U #।
1.<p align="center">For instance, let's say you had a HUGE school or
work...</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.
- (HTML paragraph –align right)
$ $K ; % " I % display window $ " ( #U #।
1.<p align="right">For instance, let's say you had a HUGE school or work...</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.
$ (HTML Heading Tutorial in Bangla)
5. : I -M&
$ # ( & @ % # & # & # - য । $ গ @ ? bold
& # - (% # য $ " । $ ! ` % a @ &+ #b। `
&# #c # a &# B $
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
are
great
for
titles
and subtitles
S #3 য % $ L N option B । $ built in attribute । $ &
N য ।
! ! " :
$ # paragraph & # # % " । - - ।
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>
-( :
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.
N
: I -M&
গ - B N গ % W। N গ (3 " %
62 % & য #। গ d N G% । e &I $ য Enter -
য , C % ।
1.<p>
2.Will Mateson<br />
3.Box 61<br />
4.Cleveland, Ohio<br />
5.</p>
-( : N & য C address *% + % " ।
Will Mateson
Box 61
Cleveland, Ohio
# C & f g 3 % " ।
1.<p>Sincerely,<br />
2.<br />
3.<br />
6. 4.Kevin Sanders<br />
5.Vice President</p>
-( :
Sincerely,
Kevin Sanders
Vice President
#3 য N গ closing tag ।
HTML horizontal rule:
Horizontal rule
গ - ( ।
গ # # screen " & X -( । line break tag % Horizontal rule tag closing
tag ।
1.<hr>
2.Use
3.<hr><hr>
4.Them
5.<hr>
6.Sparingly
7.<hr>
#$ % :
Use
Them
Sparingly
Horizontal rule h" i # # #3 & ( S ^ # # ।
1.<hr>
2.1. "The Hobbit", JRR Tolkein.
3.
4.2. "The Fellowship of the Ring" JRR Tolkein.
-( :
1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.
P (HTML List Tutorial in Bangla)
: I -M&
% P #- । <ol> tag - 62 @ # P(ordered list), <ul> গ - 62
@ # % + P(unordered list), <dl> গ - 62 & 9 P(definition list)।
<ul> - unordered list; #
<ol> - ordered list;
<dl> - definition list; @
7. & (HTML ordered lists)
<ol> গ - e P(ordered list) 62 । <li> গ d j # % (list item) # O ।% *% +
<li> গ " opening (<ol>) # closing (</ol>) tag @ % । e (ordered)
য `, k, l % -।
1.<h4 align="center">Goals</h4>
2.<ol>
3.<li>Find a Job</li>
4.<li>Get Money</li>
5.<li>Move Out</li>
6.</ol>
#$ % :
Goals
1. Find a Job
2. Get Money
3. Move Out
Start attributes - য + % P 62 য ।
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>
#$ % :
Goals
4.Buy Food
5.Enroll in College
6.Get a Degree
& (HTML ordered lists continued)
@ # P(ordered list) B। ! & @ `,k,l " # % # #R % "
% #c % # B % । type attribute # # " #% ।
1.<ol type="a">
2.<ol type="A">
3.<ol type="i">
4.<ol type="I">
Ordered List 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
& (HTML unordered lists)
<ul> গ & য # P *% + । # P # % য `. squares k.discs l.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>
#$ % :
Shopping List
• Milk
• Toilet Paper
• Cereal
• Bread
8. type attributes # # unordered list # # # % " ।
<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
(HTML definition lists)
Definition list # # & @ % @ - % " । <dl> tag # # Definition list *% + । য Define
5 & 9 % % % bold - %। Definition list tag @ - tag X Z &!
`. <dt> k. <dd> ।
<dl> tag: P 62 গ # # ।
<dt> tag: য & 9 %(Define) # গ # # % ।
<dd> tag: <dt> tag য B % &Y ।
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>
#$ % :
Fromage
French word for cheese.
Voiture
French word for car.
$ (HTML Color code)
: I -M&
Color set % "b % B। & @ B য , & - , , &# , + । value
& & & - । `a M ।
'( ) :
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
- ! * + , (HTML- Coloring system: rgb value)
" - "- web design HTML rgb # # " ( -# Non-IE browser, HTML rgb
& " । " য - CSS ( % % " - % #3 & E ।
Red, Green # Blue % & _ rgb । % m(য ) % knn(য .
&Y )। rgb I rgb(RED,GREEN,BLUE)।
Red, Green ! Blue :
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
9. - ! * +: - (HTML- Coloring system: Hexadecimal)
Hexadecimal system #O % system C । practice @ #3
& য #। Hexadecimal system & S ^ য গ # #o # #p%। Hexadecimal system ;
standard color।
Hexadecimal a digit "U " । - digit(RR), Red value -( " # % - digit(GG), Green
value -( # &# (3 - digit(BB), Blue value -( ।
- !
bgcolor="#RRGGBB"
- ! (HTML- Color code: breaking the code)
# - B # #R Hexadecimal system Numbering system # @% `a digit W+% ।
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
% #R & # # # । #R " 2" X । - - ।
. - :
bgcolor="#FFFFFF"
"F" & # V " # ("#FFFFFF") & - -( । #3 #A %
B।
- /":
(15 * 16) + (15) = 255
" &^ # A#। F (`n) `a d ! " # % & য গ % #। knn য
S ^ & # V। - - ।
$ :
bgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5
I; (HTML Font Tutorial in Bangla)
: I -M&
<font> গ # # # & ? P , & # য গ । size, color # face attributes
# # " I; P % " ।<basefont> গ # # " & ? P , &
# & য ।
<font> # <basefont> গ # # & & &( & & & B) # # %।
, (Font size)
Size attribute & য I; & C । I; য গ `(&# B ) % q(&#
#c)। I; $I[ l।
1.<p>
2.<font size="5">Here is a size 5 font</font>
3.</p>{}
#$ % :
Here is a size 5 font.
! (Font color)
attribute & য font color & ।
1.<font color="#990000">This text is hexcolor #990000</font>
10. 2.<br />
3.<font color="red">This text is red</font>
#$ % :
This text is hexcolor #990000
This text is red
(Font face)
I; face S ^ &% % " & P @ % I; P - % " . I;
- % " # # % " # % $I[ & # Times New Roman I; - % " # ।
1.<p>
2.<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
3.has had its font...</font>
4.</p>
#$ % :
This paragraph has had its font formatted by the font tag!
(Basefont)
Basefont গ & য " # " $I[ I; & % " । basefont # # &C " -
।
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>
#$ % :
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!
( 3 # % font # basefont # # & & & ( & & & B) # # ।
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
#0 12 34 :
I; P য @ P য ।
1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
2.your font to achieve a desired look.</p>
#$ % :
Customize your font to achieve a desired look.
+ I -M&
" " & ? " *% + - % " য J " /& & #।
anchor tag & য *% + । 6@ ? " 8 & " - % " ,
11. B # " - % " ,#c # " & "^ *% + ! % - % " ( &# J
" . ( য # য 62 B)।
-5 6(href)
href < # -( য J য #।
Hypertext reference % " Internal, Local, Global ।
; : " @ *% + #।
: " web site % " & *% + #।
r # : " web site # web site *% + #।
; - href="#anchorname"
- href="/webcoachbd/../pics/picturefile.jpg"
r # - href="http://www.tizag.com/"
! ( -5) 78 9+ :
<a> # </a> tag d য s 62 # (3 # O । href < # & য @ U "% # %
@ % । href < # opening tag @ % । opening # closing tag @ , % "
web " & # - য #। য
1.<a href="http://www.webcoachbd.com/" target="_blank" >Webcoachbd Home</a>
2.<a href="http://www.google.com/" target="_blank" >Google Home</a>
3.
4.<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
#$ % : r #
Webcoachbd Home Google Home Yahoo Home
! % (HTML-link Target)
Target < # d # O , " % # "D window % # % # 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
।
!
? " য # *% + & # % # 6@ href < # % $ @
গ # & C B # C - # । য
<a href= "mailto:abc@mail.com" >Email Example</a>
#$ % :
Email Example
" & য , P &# mailto:abc@mail.com - #। J
" N abc@mail.com C " Q S^ t% #। & # # ,@2
" I I? N # # B , " য - Tools>Options>Applications গ mailto গ
8"$ Use Yahoo mail & u - % Email Example J " o # #
To I v গ abc@mail.com Q #।
" subject # body C - % " য
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email
Example</a>
-( :
2nd Email Example
J " o # # To গ a@b.com Subject গ Web Page Email
Body % This email from your site ! গ #& #।
!
14. src="/../pics/sunset.gif"
pic directory picture file "## % directory % #U
.html file %।
-alternative attribute:
Alt attribute -P ? 5 য - (% % ? - (% ।
- (% % " I _ গ B # browser I " ।
1.<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />
#$ % :
- height ! width:
height # width C height # width attribute # # ।
1.<img src="/sunset.gif" height="50" width="100">
#$ % :
-Vertically ! Horizontally align :
Align # valign attribute # # #U @ % " ।
1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center
- -
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>
#$ % :
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!
- ! :
& # # # য ।
1.<a href="http://www.webcoachbd.com/">
2.<img src="/sunset.gif">
3.</a>
-( :
- Thumbnails:
16. 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>
#$ % :
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>
#$ % :
Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
# x (HTML Background Colors Tutorial in Bangla)
: I -M&
bgcolor < # # (3 # # " # # # x { । Bgcolor < #
গ @ # # য % # &# <body> # <table> গ @ # # । % Z & #
# x P % & & & # x(CSS B) - % " ।
@ :
<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>
#$ % :
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!
A 7 :
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>
17. 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>
#$ % :
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)".
! 7 :
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>
#$ % :
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
" A 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>
#$ % :
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>
#$ % :
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.
# x (HTML Background Tutorial in Bangla)
: I -M&
# x < # & য # # x & # - য ।
18. 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>
#$ % :
This table has a
background
image
- A :
" - - গ B য # B # & # & & । য - # B #
#c % # # x B # " #।
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>
#$ % :
This table has a background image
- % A
# W I $ &• - # W " # x B # < 7" ; # x B # *% + য ।
< 7" ; I gif I % # jpeg I ।
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>
#$ % :
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>
#$ % :
€ (HTML Frame)
: I -M&
€ @ & N x % ! $K ; -( য ।
-a generic frame page:
€ # ( # # € € % ; ।য J % & #
" ; " ।
1.<html>
2.<head>
3.</head>
4.<frameset cols="30%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">
7.</frameset>
8.</html>
-( :
21. (HTML Embed Music Tutorial in Bangla)
: I -M&
# " music ‚ & । Embed গ & য music ‚ # src attribute & য media file
( C ।
1.<embed src="/Madine Ko Jain.mp3" />
Embed Attributes – #$ % 0 B% +:
Embeded media player # 2" P % attribute & % #।
`. width - media player &U%
k. height - media player V%
l. hidden – য - &% % # media player - (% # । &" ( # attribute # # % য -
" # " music #E option ।
1.<embed src="/last breath.mp3" width="360" height="165" />
Embed Attributes – 7%#C : :
Embeded media player য R + P % attribute & % #।
autostart – attribute - false # true । য - true - % # # " & & গ 62 #।
loop - attribute - false # true। true & গ " # false # ।
volume - attribute d media file volume & । &+ m-`mm।
1.<embed src="/beethoven.mid" autostart="false" loop="false"
2.volume="60" />
$ (HTML Video Tutorial in Bangla)
: I -M&
22. Music I % $ I <embed /> গ - # " -( য । image গ % embed গ
closing গ । src attribute @ &C URL(local # global) C $ # "
-( য ।
1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg"
2.autostart="false" />
-( :
" href attribute @ &C URL C $ # " -( য ।
1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">
2.motiontween1easy.swf</a>
( # J play)
- 8 D E
Flash movies (.swf), AVI's (.avi), and MOV's (.mov)। embed গ &# I & " ।
.swf files - I ƒ (
.wmv files – I e &I x $ "।
.mov files - I " K $
.mpeg files – standard I য Moving Pictures Expert Group d compression movie I *% + B।
" I ! @ ; # ( # # swf, mpeg I ! ।
- Embed Attributes:
Src attribute % <embed /> গ attribute B &! volume, autostart, hidden, and loop ।
autostart - attribute - false # true । য - true - % # " & & $ 62
য #।
hidden - attribute @ play/stop/pause { । embedded object is hidden or not. Values are true or
false. (Hide your embeded media if you just want background noise).
loop - attribute - false # true। true & $ " # false # ।.
playcount - Setting a playcount & media x number "যX repeat # # % repeat
" # % (playcount="2" video - # #).
volume - attribute d media file volume set । &+ m-`mm।
# $ (HTML Body)
: I -M&
Body tag য web page & element @ । Tables, Lists, Forms, paragraph element ! Body element
@ % ।
HTML - Body Margins:
Attributes
Leftmargin: body element. # " ( ।
topmargin :body element " ।
1.<body topmargin="50">
2.<body leftmargin="50">
#$ % :
Top Margin
Left Margin
23. HTML - Base Text:
Text attributes @ Body tag % & ? C য ।
1.<body text="red" >
#
1.<body text="rgb(255,0,0)" >
$ ( HTML Div Tutorial in Bangla)
: I -M&
<div> গ গ " ^ & # body গ %।
Div ; ! block ; য X গ ! ^ ।
& & & S ^ Div ; !2„" ।
$ # #p% % ! attributes - ।
id
width
height
title
style
-( - strong visualization $ style attribute @ -( য ।
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>
-( :
$ -
8 ,
# # € B c l [ & # div ; # # য ।
beginning and ending গ @ div ; & ; @ % " ।
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>
-( :
F $
01.<div id="menu" align="right" >
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="right" >
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>
24. -( :
$
# v # (HTML Bold & Italic)
: I -M&
<b> bold tag # # ? # v % " ।
1.<b>This text is entirely BOLD!</b>
#$ % : Bold:
This text is entirely BOLD!
? highlight % bold tag # # % " ।.
1.<p><b>Don't</b> touch that!</p>
#$ % :
Don't touch that!
dictionary fashion. bold tag # # % " ।
1.<p><b>Cardio:</b> Latin word meaning of the heart.</p>
#$ % : Dictionary
Cardio: Latin word meaning of the heart.
HTML - Italic(s)
The italics tag key word or phrase highlight % # # %। tags " font face stylize #
D % - # # ? - #। Emphasized tag italics tag %।
1.Italic <i>tag</i>!
2.<em>Emphasized</em> Text!
3.Create a <blockquote>blockquote</blockquote>!
4.Format your <address>addresses</address>!
#$ % : 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>
#$ % : HTML Dictionary
HTML
Hyper Text Markup Language
25. or
HTML
Hyper Text Markup Language
HTML Bold and Italics
<b> and the <i> tags & text format # # য ।
6@ % - e C % - # ।
1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>
#$ % :
Phillip M. Rogerson MD
<b> and the <i> tags ? # # # " #O য ।
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>
#$ % : Format Links:
Include several external links throughout your texts as references to your viewers, we will discuss HTML Links in a
later lesson.
$ # pre গ (HTML Code & Pre)
: I -M&
code tag @ " text computer code % % " । & @ # text font face, size,
# letter spacing " #% % " ।
1.This text has been formatted to be computer <code>code</code>!
#$ % : 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 Links
"D link & # " web page - % " ।
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>
#$ % : Code Links:
Feel free to search Google for anything you wish to find on the internet.
HTML - <pre> Preformatting
<pre> tag & #@ HTML coding & য # N , y& -( - # C & # ? - (%
#। 5 য # $ # & # " - #।
1.<pre>
2.Roses are Red,
3. y& BViolets are blue,
4.I may sound crazy,
5. y& BBut I love you!
26. 6.</pre>
#$ % :
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!
&" /0,& # /0,… †
: I -M&
1.<p>This text is <sup>superscripted!</sup></p>
#$ % : Superscript:
This text is superscripted!
HTML – Exponents
exponential # # <sup> tag # # % ।
1.2<sup>3</sup> = 8
2.14<sup>x</sup>
#$ % : Exponents:
23
= 8
14x
HTML – 3 :
" & # # E - য reference - <sup> tag # # য I -( ।
1.<p>"It was a lover's tryst<sup>1</sup>."
2.<hr />
3.1. Secret meeting between lovers
#$ % : Footnote
"It was a lover's tryst1
."
1. Secret meeting between lovers
HTML -Subscript
1.<p>This text is <sub>subscripted!</sub></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
-( :
H2O - Water
O2 - Oxygen
CO2 - Carbon Dioxide
HTML – Strikethrough
<del> tag @ e& - য ।
1.<p>This text is <del>scratched</del> out!</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>
#$ % :
27. 1. Clean my room
2. Cook Dinner
3. Wash Dishes
I ( HTML Form)
: I -M&
# & % % (name, email address, credit card, % -) S ^ # P I !2}" tool & #
। " - য + I -( % " । " $ &‡ % " , order % " ,
# # + " & % " , " forum . # Z …( % " % - ।
- F
# &Y I *% + % & " - গ % #। Input fields form sandwich গ (% ।
<input> tag B attributes B &&# & E % ।
type - < # " Iv - @ । য text, submit, # password ।
name - < # - Iv য য % " # % % " reference % " ।
size - < # Iv horizontal width & ।
maxlength – < # character & # V @
<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>
#$ % : Input Forms
Name:
Password:
- 3 :
Input fields @ য&# & X Z &! checkboxes, text fields, radios, # form submission buttons।
<input /> গ closing tag ।
-Type Attribute:
Type attributes & য input tag -( % " । % ! input tag - ।
`. "text"
k. "password"
l. "checkbox"
~. "radio"
n. "submit"
a. "reset"
– -:
#? ! # B & #@ - । #? name # value < # য $ #
name # value < # % ।
<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>
#$ % : -:
28. - :
Input type @ "submit" "( & # # *% + S ^ ˆ য গ ।specifies a very unique button. য
submit button " - # % I # % activate #।
য % & # # *% + B % % < # % value < # । য (: value
< # & # # # % # " - (% #। "Submit" or "Continue" (:! value < #
& # # # । .
1.<input type="submit" value="Submit" />
2.<input type="submit" value="Continue Please!" />
-( : & # #
- :
&# (3 input type & # । & # J @ " I &# B # " # L # #U
য % " # ।"start over" # " & # % # # % " # ।
1.<input type="reset" value="Reset Fields" />
2.<input type="reset" value="Start Over" />
#$ % : & # :
?u Iv (HTML Text Field)
: I -M&
Text fields B % S^ য " ? " % # & % web server " Q % & য #। &#
% ! scripting language য (PHP, PERL, or ASP) @ e ।
HTML - Text Field Size:
Size attribute @ text area size { য । default size & @ % km characters -g ।
1.<input type="text" size="5" />
2.<input type="text" size="15" />
3.<input type="text" size="25" />
#$ % : Text Fields:
HTML - Text Field Maxlength:
maxlength attribute -P B c # # + % % characters " % " # " য - &
-P । characters " &+ #b % maxlength attribute # # । size # maxlength
।
1.<input type="text" size="5" maxlength="5" />
2.<input type="text" size="15" maxlength="15" />
3.<input type="text" size="25" maxlength="25" />
#$ % : Maxlength Attribute
29. HTML - Text Field Value:
value attribute # # " গ ? I v B % " য & - % " #।
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
?u (HTML Text Area)
: I -M&
?u Šগ % % % % # #p% । Paragraphs, essays, or memos & "_
?u % #& য # & # য । ?u opening # closing গ B। ?u গ
% B % # " ?u % - (% ।
1.<textarea>Text Area!</textarea>
-(
Text Area!
HTML - Text area Cols and Rows:
Adjust the of the text area size appearance C % - attributes % cols androws। %
attribute & গ% - % । য% #c # %% #c 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>
-( :
Text Area!
Text Area!
Text Area!
HTML - Textarea Wrap:
wrap attribute ? য " @ য textarea text field % % & ( 3 &। Wrap
30. % @ & B। য :
`.soft
k.hard
l.off
wrap attribute Soft word text area % c I but form & # % c word -
য (Line breaks "( য গ )
wrap attribute Hard word text area % c I # ( 3 Line breaks "( য গ
। % " form & # - য য # text box B C & # - ।
wrap attribute Off word text area % c I # # % % ।
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>
-( :Text Area Wrapping:
As you can see many
is often the desired lo
nice and easy to read
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>
-( : No Wrapping
As you can see many
is often the desired lo
nice and easy to read
HTML - Textarea Readonly:
readonly attribute value - yes # no। readonly attribute yes " 6@ textarea ? "
% " # ‹ " #% % " # ।
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>
-( :
As you can see many
times w ord w rapping
it makes everything n
HTML – Disabled
disabled attribute গ I textarea highlight , @& @ # " #% % "
।
1.<textarea cols="20" rows="5" wrap="hard" disabled="yes">
2.As you can see many times word wrapping is often the desired
31. 3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>
-( :
As you can see many
times w ord w rapping
it makes everything n
$ # % (HTML Radio button)
: I -M&
Radios " I য # # + য "( & u % # । $ # % # #
C # - % #।"multiple choice" @ K # Œ Radios # # &# ।
1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
#$ % : Radios:
Italian:
Greek:
Chinese:
I - W & $ - - ।
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" />
#$ % : Multiple Radios:
Italian:
Greek:
Chinese:
Male:
Female:
- Radio Checked:
checked < # , & য " radio % $I[ & # #D „ গ - % " ।
1.Italian: <input type="radio" name="food" checked="yes" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
-( :Default Italian:
Italian:
Greek:
Chinese:
" $ ( HTML Upload Form)
: I -M&
32. upload form # # pictures, movies, # webpages upload % " । upload form
@ input form । " & @ # type attribute - & # file upload form *% + % " ।
1.<input type="file"/>
#$ % : Upload Form
Max File Size
upload I size &+ # @ - " " webserver # space S % " ।
hidden input field # B specific attributes য গ # ।
1.<input type="hidden" name="MAX_FILE_SIZE" value="500" />
2.<input type="file"/>
value 100 file & # V 100kb % " #।
-( :
8"$ P ( HTML Drop down list)
:
8"$ P @ " % *% + % " # য য
& u - % " #।@2 " I *% + % # # & য % & u
- % " ( ! @ ) "( % #,% 8"$ P @ & & % " ।
8"$ P *% + % <select> গ - $ 62 % # " য ! # B #
&! % <option> গ @ % #। য
1.<select name="color">
2.<option value="bl">Black</option>
3.<option value="wh">White</option>
4.<option selected="selected" value="mr">Maroon</option>
5.</select>
-( :8"$ P
" - - selected < # "( Maroon - " য - White - % l
selected < # # # # ।
% <option> গ value < # B # ! }" য I $ & " Q # ।value < # @
( য bl,mr..) % ।
<select> size
<select> গ size < # - " C - % " য P - # য " - য -
size=2 - % - "( - # # / - % #।
01.<select name="color" size=2>
02.
03.<option value="bl">Black</option>
04.
05.<option value="wh">White</option>
06.
07.<option selected="selected" value="mr">Maroon</option>
08.
09.</select>
-( : <select> গ size < #
<select> multiple
multiple @ " @ #3 & u & য গ - % " ।
01.<select multiple="yes">
02.
03.<option value="bl">Black</option>
