You are on page 1of 32

หน่ วยการเรี ยนที่ 3

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

ในระบบเครื อขายอิ
บบราวเซอร์ได้ทุกระบบปฏิบตั ิการ โดยที่เอกสาร

เว็บจะต้องมีการเชื่อมโยง(Link) ถึงกนได้
การเรี ยนรู ้ โปรแกรมภาษาHTML ซึ่ งเป็ นโปรแกรมแบบ Text
จะใช้โปรแกรม Text Editor เชน่ Note pad , Edit Plus, WordPad หรื ออื่นๆ เขียนได้ เป็ นการเรี ยนรู ้

การใช้ค าํ สั่ง สร้ า งเว็บ ให้แ สดง ข้อความ จัด การรู ป แบบเนื้ อ หาให้อ่ านได้ง่ าย ด้ว ยการใช้ต ารางชวย

่ ใส่ รูปภาพ ภาพเคลื่ อนไหว สร้ างการเชื่ อมโยง (Link) เว็บเพจ ในเครื อขาย

สร้ างความนาสนใจเชน


อินเทอร์ เน็ต ผานโปรแกรมเว็
บบราวเซอร์ ได้ เนื้ อหาในหนวยการเรี
ยนนี้ เป็ นการเรี ยนรู ้คาํ สั่งพื้ นฐาน
ี่ ั รู ปแบบโครงสร้างคําสั่ง และ การกาหนดคุ

่ ้น
ที่สาํ คัญของ ภาษา HTML เกยวกบ
ณสมบัติเพิ่มเติม เทานั
้ Code คําสัง่ HTML ในโปรแกรมสร้างเว็บแบบสําเร็ จรู ป (WYSIWYG) ซึ่ งสร้าง
เพื่อนําความรู ้ไปใช้แกไข


คําสัง่ HTML ให้โดยอัตโนมัติ ได้ในหนวยการเรี
ยนตอไป
ผังความคิด (Mind Mapping)


3.2 คําสั่งสร้างความนาสนใจ
3.1 คําสั่งจัดการข้อความ

3.3 คําสั่งการใช้ตาราง
3.4 คําสั่งการเชื่อมโยง

3.การใช้คาํ สั่งและทดสอบผล
การสร้ างเว็บเพจด้ วยโปรแกรมภาษา HTML
็ อมูล
1.การสร้าง Folder เกบข้
2.1 โปรแกรมเขียน HTML

2.การเขียนโปรแกรมภาษา HTML
2.2 โครงสร้างภาษาและคําสัง่

46

จดประสงค์
การเรียนร้ ู

็ อมูลเว็บไซต์ได้
1. สามารถสร้างโฟล์เดอร์เกบข้
2. บอกที่มาและความสําคัญของภาษา HTML ได้
3. สามารถใช้โปรแกรมเท็กเอดิเตอร์สร้างและบันทึกไฟล์ .html ได้
4. บอกโครงสร้างภาษาและ Tag ควบคุม (คําสัง่) ของ HTML ได้
5. สามารถใช้คาํ สัง่ จัดการตัวอักษร ข้อความ และทดสอบผลบนโปรแกรมบราวเซอร์ได้
่ าง ความนาสนใจและทดสอบผลบนโปรแกรมบราวเซอร์

6. สามารถใช้คาํ สัง่ ตกแตงสร้
ได้

7. สามารถใช้คาํ สัง่ สร้างตาราง ใสการเนื
้ อหาและทดสอบผลบนโปรแกรมบราวเซอร์ได้
8. สามารถใช้คาํ สัง่ สร้างการเชื่อมโยง (ลิงค์) แบบตา่ง ๆและทดสอบผลบนโปรแกรม
บราวเซอร์ได้

47

การสร้ างเว็บเพจด้ วยโปรแกรมภาษา HTML

ในหนวยการเรี
ยนนี้ จะเริ่ มสร้างเว็บด้วยโปรแกรมภาษา HTMLในเครื่ องคอมพิวเตอร์มีข้ นั ตอน
และคําสัง่ ควบคุมการแสดงผลบนโปรแกรมบราวเซอร์ ดังนี้

1. การจัดการโฟล์ เดอร์ (Folder) เก็บข้ อมลเว็
ู บไซต์
การเขียนโปรแกรมใด ๆ ในเครื่ องคอมพิวเตอร์ สิ่ งแรกที่ตอ้ งดําเนิ นการคือการสร้างโฟล์เดอร์
็ อมูลรวมไว้ในที่เดียวกนั เพื่อความปลอดภัยจากการถูกลบทิ้ง และการเรี ยกใช้งานที่สะดวก สําหรับ
เกบข้

่ ๆ ที่นาํ มาประกอบเป็ นหน้าเอกสารเว็บ และไฟล์ .html ที่
การสร้างเว็บไซต์ โฟล์เดอร์เกบไฟล์
ขอ้ มูลตาง
่ ็ ชัดเจน เปลี่ยนแปลงไมได้
่ จึงให้เกบไว้
็ ภายใน
จะต้องเชื่อมโยงถึงกนั จะต้องมีการอ้างอิงตําแหนงเกบ
่ ๆ (Sub-Directories)เชน่ image
โฟล์เดอร์ หลัก (Local Root Directory ) เดียวกนั แล้วสร้างโฟล์เดอร์ยอย
, CSS, Template ไว้ภายใต้โฟล์เดอร์หลัก หากเครื่ องคอมพิวเตอร์ที่ใช้สร้างเว็บ มีผใู ้ ช้หลายคนการสร้าง
็ ในที่ปลอดภัย แล้วใสรหั
่ สผานกนไว้
่ ั ดว้ ย
โฟล์เดอร์เว็บไซต์ควรสร้างเกบไว้
่ สมมุติวาต้
่ องการสร้างโฟล์เดอร์ที่ไดร์ฟ D: มีลาํ ดับขั้ นการสร้าง ดังรู ปที่ 3.1
ตัวอยาง
่ → เลือก New → Folder
1. เข้า ไดร์ฟ D: → คลิกขวาบริ เวณที่วาง
2. เมื่อได้โฟล์เดอร์ ชื่อ New Folder ทําการเปลี่ยนชื่อโฟล์เดอร์ ชื่อโฟล์เดอร์ควรสอดคล้องกบั
ชื่อองค์กรหรื องานที่จดั ทําเว็บไซต์ เช่น สร้างเว็บไซต์บริ ษทั ฮอนด้า ตั้ งชื่อวา่ Web-Honda ที่สาํ คัญ

การตั้ งชื่อโฟล์เดอร์ หรื อไฟล์ต่าง ๆ ต้องใช้ภาษาอังกฤษ ใช้ชื่อสั้ น ๆ เพราะจะมีผลตอการสร้
างลิงค์ ที่

ต้องเขียนคําสัง่อ้างอิงชื่อภายหลัง การใช้ชื่อภาษาไทยจะมีปัญหาตอ่โปรแกรมบราวเซอร์ จะหาไมพบ

รู ป ที่ 3.1 แสดงการ
สร้ า งโฟล์เ ดอร์ เพื่ อ
เกบ็ข้อมูลเว็บ

48

2. การเขียนโปรแกรมภาษา HTML
ภาษา HTML (Hyper Text Markup Language) เป็ นภาษาหลักที่ใช้ในการสร้างเว็บเพจ
ิ ้ นจากการพัฒนาเทคโนโลยีระบบ World Wide Web: WWW.
เป็ นภาษาประเภท Markup Language เกดขึ

ใช้เพื่อกระจายข้อมูลในองค์กรอินเทอร์ เน็ต พัฒนาและกาหนดมาตรฐานโดยองค์
กร W3C (World
Wide Web Consortium) ระบบ WWW. พัฒนาขึ้ นโดย นักวิจยั จากสถาบัน CERN (Conseil European Pour
La Recherche Nucleaire) ชื่ อ ทิม เบอร์ เนอร์ - ลี (Tim Berners-Lee) ใน ปี ค.ศ.1989 เมืองเจนี วา
ประเทศสวิสเซอร์แลนด์
ภาษา HTML เป็ นภาษาที่มีลกั ษณะของข้อมูลที่เป็ นตัวอักษรในมาตรฐานของรหัส แอสกี
(ASCII Code) โดยเขียนอยูใ่ นรู ปของเอกสารข้อความ (Text Document) ปั จจุบนั พัฒนาเป็ นเวอร์ชนั 4.01
หรื อ XHTML1.0 เพื่อรองรับมาตรฐานภาษา XML (ซึ่ งจะนํามาใช้แทนภาษา HTML) สามารถแสดง
ภาพกราฟิ กและระบบเสี ยงได้สมบูรณ์ ตอบสนองเทคโนโลยีปัจจุบนั ครอบคลุมการใช้ร่ วมในระบบ
โทรศัพท์ได้ การเขียนภาษา HTML สามารถแทรกคําสั่งที่ตอ้ งการได้ง่าย โปรแกรมจะไมยึ่ ดความเป็ น
็ ่ ผลตอตั
่ วโปรแกรม เพียงแตจุ่ ดที่ผิดจะไมแสดงผลออกมา

โครงสร้าง การเขียนคําสั่งผิดกไมมี
ซึ่ งนับเป็ น

