Webpage structure: <html> <head> <title>Title of page</title> </head> <body > Hello World! <br> <strong>This text is strong.</strong> </body> </html> tutorial1.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-874"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <META NAME="KEYWORDS" CONTENT="คำสำหรับการค้นหา,keyword1,keyword2"> <TITLE>HTML Tutorial</TITLE> <link rel="stylesheet" href="index.css"> <link rel="icon" href="favicon.ico" type="image/ico"> <link rel="SHORTCUT ICON" href="favicon.ico"> <style type="text/css">p{text-align: left;color: violet;font-family: tahoma}</style> <script src="index.js"></script> <script type="text/javascript">function myfunction(){document.write("สวัสดีครับ!")}</script> </head> <body > <p>แสดงโครงสร้าง webpage</p> <!-- comments --> <script type="text/javascript">document.write("Hello World!")</script> <script type="text/javascript">myfunction()</script> </body> </html> tutorial2.htm

Basic Html Tags:

This is a heading line. h1

This is a heading line. h6



  This is a paragraph.
This is another line in this paragraph.

  This is a second paragraph.
This is another line in this paragraph.

&nbsp; is non-breaking space <h1>This is a heading line. h1</h1> <h6>This is a heading line. h6</h6> <hr align="center" size="3" width="400" > <hr align="center" size="3" width="400" noshade="true"> <hr align="left" size="1" width="50%" color ="blue"> <p>&nbsp;&nbsp;This is a paragraph. <br>This is another line in this paragraph.</p> <p>&nbsp;&nbsp;This is a second paragraph. <br>This is another line in this paragraph.</p> Character&Symbol Entities:
<>&"¢£¥ €§©®×÷± 5¼ 4½ 3¾«»¹ 15²³·µ¦ ´º 37°Ø∑−∗√∞∠∫∴≈ ≠≤≥∪∩⊂⊃⊄⊆⊇⊥∈∏ “ ” ‘ ’†‡•…′″™←↑→↓↔ ↵⌈⌉⌊⌋◊♠♣♥♦ - _ – — ‾ ΩαβγδεθλσφψωΘ ΦŒ‹› &lt;&gt;&amp;&quot;&cent;&pound;&yen; &euro;&sect;&copy;&reg;&times;&divide;&plusmn; 5&frac14; 4&frac12; 3&frac34;&laquo;&raquo;&sup1; 15&sup2;&sup3;&middot;&micro;&brvbar; &acute;&ordm; 37&deg;&Oslash;&sum;&minus;&lowast;&radic;&infin;&ang;&int;&there4;&asymp; &ne;&le;&ge;&cup;&cap;&sub;&sup;&nsub;&sube;&supe;&perp;&isin;&prod; &ldquo; &rdquo; &lsquo; &rsquo;&dagger;&Dagger;&bull;&hellip;&prime;&Prime;&trade;&larr;&uarr;&rarr;&darr;&harr; &crarr;&lceil;&rceil;&lfloor;&rfloor;&loz;&spades;&clubs;&hearts;&diams; - _ &ndash; &mdash; &oline; &Omega;&#945;&beta;&gamma;&delta;&epsilon;&theta;&lambda;&sigma;&phi;&psi;&omega;&Theta; &Phi;&OElig;&lsaquo;&rsaquo; Text Formatting Tags:
bold text strong text emphasized text
big text normal text small text
strikethrough text underlined text italic text
superscripted textnormal textsubscripted text
using FONT Tag. using FONT Tag. using FONT Tag. <b>bold text</b> <strong>strong text</strong> <em>emphasized text</em> <br> <big>big text</big> normal text <small>small text</small><br> <strike>strikethrough text</strike> <u>underlined text</u> <i>italic text</i><br> <sup>superscripted text</sup>normal text<sub>subscripted text</sub><br> <font color="BlueViolet" size="2" face="tahoma">using FONT Tag.</font> <font color="#ff0000" size="3" face="LilyUPC">using FONT Tag.</font> <font color="BlueViolet" size="2" face="tahoma"><b><i><u><s>using FONT Tag.</s></u></i></b></font> Table Tags:
This is a caption[left right top bottom]
THEAD TAG table_bgcolor table_bodercolortr_align
TFOOT TAG tr_bgcolor tr_bordercolor tfoot_align td_align tfoot_align
r1c1 TBODY TAG td_bodercolor r1c2 td_bodercolor r1c3 table_bordercolor
r2c1 colspan=2 frame options: void above below hsides lhs rhs vsides box border r2c3 tr_bordercolor
r3c1 tr_bgcolor r3c2 r3c3 rowspan=2
r4c1 td_bgcolor r4c2 tbody_bgcolor
<div align="center"> <table width="750" border="3" style="font-size:12px;font-family:tahoma;color:violet;" bgcolor=rgb(255,255,0) bordercolorlight="gray" bordercolordark="black" cellpadding="4" cellspacing="6" frame="border"> <caption align="right">This is a caption[left right top bottom]</caption> <thead ><tr align="center" ><td>THEAD TAG table_bgcolor table_bodercolor</td><td ></td><td>tr_align</td></tr></thead> <tfoot align="right"> <tr bgcolor="teal" bordercolor="Fuchsia"> <td>TFOOT TAG tr_bgcolor tr_bordercolor tfoot_align</td> <td align="center">td_align </td> <td>tfoot_align</td> </tr> </tfoot> <tbody bgcolor="honeydew"> <tr style="color:Cyan;"> <td align="center" bordercolor="Fuchsia">r1c1 TBODY TAG td_bodercolor</td> <td bordercolordark="darkorchid" bordercolorlight="darkorange"> <font color="red">r1c2 td_bodercolor</font> </td> <td align="right" >r1c3 table_bordercolor</td> </tr> <tr bordercolorlight="deeppink" bordercolordark="blueviolet"> <td colspan="2" >r2c1 colspan=2 frame options: void above below hsides lhs rhs vsides box border</td> <td>r2c3 tr_bordercolor</td> </tr> <tr bgcolor="PowderBlue"> <td >r3c1 tr_bgcolor</td> <td>r3c2 </td> <td rowspan="2" valign="top" align="right">r3c3 rowspan=2</td> </tr> <tr> <td style="color:black;" bgcolor="greenyellow"><b>r4c1 td_bgcolor</b></td> <td>r4c2 tbody_bgcolor</td> </tr> <tbody> </table> </div>
h1 h2 h3 h4 h5
12345
abcde
<table border="1" width="450" style="font-size:12px;font-family:tahoma; color:violet;"> <thead> <tr bgcolor="gray" > <td align="center">h1</td> <td align="right">h2</td> <td align="right">h3</td> <td>h4</td> <td>h5</td> </tr> </thead> <tbody> <col width="40"align="center"> <colgroup bgcolor="red" span="3" align="right"><col width="40"><col width="80"><col align="left" width="100"> </colgroup> <col bgcolor="green" > <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr> </tbody> </table>
gif corner
white corner

