2

Transcription

1 1

2 2

3 å dl å - rк rк i ш e к u кш i ( Ш ) i,k k 3

4 i å å - n u к -å dl å - rк 4

5 - к к - i å х i n i,b, u, i o å к s a j i å HTML e p к Ш g e o i o m к å o к Ш kшp å к e å p х i i eх к tr a i к,åш к kш sn х i m к å ш, e tr i к, sк к шш d i u o e к a ш к e к a ш х к ån к к -å dl å - rк 5

6 å HTML к? HTML к к? p? HTML к? HTML к st к шbg HTML r к кш кш шш akш (HTML Entities) i HTML å o к к HTML e s HTML5 e HTML5 ш HTML шх i o s i 6

7 HTML o i t o к å eк kш o i å к a i HTML m к к eх p HTML i Microsoft Frontpage, Adobe Dreamweaver, Webpage Maker,Wordpress, Joomla к sn sn o к, å к к к HTML шх?к u l х o g к ш å å к к к s i к, х å к HTML Coding. i a i ш n HTML х i grt å o i e å o a n HTML к к Ш, eк p anш к i å t к m HTML å к к g Ш kшp å к o i e к å i, å o i e å o a n o i o i Outlook a hк r к e n к HTML, CSS, Photoshop, Flash o o p g e o e p кш к e n å к Php, Java Script, Xml, Database, Framework o к? o к g ш kш o ш s s mn к mu х a х o i к s к к o o iu i kш к, iu ån t p к p html,css,php i iu к 7

8 p к eкк o i g o kш eк ш kш к? å o i к nш a å o i i InterNIC p к ån к s o s к? o o i к х n d o к o s eкк o s a i s х å å o i к к å к ui к? iu х к i p ш к х i к g (Text,Image,Animation,Audio,Video i ) iu к mu u e к u i ui å i к? к o i p a i к o i å i p к к? p к å p n к mu s Ш n p к к n к eк к mu eкi eк к p к к, ш eк к p к к åi (i i p к )e D к? n o i к h к n eк к m d g åi e D... e... ei m b u хo å g eкк kш eк åi e D к 8

9 HTML к? HTML(Hyper Text Markup Language).e к Programming Language (Programming Language logic к ) HTML Markup Language к g Markup Tag(Tag к eк ) -e o к к Markup Tag e eк o n a ш к n Markup a h к <b>this Text is Bold</b>;eх <b></b> к This Text is Bold х к Bold к Markup Tag к HTML Tag o к o e au HTML Code. b u eк o o к view>page source kк к <html>..</html> к к х o HTML Code. HTML к к eк к,o к, n Content к s ns к, Design к e Outlook o HTML к HTML e kш eк HTML Document(o ) к n Platform(Browser)-e к к HTML к o t o a i HTML p HTML х n å к Editor Software к o, å к mu Notepad Text Editor å х i Code х e HTML Code к Run к n к eк b u i Internet Explorer, Mozilla Firefox, Google Chrome i o i n HTML-i к? 9

10 , o i n HTML-i HTML к å t o åu o к к e CSS(Cascading Style Sheets) к o n s i к o kш n XML(eXtensible Markup Language) e Java Script к e p кш к к o r к e o Programming PHP e к eк Mysql шх å к eк kш o i å к u Ш g k n HTML к st к : HTML Document(o ) e к di a ш к eк head an body e r <head>o<body> e шш </head> o </body> s HTML к к<html>..</html> х å eк HTML-e к st к х <html> <head> eх å CSS,Java Script Style Sheet к <title> eх o ш /Title к </title> </head> <body> eк o Content (Text,Image,Table,Form,Audio,Video i ) ei х </body> </html> HTML r к å шbg к 10

