ปรับปรุง : 2568-01-19 (ปรับเนื้อหา)

ภาษาเอชทีเอ็มแอล

ภาษาเอชทีเอ็มแอล คือ ภาษาคอมพิวเตอร์ที่ไม่ใช่ภาษาโปรแกรม ถูกออกแบบมาเพื่อใช้ในการสร้างเว็บเพจที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี ในปัจจุบันเอชทีเอ็มแอล ล่าสุดคือ รุ่น 4.01 เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C)

บทนำ

สารบัญ
1	ความรู้เบื้องต้น	1-2
2	ลิงค์ และสีแบบ RGB
3	ภาพ และภาพเป็นลิงค์
4	ตารางเบื้องต้น	3-4
5	ตารางที่ซับซ้อน	3-4
6	เลเยอร์ และมาควี	5-6
7	เรียกใช้มัลติมีเดีย	5-6
8	การเขียน CSS	7
9	การเขียน Meta Tag	7
10	การเขียนจาวาสคริปต์	8-9
11	การใช้งานจาวาสคริปต์	10
12	กราฟิกเบื้องต้น - Paint - IrfanView - PhotoShop	11-12

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 ได้

การใช้ Developer Tools บน Chrome Browser

Document Type แต่ละรุ่น มีผลต่อ tag ต่างกันไป

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

การใช้ Developer Tools ด้วยการกด F12, Ctrl+Shift+I หรือ เข้า Customize ของ Chrome, More Tools, Developer Tools ใน Tab elements ใช้เครื่องมือ Select an element แล้วใช้ Mouse click ส่วนใดของ content ก็จะแสดง HTML code ในหน้าต่าง Element แล้วจะพบรายละเอียด Style ที่มาจากแฟ้ม CSS หรือที่กำหนดใน HTML code ทำให้ทราบว่าการแสดงผลนั้นมาจาก แฟ้มใด ด้วยคำสั่งใด และสามารถแก้ไขเพื่อทดสอบให้เห็นการเปลี่ยนแปลงได้ทันที ตัวอย่างของช้างเชือกนี้ก็แสดงผลไม่ถูกต้อง ต้องใช้เครื่องมือช่วยวิเคราะห์โค้ด เพราะเมื่อแยกโค้ดไปทดสอบแบบไม่มี Doctype พบว่าถูกต้อง แต่ html.htm ไม่ถูก
☸ elephant.htm แบบที่ไม่เรียบร้อย
☸ doctype.php บริการเลือกแบบเอกสาร แสดงค่าที่แตกต่าง

การเขียนเว็บเพจ ด้วยภาษาเฮชทีเอ็มแอล (html)

การจัดทำ gif animation ด้วย powerpoint
ใช้กรณีศึกษา coding มาใช้เป็นหัวข้อเล่าเรื่อง
1. เปิด Powerpoint 2010 (ไม่มีตัวเลือก ส่งออกเป็น Create an Animated GIF แบบ Office 365)
2. สร้าง Slide และ Textbox ที่มี Coding หลายบรรทัด
3. เลือก กล่องข้อความ, ภาพเคลื่อนไหว, ปรากฎ
4. กำหนดการเริ่ม เป็น หลังก่อนหน้า เพื่อให้แสดงผลทีหลัง
5. เปิด บานหน้าต่างภาพเคลื่อนไหว
6. คลิ๊กขวาบน ชื่อวัตถุ ใน บานหน้าต่างภาพเคลื่อนไหว
- มองหาและคลิ๊ก ตัวเลือกเอฟเฟ๊กต์
- เปลี่ยน เคลื่อนไหวข้อความ จาก ทั้งหมดในครั้งเดียว เป็น ทีละตัวอักษร
7. ใช้เวลาปรับแต่ง ปรับเพิ่มสไลด์จนพอใจ
8. (เริ่มบันทึกเวลา) เมนู, การนำเสนอสไลด์, ทดสอบการกำหนดเวลา
9. ไปที่ มุมมอง, ตัวเรียงลำดับสไลด์ (slide sorter) พบเวลาในแต่ละสไลด์
10. บันทึกเป็น MPEG-4 video (.mp4) และ .pptx เพื่อแก้ไขในภายหลัง
11. ได้แฟ้ม .mp4 และ .pptx
12. เปิดเว็บไซต์ convertio.co/mp4-gif/
13. เลือกอัพโหลดแฟ้ม .mp4 และสั่ง convert
14. มีปุ่มให้ download แล้วได้แฟ้ม .gif
15. นำไปใช้งานเช่นอัพโหลดขึ้น facebook
เช่น https://www.facebook.com/thaiall/posts/10159648671822272

บทที่ 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
payao
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>
payao
<hr size=100 color=blue>
</body>

