1 / 52

HTML

HTML. Hypertext Markup Language http://www.thaiall.com/html/html.htm Updated : August 23,2012. First webpage. <body> lampang </body>. break. < body> lampang < br > bangkok < br > tak < br > phuket prayao nan </body>. Bold Italic Underline. <body> <b>lampang</b> <i>bangkok</i>

moana
Download Presentation

HTML

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. HTML Hypertext Markup Language http://www.thaiall.com/html/html.htm Updated : August 23,2012

  2. First webpage <body> lampang </body>

  3. break <body> lampang<br>bangkok<br>tak<br> phuket prayao nan </body>

  4. Bold Italic Underline <body> <b>lampang</b> <i>bangkok</i> <u>nan</u> </body>

  5. Head and Body <html> <head> <title>love</title> </head> <body> lampang </body> </html>

  6. Tag in Tag <html><head><title>love</title></head> <body> <b>a</b> <i>b</i> <u>c</u> <u><b>d</b></u> <u><b>e</b>f</u> </body> </html>

  7. Horizontal Line <body> lampang <hr> bangkok <hr width=50%> nan <hr color=red> prayao <hr size=100 color=blue> </body>

  8. Font <body> <font color=yellow face=cordiaupc>tak</font> <font color=blue>lampang <font color=red size=6 face=fixedsys>nan</font> romeo </font> bangkok </body>

  9. Font in font <body> <font color=blue>N A N <font color=red face=fixedsys>bangkok</font> TAK </font> BOY </body>

  10. center <body bgcolor=green text=blue> abc <center> def ghi </center> jkl </body>

  11. Link <body> <a href=a01.htm>a01.htm</a> </body>

  12. Body properties <body bgcolor=green text=blue link=yellow alink=red vlink=black> <a href=a01.htm>a01.htm</a> </body>

  13. Many link <body bgcolor=green text=blue link=yellow alink=red vlink=black> <a href=a01.htm>a01.htm</a> <a href=a02.htm>a02.htm</a> <a href=a03.htm>a03.htm</a> <a href=oho.htm>oho.htm</a> </body>

  14. No space on top <body topmargin=0 leftmargin=0> <a href=a01.htm>a01.htm</a> </body>

  15. Internal & External Link <body> <a href=a01.htm>a01.htm</a> <a href=http://www.lampang.go.th>lampang.go.th</a> <a href=http://www.lampang.go.th>จังหวัดลำปาง</a> </body>

  16. External link & webpage link <body> <a href=http://www.lampang.go.th>จังหวัดลำปาง</a> <a href=http://www.thaiall.com>เว็บไซต์ไทยออล</a> <a href=http://www.thaiall.com/html/indexo.html>สอน html</a> </body>

  17. Color <body> Red Green Blue 16 Million (256 * 256 * 256) <font color=#ff0000>red</font> <font color=#00ff00>green</font> <font color=#0000ff>blue</font> <font color=#ffff00>yellow</font> <font color=#000000>black</font> <font color=#ffffff>white</font> <font color=#dddddd>gray</font> </body> http://www.thaiall.com/learn/htmcolor.htm

  18. Local image <body> <imgsrc=x.jpg> <imgsrc=x.gif> <imgsrc=x.png> </body>

  19. External image <body> <imgsrc=http://www.thaiall.com/me/picme.jpg> </body>

  20. Size of image <body> <img src=x1.gif width=150 height=150> </body>

  21. Image refer <body> <imgsrc=x.gif> <imgsrc=c:\x.gif> <imgsrc=http://127.0.0.1/x.gif> <imgsrc=http://192.168.1.55/x.gif> <imgsrc=http://202.29.78.1/x.gif> <imgsrc=http://www.thaiall.com/x.gif> </body>

  22. Image in link <body> <a href=x.htm><imgsrc=x.gif></a> <a href=http://www.thaiall.com><img src=y.gif></a> <a href=z.htm><img src=z.jpg border=0></a> </body>

  23. Table have one cell <body> <table> <td>abc</td> </table> </body>

  24. Table have 2 cells <body> <table bgcolor=#ddffdd> <td>lampang</td> <td>bangkok</td> </table> </body>

  25. Properties of table <body> <table border=1 width=80% bgcolor=yellow align=center> <td>lampang</td> <td>bangkok</td> <td>nan</td> </table> </body>

  26. Table have 2 rows <body> <table border=1> <tr> <td>lampang</td> <td>bangkok</td> <td>nan</td> </tr> <tr> <td>boy</td> <td>girl</td> <td>baby</td> </tr> </table> </body>

  27. Size of cell <body> <table border=1 width=50% align=right> <tr> <td bgcolor=blue width=25%>lampang</td> <td bgcolor=yellow width=25%>bangkok</td> <td bgcolor=red width=50%>nan</td> </tr> </table> </body>

  28. Properties in cell <body> <table border=1 width=100%> <tr> <td align=left width=100>a</td> <td align=right width=200>bc</td> <td align=center>def</td> </tr> </table> </body>

  29. Properties in cell and more than one line <body> <table border=1 width=100%> <tr> <td align=left>a<br>b<br>c<br>d</td> <td valign=top>e</td> <td valign=bottom align=right>f</td> </tr> </table> </body>

  30. Two table <body> <table border=1 width=100%> <tr><td>dog</td></tr> </table> <table border=5 width=300><tr> <td align=right>cat</td> <td align=center>rat</td> </tr></table> </body>

  31. Table in table <body> <table border=1 width=100%> <tr><td>dog</td></tr> <tr><td bgcolor=yellow> jar <table border=5 width=300 align=right><tr> <td align=right>cat</td> <td align=center>rat</td> </tr></table> can </td></tr> </table> </body>

  32. Color with table <body> <table border=0 cellpadding=0 cellspacing=0 width=400 height=400 align=center> <tr> <td width=200 height=200 bgcolor=blue>&nbsp;</td> <td width=200 height=200 bgcolor=yellow>&nbsp;</td> </tr> <tr> <td width=200 bgcolor=black>&nbsp;</td> <td width=200 bgcolor=red>&nbsp;</td> </tr> </table> </body>

  33. Image of table <body> <table background=x1.gif width=400 height=400> <tr><td>lampang<br>bangkok</td></tr> </table> </body>

  34. colspan <body> <table border=1 width=200> <tr><td>a</td><td>b</td></tr> <tr><td colspan=2>c</td></tr> </table> </body>

  35. rowspan <body> <table border=1 width=200> <tr><td>a</td><td rowspan=2>b</td><td>c</td></tr> <tr><td>d</td><td>e</td></tr> </table> </body>

  36. Image in cell <body bgcolor=white> <table cellpadding=0 cellspacing=0 border=0> <tr> <td><imgsrc=barl.gif></td> <td bgcolor=#9ccfff width=100>lampang</td> <td><imgsrc=barr.gif></td> </tr> </table> </body>

  37. Complex table <body bgcolor=white> <table cellpadding=0 cellspacing=0 border=0> <tr> <td><imgsrc=barl.gif></td> <td bgcolor=#9ccfff width=100>lampang</td> <td><imgsrc=barc.gif></td> <td bgcolor=#9ccfff width=100>bangkok</td> <td><imgsrc=barc.gif></td> <td bgcolor=#9ccfff width=100>nan</td> <td><imgsrc=barc.gif></td> <td bgcolor=#9ccfff width=100>tak</td> <td align=right><imgsrc=barr.gif></td> </tr> <trbgcolor=#9ccfff><td colspan=9 height=5></td></tr> <trbgcolor=#9ccfff><td colspan=9 height=400></td></tr> </table> </body>

  38. cellspacing <body bgcolor=white> <table width=600 height=300 bgcolor=red> <tr><td width=150 bgcolor=#800000 valign=top align=center> <table width=120 cellspacing=3> <tr><td bgcolor=red>รับสินค้า</td></tr> <tr><td bgcolor=red>ขายสินค้า</td></tr> <tr><td bgcolor=red>ส่งสินค้า</td></tr> </table> </td><td valign=top bgcolor=white> ยินดีต้อนรับ </td></tr> </table> </body>

  39. Design of table (firefox : ok) <table cellpadding=0 cellspacing=0 border=0> <tr><td rowspan=2 colspan=2 bgcolor=gray> <a href=x.htm><img src=_elephant.jpg border=0></a></td> <td valign=top background=_r.jpg><imgsrc=_tr.jpg></td></tr> <tr><td background=_r.jpg></td></tr><tr> <td height=11 width=11 background=_b.jpg><imgsrc=_bl.jpg></td> <td background=_b.jpg></td><td width=11><imgsrc=_br.jpg></tr> </table> file : _b.jpg file : _bl.jpg file : _br.jpg file : _r.jpg file : _tr.jpg file : _elephant.jpg

  40. Divide <body> <div align=right> abc </div> </body>

  41. Absolute <body> <div style="position:absolute; left:10px; top:15px;"> <font color=black size=6 face=impact>abc</font> </div> <div style="position:absolute; left:13px; top:18px;"> <font color=red size=6 face=impact>abc</font> </div> </body>

  42. Sequence of layer <body> <div style="position:absolute; left:10px; top:15px; z-index:3;"> <imgsrc=x1.jpg> </div> <div style="position:absolute; left:50px; top:45px; z-index:1;"> <imgsrc=x1.jpg> </div> <div style="position:absolute; left:90px; top:75px; z-index:2;"> <imgsrc=x1.jpg> </div> </body>

  43. Layers <body> <div style="position:absolute; left:10px; top:15px; width:50px; height:50px;"> <font color=red size=6>a b c d e f g h i j k l m</font> </div> <div style="position:absolute; left:10px; top:45px; width:100px; height:100px;"> <font color=green size=6>a b c d e f g h i j k l m</font> </div> <div style="position:absolute; left:10px; top:75px; width:150px; height:150px;"> <font color=blue size=6>a b c d e f g h i j k l m</font> </div> </body>

  44. Marquee <body> <marquee width=72 height=300 scrolldelay=200 direction=up behavior=alternate bgcolor=yellow loop=3> a b c d e f g h i j k l m n o p q r s t u v w x y z </marquee> </body>

  45. Flash <body> <embed src="lesson0201.swf" width="100" height="80"> </embed> </body>

  46. Applet <body> <applet code="AnimText.class" width=600 height=50> <param name=text value="Welcome to this homepage"> <param name=fontsize value="36"> <param name=sleeptime value="100"> </applet> </body>

  47. Gif animation <body> <imgsrc=banner.gif> </body>

  48. Type of CSS <style type="text/css"> .c1 {color:#00ff00;} p#c2 {color:#ff0000;} p.c3 {color:#0000ff;} </style> <body> <p class="c1">a</p> <p id="c2">b</p> <p class="c3">c</p>

  49. 2 type of CSS <html><head> <style type="text/css"> .burin {color:white;background-color:black} p.batman {color:yellow;background-color:green} </style> </head><body> <table> <tr><td class=burin>a <tr><td class=batman>b </table> <p class=batman>c<br>d</p>

  50. CSS Using <html><head> <style type="text/css"> body {font-family:"ms sans serif";color:blue;background-color:pink} td {font-size:20px;font-family:arial;color:red;background-color:yellow} </style> </head><body>Hello <table><td> <a href=http://www.w3.org/Style/Examples/011/firstcss.en.html>help1</a> <a href=http://www.w3schools.com/css/css_syntax.asp>help2</a> </td></table>

More Related