ภาษา HTML

**************
โลกธุรกิจบนอินเทอรเน็ตเริ่มขึ้นเมื่อเกิดเครือขายหลัก NFSNET โดยหนวยงานมูลนิธิ
วิทยาศาสตรแหงชาติ National Science Foundation (NFS) ทําใหเกิดการแผขยายเครือขาย
อินเทอรเน็ต ออกไปสูบุคคลในวงการศึกษา และมีจํานวนกวางขวางออกไปอีกเมื่อ NFS ไม
สามารถขยายงานการเปนเครือขายหลักหรือ Backbone ไดอีกตอไป เนื่องจากขอจํากัดในดาน
งบประมาณ ในขณะที่ความตองการที่จะขยายงานอินเทอรเน็ตเชิงพาณิชยสูงขึ้น จึงไดมีการรวมตัว
ในการสราง Backbone ใหมเพื่อตอบสนองความตองการอันนี้ คือ CIX หรือ Commercial Internet
Exchange จึงเกิดขึ้น โดยความรวมมือระหวาง NERIT IBN NCI ตั้งบริษัท Advanced Network and
Service Inc.(ANC)ขึ้น ทําใหเกิดการใชอินเทอรเน็ตเชิงพาณิชยอยางสมบูรณ
อินเทอรเน็ต เกิดจากการเชื่อมตอระหวางเครือขายหลายเครือขายตอกันและทํางานอยาง
เปนอันหนึ่งอันเดียวกัน อินเทอรเน็ตเกิดขึ้นเพื่อตอบสนองโลกของขอมูลขาวสารที่นับวันยิ่ง
มากมายกวางขวางขึ้น ความตองการใชขอ มูลอยางไมจํากัดและรวดเร็วเพื่อนํามาใชในการตัดสินใจ
ในเรื่องตาง ๆ ทวีความสําคัญมากขึ้น
Word Wide Web
เวิลดไวดเว็บ เปนอนุเครือขายของอินเทอรเน็ตที่เกิดขึ้นโดย Tim Berner-Lee ในป ค.ศ.
1989 โดยมีแนวคิดของการสรางเครือขายเวิลดไวดเว็บ เพื่อรวบรวมขอมูลขาวสาร ที่มีอยูอยาง
มหาศาลในอินเทอรเน็ตใหเปนกลุมและสามารถเชื่อมโยงถึงกันได โดยอาศัยเทคโนโลยีที่เรียกวา
ไฮเปอรเท็กซ (Hypertext) และไฮเปอรมีเดียที่ทําการเชื่อมโยง (Links) ขอความหรือ รูปภาพเขากับ
เอกสารอื่น ๆ อยางเปนอิสระตอกัน ภาพหรือขอความที่แสดงบนหนาจอจะแสดงไดทีละหนา ซึ่ง
เรียกวา เพจ (Page) หรืออาจมีการเชื่อมโยงดวยการลิงค(Link) เพื่อคนหาขอมูลจากอีกเพจหนึ่งที่อยู
หางออกไปไกล ๆ ก็ได โดยแตละหนาจอรวมกันทั้งหมดเรียกวา โฮมเพจ (Home Page)
ในระบบเว็บจะประกอบไปดวยเครื่องที่ใหบริการขอมูล (Web Server) หรืออาจจะเรียกวา
เว็บไซต (Web Site) กับเครื่องรับขอมูล (Web Client) โดยที่เว็บไซดแตละที่จะตองเชื่อมตออยูกับ
ผูใหบริการอินเทอรเน็ต (Internet Service Provider) ที่จะจัดเตรียมขอมูลในรูปแบบไฮเปอรเท็กซ
เอาไว ซึ่งในปจจุบันนิยมใชภาษามาตรฐานเรียกวา HTML (Hyper text Markup Language) ที่
ประกอบไปดวยไฟลขอความที่บรรจุคําสั่งในการทํางานไวภายใน และเมื่อผูใชตอ งการติดตอกับ
เวิลดไวดเว็บเพียงแคซอฟตแวรที่เรียกวา เว็บบราวเซอร (Web Browser) หรือบริการออนไลนและ
อุปกรณ หรือที่เรียกวา โมเด็ม เพื่อติดตอไปยังศูนยบริการขอมูลหรือเซิรฟเวอร จากนั้นชี้แลวคลิก
เลือกขอมูลที่เราตองการคนหา โดยเจาโปรแกรมเว็บบราวเซอรของเราจะเปนตัวที่แปลงสัญญาณ
 2

คําสั่ง และแสดงผลเปนขอความ รูปภาพ เสียง ซึ่งเปนขอมูลที่ผูใชตองการ และขอมูลจะถูกดาวน

