คู่มือภาษา HTML และการจัดข้อความ

2013

วิชาการออกแบบและพัฒนาเว็บ
เพจ ง 31242
วิชา การออกแบบและพัฒนาเว็บเพจ และการจัดข้อความ
เรื่อง โครงสร้าง HTML

Chitnoy
Website:
12/3/2013

วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242

ครูปกรณ์กฤช กันทะเลิศ >> ก

คำนำ
เอกสารประกอบการเรียน วิชาการออกแบบและพัฒนาเว็บเพจ ประกอบการจัดกิจกรรม
การเรียนรู้ที่เน้นกระบวนการ กลุ่มสาระการเรียนรู้การงานอาชีพเทคโนโลยี ชั้นมัธยมศึกษาปีที่ 4
เล่มที่ 2 เรื่อง โครงสร้างภาษา HTML และการจัดข้อความ จัดทาขึ้นตามสาระการเรียนรู้และ
มาตรฐานการเรีย นรู้ พุ ทธศัก ราช 2551 ในการจัดท าเอกสารประกอบเรียนรู้เ ล่มนี้ ได้รับความ
ร่ ว มมื อ อย่ า งดี ยิ่ ง จากผู้ เ ชี่ ย วชาญที่ ไ ด้ รั บ ความอนุ เ คราะห์ ใ นการตรวจสอบ ความถู ก ต้ อ งและ
เหมาะสม
เอกสารปะกอบการเรียนเล่มนี้ หวังว่ าจะเป็นประโยชน์ต่อการจัดการเรียนรู้และเป็นส่วน
สาคัญในการพัฒนาการเรียนรู้ด้านต่างๆ พัฒนาและแก้ปัญหานักเรียน ชั้นมัธยมศึกษาปีที่ 4 ของ
กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ให้มีความรู้ ทักษะ ความเข้าใจ และผ่านเกณฑ์
ประเมิน

ปกรณ์กฤช กันทะเลิศ

Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] |

ข

<< วิชำกำรออกแบบและพัฒนำเว็บเพจ ง 31242

สำรบัญ
เรื่อง

หน้ำ

คำนำ

ก

สำรบัญ

ข

คาแนะนาในการใช้เอกสารประกอบการเรียนสาหรับครู ........................................................................... 1
คาแนะนาในการใช้เอกสารประกอบการเรียนสาหรับนักเรียน................................................................... 2
มาตรฐานการเรียนรู้................................................................................................................................ 3
สาระสาคัญ ............................................................................................................................................ 3
ผลการเรียนรู้ .......................................................................................................................................... 3
สาระการเรียนรู้....................................................................................................................................... 3
แบบทดสอบก่อนเรียน ............................................................................................................................. 4
โครงสร้างภาษา HTML และการจัดข้อความ ............................................................................................ 8
โครงสร้างภาษา HTML ........................................................................................................... 8
คาสั่งจัดตาแหน่งข้อความ ...................................................................................................... 14
คาสั่งจัดรูปแบบตัวอักษร ....................................................................................................... 19
คาสั่งกาหนดหัวข้อรายการ .................................................................................................... 27
สรุปท้ายหน่วยสาระสาคัญ ..................................................................................................... 31
แบบฝึกหัด .............................................................................................................................................. 32
แบบทดสอบหลังเรียน ............................................................................................................................. 39
บรรณานุกรม .......................................................................................................................................... 42

**************