จุดออนของโปรแกรม
(ทําให้ตามหาจุดผิดได้ยาก และเป็ นเหตุผลที่มีการพัฒนาภาษา XML มาใช้แทน)
ไฟล์ที่ได้จากการสร้างเอกสารเว็บ HTML จะเป็ นไฟล์นามสกุล .htm หรื อ .html ใช้ได้ท้ งั ระบบปฏิบตั ิการ
ยูนิกซ์ (UNIX) และระบบปฏิบตั ิการ Windows เวลาเรี ยกใช้หรื อสั่งแสดงผล เรี ยกใช้ได้จากโปรแกรม
เว็บบราวเซอร์ (Web Browser)

2.1 โปรแกรมเขียนภาษา HTML
โปรแกรมที่นิยมนํามาใช้เขียนภาษา HTML ที่นิยมมี 2 โปรแกรมคือ Notepad และ Edit Plus ดัง
่ ดังนี้
ตัวอยาง

โปรแกรม Note Pad
Note Pad เป็ นโปรแกรม Text Editor มาตรฐานที่มีมากบั Windows วิธีเรี ยกใช้ทาํ ได้ดงั รู ปที่ 3.2
่ Desk top คลิกที่ปุ่ม
1. การเข้าสู่ โปรแกรม เริ่ มที่หน้าตาง
START → All PROGRAMS → ACCESSARIES → NOTE PAD

49

รู ปที่ 3.2 แสดงการเปิ ดโปรแกรม Note pad

เมื่อเข้าโปรแกรม กสามารถพิ
มพ์ขอ้ ความหรื อ Code HTML ได้ทนั ทีตามรู ปแบบคําสั่งของ

โปรแกรม หากไมสามารถพิ
มพ์ภาษาไทยได้ ให้เข้าไปตั้ งที่เมนู Format เลือก Font เชน่Angsana New

เลือกขนาด Font ตามต้องการ โปรแกรมภาษา HTML ไมยึ่ ดติดกบั ตัวพิมพ์เล็ก หรื อตัวพิมพ์ใหญสามารถ
ใช้ได้ ให้พิจารณาจัดความสวยงาม การดูง่ายเป็ นหลัก การบันทึกไฟล์ เมื่อเขียน Code HTML เสร็ จแล้ว
็ ใน Folder ที่เตรี ยมไว้สาํ หรับเกบทรั
็ พยากร
ให้บนั ทึกไฟล์ เลือกนามสกุล เป็ น .htm หรื อ .html เกบไว้
เว็บไซต์ ดังรู ปที่ 3.3 และ รู ปที่ 3.4

รู ปที่ 3.3 แสดง Code HTML ที่เขียนด้วยโปรแกรม Note pad

50

รู ปที่ 3.4 แสดงการบันทึกไฟล์ นามสกุล .html

โปรแกรม EDIT PLUS
Edit Plus เป็ นโปรแกรม Text Editor ที่ใช้บน Windows 95/98/Me/NT/2000/XP ผลิตโดยบริ ษทั
่ เขียนโปรแกรมภาษาสะดวก
ES-Computing ขนาดโปรแกรม 1.02 MB เป็ นโปรแกรมที่มีเครื่ องมือชวยให้
่ สีเน้นคําสัง่ หมายเลขบอกบรรทัด ตัวชวยในการเขี

ขึ้ น เชนมี
ยน Tag คําสัง่ ตา่ ง ๆ การใช้งานเขียนภาษา
HTML ทํา ดังรู ปที่ 3.5

1. เมื่อเข้าสู่ โปรแกรม File → New → HTML Page กด Enter (จะเห็นวาสามารถใช้
โปรแกรม EditPlus เขียนโปรแกรมภาษาได้หลายโปรแกรม)

รู ปที่ 3.5 การใช้ โปรแกรม Edit Plus สร้างไฟล์เว็บ HTML

51

2. เมื่อเลือกการสร้างเอกสารแบบ HTML Page แล้วโปรแกรมจะสร้างรู ปแบบคําสัง่ HTML ให้
เราสามารถเขียนเพิ่มเติม และสามารถเลือกคําสัง่ จาก Tool bar ที่มีมาให้ทาํ ให้ สามารถเลือกใช้วางคําสัง่
่ ่ตอ้ งการได้เลย ดังรู ปที่ 3.6
สําเร็ จลงในตําแหนงที

รู ปที่ 3.6 แสดงแบบฟอร์ม HTML ของโปรแกรม EDIT PLUS

2.2 โครงสร้ างภาษาและคําสั่ ง HTML
ภาษา HTML ใช้ป้ายระบุ (Tag) เป็ นคําสัง่ ควบคุมการแสดงผล เป็ นลักษณะเฉพาะของภาษา
่ าสั่ง อาจมีลกั ษณะพิเศษ(Attribute) หรื อสวนขยาย

ซึ่ งคําสั่งหรื อป้ ายระบุแตละคํ
เพิ่มเติมได้ เชน่ <Font>



่ ํ
เพิ่มสวนขยายเป็
น <Font color=”RED”> คือกาหนดให้
อกั ษรเป็ นสี แดง ซึ่งคาปกติ
หากไมกาหนดจะเป็



่ าสั่งสามารถ
สี ดาํ หรื อสี พ้ืนหลัง หากไม่กาหนดจะเป็
นสี ขาว เสมอ การกาหนดลั
กษณะพิเศษให้แตละคํ

กาหนดได้
มากกวา่ 1 ลักษณะโดยใช้เครื่ องหมาย , คัน่ เชน่ <font size = 3, color=red> …ข้อความ..</font>
่ น
ป้ ายระบุ (Tag) อยู่ภายใต้เครื่ องหมายน้อยกวา่ (<) และมากกวา่ (>) ดังนี้ <…> โดยป้ ายระบุ แบงเป็
2 ประเภท คือ
1. ป้ ายระบุเดี่ยว เป็ นคําสัง่ ควบคุมการแสดงผลเดี่ยว เชน่ คําสัง่ ขึ้ นบรรทัดใหม่ <br> คําสั่ง
่ าใหม่ <P> , คําสัง่ แทรกรู ปภาพ <img>, คําสัง่ ใสเส้
่ นคัน่ <HR>เป็ นต้น
ขึ้ นยอหน้
2. ป้ ายระบุเปิ ด/ปิ ด เป็ นคําสั่งควบคุมการแสดงผลเป็ นกลุ่มคือ เมื่อมีคาํ สั่งเปิ ด จะต้องมีคาํ สั่ง
ปิ ดเสมอ เชน่ <body>…. </body>, <b>…..</b>, <I> … </I> เป็ นต้น

52


่ ดังนี้ (รู ปที่ 3.7)
โครงสร้ างคําสั่ ง HTML จะมีรูปแบบการเขียนแบงออกเป็
น 3 สวน
่ ่กาหนดให้

1. ส่ วนประกาศ เป็ นสวนที
บราวเซอร์ทราบวา่ นี่คือภาษา HTML และจะต้องทําการ

่ ้ น คือ <html> และ </html> ปรากฏที่หวั และท้ายไฟล์
แปรผลอยางไรมี
คาํ สัง่ เป็ นคู่ เพียงคูเ่ ดียวเทานั
่ ่แสดงผลข้อความบนไตเติลบาร์ ของบราวเซอร์ และอาจ
2. ส่ วนหัวเรื่ อง (head) เป็ นสวนที

่ าสัง่ <head> ....... </head> ดังนี้
มีคาํ สัง่ สําหรับกาหนดรายละเอี
ยดด้านเทคนิคอื่นๆ อีก แทรกอยูร่ ะหวางคํ
่ าคัญที่จะบอกรายละเอียดของหน้าเว็บเพจนั้ นๆ
เป็ นสวนสํ

อยูภ่ ายในคําสั่ง <title> .. </title> จะต้องกาหนดเสมอและควรใช้
ภาษาอังกฤษนํา สามารถใช้ภาษาไทย

ิ 64 ตัวอักษร เชน่
เป็ นคําตามได้ แตต้่ องไมยาวเกน
<title> HTML LANGUAGE : การใช้ ภาษา HTML </title>
่ /วรรณยุ ก ต์ด้ว ย ชื่ อ เรี ย กเว็บ ไซต์
การนับ ตัว อัก ษรใน คํา -ภาษาไทยต้อ งนับ สระบน/ลาง
ที่ปรากฏบนไตเติลบาร์ นอกจากจะนํามาใช้แสดงชื่ อเรื่ องของเว็บไซต์น้ ันๆ แล้วยังเป็ นข้อความที่จะ
ถูกนํามาใช้เป็ นคําสําคัญ (Keyword) ในการสื บค้นข้อมูลจาก Search Engine ด้วย
2.1 หัวเรื่ องบนไตเติลบาร์

่ าคัญสําหรับเว็บเพจภาษาไทย ที่ทาํ ให้ผชู ้ ม
นับเป็ นสวนสํ
่ อความบนเว็บเพจเป็ นภาษาไทยได้ โดยเฉพาะการสร้างเว็บจากเครื่ องมือสําเร็ จรู ปหลาย ๆ
สามารถอานข้

โปรแกรมที่มกั จะทําการกาหนดให้
เว็บเป็ นภาษาของผูพ้ ฒั นาโปรแกรม เชน่ เป็ นภาษาในยุโรป/อเมริ กา/




