1 / 83

Shiplu Hridoy

https://www.facebook.com/shiplu.hridoy<br>CEO & Founder at Webeeo. PDF Submission Sites List.<br>

shipluhridoy5
Download Presentation

Shiplu Hridoy

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 1

  2. ???????????????-??? (For All Users) ???????????? ???? (https://www.facebook.com/faruk.ice09) (http://www.WebTechnologyBlog.com) 2

  3. ??? ??? ??? ??????? ???? ???? ???? ?? ?? ?? ??????? ????? ????? ????????? ???? ???? ?????? ?? ?? ?? ???????????? ????? ????? ????? ????? ?????????????????? (https://www.facebook.com/groups/Wordpress2Smashing) ???????? ???????? ???????? ?????????? ?? ?? ?????????? ???????? ???????? ???????? (http://www.wpbangla.com) ???? ???? ???? ???? ???????????? ???? (https://www.facebook.com/faruk.ice09) (http://www.WebTechnologyBlog.com) ??? ??? ??? ??? ???????????????? (https://www.facebook.com/zamil.hossainsezan32) ?? ?? ?? ??? ? ? ? Extra Network www.otirikto.net 3

  4. [??????] ????????????? [??????? © ??????????????????-????] 4

  5. ?????????- ??????????????? -????(https://www.facebook.com/faruk.ice09) ?????????????????????? ????????????????????????????????????????????? (ICE) ????????????????।?????????????????? ???????????????????????????????????।???????????????????????????????????????।??????????? ????????????????????????।???????????????????।???????????????????????????।????? ????????????????????????????? (https://www.facebook.com/zamil.hossainsezan32) ??????????? , ??????????????????????????????????????।?????????????????????????? ????????-????????????।????????????????????????????????????????????।???? ?????????????????????????????????????-???????-????????????।??????????????? ????????????????????????????????????।??????????????????????????????????????????? ??????????????????????????????????????।????????????????????????????????????????? ??????????????????(https://www.facebook.com/groups/Wordpress2Smashing/)-??? ???????????????????????????????????????????????।?????????????????????????????? ???????????????????????????????????। ????????????????।???????????????????????????????????????? ??????????????????????????????????????।??????????????????????? ????????????????????।????????????????।??????????????, ??????? ?????????????????????। - ???????? ???? 5

  6. ?? ?? ?? ?????? ???? ???? ???? ????? ????? ????? ?????-??? ??? ??? ???????? ????? ????? ????? ?.?.???????????? ?.?.??????????????????? ?.?.????????????? ?.?.?????????????? HTML-???????? ????? ????? ????? ?????-??? ??? ??? ????? ?? ?? ????? ??? ??? ??? ?.?.?????????????????????? ?.?.?????????????? ?.?.?????????????????????????????????????????? ?.?.?.???? (HTML Tag) ?.?.?.???????????????? (HTML Element) ?.?. ?. ??????????????? (HTML Document) ?.?.?.???????(Attribute) ?.?.???????????????? ????? ????? ????? ?????-???? ???? ???? ??????? ??? ??? ????????? ?????? ?????? ?????? ?.?.????????? (<head>…</head> ????) ?.?.??????????(<title>…</title>) ?.?.????????(<meta>) ?.?.?. name ????????????????? ?.?.?.HTTP-EQUIV ????????????????? ?.?.????????(<link>) ?.?.???????(<base>) 6

  7. ?.?.????????(<style>…</style>) ?.?.???????(<script>…</script>) ????? ????? ????? ?????-???? ???? ???? ??????? ??? ??? ????? ?? ?? ?????? ???? ???? ???? ?.?.????????? (<body>…</body> ????) ?.?.bgcolor ????????? ?.?.?.?????????-???????????? ?.?.background ?????????? ?.?.?.??????????????????? ?.?.text ????????? ?.?.link ????????? ?.?.vlink ????????? ?.?.alink ????????? ?.?.????????? (<h1> ???? </h6>) ?.?.???????????? (<p>….</p>) ?.??.??????? (<br>) ?.??.??????????(&nbsp) ????????? ?.??.?????????? <pre>…….</pre> ????????????? ?.??.??????????????? ?.??.<acronym> ????????????? ?.??.????????????????<hr> ???? ?.??.Marquee ????????????? ?.??.??????????? ????? ????? ????? ?????- ????? ????? ????? ????????? ???? ???? ???????? ???? ???? ????????? ????? ????? ??????????? ?????? ?????? ?????? 7

  8. ?.?.???????????? <font>….</font> ????? ?.?.????????????????????????????????????? ?.?.????????????????????????? ?.?.???????????? (HTML Entities) ?.?.??????????????????????????? ?.?.????????????????? ????? ????? ????? ?????-??? ??? ??? ??????? ???? ???? ???????? ???? ???? ??????? ??? ??? ??????? ???? ???? ???? ?.?.??????? (Ordered List) ?.?.??????(Unordered List) ?.?.????????। ?????-???????????????????????? ?.?.<img> ????????????? ?.?.?????? ?????-??????????????????? ?.?.??????????? <a>….</a> ???? ?.?.?.href ?????????????????) )???????????????? ?.?.?.Title ???????????????? ?.?.?.Target ???????????????? ?.?.???????????????? ?.?.??????????????????????? ?.?.?????????????????? ?.?.?????? ?????-??????? ???? ???? ???????? ???? ???? ????????? ????? ????? ????????? ???? ???? ???? 8

  9. ?.?.?????????? (<table>...</table>)???? ?.?.?????????????????????? ?.?.?.align ??????????????? ?.?.?.width ???????????????? ?.?.?.Border ???????????????? ?.?.?.Cellspacing ???????????????? ?.?.?.Cellpadding ???????????????? ?.?.?.bgcolor ??????????????? ?.?.?.rowspan ???????????????? ?.?.?.colspan ???????????????? ?.?.<caption> ????????????????? ?.?.????????????????????????????? ?.?.?????????????????????? ?????-?????????????????????? ???? ?? ?? ?? ??.? ? ? ?.??? ??? ??? ??????? ???? ???? ???? (<form>...</form>) ???? ???? ???? ?? ?? ?? ??.? ? ? ?.? ? ? ?.Method ??????? ??????? ??????? ??????? ?? ?? ?? ??.? ? ? ?.? ? ? ?.Action ??????? ??????? ??????? ??????? ?? ?? ?? ??.? ? ? ?.? ? ? ?.Enctype ??????? ??????? ??????? ??????? ??.?.??????????????????? ?? ?? ?? ??.? ? ? ?.? ? ? ?.???? ???? ???? ??????? ??? ??? ??????? ???? ???? ???? ?? ?? ?? ??.? ? ? ?.? ? ? ?.?? ?? ?? ???????? ?????? ?????? ????????? ??? ??? ??????? ???? ???? ???? ?? ?? ?? ??.? ? ? ?.? ? ? ?.????? ????? ????? ????????? ???? ???? ???? ?? ?? ?? ??.? ? ? ?.? ? ? ?.????? ????? ????? ????????? ???? ???? ???????? ???? ???? ???? ?? ?? ?? ??.? ? ? ?.? ? ? ?.???? ???? ???? ????????? ????? ????? ????????? ???? ???? ???? 9

  10. ?? ?? ?? ??.? ? ? ?.? ? ? ?.???? ???? ???? ???????? ???? ???? ???? ?? ?? ?? ??.? ? ? ?.? ? ? ?.?????? ?????? ?????? ?????????? ???? ???? ???????? ???? ???? ???? ?? ?? ?? ??.? ? ? ?.? ? ? ?.???? ???? ???? ???????? ???? ???? ???????? ???? ???? ???? ??.?.?.????????????? ?? ?? ?? ??.? ? ? ?.?? ?? ?? ??.?????? ?????? ?????? ????????? ??? ??? ??????? ???? ???? ???? ??.?.??.????????????? ?????-???????????????????????? ??.?.????????? iframe ???? ?????-????????????? ????????? ????????? ?????????????? ????? ????? ????? ??.?.<table> ?????????????????????? ??.?.CLASS ? ID ??????? ??.?.????????? <div> ???? ??.?.<div> ?????????????????????? ?????-???? ??.?.????????? 4.01- ????????? 10

  11. ?????-???????? ???????????? ????????????????????????????????????????????????????।????????????????????????? ????????????????????????????????????????????????????। HTML ?????????? Hyper Text Markup Language ????????????????????????????।????????? -?? Markup Language ???? ??, ???????? Markup ?????????????? Markup ?????????????????????????????????????????? ???????????????।????- ????????????????, ????, ????????,????, ??????????????????????????? ; ??????????????????????????????????????????????????????????????????????????? ??????????????????।????????????????????????????????????।?????????????????????? ??????????????????????? View Page Source ??????? <html>……..</html> ????????????????? ?????????????????????????????। ???????????????????? ??????,?????????????? ,????????????????????????????, ???????????????????????????? ????????????????????।????????????????????????????????????(???????) ????????? ??????????? (???????) ??????।???????????????????????????????????????। ?????????????? ??????????????????????????????????????????????????????????, ????????????? Notepad ????????????????????????????????????????।????????????????????? Notepad++ ?? ??????????????????????????????????????????????????????????????- Adobe Dreamweaver, HTML Kit ???????????????।??????????????? Notepad++ ?????????????। ??????????????????????????????????????????????????????।????? Internet Explorer, Mozilla Firefox, Google Chrome ??????। ?????????????? HTML-???????? ????????????????????????????; ?????????????????????????????????????????????????? ??????????????????।????????????????? ???????????????????????????????????????????? 11

  12. ???????????????????????????????????????????????????????????।?????????????????????????????????????????????????????????????????????????।?????????????? ??????????????????????????????? ????????।??????????????????????? -???????। ??????????????????????????????????????????????????????????????।???? CSS(Cascading Style Sheets) ??????????????????????????????????????????।???????????????????????, ??????????????????????।???????????????????????????????????????? (???????????????? ????????????????????????)।???????????????????????????????????????। ?????????????????? ??????????????????? hostghor.com ?????-???????? ??????????????????????? ??????????????????????????????।????????????????? <head> ??????????????? </head> ?????????????????????????????? <body> ??????????????? </body> ?????????????।???? 12

  13. ??????????? <html> ? </html> ??????????????????।?????????????????????????????????????? ???????- <html> <head> ????? CSS, Java Script ????????????????????। <title> ?????????????????????? (title) ????????????????। </title> </head> <body> ????????????????????????????? (Text,Image,Table,Form,Audio,Video ??????) ???????????? ????????। </body> </html> ??????????????? Notepad++ ????????????????????????????????????- 13

  14. ???? File ??????????? Save As…???????।????????????????????????- 14

  15. ???? File name:-????? index.html ?? index.htm ??? Save as type:-????? All types(*.*)???????? save ???????????।?????????? Save in ????????????????????????????????????????????। ?????????????????????????????।???????????????????????????????????????????- ????????????????????????????????????????????????????????????- ???? ???? ???? ??????????? ??????? ??????? ???????????????? <head> ? <body> ?????????????????????? ,????????????????????? ???????????????????????, ??????????????????????????????????????????????????? <title > ??????????????????।????? <title> My first web page </title> ????????????????????????????? “My first web page” ??????????????।????????????????????????????????????????।?????????????? (<body>….</body>)-? h1,h2,h3,h4,h5,h6 ???????????????????????????????????????????।???????? ???????????????????????????? <h1>,<h2,………..<h6> ??????????????। <p>……</p> ???????????????? ??????????????।??????????????????????????????????????????। HTML ?? ?? ?? ?????? ???? ???? ??????? ??? ??? ????? ?? ?? ???????? ?????? ?????? ????????????? ??????? ??????? ??????????? ???? ???? ?????????? ?????? ?????? ?????? 15

  16. ?. ??????????????? (HTML Document) ?. ????????????????(Element) ?.?????????????(Tag) ?.????????????????(Attribute) ????????????????????????? ? ? ? ?.???? ???? ???? ???? (HTML Tag):???????????????-?????????????????????????????????।????????? ??????? (<)????????????? ,?????????????????????????????? (> ) ?????????।????? <html>,<head>,<body> ????????????।??????????????????????????????????????????????? ??????????? Case Sensitive ?? , ??? Small Letter- ????????।???????????????????????????? ??????????????????????????????????????????????? –??????????????????? (/) ???????। ????- ???????????????????????????, ???????????????? <head> ?????????????????? </head> ???? ????।????????????????????????????????????????, ???????????????।?????????????????????? ??????? </p> ?????????????????????????????। ? ? ? ?.????????? ????????? ????????? ???????????????? ???????????????????????????-???????????????????????????????????????????????।???? ???????????????????????????????????????- html, head, title ??? body।??????????????????? ?????। ??????? ??????? ??????? (HTML Element):????????????????????????????????????????। ??????????????????????????????????????????- •Start Tag/Opening Tag ????????। •End Tag/Closing Tag ?????????। •Start ? End ?????????? Element Content ????। •???????? Element Content ????????????। •???? Element-?? End Tag ????????????। ?????????????????????????????????????????????- ????????????????????? <p> ?????????????? ???????????????????????????????? </p> ?????????????।????????????????????????? (<p>Element Content</p>)??????????????????????।?????????????????????????????????????????, ??????????????????????????????????????????। 16

  17. ? ? ? ?. ???????? ???????? ???????? ????????? ? ? ??????? ?????? ?????? ???????????????।????????????????????????????? head ? body ??????।??????????????? ???????????? something.html/.htm Extension ???? save ???????। ?????? (HTML Document):???????????????????????????????????? ???????(Attribute):?????????????????????, ?????????????????????????????????? , ? ? ? ?.??????? ??????? ??????? ?????????????????????।?????????????????????????? , ???????????????????????????????? ??????????।???????????…? ????????????????????????????????????- ????????????????? ????????????????????????????????????????????????????????????????????????????????????? ????????????????????????????????।?????????????? “<h1>My First Heading</h1>” ????????? ??????????????????????????????????????????? “My First Heading ” ????????????????????????। <h1 align=”center”> My First Heading </h1> ????? align ???????????????????????????????? value ?? “center”,?????????????????????? ???????????????।?????????????????????????????????????????।?????????????????????- <HTML Tag Attribute_Name=”Attribute_Value”>………</HTML Tag> ?????? ?????? ?????? ???????????????? ?????????? ?????????? ?????????? ?????????????????????? Source Code ???????????????????, <html> ?????????? <!doctype> ???????????????????।?????????? Doctype Declaration ।??????????????????????????? ???????????????????????????।?????????????????।???????????????????????????????? ?????????????????????, HTML ???????????, W3C ????????????????????? Doctype Declaration ?? ??????????? <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> ???????????????????????????????????????, ??????????????????????? ??????????????????? <html>…………</html> ??????????????????।????????????- 17

  18. ?????-????????????? ??? ??? ??? ????????? ?????? ?????? ?????? (<head>…</head> ???? ???? ???? ????): ????????????????????????????????????????-????????????????????।??????????????? ???????????????????????? <head>…</head> ????????????????????। <head>……….</head> ???????? ?????????????।?????????????????????????????।????- ??????????????, ??????????????, ??????????????????????????????।??????????????????????????????????????????????; ???????????????????????????????????????????????????????????????।?????????? (<head>……….</head> ??????????) ?????????????????? ?.?????????? ?.???????? ?.???????? ?.??????? ?.???????? ?.??????? ? ? ? ?.?????? ?????? ?????? ?????????? <title>……</title> ????????????।????????????????????????????????-???????????????????।???? ?????????????????????????????????????????????????????????????????।???????????? ????????????????????????????????????????? title ????????????।???? Valid HTML Document ???????????? title ?????????????????।????- ??????? www.youtube.com ?????? ???????????????????????????????????????? Broadcsst Yourself; ??????????????????????????- ???? ???? ???? (<title>…</title>):???????????????????????????????????? <head> <title> Broadcsst Yourself</title> </head> ?????? ?????? ?????? ???????????? ?????? ?????? ?????????? ???? ???? ?????? ?? ?? ????? ??? ??? ?????? ??? ??? ????? ?? ?? ????? ??? ??? ?????? ??? ??? ??????? ???? ???? ?????????? ?????? ?????? ?????? 18

  19. ►?????????????????????-??????????????????। ►?????????????????????????????????????????।????? <title><p>Paragraph Here</p></title> - ??????। ????(<meta>):?????????????????????????? <meta> ????।????????????????? ? ? ? ?.???? ???? ???? ???????? ???????????????????????????।????- ????????????????????????????, ???????????????????, ?????????????, ??????????????????????????????।????????????????????????????? ???????।????????????????। <meta> ????????????????? ???? ???? <meta name=”meta_Name” content=”meta_Content”> ?????????????? name, http-equiv ? content ???????????????????????????। name ? http-equiv ????????????? content ??????????????????????????????????????????????। ???? name ? http-equiv ???????????????????????? ? ? ? ?.name ????????? ????????? ????????? ????????????????? ???????? ???????? ???????? i.<meta name=”Developer” content=”Abdullah Al -Faruk”> ????? name ? content attribute ????????? developer ?????????????????। ii.<meta name=”keywords” content=”html,java,css,php,joomla”> ???????????????????????????????????। iii.<meta name=”Description” content=”This tutorial about web design & developing” > ??????????????????????????????????। iv.<meta name=”robots” content=”noindex/nofollow/all/index”> robots ?????????????????????????????????????????????????????????। v. ????????????????????????????????????? refresh ???????????। <meta name=”refresh” content=”3,http://www.iceschool.com”> 19

  20. ??????????????- <meta http-equiv=” refresh” content=”3,http://www.iceschool.com”> ??????????????????????????????????????। ? ? ? ?.HTTP-EQUIV ????????? ????????? ????????? ????????????????? ???????? ???????? ???????? ???????????????????????? update ???? <meta> ???????? attribute ???????????। <meta http-equiv=”expires” content=”sat,30 dec,2011,12.00AM,GMT”> ????? 30 dec-?????????????????????????????????????????????????। ? ? ? ?. ???? ???? ???? ???????? ?????????।????????????????????????????????????????????????????????????????????????? ?????????।?????????????????????????????????????????????????????????????????????। ????????????????????????????????????????।???????????????????????????? ???? ???? ????(<link>):????????????????????????????????????????????? <link> ???? <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> ? ? ? ?.??? ??? ??? ??????? ????????????????????। <base> ??????????????????????????? URL ?????????????।???????? ???????????????? <base> ?????????????????????।????? ???? ???? ????(<base>):?? ?????????????????????????????????????????????????????? <base href=”http://www.iceiuacademy.com/html/”> ???????????? iceiuacademy ??????????????????????????? Admission Form ?????????? ??????????????????????????????????????????????????????????????????????????????। ????? <head> <base href="http://www.iceiuacademy.com/admissionform" /> <base target="_blank" /> </head> ?????????????? Base Tag ?????????????????????। 20

  21. ? ? ? ?.???? ???? ???? ???????? ???????????????।???????????????????????, ??????????????????।?????????????? type ??????????????????????????।????? ???? ???? ????(<style>…</style>): <style> ? </style> ????????????????????????????? <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> ? ? ? ?.??? ??? ??? ??????? script ???? JavaScript ?????????।??????????????????????, ??????????। ???? ???? ????(<script>…</script>):<script>? </script> ??????????????????? client-side ?????????????????????,?????? , ??????????? ???????? ? www.extratelecombd.com 21

  22. ?????-????????????? ??? ??? ??? ????????? ?????? ?????? ?????? (<body>…</body> ???? ???? ???? ????): ??????????????????????????????????????????-???????????????????।?????????????????? ???????????????,?????????????????????????????????????।?????????????????????????? ????????????????????????????????? <body>…</body> ????????????????????। <body>……</body> ?????????????????????। Body Section ?????????? (<body> ? </body>) ??????????????????????? ????????।????????????????????????? (Image, Text, Table, Form, Frame, Paragraph, Heading Etc.) ?????????????????। <body> ????????????????????????????????????????????????????? ???????। ?.bgcolor ?.background ?.text ?.link ?.vlink ?.alink ? ? ? ?.bgcolor ?? ????- ???????????????? color.html ?????????????????????? ?? ?? ?????????? ???????? ???????? ?????????????????????????????????????????????????????????????। <html> <head> <title>Show a Background Color</title> </head> <body bgcolor=”red”> <h1>Background Color is RED</h1> </body> 22

  23. </html> ????? <body bgcolor=”RED”> ??????????????????????????????।?????????????????????? bgcolor=”red” ????????????????????????????????????? , ?????????????????????????????? ????????????? ???????????????।????????????????????????????????????, ?????????? ????????????- ????????? ????????? ????????? ?????????-? ? ? ?????? ????? ????? ???????????? ??????? ??????? ??????? ????????????????????????????????।????????????????????????????। ??? ??? ??? ???????? ????? ????? ????? ????????????????????????, ????, ???, ????, ??????।?????????????????????????????????????? ???????????????।???????????????????????????????? ?? ?? ?? ???? ?? ?? ???????? ?????? ?????? ??????????? Black ????? ????? ?????: Gray Silver White Yellow Lime Aqua Fuchsia Red Green Blue Purple Maroon Olive Navy Teal ????? ????? ????? ?????????? ????? ????? ????? ????????????????????? RED-GREEN-BLUE(RGB)। ???????????????????????????????????। Red, Green ??? Blue ????????????????????? rgb ।???????????(??????????????????) ??? ???(????????????????????)। rgb ????????? rgb(RED,GREEN,BLUE)।?????????????????- Red, Green ??? bgcolor="rgb(255,255,255)"White ??? ??? ??? Blue ?? ?? ?? ????? ??? ??? ???: bgcolor="rgb(255,0,0)" Red bgcolor="rgb(0,255,0)" Green bgcolor="rgb(0,0,255)" Blue 23

  24. ??????????????????????????????????????????। ????? ????? ????? ?????????? ????? ????? ????? ????????? -???????????????????????????????????????????????।????????????????????????? ????????????????????????????????????।?????”RRGGBB”-????? RR=Red;GG=Green;BB=Blue.।????????? ????????????-"#RRGGBB" ???????????????????? (#) ??????????????????????????????????????? ????????????????????????????????????।??????????????????????????????????????????????????? ??????????????????????????????????????????????????????????? A ???? F ?????????????????????? ?????????????????????????????????????। ???????? 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ???????????? 0 1 2 3 4 5 6 7 8 9 A B C D E F ------------------??????????????।????????????????????????????????? F ?? ?????????। ??????? bgcolor="#FFFFFF" bgcolor=”#0055AA” [?????????????????????।?????????????????????] ?????????????????????????????????????????????????????????????????????????????? ????????????????????????।?????????????????????????????????????????। [??????????????-?????????????????????????????????????????????????????????????? ???। ] ? ? ? ?.background ?? ??।??????????????????- ?? ?? ?????????? ???????? ???????? ?????????????????????????????????????????????????????????? <body background=”?????????.????????????” > <body background=”web.png” > ????? web ????????????? .png ???????????। ???????????????????????????????????????????????????????????????????????। ????? ????? ????? ?????????? ????? ????? ????????? ???? ???? ?????????? ?????? ?????? ?????? .gifGraphic Interchange Format (????????) 24

  25. .jpegJoint Photographic Experts Group (??????????? .jpg ) .png Portable Network Graphic(.gif ? .jpeg ?????????????) .BMPWindows Bitmap. ? ? ? ?.text ?? <body text=”GREEN”> ,????? <body> ? </body> ???????????????????????????????। ?? ?? ?????????? ???????? ???????? ??????????????????????????????????????????????????????????।????? ? ? ? ?.link ?? ?????।?????<body link=”BLUE”> ,?????????????????????????????????????। ?? ?? ?????????? ???????? ???????? ????????????????????????????????????????????????????????????????? ? ? ? ?.vlink ?? ?? Attribute ?????????।??।?????<body vlink=”RED”> ,????? Visited Link ?????????????। ?? ?? ????? ??? ??? ???????? ????? ????? ???????????????????????? Already Visit ??????????????????????????? ? ? ? ?.alink ?? Attribute ?????????।????? ?? ?? ?????????? ???????? ???????? ????????????????????????????????????????????????????????????? <body alink=”GREEN”> ????? Link ??????????????। ?????????????????????????????????????????????????????????????। ?????????????????????????????????????????????????????????????????? ?????????।??????????????????????????????????? ????? ????? ????? ????????? ???? ???? ???? (<h1> ???? ???? ???? ???? </h6>): ??????????????????, ????????????????????????????????????????????????????????। <h1>,<h2>,<h3>,<h4>,<h5>,<h6> ??????????????????????????????????।????????? h1>h2>h3>h4>h5>h6> ????? 25

  26. h1 ????????????????????????????????????????????????????।?????????????????????????????????? ????। align ??????????????????????????????????????।????? <html> <body> <h1 align=”left”>Left Alignment</h1> ???????। <h2 align=”right”>Right Alignment</h2> ???????????????????????????। <h3 align=”center”>Center Alignment</h3> ???????????????????????????। <h4 align=”justify”>Justify Alignment</h4> ??????????????????????????????????????????????? ?????। </body> </html> ???????? ???????? ???????? ???????????? ???? ???? ???? (<p>….</p>): ??????????????? <p>......</p> ???????????????।???????????????।???????????????????????? align ??????????????????।????? <p align=”center”>Here a Paragraph</p> align=”left”[?????????? left align ???????????????????????] align=”right”[????????????????????????????????????????] align=”center”[ ?????????,?????????????????????????] align=”justify”[ ????????????????????????????????????] ????????????????????????????????????????????????????????????????????????????? 26

  27. ??? ??? ??? ??????? <br> ????????????????।????????????????????????, ???????????????????????????????????? ???????।???????????????????????????????? <br> ????????????????????????????।????- ???? ???? ???? (<br>): ????????????????????????????????????????????????????????????????? <p> You can use a web page editor like Microsoft FrontPage, Adobe Dreamweaver or similar to create web pages. Webpage editor software works like Microsoft Word™ (a complicated editor program used for creating and editing pages of books, letters etc.)<br> Second option is to learn html codes and write html pages in a simple text editor. As mention eerier, your codes will be seen as WebPages when viewed in a web browser. ???????????????????????????????????। ?? ?? ?? ??????? ????? ????? ???????? ??? ??? ???(&nbsp) ?? ?? ?? ?????????? ???????? ???????? ???????? ?????????-??????????,??????????? (Enter Key), ????????????????????????????????।??????? ?????????????????????????????? &nbsp ?????????????।???? &nbsp ????????????,?????? ??????????।????? <p> Java script is an&nbsp&nbsp&nbsp interpreted object oriented promramming.</p>।?????????? ??????????। ??????? ??????? ??????? ?????????? ??? ??? ??? <pre>…….</pre> ?????? ?????? ?????? ?????????????? ???????? ???????? ???????? ??????? &nbsp ?????????????????? <pre> ??????????????????।???????????????,??????????? (Enter Key), ??????????????????????????????????????????????????????।????? <pre>Hyper Text Markup Language</pre> Output: Hyper Text Markup Language 27

  28. ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? ??????????????????????????????????????????????????????????????????????????, ?????????????????? ???????????????????????????????????????????, ??????????????????????????????????????????।??? ??????????? title ???????।??????? <html> <head> <title> Use of title attribute in a paragraph tag</title> </head> <body> <p title="HTML is a Markup Language">HTML is an acronym for HyperText Markup Language. HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist of two essential parts: information content and a set of instructions that tells a computer how to display that content. The computer application.That translates this description is called a Web browser. </p> </body> </html> ??????????????????????????????????????????????????????????????????"HTML is a Markup Language" ????????????। <html> <head> <title> Use of title attribute in a paragraph tag</title> </head> <body> <p title="HTML is a Markup Language">HTML is an acronym for HyperText Markup Language. HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist of two essential parts: information content and a set of instructions that tells a computer how to 28

  29. display that content. The computer application.That translates this description is called a Web browser. </p> </body> </html> <acronym> ?????? ?????? ?????? ?????????????? ???????? ???????? ???????? ???????????????????????????????????????????????????????????????????? ???।<acronym> ?????????????????????????।????? <p><acronym title=” HTML is a Markup Language”>HTML</acronym> is the basic markup language for web page.It is created by Tim Berners Lee.It is controlled by < acronym title=”World Wide Web Connection”>W3C</ acronym ></p> ??????? ??????? ??????? ??????? ??????????? ???? ???? ????????? ????? ?????<hr> ????? ????? ????? ????? ????? ????????????????????????????? <hr> ???????????????।????????????????।???????????????? ??????????????????????????????? 29

  30. *align:?????????????????????? align=”center”[?????????] align=”left” align=”right” *color: ?????????????????????। *size:??????????????????।?????????????। *width: ???????????????????।????????????????????????????। ??????? <hr align=”center” size=”10” width=”50” color=”RED”> Marquee ?????? ?????? ?????? ?????????????? ???????? ???????? ???????? ???????????????????????????????? , ?????????????????????????????????????? <marquee> ??????????????????????????।???????????????????????????????????????।????? <marquee>??????????????????????????????????????</marquee> marquee ???????????????????????- direction=”left”[???????????????????????] direction=”right”[???????????] direction=”up”[??????????] direction=”down”[???????????] ??????? <marquee direction=”right” scroll amount=”2”>HTML Is The Basic Of Web Design</marquee> ???????????? 30

  31. ??????????????????????????????????????????????????????, ?????????????????????? ??।???????????????????????????????????, ?????????????????????????????????????? ????।??????????????????????????????????????????????????????????????????????????? ?????????????????????।??????????????????? <!--Your Comment Here--> ???????????????- <html> <body> <h1> First Heading</h1> <!--This is first heading--> <p> HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist of two essential parts: information content and a set of instructions that tells a computer how to display that content. </p> <!--This is a paragraph about html--> </body> </html> ?????????????????? ??????????????????? hostghor.com 31

  32. ?????-???????????????????????? ????? ????? ????? ???????????? ??????? ??????? ??????? <font>….</font> ????? ????? ????? ????? ??????????????????????????????????।???????????????????????????????????????????????? ??।????????????????????????????? CSS-?।?????????????????????????? HTML ? CSS ???????? ??????।????????????????? HTML –? <font>…</font> ???????????????।?????? color, face ??? size ????????????????????????????????????।???????????????????????????????????? CSS ????????????। i.Color ??? ??? ??? ????????? ?????? ?????? ????????????? ??????? ??????? ??????? ????????????????????????????????????????।????? <font color=”#ff0022”>Some Text Here</font> ii.Face ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? ????????????????????????????????????????।???????????????????????????????? ????????????।????? <font face=”Arial”> Some Text Here </font>। ??????????????????????????????????????????????????????????????।????? <font face=”Arial”,”Times New Roman”,”Solaiman Lipi”> Some Text Here </font>। iii.Size ?????? ??? ??? ?????????? ??????? ??????? ??????? ?????? ?????? ????????? ?????????????????????????????।??????????/??????????।????????????????????? ?????।?????? + ?? - ???????????????????????????????????????????????????।???????????? ???????????????????????????।??????? ?. <font size=+1>Web development</font>[ ???????????? ] ?.<font size=-2>Web development</font> [ ??????????? ] ???????????????????????????????; ?????????????????- 32

  33. ?????????+ (size=????????????*?) ??????????????????- ??+(?*?)= ??+?=?? ??????????????????- ??+(-?*?)= ??-?=? Size Attribute ?????????????????????????? <html> <head> </title>Font Size</title> </head> <body> <font face=”arial” size=”-2”> Error! Hyperlink reference not valid.> <font face=”arial” size=”-1” > www.webtechnologyblog.com </font><br> <font face=”arial” > www.webtechnologyblog.com </font><br> <font face=”arial” size=”+1” > www.webtechnologyblog.com </font><br> <font face=”arial” size=”+2”> www.webtechnologyblog.com </font><br> <font face=”arial” size=”+3” > www.webtechnologyblog.com </font><br> <font face=”arial” size=”+4” > www.webtechnologyblog.com </font><br> </body> </html> ?????? 33

  34. ?????????????????????????????????????????? <p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p> <p> <font size="3" face="verdana" color="blue"> This paragraph is in Arial, size 5, and in red text color. </font> </p> ???? ???? ???? ???????? ???? ???? ?????????? ?????? ?????? ????????? ??? ??? ????????? ?????? ?????? ?????????? ???? ???? ??????????? ??????? ??????? ?????????? ??? ??? ??????। ???। ???। ???।????? ????? ????? ????? *?????? ?????? ?????? ????????????? ??????? ??????? ??????? i.<I>Some Text Here</I> ii.<address>Some Text Here</address> iii.<cite>Some Text Here</cite> *???? ???? ???? ??????????? ??????? ??????? ??????? 34

  35. i.<B> Some Text Here</B> ii.<EM>Emphasized Text</EM> iii.<strong> Some Text Here</strong> *????????? ????????? ????????? ???????????????? ??????? ??????? ??????? <U> Some Text Here</U> *???? ???? ???? ???? + ?????? ?????? ?????? ?????? + ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? <B><I><U> Some Text Here</U></I></B> *????? ????? ????? ????? 1.<blockquote> ..</blockquote> [ ??????????????? ] 2.<Q>…..</Q> [ ?????????????????????? ] 3.<dfn>Definition</dfn>[????????????????????] 4.<samp>Sample Computer Code Text</samp> 5.<kbd>keyboard</kbd> 6.<var>Variable</var> 7.<code>…….</code>[ Programming code ?????????? ] 8.<sample>Program ?? Sample Output</sample> 9.<strike>???????????</strike> 10.<big>Text Font ?????????</big> 11.<small> Text Font ??????????? 12.<TT>??????????????????? </TT> 13.<blink>Text ?????????????</blink> 35

  36. 14.<sub>:H<sub>2</sub>O[Output:H2O] 15.<sup>a<sup>2</sup>+b<sub>2</sub>[Output(a2+b2)] ??????? ??????? ??????? ?????????? ??? ??? ??????????? ???????? ???????? ??????????????? ??????? ??????? ??????? ???????????????????????????????????????????।???????????????????????????????? ???????????????????????????।????????????????????????????????????।?????????????? ????????????????।????????????????????????????????????????????????????????? ????????????????????।????????????????????????????????????????????????????????? ???????????????????????????????????????????????????????????????????।?????????????? ????????????????।??????????????????????????????।?????????????????????????????? I.cursive Ii.fantasy Iii.monospace Iv.sans-serif v.serif ????? ????? ????? ???????????? ??????? ??????? ???????????? ????? ????? ???????? ??? ??? ??????????? ???????? ???????? ?????????????? ?????? ?????? ????????????? ??????? ??????? ?????????? ??? ??? ??? <html> <head> <title>Generic Font Families</title> </head> <body> <h3> Generic Font Families</h3> <p style="font-family:serif; font-size:14pt;">serif family</p> <p style="font-family:sans-serif; font-size:14pt;">sans-serif family</p> <p style="font-family:cursive; font-size:14pt;">cursive family</p> <p style="font-family:fantasy; font-size:14pt;">fantasy family</p> <p style="font-family:monospace; font-size:14pt;">monospace family</p> 36

  37. </body> </html> ?????? ????? ????? ????? ???????????? ??????? ??????? ??????? (HTML Entities): ???????????????????????? HTML ???????????????????।????? (&,””,<>)।?????????????????????? ????????????????????।?????(∞,µ,α,Ủ,µ ??????)। ?????????????????????????????????????? Entity Code।????????????????? Entity Code ????? -????????????।????? µ ?? Entity Code ??- ??????????? &#956 ; &mu; ???? Entity Code ???????????? ??? ?????????? &#34; &#60; &#62; &#38; &#174; &#169; &#956; ??????? #quot; &lt; &gt; &amp; &reg; &copy; &mu; “ < > & ® © µ 37

  38. &#9829; &#9824; &#9827; &#9830; &hearts; &spades; &clubs; &diams; ♥ ♠ ♣ ♦ ???????????????????????????? Entity Code ????????????????। ????????? ????????? ????????? ????????????????? ???????? ???????? ?????????????????? ?????????? ?????????? ?????????? ????????? ????????? ????????? ?????????-?? ?? ?? ????? ??? ??? ??????????????????????????????।???? ?.????????????????????????????????????????????????।????????????????????????? ????????????????????????????????????????????।????????????????????????- <p>First Paragraph </p><p> Second Paragraph</p> ??????? First Paragraph Second Paragraph ????????????????????????????????।?????????-? <p>,<h1> ???? <h6>, <hr> ??????????????? ???????। ?.?????????????????????????????।?????????????????????????।?????????????????? ???????????????????????????। ????? ????? ????? ????????? ???? ???? ???????? ???? ???? ???????? ???? ???? ???? ?????????????????????????????????????।????????????????????????।????- ?.?????????????????????????????।????- <p><B>HTML</p> ?????????? <B> ????????????। ?.?????????????????।????- <p><B>HTML</p></B> ?????????? <B> ????????????????। ?.????????????????????????????????????????????????????।????? <p>html is the basic of <h1>Web Design</h1></p> 38

  39. 4.????????????????????????????????????????????????।????? <B>Something<p>Paragraph here</p></B> ??????। ?????????????????????? www.cricketw.com ?????-?????????????????? ??????????????????????????????????????????।????- ????????, ???????? , ???????????? ??????।??????????????????????????????????।???????????????????????????????????????? ???????????? (<li>….</li>) ???????????। <li>….</li> ?????????????????????????????????।?? ?????????????।????????????????????????????। <ol> ??????????????????????????? ???(ordered list), <ul> ??????????????????????????????????????????? <dl> ????????????? ???????????(definition list)।??? ordered ? unordered list-??? HTML-?????????।????????? ????????????????????- 1.<ol> - ordered list(Numbered List) 2.<ul> - unordered list(Bulleted List) 39

  40. ? ? ? ?. ???? ???? ???? ??????? ??? ??? ??? (Ordered List): ????????????????????????????????????? Ordered List ???????????।????????????????????। Ordered List ????????? <ol>….</ol> ????????????।?????? type ???????????????????????????? ???????????????????।??????????????????? ???? ???? ???? ??????????? ??????? ??????? ??????? ?. ??????????????????????????????????????।??????????????????????????????????????????????? ?????????????? <ol>….</ol> ???????????????। ?. ????????????????????????????????? <li>…</li> ??????????????????।???????????????- An Ordered List: •Coffee •Tea •Milk ??????????????????????????????????????,?,?... ????????, ???????।????????????? ????????????? a,b,c….?? i,ii,iii….????????????????????????? ?????????????????????? ??????????????????(ordered list) ?????।????????????,?,???????????????????????????????????? ??????????????????। type ???????????????????????????????- 1.<ol type="a"> // a,b,c…???????????। 2.<ol type="A"> //A,B,C... ???????????। 3.<ol type="i"> // i,ii,iii... ???????????। 4.<ol type="I">// I,II,III... ???????????। ????? ????? ????? ??????????? ?????? ?????? ???????????? ?????? ?????? ?????? 40

  41. ????? ????? ????? ??????? ?? ?? ??????? ????? ????? ???????????? ??????? ??????? ??????? Letters list: •Apples Bananas • Lowercase letters list: •Apples Bananas • Roman numbers list: •Apples Bananas • Lowercase Roman numbers list: •Apples Bananas • Start ?????????????????????????????????????????।????- 41

  42. ?????: 4.Buy Food 5.Enroll in College 6.Get a Degree ????? ????? ????? ? ? ? ?.?????? ?????? ?????? ??????(Unordered List) ?????????????? Serial Number ?????? , ?????????????? Symbol ???????????। <ul>…<ul> ?????????? ??? Unordered List ?????????। Type Attribute ?????????????? Symbol ???????।??????????? ?????? ????? ????? ????? ?????: An Unordered List: •Coffee •Tea •Milk <ul> ??????????????????????????????।????????????????????????. squares(■) ?.disc ?.circles(○) । default ????????????? full discs ???????????। <ul> ?????????? type ???????????????? ??????????????????????।????- 42

  43. <ul type="square"> <ul> type="dics"> <ul> type="circle"> ??????????????????? ?????? Disc bullets list: •Apples •Bananas Circle bullets list: •Apples •Bananas Square bullets list: •Apples •Bananas ????? ????? ????? ????????? ???? ???? ???? 43

  44. ?????? 44

  45. ?????????????????? ??????????????????? hostghor.com ?????-???? ???? ???? ???????? ???? ???? ???????? ???? ???? ?????????? ?????? ?????? ???????????? ?????? ?????? ?????? ??????????????????????????????????????????????।??????????????????????????????????? ??????।????????????????????????????????????????, ???????????????????????????????? ??????????????।????????????????????????????????????। <img> ????????????????????? ???????????????।????????????????, ????????? src ???????????????????????????????????? ??।????- 45

  46. <img src=”??????????????/?????????.(??)????????????”> <img src=”image/web.jpg”> ????????????????? Image ???????????? web.jpg ?????????????????। ???????????????? HTML ?????????????????????????????????????????????????????????????? ??।????- <img src=”web.jpg”> ?????????????????????????????????????????????????????????????????????????????????? ????।????? <img src=”http://www.image.google.com/ html/html5.jpg”> <img> ????????????????????????????????????????????????????- ? ? ? ?.width? ? ? ? height ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? ??????????????????????????????????????????????????????? <img> ?????? width ? height ????????? ??????।??????????????????????। width ? height ????????????????????????????????????? ?????????????????????????????????। width ? height ????????????????????????????????? ????????????????।??????????? <img src=”image/web.jpg “width=”300” height=”200”> ? ? ? ?.Align ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? ???????????????????? align ??????????????????।????? <img src=”html.jpg” align=”left”> ??????????????????????????? align ???????????????????????????????????? *align=”top”[ ???????????????????????? ] 46

  47. *align=”middle”[ ????????????????????????? ] *align=”bottom”[ ?????????????????????????? ] ......................................................................................................... *align=”left”[ ??????????????????????????? ] *align=”right”[ ??????????????????????????? ] ? ? ? ?.Border ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? ???????????????????????????????।?????????????????????????????????????।????????? ?????????????????????????????????????????????????????????????????????????????।????? ???????????।??????????? <img src=”faruk.png” border=”4”> ? ? ? ?.hspace ? ? ? ? vspace ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? ???????????????????????????????????????????????? (??????/?????)??????????? hspace ??? ???????(?????????) ??????????? vspace ????????????????।????? <p>Use of hspace and vspace Attribute <img src=”wp.jpg” hspace=”20” vspace=”10”></p> ? ? ? ?.Alt ????????? ????????? ????????? ???????????????? ??????? ??????? ??????? ??????????????????????????????????????????????????????????????????????????????? ?????????????????????????????????? ??????????????????????????????????????????????????। alt ?????????????????????????? ??।????? ?????????????????,???????????????????? <img src=”joomla.jpg” alt=”joomla admin panel picture”> <img src=”photo.jpg” alt=”my photo with my friends”> 47

  48. ???????????? alt ??????? -????????????????????????????????????????????????????????? ????????????????????????????।????? <img src=”joomla.jpg” alt=”[joomla admin panel picture]”> ??????????????????????????????????????????? <img> ?????????????????????????????। ????? <I><img src=”joomla.jpg” alt=”joomla admin panel picture”></I> <img> ?????????? title ??????? -???????????????????????????????????।?????????????????? Alt ????????????? title ???????????????????।????? <p><img src=”mmm.png” title=”HTML A Markup Language”>HTML is an acronym for HyperText Markup Language. HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist of two essential parts: information content and a set of instructions that tells a computer how to display that content. The computer application.That translates this description is called a Web browser. </p> ??????? ??????? ??????? ??????? 48

  49. ??????? ??????? ??????? ??????? ?.????????????????????????????????। ?.?????????????????????????????। ?. Width ? height ???????????????????????????????????? ????????????????????????। ?.alt ????????????????। ?.???????????????????????????????????????????????? ??????????????????????????????????। ?.??????????????????????????????????????। ?????-??? ??? ??? ??????? ???? ???? ???????? ???? ???? ???????? ???? ???? ???????? ???? ???? ???? ??????????? ??????????? ??????????? ??????????? <a>….</a> ????? ????? ????? ????? ???????????????????????????????????।????????? -????????????????????????????????? ??????????????????????????????????; ?????????????????????????????????????????? ???????????????????????????।????????????????????????????????????????????।?????????? (<a>…</a> ????) ??????????????????????।??????????????????????????????????????????? ?????,????????????????????????,??????????????????????????????????????????????? ???????????।?????????????? href, title, ? target ??????????????????।??????????????????????- <a href=”?????????????????????????????” target="??????????????????????????????????? ??????????????????????????????????????" title=”????????????????????????????????????? ???????????” > ??????????????????, ?????????????????????????????? </a> ।???????????????- <a href="http://www.google.com/" target="_blank" title=”Search Engine”>Google Home</a> ???????????????? Google Home ??????????????, ??????????? www.google.com ?????????????? ????। ????????????????????????????????????????????????????? ? ? ? ?.href( ??? ??????????????????? (URL) ?????????????????????????????।????? ??? ??? ?????????? ??????? ??????? ?????????????? ??????? ??????? ??????? ) ????????? ????????? ????????? ????????????????? ???????? ???????? ???????? 49

  50. <a href=”http://www.facebook.com ” target=”_self” >Facebook</a> ?????????? Facebook ????????,????????????? www.facebook.com ????????????????। Hypertext reference ??????? Internal, Local, Global । ?.????????( Internal): ?????????????????????????????????????????????????????????????।? ???????????????????????????????। ?.??????( Local): ?????????????????-???????????????????????????????????।??????? ?????????????????????????????????????????????????????????????????।????????? ??????????????????????????????????????????????????????????????????????????????।????- ?????????????????????????????? index.html, About Us ??????? about.html; Blog ??????? blog.html; Tutorial ??????? tutorial.html ???????????????????????????।????????????????? ?????????????????????????????; ????????????? index.html ???????????????????????- <a href="about.html” target="_blank"> About Us </a> <a href=" blog.html” target="_blank"> Blog </a> <a href=" tutorial.html” target="_blank"> Tutorial </a> [???????????????????????????????????????????????????????????????।????????????????? ?????????????????????????????????] ?.??????( Global): ?????????????????????????????????????????????????????।????- ???? ??????????????????????????????????????? index.html ???????????????????????- <a href=”http://www.facebook.com ” target=”_self” >Facebook</a> ? ? ? ?.Title ????????? ????????? ????????? ????????????????? ???????? ???????? ???????? ??????????????? title ???????????????????????????????????????????????????????????? ???????????????????????।????? <a href=”http://www.WebTechnologyBlog.com” title=“????????????????????????......”> < a> ??????????????????????? “????????????????????????......” ????????????????????????????। ??????????????????????????। ? ? ? ?.Target ????????? ????????? ????????? ????????????????? ???????? ???????? ???????? 50

More Related