11 . e (Element). (Tag).e T u (Attribute).HTML Document Ш g m å к. e (Element): HTML Element d i HTML Document к eк HTML Document -e к Element к html, head, title, body e å o a к Element e r Opening Tag(<html>) o шш Closing Tag (</html>) e e Element Content к <p>element Content</p> HTML Element-e ш Start Tag/Opening Tag r End Tag/Closing Tag шш Start o End Element Content к к kш t Element Content o к Empty Element start шш к к Element-e End Tag o к. (Tag): e HTML- e p HTML Code х HTML Markup Tag- к Html Tag p r e b к,e eк Keyword e шш e b к <html>,<p>,<head> etc. p å å a к e e Case Sensitive, Small Letter- e х х eк grt r i i шш к шш Keyword e å eк (/) å к к p 11

12 r ш Ш шш u к Ш <html> <head> Some Tag Here </head> <body> Some Content Here </body> </html> к шш к o, eg optional tag. к paragraph х шш </p> к o e optional tag..e T u e T u (Attribute): (Attribute):eк o n text, image к e e a s, style n к g word к к Element- к word g к Element e Attribute eкк к Element e ш к Word g i Element e Attribute p Element e х к Attribute к å o к p Attribute e eк eк к value u <p align= center >Here a paragraph</p> eх align attribute к value center, paragraph o х х.html Document: HTML Element d eк HTML Document an, HTML Code File HTML Document HTML Document e p d a ш head o body section HTML Document i к a i something.html/.htm Extension save к 12

13 HTML r к eк Notepad Open к code g i кr e index.html кr <html> <head> <title>my first web page </title> </head> <body> <h1>my First Heading</h1> <h2>my First Heading</h2> <h3>my First Heading</h3> <h4>my First Heading</h4> <h5>my First Heading</h5> <h6>my First Heading</h6> <p> My first paragraph</p> </body> </html> e index.html i к к Browser open к х Figure:1.1 13

14 к Ш å eх <head> o <body> d кш х ch, p кш e к s å к, å eк к х o ш n <title > к eх <title> My first web page </title> b u i My first web page х х ch e Body Section (<body>.</body>)-e h1,h2,h3,h4,h5,h6 ei d ш к к å к ш к <h1>,<h2,..<h6> ei d <p> </p> d o g х eх å head o body section s å к, å eк к х s HTML Code- к <html>..</html> х HEAD SECTION: å ei кш к å к a i <head> </head> ei х <head>.</head> head кш head section e k m к к ei кш к х o х k ш [<title>... </title> ] Document Description, Keywords, Designer/Developer name i кш m g к к.title Tag х.meta Tag.Link Tag.Base Tag.Style Tag.Script Tag.Isindex Tag 14

15 к.title Tag: Head Element e p ch title tag <title> </title> ei к х Browser e i х o Content e eк kшp i ei ei х å o i n Element eк o i i - <title> web design-html-css-java script tutorial </title> i å o к i k к e n title e g t a eк Valid HTML Document к a i title к х.meta Tag: Title к <meta> ei к k m к n ш к n i i k e n e g t a e к шш i <meta> r <meta name= metaname content= metacontent > name o http-equiv d attribute e content å к attribute к di attribute e к n к.name Attribute-e e i.<meta name= Developer content= Abdullah Al -Faruk > eх name o content attribute к developer o o ii.<meta name= keywords content= html,java,css,php,joomla > eх keywords g o iii.<meta name= Description content= This tutorial about web design & developing > o kшp o iv.<meta name= robots content= noindex/nofollow/all/index > 15

16 robots keyword å o к i i k к х.http-equiv Attribute -e к o к update к <meta> ei attribute к <meta http-equiv= expires content= sat,30 dec,2011,12.00am,gmt > e 30 dec-e b u к k eк n к g к REFRESH ATTRIBUTE: к k к an к n refresh к <meta name= refresh content= 3, school.com > an х - <meta http-equiv= refresh content= 3, school.com > Body Section: å eк HTML k p d a ш -Head Section o Body Section Head section å к,eх å Body Section s å к å eк к х å ei кш к å к a i <body> </body> ei х <body> </body> Body Section Body Section e d i (<body> o </body>) Optional a e к o eк o к (Image, Text, Table, Form, Frame, Paragraph, Heading Etc.) ei кш х <body> n Attribute к o к åкш к <body> Attribute к к.bgcolor.link х.background.vlink.text.alink 16

