Term Paper

| Bangl a)
(Elements) ( Tag) ( Attributes) ( Paragraph) (Heading) (List) (Font) (Link) (Entity) (Comments) (Images) (Tables) (Colors) (Background) (Frame) (Layout) (Embed Music) (Vedio) (body) (Div)

( HTM Tut or i al i n L

+ + (Form)

(Upload)

:

•

Hypertext Markup Language.

,

।

• • •

।

PHP+Database
•

Driven WebSite

। ।

webcoachbd.com

( Notepad open Netbeans or Dreamweaver. • • •

) ।

(Elements) (Tag) (Attribute) >>

( HTM El em L ent s)
:

(Elements): (tag) page (Element) (closing tag) ।

HTML HTML Paragraph text, ,

HTML page Web elements (opening tag) , ।

1. <p> - opening paragraph tag 2. Element Content - paragraph words 3. </p> - closing tag Web page (Element) elements । ।

: HTML,head, title

body

<html> Element...</html> HTML HTML <html> । </html> Welcome to Bangladesh Web page Notepad Open start All Programs > Accessories >Notepad Notepad
1.<html> 2.Welcome to Bangladesh 3.</html>

less than

greater than ( < >)

:

<html> Welcome to Bangladesh </html>। Notepad Web page

Notepad Double click Page ।

save open ।

index.html Browser

save open

। web

<head> element head, elements <title> element <head> closing(</title>) tag <title> browser

<head> elements

header ।

head

title elements ।

opening (<title>)

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

<body> element body element 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>

web page

.html extension ।

( HTM Tag Tut or i al i n Bangl a) L
:

, paragraph . . . paragraph (opening tag) (contents) (closing tag)। web page
1.<p>A Paragraph Tag</p>

,

।

।

।
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 <br/> ।

: closing tag line break tag

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

।

:

--Line Break--

( HTM At t r i but e t ut or i al i n Bangl a) L
:

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

Class ।

id attribute

Class , (

id attribute

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

Paragraph type 1 Italics Paragraph type 2 Bold

BUTE) ( HTM NAM ATTRI BUTE) L E Name attribute ।
1.<input type="text" name="TextField" />

Class

id attribute

Name attribute

: attribute TextField L( HTM - TI TLE ATTRI BUTES) L attribute popup popup । (javascript , css)

<h2 title="Hello There!">Titled Heading Tag</h2>

Ti t l ed Headi ng Tag
( HTM - ALI GN ATTRI BUTES) LL align attribute align

left, right & center ।

left align

।

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 । Attribute Options align valign bgcolor right, left, center top, middle, bottom Function (Horizontally) aligns tags (Vertically) aligns tags background color element । । HTML Tag

numeric, hexadecimal, RGB Element values

background URL

Background image Element Name ।

Cascading Style Sheets (css)

id

Element class ।

Cascading Style Sheets (css)

width height

Numeric Value Numeric Value

Tables, images, or table cells Tables, images, or table cells

width height

। ।

title

elements

"Pop-up" title ।

( HTM Par agr aph Tut or i al i n Bangl a) L
:

। <p> ।
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.

।

( HTM PARAGRAPH –JUSTI FI CATI ON) L JUSTI 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. ( HTM PARAGRAPH –CENTERI NG) L CENTERI

display window

।

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. ( HTM PARAGRAPH –ALI GN RI G L ALI HT) display window ।

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.

( HTM Headi ng Tut or i al i n Bangl a) L
:

bold

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

option । : paragraph
1.<h1 align="center">Essay Example</h1>

।

built in attribute ।

।

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.

( HTM Li ne Br eak) L
:

paragraph headings) ।
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>