โหลดมายังคอมพิวเตอรของผูใชเพื่อศึกษาขอมูลตอไปนี้ เพราะความงาย และสะดวกตอผูใชงาน จึง
ทําใหอินเทอรเน็ตไดรับความนิยมอยางรวดเร็วและมีผูเขาใชบริการอยางมากมาย
HTML
HTML ยอมากจาก Hyper Text Markup Language เปนภาษาทีใ่ ชในการพัฒนาเว็บเพจ
เพื่อใหโปรแกรมเว็บบราวเซอร (Web Browser) ตาง ๆ สามารถแปลงคําสั่งและแสดงผลเปน
รูปภาพ เสียง หรือขอมูลได มีโปรแกรมเว็บบราวเซอรมากกวา 10 โปรแกรมที่สามารถอานหรือ
เขาใจในภาษา HTML ซึ่งเปนขอความ (Text) ที่เปนรหัสแอสกี้ (ASCII) ธรรมดา ๆ กับรหัสที่อยู
ในเครื่องหมาย <> และมีนามสกุลเปน .html โดยเมื่อเราเปดโปรแกรมเว็บบราวเซอร เราจะไม
สามารถพบรหัสเหลานี้ไดเลยบนจอภาพ แตรหัสเหลานี้จะเปนคําสั่งที่บอกรหัสเหลานี้จะเปนคําสั่ง
บอกโปรแกรมเว็บบราวเซอรของเราวา รูปแบบของขอความเปนอยางไร ตัวหนา หรือ หัวขอตาง ๆ
จะตองมีการโหลดรูปภาพกราฟกหรือไม รวมไปถึงการสรางจุดเชือ่ มโยงหรือลิงค (Link) ที่
เชื่อมโยงตอไปยังเว็บเพจอื่น ๆ
สําหรับการสรางไฟล HTML จะตองอาศัยโปรแกรมที่มีคุณสมบัติเปนเท็กซอิดิเทอร
(Text Editor) หรืออาจเปนโปรแกรมประเภทเวิรดโพรเซสเซอร (Word Processor) โดยเราจะใช
โปรแกรมเหลานี้สําหรับเขียนคําสั่งตาง ๆ หรือรายละเอียดของขอมูลที่เราตองการใหเสดงบน
จอภาพ และเก็บไฟลโดยจะตองมีนามสกุลเปน .html จากนั้นก็ทดสอบไฟลในโปรแกรมเว็บ
บราวเซอรตอไป
HTML เบื้องตน
การเขียนภาษา HTML ในที่นี้นั้นจะสะดวกมากถาโปรแกรมที่มี คุณสมบัติเปน Text
Editor เชน Note Editor, Word Pad, Notepad ฯลฯ ทานก็สามารถเขียนไฟล HTML ไดแลวโดยเมื่อ
ทานเขียนคําสั่งตางๆ และรายละเอียดของขอมูลที่จะนําเสนอแลวทานก็เพียงแตบันทึกเปนไฟลที่มี
นามสกุลเปน “.html หรือ .htm” และเมื่อเขียนคําสั่งตางๆ แลวก็สามารถตรวจสอบดูความผิดพลาด
และทําการแกไขไดจากโปรแกรมคนดู (Web Browser) ตางๆ เชน Internet Explorer, Netcape
Navigator, Opera ฯลฯ
วิธีเปดโฮมเพจที่ทานเขียน
โดยปกติ Web Browser ที่ใชกันอยูโดยทั่วไปจะเปน Netscape และ Explorer ซึ่งก็มีวิธีการ
เปดดูที่คลาย ๆ กันคือ
1. Netscape Navigator

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 3

เปดโปรแกรม Netscape และไปที่ File เลือก Open page คลิกที่ Choose File และเลือกชื่อ
ไดเรกเทอรี่และไฟลที่คุณ Save ไวกด Open
2. Internet Explorer
เปดโปรแกรม Explorer และไปที่ File เลือก Open คลิกที่ Browse และเลือกชื่อไดเรกเทอรี่
และไฟลที่คุณ Save ไวกด Open
1. โครงสรางพื้นฐานของ HTML
กิจกรรมที่ 1 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex01.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
<HTML>
<HEAD>
<TITLE> ชื่อหัวเรื่อง </TITLE>
</HEAD>
<BODY> ขอมูลที่ตองการแสดงผล
</BODY>
</HTML>

จากคําสั่งภาษา HTML ขางตนเมื่อบันทึก

เปนไฟล สมมติวา ชื่อ ex01.html เมื่อเปด
จากโปรแกรม Browser แสดงไดดังภาพที่
1

ภาพที่ 1

โครงสรางพื้นฐานของโปรแกรมภาษา Computer เปนสวนสําคัญที่สุด ของการเขียนภาษา

Computer โดยทั่วไปและมันจะตองถูกเขียนขึ้นทุกครั้ง ภาษา HTML ก็เหมือนกับภาษา Computer
ทั่วๆ ไปที่มีโครงสรางพื้นฐานเฉพาะของคําสั่งของ HTML สวนมากจะถูกกําหนดอยูในเครื่องหมาย
<.....> ซึ่งถูกเรียกวา Tag สําหรับในสวนของคําสั่ง Tag ภายในคําสั่งโครงสรางพื้นฐานพอที่จะ
อธิบายไดดังนี้
ชื่อหัวเรื่อง

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 4

จะถูกกําหนดอยูภายใน Tag คําสั่ง <HEAD> <TITLE> ชื่อหัวเรื่อง </TITLE> </HEAD>

ขอมูลที่ถูกเขียนอยูภายใน Tag ภายในคําสั่งโครงสรางพื้นฐานพอที่จะอธิบาย ไดดังนี้
ขอมูลที่ตองการแสดงผล
จะเปนสวนที่แสดงใหเราเห็นไมวาจะเปน ตัวอักษร, รูปภาพ, ตาราง ฯลฯ ซึ่งถูกกําหนดอยู
ภายใน Tag <Body> ขอมูลที่ตองการแสดงผล </BODY>
กิจกรรมที่ 2 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex02.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางของการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> ชื่อหัวเรื่อง </TITLE>
</HEAD>
<BODY> สวนแสดงผลของภาษา HTML
</BODY>
</HTML>
การแสดงผล

ภาพที่ 2
คําสั่งที่มีเครื่องหมาย <….. > จะถูกเรียกวา Tag เปนคําสั่งที่ใชในการกําหนดการแสดงผล
ของ Browser ซึ่งคําสั่งของ HTML สวนมากแลวคําสั่ง Tag จะถูกเปดตัว <….> และปดดวย </….>

1.1 คําสั่ง Comment Tag

เปนคําสั่งที่ใชในการอธิบายอยูภายใน HTML โปรแกรม Browser จะขามสิ่งที่อยูใน
เครื่องหมายนี้โดยไมแสดงขอผิดพลาด ใชประโยชนเพื่อใหผูเขียนโปรแกรมไดสังเกตหรือจําใน
กรณีที่มีความซับซอนมากๆ สําหรับผูที่จะทําการแกไขโปรแกรมในภายหลัง

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 5

รูปแบบคําสั่ง
< !.... >