17 к.bgcolor e ei Attribute к o кg u к к <body bgcolor= RED >,e кg u [ d bgcolor HTML e a ш s å к ] х.background e ei Attribute к o кg u Image к <body background= web.png > l HTML Document к Save к i l a i h i к.text e ei Attribute к o Text e к <body text= GREEN >,e Text e х.link e ei Attribute к o i k к к <body link= BLUE >,e Link e х.vlink e g i k к Already Visit к к ei Attribute к <body vlink= RED >,e Visited Link e х.alink e к u к s к к ei Attribute к <body alink= GREEN > e Link e х Body Section e n к o к sn к m n s o Heading Tag: (<h1>.</h1>) 17

18 Heading a ш, к Ш g ш к ei к <h1>,<h2>,<h3>,<h4>,<h5>,<h6> ei к ш o e k h1>h2>h3>h4>h5>h6> a h1 к åк х k n х Heading х Figure1.1 х ш o ш Ш к Align Attribute к e a s к <h1 align= left >Left Alignment</h1> <h2 align= right >Right Alignment</h2> <h3 align= center >Center Alignment</h3> <h4 align= justify >Justify Alignment</h4> Marquee <marquee> к Heading к Scroll (eк к к å к к) к <h6><marquee>technology For All</marquee></h6> marquee h Attribute g behavior= scroll direction= left [ к ] direction= right [ к ] scroll amount= 2 [ Scroll х ] u <h4><marquee behavior= scroll direction= right scroll amount= 2 >HTML Is The Basic Of Web Design</marquee></h4> Paragraph Tag:<p>o</p> g n <p>...</p> к e шш Optional g a s к к n align attribute к <p align= center >Here a Paragraph</p> align= left [ l left align к e к o ] 18

19 align= right [o i g a s к ] align= center [ a s к nd, i o p n ] align= justify [ g i o u p n ] g к Customize к n å o к к g m å к *<br> eк g ш Ш å к g х n к g к <br> к ei к i bк, к ei eк i к s х n i к u <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.)</p> <p> 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.<p> e х <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. b к s (&nbsp) e HTML e eк к s,к (Enter Key), eк s к i к k a k s к &nbsp к g &nbsp к, g s 19

20 <p> Java script is an&nbsp&nbsp&nbsp interpreted object oriented promramming.</p> eх s i s <pre>.</pre> å &nbsp к i <pre> к ei s,к (Enter Key), a g s к g s <p>hyper Text Markup Language</p> Output: Hyper Text Markup Language e i i к Ш eк s g х Ш eк ш o e, g u к х ш eк å к k х, х iu g e Ш st к e n к title attribute u <p 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> Output: 20

21 <acronym> o eк шш ш b u к х шb m к eк å к k х <acronym> к ei к к <p><acronym title= HTML 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> Output: 21

22 ån к х <hr> o ån к х к n <hr> к e к шш i m Attribute g к e åu к к *align: х a s к align= center [ l ] align= left align= right *color: х к к *noshade: к, *size: х uch к e k *width: х p s к e ш к u <hr align= center size= 10 width= 50% color= RED > к к k s i к *i к х i.<i>some Text Here</I> 22

