Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

การพัฒนาเว็บไซท์ด้วย HTML

982 views

Published on

การพัฒนาเว็บไซท์ด้วย HTML

Published in: Technology
  • Be the first to comment

  • Be the first to like this

การพัฒนาเว็บไซท์ด้วย HTML

  1. 1. 2 F F HTML Mr.Warawut Khangkhan Twitter: http://twitter.com/awarawutFacebook: http://www.facebook.com/AjWarawut E-Mail: awarawut@hotmail.com Mobile: 083-0698-410
  2. 2. HTML F HTML F HTML F F2 2 F F HTML Mr.Warawut Khangkhan
  3. 3. HTML3 2 F F HTML Mr.Warawut Khangkhan
  4. 4. HTML HTML – HyperText Markup Language F F F F F F F F F F F F F F HTML F F F F F F F4 2 F F HTML Mr.Warawut Khangkhan
  5. 5. F HTML F Static F F F F F F F F F F F F F F F5 2 F F HTML Mr.Warawut Khangkhan
  6. 6. F HTML6 2 F F HTML Mr.Warawut Khangkhan
  7. 7. F HTML F HTML F F2 F F F F F F < > < > F (Tag)”7 2 F F HTML Mr.Warawut Khangkhan
  8. 8. (Tag) F HTML less- than bracket ( < ) greater-than bracket ( > ) Tag HTML F F 2 Tag - Tag F F F <br>, <hr> Tag / - Tag F Tag Tag Tag slash ( / ) F Tag F <b> … </b>, <p> … </p>8 2 F F HTML Mr.Warawut Khangkhan
  9. 9. Attribute Attributes F Tag F F < > F Tag F Tag HTML F Attribute F F F Attribute F 1 Attribute F F F F F Attributes Tag <p align=“left|right|center|justify”> … </p>9 2 F F HTML Mr.Warawut Khangkhan
  10. 10. F F HTML <html> <head> Tag F Head Section </head> <body> Tag F Body Section </body> </html>10 2 F F HTML Mr.Warawut Khangkhan
  11. 11. F (Head Section) <head> <title> F </title> <meta http-equiv=“content-type” content=“text/html; charset=tis-620”> <meta name=“author” content=“author-name”> <meta name=“keywords” content=“keyword-1, keyword-2”> </head>11 2 F F HTML Mr.Warawut Khangkhan
  12. 12. F (Head Section)12 2 F F HTML Mr.Warawut Khangkhan
  13. 13. F (Body Section) F F F F Tag F F F F , , , F F13 2 F F HTML Mr.Warawut Khangkhan
  14. 14. F14 2 F F HTML Mr.Warawut Khangkhan
  15. 15. F F F F F F F F F F F F F HTML (Tag) F Tag <FONT> Tag15 2 F F HTML Mr.Warawut Khangkhan
  16. 16. Tag <FONT> <FONT FACE = “…” SIZE = “…” COLOR = “…”> F </FONT> F F FACE F F F FACE = “FreesiaUPC” SIZE F FF SIZE = “24” COLOR F FF COLOR = “#FF0000”16 2 F F HTML Mr.Warawut Khangkhan
  17. 17. F F <FONT FACE = “AngsanaUPC” SIZE = “14” COLOR = “#FF0000”> AngsanaUPC 14 </FONT> <BR> <FONT FACE = “BrowalliaUPC” SIZE = “24” COLOR = “#00FF00”> BrowalliaUPC 24 </FONT>17 2 F F HTML Mr.Warawut Khangkhan
  18. 18. Tag F <B> (Bold) <B> F </B> <I> (Italic) <I> F </I> <U> F F (Underline) <U> F </U> <S> F F <S> F </S> (Strikethrough) <SUB> F (Subscript) <SUB> F </SUB>18 2 F F HTML Mr.Warawut Khangkhan
  19. 19. Tag ( F ) F <SUP> (Superscript) <SUP> F </SUP> <BIG> <BIG> F </BIG> (Big) <SMALL> <SMALL> F (Small) </SMALL><MARQUEE> F <MARQUEE> F F F IE </MARQUEE> F19 2 F F HTML Mr.Warawut Khangkhan
  20. 20. F <FONT> <B> </B> <BR> <I> </I> <BR> <U> </U> <BR> <HR> <MARQUEE> </MARQUEE> <BR> <CENTER> </CENTER> </FONT>20 2 F F HTML Mr.Warawut Khangkhan
  21. 21. F Tag <IMG> F F F <IMG SRC = “…” ALIGN = “…” WIDTH = “…” HEIGHT = “…” BORDER = “…” HSPACE = “…” VSPACE = “…”>21 2 F F HTML Mr.Warawut Khangkhan
  22. 22. Tag <IMG> F F SRC F F SRC = “.flower.jpg” ALIGN F F ALIGN = “left”WIDTH F F F WIDTH = “640”HEIGHT F F HEIGHT = “480”BORDER F F F BORDER = “2”HSPACE F F F F F HSPACE = “50”VSPACE F F F F VSPACE = “50” F22 2 F F HTML Mr.Warawut Khangkhan
  23. 23. F F Tag <IMG> tag <br> <img src=“hotmail.jpg”> <br> tag23 2 F F HTML Mr.Warawut Khangkhan
  24. 24. HTML24 2 F F HTML Mr.Warawut Khangkhan
  25. 25. HTML F HTML F HTML F <A> F <A HREF=“…” TITLE=“…”> … </A> Tag <A> and </A> F F Attribute HREF F F F HTML Attribute TITLE F F F25 2 F F HTML Mr.Warawut Khangkhan
  26. 26. HTML ( F ) F “hypertext” Ex. <a href=http://www.hotmail.com title=“hotmail”>Go Hotmail</a> F <img> F <A> </A> F F F “hypermedia” Ex. <a href=“http://www.hotmail.com title=“hotmail”><img src=“hotmail.jpg”></a>26 2 F F HTML Mr.Warawut Khangkhan
  27. 27. F27 2 F F HTML Mr.Warawut Khangkhan
  28. 28. F F F F F 1. 2. F28 2 F F HTML Mr.Warawut Khangkhan
  29. 29. F <OL> .. </OL> F Ordered List F F 2 <LH> <LI> F29 2 F F HTML Mr.Warawut Khangkhan
  30. 30. F F FF F <OL TYPE=……….> F F <LH> <LI> <LI> F F <LI> F ………………. </OL> F F F30 2 F F HTML Mr.Warawut Khangkhan
  31. 31. Attribute Tag <OL> START F F F F F START=3 3 F SKIP F F F VALUE F F F F F F TYPE F F F TYPE=131 2 F F HTML Mr.Warawut Khangkhan
  32. 32. TYPE F TYPE Format Example TYPE=1 1, 2, 3, … TYPE=A F F A, B, C, … TYPE=a F a, b, c, … TYPE=I F I, II, III, … TYPE=i i, ii, iii, …32 2 F F HTML Mr.Warawut Khangkhan
  33. 33. <font face=“CodiaUPC” size=“2” color=“blue”> <ol> <lh><i> </i> <li>BASIC <li>C <li>FORTRAN <li>HTML <br><b> ...</b> </ol></font> <font face=“CodiaUPC” size=“2” color=“green”> “ ” <ol type=“A”> <lh> <li> html <li> FORTRAN <li> BASIC <li> C </ol></font>33 2 F F HTML Mr.Warawut Khangkhan
  34. 34. F F <UL> </UL> F Unordered List F F 2 <LH> <LI> F34 2 F F HTML Mr.Warawut Khangkhan
  35. 35. TYPE F F TYPE Format Example TYPE=circle F F TYPE=square F TYPE=disc F35 2 F F HTML Mr.Warawut Khangkhan
  36. 36. <UL TYPE=“square”> <LH> <LI> <UL TYPE=“circle”> <LI>input <LI>process <LI>output </UL> <LI> <UL TYPE=“circle”> <LI> <LI> <LI> <LI> </UL> <LI> <UL TYPE=“circle”> <LI> ……………………….. </UL> </UL>36 2 F F HTML Mr.Warawut Khangkhan
  37. 37. F37 2 F F HTML Mr.Warawut Khangkhan
  38. 38. F F <TABLE> F F F (F F ) F (F F )38 2 F F HTML Mr.Warawut Khangkhan
  39. 39. F <TABLE> <TABLE BORDER=“ F ” BORDERCOLOR=“ F ” ALIGN=“ F ”> <TR> <TH> </TH> <TD> F </TD> <TD> F </TD> </TR> <TR> <TD WIDTH=“..” HEIGHT=“..”>…</TD> <TD ALIGN=“”>…</TD> </TR> </TABLE>39 2 F F HTML Mr.Warawut Khangkhan
  40. 40. F Tag F F <TABLE> … </TABLE> <TR> … </TR> F F F <TH> … </TH> F F <TD> … </TD> F F F F F40 2 F F HTML Mr.Warawut Khangkhan
  41. 41. F Attribute F F BORDER F BORDERCOLOR F ALIGN F WIDTH F F HEIGHT F41 2 F F HTML Mr.Warawut Khangkhan
  42. 42. <TABLE BORDER=“1”> <TR ALIGN=“center” BGCOLOR=“#DDDDDD”> <TH> - </TH> <TH> </TH> </TR> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>42 2 F F HTML Mr.Warawut Khangkhan

×