<table border="0" cellpadding="0" cellspacing="0" > <tr style="vertical-align:top;"> <td width="20"><img src="img/tl_corner20.gif" width="20" height="20"></td> <td bgcolor="GreenYellow"></td> <td width="20"><img src="img/tr_corner20.gif" width="20" height="20"></td> </tr> <tr style="vertical-align:center;" bgcolor="yellow"> <td ></td> <td align="center"><span style="font-size:12px;font-family:tahoma; color:violet;">gif corner<br>white corner</span></td> <td></td> </tr> <tr style="vertical-align:bottom;"> <td ><img src="img/bl_corner20.gif" width="20" height="20"></td> <td bgcolor="GreenYellow"></td> <td><img src="img/br_corner20.gif" width="20" height="20"></td> </tr> </table>
gif corner
white corner
2 white corners


<table border="0" cellpadding="0" cellspacing="0" > <tr style="vertical-align:top;"> <td width="20"><img src="img/tl_corner20.gif" width="20" height="20"></td> <td bgcolor="white"></td> <td width="20"><img src="img/tr_corner20.gif" width="20" height="20"></td> </tr> <tr style="vertical-align:center;" bgcolor="white"> <td ></td> <td > <span style="font-size:12px;font-family:tahoma; color:violet;"> gif corner<br>white corner<br>2 white corners<br><br> </span> </td> <td></td> </tr> </table>
Yellow Pages
www.nettkatalogen.no
www.gulex.dk
www.gulex.se
www.gelbex.de
www.teloos.fi
www.teloos.fr
www.teloos.co.uk
www.teloos.at
www.teloos.de