1.2 คําสั่งขึ้นบรรทัดใหม
รูปแบบคําสั่ง
< BR >
เปนคําสั่งที่สั่งใหขอมูลที่จะแสดงผลขึ้นบรรทัดใหม กลาวคือเมื่อเราพิมพขอมูลอะไรลงไปใน Tag
< BODY > ….. < /BODY > การแสดงผลของขอมูล จะเรียงตอกันไปเรื่อย ๆ แมวา เราจะขึ้น
บรรทัดใหมในการพิมพขอมูลในคําสั่ง Tag < BODY > ….. < /BODY >แลวก็ตาม คําสั่ง < BR >
จึงเปนคําสั่งทีช่ วยใหเราบังคับใหขอมูลขึ้นบรรทัดใหมได
กิจกรรมที่ 3 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex03.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> คําสั่งขึ้นบรรทัดใหม </TITLE>
</HEAD>
<BODY> คําสั่งใหเปลี่ยนบรรทัด <BR> ขอความนี้อยูบรรทัดใหม
<! นี่คือ Comment โปรแกรม Browserจะไมอานขอความในเครื่องหมายนี้>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 3

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 6

1.3 คําสั่งการยอหนาใหม
รูปแบบคําสั่ง
< P > …………..< /P > หรือ < P >
มีลักษณะคลายกับคําสั่ง < BR > แตคาํ สั่งนี้จะมีการเวนบรรทัดวางใหหนึ่งบรรทัด เพราะบางครัง้
เราตองการเวนบรรทัดวางหนึ่งบรรทัด แตโปรแกรม Web Browser จะไมเขาใจการพิมพบรรทัด
เปลา
กิจกรรมที่ 4 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex04.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> คําสั่งขึ้นบรรทัดใหม </TITLE>
</HEAD>
<BODY> คําสั่งใหเปลี่ยนบรรทัด <p> ขอความนี้อยูบรรทัดใหมแตเวนวาง 1 บรรทัด
<! นี่คือ Comment โปรแกรม Browserจะไมอานขอความในเครื่องหมายนี้>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 4
1.4 เสนคั่นบรรทัด
รูปแบบคําสั่ง
< HR >
เปนคําสั่งที่ใชแบงขอความของจอภาพใหเปนสวน ๆ

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 7

กิจกรรมที่ 5 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้

เปน ex05.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> ชื่อหัวเรื่อง </TITLE>
</HEAD>
<BODY> คําสั่งใหเปลี่ยนบรรทัด <p> ขอความนี้อยูบรรทัดใหมแตเวนวาง 1 บรรทัด
<! นี่คือ Comment โปรแกรม Browserจะไมอานขอความในเครื่องหมายนี้>
<HR>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 5

2. รูปแบบตัวอักษร
ในสวนนี้จะเปนสวนที่ใชในการกําหนดรูปแบบตัวอักษรเชน การกําหนดสี, การกําหนด
ขนาด, รูปแบบตัวอักษร ฯลฯ

2.1 การกําหนดหัวเรื่อง

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 8

เปนสวนของคําสั่ง Tag ที่เปนตัวอักษรใหมีความหนาและขนาดตัวอักษรใหมีความ

แตกตางจากอักษรปกติกลาวคือเปนสวนที่จะทําใหหัวเรื่องมีความแตกตางจากอักษรปกติเพราะหัว
เรื่องจะตองเปนสวนที่มีจุดเดนมากที่สุดซึ่งคําสั่ง < Hx > จะมีขนาดของตัวอักษร อยู 6 ขนาด คือ
ขนาดใหญสุด คือ <H1> (ใชมาก) และเล็กที่สุดคือ <H6> (ใชนอย)
รูปแบบคําสั่ง
< Hx >………….< Hx >
โดยที่ x คือคาตัวเลขตั้งแต 1 ถึง 6
เมื่อเราใช Tag คําสั่งหัวเรื่องขอมูลที่อยูบรรทัดเดียวกับ Tag จะถูกขึ้นบรรทัดใหมโดยอัตโนมัติ
แมวา เราจะไมใชคําสั่งขึ้นบรรทัดใหมก็ตาม
กิจกรรมที่ 6 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex06.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การกําหนดหัวเรื่อง </TITLE>
</HEAD>
<BODY>
<H1> การกําหนดหัวเรื่อง H1 < /H1 >
<H2> การกําหนดหัวเรื่อง H2 < /H2 >
<H3> การกําหนดหัวเรื่อง H3 < /H3 >
<H4> การกําหนดหัวเรื่อง H4 < /H4 >
<H5> การกําหนดหัวเรื่อง H5 < /H5 >
<H6> การกําหนดหัวเรื่อง H6 < /H6 > นี่คือตัวอักษรปกติ
</BODY>
</HTML>
การแสดงผล

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 9

ภาพที่ 6
2.2 ขนาดตัวอักษร (Font size & Basefontsize)
คําสั่ง <BASEFONT SIZE>
เปนคําสั่งที่ใชกําหนดขนาดตัวอักษรทั้งหมดในไฟลใหมีคาตามที่เรากําหนด ซึ่งขนาดตัวอักษรมีได
ตั้งแต 1 ถึง 7 คือขนาด 1 เปนขนาดเล็กที่สุด และขนาด 7 เปนขนาดที่ใหญที่สุด ซึ่งตรงขามกับ
ขนาดของคําสั่ง <Hx> ปกติถาเราไมกําหนดขนาดของ <BASEFONT SIZE> โปรแกรมจะกําหนด
ขนาดใหมีขนาดเปน 3 เสมอ
รูปแบบคําสั่ง
<BASEFONT SIZE>
คําสั่ง <FONT SIZE>
เปนคําสั่งที่ใชในการกําหนดขนาดตัวอักษรในบรรทัดเดียวกันใหมีขนาดแตกตางกันได ซึ่งมีคาได
ตั้งแต -7 ถึง +7 ซึ่งคาตัวเลขยิ่งมาก ขนาดของตัวอักษรก็จะยิ่งใหญมากขึ้น การกําหนดขนาดของ
ตัวอักษรในคําสั่ง <FONT SIZE> จะถูกอางอิงโดยคําสั่ง <BASEFONT SIZE>
กิจกรรมที่ 7 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex07.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
รูปแบบคําสั่ง
<FONT SIZE = “number”>…….</FONT>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 10

ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> ขนาดตัวอักษร (Fontsize & Basefontsize) </TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE = “3”> ทดลองการกําหนดขนาด BASEFONT SIZE= “3”<BR>
<FONT SIZE= “+2”> ทดลองการกําหนดขนาด FONT SIZE= “+2”</FONT><BR>
<FONT SIZE= “-1”> ทดลองกําหนดขนาด FONT SIZE= “-1”</FONT><BR>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 7
การกําหนดรูปแบบตัวอักษร
ในที่นี้จะไดทราบถึงการกําหนดรูปแบบตัวอักษรใหเปน ตัวอักษรเอียง <I>, ตัวอักษรหนา <B> ,
และตัวอักษรมีเสน <U>
รูปแบบคําสั่ง
<B>……..</B>
<I>………</I>
<U>…….</U>
กิจกรรมที่ 8 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex08.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 11