HTML element(tables, lists, and

: Will Mateson Box 61 Cleveland, Ohio

address

।

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

: Sincerely,

Kevin Vice President closing tag L RULE: HTM HORI ZONTAL RULE: Horizontal rule line break tag
1.<hr /> 2.Use

Sanders ।

<hr/> Horizontal rule tag

<hr/> closing tag ।

screen

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

: Use

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

।

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

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

Start attributes
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>

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

STS ( HTM ORDERED LI STS CONTI NUED) L (ordered list) type attribute
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 a. Find a Job b. Get Money Upper-Case Letters A. Find a Job B. Get Money Lower-Case Numerals Upper-Case Numerals i. ii. Find a Job Get Money Move Out I. II. Find a Job Get Money Move Out

c. Move Out

C. Move Out

iii.

III.

STS) ( HTM UNORDERED LI STS) L <ul> full discs । . squares .discs .circles । default

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>

:
Shoppi ng Li st
• • • •

Milk Toilet Paper Cereal Bread

type attributes <ul type="square"> <ul> type="dics"> <ul> type="circle"> type="square" Milk Toilet Paper Cereal Bread

unordered list

।

type="disc"
• • • •

type="circle" o o o o

Milk Toilet Paper Cereal Bread

Milk Toilet Paper Cereal Bread

STS) ( HTM DEFI NI TI ON LI STS) L Definition list Define . <dt> . <dd> । <dl> tag: <dt> tag: <dd> tag: <dt> tag
1.<dl> 2.<dt><b>Fromage</b></dt>

bold । (Define)

<dl> tag Definition list Definition list tag

tag

। ।

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

: Fromage French Voiture French word for car. word for cheese.

( HTM Col or code) L
:

Color set

, । :

,

,

,

value

Black Yellow Red Maroon -

Gray Lime Green Olive

Silver Aqua Blue Navy

White Fuchsia Purple Teal L( HTM - CO L LORI NG SYSTEM RGB VALUE) :

web design rgb Red, Green Blue )। rgb RED, GREEN BLUE CSS

HTML rgb । rgb । (

Non-IE browser, HTML

)

(

rgb(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

-

:

L( HTM - CO L LORI NG SYSTEM HEXADECI M : AL) system practice Hexadecimal system digit(GG),

Hexadecimal system Hexadecimal system standard color। Hexadecimal Green value digit

digit(RR), Red value digit(BB), Blue value ।

bgcolor="#RRGGBB" । Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 । : bgcolor="#FFFFFF" "F" । : (15 * 16) + (15) = 255 F : bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green) ( ) । ("#FFFFFF") LCODE) ( HTM - COLOR CODE: BREAKI NG THE CODE) L Hexadecimal system Numbering system digit

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

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

( HTM Font Tut or i al i n Bangl a) L
:

<font> । <font> <basefont> ( FONT SI ZE) Size attribute )। ।

, <basefont>

size, color

face attributes , ।

(

)

(

)