23 ii.<address>some Text Here</address> iii.<cite>some Text Here</cite> * l х i.<b> Some Text Here</B> ii.<em>emphasized Text</EM> iii.<strong> Some Text Here</strong> *å i х <U> Some Text Here</U> * l + i к + å i х <B><I><U> Some Text Here</B></I></U> *an n 1.<blockquote>..</blockquote> [ ud pк ш к n ] 2.<Q>..</Q> [ i i ud pк ш к n ] 3.<dfn>Definition</dfn>[ к ш n] 4.<samp>Sample Computer Code Text</samp> 5.<kbd>keyboard</kbd> 6.<var>Variable</var> 7.<code>.</code>[ Programming code n ] 8.<sample>Program e Sample Output</sample> 9.<strike> </strike> 10.<big>Text Font х n</big> 11.<small> Text Font х n 12.<TT> i i х </TT> 13.<blinking>Text j к n</blinking> 14.<sub>:H<sub>2</sub>O[Output:HO] 15.<sup>a<sup>2</sup>+b<sub>2</sub>[Output(a+b)] <font>.</font> к к n <font> </font> к e color, face e size Attribute к s i к 23

24 i.color e T u к к ei e T u <font color= PINK >Some Text Here</font> ii.face e T u åu к к к ei e T u e u lх к к mu к <font face= Arial > Some Text Here</font> iii.size e T u åк pк ш к l e к e + - h к n х к åк к p t i di к u <font size=+1>web development</font>[ e ] <font size=-2>web development</font> [ e ] шш akш (HTML Entities): к akш g HTML к х (&,,<o>) å к akш g к х (,µ,α,ủ,µ i ) e kш t к к к к Entity Code p akш n d Entity Code - х o шb µ e Entity Code - х &#956 ; шb μ к Entity Code m o akш х шb " #quot; < < < > > > & & & µ μ μ 24

25 å o к Entity Code m o 25

26 o Image e <img> - o к sn к i к <img> к o i k к e к шш i, e src e T u к Image Location u <img src= image/web.jpg > d eх ch Image Folder e web.jpg eк Image å к к l HTML i к å х i 26

27 i х e i к к o i i к i кш o <img src= > <img> å o к e T u к g å к к.widtho height e T u o eк i к p ш ш к <img> width o height e T u e e pк ш к k <img src= image/web.jpg width= 300 height= 200 > х.align e T u i a s к align Attribute к <img src= html.jpg align= left > k i к align Attribute e m k g к *align= top [ k a s i u к ] *align= middle [ k a s i ] *align= bottom [ k a s i к ]... *align= center [i a s o к nd ] *align= left [ i a s o к ] *align= right [ i a s o к ].Border e T u i к ei e T u к l к к e к e k <img src= faruk.png border= 4 > 27

28 .hspace o vspace e T u g i к k к i ån к t ш к hspace e u m t ш к vspace e T u к <p>use of hspace and vspace Attribute <img src= wp.jpg hspace= 20 vspace= 10 ></p>.alt e T u к к b u i p ш iu i n к х i s eк х, u к х i m к eк o alt attribute к ei к к <img src= joomla.jpg alt= joomla admin panel picture > o h i.gif.jpg.png.tift.xbm.bmp.jpeg i к <a>.</a> o к к kк к an к o <a> </a> к o к o <a> href, title, target attribute к к di pк -i o ek к eк o n к i к e an o n к ek к к.href e T u кш (URL) к ei e T u <a href= >Facebook</a> b u Facebook х, u kк к o p ш к 28

29 х.title e T u i к title attribute к iu к n m к å i o eк <a href = title= A Platform Of Web Design Tutorial >Tutorial</a> b u Tutorial шb х u к A Platform Of Web Design Tutorial к х.target e T u к kк к Open к Window Open к target e T u к e T u к i o u <a href= target= _blank >Facebook</a> e Window Open <a href= target= _self >Facebook</a> e Open i к к i к к к <a href= ><img src= google.jpg ></a> HTML e s к sn u s n s u к <li>.</li> к s к e шш Optional HTML e к к s к m å к к.ordered List: к Serial Number an u s n Ordered List к Ordered List pк ш к <ol>.</ol> e type attribute к к Serial Number к 29