<HTML>
<HEAD>
<TITLE> การกําหนดรูปแบบตัวอักษร </TITLE>
</HEAD>
<BODY>
<B> ตัวอักษรตัวหนา</B ><Br>
<I> ตัวอักษรตัวเอียง</I ><Br>
<U> ตัวอักษรหนา</U ><Br>
<B><I><U> การใชคาํ สั่งทั้ง 3 แบบพรอมกัน </U></I></B><Br>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 8
2.3 ตัวอักษรกระพริบ
เปนคําสั่งที่ใชกําหนดตัวอักษรที่อยูใน Tag เกิดการกระพริบ ซึ่งคําสั่งนี้จะใชไดกับ Browser ของ
Netscape เทานั้น
รูปแบบคําสั่ง
<BLINK>………</BLINK>
กิจกรรมที่ 9 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟลนี้
เปน ex09.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 12

<HEAD>
<TITLE> ตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY>
<BLANK> ตัวอักษรกระพริบ</BLINK>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 9
(แสดงไดเฉพาะใน Netcape Navigator)

2.4 การจัดวางตําแหนงขอความโดยใช ALIGN

เปนคําสั่งที่ใชในการกําหนดใหรูปภาพตัวอักษรขึ้นบรรทัดใหม แลวอยู ชิดซาย, ชิดขวา, กึ่งกลาง
รูปแบบคําสั่ง
<P ALINGN = “Left or Right or Center”>…..</P>
กิจกรรมที่ 10 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex10.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การจัดวางตําแหนงขอความ-โดยใช ALIGN </TITLE>
</HEAD>
<BODY>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 13

<P ALIGN= “Left”>Left</P>

<P ALIGN= “Right”>Right</P>
<P ALIGN= “Center”>Center</P>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 10

การจัดวางตําแหนงขอมูลไวกึ่งกลาง
ขอมูลที่อยูภายใน Tag คําสั่ง <CENTER> จะถูกกําหนดใหอยูกึ่งกลางของจอภาพ
รูปแบบคําสั่ง
<CENTER>……..</CENTER>
กิจกรรมที่ 11 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex11.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การจัดวางตําแหนงขอมูลไวกึ่งกลาง </TITLE>
</HEAD>
<BODY>
<CENTER> ตัวอักษรกึ่งกลาง </CEHNTER>
</BODY>
</HTML>
การแสดงผล

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 14

ภาพที่ 11

2.5 การกําหนดสีของพื้นฉากหลัง
เปนคําสั่งที่ใชกําหนดสีของ Background จอภาพใหมีสีตาง ๆ ตามตองการโดยการกําหนดเลขฐาน
16

รูปแบบคําสั่ง
<BODY BGCOLOR= “#เลขฐาน 16 จํานวน 6 ตัว>……..</BODY>
กิจกรรมที่ 12 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex12.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การกําหนดสีของพื้นฉากหลัง </TITLE>
</HEAD>
<BODY BGCOLOR= “#0000FF” TEXT=”#FFFFFF”>
กําหนด BACKGROUND เปนสีน้ําเงิน
</BODY>
</HTML>
การแสดงผล

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 15

ภาพที่ 12
การกําหนดสีของตัวอักษร
เปนคําสั่งที่ใชกําหนดสีของตัวอักษรใหมีสีตางๆ ตามตองการโดยการกําหนดเลขฐาน 16
ตัวอยางการใชคําสั่ง
กิจกรรมที่ 13 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex13.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

คําสั่ง
<HTML>
<HEAD>
<TITLE> การกําหนดสีของตัวอักษร </TITLE>
</HEAD>
<BODY TEXT= “#00ff00”>
กําหนด ตัวอักษรเปนสีเขียว
</BODY>
</HTML>
การแสดงผล

ภาพที่ 13

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 16

การกําหนดสีของตัวอักษรเฉพาะสวน
เปนคําสั่งที่ใชกําหนดสีของตัวอักษรใหมีสีตางๆ เฉพาะสวนตามตองการโดยการกําหนดเลขฐาน
16
รูปแบบคําสั่ง
<FONT COLOR= “#เลขฐาน 16 จํานวน 6 ตัว”>…….</FONT>
ตัวอยางการใชคําสั่ง
กิจกรรมที่ 14 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex14.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

คําสั่ง
<HTML>
<HEAD>
<TITLE> การกําหนดสีของตัวอักษรเฉพาะสวน </TITLE>
</HEAD>
<BODY>
ทดสอบ <FONT COLOR= “#FF0000”> กําหนดตัวอักษรเฉพาะสวนเปนสีแดง</FONT> โดย
คําสั่ง FONTCOLOR
</BODY>
</HTML>
การแสดงผล

ภาพที่ 14
3. คําสั่งรายการ[Lists]

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 17