หรื อภาษาอื่นๆ ทําให้ผชู ้ มไมสามารถอานภาษาไทยได้
ดังนั้ นผูส้ ร้างเว็บจะต้องทําการกาหนดคาการ
่ ยวกนักบไตเติ

ถอดรหัสภาษาไทยไว้ในทุกๆ ไฟล์โดยใช้คาํ สัง่ Meta ระบุไว้ที่ส่ วน Head เชนเดี
ล ดังนี้
2.2 การระบอัุ กขระภาษา

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรื อ
<meta http-equiv="Content-Type" content="text/html; charset=Windows-874">

่ ่ ง เว็บเพจที่สร้างขึ้ นกจะสามารถแสดงผลภาษาไทย

่ กต้อง
ให้เลือกใช้อยางใดอยางหนึ
ได้อยางถู
2.3 ประกาศให้ โลกร้ ู การประกาศหรื อเผยแพรสู่ ่ อินเทอร์ เน็ตเพื่อให้ระบบการค้นหาของ

ั าเว็บเพจ จะใช้คาํ สัง่ ที่มี
Search Engine ของเราได้โดยใช้คาํ หลัก (Keyword) การกาหนดคํ
าหลักให้กบหน้
่ Head ถัดจาก Title เรี ยกวาการใช้