30 <ol type= 1 > <li>html <li>css <li>java <li>php </ol> Output: 1.HTML 2.CSS 3.JAVA 4.JAVA Type= A [A,B,C k n ] Type= a [a,b,c k n ] Type= I [I,II,III.. k n ] Type= i [I,ii,iii k n ] Type= 1 [1,2,3.. k n ; e l] Type= 3 [3,4,5, k n ] Type= C [C,D,E, k n ] х.unordered List: e s к Serial Number к, e n Symbol к <ul> <ul> к Unordered List pк ш к Type Attribute к n Symbol o <ul type= disc > Output: <li>web Design Web Design <li>tutorial Tutorial <li>internet Internet </ul> Type e T u å o di к Circle( ),Square( ) <table>.</table> o u s n g t a <table>.</table> к o к å o к к g n a i p g mr к.<tr>.</tr> [ ei d row к ] х.<td>.</td>[ ei d i к ].<th>.</th>[ ei d o ].<tfoot>.</tfoot>[ ei d к ] 30

31 .<caption>.<caption>[ ei d ш o ] d g шш Optional g к å eк к <html> <head> <title>table</title> </head> <body> <table border= 1 align= center > <caption>student Information <tr> <th>name <th>roll No. <th>phon No. </tr> <tr> <td>faruk <td> <td> </tr> <tr> <td>himu <td> <td> </tr> </table> </body> </html> b u х 31

32 e T u к åкш к n h e T u g - align, width, border, cellspacing, cellpadding e bgcolor m eg å к к.align e T u a s к n align e T u к <table align= left > <table align= right > <table align= center > х.width e T u pшs к width e T u di ei e T u к -.<table width= 60% >[ e kш t pшs b u %]. <table width= 100 >[ e kш t pшs k ] к ut 32

33 .Border e T u o border e T u кnt ( p ) o l border e T u к <table border= 5 >.Cellspacing e T u Cellspacing e T u к к s к l cellspacing e T u к ei k <table cellspacing= 3 >.Cellpadding e T u к к t ш к ei e T u к l e к e k <table cellpading= 2 > <caption> e T u align e T u к к a s caption к l caption u к <caption align= top > <caption align= bottom > <caption align= left > <caption align= right > <tr> e T u <tr> d к ei e T u -bgcolor, align e valign bgcolor: кgu к к <tr bgcolor= Red > align: an к e i ш к <tr align= X > ;X=left(Default),right,center. 33

34 valign: u m e i ш к <tr valign= X > ;X=top, middle(default), bottom <td> o <th>. e T u d i ш к e T u к align, width, height, valign, bgcolor, nowrap, rowspan, clospan. align o valign <tr > i align= justify e valign= baseline a k к bgcolor, width o height- e <tr> o <table> i nowrap e T u a k k å nowrap к e n к <td nowrap > <th nowrap > rowspan e T u eк к g к eк к n <td> o <th> rowspan e T u к g к eк к ch u rowspan e T u к <td rowspan= 2 > <td rowspan= 2 > eх d d к eкt к colspan e T u colspan e rowspan e i colspan к к eк к g к к eк к ch u к colspan e T u к <td colspan= 2 > <td colspan= 2 > 34

35 HTML e iu к i ( n,a g, n, i ) n HTML e Form к h <form>.</form> eкк g n к l к кш m k l g к Text Field, Password Field, Radio button, Check Box, Dropdown List, Text Area, Button, Submit Button eg å eк å к <form> method, action e enctype e T u к e T u g m å к к.method e T u Method e T u к p t к d Method к к - 1.Get Method (<form method= get ></form>) 2.Post Method (<form method= post ></form>) URL e к n Get Method к iu o o к Address х & password= / к к n Post Method к e kш t к s a ш х.action e T u к p к n к p g skp к Action e T u o <form action= registration.php method= post >.Enctype e T u u a к mn kш t Get Method к o e kш t Post Methot o Enctype e T u к o ei e T u d pк к o 35