การแสดงขอมูลแบบรายการเปนสวนที่ทําใหเกิดความสะดวก, รวดเร็วในการอธิบาย
รายละเอียดตาง ๆ ของขอมูลในกรณีที่มีขอมูลจํานวนมาก ซึ่งจะมีลักษณะการแสดงผล 3 แบบ คือ
3.1 แบบมีหมายเลขกํากับ (Number Styles)
3.2 แบบมีสัญลักษณกํากับ (Bulleted Styles)
3.3 แบบไมมีสัญลักษณกํากับ (No Bulleted Styles)
3.1 การแสดงรายงการแบบมีหมายเลขกํากับ
(Number Styles/Order Lists)

รูปแบบคําสั่ง
<OL TYPE= “รูปแบบ”>……………..
<LI>…………………………………..
<LI>…………………………………..
<LI>…………………………………..
-
-
<Lx>…………………………………..
</OL>
มีการแสดงแบบเรียงลําดับหลายรูปแบบ เชน ตัวอักษร, ตัวเลข ฯลฯ
กิจกรรมที่ 15 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex15.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การแสดงรายการแบบมีหมายเลขกํากับ</TITLE>
</HEAD>
<BODY>
<OL TYPE= “A” >
<LI> รายการที่ 1
<LI> รายการที่ 2
<LI> รายการที่ 3

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 18

</OL>
</BODY>
</HTML>

การแสดงผล

ภาพที่ 15

3.2 การแสดงรายการแบบมีสัญลักษณกํากับ
(Bulleted Styles)
รูปแบบคําสั่ง
<UL TYPE= “รูปแบบ”>…………………
<LI>…………
<LI>…………
<LI>…………
-
<Lx>………..
</UL>
มีการแสดงสัญลักษณ 3 รูปแบบ คือ DISC, CIRCLE, SQUARE
กิจกรรมที่ 16 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex16.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 19

ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การแสดงรายการแบบมีสัญลักษณกํากับ (Bulleted Styles) </TITLE>
</HEAD>
<BODY>
ทดสอบ DISC
<UL TYPE= “DISC”>
<LI> รายการที่ 1
<LI> รายการที่ 2
<LI> รายการที่ 3
</UL>
ทดสอบ CIRCLE
<UL TYPE= “CIRCLE”>
<LI> รายการที่ 1
<LI> รายการที่ 2
<LI> รายการที่ 3
</UL>
ทดสอบ SQUARE
<UL TYPE= “ SQUARE”>
<LI> รายการที่ 1
<LI> รายการที่ 2
<LI> รายการที่ 3
</UL>
</BODY>
</HTML>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 20

การแสดงผล หมายเหตุ คําสั่งนี้จะแสดงผลไดตรงความ

สภาพจริงเมื่อใช Browser เปน Netcape
Navigator เทานั้น จากภาพในที่นี้ไมตรง
กับสภาพที่เปนจริง เนื่องจากใช Internet
Explorer แสดงผล

3.3 การแสดงแบบรายการแบบไมมีสัญลักษณ
กํากับ
(No Bulleted Styles)
รูปแบบคําสั่ง
<DL> คําจํากัดความ
<DT> คําจํากัดความยอย
<DD> รายละเอียด
</DL>

ภาพที่ 16

3.3 การแสดงรายการแบบไมมีสัญลักษณกํากับ (No Bulleted Styles)

รูปแบบคําสั่ง
<DL> คําจํากัดความ
<DT> คําจํากัดความยอย
<DD> รายละเอียด
</DL>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 21

กิจกรรมที่ 17 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล

นี้เปน ex17.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การแสดงแบบรายการแบบไมมีสัญลักษณ (NO Bulleted Styles) </TITLE>
</HEAD>
<DL>
<DT> รายการที่ 1
<DD> รายละเอียด
</DL>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 17
รูปภาพ(IMAGE)
รูปภาพถือเปนสวนประกอบที่สําคัญอยางหนึ่งาของโฮมเพจ เพราะจะทําใหโฮมเพจ
นาสนใจมากยิ่งขึ้น โดยปกติแลวรูปภาพที่สามารถนํามาประกอบโฮมเพจไดจะมีดวยกันสองไฟล
คือไฟล JPG. (JPEG) และ GIF.

รูปแบบคําสั่ง

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 22

<IMG SRC= “=ชื่อไฟล JPG/GIF”>

กิจกรรมที่ 18 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex18.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> รูปภาพ (IMAGE) </TITLE>
</HEAD>
<BODY>
<IMG SRC= “ong3.jpg”>
</BODY>
</HTML>
การแสดงผล

ex18.html

การกําหนดขนาดของรูปภาพ
รูปแบบคําสั่ง
<IMG SRC= “ชื่อไฟล JPG/GIF”=WIDTH= “number” HEIGHT= “number”>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 23

กิจกรรมที่ 19 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล

นี้เปน ex19.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML><HEAD>
<TITLE> การกําหนดขนาดของรูปภาพ </TITLE>
</HEAD>
<BODY>
<IMG SRC= “ong3.jpg ” WIDTH= “200” HEIGHT= “200”>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 19

การใชรูปภาพเปน Background
รูปแบบคําสั่ง
<BODY BACKGROUND= “ชื่อไฟล JPG/GIF”>
Option:
bgproperties= ”fixed” : ทําให Background อยูกับที่เมื่อมีการเลื่อน Scroll

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 24

กิจกรรมที่ 20 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล

นี้เปน ex20.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การใชรูปภาพเปน Background </TITLE>
</HEAD>
<BODY BACKGROUND= “food046.gif” bgproperties= “fixed”>
ทดสอบ BACKGROUND
</BODY>
</HTML>
การแสดงผล

ภาพที่ 20

