Html bangla

1,616 views

Published on

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,616
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
69
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html bangla

  1. 1. ei e e uei e e uei e e uei e e u |||| ( HTML Tut or i al i n( HTML Tut or i al i n( HTML Tut or i al i n( HTML Tut or i al i nBangl a)Bangl a)Bangl a)Bangl a)ei e eei e eei e eei e e uuuue n (Elements)( Tag)a u ( Attributes)a c ( Paragraph)(Heading)i b(List)n (Font)(Link)i- ii- ie i (Entity)n (Comments)(Images)(Tables)(Colors)g un (Background)(Frame)u (Layout)u я (Embed Music)o (Vedio)(body)(Div)l o io p+ +(Form)k lk eo(Upload)u s: яoяoяoяos ei e es ei e es ei e es ei e e u eu eu eu e• ei e e e a c Hypertext Markup Language.e p g я , я।
  2. 2. • o ei я e я।• e i e o я e e e я p• я sk p e e a p o я i oPHP+Database Driven WebSite ।• webcoachbd.com e u ei e e ।я ei e e (a ei e e )Notepad open i i a a n e iNetbeans or Dreamweaver. o e я a j e i ।ei e e b я -• ei e e e n(Elements)• ei e e (Tag)• ei e e a u (Attribute)e s >>ei e e eei e e eei e e eei e e e uuuu ( HTML El ement s)( HTML El ement s)( HTML El ement s)( HTML El ement s):e ne ne ne n (Elements): e n HTML e nd n HTML page e p k ae n (tag) e HTML e n a s Webpage e Paragraph text, , i i elements ei я ।e e n(Element) a (opening tag) ,e n e a e n(closing tag) ।1. <p> - opening paragraph tag2. Element Content - paragraph words3. </p> - closing tagp Web page e a p я e n(Element) e : HTML,head, title e bodyelements । e ।
  3. 3. <html> Element...</html>p HTML HTML b p e less than o greater than ( < >) h :<html> । </html> a <html> Welcome to Bangladesh </html>।Welcome to Bangladesh ei Web page e p я Notepad e Web pageeя Notepad Open pstart All Programs > Accessories >NotepadNotepad m1.<html>2.Welcome to Bangladesh3.</html>e Notepad e i save e k index.html save ।i Double click open । Browser e open я e webPage ।<head> elemente k n head, k n s n <head> elements я header headelements e b uя p i e n e p ।<title> element<head> e n e <title> e n i b title elements e opening (<title>)eclosing(</title>) tag e browser e i p ।1.<html>2.<head>3.<title> My WebPage!</title>4.</head>5.</html><body> elementbody element web page e p web page e ibody element e ।1.<html>2.<head>3.<title>My WebPage!</title>4.</head>5.<body>6.Hello World! All my content goes here!7.</body>8.</html>ei s .html extension b uя e я p o я।
  4. 4. ei e e uei e e uei e e uei e e u ( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a):ei e e k n u , e e pparagraph paragraph e , e ।e p a. (opening tag). a (contents). (closing tag)।ei e e e web page e n ।1.<p>A Paragraph Tag</p>e ak o u ।1.<body> Body Tag (acts as a content shell)2.<p>Paragraph Tag</p>3.<h2>Heading Tag</h2>4.<b>Bold Tag</b>5.<i>Italic Tag</i>6.</body>CLOSI NGCLOSI NGCLOSI NGCLOSI NG ::::closing tag p я i e n c line break tage <br/> p a e i a iя e ।i я , i ।1.<img src="/../mypic.jpg" /> -- Image Tag2.<br /> -- Line Break Tag3.<input type="text" size="12" /> -- Input Fieldp :--Line Break--
  5. 5. ei e eei e eei e eei e e e T ue T ue T ue T u uuuu ( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a):mp я e u e attributese ps, uc attributes value e ps o uc ।1.<tag attributes ="value" attributes ="value">1.<table width="150" height="100">Class id attribute e p e i n Class id attribute i ni an e я skp , e e (e m u e।1.<p>Paragraph type 1 Italics</p>2.<p>Paragraph type 2 Bold</p>pParagraph type 1 ItalicsParagraph type 2 Boldei e e e Tei e e e Tei e e e Tei e e e T u ( HTML NAME ATTRI Bu ( HTML NAME ATTRI Bu ( HTML NAME ATTRI Bu ( HTML NAME ATTRI BUTE)UTE)UTE)UTE)Name attribute Class id attribute n Name attribute p i a i i n।1.<input type="text" name="TextField" />p :ei attribute TextField p i an e a a (javascript , css)ei e e i e Tei e e i e Tei e e i e Tei e e i e T uuuu ( HTML( HTML( HTML( HTML---- TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)ei attribute ei e e e n e e popup k k e k o яu u popup k p ।<h2 title="Hello There!">Titled Heading Tag</h2>pTi t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng Tagei e e e i e Tei e e e i e Tei e e e i e Tei e e e i e T uuuu ( HTML( HTML( HTML( HTML---- ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)e n n a s align attribute align n
  6. 6. left, right & center । l left align ।1.<h2 align="center">Centered Heading</h2>Cent er ed Headi ngCent er ed Headi ngCent er ed Headi ngCent er ed Headi ng1.<h2 align="left">Left aligned heading</h2>2.<h2 align="center">Centered Heading</h2>3.<h2 align="right">Right aligned heading</h2>Lef t al i gnedLef t al i gnedLef t al i gnedLef t al i gned headi ngheadi ngheadi ngheadi ngCent er ed headi ngCent er ed headi ngCent er ed headi ngCent er ed headi ngRi ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ngGENERI CGENERI CGENERI CGENERI C ATTRI BUTES:ATTRI BUTES:ATTRI BUTES:ATTRI BUTES:Attribute o я m s iя ei u a HTML Tag eя ।Attribute Options Functionalign right, left, center n (Horizontally) aligns tagsvalign top, middle, bottom u m(Vertically) aligns tagsbgcolornumeric, hexadecimal, RGBvaluesElement e background color ।backgroundURL Background image u element ।id aElement e Name Cascading Style Sheets (css)।class aElement e Cascading Style Sheets (css)।width Numeric Value Tables, images, or table cells e width ।height Numeric Value Tables, images, or table cells e height ।
  7. 7. title a elements e "Pop-up" title ।ei e e g uei e e g uei e e g uei e e g u ( HTML( HTML( HTML( HTML Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a):я p k t g e i e ।<p> a c ( g ) ei g k u a i।1.<p>Avoid losing floppy disks with important school...</p>2.<p>For instance, lets say you had a HUGE school...</p>p :Avoid losing floppy disks with important school/work projects on them. Usethe webto keep your content so you can access it from anywhere in the world. Itsalso a quickway to write reminders or notes to yourself. With simple html skills, (theones you havegained so far)it is easy.For instance, lets 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, orvideos ontoyour web server and access them from anywhere in the world.ei e e gei e e gei e e gei e e g ---- я sя sя sя s ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON)o k n e justify ei e e e justifye i я ।1.<p align="justify">For instance, lets say you had a HUGE school orwork...</p>p :For instance, lets say you had a HUGE school or work project to complete. Off hand, the easiestway to transfer the documents from your house could be a 3.5" floppy disk. However, there is analternative. Place your documents, photos, essays, or videos onto your web server and accessthem from anywhere in the world.ei e e gei e e gei e e gei e e g ---- ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –CENTERI NG)CENTERI NG)CENTERI NG)CENTERI NG)
  8. 8. o k n e g e p i display window e a s ।1.<p align="center">For instance, lets say you had a HUGE school orwork...</p>p :For instance, lets say you had a HUGE school or work project to complete. Off hand, the easiestway to transfer the documents from your house could be a 3.5" floppy disk. However, there is analternative. Place your documents, photos, essays, or videos onto your web server and accessthem from anywhere in the world.ei e e gei e e gei e e gei e e g ---- e ie ie ie i ( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH( HTML PARAGRAPH –ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT)o k n e g e p i display window e a s ।1.<p align="right">For instance, lets say you had a HUGE school orwork...</p>p :For instance, lets say you had a HUGE school or work project to complete. Off hand, the easiestway to transfer the documents from your house could be a 3.5" floppy disk. However, there is analternative. Place your documents, photos, essays, or videos onto your web server and accessthem from anywhere in the world.ei e eei e eei e eei e e uuuu ( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a):ei e e e i i e k bold pe e m u m 1 6 e d e 1 e 61.<body>2.<h1>Headings</h1>3.<h2>are</h2>4.<h3>great</h3>5.<h4>for</h4>6.<h5>titles</h5>
  9. 9. 7.<h6>and subtitles</h6>8.</body>Headingsar ear ear ear eGREATGREATGREATGREATf orf orf orf ortitlesand subtitlesk ei p e яs i b option । e e built in attribute ।a i b ।eeee gggg e e te e te e te e t ::::e paragraph e u ।1.<h1 align="center">Essay Example</h1>2.<p>Avoid losing floppy disks with important school/work projects...</p>3.<p>For instance, lets say you had a4.HUGE school or work project to complete. Off ...</p>p :Essay ExampleAvoid losing floppy disks with important school/work projects on them. Use the web to keepyour content so you can access it from anywhere in the world. Its also a quick way to writereminders or notes to yourself. With simple html skills, (the ones you have gained so far bynow) it is easy.For instance, lets say you had a HUGE school or work project to complete. Off hand, the easiestway to transfer the documents from your house could be a 3.5" floppy disk. However, there is analternative. Place your documents, photos, essays, or videos onto your web server and accessthem from anywhere in the world.
  10. 10. ei e e i b uei e e i b uei e e i b uei e e i b u ( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak):i b a e n i b e i a iei e e ed i b h i b paragraph o a HTML element(tables, lists, andheadings)e ।1.<p>2.Will Mateson<font color="red"><br/></font>3.Box 61<font color="red"><br /></font>4.Cleveland, Ohio<font color="red"><br/></font>5.</p>p : i b e address ।Will MatesonBox 61Cleveland, Ohiop ।1.<p>Sincerely,<br />2.<br />3.<br />4.Kevin Sanders<br />5.Vice President</p>p :Sincerely,Kevin SandersVice Presidento e p я i b e closing tag e p я i।HTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULE::::Horizontal rule <hr/> p <hr/> screen e u n i pline break tag e Horizontal rule tag e closing tag i।1.<hr />2.Use
  11. 11. 3.<hr /><hr />4.Them5.<hr />6.Sparingly7.<hr />pppp :UseThemSparinglyHorizontal rule gn я p k t ।1.<font color="red"><hr /></font>2.<p>1. "The Hobbit", JRR Tolkein.<br />3.2. "The Fellowship of the Ring" JRR Tolkein.</p>p :1. "The Hobbit", JRR Tolkein.2. "The Fellowship of the Ring" JRR Tolkein.pppp :Goal sGoal sGoal sGoal s1. Find a Job2. Get Money3. Move OutStart attributes я ic m s ।1.<h4 align="center">Goals</h4>2.<ol start="4" >
  12. 12. 3.<li>Buy Food</li>4.<li>Enroll in College</li>5.<li>Get a Degree</li>6.</ol>pppp :Goal sGoal sGoal sGoal s4.Buy Food5.Enroll in College6.Get a Degreeei e e k sei e e k sei e e k sei e e k s ( HTML ORDERED LI ST( HTML ORDERED LI ST( HTML ORDERED LI ST( HTML ORDERED LI STSSSS CONTI NUED)CONTI NUED)CONTI NUED)CONTI NUED)o p s(ordered list) e 1,2,3 m mtype attribute m ।1.<ol type="a">2.<ol type="A">3.<ol type="i">4.<ol type="I">Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types:Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numeralsa. Find a Jobb. Get Moneyc. Move OutA. Find a JobB. Get MoneyC. Move Outi. Find a Jobii. Get Moneyiii. Move OutI. Find a JobII. Get MoneyIII. Move Outei e e kei e e kei e e kei e e k ssss ( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI STS)S)S)S)<ul> s s p 1. squares 2.discs 3.circles । defaultfull discs ।1.<h4 align="center">Shopping List</h4>2.<ul>3.<li>Milk</li>
  13. 13. 4.<li>Toilet Paper</li>5.<li>Cereal</li>6.<li>Bread</li>7.</ul>pppp :Shoppi ng Li stShoppi ng Li stShoppi ng Li stShoppi ng Li st• Milk• Toilet Paper• Cereal• Breadtype attributes unordered list e a ।<ul type="square"><ul> type="dics"><ul> type="circle">type="square" type="disc" type="circle"MilkToilet PaperCerealBread• Milk• Toilet Paper• Cereal• Breado Milko Toilet Papero Cerealo Breadei e eei e eei e eei e e ssss ( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI STS)TS)TS)TS)Definition list e a i <dl> tag Definition listDefine a j i bold u Definition list tag e o tag an k1. <dt> 2. <dd> ।<dl> tag: s e я ei ।<dt> tag: j (Define) ei ।<dd> tag: <dt> tag e m e ।1.<dl>2.<dt><b>Fromage</b></dt>
  14. 14. 3.<dd>French word for cheese.</dd>4.<dt><b>Voiture</b></dt>5.<dd>French word for car.</dd>6.</dt>pppp :FromageFrench word for cheese.VoitureFrench word for car.ei e e uei e e uei e e uei e e u ( HTML Col or code)( HTML Col or code)( HTML Col or code)( HTML Col or code):Color set d , , , я, ei e e e valuee 16 ।::::Black Gray Silver WhiteYellow Lime Aqua FuchsiaRed Green Blue PurpleMaroon Olive Navy Tealei e eei e eei e eei e e ---- d яd яd яd я ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: RGB VALUE)RGB VALUE)RGB VALUE)RGB VALUE)web design e я HTML rgb Non-IE browser, HTMLrgb CSS u ei m n я ।Red, Green e Blue ei c rgb । p 0( ) 255(m )। rgb rgb(RED,GREEN,BLUE)।RED, GREENRED, GREENRED, GREENRED, GREEN eeee BLUEBLUEBLUEBLUE eeee ::::bgcolor="rgb(255,255,255)" Whitebgcolor="rgb(255,0,0)" Redbgcolor="rgb(0,255,0)" Greenbgcolor="rgb(0,0,255)" Blue
  15. 15. ei e eei e eei e eei e e ---- dddd :::: kkkk ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: HEXADECI MAL)HEXADECI MAL)HEXADECI MAL)HEXADECI MAL)p p Hexadecimal system e ei system e я o practice aя ei Hexadecimal system k t g e Hexadecimal system instandard color।Hexadecimal 6 digit u s p digit(RR), Red value digit(GG),Green value e digit(BB), Blue value ।ei e eei e eei e eei e e kkkkbgcolor="#RRGGBB"ei e eei e eei e eei e e ---- ( HTML( HTML( HTML( HTML---- COLORCOLORCOLORCOLOR CODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CODE)ODE)ODE)ODE)Hexadecimal system e Numbering system 16 digit e un।Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E Fi m ei m n e u ।e se se se s kkkk ::::bgcolor="#FFFFFF"e "F" c c e ei ("#FFFFFF") s।kkkk tttt::::(15 * 16) + (15) = 255u t s p F e (15) 16 d 255 pk t c o u ।uuuu :bgcolor="#CC7005"CC(RR - Red)(12 * 16) + (12) = 20470(GG - Green)
  16. 16. (7 * 16) + (0) = 11205(BB - Blue)(0 * 16) + (5) = 5ei e e uei e e uei e e uei e e u ( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a):<font> o i k s i , iя e size, color e face attributesn s iя <basefont> я k e i s i , iя ee ।<font> e <basefont> e e ( e e u ) u ।( FONT SI ZE)( FONT SI ZE)( FONT SI ZE)( FONT SI ZE)Size attribute e n e iя n e e g c 1( ) 7()। n e l c 3।1.<p>2.<font size="5">Here is a size 5 font</font>3.</p>{}pppp :Here is a size 5 font.( FONT COLOR)( FONT COLOR)( FONT COLOR)( FONT COLOR)attribute e font e color ।1.<font color="#990000">This text is hexcolor #990000</font>2.<br />3.<font color="red">This text is red</font>pppp :This text is hexcolor #990000This text is red( FONT( FONT( FONT( FONT FACE)FACE)FACE)FACE)n face e k t o u s e n i s ne l Times New Roman n ।1.<p>2.<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph3.has had its font...</font>
  17. 17. 4.</p>pppp :This paragraph has had its font formatted by the font tag!( BASEFONT)( BASEFONT)( BASEFONT)( BASEFONT)Basefont e o я l n basefont ।01.<html>02.<body>03.<basefont size="2" color="green">04.<p>This paragraph has had its font...</p>05.<p>This paragraph has had its font...</p>06.<p>This paragraph has had its font...</p>07.</basefont>08.</body>09.</html>pppp :This paragraph has had its font formatted by the basefont tag!This paragraph has had its font formatted by the basefont tag!This paragraph has had its font formatted by the basefont tag!i font basefont e e ( e e u ) ।Attributes: ReviewAttribute= "Value" Descriptionsize= "Num. Value 1-7" Size of your text, 7 is biggestcolor= "rgb,name,or hexidecimal" Change font colorface= "name of font" Change the font typep ak snp ak snp ak snp ak sn s is is is i ::::n s iя s i ।1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize2.your font to achieve a desired look.</p>pppp :
  18. 18. Customize your font to achieve a desired look.ei e e uei e e uei e e uei e e u ( HTML Li nk)( HTML Li nk)( HTML Li nk)( HTML Li nk):e o i k s anchor tag ek , i я, e o ।ei e eei e eei e eei e e ---- i kki kki kki kk | HTML| HTML| HTML| HTML---- HYPERTEXT REFERENCEHYPERTEXT REFERENCEHYPERTEXT REFERENCEHYPERTEXT REFERENCE ( HREF)( HREF)( HREF)( HREF)href attribute e e n ।Hypertext reference Internal, Local, Global ।Internal: e i я o ।Local : web site e я o ।Global: web site e a web site e oInternal - href="#anchorname"Local - href="/../pics/picturefile.jpg"Global - href="http://www.tizag.com/"ei e e kkei e e kkei e e kkei e e kk ( HTML( HTML( HTML( HTML---- TEXT LI NKS)TEXT LI NKS)TEXT LI NKS)TEXT LI NKS)<a> e </a> tag d t e href attribute e shref attribute opening tag e opening e closing tag e ,web я ।1.<a href="http://www.tizag.com/" target="_blank" >Tizag Home</a>2.<a href="http://www.espn.com/" target="_blank" >ESPN Home</a>3.<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>pppp : Global LinkTizag Home ESPN Home Yahoo Homeei e eei e eei e eei e e ( HTML( HTML( HTML( HTML---- LI NKLI NKLI NKLI NK TARGET)TARGET)TARGET)TARGET)Target attribute d , я window a e i browser window ।
  19. 19. target=" _blank" browser window page ।_self" current window page Load ।_parent" Loads new page into a frame that is superior to where the link lies_top" frames cancel , current browser window page Load ।e u я p web site ESPN.COM e Target attributee browser k ESPN.COM web site window openweb site e ।1.<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>pppp : _blank Target:ESPN.COMei e e i iei e e i iei e e i iei e e i i uuuu ( HTML E mai l )( HTML E mai l )( HTML E mai l )( HTML E mai l ):ei e e i i e я ei e e standard anchor tag <a> href attribute ,h inverted comma e i i ।<a href= "mailto: abc@mail.com" >Email Example</a>pppp :Email Examplea ka ka ka k ei e eei e eei e eei e e i ii ii ii i ::::i i a k c 1. subject 2.bodySubject - i i e subject e яi information ।Body - i i e body яi information ।<a href= "mailto:a@b.com?subject=Web Page Email&body=This emailis from your website" >2nd Email Example</a>e u ei i i u k subject e body(Subject e body ) u l ।e e e i o i a u
  20. 20. ।p :2nd Email Exampleei e e eei e e eei e e eei e e e i ii ii ii i ( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor ):i i я u site e Email i i eEmail u l ।<a href="mailto: ferdous@yahoo.com?subject=Feedback" > Ferdous@yahoo.com</a>pppp :mailto: ferdous@webcoachbd.com?subject=feedbacka Email ।mailto: ferdous@webcoachbd.com?subject=feedback<a href="mailto: ferdous@webcoachbd.com?subject=Feedback&body=Sweet site!">ferdous@ webcoachbd.com</a>pppp : Complete Email:mailto: ferdous@webcoachbd.com?subject=feedback&body=sweet site!ei e eei e eei e eei e e uuuu (HTML-download links)u я i place k e u я image link e яk t thumbnail u s ।HTML Code:<a href="http://www.webcoachbd.com/pics/htmlT/blanktext.zip">Text Document</a>pppp : Download a Text Document:Text Documentei e e lei e e lei e e lei e e l ( HTML( HTML( HTML( HTML---- DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)<base> ei e e head element e e default URL я яя я <base> tag s ।view sourceprint?1.<head>2.<base href="http://www.webcoachbd.com/">
  21. 21. 3.</head>ei e e e i я uei e e e i я uei e e e i я uei e e e i я u ( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a):e i symbol e l a symbol , i , d p i o я pe i я ।p e i e a :1.p Entity e n (ampersand) - &2. Entity e – copy3. semicolon -;iiii&copye t © - Copyright symbol.a k sa k sa k sa k sg e e b uя b e s ee i a k s u ।1.<p>Everything that goes up, must come &nbsp;&nbsp;&nbsp;&nbsp;down!</p>pppp :Everything that goes up, must come down!ei e e e e g h e h o я e i e i।1.<p>2.Less than - &lt; <br />3.Greater than - &gt; <br />4.Body tag - &lt;body&gt;5.</p>pppp :Less than - <Greater than - >Body tag - <body>
  22. 22. ei e eei e eei e eei e e mmmm ( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a):n o e e d e nt n n i b uя d sk ।ignore ।1. ei e e k n e note я я reminder2. sk p я я skp e n n p я .3.Temporarily comment p я k n ei e e e n a m ।<!--Note to self: This is my banner image! Dont 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 Commentei e eei e eei e eei e e ---- <<<<!!!!- -- -- -- - eieieiei - -- -- -- - >:>:>:>:o a я a m k t a m я <!— -- > n e।<!-- <input type="text"> size="12" /> -- Input Field -->ei e e i n p n u ।<input type="text" size="12" />pppp : Input Field:ei e e uei e e uei e e uei e e u ( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a):
  23. 23. e t e я <img/> o я e i я।1.<img src="/sunset.gif" />pppp :ei e eei e eei e eei e e ---- SRC:SRC:SRC:SRC:Src attribute t Src e a (source) a i я u picture file a s ।u i я s ।1. Standard URL(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)2. web server e file(src="/../sunset.gif")ei picture file e location e .ei e e file e location e m ।URL Types:Local Src Location Descriptionsrc="/sunset.gif" picture file e .html file e i directory a s ।src="/../sunset.gif" picture file directory a s .html file ।src="/../pics/sunset.gif"pic directory e picture file directory a s .html file e।ei e eei e eei e eei e e ---- ALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTE:E:E:E:Alt attribute s a k a i я p a k p । i я po i browser i я i я c ।1.<img src="http://example.com/brokenlink/sunset.gif" alt="BeautifulSunset" />pppp :
  24. 24. ei e eei e eei e eei e e ---- HEI GHTHEI GHTHEI GHTHEI GHT eeee WI DTH:WI DTH:WI DTH:WI DTH:i я height e width я height e width attribute ।1.<img src="/sunset.gif" height="50" width="100">pppp :ei e eei e eei e eei e e ---- VERTI CALLYVERTI CALLYVERTI CALLYVERTI CALLY eeee HORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GN ::::Align e valign attribute i я a s ।1. align (Horizontal)o righto lefto center2. valign (Vertical)o topo bottomo centeru1.<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...isnt it?5.</p>6.<p>This is the third paragraph that appears...</p>pppp :This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how thisimage alignment works. The image will appear along the right hand sideof the paragraph. As you can see this is very nice for adding a little eye candy that relates to thespecified paragraph. If we were talking about beautiful tropical sunsets, this picture would beperfect. But we arent talking about that, so its rather a waste, isnt it? This is the third paragraphthat appears below the paragraph with the image!ei e eei e eei e eei e e ---- i яi яi яi я ::::
  25. 25. i я ।1.<a href="http://www.webcoachbd.com/">2.<img src="/sunset.gif">3.</a>p :ei e eei e eei e eei e e ---- THUMBNAI LS:THUMBNAI LS:THUMBNAI LS:THUMBNAI LS:Thumbnails i я i я , i я ei picture quality kThumbnails e m i я i я я ।1.<a href="/sunset.gif">2.<img src="/thmb_sunset.gif">3.</a>ei e e uei e e uei e e uei e e u ( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a):Horizontal e vertical e tabular data p k t a t k n e nnt я o я i e t । e in cell ei e e<table> e </table> ।1.<tr> Horizontal ।2 <td> Horizontal data cell ।3 <th> data cell e heading я ।4 <tfoot> footer я ।1.<table border="1">2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>3.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>4.</table>pppp :Row 1 Cell 1 Row 1 Cell 2
  26. 26. Row 2 Cell 1 Row 2 Cell 2a g ea g ea g ea g e ssss ::::Rowspan a s e colspan a sheader <th> <th> default header l।01.<table border="1">02.<tr>03.<th>Column 1</th>04.<th>Column 2</th>05.<th>Column 3</th>06.</tr>07.<tr><td rowspan="2">Row 1 Cell 1</td>08.<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>09.<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>10.<tr><td colspan="3">Row 3 Cell 1</td></tr>11.</table>pppp :Row 1 Cell 1 Row 1 Cell 2Row 2 Cell 1 Row 2 Cell 2CELL PADDI NGCELL PADDI NGCELL PADDI NGCELL PADDI NG eeee SPACI NGSPACI NGSPACI NGSPACI NGe cellpadding e a ( , ) e s (space)a e cellspacing cell e s (space) a ।01.<table border="1" cellspacing="10"02.bgcolor="rgb(0,255,0)">03.<tr>04.<th>Column 1</th>05.<th>Column 2</th>06.</tr>07.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>08.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>09.</table>pppp :Column 1 Column 2Row 1 Cell 1 Row 1 Cell 2
  27. 27. Row 2 Cell 1 Row 2 Cell 21.<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">2.<tr>3.<th>Column 1</th>4.<th>Column 2</th>5.</tr>6.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>7.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>8.</table>pppp :Column 1 Column 2Row 1 Cell 1 Row 1 Cell 2Row 2 Cell 1 Row 2 Cell 2ei e e g u uei e e g u uei e e g u uei e e g u u ( HTML( HTML( HTML( HTML Backgr ound Col or s Tut or i alBackgr ound Col or s Tut or i alBackgr ound Col or s Tut or i alBackgr ound Col or s Tut or i ali n Bangl a)i n Bangl a)i n Bangl a)i n Bangl a):bgcolor e u o я e g un nt Bgcolor e u a ei e ee <body> e <table> e a kg un s i i e e g un(CSS u ) ।:<tagname bgcolor ="value">1.<body bgcolor="Silver">2.<p>We set the background of this paragraph to be silver. The body tag is3.where you change the pages background. Now continue the lesson to4.learn more about adding background colors in your HTML!5.</p>6.</body>pppp :We set the background of this paragraph to be silver. The body tag is where you change thepages background. Now continue the lesson to learn more about adding background colors inyour HTML!g ug ug ug u eeee ::::
  28. 28. 01.<table bgcolor="lime" border="1"><tr>02.<td>A lime colored table background using color names.</td>03.</tr></table>04.05.06.<table bgcolor="#ff0000" border="1"><tr>07.<td>A red colored table background using hexadecimal values"#FF0000".</td>08.</tr></table>09.10.11.<table bgcolor="rgb(0, 0, 255)" border="1"><tr>12.<td>A blue colored table background using RGB values "rgb(0, 0,255)".</td>13.</tr></table>pppp :A lime colored table background using color names.A red colored table background using hexadecimal values "#FF0000".A blue colored table background using RGB values "rgb(0, 0, 255)".eeee ::::1.<table>2.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>3.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>4.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>5.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>6.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>7.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>8.</table>pppp :This Row is Yellow!This Row is Gray!This Row is Yellow!This Row is Gray!This Row is Yellow!This Row is Gray!e t g ue t g ue t g ue t g u COLORCOLORCOLORCOLOR eeee FONT COLOR:FONT COLOR:FONT COLOR:FONT COLOR:1.<table bgcolor="#000000">2.<tr><td bgcolor="#009900">3.<font color="#FFFF00" align="right">Green Bay</font></td>4.<td><font color="#FFFFFF">13</font></td></tr>
  29. 29. 5.<tr><td bgcolor="#0000FF">6.<font color="#DDDDDD" align="right">New England</font></td>7.<td><font color="#FFFFFF">27</font></td></tr>8.</table>pppp :Green Bay 13New England 271.<table bgcolor="#777777">2.<tr><td>3.<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00">4.This paragraph tag has...5.</font></p>6.</td></tr>7.</table>pppp :This paragraph tag has a gray background with green colored font. You should see MonotypeCorsiva font if you have it installed, or Verdana as the backup. Both fonts are widely acceptedas standard fonts.ei e e g u uei e e g u uei e e g u uei e e g u u ( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i n( HTML Backgr ound Tut or i al i nBangl a)Bangl a)Bangl a)Bangl a):g un e u e ei e e i я g un i я ।1.<table height="50" width="100"2.background="http://www.tizag.com/pics/htmlT/background.jpg" >3.<tr><td>This table has a background image</td></tr>4.</table>pppp :This table hasa backgroundimageei e eei e eei e eei e e ---- g ug ug ug u ::::u u e । eg un ।1.<table height="200" width="300"2.background="http://www.tizag.com/pics/htmlT/background.jpg" >3.<tr><td>This table has a background image</td></tr>
  30. 30. 4.</table>pppp :This table has a background imageei e eei e eei e eei e e ---- g ug ug ug un e o n g un e n n g un n n i яi gif jpeg ।1.<table height="100" width="150"2.background="http://www.tizag.com/pics/htmlT/pattern.jpg" >3.<tr><td>This table has a background patterned image</td></tr>4.</table>pppp :1.<table background="http://www.tizag.com/pics/htmlT/transparent.gif" >2.<tr><td>This table has a red transparent background image</td></tr>3.</table>pppp :ei e e uei e e uei e e uei e e u ( HTML Fr ame)( HTML Fr ame)( HTML Fr ame)( HTML Fr ame):e e i e i b uя ui n a ei e e k n p ।ei e eei e eei e eei e e ---- A GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGE::::e e e e n । u k i o я nя ।1.<html>2.<head>3.</head>4.<frameset cols="30%,*">5.<frame src="/menu.html">6.<frame src="/content.html">
  31. 31. 7.</frameset>8.</html>p :e kframeset – e e parent tag page e characteristics frameset e।frameset cols="#%, *"- Cols(column) e width u u (1stcolumn)total page e 30% e "*", e a total page e 70% content(2ndcolumn) ।frame src="/" o я e ।iiii ::::1.<html><head></head>2.<frameset rows="20%,*">3.<frame src="/title.html">4.<frameset cols="30%,*">5.<frame src="/menu.html">6.<frame src="/content.html">7.</frameset>8.</html>frameset rows="#%, *"-e a frameset cols="#%, *"- i।FRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMESPACI NG:ESPACI NG:ESPACI NG:ESPACI NG:FrameBorder e FrameSpacing attribute e e Spacing e ugly gray lines।1.<html><head></head>2.<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">3.<frame src="/title.html">4.<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">5.<frame src="/menu.html">6.<frame src="/content.html">7.</frameset>8.</html>p :e kNORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLI NG:NG:NG:NG:
  32. 32. Noresize attribute e iя ।scrolling="(yes/no)"- e scroll ।1.<html><head></head>2.<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">3.<frame src="/title.html" noresize scrolling="no">4.<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">5.<frame src="/menu.html" scrolling="auto" noresize>6.<frame src="/content.html" scrolling="yes" noresize>7.</frameset>8.</html>a ga ga ga g яяяя pppp ।।।।ei e e u uei e e u uei e e u uei e e u u ( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a):ei e e u s ei e eu ।1.<table bgcolor="black" border="1" heigh="200" width="300">2.<tr><td>3.<table bgcolor="white" heigh="100" width="100">4.<tr><td>Tables inside tables!</td></tr>5.</table>6.</td></tr></table>pppp :Tables insidetables!ei e e sei e e sei e e sei e e s uuuuStandard layout u a s , e content p k eo i e ।01.<table cellspacing="1" cellpadding="0" border="0"02.bgcolor="black" height="250" width="400">03.<tr height="50"><td colspan="2" bgcolor="white">04.<table title="Banner" id="banner" border="0">05.<tr><td>Place a banner here</td></tr>06.</table>07.</td></tr>08.<tr height="200"><td bgcolor="white">09.<table title="Navigation" border="0">
  33. 33. 10.<tr><td>Links!</td></tr>11.<tr><td>Links!</td></tr>12.<tr><td>Links!</td></tr>13.</table>14.</td><td bgcolor="white">15.<table title="Content" id="content" border="0">16.<tr><td>Content goes here</td></tr>17.</table>18.</td></tr></table>pppp :Place a banner hereLinks!Links!Links!Content goes here01.<table title="Shell" height="250" width="400"02.border="0" bgcolor="black" cellspacing="1" cellpadding="0">03.<tr height="50"><td bgcolor="white">04.<table title="banner" id="banner">05.<tr><td>Banner goes here</td></tr>06.</table>07.</td></tr>08.<tr height="25"><td bgcolor="white">09.<table title="Navigation" id="navigation">10.<tr><td>Links!</td>11.<td>Links!</td>12.<td>Links!</td></tr>13.</table>14.</td></tr>15.<tr><td bgcolor="white">16.<table title="Content" id="content">17.<tr><td>Content goes here</td></tr>18.</table>19.</td></tr></table>pppp :
  34. 34. Banner goes hereLinks! Links! Links!Content goes hereei e e u я uei e e u я uei e e u я uei e e u я u ( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a):o я e music a я Embed e music e src attribute e mediafile e ।1.<embed src="/Madine Ko Jain.mp3" />EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – p mp mp mp m ::::Embeded media player e s iя attribute ।1. width - media player e p s2. height - media player e uc3. hidden – e media player p ei attributeя o я e music я n option ।1.<embed src="/last breath.mp3" width="360" height="165" />EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – pppp ::::Embeded media player e p s iя attribute ।
  35. 35. autostart – ei attribute e false true । true o я ।loop - ei attribute e false true। true false ।volume - ei attribute d media file e volume e 0-100।view sourceprint?1.<embed src="/beethoven.mid" autostart="false" loop="false"2.volume="60" />ei e eei e eei e eei e e oooo uuuu ( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a):
  36. 36. Music i e o i <embed /> o я e p । image e embed e closing ep я i। src attribute e URL(local global) o o я p ।1.<embed src="http://www.webcoachbd.com/files/html/htmlexample.mpeg"2.autostart="false" />p :href attribute e o URL o o я p ।1.<a href="http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">2.motiontween1easy.swf</a>( i k play)ei e eei e eei e eei e e ---- ooooFlash movies (.swf), AVIs (.avi), and MOVs (.mov)। embed e ।.swf files - ei c
  37. 37. .wmv files – ei c i k ui n я i ।.mov files - ei c e ki i.mpeg files – e e standard Moving Pictures Expert Group d compression moviei ।u in swf, mpeg ei ।ei e eei e eei e eei e e ---- EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES:Src attribute e <embed /> e attribute volume, autostart, hidden, andloop ।autostart - ei attribute e false true । true я o।hidden - ei attribute e play/stop/pause nt embedded object is hidden or not. Valuesare true or false. (Hide your embeded media if you just want background noise).loop - ei attribute e false true। true o false .playcount - Setting a playcount a c media x number n repeat a o repeat(playcount="2" e a video i ).volume - ei attribute d media file e volume set e 0-100।ei e eei e eei e eei e e ( HTML Body)( HTML Body)( HTML Body)( HTML Body):Body tag web page e element Tables, Lists, Forms, paragraph elementBody element e ।HTMLHTMLHTMLHTML ---- BODY MARGI NS:BODY MARGI NS:BODY MARGI NS:BODY MARGI NS:AttributesLeftmargin: body element. e я ।topmargin :body element e u я ।1.<body topmargin="50">2.<body leftmargin="50">pppp :Top Margin
  38. 38. Left MarginHTMLHTMLHTMLHTML ---- BASE TEXT:BASE TEXT:BASE TEXT:BASE TEXT:Text attributes e Body tag e k e ।1.<body text="red" >view sourceprint?1.<body text="rgb(255,0,0)" >ei e eei e eei e eei e e uuuu ( HTML Di v( HTML Di v( HTML Di v( HTML Di v Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a):<div> a e t я a body e ।Div e n block e n an a e t ।e e e k t Div e n a t ।attributes ।idwidthheighttitlestylestrong visualization e я style attribute e p ।1.<body>2.<div style="background: green">3.<h5 >SEARCH LINKS</h5>4.<a target="_blank" href="http://www.google.com">Google</a>5.</div>6.</body>
  39. 39. SEARCH LINKSGoogleei e e uei e e uei e e uei e e uu a o 3 al div e n ।beginning and ending e div e n ei e e e n ।01.<div id="menu" align="left" >02.<a href="/">HOME</a> |03.<a href="/">CONTACT</a> |04.<a href="/">ABOUT</a>05.</div>06.<div id="content" align="left" bgcolor="white">07.<h5>Content Articles</h5>08.<p>This paragraph would be your content paragraph with all of yourreadable material.</p>09.</div>pppp :HOME | CONTACT | ABOUTContent ArticlesThis paragraph would be your content paragraph with all of your readable material.01.<div id="menu" align="left" >02.<a href="/">HOME</a> |03.<a href="/">CONTACT</a> |04.<a href="/">ABOUT</a> |05.<a href="/">LINKS</a>06.</div>07.<div id="content" align="left" >08.<h5>Content Articles</h5>
  40. 40. 09.<p>This paragraph would be your content10.paragraph with all of your readable material.</p>11.<h5 >Content Article Number Two</h5>12.<p>Heres another content article right here.</p>13.</div>pppp :HOME | CONTACT | ABOUT | LINKSContent ArticlesThis paragraph would be your content paragraph with all of your readable material.Content Article Number TwoHeres another content article right here.ei e e l e iei e e l e iei e e l e iei e e l e i ( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c):<b> bold tag k l ।1.<b>This text is entirely BOLD!</b>pppp : Bold:This text is entirely BOLD!k highlight bold tag .1.<p><b>Dont</b> touch that!</p>pppp :Dont touch that!dictionary fashion. я bold tag ।1.<p><b>Cardio:</b> Latin word meaning of the heart.</p>pppp : DictionaryCardio: Latin word meaning of the heart.
  41. 41. HTMLHTMLHTMLHTML ---- I TALI C( S)I TALI C( S)I TALI C( S)I TALI C( S)The italics tag key word or phrase highlight u ei tags font facestylize k я Emphasized tag p i italics tag e ।1.Italic <i>tag</i>!2.<em>Emphasized</em> Text!3.Create a <blockquote>blockquote</blockquote>!4.Format your <address>addresses</address>!pppp : HTML Italics:Italic tag!Emphasized Text!Create a blockquote!Format your addresses!1.<b>HTML</b>2.<i>Hyper Text Markup Language</i>1.<b>HTML</b>2.<em>Hyper Text Markup Language</em>pppp : HTML DictionaryHTMLHyper Text Markup LanguageorHTMLHyper Text Markup LanguageHTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CSSSS<b> and the <i> tags u i e text format e я ।k ।1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>pppp :Phillip M. Rogerson MD
  42. 42. <b> and the <i> tags u i k ।1.<p>Include several external2.links throughout your texts as references to your viewers,3.we will discuss4.<a href="/" target="_blank" title="Tizag Links">5.<b><i>HTML Links</i></b>6.</a>7.in a later lesson.</p>pppp : Format Links:Include several external links throughout your texts as references to your viewers, we willdiscuss HTML Links in a later lesson.ei e e eei e e eei e e eei e e e prepreprepre ( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e):code tag e text computer code e e text e font face,size, e letter spacing ।1.This text has been formatted to be computer <code>code</code>!pppp : Computer CodeThis 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 alwaysnecessary, but the tag exists if you so desire.HTMLHTMLHTMLHTML ---- CODE LI NKSCODE LI NKSCODE LI NKSCODE LI NKSlink web page e ।1.<p>Feel free to search <a href="http://www.google.com" target="_blank">2.<code>Google</code>3.</a> for4.anything you wish to find on the internet.</p>pppp : Code Links:Feel free to search Google for anything you wish to find on the internet.HTMLHTMLHTMLHTML ---- <PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<pre> tag e HTML coding e i b , s k pa i u ।1.<pre>2.Roses are Red,
  43. 43. 3.e s Violets are blue,4.I may sound crazy,5.e s But I love you!6.</pre>pppp :Roses are Red,Violets are blue,I may sound crazy,But I love you!ei e e s skpei e e s skpei e e s skpei e e s skp,,,, skpskpskpskp,,,,sT isT isT isT i:1.<p>This text is <sup>superscripted!</sup></p>pppp : Superscript:This text is superscripted!HTMLHTMLHTMLHTML – EXPONENTSEXPONENTSEXPONENTSEXPONENTSa exponential я <sup> tag ।1.2<sup>3</sup> = 82.14<sup>x</sup>pppp : Exponents:23= 814xHTMLHTMLHTMLHTML – ::::u p n reference я <sup> tag ।1.<p>"It was a lovers tryst<sup>1</sup>."2.<hr />3.1. Secret meeting between loverspppp : Footnote"It was a lovers tryst1."1. Secret meeting between loversHTMLHTMLHTMLHTML ---- SUBSCRI PTSUBSCRI PTSUBSCRI PTSUBSCRI PT
  44. 44. 1.<p>This text is <sub>subscripted!</sub></p>p :This text is subscripted!1.<p>H<sub>2</sub>0 - Water2.<p>O<sub>2</sub> - Oxygen3.<p>CO<sub>2</sub> - Carbon Dioxidep :H2O - WaterO2 - OxygenCO2 - Carbon DioxideHTMLHTMLHTMLHTML – STRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGH<del> tag e k o ।1.<p>This text is <del>scratched</del> out!</p>pppp : StrikethroughThis text is scratched out!HTMLHTMLHTMLHTML ---- CHECK OFF TASK:CHECK OFF TASK:CHECK OFF TASK:CHECK OFF TASK:1.<ol>2.<li>Clean my room</li>3.<li><del>Cook Dinner</del></li>4.<li><del>Wash Dishes</del></li>5.</ol>pppp :1. Clean my room2. Cook Dinner3. Wash Dishesei e eei e eei e eei e e ( HTML For m)( HTML For m)( HTML For m)( HTML For m):web server (name, email address, credit card, i ) g k t webmaster e я Formst tool я a form i g e ,order , я , forum e k я s i ।TEXT FI ELDSTEXT FI ELDSTEXT FI ELDSTEXT FI ELDS
  45. 45. m forms я Input fields c form sandwich e ।<input> tag e attributes m n я u ।type - ei attribute input field e p text, submit, e password ।name - ei attribute given field e reference ।size - ei attribute field e horizontal width ।maxlength – ei attribute character e maximum m<form method="post" action="mailto:youremail@email.com">Name: <input type="text" size="10" maxlength="40" name="name"> <br />Password: <input type="password" size="10" maxlength="10" name="password"></form>pppp : Input FormsName:Password:HTMLHTMLHTMLHTML ---- I NPUT TAGS:I NPUT TAGS:I NPUT TAGS:I NPUT TAGS:Input fields e я an k checkboxes, text fields, radios, e form submissionbuttons। <input /> tag e closing tag p я i।HTML -Type Attribute:Type attributes e e p input tag input tag ।1. "text"2. "password"3. "checkbox"4. "radio"5. "submit"6. "reset"HTMLHTMLHTMLHTML – CHECKBOXES:CHECKBOXES:CHECKBOXES:CHECKBOXES:Checkboxes e single question e a i ।Check boxes allow for multiple items to be selected for a certain group of choices. checkbox ename e value attributes radio button e name e value attributes ।
  46. 46. <form method="post" action="mailto:youremail@email.com">Select your favorite cartoon characters.<input type="checkbox" name="toon" value="Goofy">Goofy<input type="checkbox" name="toon" value="Donald">Donald<input type="checkbox" name="toon" value="Bugs">Bugs Bunny<input type="checkbox" name="toon" value="Scoob">Scooby Doo<input type="submit" value="Email Myself"></form>pppp : Checkboxes:Select your favorite cartoon characters.GoofyDonaldBugs BunnyScooby DooEmail MyselfHTMLHTMLHTMLHTML ---- SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS:Input type e "submit" a k t u l ।specifies a very unique button.submit button e e activate ।submission button i attribute p я c value attribute।b value attribute e button u p "Submit" or "Continue"b value attribute e .1.<input type="submit" value="Submit" />2.<input type="submit" value="Continue Please!" />p : Submit ButtonsSubmit Continue Please!HTMLHTMLHTMLHTML ---- RESET BUTTONS:RESET BUTTONS:RESET BUTTONS:RESET BUTTONS:input type reset button। Setting the type to reset button k form es a s "start over" button reset button e।view sourceprint?1.<input type="reset" value="Reset Fields" />2.<input type="reset" value="Start Over" />pppp : Reset Buttons:
  47. 47. Reset Fields Start Overei e e kk lei e e kk lei e e kk lei e e kk l ( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d):Text fields kt k i e i web server escripting language (PHP, PERL, or ASP) e p k ।HTMLHTMLHTMLHTML ---- TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:Size attribute e text area e size nt default size 20 characters ।1.<input type="text" size="5" />2.<input type="text" size="15" />3.<input type="text" size="25" />pppp : Text Fields:HTMLHTMLHTMLHTML ---- TEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTH::::maxlength attribute s ic characters i e iяs o characters i d maxlength attribute size emaxlength e i o p я ।1.<input type="text" size="5" maxlength="5" />2.<input type="text" size="15" maxlength="15" />3.<input type="text" size="25" maxlength="25" />pppp : Maxlength AttributeHTMLHTMLHTMLHTML ---- TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE:value attribute i k l ।view sourceprint?
  48. 48. 1.<input type="text" size="5" maxlength="5" value="55555" />2.<input type="text" size="15" maxlength="15" value="Corndog" />3.<input type="text" size="25" maxlength="25" value="Tizag Tutorials!" />Text Field Values:55555CorndogTizag Tutorials!ei e e kk eei e e kk eei e e kk eei e e kk e ( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea):kk e b e e iuя Paragraphs, essays, or memoskk e e kk e e opening e closing kk e eo я e kk e p ।1.<textarea>Text Area!</textarea>pHTMLHTMLHTMLHTML ---- TEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND ROWS:OWS:OWS:OWS:Adjust the of the text area size e appearance attributes p яcols androws। p attribute e я text area ।1.<textarea cols="20" rows="10">Text Area!</textarea>2.<textarea cols="40" rows="2">Text Area!</textarea>3.<textarea cols="45" rows="5">Text Area!</textarea>p :
  49. 49. HTMLHTMLHTMLHTML ---- TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP:wrap attribute k textarea text field eWrap e :1.soft2.hard3.offwrap attribute e Soft word text area but form word(Line breaks a )wrap attribute e Hard word text area e i e Line breaks a। form text box e c।wrap attribute e Off word text area e e i a ।1.<textarea cols="20" rows="5" wrap="hard">2.As you can see many times word wrapping is often the desired3.look for your textareas. Since it makes everything nice and4.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 desired3.look for your textareas. Since it makes everything nice and4.easy to read.5.</textarea>p : No Wrapping
  50. 50. HTMLHTMLHTMLHTML ---- TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY:readonly attribute e value yes no। readonly attribute e yes textarea ek n ।1.<textarea cols="20" rows="5" wrap="hard" readonly="yes">2.As you can see many times word wrapping is often the desired3.look for your text areas. Since it makes everything nice and4.easy to read.5.</textarea>p :HTMLHTMLHTMLHTML – DI SABLEDDI SABLEDDI SABLEDDI SABLEDdisabled attribute p textarea highlight , e e।1.<textarea cols="20" rows="5" wrap="hard" disabled="yes">2.As you can see many times word wrapping is often the desired3.look for your text areas. Since it makes everything nice and4.easy to read.5.</textarea>p :ei e eei e eei e eei e e oooo ( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)
  51. 51. :Radios e p i e a k o e"multiple choice" ei kiя e p я Radios ।1.Italian: <input type="radio" name="food" />2.Greek: <input type="radio" name="food" />3.Chinese: <input type="radio" name="food" />pppp : Radios:Italian:Greek:Chinese:e i e i n o o u ।1.Italian: <input type="radio" name="food" />2.Greek: <input type="radio" name="food" />3.Chinese: <input type="radio" name="food" />4.5.Male: <input type="radio" name="gender" />6.Female: <input type="radio" name="gender" />pppp : Multiple Radios:Italian:Greek:Chinese:Male:Female:ei e eei e eei e eei e e ---- RADI O CHECKED:RADI O CHECKED:RADI O CHECKED:RADI O CHECKED:checked e u ,e radio a l t ।1.Italian: <input type="radio" name="food" checked="yes" />
  52. 52. 2.Greek: <input type="radio" name="food" />3.Chinese: <input type="radio" name="food" />p :Default Italian:Italian:Greek:Chinese:ei e eei e eei e eei e e ( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m):upload form iuя pictures, movies, e я webpages upload e uploadform e input form । type attribute e file upload form।1.<input type="file"/>pppp :::: UPLOAD FORMUPLOAD FORMUPLOAD FORMUPLOAD FORMMAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZEupload i e size e webserver e space k e яhidden input field e o specific attributes ।1.<input type="hidden" name="MAX_FILE_SIZE" value="500" />2.<input type="file"/>e value 100 file c 100kb ।p :ei e e D u sei e e D u sei e e D u sei e e D u s ( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st ):Drop down lists forms. internet e Drop down lists o k p is d Drop down lists e a a ic select।Drop down lists <select> and <option> tags <select> tag e Drop down lists
  53. 53. e <option> tag e Drop down lists e ।1.<select>2.<option>California -- CA</option>3.<option>Colorado -- CO</option>4.<option>Connecticut -- CN</option>5.</select>pppp :::: DROP DOWN LI STDROP DOWN LI STDROP DOWN LI STDROP DOWN LI STselected attributee n select a s p ।HTMLHTMLHTMLHTML ---- SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS:size attribute drop down list s p ।size attribute select options e p s scrollselected attributee n select a s p ।1.<select size="3">2.<option>California -- CA</option>3.<option>Colorado -- CO</option>4.<option>Connecticut -- CN</option>5.</select>pppp :::: SELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMSCalifornia -- CAColorado -- COConnecticut -- CNHTMLHTMLHTMLHTML ---- SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:multiple attribute e e a select ।1.<select multiple="yes" size="3">2.<option>California -- CA</option>3.<option>Colorado -- CO</option>4.<option>Connecticut -- CN</option>5.</select>pppp :::: MULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONSCalifornia -- CAColorado -- COConnecticut -- CN

×