(

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> 2.<br /> 3.<font color="red">This text is red</font>

: This text is hexcolor #990000 This text is red ( FONT FACE) face Times New Roman ।
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
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>

basefont

।

color="green"> has had its font...</p> has had its font...</p> has had its font...</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! font basefont (

by by

the the

basefont basefont

tag! tag!

)

।

Attributes: Review Attribute= "Value" size= color= face= "Num. Value 1-7" Description Size of your text, 7 is biggest

"rgb,name,or hexidecimal" Change font color "name of font" Change the font type

: ।
1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize 2.your font to achieve a desired look.</p>

:

C
:

ustomize your font to achieve a desired look.

( HTM Li nk) L anchor tag , , href attribute Hypertext reference Internal: Local : Global: web site web site web site Internal, Local, Global । । । । L| HTM - HYPERTEXT REFERENCE ( HREF) L ।

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

L( HTM - TEXT LI NKS) L <a> </a> tag href attribute web opening tag । href attribute opening closing tag ,

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>

: Global Link Tizag Home ESPN Home Yahoo Home L( HTM - LI NK TARGET) L Target attribute , window browser window ।

target=" _blank" _self"

browser window current window

page 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 ।

browser web site : _blank Target: ESPN.COM

web site ESPN.COM ESPN.COM web site ।

window

Target attribute open

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

( HTM E m l ) L ai
:

standard anchor tag <a> inverted comma । <a href= "mailto: abc@mail.com" >Email Example</a> : Email Example : . subject .body Subject Body subject body information information । ।

href attribute ,

<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>

subject (Subject body ) ।

body

। : 2nd Email Example

( HTM Em l Li nk, Anchor ) L ai
:

site Email :

Email ।

<a href="mailto: ferdous@yahoo.com?subject=Feedback" > Ferdous@yahoo.com</a> mailto: ferdous@webcoachbd.com?subject=feedback Email ।

mailto: ferdous@webcoachbd.com?subject=feedback <a href="mailto: ferdous@webcoachbd.com?subject=Feedback&body=Sweet site!"> ferdous@ webcoachbd.com</a> : Complete Email: mailto: ferdous@webcoachbd.com?subject=feedback&body =sweet site! (HTML-download links) place thumbnail image link ।

HTML Code: <a href="http://www.webcoachbd.com/pics/htmlT/blanktext.zip">Text Document</a> : Download a Text Document: Text Document L( HTM - DEFAULT LI NKS; BASE) L <base> view source print?
1.<head> 2.<base href="http://www.webcoachbd.com/">

head element <base> tag ।

default URL

3.</head>

( HTM Ent i t i es Tut or i al i n Bangl a) L
:

symbol । : . . . Entity Entity semicolon (ampersand) – copy -;

symbol

,

,

-&

©

© - Copyright symbol.

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

: Everything that goes up, must come down!

।
1.<p> 2.Less than - < <br /> 3.Greater than - > <br /> 4.Body tag - <body> 5.</p>

: Less Greater Body tag - <body> than than < >

( HTM Com ent s Tut or i al i n Bangl a) L m
:

।

ignore . . .Temporarily comment note

। reminder . ।

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

opening tag 

।
<input type="text" size="12" />

: Input Field:

( HTM I m L ages Tut or i al i n Bangl a)
:

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

:

Src attribute

SRC: Src । (source) picture file ।

. Standard URL (src=http://www. webcoachbd.com/pics/htmlT/sunset.gif) . web server file (src="/../sunset.gif") picture file URL Types: Local Src src="/sunset.gif" src="/../sunset.gif" src="/../pics/sunset.gif" Location Description picture file picture file pic directory । .html file directory picture file directory .html file directory । । .html file location . file location ।

- ALTERNATI VE ATTRI BUTE: BUTE: Alt attribute browser । ।

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

:

height :

HEI G HT width

I W DTH: height width attribute ।

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

- VERTI CALLY Align valign attribute

HORI ZONTALLY ALI GN ।

:

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>

:

- THUM BNAI LS: Thumbnails Thumbnails
1.<a href="/sunset.gif"> 2.<img src="/thmb_sunset.gif"> 3.</a>

, ।

picture quality

( HTM Tabl es Tut or i al i n Bangl a) L
:

Horizontal <table> .<tr> <td> <th> <tfoot> Horizontal Horizontal data cell footer

vertical । </table> । data cell heading । । ।

tabular data cell ।

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>

: Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

: Rowspan header ।
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>

colspan <th> <th> default header

: Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2

CELL PADDI NG cellpadding cellspacing

SPACI NG ( cell (space) , । ) (space)

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>

:

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 Row 1 Cell 1 Row 2 Cell 1

Column 2 Row 1 Cell 2 Row 2 Cell 2

( HTM Backgr ound Col or s Tut or i al L i n Bangl a)
:

bgcolor <body> (CSS : <tagname bgcolor ="value"> <table>

Bgcolor ) ।

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

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>

: 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)". :
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>

: This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray! COLOR FONT COLO R:

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.

( HTM Backgr ound Tut or i al i n L Bangl a)
:

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

:

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>

:

( HTM Fr am L e)
:

। - A GENERI C FRAM PAGE: E PAGE: । ।
1.<html> 2.<head> 3.</head> 4.<frameset cols="30%,*"> 5.<frame src="/menu.html"> 6.<frame src="/content.html">

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

:

frameset – ।

parent tag

page

characteristics width total page ।

frameset (1st column) % content(2nd column) ।

frameset cols="#%, *"- Cols(column) total page frame src="/" :
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="#%, *"-

frameset cols="#%, *"-

।

EBORDER AND FRAM FRAM ESPACI NG: FrameBorder ।
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>

FrameSpacing attribute

Spacing

ugly gray lines

:

NORESI ZE AND SCROLLI NG:

Noresize attribute scrolling="(yes/no)"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>

।

( HTM Layout Tut or i al i n Bangl a) L
:

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

: Tables inside tables!

Standard layout ।

,

content

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>

:

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>

:

Banner goes here Links! Links! Links! Content goes here

( HTM Em L bed M usi c Tut or i al i n Bangl a)
:

music file ।

Embed

music

src attribute

media

1.<embed src="/Madine Ko Jain.mp3" />

BED ATTRI BUTES – EM Embeded media player . width - media player . height - media player . hidden – media player music

: attribute ।

attribute option ।

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

BED ATTRI BUTES – EM Embeded media player

: attribute ।

autostart – loop volume view source print?

attribute

false false media file

true ।

true false । ।

।

attribute attribute

true। true volume

1.<embed src="/beethoven.mid" autostart="false" loop="false" 2.volume="60" />

( HTM Vi deo Tut or i al i n Bangl a) L
:

Music
।

<embed /> src attribute URL(local global)

।

image

embed ।

closing

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

:

href attribute

URL

।

1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf"> 2.motiontween1easy.swf</a>

( -

play)

Flash movies (.swf), AVI's (.avi), and MOV's (.mov)। embed .swf files -

।

.wmv files – .mov files .mpeg files – । swf, mpeg - EM BED ATTRI BUTES: Src attribute loop । autostart । attribute false true । <embed /> standard

। Moving Pictures Expert Group । compression movie

attribute

volume, autostart, hidden, and

true

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 media ). volume set । x number repeat false . repeat

