| เอชทีเอ็มแอล (HTML Writing) | |
| Teaching by Example
HTML หรือ HyperText Markup Language [ wikipedia.org] | |
บทที่ 1 : ความรู้เบื้องต้น (Introduction to HTML)
| Name | HTML code | Question?
| a01
| <body> lampang </body> - ผลลัพธ์ใน ie คืออะไร | - แฟ้มนี้มีขนาดกี่ byte - ลดจำนวนบรรทัดของ source code ได้ไหม a02
| <body> lampang<br>bangkok<br>tak<br> phuket prayao nan </body> - ผลลัพธ์จากโปรแกรมนี้ มีกี่บรรทัด | - คำว่า br ย่อมาจากอะไร a03
| <body> <b>lampang</b> <i>bangkok</i> <u>nan</u> </body> - tag อะไรใช้แทนตัวเข้ม | - tag อะไรใช้แทนตัวเอียง a04
| <html> <head> <title>love</title> </head> <body> lampang </body> </html> - พบคำว่า love ในส่วนไหนของ ie | - ส่วน head กับ body ต่างกันอย่างไร - ลดจำนวนบรรทัดของ source code ได้ไหม - ไม่มี html หรือ head ได้ไหม a05
| <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> - ตัวอักษรไหนมีลักษณะอย่างไร | - e กับ f ต่างกันอย่างไร - ทั้ง 3 แบบรวมกันจะเขียนอย่างไร a06
| <body> lampang <hr> bangkok <hr width=50%> nan <hr color=red> prayao <hr size=100 color=blue> </body> - hr ทำหน้าที่อะไร (Horizontal) | - ต.ย.นี้ properties ของ hr มีกี่แบบ a07
| <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> - คำใดน่าจะมีสีดำบ้าง | - คำใดมีขนาดใหญ่ที่สุด - คำใดมีสีน้ำเงิน a08
| <body> <font color=blue>N A N <font color=red face=fixedsys>bangkok</font> TAK </font> BOY </body> - คำใด มีสีใด | - ผลลัพธ์ใน ie มีกี่บรรทัด a09
| <body bgcolor=green text=blue> abc <center> def ghi </center> jkl </body> - properties ของ body มีอะไรบ้าง | - abc มีสีใด - คำใดชิดซ้าย ขวา หรือกลาง | |||||||||||
บทที่ 2 : ลิงค์ และสีแบบ RGB (Link and RGB color)
| Name | HTML code | Question?
| b01
| <body> <a href=a01.htm>a01.htm</a> </body> - link คืออะไร | - การเขียน link มี 3 ส่วน อะไรบ้าง - สิ่งที่เห็นใน ie คืออะไร b02
| <body bgcolor=green text=blue link=yellow alink=red vlink=black> <a href=a01.htm>a01.htm</a> </body> - properties ของ body มีอะไรบ้าง | - ตัวที่ถูกเลือกอยู่จะแดง ส่วนที่เคยคลิ๊กจะสีอะไร - ใน ie มี link ให้เลือกกี่ link b03
| <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> - ใน ie มี link ให้เลือกกี่ link | - ถ้า click ไป link oho.htm จะเกิดอะไรขึ้น - link ทั้งหมดอยู่บรรทัดเดียวกัน ถ้าแยกบรรทัด ทำอย่างไร b04
| <body topmargin=0 leftmargin=0> <a href=a01.htm>a01.htm</a> </body> - topmargin คืออะไร | - leftmargin คืออะไร - กำหนด properties อื่นเพิ่มได้ไหม - แฟ้มของเราที่ link ชื่ออะไร b05
| <body> <a href=a01.htm>a01.htm</a> <a href=http://www.lampang.go.th>http://www.lampang.go.th</a> <a href=http://www.lampang.go.th>จังหวัดลำปาง</a> </body> - เว็บเพจนี้มี link กี่ link | - link ของเรากี่ link ของคนอื่นกี่ link b06
| <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> - link ของเรากี่ link ของคนอื่นกี่ link | - มี link เข้าโฮมเพจกี่ link และเว็บเพจ กี่ link b07
| <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> - สีแดง เลขฐาน 16 คืออะไร | - #ffdddd คือ สีอะไร - #ddffdd คือ สีอะไร - #0000ff มีค่าสีเท่ากับ blue หรือไม่ | |||||||||
บทที่ 3 : ภาพ และภาพเป็นลิงค์ (Image & Image Link)
| Name | HTML code | Question?
| c01
| <body> <img src=x.jpg> <img src=x.gif> <img src=x.png> </body> - ภาพของเราชื่ออะไร | - ดูขนาดภาพนี้ได้อย่างไรใน ie - image sample of .gif [  ] [  ] [  ] - แนะนำเว็บไซต์ : iconbazaar.com c02
| <body> <img src=http://www.thaiall.com/me/picme.jpg> </body> - ภาพของคนอื่นชื่ออะไร | - ภาพนี้มีขนาดเท่าใด - image sample of .jpg 
c03
| <body> <img src=x1.gif width=150 height=150> </body> - ภาพนี้มีขนาดกว้างยาวเท่าใด | - image sample of .gif 
c04
| <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> - ถ้าออกทั้ง 6 ภาพ เป็นไปได้หรือไม่ | - ควรเขียน address ของภาพนี้แบบใด c05
| <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> - แต่ละภาพ click แล้วไปไหน | - ถ้าไม่ให้ภาพมีขอบของ link ต้องทำอย่างไร | |||||||
บทที่ 4 : ตารางเบื้องต้น (Introduction to table)
| Name | HTML code | Question?
| d01
| <body> <table> <td>abc</td> </table> </body> - ดูผลใน ie เห็นตารางหรือไม่ | - ถ้ารวม code เป็นบรรทัดเดียว จะให้ผลใน ie ต่างกันหรือไม่ d02
| <body> <table bgcolor=#ddffdd> <td>lampang</td> <td>bangkok</td> </table> </body> - พื้นตารางเป็นสีอะไร | - ผลลัพธ์ใน ie มีกี่บรรทัด - ถ้าต้องการให้พื้นตาราง และพื้น body สีเดียวกัน จะทำอย่างไร - ผลลัพธ์ใน ie มีกี่ cell d03
| <body> <table border=1 width=80% bgcolor=yellow align=center> <td>lampang</td> <td>bangkok</td> <td>nan</td> </table> </body> - properties ของตารางมีอะไรบ้าง | - ผลลัพธ์ใน ie มีกี่ cell d04
| <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> - properties ของตารางมีอะไรบ้าง | - ผลลัพธ์ใน ie มีกี่ cell - ผลลัพธ์ใน ie มีกี่ row หรือกี่บรรทัด - ทำให้ข้อมูลมี 6 cell ใน 1 row ต้องทำอย่างไร - td ต่างกับ tr อย่างไร d05
| <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> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - ข้อมูลนี้มี 1 row ให้ copy เพิ่ม รวมเป็น 3 row d06
| <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> - cell ใดกว้างที่สุด | - ถ้าลดความกว้างของ ie ความกว้างแต่ละ cell จะเป็นอย่างไร - ถ้าลดความกว้างของ display screen ความกว้างแต่ละ cell จะเป็นอย่างไร d07
| <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> - left กับ right ต่างกันอย่างไร | - align ต่างกับ valign อย่างไร d08
| <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> - ตารางใน ie มีกี่ตาราง | - แต่ละตารางมีกี่ cell - ผลลัพธ์ใน ie จะเป็นอย่างไร d09
| <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> - ตารางซ้อนตาราง คืออะไร | - ผลลัพธ์ใน ie จะเป็นอย่างไร - มีตารางหลัก และตารางย่อย กี่ตาราง - ถ้าเพิ่มตารางย่อย จะเขียนอย่างไร d10
| <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> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - แต่ละ properties ของ table หมายถึงอะไร - หมายถึงอะไร d11
| <body> <table background=x1.gif width=400 height=400> <tr><td>lampang<br>bangkok</td></tr> </table> </body> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - background หมายถึงอะไร - image sample of x1.gif
| |||||||||||||
บทที่ 5 : ตารางที่ซับซ้อน (Complex table)
| Name | HTML code | Question?
| e01
| <body> <table border=1 width=200> <tr><td>a</td><td>b</td></tr> <tr><td colspan=2>c</td></tr> </table> </body> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - colspan หมายถึงอะไร e02
| <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> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - rowspan หมายถึงอะไร e03
| <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> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - [  ] [  ]
e04
| <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> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - สร้างเมนูแบบ tab ผลนี้มีกี่ tab ให้เลือก - bar แต่ละแท่งสูงกี่ pixels - [ ] [  ] [ ]
e05
| <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=barcl.gif></td> <td bgcolor=#00309c width=100> <font color=white>bangkok</font> </td> <td><img src=barcr.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=#00309c><td colspan=9 height=5></td></tr> <tr bgcolor=#00309c><td colspan=9 height=400></td></tr> </table> </body> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - สร้างเมนูแบบ tab ผลนี้มีกี่ tab ให้เลือก - สี #00309c และ #9ccfff ใครเข้มกว่ากัน - [  ] [  ]
e06
| <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> - ผลลัพธ์ใน ie จะเป็นอย่างไร | - ตารางหลังนี้ถูกแบ่งเป็นกี่ส่วน - ถ้าเพิ่มตัวเลือกตัวที่ 4 ต้องทำอย่างไร e07
| <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.jpg file : _bl.jpg file : _br.jpg file : _r.jpg file : _tr.jpg file : _elephant.jpg ตัวอย่างผลลัพธ์ |
| ||||||||||||||||
บทที่ 6 : เลเยอร์ (Layer) และมาควี (Marquee)
| Name | HTML code | Question?
| f01
| <body> <div align=right> abc </div> </body> - คำสั่ง div คืออะไร | - ผลลัพธ์ใน ie จะเป็นอย่างไร f02
| <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> - ตัวอักษรอะไร ถูกแสดงใน ie | - ผลลัพธ์ใน ie จะเป็นอย่างไร f03
| <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> - ภาพใดอยู่บนสุด และมีทั้งหมดกี่ภาพ | - ผลลัพธ์ใน ie จะเป็นอย่างไร f04
| <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> - อักษร a แต่ละสี อยู่ตำแหน่งใด | - ผลลัพธ์ใน ie จะเป็นอย่างไร f05
| <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> - marquee คืออะไร | - marquee นี้มี properties กี่ตัว - ผลลัพธ์ใน ie จะเป็นอย่างไร | |||||||
บทที่ 7 : มัลติมีเดีย (Multimedia)
| Name | HTML code | Question?
| g01
| <body> <embed src="lesson0201.swf" width="100" height="80"> </embed> </body> - .swf คืออะไร สร้างด้วยโปรแกรมใด | - ผลลัพธ์ใน ie จะเป็นอย่างไร - http://www.thaiall.com/flash - lesson0201.swf g02
| <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> - .class คืออะไร สร้างด้วยโปรแกรมใด | - ผลลัพธ์ใน ie จะเป็นอย่างไร - http://www.thaiall.com/java g03
| <body> <img src=banner.gif> </body> - .gif คืออะไร สร้างด้วยโปรแกรมใด | - ผลลัพธ์ใน ie จะเป็นอย่างไร - http://www.thaiall.com/gifcon 
| |||||
บทที่ 8 : CSS(Cascading Style Sheets) และ Meta Tag
| Name | HTML code | Question?
| h01
|
<html><head>
<style type="text/css">
body {font-family:"microsoft 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>
- ผลลัพธ์ใน ie จะเป็นอย่างไร | |||||||||||||