36 <form method= post action= order.php enctype= text/plain > l å к.text Field iu o o l (eк i k х e l) к n <input> Type= text e T u к ei å o к g e T u к <form> Username:<input= text size= 20 maxlength= 15 value= Your Name Here > </form> *Type= text [ e l k х ] *Size= 20 [ e akш p s l o ] *maxlength= 15 [ e l akш ш i к ] *value= Your Name Here [ k l к l к,e ] х.password Field Password Field k l i Type= password an n e T u k l i <form> Password:<input= password size= 20 maxlength= 15 value= Your Password Here > </form>. к k к k к h к a ш k к n к k к eх eк eк к a ш k к <form> <p>what is your favorite LANGUAGE? <input type= checkbox name= language value= C >C<br> <input type= checkbox name= language value= C++ >C++<br> <input type= checkbox name= language value= Java >Java<br> <input type= checkbox name= language value= Php >Php<br> 36

37 </p> </form>.radio Button eк к a ш к к t eк a ш k к n Radio Button к <form> <p>what is your favorite LANGUAGE? <input type= radio name= language value= C >C<br> <input type= checkbox name= language value= C++ >C++<br> <input type= checkbox name= language value= Java >Java<br> <input type= checkbox name= language value= Php >Php<br> </p> </form>. к n к <form> <input type= submit value= Login > <input type= submit value= Press > </form> eх Login o Press d.i i кo к <input type= image src= button.bmp >.D u s к.d u s к - <form> <p>select Category</p> <select name= Select Category > <option value= Internet >Internet</option> <option value= Computer >Computer</option> <option value= web Design > web Design </option> <option value= Software > Software </option> </form> 37

38 .Text Area iu к к к n Text Area к <form> <p>comment</p> <textarea name= Comment rows= 5 cols= 8 ></textarea> </form> eх rows o cols e Textarea Size к.button Button n m к i кr <form> <input type= button value= Go > </form> HTML-e e å к RED-GREEN-BLUE(RGB) e к n an n HTML-e n eк k к к å к к k n e p n di RRGGBB -eх RR=Red;GG=Green;BB=Blue.e å o k m к к n х к х g m e к o A к F n х к х g k m k A B C D E F t m u Ш å к eк o Background, Font & Tabel -e к 38

39 к.background - e Background e к к i bgcolor e T u к e a i <body> к <body bgcolor= #FF0000 > e kш t кg u к FF( n ch ) e an n ш n k х g к o å к к e kш t m 0 (hex 00) e ch 255 (hex FF) <body bgcolor= rbg(0,255,0) > e å к Combination к кg u n к к к g к m 39

40 40

41 к o кg u к <body bgcolor= BLUE > к g o к m o 41

42 42

43 х. o к <body text= GREEN/#0000FF >. i.<table bgcolor= BROWN >[ кg u ] ii.<table border= 2 bordercolor= >[ ] iii.<tr> <td bgcolor= #AA00CC ><font color= # > </tr>[ o ] 43

44 n к HTML к å к х к p к х к, к s e к к n a ш n к, х eк iu ei n b u o u к p n к <--Your Comment Here--> k o Source Code х å х, <html> u <!doctype> å к e к Doctype Declaration e HTML e к a ш e к k ш к a k к Ш, HTML e к, W3C d nt к i? Doctype Declaration e r <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 5.0//EN > title шb х - akш title an к к <title><p>paragraph Here</p></title> <! > <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> 44

45 45 <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <head> <h1> <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>

46 <audio> <vedio> <soruce> <embed> <datalist> <keygen> <output> <article> <aside> <command> <wbr> <time> <section> <details> <figure> <summary> st i <footer> <header> <figcaption> <mark> <ruby> <rt> <rp> <progress> <nav> <hgroup> <mark> <meter> o n ш a n grt eх HTML 5 e ш eк ш o, å ш к u к 46

47

48 HTML шх, e o s r кr å o i p к g o s i m o

49 49

50 50