รู ปแบบเฉพาะในสวน
คาํ สั่ง Meta (ซึ่ งจะไมแสดงผลในหน้
าตาง
บราวเซอร์) ดังนี้
่ วยข้อความ)
<Meta name="X" content="Y"> (x และ y จะถูกแทนคาด้

53

่ วยคําวา่ Keyword ในสวน
่ Y จะแทนคาด้
่ วยคําหลักที่เกยวข้
ี่ องกบเว็
ั บไซต์
ถ้า X แทนคาด้

่ าจะคัน่ ด้วย
นั้ น คําหลักควรเป็ นภาษาอังกฤษ (ใช้ภาษาไทยได้) สามารถกาหนดได้
มากกวา่ 1 คํา แตละคํ
เครื่ องหมายจุลภาค (,)
เชน่ <Meta name="keyword" content="html, web, page, website, home.">
่ วยคําวา่ Description ในสวน
่ Y จะแทนคาด้
่ วยคําอธิ บายที่เกยวข้
ี่ องกบั
ถ้า X แทนคาด้
่ ่ อความหมายถึงเนื้ อหาในเว็บนั้ นๆ เช่น
เว็บไซต์น้ นั ควรเป็ นภาษาอังกฤษ เขียนในรู ปประโยคบอกเลาสื
<Meta name="Description" content="HTML is a wonderful language for internet
communication.">

หนวยงาน

่ วยคําวา่ Author ในสวน
่ Y จะแทนคาด้
่ วยชื่อของเจ้าของเว็บไซต์ หรื อ
ถ้า X แทนคาด้
่ ั ร้ ั บ ผิด ชอบโดยตรง

อาจระบุ ชื่ อ อี เ มล์ไ ว้เ พื่ อ ให้ ส ะดวกในการติ ด ตอกบผู
เชน
<Meta name="Author" content="Prasit – sit_teacher@hotmail.com">


่ ๆ เพิ่มเติมในสวนนี
่ ้ ได้ เชน่ สคริ ปต์พิเศษ
2.4 เทคนิคพิเศษ เราสามารถใสเทคนิ
คพิเศษตาง
แสดงวันเวลา การแสดงผลพิเศษ มีสคริ ปแจกฟรี ให้นักศึกษาค้นหาจากอินเทอร์ เน็ต
เชน่
http://www.codetukyang.com/java/scrollbar/index.htm, http://www.geocities.com/thaijava43/js.html
2.5 คําสั่ งการทําหมายเหตุ ใช้ในกรณี ตอ้ งการอธิบายคําสัง่ เพิ่มเติม
รู ปแบบ <!-- ..... -->
่ <!-- END WEBSTAT CODE -->
ตัวอยาง
่ ่ กแสดง บนจอภาพ
ข้อความที่อยูใ่ นคําสัง่ หมายเหตุจะปรากฏอยูใ่ นโปรแกรมแตไมถู
<html>
1.ส่ วนประกาศ
<head>
<title> HTML LANGUAGE : การสร้ างเว็บด้ วยภาษา HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620">
<meta name="keyword" content="html, web, page, website, home.">
2. ส่ วนหัว
<meta name="description" content="HTML is a wonderful language for internet
communication.">
<meta name="author" content="Prasit :sit_teacher@hotmail.com">
<link href="htmlstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
welcome to my web HTML<br> ยินดีต้อนรับสูเ่ ว็บ HTML
3. ส่ วนเนือ้ หา
</body>
</html>
1.ส่ วนประกาศ


รู ปที่ 3.7 แสดงสวนประกอบโครงสร้
างภาษา HTML

R

R

54

่ ่มีความซับซ้อนมากที่สุด เพราะเป็ นเนื้ อหา หรื อเรื่ องราว
3. ส่ วนเนื้อหา (body) นับเป็ นสวนที

่ ่อดึงดูดความสนใจได้มาก ความแตกตางระหวาง


ทั้ งหมดที่เราจะนําเสนอ สามารถใสเทคนิ
คลูกเลนเพื
่ ้ ท้ งั หมด จะแทรกอยู่
เว็บไซต์ต่างๆ แสดงความมีฝีมือของผูจ้ ดั ทํา ศิลปะในการออกแบบจะอยู่ในสวนนี
่ าสัง่ <body> และ </body> โดยจะกลาวในหั


ระหวางคํ
วข้อตอไป

3. การใช้ คาํ สั่ งและการทดสอบผล
่ งคําสั่งที่ใช้ในสวน
่ เนื้ อหาคือ ใน Tag body โดยปกติหาก
คําสั่งและการทดสอบในที่น้ ี จะกลาวถึ

ไมมี่ การกาหนดอะไรเป็
นพิเศษในคําสั่ง body บราวเซอร์ จะแสดงผลหน้าเว็บเพจเป็ นพื้ นหลังสี ขาว
่ ของพื้ นหลัง
ตัวอักษรสี ดาํ เสมอ ในคําสั่ง body เราสามารถระบุคาํ สั่งพิเศษ (Attribute) เชน่ คาสี

่ อคําสั่ง
สี ตวั อักษร สี จุดเชื่ อมโยง ตําแหนงการแสดงผลของหน้
าเว็บ ได้ตามต้องการ ซึ่ งการเพิ่มคาหรื

พิเศษจะเพิม่ ในป้ ายระบุ (tag) หรื อคําสัง่เปิ ดเสมอดังตัวอยาง
<html>
<head>
่ าสั่ง BODY</title>
<title> Example of Body : ไฟล์ตวั อยางคํ
</head>
<body background="bgimage.gif" bgcolor="#ffffff" text="#000099" link="#ff0000" vlink="#990099"
alink="#009900" topmargin=0 leftmargin=0 >
่ ้ สาํ หรับข้อความที่แสดงในสวนเนื
่ ้ อหา
สวนนี
</body>
</html>

่ ๆ สามารถ
่ เป็ นสวนสํ
่ าคัญของการกาหนดคุ

การกําหนดค่ าสี คาสี
ณสมบัติแก่ Object ตาง

่ ํ

กาหนดโดยระบุ
ชื่อสี โดยตรง เชน่ black, white, blue, green,... เป็ นต้น แตการกาหนดแบบนี
้ จะไมสามารถ
่ ได้ จึงได้ใช้ค่าสี เป็ นตัวเลขฐานสิ บหก (hexadecimal format) โดยกาหนดเป็

ระบุความเข้มแบบไลเฉดสี

่ ของแสง RGB แตละสี
่ ประกอบด้วยเลข 2 หลัก ในแตละสี
่ จะมีค่าของสี จากมืดไปสวางดั
่ งนี้ 0 1 2 3
คาสี
่ จึงมีค่าได้ต้ งั แต่ 00 – FF ดังนั้ นการกาหนดคาสี


4 5 6 7 8 9 A B C D E F เลข 2 หลักของแตละสี
่ ที่ดีกวา่
ด้วยตัวเลขฐานสิ บหกจึงได้คาสี

55

่ ่ สสี (HEX number) สําหรับใช้ในการเขียน Homepage
ตัวอยางคารหั
ชื่อสี

เลขฐานสิ บหก

ชื่อสี

เลขฐานสิ บหก

WHITE
YELLOW
GREEN
CYAN

#FFFFFF
#FFFF00
#008000
#00FFFF

BLACK
RED
BLUE
MAGENTA

#000000
#FF0000
#0000FF
#FF00FF

่ เหลานี
่ ้ สามารถดูได้จาก คาสี
่ Color picker ของโปรแกรม Photoshop ซึ่งจะสามารถเลือกใช้สี
คาสี
ได้ 16.7 ล้านสี ดังรู ปที่ 3.8
คลิกเลือกสี


รู ปที่ 3.8 แสดงการดูเลขคาสี
ในตารางสี ของโปรแกรม Photoshop

ค่าสี เลขฐานสิบหก = #2E47B4
(นําค่านี ้ไปใช้ ได้ เลย)

3.1 คําสั่ งจัดการข้ อความ
การจัดการข้อความ หรื อ เนื้ อหาเว็บ เป็ นการเขียนคําสั่งลงใน <Body>………</Body>
ี่ องกบการใสเนื

่ ้ อหาในที่คือการใช้คาํ สั่งจัดการกบตั
ั วอักษร จัดระเบียบข้อความ
คําสั่ง HTML ที่เกยวข้
่ ในเอกสารเว็บของเรานัน่ เอง คําสัง่ ที่เกยวข้
ี่ องได้แก่
ให้อ่านงาย

1. ตัวอักษร ได้แก่ หนา เอียง ขีดเส้นใต้ ใสสี่ กาหนดขนาด
เลือกแบบอักษร

56

2.จัดข้ อความ ได้ แก่ ขึ ้นบรรทัดใหม่ กําหนดหัวข้ อ กําหนดให้ ย่อหน้ าใหม่ ใส่เส้ นขันข้
้ อความ
เป็ นต้ น
คําสั่ งจัดตัวอักษร
1. ตัวอักษร :
<B>...ข้อความ..... </B> :คําสั่งตัวหนา
<I>...ข้อความ..... </I> :คําสัง่ ตัวเอียง
<U>...ข้อความ..... </U> :คําสั่งขีดเส้นใต้

เมื่ อต้องการทําให้ตวั อักษรหนา เอี ยง หรื อขีดเส้นใต้ ให้นาํ คําสั่งข้างต้น(Tag) ไปครอ่ม
่ าวา่ "การเขียนเว็บเพจด้วยภาษา HTML " ให้หนา เอียงและขีดเส้นใต้
ข้อความนั้ นไว้ เชน่ ต้องการแตงคํ
ให้ทาํ ดังนี้ รู ปที่ 3.9
<B> <I><U> การเขียนเว็บเพจด้ วยภาษา HTML</U></I></B>

รู ปที่ 3.9 แสดงการใช้คาํ สัง่ <B> <I> <U> พร้อมกนั

2. ควบคมตั
ุ วอักษรทั้งหน้ าเว็บ :
่ อความหรื อตัวอักษรทั้ งหน้าเว็บใช้คาํ สั่ง <basefont >โดยเพิ่ม คุณสมบัติ
ในการตกแตงข้
่ คําสัง่ ดังนี้
(Attribute) เพิ่มลงไป ไมต้่ องมี แท็กปิ ด ดังตัวอยาง
<basefont color=”blue” size=3>…ข้ อความ....

57

3. ใส่ สีตัวอักษร :
<font color=ชื่อสี หรื อ #รหัสสี >.....ข้ อความ...... </font>
่ กษรให้เป็ นสี ต่างๆ ตามชื่ อสี หรื อรหัสสี เป็ นการกาหนดคุ

ในการตกแตงอั
ณสมบัติพิเศษ
่ อความที่จะตกแตงสี
่ ดังตัวอยาง

ให้กบั FONT จะเขียนคําสัง่ ลงในคําสัง่ (Tag) เปิ ด ให้นาํ คําสัง่ นี้ ไปครอมข้

<font color= red > การกาหนดสี
ตวั อักษรสี แดง</font>

หรื อ <font color= #ff0066 > การกาหนดสี
ตวั อักษร</font>
4. กําหนดขนาดตัวอักษร :
<font size= ขนาด > .....ข้ อความ...... </font>


ในการกาหนดขนาด
อักษร เป็ นการกาหนดคุ
ณสมบัติพิเศษให้กบั FONT
ขนาด FONT


ที่กาหนดได้
ในภาษา HTML กาหนดไว้
คือ 1 , 2 , 3 , 4 , 5 , 6 , 7 โดย 1 ขนาดเล็กสุ ด 7 ขนาดใหญ่สุด
่ อความที่ตอ้ งการ ดังตัวอยาง

การเขียนคําสัง่ จะเขียนคําสัง่ ลงในคําสัง่ (Tag)เปิ ด ให้นาํ คําสัง่ นี้ ไปครอมข้

่ ั 4</font>
<font size= 5 > การกาหนดขนาดตั
วอักษรขนาดเทากบ


รู ปที่ 3.10 แสดงการใช้คาํ สัง่กาหนดขนาดและ
สี ตัวอักษร
5. กําหนดแบบตัวอักษร :
<font face= “แบบอักษร” > .....ข้อความ...... </font>


่ ั การเขียนคําสั่ง
การกาหนดแบบ
อักษร เป็ นการกาหนดคุ
ณสมบัติพิเศษให้กบั FONT เชนกน
่ อความที่ตอ้ งการ ดังตัวอยาง

จะเขียนคําสัง่ ลงในคําสัง่ (Tag)เปิ ด ให้นาํ คําสัง่ นี้ ไปครอมข้
ํ นดแบบอักษร </font>
<font face= “Cordia New”> การกาห

58 

การเขียนคําสั่ งรวมมากกว่ า 1 คําสั่ ง



จะเห็นวาการกาหนดคุ
ณสมบัติพิเศษให้ตวั อักษร หรื อ FONT ทั้ ง สี ขนาด แบบ ทําได้คล้ายกนั

่ กสามารถเขี

่ ั

ดังนั้ นในการใช้งานหากต้องการกาหนดคุ
ณสมบัติมากกวา่ 1 อยาง
ยนตอกนโดยเคาะวรรควาง
่ าสัง่ ดังตัวอยางรู
่ ปที่ 3.11
ไว้ระหวางคํ

<font color=red size=4 face= “Cordia New” > การกาหนดคุ
ณสมบัติพิเศษอักษร </font>

ผลลัพธ์ที่ได้: การกําหนดคุณสมบัตพ
ิ เิ ศษอักษร

ตัวอยางการใช้
HTML


รู ปที่ 3.11 แสดงการใช้คาํ สัง่กาหนดแบบ
ขนาด สี ตัวอักษร

59

คําสั่ งจัดข้ อความ
1. คําสั่ งขึน้ บรรทัดใหม่
หากพิมพ์ขอ้ ความยาวๆ เมื่อต้องการจะตัดคําขึ้ นบรรทัดใหมต้่ องใช้คาํ สั่ง <br> แทรก
่ ผลลัพธ์ที่ได้ ดูรูปที่ 3.12
่ ่ตอ้ งการให้ข้ ึนบรรทัดใหม่ ไมต้่ องมีแท็กปิ ด ดังตัวอยาง
ตามตําแหนงที

การเขียนข้อความที่ตอ้ งการตัดคําขึ้ นบรรทัดใหมสามารถทํ
าได้ดว้ ยการใช้คาํ สั่ง Break (br) แทรก<br>
ข้อความหลังคําสัง่Break จะถูกตัดลงบรรทัดถัดไป
2. คําสั่ งขึน้ ย่ อหน้ าใหม่
<p>.................ข้อความ.........</p>
่ อความในรู ปของยอหน้
่ า (Paragraph) ด้วยการ
สําหรับกลุ่มข้อความจํานวนมาก เราสามารถแบงข้

่ ่ ่ งบรรทัด
ใช้คาํ สัง่ <P> ... </P> ผลที่ได้จะแตกตางจากการใช้
คาํ สัง่ <br> นัน่ คือจะมีการเว้นชองวางหนึ

่ า ดังตัวอยาง
่ ผลลัพธ์ ดูรูปที่ 3.12
กอนและหลั
งยอหน้
่ การจัดกลุม่ ข้อความแบบยอหน้
่ าที่ใช้คาํ สั่ง Paragraph กากบ
ํ ั สวนนี
่ ้ คือยอหน้
่ าแรก</P>
<P>นี่คือตัวอยาง
่ การจัดกลุม่ ข้อความแบบยอหน้
่ าที่ใช้คาํ สั่ง Paragraph กากบ
ํ ั สวนนี
่ ้ คือยอหน้
่ าที่สอง</P>
<P>นี่คือตัวอยาง
ํ ั
ประโยคใหมที่ ่ไมมี่ คาํ สั่งกากบ

รปที
ู ่ 3.12 แสดงการใช้ คาํ สั่ ง
<br> , <p>….</p>

60

3. คําสั่ งกําหนดช่ องว่ างระหว่ างข้ อความ
่ บสนุ นการแสดงผลการ
การพิมพ์ที่มีการเคาะวรรคในหน้าออกแบบ บราวเซอร์ จะไมสนั
ิ ่ 1 เคาะ (จะเว้นวรรค 10 ชองกแสดงเพี
่ ็
่ เดียว) และการกดปุ่ มเยื้องยอหน้
่ า
เคาะเว้นวรรคมากเกนกวา
ยงชอง

่ ่ ่ ้ น เราสามารถกาหนดให้

่ ่ มากกวา่ 1 ชองวางได้
่ ่ ดว้ ยการ
กจะแสดงเพี
ยง 1 ชองวางเทานั
แสดงชองวางได้
่ ่ วอักษร
แทรกอักขระพิเศษลงไปคือ &nbsp; แทน 1 ชุดตอ่ 1 ชองวางตั
ตัวอย่ าง
่ ่ ิ ่ 1 ชองวาง
่ ่ เชน่ นายประสิ ทธิ &nbsp; &nbsp; &nbsp; &nbsp; ชูสกุล
การแทรกชองวางเกนกวา
่ ระหวางชื
่ ่อ - นามสกุล)
(เว้น 4 ชอง
ผลลัพธ์ รู ปที่ 3.13 หมายเลข 1
4. คําสั่ งจัดกล่ ุมข้ อความเยือ้ งย่ อหน้ า
ต้องการให้ขอ้ ความมีการเยื้องจากขอบทั้ งสองข้างของหน้าเว็บเพจ
สามารถใช้คาํ สั่ง
่ าสัง่ ดังกลาวจะเยื

<BLOCKQUOTE> …ข้อความ….. </BLOCKQUOTE> ได้ ข้อความที่อยูร่ ะหวางคํ
้ อง

ระยะจากขอบทั้ งสองด้านดังตัวอยาง
<BLOCKQUOTE> นี่คือข้ อความที่ต้องการเยื ้องให้ ห่างจากขอบทังสองข้

าง เพื่อให้ เกิดกลุ่มข้ อความ
ที่ดสู วยงามอ่านง่าย ด้ วยการใช้ คําสัง่ <BLOCKQUOTE> </BLOCKQUOTE>

ผลลัพธ์ รู ปที่ 3.13 หมายเลข 2
่ าในบรรทัดแรกเพียงบรรทัดเดียว สามารถใช้การแทรกตัวอักษรวาง

หากต้องการเยื้องยอหน้
่ ั านวนเคาะวรรคที่ตอ้ งการได้โดยตรง

่ า
(&nbsp;) ลงไปเทากบจํ
หรื อจะกาหนดในคํ
าสั่งยอหน้
็ (ใช้ได้ดีกบบราวเซอร์



<p style="text-indent: 30"> กได้
IE บราวเซอร์อื่นอาจไมแสดงผล
) ดังตัวอยาง
่ าด้วยการแทรกอักษรวางลงไป

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; การเยื้องยอหน้
6 ชุด

ผลลัพธ์ รู ปที่ 3.13 หมายเลข 3
่ าด้วยการกาหนดสไตล์

ั าสั่งยอหน้
่ า คาตั
่ วเลข 30
<p style="text-indent: 30">การเยื้องยอหน้
ให้กบคํ
่ กเซล </p>
คือหนวยพิ

ผลลัพธ์ รู ปที่ 3.13 หมายเลข 4

61

5. คําสั่ งกําหนดกล่มุ คําให้ เหมือนต้ นฉบับ
่ อความด้วย &nbsp; , <blockquote>,<p style= “text-indent …”>
รู ปที่ 3.13 แสดงคําสัง่จัดตําแหนงข้
5. คําสั่ งกําหนดกล่ ุมคําให้ เหมือนต้ นฉบับ

่มคําให้การแสดงผลบนบราวเซอร์ เหมือนต้นฉบับที่พิมพ์หรื อออกแบบในเอกสาร
การกาหนดกลุ
่ ผลลัพธ์ดงั รู ปที่ 3.14
HTML สามารถใช้คาํ สัง่ <PRE> …ข้อความ….. </PRE> ได้ ดังตัวอยาง
<PRE>
ว.ด.ป.
1.01.51
8.02.51
12.04.51
</PRE>

เวลา
7.50
8.50
8.20

หมายเหตุ
-

62

รูปที่ 3.14 แสดงการใช้ คําสัง่
<PRE>…..</PRE>

6. การจัดวางตําแหน่ งของข้ อความ

การกาหนดให้
ต ัว อัก ษรข้อ ความหรื อ รู ป ภาพ ให้ อ ยู่ใ นตํา แหนง่ ชิ ด ด้า นซ้า ย/กลาง/ขวา
ของหน้าเว็บเพจ (ปกติขอ้ ความจะถูกจัดชิดซ้ายอยูแ่ ล้ว) ด้วยการใช้คาํ สัง่
<DIV ALIGN="LEFT/CENTER/RIGHT"> …ข้ อความ... </DIV>
ครอบข้อความ/รู ปภาพนั้ น
่ ผลลัพธ์ดงั รู ปที่ 3.15
ดังตัวอยาง
<DIV ALIGN="LEFT">ข้ อความนี ้จัดชิดซ้ าย</DIV><br>
<DIV ALIGN="CENTER">ข้ อความนี ้จัดกึง่ กลาง</DIV><br>
<DIV ALIGN="RIGHT">ข้ อความนี ้จัดชิดขวา</DIV>

่ อความด้วย <DIV ALIGN= “”>….</DIV>
รู ปที่ 3.15 แสดงการใช้คาํ สัง่จัดตําแหนงข้

63

7. การทําหัวเรื่อง (Heading)

การกาหนดข้
อความเป็ นหัวเรื่ องเนื้ อหา(Heading) ใช้คาํ สั่ง(Tag) <Hn>…….</Hn> n คือ

ตัว เลขกาหนดขนาด
มี ค่ า 1-6 โดยเลข 1 เป็ นขนาดตัว อัก ษรใหญที่ ่ สุด และ 6 เป็ นขนาดตัว อัก ษร
่ งนี้
เล็กที่สุด การใช้คาํ สัง่ ดังตัวอยางดั
<H4>ข้ อความหัวเรื่ องขนาด 4</H4>

8. การจัดทํารายการย่ อย (List)
การทํารายการหัวข้อมีหลายวิธีสามารถเลือกใช้ได้ตามความต้องการดังนี้
8.1 คําสั่ ง <DL> , <DT> , <DD>


่ ลดลําดับกนั ผลลัพธ์
คําสั่งทั้ ง 3 คําสั่งนี้ ใช้ร่ วมกนั เป็ นการกาหนดหั
วข้อใหญ่ หัวข้อยอย
ดังรู ปที่ 3.16
<DL>
<DT>หัวข้ อที่1</DT><DD> หัวข้ อย่อยที่ 1.1 </DD>
<DT>หัวข้ อที่2</DT><DD> หัวข้ อย่อยที่ 2.1 </DD>
</DL>

รู ปที่ 3.16 แสดงการใช้คาํ สัง่จัดหัวเรื่ องใหญ่ <H..>….</H..>
่ <DL>, <DT>, <DD>
และหัวข้อยอย

64

8.2 คําสั่ ง <LI> ควบคมขอบเขตหั
วข้ อด้ วย <DIR>….</DIR>

่ ิ 20 ตัวอักษร การใช้งานดังนี้
ใช้ควบคุมรายการหัวข้อที่มีความยาวไมเกน
<DIR>
<LI>รายการหัวข้ อที่ 1
<LI>รายการหัวข้ อที่ 2
</DIR>
ผลลัพธ์ ดังรูปที่ 3.17

ผลลัพธ์
• รายการหัวข้ อที่ 1
• รายการหัวข้ อที่ 2

รู ปที่ 3.17 แสดงการใช้คาํ สัง่จัดหัวเรื่ องใหญ่ <H..>….</H..>
่ <LI> โดยควบคุมด้ วย<DIR>…</DIR>
และหัวข้อยอย
8.3 คําสั่ง <LI> ควบคุมขอบเขตหัวข้ อด้ วย

่ ยวกบั <DIR>….</DIR> แตแบบ
่ <MENU>….</MENU>
ใช้ควบคุมรายการหัวข้อเชนเดี
่ ํ
ไมกาหนดความยาว
หัวข้อ การใช้งานดังนี้
<MENU>
<LI>รายการหัวข้ อที่ 1
<LI>รายการหัวข้ อที่ 2
</MENU>

ผลลัพธ์ ดังรู ปที่ 3.18

รู ปที่ 3.18 แสดงการใช้คาํ สัง่จัดหัวเรื่ องใหญ่ <H..>….</H..>
่ <LI> โดยควบคุมด้ วย <Menu>….</Menu>
และหัวข้อยอย

65

8.4 คําสั่ ง <OL>….</OL>

เป็ นคําสัง่ กาหนดลั
กษณะ(Type) รายการหัวข้อให้มีลาํ ดับ เชน่ 1 2 3 ... หรื อ a, b, c… คําสั่ง
ั าสัง่ START การใช้งานตามตัวอยางดั
่ งนี้
<OL>…. <OL> ใช้ควบคุม <LI> โดยใช้ร่ วมกบคํ

1)

