520 likes | 720 Views
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>
E N D
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> <u>nan</u> </body>
Head and Body <html> <head> <title>love</title> </head> <body> lampang </body> </html>
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>
Horizontal Line <body> lampang <hr> bangkok <hr width=50%> nan <hr color=red> prayao <hr size=100 color=blue> </body>
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>
Font in font <body> <font color=blue>N A N <font color=red face=fixedsys>bangkok</font> TAK </font> BOY </body>
center <body bgcolor=green text=blue> abc <center> def ghi </center> jkl </body>
Link <body> <a href=a01.htm>a01.htm</a> </body>
Body properties <body bgcolor=green text=blue link=yellow alink=red vlink=black> <a href=a01.htm>a01.htm</a> </body>
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>
No space on top <body topmargin=0 leftmargin=0> <a href=a01.htm>a01.htm</a> </body>
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>
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>
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
Local image <body> <imgsrc=x.jpg> <imgsrc=x.gif> <imgsrc=x.png> </body>
External image <body> <imgsrc=http://www.thaiall.com/me/picme.jpg> </body>
Size of image <body> <img src=x1.gif width=150 height=150> </body>
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>
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>
Table have one cell <body> <table> <td>abc</td> </table> </body>
Table have 2 cells <body> <table bgcolor=#ddffdd> <td>lampang</td> <td>bangkok</td> </table> </body>
Properties of table <body> <table border=1 width=80% bgcolor=yellow align=center> <td>lampang</td> <td>bangkok</td> <td>nan</td> </table> </body>
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>
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>
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>
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>
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>
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>
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> </td> <td width=200 height=200 bgcolor=yellow> </td> </tr> <tr> <td width=200 bgcolor=black> </td> <td width=200 bgcolor=red> </td> </tr> </table> </body>
Image of table <body> <table background=x1.gif width=400 height=400> <tr><td>lampang<br>bangkok</td></tr> </table> </body>
colspan <body> <table border=1 width=200> <tr><td>a</td><td>b</td></tr> <tr><td colspan=2>c</td></tr> </table> </body>
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>
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>
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>
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>
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
Divide <body> <div align=right> abc </div> </body>
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>
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>
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>
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>
Flash <body> <embed src="lesson0201.swf" width="100" height="80"> </embed> </body>
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>
Gif animation <body> <imgsrc=banner.gif> </body>
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>
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>
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>