- hr ทำหน้าที่อะไร (Horizontal)
- ต.ย.นี้ properties ของ hr มีกี่แบบ

a07

<body>
<font color=yellow face="cordia new">tak</font>
<font color=blue>lampang
<font color=red size=6 face="courier new">nan</font>
romeo
</font>
bangkok
</body>

- คำใดน่าจะมีสีดำบ้าง
- คำใดมีขนาดใหญ่ที่สุด
- คำใดมีสีน้ำเงิน

a08

<body>
<font color=blue>N
A
N
<font color=red face="courier new">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 ต้องทำอย่างไร

Link Tag เล่าเรื่อง ลิงก์ 12 รูปแบบ ที่ถูกใช้งานบ่อย ๆ เป็นลิงก์เหมือนกัน แต่เป็นลิงก์ไม่เหมือนกัน ต่างกันที่การนำไปใช้
☸ facebook.com/reel/1754301618470925

1. ลิงก์แบบสั้น
<a href="url.htm">data of this url</a>
2. ลิงก์ที่มีคำอธิบาย
<a href="url.htm" title="data page">data of this url</a>
3. ลิงก์ที่สั่งเปิดแฟ้มในแท็บใหม่
<a href="url.htm" target="_blank">data of this url</a>
4. ลิงก์ที่เป็นสีน้ำเงิน
<a href="url.htm" style="color:blue;">data of this url</a>
5. ลิงก์ที่มีรายละเอียดในคลาส mylink
<a href="url.htm" class="mylink">data of this url</a>
6. ลิงก์ที่กระโดดไปยังจุดในหน้าเดียวกัน
<a href="#bottom">jump to bottom</a>
<a name="bottom">☸</a>
7. ลิงก์ที่สั่งเปิดกล่อง alert
<a href="javascript:alert('data');">Alert "data" word</a>
8. ลิงก์ที่บนภาพแทนข้อความ
<a href="url.htm"><img src="url.jpg"></a>
9. ลิงก์ที่เรียกฟังก์ชัน lightbox ภายนอก
<a href="url.htm" rel="lightbox['data']"><img src="url.jpg"></a>
10. ลิงก์ที่สร้างด้วยภาษาสคริปต์
echo "<a href='url.htm'>data of this url</a>";
11. ลิงก์ที่สร้างด้วยภาษาสคริปต์มีตัวแปร
$url = "url.htm";
echo "<a href='$url'>data of this url</a>";
12. ลิงก์ที่รับ url จากภายนอก
$url = $_REQUEST['url'];
echo "<a href='$url' title='data page'>data of this url</a>";

บทที่ 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>&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 หมายถึงอะไร
-   หมายถึงอะไร

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 : <a href="_b.jpg">_b.jpg</a>
file : <a href="_bl.jpg">_bl.jpg</a>
file : <a href="_br.jpg">_br.jpg</a>
file : <a href="_r.jpg">_r.jpg</a>
file : <a href="_tr.jpg">_tr.jpg</a>
file : <a href="_elephant.jpg">_elephant.jpg</a>

ตัวอย่าง 1 :
แก้ bootstrap

ตัวอย่าง 2 :
ปกติถ้าไม่เรียก bootstrap

_r.jpg, _tr.jpg, _b.jpg, _bl.jpg, _b.jpg, _br.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 จะเป็นอย่างไร

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 แปลว่าอะไร

การใช้บริการ webhosting

# การอัพโหลด webpage แบบ static ขึ้น google drive
- เปิด google drive ด้วย @gmail.com
- คลิ๊ก My Drive, New, Folder, "tec"
- เลือก share folder "tec"
- เปลี่ยนจาก Restricted (Only people added can open with this link)
เป็น Anyone with the link (Anyone on the internet with this link can view)
- คลิ๊กเข้าห้อง "tec" เลือก New , File upload, เลือกแฟ้มที่ต้องการ เช่น joom.htm
- คลิ๊กแฟ้ม joom.htm แล้วเลือก share และรับลิงค์
https://drive.google.com/file/d/1FnHxeRvEBc5fh-hjLXRkx3g2ibwfDTd1/view?usp=sharing
https://drive.google.com/file/d/1qwXWxrzbr5yzHMPa5Epz4dVIKE-Kf54i/view?usp=sharing
- ลิงค์ข้างต้นจะเป็น google docs เปิดเห็นรหัสต้นฉบับบนเอกสารเหมือน 
- เคยอ่านความคิดเห็น พบ This doesn't work. In fact google prevents the delivery of files as claimed. And there is no longer a "google drive viewer" which was the exploit they blocked.
- [อ่านเพิ่ม](https://www.ecanarys.com/Blogs/ArticleID/135/How-to-Host-your-Webpages-on-Google-Drive)

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com