<OL START=1 Type=”a”>
<LI>รายการหัวข้ อที่ 1
<LI>รายการหัวข้ อที่ 2
<LI>รายการหัวข้ อที่ 3
</OL>

2)

<OL START=1 Type=”1”>
<LI>รายการหัวข้ อที่ 1
<LI>รายการหัวข้ อที่ 2
<LI>รายการหัวข้ อที่ 3
</OL>

ผลลัพธ์
ดังรู ปที่ 3.19

รู ปที่ 3.19 แสดงการใช้คาํ สัง่จัดหัวเรื่ องใหญ่ <H..>….</H..>

่ <LO> ,<LI>
และกาหนดลั
กษณะหัวข้อยอย
8.5 คําสั่ ง <UL>….</UL>

เป็ นคําสัง่ กาหนดลั
กษณะ(Type) รายการหัวข้อแบบใช้สัญลักษณ์เป็ นหัวข้อ เชน่ • , ο , ƒ
คําสัง่ <UL>…. <UL> ใช้ควบคุม <LI> การใช้งานดังรู ปที่ 3.20

รูปที่ 3.20 แสดงการใช้ คําสัง่ จัดหัวเรื่ อง
<H..>….</H..> และ <UI> ,<LI>

66

8.6 การสร้ างเส้ นคัน่ แนวนอน