Website: [ http://www.pakornkrit.com ]

คำแนะนำกำรใช้เอกสำรประกอบกำรเรียนสำหรับครู
การใช้เอกสารประกอบการเรียน การสร้างเว็บเพจ ภาษา HTML วิชา การออกแบบและ
พัฒนาเว็บเพจ รหัสวิชา ง31242 สาหรับนักเรียนชั้นมัธยมศึกษาปีที่ 4 ครูสอนเป็นผู้ที่มบทบาทสาคัญ
ี
ที่จะช่วยให้ดาเนินการเรียนรู้ของนักเรียนบรรลุตามวัตถุประสงค์ ครูผู้สอนจึงควรศึกษารายละเอียด
เกี่ยวกับการปฏิบัติตนก่อนที่จะใช้เอกสารประกอบเรียน ดังนี้
1. ครูต้องศึกษาเอกสารประกอบการเรียน และอ่านเนื้อหาสาระอย่างละเอียดรอบคอบพร้อม
ทั้งเข้าใจกับเนือหาทุกชุดก่อนการใช้งาน
้
2. ครูเตรียมเอกสารประกอบการเรียนให้ครบถ้วนเพียงพอกับจานวนนักเรียน
3. ครูเตรียมเครื่องมือวัดผลประเมินผลเพื่อทราบความก้าวหน้าของนักเรียน
4. ครูช้ีแจงให้นักเรียนทราบลาดับขั้นตอนและวิธีการสอนโดยใช้เอกสารประกอบการเรียน
อย่างชัดเจน และประโยชน์ที่ได้รับจากการสอนโดยใช้เอกสารประกอบการเรียน
5. ครูช้แจงให้นักเรียนทราบเกี่ยวกับบทบาทของนักเรียนในการเรียน โดยใช้เอกสาร
ี
ประกอบการเรียน ต้องมีความซื่อสัตย์ไม่ลอกเพื่อน ไม่ให้เพื่อนทาให้ หรือไม่ดูเฉลยก่อนลงมือทาแบบ
ฝึกทักษะ
6. ครูแจ้งผลการเรียนรู้ให้นักเรียนทราบ
7. ครูดาเนินการสอนตามกิจกรรมการเรียนรูที่กาหนดไว้ในแผนการจัดการเรียนรู้
้
8. ให้นักเรียน ทาแบบทดสอบก่อนเรียน และศึกษา เนื้อหาเอกสารประกอบการเรียน และทา
แบบฝึกหัด ใบงาน เล่ม 2 แล้วเปลี่ยนกันตรวจตามเฉลยที่ครูให้
9. ครูสังเกตความตังใจของนักเรียน ความสนใจการเรียน ความรับผิดชอบในการทางานของ
้
นักเรียนอย่างใกล้ชิด ถ้านักเรียนคนใดมีปัญหาครูจะได้ทาการช่วยเหลือทันที
10. เวลาในการจัดกิจกรรมการเรียนโดยใช้เอกสารประกอบการเรียนของนักเรียนแต่ละคน
อาจไม่เท่ากัน ครูควรยืดหยุ่นตามความเหมาะสมและสถานการณ์
11. เมื่อนักเรียนทาแบบฝึกหัด ใบงาน เสร็จแล้ว ให้นักเรียนทาแบบทดสอบหลังเรียน เพื่อ
ประเมินความก้าวหน้าของนักเรียน

2


คำแนะนำกำรใช้เอกสำรประกอบกำรเรียนสำหรับนักเรียน

การใช้เ อกสารประกอบการเรีย น การสร้างเว็บ เพจ ภาษา HTML วิชา การออกแบบและ
พัฒนาเว็บเพจ รหัสวิชา ง31242 สาหรับนักเรี ยนชั้นมัธยมศึกษาปีที่ 4 นักเรียนควรปฏิบัติตาม
คาแนะนา ดังนี้
1. อ่ า นค าชี้ แ จงเกี่ ย วกั บ เอกสารประกอบการเรี ย นรู้ และค าแนะน าในการใช้ เ อกสาร
ประกอบการเรียน สาหรับนักเรียนให้เข้าใจก่อนก่อนลงมือทางานหรือทาการศึกษาทุกครั้ง
2. ทาแบบทดสอบก่อนเรียนเพื่อประเมินความรู้เดิมของนักเรียน
3. ศึกษาเนื้อหาและทาแบบฝึก หัด ใบงาน เล่ม ที่ 2 โครงสร้างภาษา HTML และการจัด
ข้อความ ถ้าทาแบบฝึกหัด ใบงาน หรือศึกษาเนื้อหาไม่ได้ให้ศึกษาเนื้อหาใหม่อีกครั้ง หรือปรึกษา
ครูผสอน
ู้
4. เปลี่ ย นกั บ เพื่อนตรวจแบบฝึ ก ทัก ษะตามเฉลยที่ครูใ ห้ และบั นทึก คะแนนที่ไ ด้ จากนั้ น
ร่วมกันสรุปองค์ความรู้ โดยครูคอยชีแนะแนวทางและอธิบายเพิ่มเติม
้
5. ในการทาแบบฝึกทักษะ แบบทดสอบก่อนเรียน-หลังเรียน ให้นักเรียนพยายามทาด้วย
ความตังใจและมีความซื่อสัตย์ต่อตนเองมากที่สุด
้



ครูปกรณ์กฤช กันทะเลิศ >>

สำระที่ 3 เทคโนโลยีสำระสนเทศและกำรสื่อสำร
มำตรฐำน ง 3.1 เข้าใจ เห็นคุณค่า และใช้กระบวนการเทคโนโลยีสารสนเทศในการสืบค้นข้อมูล การเรียนรู้
การสื่อสาร การแก้ปัญหา การทางาน และอาชีพอย่างมีประสิทธิภาพ ประสิทธิผล และมีคุณธรรม

ตัวชี้วัด
ม.4-6/8 ใช้ฮาร์ดแวร์และซอฟต์แวร์ให้เหมะสมกับงาน
ม.4-6/10 ใช้คอมพิวเตอร์ในการประมวลผลข้อมูลให้เป็นสารสนเทศเพื่อประกอบการตัดสินใจ
ม.4-6/11 ใช้เทคโนโลยีสารสนเทศนาเสนองานในรูปแบบที่เหมาะสม ตรงตามวัตถุประสงค์ของงาน
ม.4-6/12 ใช้คอมพิวเตอร์ช่วยสร้างชินงานหรือโครงงานอย่างมีจิตสานึกและรับผิดชอบ
้

สำระกำรเรียนรู้
1.
2.
3.
4.
5.

โครงสร้างภาษา HTML
แท็กคาสั่งการจัดตาแหน่งข้อความ
แท็กคาสั่งการจัดรูปแบบข้อความ
แท็กคาสั่งการกาหนดหัวข้อรายการ
แท็กคาสั่งกาหนดสีตัวอักษร และพื้นหลัง และเส้นคั่น

ผลกำรเรียนรู้
1. เข้าใจโครงสร้างและไวยากรณ์ของโปรแกรมและภาษา หรือ กระบวนการการใช้เครื่องมือ
การสร้างเว็บเพจ
2. เข้าใจและประยุกต์ใช้แท็กคาสั่งต่างๆ เกี่ยวกับการจัดตาแหน่งข้อความ การจัดรูปแบบข้อความ
การกาหนดหัวข้อรายการ
3. สามารถใช้แท็กคาสั่งกาหนดสีตัวอักษร สีพืนหลังและการการขีดเส้นคั่นหน้าเว็บเพจได้
้

3

4


หน่วยที่ 2 เรื่อง โครงสร้ำงภำษำ HTML และกำรรูปแบบข้อควำม
จำนวน 20 ข้อ จงทำเครื่องหมำย บนตัวเลือกที่ถูกต้องเพียงข้อเดียว
1. ข้อใดกล่าวถูกต้องเกี่ยวกับตั้งชื่อไฟล์ เว็บเพจ ไม่ถูกต้อง
ก. ใช้ตัวอักษรภาษาอังกฤษ
ข. ใช้สัญลักษณ์พิเศษ ได้ เช่น - _ $
ค. ใช้ตัวเลข
ง. ควรตั้งชื่อเป็นภาษา และมีช่องว่าง
2. HTML ย่อมาจากอะไร
ก. Height Technology maker location
ข. Hypertext Markup language
ค. Hexagram Thai mark Language
ง. Hypertext Marker uniform Language
3. คาสั่งหรือแท็กใดต่อไปนีใช้สาหรับกาหนดข้อความแสดงบนหัวเว็บเบราเซอร์
้
ก. <html>......</html>
ข. <title>......</title>
ค. <body>......</body>
ง. <head>......</head>
4. คาสั่งใดต่อไปนีเป็นแท็กเดี่ยว หรือไม่จาเป็นต้องมีแท็กปิด
้
ก. <pre>
ข. <b>
ค. <br>
ง. <hr>
5. แท็กใด คือส่วนที่ทาให้ เนื้อหา ข้อความ ภาพ ข้อมูลแสดงต้องเขียนในคาสั่งใด
ข. <body>......</body>


ค. <title>......</title>



6. คาสั่ง <BR> ใช้สาหรับ
ก. ขึนย่อหน้าใหม่
้
ข. ขีดเส้นคั่น
ค. ขึนบรรทัดใหม่
้
ง. เว้นวรรค
7. กาหนดหัวเรื่อง ข้อใดต่อไปนี้ เป็นหัวข้อเรื่องที่ เล็กที่สุด
ก. <h1>
ข. <h5>
ค. <h3>
ง. <h6>
8. คาสั่งใด ใช้สาหรับ เพิ่มช่องว่าง
ก.  
ข. &blank;
ค. &psnb;
ง. &space;
9. Tag ใช้สาหรับตีเส้นคั่นคือแท็กใด
ก. <div>…</div>
ข. <a lign=””>…</p>
ค. <hr>
ง. <pre>…</pre>
10. <p align=”justify”>โปรดเถิดรัก เหนื่อยเกินไปไหม </p> แสดงผลลัพธ์อย่างไร
ก. ข้อความขึนย่อหน้าใหม่ ชิดขวา
้
ข. ข้อความขึนย่อหน้าใหม่ กึ่งกลาง
้
ค. ข้อความขึนย่อหน้าใหม่ กระจาย
้
ง. ข้อความขึนย่อหน้าใหม่ จัดชิดขอบด้านหน้า-หลัง
้


5

6


11. การจัดรูปแบบลักษณะข้อความให้เป็นไปตามที่กาหนด มีการเคาะ เว้นวรรค หรือ เป็นลักษณะ Tab
ตามที่รูปแบบควรใช้แท็กใด
ก. <pre>
ข. <li>
ค. <ol>
ง. <p>
12. การระบุแท็กหมายเหตุ ในเอกสารเว็บเพจ ใช้แท็กใดต่อไปนี้
ก. <-- ข้อความ - -?>
ข. <?-- ข้อความ - ->
ค. <!-- ข้อความ - ->
ง. <-- ข้อความ - -!>
13. แท็กใด ใช้สาหรับกาหนดรายการ ให้พิมพ์เลข 1 2 3 อัตโนมัติ
ก. <il>
ข. <ol>
ค. <ul>
ง. <dl>
14. แท็กใด ใช้สาหรับกาหนดรายการ ให้แสดงหัวข้อย่อยเป็น สัญลักษณ์ วงกลมใส สี่เหลี่ยม วงกลมทึบ
ก. <ul>
ข. <ol>
ค. <dt>
ง. <dl>
15. กรณีต้องการให้ แสดงหัวข้อย่อย แสดงสัญลักษณ์  แท็ก กาหนด type=”” รูปแบบใด
ก. square
ข. circle
ค. disc
ง. triangle



16. การให้คานิยาม สาหรับอธิบายศัพท์ ควรใช้แท็กใด
ก. <ol>
ข. <dt>
ค. <dl>
ง. <li>
17. <b><i>คนอ่านน่ารัก</b></i> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร
ก. คนน่ำรัก
ข. คนน่ารัก
ค. คนน่ารัก
ง. คนน่ารัก
18. ข้อใดต่อไปนีให้ความหมายของแท็กได้ถูกต้อง
้
ก. <u> ตัวขีดเส้นใต้ <sub> ตัวยก
ข. <b> ตัวหนา <i> ขีดเส้นใต้
ค. <sup> ตัวยก <del> ตัวขีดฆ่า
ง. <u> ตัวเอียง <b> ตัวหนา
19. ฉัน<sub>รัก<sub/>เธอ<sub>มาก</sub> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร
ก. ฉันรักเธอมาก
ข. ฉันรักเธอมาก
ค. ฉันรักเธอมาก
ง. ฉันรักเธอมาก
20. <font face=”” color=”” size=””>…..</font> จากแท็กนีข้อใดกล่าว ผิด
้
ก. face ใช้สาหรับใช้แบบตัวอักษร
ข. size ใช้สาหรับกาหนดขนาดตัวอักษร
ค. color ใช้สาหรับใส่สีตัวอักษรเป็นรหัสสีเท่านั้น
ง. font แท็กใช้กาหนดรูปตัวอักษรให้มลักษณะต่างๆ
ี


7

8


หน่วยกำรเรียนรูที่ 2
้
เรื่อง โครงสร้ำงภำษำ HTML และกำรจัดกำรกับข้อควำม
โครงสร้ำงเอกสำร HTML
เอชทีเอ็มแอล (HTML, Hyper Text Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้าง
การเขียนโดยอาศัยป้ายระบุ หรือเรียกว่า (Tag) แท็ก หรือคาสั่งสาหรับควบคุมการแสดงผลข้อความรูป หรือวัตถุ
ต่างๆ อ่านโปรแกรมเว็บเบราเซอร์ ซึ่งแท็กหรือคาสั่งและคาสั่งนั้น อาจจะมีส่วนเพิ่มหรือส่วนขยายที่ใช้สาหรับบอก
คุณลักษณะพิเศษ (Attribute) แอททริบิวต์ สาหรับระบุหรือควบคุมการแสดงผลเพิ่มเติม โดยแต่คาสั่งจะมีลักษณะ
แตกต่างกันออไป
ป้ำยระบุ (Tag) หรือ แท็ก หรือ คำสั่ง เป็นลักษณะเฉพาะตัวของภาษา HTML โดยลักษณะคาสั่งส่วนใหญ่
จะอยู่ภายใต้เครื่องหมายน้อยกว่า และ เครื่องหมายมากกว่า < และ > โดยอาจแบ่งเป็น 3 ประเภทดังนี้
- แท็กเดี่ยว เป็นคาสั่งที่มีแต่แท็กเปิดโดยไม่มีแท็กเปิด เช่น <br> คือ ขึ้นบรรทัดใหม่ไม่ต้องปิดด้วย แท็ก
</br> ก็ได้
- แท็กคู่หรือ แท็กเปิด ต้องมีการระบุ เป็นคู่เปิดปิดเสมอ เช่น <htrml>…</html>, <b>…</b> ตัวหนา คือ
แท็กเปิดอยู่ในเครื่อง <> และแท็กปิด </> มีเครื่องหมายทับเพิ่มขึ้นมาหรือเรียกว่า Slash:สแลช กรณีที่
ไม่ปิดอาจทาผลให้คาสั่งทางานไม่หยุดหรือทางานไม่ถูกต้อง
- แท็กพิเศษ ไม่ต้องมีแท็กเปิดหรือปิด <> เช่น แท็กคาสั่งเว้นวรรค ใช้  
ลักษณะพิเศษ (Attributes)
เป็นส่วนที่ทาหน้าที่ขยายคาสั่งหรือแท็กหลัก ซึ่งระบุในภายในเครื่อง <> โดยการกาหนดลักษณะ
พิเศษสามารถกาหนดได้มากว่า 1 ลักษณะพิเศษ ต่างแตกกันออกไปตามคุณลักษณะของคาสั่งแท็กนั้นๆ
ตัวอย่างเช่น คาสั่ง <p> …</p> คือใช้สาหรับขึ้นย่อหน้าใหม่ ในคาสั่ง <p> ยังสามารถเพิ่มคุณลักษณะพิเศษ
เข้าไปในได้ เช่น คาสั่ง <p> สามารถใส่ลักษณะพิเศษได้ Left/Right/center/justify อย่างใดอย่างหนึ่ง
ตัวอย่าง

<p align=”Left/Right/Center/Justify”> ข้อความ </p>

ตัวอักษรสีแดง สีม่วง align=”Left/Right/Center/Justify” นีเราเรียกว่าส่วนขยายลักษณะพิเศษ
้
นั้นเอง อธิบายคือ คาสั่งขยายนี้ ขึนย่อใหม่ แล้วส่วนลักษณะพิเศษ เช่น ทาให้ตัวหนังสือ ชิดซ้าย ชิดขวา
้
กึ่งกลาง และจัดหน้าและหลังชิดขอบ เป็นต้น




โปรแกรม Editor ที่สำมำรถใช้ในกำรเขียนเว็บเพจภำษำ HTML ประเภท Text Editor
1. Programmer’s Notepad

ภาพที่ 2.1 รูปจอโปรแกรม Programmer’s Notepad

2. Notepad (ซึ่งถูกติดตังในระบบปฏิบัติการ Windows ไม่ต้องติดตังเพิ่ม)
้
้

ภาพที่ 2.2 รูปจอโปรแกรม Notepad

3. Notepad++

ภาพที่ 2.3 รูปจอโปรแกรม Notepad++

9

10


4. Gedit

ภาพที่ 2.4 รูปจอโปรแกรม Gedit

5. Edit plus

ภาพที่ 2.5 รูปจอโปรแกรม Edit plus

สำหรับเอกสำรประกอบกำรเรียนเล่มนี้จะใช้ Notepad++ สำหรับเขียนเว็บภำษำ HTML
กรณีขอข้ามขั้นตอนการติดตั้งโปรแกรมสามารถหาดาวน์โหลดได้ฟรีจากอินเทอร์เน็ต เนื่องจากเป็น
โปรแกรมประเภทฟรีแวร์
1. การเข้าสู่โปรแกรมเข้าที่ Start-->เลือก All Program -->Notepad++ [ระบบปฏิบัติการ Windows 7]

ภาพที่ 2.6 หน้าจอโปรแกรม Notepad++




2. ขั้นตอนการกาหนดภาษาที่ใช้เขียนเว็บเพจ เมนู Language ภาษา -->H--> HTML

ภาพที่ 2.7 หน้าจอแสดงการกาหนดภาษา HTML

3. กาหนดการเข้ารหัสสาหรับเว็บเพจ เมนู Encoding-->Unicode UTF-8 Without Bom ,BOM (Byte Order
Mark) เป็นตัวช่วยในการบอกว่า character นั้นเป็น Big หรือ Small Endian หรือจะเลือก UTF-8 ธรรมดา
ก็ได้

ยู นิ โ ค้ ด (อั ง กฤษ: Unicode)
คือมาตรฐานอุตสาหกรรมที่
ช่วยให้คอมพิวเตอร์แสดงผล
และจัดการข้อความธรรมดา
ที่ ใ ช้ ใ นระบบการเขี ย นของ
ภาษาส่ ว นใหญ่ ใ นโลกได้
อย่างสอดคล้องกัน

ภาพที่ 2.8 หน้าจอการเข้ารหัสข้อมูล

4. การบันทึกเอกสาร HTML เมนู File แฟ้ม-->Save as บันทึกเป็น

ภาพที่ 2.9 แสดงการบันทึกข้อมูล


11

12


ข้อกำหนดของกำรตั้งชื่อไฟล์สำหรับเอกสำร HTML
- การตั้งชื่อควรใช้ตัวอักษร a - z หรือตัวเลข 0 - 9 ผสมกันก็ได้
- ไม่ควรตั้งชื่อไฟล์เป็นภาษาไทย เพราะไม่เป็นมาตรฐาน เพราะอาจมีสนับสนุนกับระบบปฏิบัติของ Web
Server บางระบบ
- ตั้งชื่อไฟล์ไม่ควรมีเว้นวรรค เนื่องจากบางระบบปฏิบัติการไม่สนับสนุน
- สามารถใช้สัญลักษณ์พิเศษ ได้ เช่น _ ขีดล่าง, - เครื่องหมายขีดกลางม, $ แต่ไม่แนะนาให้ใช้
- หน้าแรกของเว็บไซต์ ควรตั้งชื่อ index หรือ default ก็ได้
- ควรตั้งชื่อไฟล์ที่ไม่ควรยาวเกินไป และควรมีความหมายเพื่อง่ายในการจัดจาไม่สับสน
- ตัวอย่างการตั้งไฟล์ เช่น index.html, love.html, download.html, home.html contact.html เป็นต้น ชื่อที่ตง
ั้
แล้วอาจให้สับสนหรือลืมง่าย เช่น 01.html, aaa.html, C009.html
โครงสร้ำงภำษำ HTML
<html>
<head>
.....
<คาสั่งที่อยู่ในส่วนหัวของเอกสาร>
</head>
<body>
.....
<คาสั่งที่อยู่ในส่วนของเนื้อหา>
</body>
</html>
ตำรำง 2.1 โครงสร้ำงภำษำ HTML
จำกตำรำงสำมำรถอธิบำยได้ดังนี้
บรรทัดที่ 1 <html>
บรรทัดที่ 2 <head>
บรรทัดที่ 3 .....
<คาสั่งที่อยู่ในส่วนหัวของเอกสาร>
บรรทัดที่ 4 </head>
บรรทัดที่ 5 <body>
บรรทัดที่ 6 .....
<คาสั่งที่อยู่ในส่วนของเนื้อหา>
บรรทัดที่ 7 </body>
บรรทัดที่ 8 </html>
ตำรำงที่ 2.2 แสดงคำอธิบำยโครงสร้ำง HTML



บรรทัดที่ 1 <html> เป็นการระบุว่า เริ่มเขียนภาษา HTML
บรรทัดที่ 2 <head> เป็นส่วนที่ใช้สาหรับอธิบายข้อมูลเฉพาะที่เกี่ยวกับเอกสารเว็บ
บรรทัดที่ 3 คาสั่งที่สามารถใส่ในส่วน head เช่น <title>ข้อความ</title> หรือ <meta>…..</meta>
บรรทัดที่ 4 </head> ปิดส่วนหัว
บรรทัดที่ 5 <body> ส่วนของเนื้อหาเอกสารหลักของเอกสารหน้าเว็บ โดยส่วนนี้จะนาไปแสดงผลที่โปรแกรมเว็บ
เบราเซอร์ เช่น ข้อความ รูปภาพ เสียง วีดีโอ ตาราง ฯลฯ
บรรทัดที่ 7 <body> ปิดคาสั่งส่วนเนือหาทั้งหมด
้
บรรทัดที่ 8 ปิดคาสั่งภาษา HTML
เข้ำโปรแกรม Notepad++ พิมพ์คำสั่งดังนี้ บันทึกชื่อไฟล์ ex1.html
บรรทัดที่ 1 <html>
บรรทัดที่ 2 <head>
บรรทัดที่ 3
<title> ยินดีตอนรับ </title>
้
บรรทัดที่ 4 </head>
บรรทัดที่ 5 <body>
บรรทัดที่ 6
สวัสดี
บรรทัดที่ 7 </body>
บรรทัดที่ 8 </html>
ตำรำงที่ 2.3 แสดงส่วนประกอบของภำษำ HTML
จากตางรางที่ 2.3 สามารถแสดงผลเว็บเบราเซอร์ได้ดังนี้ (ในเอกสารเล่มจะใช้ Internet Explorer 9.0 เป็นตัว
แสดงผลเป็นหลัก
*
บรรทัดที่ 3 แสดงบนหัวของเว็เบราเซอร์

หมายเหตุ*

กรณีที่เว็บเพจไม่

สามารถแสดงผลเป็นภาษาไทยหรือ
อ่านไม่ออกเป็นคาภาษาไทยให้คลิก
ขวาพื้นที่ว่างของ โปรแกรม IE แล้ว

บรรทัดที่ 6 แสดงในส่วนของ Body

เลือก Encoding-->More-->Unicode
UTF-8

เพื่อแสดงผลเป็นภาษาตาม

รูปแบบที่เราได้เข้ารหัสไว้ สาหรับ เว็บ
ภาพที่ 2.10 แสดงผลจาก IE

เบอร์เซอร์ก็สามารถเปลี่ยนตามเมนู

ของโปรแกรมนั้นๆ

13

14


การจัดการกับข้อความ
1. กำรขึ้นบรรทัดใหม่ (Break) : br
แท็ก :
<br> แท็กสำสั่งนี้เป็นแท็กเดี่ยวไม่มีแท็กปิดไม่ต้องใส่ </b>
ตำแหน่ง: <body>………..</body>
อธิบำย: ใช้สาหรับขึ้นบรรทัดใหม่
้
ตัวอย่ำง: <br>คนที่ถูกแฟนทิง<br>ไม่ใช่คนอกหัก<br>เค้าแค่กาลังเรียนรู้<br>ความรักในหลายๆด้าน

ภาพที่ 2.11 แสดงการใช้คาสั่งขึนบรรทัดใหม่
้

2. กำรขึ้นประโยคย่อหน้ำใหม่ (Paragraph) : P
แท็ก :
<p>ข้อควำม</p>
อธิบำย: ใช้สาหรับจัดย่อหน้าให้สาหรับข้อความ และเว้น 1 บรรทัดหลังสิ้นสุดข้อความ
ีิ
ตัวอย่ำง: <p>สุขภาพเป็นเรื่องสาคัญอันหนึ่ง โปรดถนอม ตัวเองให้มาก เมื่อยังเป็นวัยรุ่น อย่าใช้ชวตให้หนักเกินไปลอง

ลักษณะพิเศษ

หาเวลาอยู่ว่างๆ ไม่ตองทาอะไรเลยดูบ้าง อย่าแบก โลกทังใบไว้คนเดียว และอีกอย่างงานก็ไม่ใช่ทุกอย่างของ
้
้
ชีวต</p>
ิ
<p>เมื่อมีโอกาสใดก็ตามเข้ามาจงอย่าปฏิเสธ ถึงจะล้มเหลว แต่มันก็คอ ประสบการณ์
ื
สร้างเนื้อ สร้างตัวให้ได้เร็วที่สุด ในขณะที่คณยังมีกาลัง ยังเป็นหนุ่ม-สาว เพราะการฝ่าฟันอุปสรรคในช่วง
ุ
อายุมาก ไม่ใช่เรื่องสนุก</p>
<p align=”left/right/center/justify”>ข้อควำม</p>

ภาพที่ 2.12 แสดงการใช้คาสั่งขึนย่อหน้าใหม่
้



3. กำรขึ้นประโยคย่อหน้ำใหม่ <p align=””>
แท็ก :
<p align=”n”>ข้อควำม</p>
Left: จัดชิดซ้าย Right:จัดชิดขวา Center: จัดกี่งกลาง Justify: จัดชิดขอบซ้าย-ขวา
ค่ำ:n
อธิบำย: ใช้สาหรับจัดย่อหน้าให้สาหรับข้อความ และเว้น 1 บรรทัดหลังสิ้นสุดข้อความ
ิ
ตัวอย่ำง: <p align=”left”>ฝรั่งมีวตามินมากกว่าส้มเขียวหวานถึง 9 เท่า ซึ่งเพียงพอต่อความต้องการของร่างกายใน
แต่ละวัน (30 - 40 มิลลิกรัม) และนอกจากผลแล้วใบฝรั่งเองก็มประโยชน์ มีคุณค่าเป็นยาสมุนไพรด้วย นั่น
ี
คือ ใช้แก้อาการท้องเสียหรือนามาเคียวดับกลิ่นปาก</p>
้
<p align=”right”> กีวสีเขียวที่เราคุ้นเคยยังมีกีวโกลด์หรือกีวสีทองให้เลือกบริโภค กีวีทั้งสองชนิดมีปริมาณ
ี
ี
ี
วิตามินซีสูงสุดหากเทียบกับผลไม้ขึนชื่อเรื่องวิตามินซี อาทิ ส้ม หรือมะละกอ จากการวิจัยพบว่ากีวีหนึ่งผล มี
้
วิตามินซีมากกว่าส้มหนึ่งลูกถึง 74% </p>
<p align=”center”>การวิจัยทางการแพทย์ของสหรัฐอเมริกาพบว่า ในน้าทับทิมมีสารต้านอนุมูลอิสระ
หลายชนิดและมีประสิทธิภาพสูงมาก สามารถลดภาวะการสะสมไขมันในผนังเส้นเลือด ป้องกันเส้นเลือดอุด
ตันและแข็งตัว ซึ่งจะก่อให้เกิดโรคหัวใจขาดเลือด</p>
<p align=”justify”>ตามมา รวมทั้งทาให้เส้นเลือดที่หนาตัวและมีไขมันสะสมซึ่งเป็นเส้นเลือดที่ไม่ดมความ
ี ี
หนาตัวลดลงและลดไขมันที่สะสมลงอีกด้วย ช่วยบารุงหัวใจในผู้ป่วยที่เป็นโรคหัวใจขาดเลือดโดยเพิ่มการ
ไหลเวียนที่ดขนและลดภาวะหัวใจขาดเลือดในผู้ป่วยโรคหัวใจ </p>
ี ึ้

“left”
“right”
“center”

“justify”

ภาพที่ 2.13 แสดงการใช้คาสั่งขึนย่อหน้าใหม่ <p align=””>
้


15

16


4. กำรเว้นวรรค หรือกำรแทรกช่องว่ำง (Nonbreaking space) :  
แท็ก :
  เป็นแท็กเดี่ยวไม่มีกำรเปิดและปิด เครื่องหมำย <>…</>
อธิบำย: ใช้สาหรับเว้นวรรค (โดยปกติ html การเคาะจะไม่มีผลในการแสดงผล) จึงต้องใช้แท็กนี้มาช่วย
ในการทาให้เกิดช่องว่างหรือเคาะสามารถพิมพ์ติดกันได้ หรืออาจใส่ช่องว่างระหว่างแท็ก
 
ตัวอย่ำง: Hotmail
Gmail
Yahoo
Youtube       Facebook       Google

ไม่มีคาสั่ง   แม้จะเคาะ
กี่ครั้งก็เว้นเพียง 1 เคาะ

0t

เว้นวรรค 3 เคาะ

ภาพที่ 2.14 แสดงผลการใช้คาสังเว้นวรรค
่

5. กำรจัดรูปแบบข้อควำมให้ตรงกับเอกสำร (Preformatted Text) : pre
แท็ก :

<pre> ข้อควำม </pre>
อธิบำย: จัดข้อความให้ตรงกับเอกสารที่เขียนไว้ พิมพ์อย่างไรออกมาแบบนั้น
รายการ
บาท
ตัวอย่ำง: ที่
1.
2.
<pre>
เลขที่
1
9
</pre>

แมว
นก
ชื่อ-สกุล
แก้ว
เสาร์

120
90
ค่าอาหาร
40
100




ไม่มีคาสั่ง <pre> ข้อความจะเว้น
1 เคาะ และไม่ขนบรรทัดใหม่
ึ้

ใช้คาสั่ง <pre> แสดงผล
ตามที่เขียนคาสั่ง

ภาพที่ 2.15 แสดงผลการใช้คาสั่งเว้นวรรค

6. กำรจัดตำแหน่งข้อควำม/วัตถุกึ่งกลำง (Center Text) : center
แท็ก :
<center> ข้อควำม/วัตถุ/ภำพ/ตำรำง/อื่นๆ</center>
ึ่
อธิบำย: จัดตาแหน่งข้อความ/วัตถุกงกลางหน้าจอ ตามแนวนอน
ตัวอย่ำง: <center> LOVE YOU </center>

ภาพที่ 2.16 แสดงผลการใส่หมายเหตุ

7. กำรจัดตำแหน่งข้อควำม/วัตถุกึ่งกลำง (Division Alignment) : <div align=”n”>
แท็ก :
<div align=””> ข้อควำม/วัตถุ/ภำพ/ตำรำง/อื่นๆ</div>
Left, Right, Center
ค่ำ n:
ึ่
อธิบำย: จัดตาแหน่งข้อความ/วัตถุกงกลางหน้าจอ ตามแนวนอน พร้อมขึ้นบรรทัดใหม่
ตัวอย่าง: <div align=”left”> LOVE YOU </div>
<div align=”right”> LOVE BEAT </div>
<div align=”center”> LOVE SICK </div>

17

18


ภาพที่ 2.17 แสดงผลการใช้แท็ก DIV

8. กำรกำหนดหัวเรื่อง/หัวข้อหลัก/หัวข้อรอง (Heading): <hn>
<hn> ข้อควำม </hn>
ตัวเลขตั้งแต่ 1-6
ค่ำ n :
อธิบำย: กาหนดหัวข้อเรื่องหรือหัวข้อหลัก หัวข้อรอง ตามขนาดที่ระบุไว้
ตัวอย่ำง: <h1>หัวเรื่อง 1</h1>
<h2>หัวเรื่อง 2</h2>
<h1>วิชาการออกแบบและพัฒนาเว็บเพจ</h1>
<h2>หน่วยการเรียนรู้ที่ 1 ความรูเบืองเบืองต้น HTML</h2>
้ ้ ้
<h3>- ความหมาย</h3>
<h3>- โครงสร้าง</h3>
<h3>- เริ่มต้นการเขียนเว็บเพจ </h3>
<h3>- คาสั่งย่อหน้าใหม่ </h3>
<h3>- คาสั่งเว้นวรรค </h3>
แท็ก :


ภาพที่ 2.18 แสดงผลการใช้คาสั่งหัวเรื่อง
ใช้คาสั่ง <pre> แสดงผล
ตามที่เขียนคาสั่ง

ตัวอย่างการใช้คาสั่งหัวข้อ
เรื่องขนาดต่างๆ

9. กำรแทรกหมำยเหตุ (Comment)
แท็ก :


ข้อความจะแสดงดังนี้ สาหรับข้อความที่อยู่ในแท็ก
<!-- ข้อความ -- > จะไม่แสดงออกมา

ภาพที่ 2.19 แสดงผลการใส่หมายเหตุ

กำรจัดรูปแบบตัวอักษร และกำรกำหนดรำยกำร
การจัดรูปแบบตัวอักษรลักษณะคล้ายกับ Microsoft Word เช่น การทาตัวหนา ตัวเอียง ขีดเส้นใต้ ตัวยก
ตัวห้อย การแทรกอักขระหรือสัญลักษณ์พิเศษต่างๆ ซึ่งมีรูปแบบแท็กหรือคาสั่งต่างๆ ดังนี้


19

20


1. ตัวหนำ ตัวเอียง ตัวขีดเส้นใต้ Bold: B, italic: I, Underline: U
แท็ก :
<b> ข้อควำม </b> <i> ข้อควำม </i> <u> ข้อควำม </u>
ตำแหน่ง: <body>…</body>
อธิบำย: <b> คือ ตัวหนา <i> คือ ตัวเอียง <u> คือ ตัวขีดเส้นใต้
ตัวอย่ำง: <b> ภาษาเกาหลี</b> <i> คิดถึงนะ </i> <u> คือ โพโกชีพอ</u>
<b><i><u> ชัล ชาโย ฝันดี</b> </i> </u>

หนา เอียง ขีดเส้นใต้
หนา

เอียง

ขีดเส้นใต้

ภาพที่ 2.20 แสดงผลตัวอักษรหนาเอียงขีดเส้นใต้

2. ตัวยก ตัวห้อย ตัวขีดฆ่ำ ตัวแทรก SuperScript: sup, SubScript: sub, Delete: del, Insert: ins
แท็ก :
<sup>ข้อควำม </sup><sub> ข้อควำม </sub> <del> ข้อควำม </del> <ins>..…</ins>
อธิบำย: <sup> คือ ตัวยกกาลัง <sub> คือ ตัวห้อย <del> ตัวขีดกลาง <ins> ตัวแทรกเหมือนแท็ก <u>
ตัวอย่ำง: 3<sub> 9</sub> 50<sub> 7</sub> ราคาเต็ม <del> 499 </del> <ins>เหลือ 199</ins>

ตัว

ตัวห้อย

ตัวขีดฆ่า

ตัวแทรก

ภาพที่ 2.21 แสดงผลตัวยกตัวห้อย ตัวขีดฆ่า ตัวแทรก



3. กำรแทรกอักขระหรือสัญลักษณ์พิเศษ (Special Characters)
สุวทย์. คาสั่งแสดงสัญลักษณ์พเศษต่างๆ.[ออนไลน์].http://htmlcode-itguide.blogspot.com/2011/08/blog-post_2696.html
ิ
ิ
สืบค้น เมื่อวันที่ 25 พฤศจิกายน 2556.
Character

Entity Number

Tag/Code

Description

∀

∀

∀

for all

∂

∂

∂

part

∃

∃

∃

exists

∅

∅

∅

empty

∇

∇

∇

nabla

∈

∈

∈

isin

∉

∉

∉

notin

∋

∋

&ni;

ni

∏

∏

∏

prod

∑

∑

∑

sum

−

−

−

minus

∗

∗

&lowast;

lowast

√

√

√

square root

∝

∝

&prop;

proportional to

∞

∞

∞

infinity

∧

∧

&and;

and

∨

∨

&or;

or

∩

∩

∩

cap

∪

∪

∪

cup

∫

∫

∫

integral

∴

∴

&there4;

therefore

∼

∼

&sim;

similar to

≅

≅

&cong;

congruent to

≈

≈

≈

almost equal

≠

≠

≠

not equal

≡

≡

&equiv;

equivalent

≤

≤

≤

less or equal

≥

≥

≥

greater or equal

⊂

⊂

⊂

subset of

⊃

⊃

⊃

superset of

⊄

⊄

&nsub;

not subset of

⊆

⊆

&sube;

subset or equal

⊇

⊇

&supe;

superset or equal

⊕

⊕

&oplus;

circled plus

⊗

⊗

&otimes;

cirled times

⊥

⊥

&perp;

perpendicular


21

22


Character

Entity Number

Tag/Code

Description

Œ

Œ

&OElig;

capital ligature OE

œ

œ

&oelig;

small ligature oe

Š

Š

&Scaron;

capital S with caron

š

š

&scaron;

small S with caron

Ÿ

Ÿ

&Yuml;

capital Y with diaeres

ƒ

ƒ

&fnof;

f with hook

ˆ

ˆ

&circ;

modifier letter circumflex accent

˜

˜

&tilde;

small tilde

–

–

–

en dash

—

—

—

em dash

©

-

©

Copy r
ight

®

-

®

R t ed
egis er

‚

‚

&sbquo;

single low-9 quotation mark

†

†

&dagger;

dagger

‡

‡

&Dagger;

double dagger

•

•

•

bullet

…

…

…

horizontal ellipsis

‰

‰

&permil;

per mille

′

′

′

minutes

″

″

″

seconds

‹

‹

&lsaquo;

single left angle quotation

›

›

&rsaquo;

single right angle quotation

‾

‾

&oline;

overline

€

€

€

euro

™

™

™

trademark

←

←

←

left arrow

↑

↑

↑

up arrow

→

→

→

right arrow

↓

↓

↓

down arrow

↔

↔

↔

left right arrow

↵

↵

&crarr;

carriage return arrow

⌈

⌈

&lceil;

left ceiling

⌉

⌉

&rceil;

right ceiling

⌊

⌊

&lfloor;

left floor

⌋

⌋

&rfloor;

right floor

◊

◊

&loz;

lozenge

♠

♠

&spades;

spade

♣

♣

&clubs;

club

♥

♥

&hearts;

heart

♦

♦

&diams;

diamond




แท็ก :

ยกตัวอย่ำง 4 แท็กนี้จำกตำรำงด้ำนบน € © ® &trade
อธิบำย: € คือ € © คือ © ® คือ ® &trade คือ ™
ตัวอย่ำง: เงิน 50 € สงวนลิขสิทธิ์ © เครื่องหมายการค้าจดทะเบียน ®
เครื่องหมายการค้า™

€

©

®

™


4. กำหนดแบบอักษร (Font) :font
แท็ก :
<font size=”n” face=”?” color=”ชื่อสี/รหัสสี”>ข้อควำม</font>
ค่ำ

อธิบำย:

size= ตัวเลข, + เป็นการเพิ่มขนาดเมื่อเทียบกับขนาดเดิม, - เป็นการลดขนาดเมื่อเทียบกับขนาดเดิม,
Face=ชื่อ font /ชื่อแบบอักษร
color=ชื่อสี, #รหัสค่าสี
size= ใช้กาหนดขนาดให้กับข้อความ โดยสามารถกาหนดค่าได้ตงแต่ เลข 1-7
ั้
Face= ใช้กาหนด font ให้กับข้อความ
color= ใช้กาหนดสีให้กับข้อความ

ตัวอย่ำง: ประเทศ
<font size=”4”>ไทย</font>
<font size=”+4”>ลำว</font>
<font size=”-4”>กัมพูชำ</font>
<font face=”Tahoma”>มำเลเซีย<font>
<font color=”red”>พม่ำ</font>
<font color=”#00FF00”>ฟิลิปปินส์</font>
<font size=”3” face=”TH Niramit AS” color=”Blue”>เวียดนำม</font>

23

24



Size
1
2
3
4
5
6

Font Size
7 points
10 points
12 points
14 points
18 points

7

36 points

24 points

ตำรำงชื่อสี และรหัสสี
อ้ำงอิง: โรงเรียนยุพราชวิทยาลัย เชียงใหม่.[ออนไลน์] http://www.computerhope.com/htmcolor.htm สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556.

อ้ำงอิง: Code สี โค้ดสี [ออนไลน์] http://xn--code-3jovd.plus.in.th สืบค้นเมื่อวันที่ 28 พฤศจิกำยน 2556.




ตำรำงรหัสสี แบบเลขฐำน 16

อ้างอิง: HTML color codes and names. [ออนไลน์] . http://www.computerhope.com/htmcolor.htm สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556.

5. กำรกำหนดสีให้กับพื้นหลัง (Background Color): bgcolor
แท็ก :
<bgcolor=”สี/รหัสสี”>
อธิบำย: สาหรับใส่สีพ้ืนหลังให้กับหน้าเว็บเพจ
ตัวอย่ำง: <body bgcolor=”yellow”>…</body>
<body bgcolor=”#00FF00”>…</body>

ภาพที่ 2.24 แสดงผลการใส่สีให้กับพืนหลัง
้


25

26


6. กำรตีเส้นคั่น (Horizontal Line): hr
แท็ก :
<hr width=”” size=”” color=””>
ี
อธิบำย: ใช้สาหรับตีเส้นคั่นเป็นแท็กเดี่ยวไม่มแท็กปิด
Width คือ ความยาวของเส้น ใส่เป็น ตัวเลข หรือ เปอร์เซ็นต์ เช่น 100 หรือ 70%
Size คือ ความหนาของเส้นคั่น ใส่เป็น ตัวเลข หรือ เปอร์เซ็นต์ เช่น 90 หรือ 50%
Color คือ ใส่สของเส้นคั่น ได้ทั้งชื่อสี และรหัสสี
ี
ตัวอย่ำง: 1<hr>
2<hr size="15">
3<hr size="25%">
4<hr width="30">
5<hr width="40%">
6<hr color="blue">
7<hr width="250" size="10" color="pink">

ภาพที่ 2.25 แสดงผลการใส่เส้นคั่น




7. กำรกำหนดรำยกำรแบบเรียงลำดับ (Ordered Lists): ol , List: li
แท็ก :
<ol type=””> <li> ข้อควำม </li> </ol>
Type: ค่าที่สามารถระบุ มีดังนี้
ค่ำ
A: คือ เรียงลาดับเป็น A, B, C
a: คือ เรียงลาดับเป็น a, b, c
I: คือ เรียงลาดับเป็น I, II, III
i: คือ เรียงลาดับเป็น i, ii, iii
1: คือ เรียงลาดับเป็น 1, 2, 3 เป็นค่าเริ่มต้น ถ้าไม่กาหนดค่าผลผลจะได้แบบนี้
อธิบำย: ใช้สาหรับกาหนดรายการแบบเรียงลาดับ
ตัวอย่ำง: อำหำรมีดังนี้
<ol>
<li> ข้าวผัด
<li> ผัดซายองเต้
</ol>
เว็บไซต์ท่นิยมใช้
ี
<ol type=”A”>
<li> facebook
<li> youtube
</ol>
อยำกมีแฟนแบบไหน
<ol type=”i”>
<li> สวย/หล่อ
<li> นิสัยดี/ซื่อสัตย์
</ol>
อยำกมีฐำนะแบบใด
<ol type=”1”>
<li> รวย ไม่มีความสุข
<li> ยากจน มีความสุข
</ol>

27

28


ไม่ใส่ type
ภาพที่ 2.26 แสดงผลแบบเรียงลาดับ

ใส่ type=”1”
8. กำรกำหนดรำยกำรแบบไม่เรียงลำดับ (Unordered Lists): ol , List: li
แท็ก :
<ul type=””> <li> ข้อควำม </li> </ul>
 disc: คือ วงกลมใส  circle: คือ วงกลมทึบ
 square: คือ สีเหลี่ยม
ค่ำ
อธิบำย: ใช้สาหรับกาหนดรายการแบบไม่เรียงลาดับ สัญลักษณ์แสดงหัวข้อย่อย
ตัวอย่ำง: <b>ภำษำที่ชอบ</b>
<ul type=”disc”>
<li> เกาหลี
<li> ไทย
</ul>
<b>อย่ำงไปเที่ยวที่ไหน</b>
<ul type=”circle”>
<li> ญี่ปุ่น
<li> อังกฤษ
</ul>
<b>สัตว์เลี้ยงที่ชอบ</b>
<ul type=”square”>
<li> หนูแฮมเตอร์
<li> สุนัข
</ul>



ไม่ใส่ type

ภาพที่ 2.27 แสดงผลแบบไม่เรียงลาดับ

9. กำรกำหนดรำยกำรแบบนิยำมควำมหมำย (Definition Lists): ol , List: li
แท็ก :
<dl type=””> <dt> ข้อความ </dt><dd>ข้อควำมเนื้อหำ</dd> </dl>
ค่ำ
อธิบำย: ใช้สาหรับกาหนดนิยายาม คล้ายกับการย่อหน้ากด TAB
ตัวอย่ำง: <b>คำศัพท์ควำมรัก</b>
<dl>
<dt> ความรัก</dt>
<dd>การร่วมฝัน ร่วมปันใจเเละก้าวไปในชีวต การอยู่เคียงข้างกันเสมอไม่วาอีกฝ่าย จะตกต่าเพียงใด ใจถึงกัน</dd>
ิ
่
<dt> อกหัก</dt>
<dd> การที่เราได้รู้วาต่อไปจากนี้ ทุกสิงดูเหมือนไม่มค่าเลยสาหรับเรา </dd>
่
่
ี
<dt>ความหลง</dt>
<dd> เป็นภาวะที่ถกดึงดูดด้วยความรัก ใคร่จากของรักอย่างรุนแรง รักเพ้อ ไม่คงรูปไม่แน่นอน</dd>
ู
<dt>แอบรัก</dt>
<dd> แอบมองเข้าอยู่ข้างเดียว นึกถึงเมื่อไรก็ต้องยิ้ม รักชอบแบบไร้เหตุผลไม่ว่าเขามีแฟนหรือไม่</dd>
<dt>ความหึง</dt>
<dd> การที่ที่จิตระลึกถึง ความรู้สึกคับแคบและเห็นแก่ตัวจุดเริ่มต้นที่จะทาให้ความรักไม่ราบรื่นสวยงาม </dd>
</dl>


29

30


ภาพที่ 2.28 แสดงผลแบบนิยาม


<p align=””>…</p> กาหนดย่อหน้าให้กับข้อความ และจัดตาแหน่ง แบบชิด ชิดขวา กึ่งกลาง ชิดขอบ
<br> ใช้สาหรับขึ้นบรรทัดใหม่ แท็กเป็นแท็กเดี่ยวไม่มแท็กปิด
ี
  การเว้นวรรค หรือ ช่องว่าง <center>…</center> จัดตาแหน่งกึ่งกลางหน้าเว็บเพจ
<pre>….</pre> ใช้สาหรับแบบให้เอกสารแสดงผลตามที่พิมพ์
<hn> </hn> ใช้หรับกาหนดหัวข้อเรื่อง หัวข้อรายการหลัก กาหนดได้ 1-6
<div align>…</div> จัดตาแหน่งของข้อความ วัตถุต่างๆ ให้ กิ่งกลาง ซ้าย ขวา
 สาหรับใส่หมายเหตุหรือบันทึกเพื่อจดจา โดยไม่แสดงผลบนเบราเซอร์
<b>…</b> กาหนดข้อความให้เป็นตัวหนา
<i>…</i> กาหนดข้อความให้เป็นตัวเอียง
<u>…</u> กาหนดข้อความให้เป็นตัวขีดเส้นใต้
<sup>…</sup> กาหนดข้อความให้เป็นตัวยก
<sub>…</sub> กาหนดข้อความให้เป็นตัวห้อย
<del>…</del> กาหนดข้อความให้เป็นตัวขีดฆ่าตรงกลาง
<ins>…</ins> กาหนดข้อความให้เป็นตัวแทรกขีดเส้นคล้ายเหมือนแท็ก <u>..</u> ใช้คกับ <del>
ู่
<font face=”” color=”” size=””>….</font> กาหนดรูปแบบของตัวอักษร face คือ กาหนดชื่อแบบ
อักษร color คือ กาหนดสีตัวอักษร size คือ กาหนดขนาดตัวอักษรได้ตั้งแต่ 1-7
<body bgcolor=””>…</body> ใช้สาหรับกาหนดสีพืนหลังให้กับเว็บเพจ
้
<hr witdh=”” size=”” color=””> กาหนดเส้นคั่นแนวนอน โดยกาหนดความยาว ความหนา และสีได้
สัญลักษณลักษณ์พิเศษ เช่น คาสั่งที่ใช้ © © ™™ ®® ดูได้จากตารางในเอกสาร
List ลิสต์ รายการต่างๆ ที่ใช้สาหรับกาหนดราย ของข้อความ เช่น ให้เรียง 1 2 3 หรือ ใส่สัญลักษณ์
หน้าข้อความเป็นรายข้อ เหมือนกับ Microsoft word
List แบบเรียงลำดับ <ol><li>....</li></ol> กาหนดรายการให้ พิมพ์ 1 2 3 หรือ i ii iii อัตโนมัติ
List แบบไม่เรียงลำดับ <ul><li>....</li></ul> กาหนดรายการเป็นสัญลักษณ์พิเศษหัวข้อย่อย
List แบบนิยำมควำมหมำย <dl><dt>....</dt><dd>…</dd></dl> กาหนดแบบนิยามคล้ายอธิบายคาศัพท์

31

32


จงเขียนเว็บเพจด้วยภำษำ HTML เพื่อแสดงผลลัพธ์ตำมโจทย์ท่กำหนดให้
ี
1. บันทึกไฟล์ชื่อ EX21-เลขที่-ชื่อ.html (ภำษำอังกฤษ) กำหนดหัวเว็บให้เป็น เลขที่ ชื่อ-สกุล ห้อง
ของนักเรียน (ภำษำไทย)





ฉันรักประเทศไทย font =3 ตัวเอง +3 ครอบครัว -3
ทาไมเราฯ font – Tahoma ขนาด 4 ไก่ยาง font - MS Sans Serif
่


33

34



Youtube
Gmail




หน่วยที่ 2 เรื่อง โครงสร้ำงภำษำ HTML และกำรรูปแบบข้อควำม
จำนวน 20 ข้อ จงทำเครื่องหมำย บนตัวเลือกที่ถูกต้องเพียงข้อเดียว
1. HTML ย่อมาจากอะไร
ก. Height Technology maker location
ข. Hexagram Thai mark Language
ค. Hypertext Markup language
ง. Hypertext Marker uniform Language
2. ข้อใดกล่าวถูกต้องเกี่ยวกับตั้งชื่อไฟล์ เว็บเพจ ไม่ถูกต้อง
ก. ใช้ตัวอักษรภาษาอังกฤษ
ข. ใช้ตัวเลข
ค. ใช้สัญลักษณ์พิเศษ ได้ เช่น - _ $
ง. ควรตั้งชื่อเป็นภาษา และมีช่องว่าง
3. คาสั่งหรือแท็กใดต่อไปนีใช้สาหรับกาหนดข้อความแสดงบนหัวเว็บเบราเซอร์
้
4. คาสั่งใดต่อไปนีเป็นแท็กเดี่ยว หรือไม่จาเป็นต้องมีแท็กปิด
้
ก. <pre>
ข. <b>
ค. <br>
ง. <hr>
5. แท็กใด คือส่วนที่ทาให้ เนื้อหา ข้อความ ภาพ ข้อมูลแสดงต้องเขียนในคาสั่งใด
ก. <html>…</html>


35

36


6. คาสั่ง <BR> ใช้สาหรับ
ก. ขึนย่อหน้าใหม่
้
ข. ขึนบรรทัดใหม่
้
ค. ขีดเส้นคั่น
ง. เว้นวรรค
7. คาสั่งใด ใช้สาหรับ เพิ่มช่องว่าง
ก. &blank;
ข.  
ค. &psnb;
ง. &space;
8. Tag ใช้สาหรับตีเส้นคั่นคือแท็กใด
ก. <a lign=””>…</p>
ข. <div>…</div>
ค. <hr>
ง. <pre>…</pre>
9. <p align=”justify”>โปรดเถิดรัก เหนื่อยเกินไปไหม </p> แสดงผลลัพธ์อย่างไร
ก. ข้อความขึนย่อหน้าใหม่ ชิดขวา
้
ข. ข้อความขึนย่อหน้าใหม่ กึ่งกลาง
้
ค. ข้อความขึนย่อหน้าใหม่ จัดชิดขอบด้านหน้า-หลัง
้
ง. ข้อความขึนย่อหน้าใหม่ กระจาย
้
10. กาหนดหัวเรื่อง ข้อใดต่อไปนี้ เป็นหัวข้อเรื่องที่ เล็กที่สุด
ก. <h1>
ข. <h3>
ค. <h5>
ง. <h6>


11. การจัดรูปแบบลักษณะข้อความให้เป็นไปตามที่กาหนด มีการเคาะ เว้นวรรค หรือ เป็นลักษณะ Tab
ตามที่รูปแบบควรใช้แท็กใด
ก. <li>
ข. <pre>
ค. <ol>
ง. <p>
12. การระบุแท็กหมายเหตุ ในเอกสารเว็บเพจ ใช้แท็กใดต่อไปนี้
ก. <-- ข้อความ - -?>
ข. <!-- ข้อความ - ->
ค. <?-- ข้อความ - ->
ง. <-- ข้อความ - -!>
13. แท็กใด ใช้สาหรับกาหนดรายการ ให้พิมพ์เลข 1 2 3 อัตโนมัติ
ก. <il>
ข. <ul>
ค. <ol>
ง. <dl>
14. แท็กใด ใช้สาหรับกาหนดรายการ ให้แสดงหัวข้อย่อยเป็น สัญลักษณ์ วงกลมใส สี่เหลี่ยม วงกลมทึบ
ก. <ul>
ข. <dt>
ค. <ol>
ง. <dl>
15. กรณีต้องการให้ แสดงหัวข้อย่อย แสดงสัญลักษณ์  แท็ก กาหนด type=”” รูปแบบใด
ก. square
ข. disc
ค. circle
ง. triangle


37

38


16. การให้คานิยาม สาหรับอธิบายศัพท์ ควรใช้แท็กใด
ก. <ol>
ข. <dl>
ค. <dt>
ง. <li>
17. ข้อใดต่อไปนีให้ความหมายของแท็กได้ถูกต้อง
้
ก. <b> ตัวหนา <i> ขีดเส้นใต้
ข. <u> ตัวขีดเส้นใต้ <sub> ตัวยก
ค. <sup> ตัวยก <del> ตัวขีดฆ่า
ง. <u> ตัวเอียง <b> ตัวหนา
18. <b><i>คนอ่านน่ารัก</b></i> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร
ก. คนน่ำรัก
ข. คนน่ารัก
ค. คนน่ารัก
ง. คนน่ารัก
19. ฉัน<sub>รัก<sub/>เธอ<sub>มาก</sub> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร
ก. ฉันรักเธอมาก
ข. ฉันรักเธอมาก
ค. ฉันรักเธอมาก
ง. ฉันรักเธอมาก
20. <font face=”” color=”” size=””>…..</font> จากแท็กนีข้อใดกล่าว ผิด
้
ก. face ใช้สาหรับใช้แบบตัวอักษร
ข. size ใช้สาหรับกาหนดขนาดตัวอักษร
ค. color ใช้สาหรับใส่สีตัวอักษรเป็นรหัสสีเท่านั้น
ง. font แท็กใช้กาหนดรูปตัวอักษรให้มลักษณะต่างๆ
ี




บรรณำนุกรม
โรงเรียนยุพราชวิทยาลัย เชียงใหม่.[ออนไลน์] http://www.computerhope.com/htmcolor.htm
ณัชติพงศ์ อูทอง. การสร้างเว็บเพจ (ภาษา HTML). กรุงทพฯ : บริษัท สานักพิมพ์เอมพันธ์ จากัด, 2548.
ฝ่ายตาราวิชาการคอมพิวเตอร์. การสร้างเว็บเพจ (HTML). กรุงเทพฯ : ซีเอ็ดยูเคชั่น, 2555.
สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556.
Code สี โค้ดสี [ออนไลน์] http://xn--code-3jovd.plus.in.th สืบค้นเมื่อวันที่ 28 พฤศจิกายน 2556.
HTML color codes and names. [ออนไลน์] . http://www.computerhope.com/htmcolor.htm
สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556.
HTML. [ออนไลน์] . http://code.function.in.th/html สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556.

*********************


39

40


ชื่อ - สกุล
วัน เดือน ปีเกิด
เลขที่ตำแหน่ง
สถำนที่อยู่ปัจจุบัน
ตำแหน่ง
สถำนทีทำงำน
่

นายปกรณ์กฤช กันทะเลิศ
6 กันยายน 2523
3186
816/9 หมู่ 17 ต.เมืองพาน อ.พาน จ.เชียงราย
ครู วิทยฐานะ ชานาญการ
โรงเรียนพานพิทยาคม อ.พาน จ.เชียงราย
สังกัดสานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 36

ประวัตกำรศึกษำ
ิ
2544

E-mail:
Website:

บธ.บ. (เทคโนโลยีสารสนสนเทศธุรกิจ)
มหาวิทยาลัยธุรกิจบัณฑิตย์
2548
ป.บัณฑิต ประกาศนียบัตรบัณฑิต (วิชาชีพครู)
มหาวิทยาลัยราชภัฏเชียงราย
2553
วท.ม. (เทคโนโลยีอินเทอร์เน็ต และสารสนเทศ)
มหาวิทยาลัยนเรศวร
pakornkrit@live.com
http://www.pakornkrit.com


คู่มือภาษา HTML และการจัดข้อความ

คู่มือภาษา HTML และการจัดข้อความ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to คู่มือภาษา HTML และการจัดข้อความ

Similar to คู่มือภาษา HTML และการจัดข้อความ (20)

More from Pakornkrits

More from Pakornkrits (20)

คู่มือภาษา HTML และการจัดข้อความ