5. การเชื่อมโยงขอมูล (LINKS)
โดยทั่วไปมี 2 ประเภท คือ แบบ INTERNAL LINKS คือการเชื่อมโยงขอมูลภายในไฟล
ของเราเอง และ EXTERNAL LINKS คือการเชื่อมโยงขอมูลออกไปสูภายนอกไฟล หรือ นอก
โฮมเพจของเรา
5.1 คําสั่งการเชื่อมโยงขอมูลภายในไฟล (Internal Links)
คําสั่งการเชื่อมโยงแบบ Internal Links จะแบงออกเปน 2 สวนดวยกันคือ
1. ชื่อเปาหมายที่ตองการแสดงผล
รูปแบบคําสั่ง <A NAME= “ชื่อเปาหมาย”>………………..</A>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 25

2. คําสั่งในการกําหนดการแสดงผลการเชื่อมโยงของเปาหมาย
รูปแบบคําสั่ง <A HREF= “#ชื่อเปาหมาย”>……………….</A>
กิจกรรมที่ 21 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex21.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

ตัวอยางการใชคําสั่ง
<HTML><HEAD>
<TITLE> คําสั่งการเชื่อมโยงขอมูลภายในไฟล (Internal Links) </TITLE></HEAD>
<BODY>
<UL>
<LI> รายการที่ 1
<LI> รายการที่ 2
<LI> รายการที่ 3
<LI> รายการที่ 4
</UL>
<A HREF= "#link">
กลับไปสูหัวขอทดสอบการเชื่อมโยงขอมูลภายในเอกสารเดียวกัน </A>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 21

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 26

5.2 การเชื่อมโยงขอมูลออกไปสูภายนอกไฟล
รูปแบบคําสั่ง
< A HREF= “URL”>…………….</A>
มีสองแบบดวยกันคือแบบแรกเปนการเชื่อมโยงภายในโฮมเพจของเรา การกําหนดเปาหมายก็
เพียงแตกําหนดชื่อของไฟลก็เพียงพอแลวสวนแบบที่สองคือการเชื่อมโยงออกสูภายนอกโฮมเพจ
ซึ่งจะตองกําหนดชื่อของโฮมเพจที่เราตองการเชื่อมโยงโดยละเอียด
กิจกรรมที่ 22 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex22.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การเชื่อมโยงขอมูลออกไปสูภายนอกไฟล (External Links) </TITLE>
</HEAD>
<BODY>
ทดสอบการเชื่อมโยงขอมูลออกไปสูภายนอกไฟล
<A HREF=“http://sansuk.cjb.net”> ไปสู Sansuk </A>
</BODY>
</HTML>
การแสดงผล

ภาพที่ 22
6. การสรางตาราง (TABLE)
คําสั่งการสรางตารางจะทําใหขอมูลที่เราตองการแสดงผลมีความเปนระเบียบเรียบรอย
มากขึ้นเมื่อเราสามารถใชคาํ สั่งการสรางตารางไดอยางมีประสิทธิภาพ

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 27

รูปแบบคําสั่ง
<TABLE>
<CAPTION> ขอความอธิบายตาราง </CAPTION>
<TR><TH></TH><TH></TH><TH>--<./TH></TR>
<TR><TD></TD><TD></TD><TD>--</TD></TR>
--
--
<TR><TD><TD/><TD><TD/><TD>--</TD><TR>
</TADLE>
กิจกรรมที่ 23 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex23.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

ตัวอยางการใชคําสั่ง
<HTML>
<HEAD>
<TITLE> การสรางตาราง(TABLE) </TITLE>
</HEAD>
<BODY>
การสรางตาราง (TABLE)
<TABLE>
<CAPTION> ผลการแขงขัน </CAPTION>
<TR><TH> รางวัลที่ 1 </TH><TH> รางวัลที่ 2 </TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
</BODY>
</HTML>
การแสดงผล

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 28

ภาพที่ 23

การเพิ่มความหนาใหกับตาราง
รูปแบบคําสั่ง
<TABLE BORDER= “number”>
กิจกรรมที่ 24 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex24.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML><HEAD><TITLE> การสรางตาราง(TABLE) </TITLE></HEAD>
<BODY> การสรางตาราง (TABLE)
<TABLE BORDER= “10”>
<CAPTION> ผลการแขงขัน </CAPTION>
<TR><TH> รางวัลที่ 1 </TH><TH> รางวัลที่ 2 </TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
</BODY></HTML>
การแสดงผล

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 29

ภาพที่ 24
6.1 ตารางซอนตาราง
รูปแบบคําสั่ง
เหมือนกับคําสั่งการสรางตารางทั่วๆ ไป เพียงแตเราสรางตารางอีกชุดหนึ่งไวใน
<TD>……</TD> ของตารางหลัก
กิจกรรมที่ 25 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex25.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<HTML><HEAD><TITLE> ตารางซอนตาราง </TITLE></HEAD>
<BODY> ตารางซอนตาราง
<TABLE BORDER= “10”>
<CAPTION> ผลการแขงขัน </CAPTION>
<TR>
<TD>
<TABLE BORDER= “10”>
<TR><TH> รางวัลที่ 1 </TH><TH> รางวัลที่ 2 </TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 30

</TD>
<TH> รางวัลที่ 2 </TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
</BODY>
</HTML>

การแสดงผล

ภาพที่ 25
6. การแบงจอภาพโดยคําสั่ง FRAME SRC
รูปแบบคําสั่ง
<HTML>
<HEAD><TITLE>…………………………..</TITLE></HEAD>
<FRAMESET ROWS[COLS]= “number หรือ %”>
<FRAME SRC= ชื่อไฟลที่ตองการแสดงผลหรือ URL>
<FRAME SRC= ชื่อไฟลที่ตองการแสดงผล หรือ URL>
</FRAMESET>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 31

</HTML>
กิจกรรมที่ 26 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex26.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

ตัวอยางการใชคําสั่ง
<html>
<head>
<title>การแบงเฟรม</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
</head>
<frameset rows="211,481" cols="*">
<frame src="ex24.html" name="top">
<! แสดงไฟลชื่อ ex24.html ในเฟรมชื่อ top >
<frame src="ex25.html" name="main">
<! แสดงไฟลชื่อ ex25.html ในเฟรมชื่อ main>
</frameset>
<noframes><body bgcolor="#FFFFFF" text="#000000">
</body></noframes>
</html>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 32