การเน้นข้อความหรื อเนื้ อหาให้มีความชัดเจน ด้วยการใช้เส้นคัน่ <HR> สามารถกาหนด

ตําแหนง่ ความหนา ความยาว สี ความทึบ ได้ใช้คาํ สัง่ ดังตัวอยาง


<HR color= “red” size=10> กาหนดให้
เส้นมีสีแดง ความหนา (size) 10 pixels ไม้ได้กาหนด
ความกว้าง จะแสดงผลกว้าง (หรื อความยาวเส้น) เต็มพื้นที่ด้านกว้างของหน้าเว็บ

<HR width= 300 align= “center” color= “blue” size= 5 noshade> กาหนด
ความกว้าง
่ ั 300 pixels อยูก่ ่ ึงกลางหน้า ให้เส้นมีสีน้ าํ เงิน ความหนา(size) 5 pixels ไมกาหนดความทึ
่ ํ
เทากบ

(noshade) รู ปที่ 3.21 ดังนี้

รู ปที่ 3.21 การใช้คาํ สัง่ <HR> สร้างเส้น

67

3.2 คําสั่ งตกแต่ งสร้ างความน่ าสนใจ
1. การใส่ รู ปภาพ
่ ารู ปภาพมาประกอบ ให้ศึกษาชนิ ดของภาพ เชน่ GIF, JPEG และ PNG ที่จะนํามา
กอนนํ


ใช้ประกอบบนเว็บเพจ เชนควรจะต้
องมี ขนาดเล็ก เพื่อนําไปเรี ยกใช้บนเว็บเพจได้อยางรวดเร็

