HTML

HTMLHypertext Markup Language

http://www.thaiall.com/html/html.htmUpdated : August 23,2012

First webpage<body>lampang</body>

break<body>lampang<br>bangkok<br>tak<br>phuketprayaonan</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>NAN<font color=red face=fixedsys>bangkok</font>TAK</font>BOY</body>

center<body bgcolor=green text=blue>abc<center>defghi</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 Blue16 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><img src=x.jpg><img src=x.gif><img src=x.png></body>

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

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

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

Image in link<body><a href=x.htm><img src=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=0width=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><img src=barl.gif></td><td bgcolor=#9ccfff width=100>lampang</td><td><img src=barr.gif></td></tr></table></body>

Complex table<body bgcolor=white><table cellpadding=0 cellspacing=0 border=0><tr><td><img src=barl.gif></td><td bgcolor=#9ccfff width=100>lampang</td><td><img src=barc.gif></td><td bgcolor=#9ccfff width=100>bangkok</td><td><img src=barc.gif></td><td bgcolor=#9ccfff width=100>nan</td><td><img src=barc.gif></td><td bgcolor=#9ccfff width=100>tak</td><td align=right><img src=barr.gif></td></tr><tr bgcolor=#9ccfff><td colspan=9 height=5></td></tr><tr bgcolor=#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><img src=_tr.jpg></td></tr><tr><td background=_r.jpg></td></tr><tr><td height=11 width=11 background=_b.jpg><img src=_bl.jpg></td><td background=_b.jpg></td><td width=11><img src=_br.jpg></tr></table>file : _b.jpgfile : _bl.jpgfile : _br.jpgfile : _r.jpgfile : _tr.jpgfile : _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;"><img src=x1.jpg></div><div style="position:absolute; left:50px; top:45px; z-index:1;"><img src=x1.jpg></div><div style="position:absolute; left:90px; top:75px; z-index:2;"><img src=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=200direction=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><img src=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>

Detail in tag<html><head><style type="text/css">body {font-family:ms sans serif;color:purple;background-color:black}a:link {color:red;text-decoration:none;font-family:ms sans serif;}a:visited {color:purple;font-family:ms sans serif;}a:hover {color:blue;text-decoration:underline overline;}tr,td {font-size:10px;font-family:ms sans serif;background-color:gray}</style></head><body><table><tr><td>a<td>b</table><a href=http://www.thaiall.com>ไทยออล</a>

Jump or move page<html><head><title>โฆษณเวบ็ไซต์</title><meta http-equiv=content-type content="text/html; charset=windows-874"><meta name=keywords content="promote,public,hits"><meta name=description content="โฆษณ/ประชสมัพนัธเ์วบ็ไซต์"><meta http-equiv=refresh content="0;url=http://thaiall.com/me"></head><body>

ไปหน้โฆษณ

Documents

HTML