ภาพที่ 26
8. การสรางแบบสอบถาม [Form]
ในโฮมเพจโดยทั่วไปนั้นมักจะมีการใชคําสั่งแบบสอบถามแทรกอยูโดยทั่วไป ไมวา จะ
เปนแบบฟอรมการจายชําระเงิน, แสดงความคิดเห็น, ลงทะเบียน ฯลฯ หรือแมกระทั่งการสราง
ตัวเลือกตาง ๆ
การสรางแบบสอบถามถือเปนการสื่อสารสองทางระหวางเจาของเว็บไซดกับผูเขาชม
ประเภทของคําสั่งในการสรางขอบเขตของแบบสอบถามโดยใชเครื่องหมายควบคุมพิเศษแบง
ออกเปน 3 ประเภทดังนี้

8.1 <TEXTAREA>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 33

เปนคําสั่งที่ใชสําหรับสรางกรอบปอนขอมูลไดแบบหลายบรรทัดและสามารถกําหนดขอมูลเริ่มตน
ในกรอบได
รูปแบบคําสั่ง
<TEXTAREA>……………. <TEXTAREA>
8.2 <SELECT>
เปนคําสั่งที่ใชสรางตัวเลือกที่อยูในกรอบแสดงตัวเลือกโดยผูชมสามารถที่จะเลือกคลิกตัวเลือกที่
กําหนดได
รูปแบบคําสั่ง
<SELECT>………….</SELECT>
8.3 <INPUT>
เปนคําสั่งสรางแบบสอบถามแบบบรรทัดเดียว เชน ปุมแบบวิทยุ, แบบชองทําเครื่องหมาย, ปุม
ยืนยัน, ปุมยกเลิก ฯลฯ
คําสั่งในการสรางแบบสอบถามโดยใชคําสั่ง METHOD และ ACTION
รูปแบบคําสั่ง
<FORM METHOD= “POST/GET” ACTION= “URL”>
……….ขอมูลของแบบสอบถาม.............
</FORM>
โดยที่
METHOD แบงเปน
GET และ POST ซึ่ง GET เปนคําสั่งรับขอมูล และ POST เปนคําสั่งสงขอมูล
ACTION
จะเปนคําสั่งทีร่ ะบุที่ตั้งของตัวประมวลผลทั้งรับและสงขอมูล โดยสวนใหญมักจะถูกออกแบบตัว
ประมวลผลเปน CGI ซึ่งสามารถทํางานโตตอบกับผูเขาชมไดทันที
คําสั่งในการสรางกรอบปอนขอความแบบหลายบรรทัดดวยคําสั่ง <TEXTAREA>
รูปแบบคําสั่ง
<FORM>
<TEXTAREA NAME= “ชื่อของขอมูล” ROWS= “number” COLS= “number”>
ขอมูลที่ตองการแสดงผลในกรอบปอนขอมูล
</TEXTAREA>
</FORM>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 34

กิจกรรมที่ 27 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล

นี้เปน ex27.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<FORM>
<TEXTAREA NAME= “ชื่อของขอมูล” ROWS= “5” COLS= “40”>
Show ::::::::::::::::::::::::::
</TEXTAREA>
</FORM>
การแสดงผล

ภาพที่ 27
คําสั่งในการสรางตัวเลือกดวยคําสั่ง <SELECT>
รูปแบบคําสั่ง
<FORM>
<SELECT NAME= “ชื่อของขอมูล”>
<OPTION SELECTED VALUE= “=ชื่อยอของตัวเลือก1”> ตัวเลือกที่ตองการใหแสดงผล 1
<OPTION VALUE= “=ชื่อยอของตัวเลือก2”> ตัวเลือกที่ตองการใหแสดงผล 2
<OPTION VALUE10
…………..
</SELECT>
</FORM>
กิจกรรมที่ 28 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex28.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 35

ตัวอยางการใชคําสั่ง
<FORM>
<SELECT NAME= “ชื่อของขอมูล”>
<OPTION SELECTED VALUE= “=ชื่อยอของตัวเลือก1”> number 1
<OPTION VALUE= “=ชื่อยอของตัวเลือก2”> number 2
<OPTION VALUE= “ชื่อยอของตัวเลือก 3”> number 3
</SELECT>
</FORM>
การแสดงผล

ภาพที่ 28

คําสั่งในการการกําหนดรูปแบบสอบถามแบบ <INPUT>
รูปแบบคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล” TYPE= “ชนิดของลักษณะการแสดงในแบบสอบถาม”
SIZE= “number” MAXLENGTH= “number” VALUE= “ชื่อยอของขอมูล”>
ขอมูลที่ตองการแสดงผล
</FORM>
ซึ่งคําสั่ง INPUT แบบสามารถแบงตามชนิดขดอง TYPE ไดดังนี้
<INPUT TYPE= “TEXT”>
รูปแบบคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล” TYPE= “TEXT”

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 36

SIZE= “number” MAXLENGTH= “number” >ขอมูลที่ตองการแสดงผล

</FORM>
กิจกรรมที่ 29 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex29.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล” TYPE= “TEXT”
SIZE= “10” MAXLENGTH= “20” >Show
</FORM>

การแสดงผล

ภาพที่ 30

<INPUT TYPE= “PASSWORD”>

รูปแบบคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล” TYPE= “PASSWORD”
SIZE= “number” MAXLENGTH= “number” >
</FORM>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 37

กิจกรรมที่ 30 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล

นี้เปน ex30.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
คําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล” TYPE= “PASSWORD”
SIZE= “10” MAXLENGTH= “10” >
</FORM>

การแสดงผล