่ ิ 50 KB) ที่สาํ คัญภาพต้องนํามาเกบไว้
็ ใน Folder ที่ใช้เกบ็ไฟล์ต่าง ๆ ของเว็บไซต์
(ขนาดไฟล์ตอ้ งไมเกน
่ ่อ images ไว้เกบรู
็ ปภาพ เพราะการใช้คาํ สั่งอ้างถึงรู ปภาพต้องบอก
ที่สร้างปกติจะสร้างโฟล์เดอร์ ยอยชื

่ไปด้วยเสมอ การสร้างโฟล์เดอร์ยอยภายในโฟล์

โฟล์เดอร์ ที่เกบควบคู
เดอร์ เว็บไซต์ จะไมต้่ องเขียนคําสั่ง
็ ่ หรื อไมได้
่ นาํ รู ปภาพมาเกบไว้
็ ในโฟล์เดอร์ ของเว็บไซต์อา้ งอิง
อ้างถึงให้ยุ่งยาก หากการจัดเกบไมดี

่ ดงโดยจะปรากฏเป็ นกากบาทสี แดง
ผิดรู ปกจะไมแส
แทนคําสั่งใสรู่ ปภาพเป็ นคําสั่งเดี่ยว ไมต้่ อง


่ ่มเชน่ในสวน
มีTage ปิ ด ดังนี้ <IMG SRC="โฟล์เดอร์ เก็บภาพ/ชื่อรูปภาพ"> โดยเราสามารถกาหนดคาเพิ


ของความกว้าง ความยาวของรู ปภาพ ตําแหนงภาพ
ดังตัวอยาง
<img src="images/bird.gif">
→ คําสัง่ ใส่รูปภาพ
<img src="images/bird.gif" width="80" height="66"> →กําหนดความกว้ าง ความสูง
<img src="images/bird.gif" width="160" height="133"> →กําหนดความกว้ าง ความสูง
<img src="images/bird.gif" align=center>
→กําหนดตําแหน่งกึง่ กลาง
( Images คือโฟล์เดอร์ ที่เก็บ bird.gif คือ ชื่อรูปภาพ )

2. ใส่ กรอบและข้ อความอธิบายภาพ
่ ปภาพ โดยใสกรอบภาพ
่ าอธิ บายภาพ ( alt) เมื่ อ


การเพิ่มความนาสนใจแกรู
( Border ) ใสคํ

นําเมาส์มาชี้ ที่ภาพให้ปรากฏคําอธิบายขึ้ นเพื่อสร้างปฏิสมั พันธ์ ความนาสนใจ
แกผู่ ช้ มที่ดี ดังนี้
<img src="images/bird.gif" border="3" alt="ไปชมนก">

3. การทําอักษรเคลือ่ นที่
การเน้นข้อความหรื อเนื้ อหาให้น่าสนใจ ด้วยการสั่งให้เคลื่อนที่ ใช้คาํ สั่ง <MARQUEE>

….ข้อความ ....</MARQUEE> และสามารถกาหนดการควบคุ
ม เชน่ ทิศทาง ความเร็ ว เพิ่มได้ คือ

Direction เชน่ LEFT, RIGHT, DOWN: กาหนดทิ
ศทาง
Behavior เชน่ Scroll (ขวาไปซ้ายแล้วเริ่ มใหม่), Slide (ขวาไปซ้ายแล้วหยุด)

่ ้ น)
Scroll amount = ความเร็ วในการเคลื่อนที่ (ควรกาหนดเพี
ยง 1, 2, 3 เทานั

68

่ งนี้
คําสัง่ตัวอยางดั
<marquee behavior=scroll>อักษรวิ่งจากขวาไปซ้ ายแล้ วเริ่มใหม่</marquee>
<marquee behavior=alternate>อักษรวิ่งจากขวาไปซ้ ายแล้ ววิ่งย้ อนกลับ</marquee>
<marquee behavior=slide>อักษรวิ่งจากขวาไปซ้ ายแล้ วหยุด</marquee>
<marquee direction=right>อักษรวิ่งจากซ้ ายไปขวาแล้ วเริ่มใหม่</marquee>
<marquee scrollamount=2 direction=down>อักษรวิ่งจากบนลงล่างแล้ วเริ่ มใหม่</marquee>

คําแนะนํา...ควรทดสอบการใช้คาํ สั่งเพื่อกาหนด
ลักษณะ ขนาด ความเร็ วในการเคลื่อนที่ ให้เหมาะสม
ตัวอย่ าง Marquee อักษรวิง่ ขึ้ น เมื่อนําเมาส์ช้ ีบริ เวณข้อความ ข้อความจะหยุด เมื่อนําเมาส์
่ ..
ออกนอกพื้นที่ ตัวอักษรวิง่ ตอไป
<TABLE bgcolor= #FFFFCC width = 300 height= 300 border=1 >
<TR><TD> <marquee direction=up height=200 onMouseOut=this.start()
onMouseOver=this.stop() scrollamount=1>
<CENTER>…ใส่ข้อความวิ่งจากด้ านล่างขึ ้นด้ านบน.. CENTER>
</marquee>
</TD>
</TR>
</TABLE>

3.3 คําสั่ งสร้ างตาราง
ในการนําเสนอเนื้ อหา ข้อมูลที่เป็ นรายการ หรื อสถิติต่างๆ โดยทัว่ ไปจะนําเสนอข้อมูลใน
่ ่
รู ปของตาราง เพื่อความเป็ นระเบียบเรี ยบร้อยและงายตอการทํ
าความเข้าใจ ซึ่ งการสร้างเว็บโดยทัว่ ไป

่ ่
ผูอ้ อกแบบจะใช้ตารางเป็ นตัวกาหนดขอบเขตพื
เสมอ คําสั่ง(Tage) ที่ใช้ในการ
้นที่เนื้ อหาแตละสวนไว้
สร้างตารางคือ <TABLE>...</TABLE> พร้อมทั้ งต้องมีแท็กประกอบในการสร้างตาราง เชน่ สร้างแถว,



สร้างคอลัมน์, กาหนดสี
พ้ืน สี เส้นขอบตาราง, กาหนดขนาดตาราง
, การจัดตําแหนงตาราง
เป็ นต้น
่ งนี้
ดังตัวอยางดั
รูปแบบคําสัง่
<TABLE>............................</TABLE>
<CAPTION>....................</CAPTION>
<TR>.....................................</TR>
<TH>....................................</TH>
<TD>....................... ............</TD>

คําอธิบาย
คําสัง่ ที่กําหนดให้ บราวเซอร์ สร้ างตาราง
คําสัง่ ที่ใช้ ตงชื
ั ้ ่อหรื อหัวข้ อเรื่ องให้ กบั ตาราง
คําสัง่ สําหรับสร้ างแถวในตาราง (ROW)
คําสัง่ สําหรับกําหนดข้ อมูลส่วนหัวของตาราง
คําสัง่ สําหรับสร้ างแถวในตาราง (ROW)

69

่ าสัง่ สร้างตาราง กาหนดเส้

ตัวอยางคํ
นขอบตาราง = 2 pixel
รูปแบบคําสัง่

ตัวอย่างผล การใช้คาํ สัง่

<TABLE BORDER="2" >
<CAPTION>ชื่อตาราง</CAPTION>
<TR>
<TH> ส่วนหัว1</TH>
<TH> ส่วนหัว2</TH>
<TR>
<TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
</TR>
<TR>
<TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
</TR>
</TABLE>


่ ่มในตําแหนงตาง
่ ่ ๆ ของตาราง ให้กาหนดในจุ

การกาหนดคุ
ณสมบัติเพื่อตกแตงเพิ
ดที่ตอ้ งการ เชน่

สี พ้ืน สี ตวั อักษร ดังตัวอยาง
รูปแบบคําสัง่
<TABLE BGCOLOR="#FFFF99" BORDER="2" width= 300 >
<CAPTION><FONT face= "cordia new" SIZE="4"
COLOR="blue">ชื่อตาราง</FONT>CAPTION>
<TR>
<TH> <FONT face= "cordia new" SIZE="3"
COLOR="green">ส่วนหัว1</FONT></center></TH>
<TH> <FONT face= "cordia new" SIZE="3"
COLOR="green">ส่วนหัว2</FONT></center></TH>
<TR>
<TD>ช่องที่ 1</TD><TD>ช่องที่ 2</TD>
</TR>
<TR>
<TD>ช่องที่ 3</TD><TD>ช่องที่ 4</TD>
</TR>
</TABLE>

คําอธิบาย และผลการใช้คาํ สัง่



แสดงการกาหนดรายละเอี
ยดเพิ่ ม ในสวน

ขนาดตารางซึ่ งขนาดมี ห นวยเป็
น pixel

สํ า หรั บ ชื่ อ และ หั ว ตาราง กาหนดแบบ
Font และ สี ให้สวยงาม ตําแหนง่(align)
่ อ งกาหนด

่ึ
ไมต้
จะจั ด กงกลางให้
เ สมอ


สําหรั บสี ตารางแตละแถวสามารถกาหนด
่ TR , TD ได้เลย
เพิ่มในแตละ

70

Ø การรวมตาราง
การใช้ คาํ สั่ งรวมคอลัมน์ : Colspan=”x” (x คือ จํานวนคอลัมน์)
คําสัง่

ผลลัพธ์

<TABLE width=200 bgcolor = #CCFFFF BORDER="2" >
<TR>
<TD colspan=”2”>AB</TD><TD>C</TD>
</TR>
<TR>
<TD>D</TD><TD>E</TD><TD>F</TD>
</TR>
</TABLE>

A
D

B
E

C
F

การใช้ คาํ สั่งรวมแถว : Rowspan=”x” (x คือ จํานวนแถว)
คําสัง่
<TABLE bgcolor = #FFFF99 BORDER="2" width=
200>
<TR>
<TD ROWSPAN="2">AD</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>

ผลลัพธ์

A
D

B
E

C
F

71

คําสั่ งจัดการข้ อมลและตารางที
ค่ วรรู้



Width = “x” : x ใช้กาหนดความกว้
างของตาราง ใช้หนวยได้
2 แบบ คือ % (ของความกว้างจอ)
่ บตามความกว้างจอ) เชน่ Width=”80%”, width=”600”
และ pixel (จะไมปรั
ํ ดความสู งของตาราง ใช้หนวยเป็
่ น pixel เทานั
่ ้น
Height = “x”: ใช้กาหน

Align = “x” : ใช้กาหนดตํ
าแหนง่ object ในแนวนอน right หรื อcenter หรื อ left เชน่ align= “center”

Valign = “x” : ใช้กาหนดตํ
าแหนง่ object ในแนวตั้ ง top หรื อ middle หรื อ bottom เชน่ valign= “top”
Colspan = “x” : ใช้รวมคอลัมน์เข้าด้วยกนั x คือจํานวนคอลัมน์
Rowspan = “x”: ใช้รวมแถวเข้าด้วยกนั x คือจํานวนแถว

3.4 การเชื่อมโยงหน้ าเว็บเพจ

Index.html

home.html
index.html
about.html
register.html
Unit1.html
Unit2.html

about.html
index.html
home.html
register.html
Unit1.html
Unit2.html

regist.html
index.html
about.html
home.html
Unit1.html
Unit2.html

Unit1.html
index.html
about.html
register.html
home.html
Unit2.html

Unit2.html
index.html
about.html
register.html
home.html
Unit1.html


รู ปที่ 3.22 แสดงตัวอยางการเขี
ยนผังการเชื่อมโยง(Navigation)ในเว็บไซต์



การเชื่ อมโยงหน้าเว็บเพจ คือ การกาหนดสวนของข้
อความหรื อรู ปภาพที่ตอ้ งการ ให้เป็ น
จุดเชื่ อมโยงไปยังเนื้ อหาจุดอื่น หรื อหน้าเว็บเพจอื่น ซึ่ งเนื้ อหาที่จะเชื่ อมโยงไปอาจจะอยู่ภายในหน้า
เดียวกนั , คนละหน้ากนั หรื ออาจจะอยู่คนละเว็บไซต์ก็ได้ การเชื่อมโยงหน้าเว็บเพจ ประกอบด้วย

่ คือ
สวนประกอบที
่สาํ คัญ 2 สวน

72

่ ่ใช้เป็ นจุดเชื่อมโยงไปยังเป้ าหมายปลายทาง ซึ่ ง
1. จดที
ุ ่ใช้ สําหรับเชื่อมโยง (Link) เป็ นสวนที

อาจจะเป็ นข้อความ หรื อรู ปภาพซึ่งอาจเป็ นภาพนิ่ง หรื อภาพเคลื่อนไหวกได้

2. เป้าหมาย (Target) เป็ นสวนปลายทาง
หรื อ
จุดที่ตอ้ งการให้เชื่อมโยงมาถึงจะอยูส่ ่ วนใดของ
็ ตามที่เรากาํหนด
เอกสารเว็บกได้

รูปที่ 3.23 แสดงการ
สร้ างจุดลิงค์ในหน้ าเว็บ

การสร้ างจดเชื
ุ ่อมโยง มีดงั นี้
1. การลิงค์ ภายในเว็บเพจเดียวกัน (Name Anchor)
ในกรณี ที่หน้าเว็บเพจยาวหรื อมีหลายหัวข้อที่น่าสนใจ ต้องการให้ผชู ้ มไปถึงหัวข้อนั้ น
โดยสะดวกรวดเร็ ว จึงสร้างการเชื่อมโยงไว้สามารถคลิกลิงค์ไปได้ ขั้นตอน มีดงั นี้
1.1 กําหนดเป้ าหมาย (Target)
- คําสัง่ <A NAME= ชื่อเป้ าหมาย>....ข้อความที่ใช้เป็ นจุดเชื่อมโยง....</A>
เชน่ <A NAME= cont02 >ฝ่ ายวิชาการ</A>
1.2 กําหนดจดเชื
ุ ่อมโยง (Link)
- คําสัง่ <A HREF= #ชื่อจุดเชื่อมโยงในข้อ 1>.....ข้อความ.....</A>
เชน่

<A HERF= #con02>คลิกไปที่ฝ่ายวิชาการ</A>

73

2. การลิงค์ ภายในเว็บไซต์ (Web Page/File)
เป็ นการเชื่อมโยงไปยังหน้าเว็บเพจอื่นภายในเว็บไซต์เดียวกนั
-คําสั่ง
<A HERF= "ชื่ อแฟ้ ม" >.....ข้อความที่ใช้เป็ นจุดเชื่ อมโยง.....</A>
เชน่
<A HERF=unit4.html>หน่ วยที่4</A>
3. การลิงค์ ไปยังเว็บไซต์ อนื่ (URL/Website)
เป็ นการเชื่ อมโยงไปยังหน้าเว็บเพจหรื อเว็บไซต์อื่น
ใช้การระบุชื่อโดเมนเต็ม
- คําสัง่ <A HERF=ชื่อเว็บไซต์ >.....ข้อความที่ใช้เป็ นจุดเชื่อมโยง.....</A>
เช่น

<A HERF=http://www.google.co.th>google</A>

4. การลิงค์ อเี มล์ (E-Mail Link)
่ เมล์ที่มีในเครื่ อง
เป็ นการสร้างจุดเชื่อมโยงพิเศษที่ตอ้ งการให้ผชู ้ มคลิกเพื่อเปิ ดโปรแกรมรับสงอี
เพื่อเขียนข้อความ
เช่น <A HREF= "mailto:wanchalong@gmail.com">ผ้ ูจัดทํา</A>
่ อความ ดังนี้
ในกรณี ใช้รูปภาพเป็ นจุดเชื่อมโยง จะใช้คาํ สัง่ อ้างอิงรู ปภาพแทนตําแหนงข้
คําสัง่ : <A HREF="http://www.google.co.th"><IMG SRC="images/chicken1.gif"></A>

การแสดงผลด้ วยโปรแกรมบราวเซอร์
่่
การทดสอบเพื่อแสดงตรวจสอบผลเว็บเพจที่ทาํ การออกแบบด้วยโปรแกรมสร้าง ไมวาจะเป็

่ ่ าสั่ง
การออกแบบด้วยโปรแกรม ภาษา หรื อ โปรแกรมสําเร็ จรู ป เมื่อเขียนโปรแกรมเสร็ จแตละชวงคํ
จะต้องทําการทดสอบผลด้วยโปรแกรมเว็บบราวเซอร์ (เชน่ โปรแกรม IE, Firefox, Safari) ทันทีการ
ั 2 วิธี คือ
ทดสอบผลสามารถทําได้หลายวิธี วิธีที่สะดวกและนิยมใช้กนมี

1. เข้าไปที่โฟล์เดอร์ เกบผลงานเว็
บไซต์ ดับเบิลคลิกที่ไฟล์เว็บเพจ ซึ่ งบันทึกเรี ยบร้อยแล้ว
(นามสกุล htm หรื อ html) โปรแกรมบราวเซอร์ จะทํางานและเปิ ดเว็บเพจนั้ น ๆ ขึ้ นทันที

2. สําหรับผูใ้ ช้โปรแกรมชวยสร้
างเว็บ(โปรแกรมสําเร็ จรู ป)จะมีเครื่ องมือเป็ น Icon หรื อ คียล์ ดั

สําหรับเปิ ดดูเว็บเพจผานโปรแกรมบราวเซอร์
ให้ทุกโปรแกรม เชน่ Dreamweaver จะมี Icon หรื อคียล์ ดั
ให้ใช้เปิ ด เชน่ กด ของโปรแกรม IE ใช้ F12 เป็ นต้น

74

ข้ อมลเกี
ู ย่ วกับโปรแกรมบราวเซอร์ ที่มีใช้ในปัจจุบนั ที่ควรทราบมีดงั นี้

1. โปรแกรม Internet Explorer ของบริ ษทั ไมโครซอฟต์ แถมมากบโปรแกรมวิ
นโดว์ มีผใู ้ ช้มาก
ที่สุด ปั จจุบนั ออกเวอร์ชนั 7.0 หรื อ IE 7 มีขนาด 14.7 MB
ั ้ น ๆ วา่ Firefox ปั จจุบนั เป็ นรุ่ น
2. โปรแกรม Mozilla Firefox บริ ษทั Mozilla นิ ยมเรี ยกกนสั
่ างงาย

2.0.0.9 มีขนาด 5.74 MB สามารถหาคําแนะนําวิธีเซ็ตอัพและการแกปั้ ญหาในการใช้งานได้คอนข้
่ ่ตวั โปรแกรมมีขนาด
3.โปรแกรม Opera พัฒนาโดยบริ ษทั โอเปรา ประเทศนอร์ เวย์ มีจุดเดนที
เล็ก ปั จจุบนั ออกรุ่ น 9.24

่ ้น
4. โปรแกรม Safari ของค่ายแอปเปิ ล ซึ่ งเดิมให้ใช้กบระบบปฏิ
บตั ิการแมคอินทอช เทานั
ั นโดวส์ได้
ขณะนี้ออกรุ่ น 3.1.2 ที่ใช้กบวิ
่ โปรแกรมจะมีหน้าตาเมนู และสี สนั แตกตางไป

โปรแกรมบราวเซอร์แตละ
รวมทั้ งการแสดงผล
่ ่

ในภาษาไทยอาจจะได้ผ ลลัพ ธ์ ที่ ไ มถู่ ก ต้อ ง หรื อหากการตั้ ง คาไมจะไมแสดงภาษาไทยเล
ย การ

ออกแบบสร้างเว็บจึงต้องมีการทดสอบผลเพื่อตรวจสอบตลอดเวลา โปรแกรมบราวเซอร์ แตละโปรแกรม


ที่เลือกใช้ ควรเรี ยนรู ้วิธีการใช้งาน การปรับแตงโปรแกรม
แตละโปรแกรม
ซึ่ งมีผรู ้ ู ้ได้เสนอแนะไว้ใน
่ ๆ ซึ่ งเป็ นศูนย์รวมข้อมูลที่ดีแหงหนึ
่ ่ง
อินเทอร์ เน็ ต หรื อค้นหาข้อมูลได้โดยเฉพาะจากเว็บบอร์ ดตาง
่ ๆ กนั ทําให้คาํ สัง่ HTML หรื อไฟล์ขอ้ มูลที่นาํ มาใสในหน้

เพราะบางครั้ งโปรแกรมมีเงื่อนไขตาง
าเว็บไม่
่ ที่สาํ คัญเมื่อนําเว็บออกเผยแพรควรแนะนํ

่ บ
แสดงผล ทั้ งที่โค้ชคําสั่งดูแล้วถูกต้องทุกอยาง
าผูใ้ ช้ดว้ ยวาเว็

่ เพื่อให้การชม
ของเราจะแสดงผลได้ดีกบโปรแกรม
บราวเซอร์ อะไร ใช้ขนาดความละเอียดหน้าจอเทาไร
เว็บของเราได้ตรงจุดประสงค์ และเห็นผลงานในแบบที่ดูดีที่สุด
สรปบทเรี
ยน การเรี ยนรู ้ ภาษา HTML ถือเป็ นการเรี ยนรู ้ภาษามาตรฐานของโปรแกรมสร้างเว็บเพจ

่ เสมอ เนื่ องจากการสงข้

่ อมูล
สําหรับการเริ่ มต้นเรี ยนรู ้การสร้างเว็บกควรเรี
ยนรู ้ภาษา HTML
กอน
่ ในบราวเซอร์ยคุ ปั จจุบนั ใช้ขอ้ มูลแบบมัลติมีเดียแทบทั้ งสิ้ น จึงต้องใช้เทคโนโลยี WWW
การสื่ อสารตางๆ
ซึ่งต้องใช้ภาษา HTML เป็ นตัวพาไป ด้วยประสบการณ์การใช้งานและการสอน ผูส้ อนเห็นโปรแกรม
่ ยนรู ้ต่าง ๆ
HTML เมื่อนักเรี ยนพอเข้าใจหลักการใช้คาํ สัง่ แล้วก็สามารถเรี ยนรู ้เพิ่มเติมได้เองจากแหลงเรี
่ ่ http://www.w3schools.com/ ในการสอนควรเน้นไปที่การใช้โปรแกรมแบบ WYSIWYG กลุ่ม
เชนที

โปรแกรมสําเร็ จรู ปที่มีประสิ ทธิ ภาพในการสร้ างงานได้เร็ ว มีเทคนิ คสร้างความนาสนใจ
รู ปแบบได้
่ ้ นได้พฒั นามารองรับภาษา HTML , XHTML และ XML โดยสร้าง
มาตรฐานให้มาก โปรแกรมเหลานั
้ คําสั่ง พร้อมทั้งเขียนคําสั่ง เสริ มลงไปในจุดที่ตอ้ งการ
คําสั่งให้อตั โนมัติ หากสามารถตรวจ และแกไข
่ ๆ ได้มากขึ้ น ให้ศึกษา HTML
เพิ่มเติมได้ จะทําให้การเรี ยนรู ้การสร้างเว็บ มีเวลาสร้างทักษะแบบตาง
เพิม่ เติมที่เว็บไซต์ http://www.w3schools.com/ , http://www.w3.org/MarkUp/



เพื่อให้นกั ศึกษาทบทวนความรู ้ในบทเรี ยน ให้ตอบคําถามตอไปนี
ความรู ้ในสิ่ งตอไปนี
้ วาเรามี

เพียงใด

75

แบบฝึ กหัดประจําบทเรียน

คําสั่ ง ให้ตอบคําถามตอไปนี

1. ให้บอกที่มาและความสําคัญของ HTML มาโดยสังเขป
........................................................................................................................................................................
.......................................................................................................................................................
่ คําสัง่ ตาง
่ HTML มา 10 คําสัง่
2. ให้ยกตัวอยาง
………………………………………………………………………………………………………………
………………………………………………………………………………………………………………

3. ให้อธิบายความหมายของบรรทัดคําสัง่ ตอไปนี

3.1 <head> หมายถึง..............................................................................................................
3.2 <meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
หมายถึง……………………………………………………………………........................
3.3 <META NAME="Author" CONTENT="Prasit chusakul">
หมายถึง……………………………………………………………………...................
3.4 <META NAME="Keywords" CONTENT=" WEB DESIGN">
หมายถึง……………………………………………………………………....................
3.5 <META NAME="Description" CONTENT="WEB DESING DREAMWEAVER">
หมายถึง……………………………………………………………………....................
3.6 <title>Start เริ่ มต้นการออกแบบเว็บ</title>หมายถึง……………………………………….
3.7 </head>หมายถึง…………………………………………………………………………….

ตัวอักษร สี ขนาด
4. ให้แสดงคําสัง่ การเพิม่ คุณสมบัติให้ <FONT> โดยกาหนดขนาด
......................................................................................................................................................................

าง ความสู ง สี พ้ืน ขนาดเส้น
5. ให้แสดงคําสั่ง การเพิ่มคุณสมบัติให้ <TABLE> โดยกาหนดความกว้
สี เส้น : ........................................................................................................................................................

76

อ้ างอิง
กฤษณะ สถิต , สร้ างโฮมเพจด้ วยตนเอง , กรุ งเทพ : Info press
ณัชติพงศ์ อูทอง , การสร้ างเว็บเพจ(ภาษา HTML), กรุ งเทพ : เอมพันธ์
บุญสื บ โพธิศรี และคณะ, การสร้ างเว็บเพจ ด้ วย HTML,กรุ งเทพ : ศสอ.
่ บค้น :
แหลงสื
- http://www.w3schools.com/
- http://www.w3.org/MarkUp/