playcount - Setting a playcount (playcount="2" video volume attribute media file

( HTM Body) L
:

Body tag

web page ।

element

Tables, Lists, Forms, paragraph element

Body element

L HTM - BO DY M ARGI NS: Attributes Leftmargin: body element. । ।

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

: Top Margin

Left Margin

L HTM - BASE TEXT: Text attributes Body tag ।

1.<body text="red" >

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

( HTM Di v Tut or i al i n Bangl a) L
:

<div> Div Div attributes id width height title style strong visualization
1.<body> 2.<div style="background: green"> 3.<h5 >SEARCH LINKS</h5>

body block । ।

। ।

style attribute

।

4.<a target="_blank" href="http://www.google.com">Google</a> 5.</div> 6.</body>

SEARCH LINKS Google

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 readable material.</p> 09.</div> paragraph with all of your

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

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

( HTM Bol d & I t al i c) L
:

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

।

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

.

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

L HTM - I TALI C( S) The italics tag stylize key word or phrase highlight Emphasized tag italics tag tags । font face

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

a blockquote!

: HTML Dictionary HTML Hyper Text Markup Language or HTML Hyper Text Markup Language

L CS HTM BOLD AND I TALI CS <b> and the <i> tags text format ।
1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>

।

: Phillip M. Rogerson MD

<b> and the <i> tags

।

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
:

( HTM Code & Pr e) L computer code । text font face,

code tag size, letter spacing

text

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. L HTM - CO DE LI NKS 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.

L HTM - <PRE> PREFORM ATTI NG <pre> tag
1.<pre> 2.Roses are Red,

HTML coding ।

,

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

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

,
:

,

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

: Superscript: This text is superscripted!

L HTM – EXPONENTS exponential
1.2<sup>3</sup> = 8 2.14<sup>x</sup>

<sup> tag

।

: Exponents: 2 = 14x
3

8

L HTM –

: reference <sup> tag ।

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 L HTM - SUBSCRI PT

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 L HTM – STRI KETHROUGH <del> tag ।

1.<p>This text is <del>scratched</del> out!</p>

: Strikethrough This text is scratched out! L HTM - 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>

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

( HTM For m L )
:

web server tool order ,

(name, email address, credit card, form ,

) forum

webmaster

Forms , ।

TEXT FI ELDS

forms <input> tag type name size attributes ।

Input fields

form

sandwich

।

attribute input field attribute given field attribute field horizontal width character maximum ।

text, submit,

password । ।

reference

maxlength –

attribute

<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: L HTM - I NPUT TAGS: Input fields buttons। <input /> tag HTML -Type Attribute: Type attributes . "text" . "password" . "checkbox" . "radio" . "submit" . "reset" input tag input tag । closing tag checkboxes, text fields, radios, । form submission

L HTM – CHECKBOXES: Checkboxes name value attributes single question radio button name value attributes । ।

Check boxes allow for multiple items to be selected for a certain group of choices. checkbox

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

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

L HTM - SUBM T BUTTONS: I Input type "submit" activate । value attribute। "Submit" or "Continue" ।specifies a very unique button.

submit button submission button value attribute value attribute

attribute button .

1.<input type="submit" value="Submit" /> 2.<input type="submit" value="Continue Please!" />

: Submit Buttons
Submit Continue Please!

L HTM - RESET BUTTONS: input type । view source print?
1.<input type="reset" value="Reset Fields" /> 2.<input type="reset" value="Start Over" />

reset button। Setting the type to reset button "start over" button

form reset button

: Reset Buttons:

Reset Fields

Start Over

( HTM Text Fi el d) L
:

Text fields scripting language (PHP, PERL, or ASP)

web server ।

L HTM - TEXT FI ELD SI ZE: Size attribute text area size default size characters ।

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

: Text Fields:

L AXLENGTH: HTM - TEXT FI ELD M AXLENGTH: maxlength attribute characters maxlength । characters maxlength attribute size

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

L HTM - TEXT FI ELD VALUE: value attribute 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!

( HTM Text Ar ea) L
:

Paragraphs, essays, or memos opening closing ।
1.<textarea>Text Area!</textarea>

L ROW HTM - TEXT AREA COLS AND ROW S: Adjust the of the text area cols androws। attribute size appearance attributes 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>

:

L HTM - TEXTAREA W RAP: wrap attribute Wrap .soft .hard .off wrap attribute Soft (Line breaks wrap attribute । form Off word Hard word text area ) text area text box text area । । but form word textarea : text field

word

Line breaks

wrap attribute

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:

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

L HTM - TEXTAREA READONLY: readonly attribute value yes no। readonly attribute ।
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>

yes

textarea

:

L HTM – DI SABLED disabled attribute ।
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>

textarea

highlight

,

:

( HTM Radi o but t on) L

:

Radios "multiple choice" 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: ।
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: - RADI O CHECKED: checked , radio ।

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:

( HTM Upl oad For m L )
:

upload form form ।
1.<input type="file"/>

pictures, movies, input form । type attribute

webpages upload file

upload upload form

: UPLOAD FORM AX FI LE SI ZE M upload size webserver specific attributes । space hidden input field

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

value 100 :

file

100kb

।

( HTM Dr op down l i st ) L
:

Drop down lists । Drop down lists

forms.

internet Drop down lists

Drop down lists select <select> tag Drop down lists

<select> and <option> tags

<option> tag

Drop down lists

।

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

: DROP DOW LI ST N

selected attribute L HTM - SELECTI ON FORM S: size attribute size attribute selected attribute select drop down list

select

।

। scroll । select

options

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

: SELECTI O FORM N S
California -- CA Colorado -- CO Connecticut -- CN

L HTM - SELECTI NG M ULTI PLES: multiple attribute
1.<select multiple="yes" size="3"> 2.<option>California -- CA</option> 3.<option>Colorado -- CO</option> 4.<option>Connecticut -- CN</option> 5.</select>

select

।

: M ULTI PLE SELECTI ONS
California -- CA Colorado -- CO Connecticut -- CN

Similar Documents

Term Paper

Term Paper

Term Paper

Term Paper

Term Paper

Final Term Paper

Term Paper on Physical Planning

Term Paper

Term Paper

Mba Term Paper

Math Term Paper

Term Paper Structure

Science Term Paper

Term Paper

Term Paper

Popular Essays