Yellow Pages
www.nettkatalogen.no
www.gulex.dk
www.gulex.se
www.gelbex.de
www.teloos.fi
www.teloos.fr
www.teloos.co.uk
www.teloos.at
www.teloos.de

Yellow Pages
www.nettkatalogen.no
www.gulex.dk
www.gulex.se
www.gelbex.de
www.teloos.fi
www.teloos.fr
www.teloos.co.uk
www.teloos.at
www.teloos.de

<table width="150" bgcolor="green" cellpadding="4" cellspacing="5"border="10"> <tr><th bgcolor="yellow">Yellow Pages</th></tr> <tr bgcolor="white"><td align="center"> <a href="http://www.nettkatalogen.no" target="_blank">www.nettkatalogen.no</a><br /> <a href="http://www.gulex.dk" target="_blank">www.gulex.dk</a><br /> <a href="http://www.gulex.se" target="_blank">www.gulex.se</a><br /> <a href="http://www.gelbex.de" target="_blank">www.gelbex.de</a><br /> <a href="http://www.teloos.fi" target="_blank">www.teloos.fi</a><br /> <a href="http://www.teloos.fr" target="_blank">www.teloos.fr</a><br /> <a href="http://www.teloos.co.uk" target="_blank">www.teloos.co.uk</a><br /> <a href="http://www.teloos.at" target="_blank">www.teloos.at</a><br /> <a href="http://www.teloos.de" target="_blank">www.teloos.de</a> </td></tr></table> <br> <table width="150" bgcolor="green" cellpadding="4" cellspacing="1"border="1"> <tr><th bgcolor="yellow">Yellow Pages</th></tr> <tr bgcolor="white"><td align="center"> <a href="http://www.nettkatalogen.no" target="_blank">www.nettkatalogen.no</a><br /> <a href="http://www.gulex.dk" target="_blank">www.gulex.dk</a><br /> <a href="http://www.gulex.se" target="_blank">www.gulex.se</a><br /> <a href="http://www.gelbex.de" target="_blank">www.gelbex.de</a><br /> <a href="http://www.teloos.fi" target="_blank">www.teloos.fi</a><br /> <a href="http://www.teloos.fr" target="_blank">www.teloos.fr</a><br /> <a href="http://www.teloos.co.uk" target="_blank">www.teloos.co.uk</a><br /> <a href="http://www.teloos.at" target="_blank">www.teloos.at</a><br /> <a href="http://www.teloos.de" target="_blank">www.teloos.de</a> </td></tr></table> <br> <table width="150" bgcolor="green" cellpadding="4" cellspacing="1"border="0"> <tr><th bgcolor="yellow">Yellow Pages</th></tr> <tr bgcolor="white"><td > <a href="http://www.nettkatalogen.no" target="_blank">www.nettkatalogen.no</a><br /> <a href="http://www.gulex.dk" target="_blank">www.gulex.dk</a><br /> <a href="http://www.gulex.se" target="_blank">www.gulex.se</a><br /> <a href="http://www.gelbex.de" target="_blank">www.gelbex.de</a><br /> <a href="http://www.teloos.fi" target="_blank">www.teloos.fi</a><br /> <a href="http://www.teloos.fr" target="_blank">www.teloos.fr</a><br /> <a href="http://www.teloos.co.uk" target="_blank">www.teloos.co.uk</a><br /> <a href="http://www.teloos.at" target="_blank">www.teloos.at</a><br /> <a href="http://www.teloos.de" target="_blank">www.teloos.de</a> </td></tr></table> Ajax Examples freeTemplate XHTML CSS2 Reference CSS Syntax
Color names HTML4.0 JavaScript Reference PHP MySQL Tutorial Dynamic HTML(DHTML)