ภาพที่ 30
เมื่อพิมพอักษรใดก็ตามจะแสดงผลเปน จุดแทน
<INPUT TYPE= “CHECKBOX”>
รูปแบบคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล”TYPE= “CHECKBOX”VALUE= “ชื่อยอตัวเลือก
1” CHECKED>ขอมูลที่ตองการแสดงผล
<INPUT NAME= “ชื่อของขอมูล” TYPE= “CHECKBOX” VALUE= “ชื่อยอตัวเลือก 2”>ขอมูลที่
ตองการแสดงผล
<INPUT NAME= “ชื่อของขอมูล” TYPE= “CHECKBOX” VALUE= “ชื่อยอตัวเลือก3”>ขอมูลที่
ตองการแสดงผล

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 38

</FORM>
กิจกรรมที่ 31 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex31.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล”TYPE= “CHECKBOX”VALUE= “ชื่อยอตัวเลือก
1” CHECKED>SHOW1
<INPUT NAME= “ชื่อของขอมูล” TYPE= “CHECKBOX” VALUE= “ชื่อยอตัวเลือก 2”>SHOW2
<INPUT NAME= “ชื่อของขอมูล” TYPE= “CHECKBOX” VALUE= “ชื่อยอตัวเลือก3”>SHOW3
</FORM>
การแสดงผล

ภาพที่ 31
<INPUT TYPE= “RADIO”>
รูปแบบคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล”TYPE= “RADIO”VALUE= “ชื่อยอตัวเลือก
1” CHECKED>ขอมูลที่ตองการแสดงผล
<INPUT NAME= “ชื่อของขอมูล” TYPE= “RADIO” VALUE= “ชื่อยอตัวเลือก 2”>ขอมูลที่
ตองการแสดงผล
<INPUT NAME= “ชื่อของขอมูล” TYPE= “RADIO” VALUE= “ชื่อยอตัวเลือก3”>ขอมูลที่
ตองการแสดงผล
</FORM>
กิจกรรมที่ 32 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex32.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 39

ตัวอยางการใชคําสั่ง
<FORM>
<INPUT NAME= “ชื่อของขอมูล”TYPE= “RADIO”VALUE= “ชื่อยอตัวเลือก
1” CHECKED>SHOW1
<INPUT NAME= “ชื่อของขอมูล” TYPE= “RADIO” VALUE= “ชื่อยอตัวเลือก 2”>SHOW2
<INPUT NAME= “ชื่อของขอมูล” TYPE= “RADIO” VALUE= “ชื่อยอตัวเลือก3”>SHOW3
</FORM>
การแสดงผล

ภาพที่ 32
<INPUT TYPE= “SUBMIT”>
รูปแบบคําสั่ง
<FORM>
<INPUT TYPE= “SUBMIT” VALUE= “ขอความทีแ่ สดงผลบนปุม”>
<INPUT TYPE= “SUBMIT”>
</FORM>
กิจกรรมที่ 33 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex33.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
ตัวอยางการใชคําสั่ง
<FORM>
<INPUT TYPE= “SUBMIT” VALUE= “GO”>
<INPUT TYPE= “SUBMIT”>
</FORM>

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 40

การแสดงผล

ภาพที่ 33
<INPUT TYPE= “RESET”>
รูปแบบคําสั่ง
<FORM>
<INPUT TYPE= “RESET” VALUE= “ขอความทีแ่ สดงผลบนปุม”>
<INPUT TYPE= “RESET”>
</FORM>
กิจกรรมที่ 34 ฝกเขียนภาษา HTML อยางงายในโปรแกรม EditPlus หรือ Notepad แลวบันทึกไฟล
นี้เปน ex34.html และทดสอบการแสดงผลดวยการเปดไฟลนี้ดวย Browser
<FORM>
<INPUT TYPE= “RESET” VALUE= “DEL”>
<INPUT TYPE= “RESET”>
</FORM>
การแสดงผล

ภาพที่ 34
หมายเหตุ : คําสั่งทั้งหมดสามารถนํามาประยุกตรวมกันเขาเปนฟอรมอันเดียวกันได

อ. องอาจ ชาญเชาว ศูนยนวัตกรรมและการนิเทศทางไกล รวบรวม

 เอกสารประกอบการฝกอบรม
หลักสูตรการพัฒนาสื่อผานเครือขายอินเทอรเน็ต

เรื่อง

ภาษา 

โดย
องอาจ ชาญเชาว

ศูนยนวัตกรรมและการนิเทศทางไกล
หนวยศึกษานิเทศก กรมสามัญศึกษา
 เอกสารประกอบการฝกอบรม
หลักสูตรการพัฒนาสื่อผานเครือขายอินเทอรเน็ต

เรื่อง

การสรางสื่อใหมีปฏิสัมพันธดวยโปรแกรม Macromedia Flash

โดย
องอาจ ชาญเชาว

ศูนยนวัตกรรมและการนิเทศทางไกล
หนวยศึกษานิเทศก กรมสามัญศึกษา
 คํานํา
เอกสารประกอบการฝกอบรมหลักสูตรการพัฒนาสื่อผานเครือขายอินเทอรเน็ต ฉบับนี้
เปนสื่อที่ใหทั้งเนื้อหาสาระความรูตางๆ เกี่ยวกับภาษา HTMLใชฝกปฏิบัติตามกิจกรรมตามที่
กําหนดในเอกสาร ซึ่งจะทําใหผูฝกอบรมไดเรียนรูดวยการปฏิบัติจริง ซึ่งจะทําใหเกิดความรูความ
เขาใจและมีทกั ษะยิ่งขึ้นหากไดมีการทดลองเปลี่ยนคาตัวแปรตางๆ ใหตางจากที่กําหนดไวใน
กิจกรรม
ขาพเจาหวังเปนอยางยิ่งวา เอกสารฉบับนี้จะกอใหเกิดคุณประโยชนในการใช
ประกอบการพัฒนาสื่อของทาน และเมื่อไดใชสื่อในกระบวนการเรียนการสอนแลวยอม
สงผลใหเกิดประโยชนตอระบบการศึกษาของไทยโดยรวม

องอาจ ชาญเชาว