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

971 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
971
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

การพัฒนาเว็บไซท์ด้วย 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

×