เอชทีเอ็มแอล (HTML Writing)

ปรับปรุง : 2549-08-14 (เตรียมสอน 12 ชม.)
สารบัญ
1ความรู้เบื้องต้น1-2
2ลิงค์ และสีแบบ RGB
3ภาพ และภาพเป็นลิงค์
4ตารางเบื้องต้น3-4
5ตารางที่ซับซ้อน
6เลเยอร์ และมาควี5-6
7เรียกใช้มัลติมีเดีย
8การเขียน CSS7
9การเขียน Meta Tag
10การเขียนจาวาสคริปต์8-9
11การใช้งานจาวาสคริปต์10
12กราฟฟิกเบื้องต้น
- Paint
- IrfanView
- PhotoShop
11-12
Teaching by Example
HTML หรือ HyperText Markup Language [ wikipedia.org]
เอชทีเอ็มแอล (HTML = HyperText Markup Language) คือ ภาษาคอมพิวเตอร์ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจที่เรียกดูผ่านทางเว็บเบราว์เซอร์ (Web Browser) เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) ในปัจจุบัน HTML ล่าสุดคือ รุ่น 4.01 เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน W3C ผลักดันรูปแบบ HTML แบบใหม่ที่เรียกว่า XHTML รุ่นแรกคือ 1.0 ประกาศใช้ 26 ม.ค.2543 มีโครงสร้างเป็นแบบ XML (eXtensible Markup Language) และคล้ายกับภาษา HTML แต่มีความเข้มงวดกว่า สำหรับรุ่นที่สอง คือ 1.1 ถูกยกร่าง 16 กุมภาพันธ์ 2550
+ XHTML 1.0 Strict คือ การแปลง HTML 4.01 ไปอยู่ในรูป XML
+ XHTML 1.0 Transitional คือ การรวม XHTML 1.0 Strict เข้ากับ HTML แบบเก่า
   เช่น <center>, <u>, <strike> และ <applet> เพื่อให้ใช้งานกับเว็บเพจที่ยังใช้ Tag HTML แบบเก่า
+ XHTML 1.0 Frameset คือ XHTML 1.0 Strict ที่ใช้คำสั่งเฟรมของ HTML ได้
บทที่ 1 : ความรู้เบื้องต้น (Introduction to HTML)
NameHTML codeQuestion?
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)
NameHTML codeQuestion?
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)
NameHTML codeQuestion?
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)
NameHTML codeQuestion?
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>&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>
- ผลลัพธ์ใน ie จะเป็นอย่างไร
- แต่ละ properties ของ table หมายถึงอะไร
- &nbsp; หมายถึงอะไร
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)
NameHTML codeQuestion?
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)
NameHTML codeQuestion?
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)
NameHTML codeQuestion?
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
NameHTML codeQuestion?
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 จะเป็นอย่างไร
h02
<html><head>
<style type="text/css">
body {font-family:microsoft sans serif;color:purple;background-color:black}
a:link {color:red;text-decoration:none;font-family:microsoft sans serif;}
a:visited {color:purple;font-family:microsoft sans serif;}
a:hover {color:blue;text-decoration:underline overline;}
tr,td {font-size:10px;font-family:microsoft sans serif;background-color:gray}
</style>
</head><body>
<table><tr><td>a<td>b</table>
<a href=http://www.thaiall.com>ไทยออล</a>
- link หมายถึง กรณีใดของส่วนใด
- visited หมายถึง กรณีใดของส่วนใด
- hover หมายถึง กรณีใดของส่วนใด
h03
<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>
- ทำไม b เป็นอักษรดำบนพื้นขาว
- p.batman หมายถึงอะไร
h04
<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://www.thaiall.com/article/promote.htm">
</head><body>
ไปหน้าโฆษณา
- keywords แปลว่าอะไร
- description แปลว่าอะไร
- charset แปลว่าอะไร
- refresh แปลว่าอะไร

แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยโยนก
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : yourname@thaiall.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223