งานความรู้พื้นฐานการสร้างเว็บไซด์55

ผูจ้ ัดทำ ด.ญ. ภัคจริ ำ ประชำรำษฎร์
เสนอ นำงชนิดำภำ อสิพงษ์



รำยงำนเล่มนจี้ ัดทำข้ึนเพื่อเปน็ สว่ นหน่งึ ของวิชำ…….ชัน้ …เพื่อให้ไดศ้ ึกษำหำ
ควำมรูใ้ นเรื่อง……..และไดศ้ ึกษำอย่ำงเข้ำใจเพื่อเปน็ ประโยชน์กับกำรเรยี น

ผูจ้ ัดทำหวังว่ำ รำยงำนเล่มนจี้ ะเป็นประโยชนก์ ับผู้อำ่ น หรือนักเรยี น
นักศึกษำ ทีก่ ำลังหำข้อมูลเรอ่ื งนี้อยู่ หำกมีข้อแนะนำหรอื ข้อผิดพลำดประกำร
ใด ผูจ้ ัดทำขอน้อมรับไวแ้ ละขออภัยมำ ณ ทีน่ ีด้ ้วย

หนว่ ยท่ี1 ความรู้พืน้ ฐานการสร้างเวบ็ ไซต์



2

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

1. อธบิ ำยควำมรู้ทวั่ ไปเกี่ยวกับอนิ เทอร์เน็ตได้
2. บอกหลักกำรออกแบบเว็บไซตไ์ ด้
3. อธิบำยขั้นตอนกำรพัฒนำเวบ็ ไซตไ์ ด้
4. บอกลักษณะโครงสรำ้ งของเวบ็ ไซตไ์ ด้
5. สรำ้ งโฟลเดอร์สำหรับเก็บขอ้ มูลเวบ็ ไซตไ์ ด้
6. ยกตัวอย่ำงโปรแกรมสรำ้ งเอกสำรเวบ็ ไซต์ได้

4

หนว่ ยท่ี 1 ความรพู้ น้ื ฐานเการสร้างเว็บไซด์

5

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

ในกำรติดตอ่ กันระหวำ่ งเครื่องคอมพวิ เตอร์ จำเปน็ ต้องมีกำรระบุว่ำ ส่ง
มำจำกไหน สง่ ไปให้ใครซึ่งตอ้ งมี
กำรระบุ ชือ่ เครือ่ ง (คลำ้ ยกับเลขทีบ่ ้ำน) ในอินเทอร์เนต็ ใช้ข้อตกลงในกำรติดต่อ
ทีเ่ รียกวำ่ TCP/IP (ข้อตกลงที่ทำให้
คอมพวิ เตอรต์ ดิ ต่อกันได้) ซึง่ จะใช้ส่งิ ที่เรียกคำ่ “ไอพี-แอดเดรส” (IP-Address)
ในกำรระบุชือ่ เครื่องจะไมม่ ีเบอร์
ทีซ่ ำ้ กันได้

ในปัจจุบันมีคนทั่วโลกนับพันล้ำนคนทเี่ ข้ำถึงบรกิ ำรบนอินเตอร์เนต็ เชน่
เวลิ ดไ์ วดเ์ วบ็ (WWW) อีเมล์
(e-mail) พำณชิ ย์อิเลก็ ทรอนกิ ส์ (e-commerce) หอ้ งคุย (chat room) กำรส่ง
สำรทันที (instant messaging)
วอยซโ์ อเวอรไ์ อพีหรือวีโอไอพี (Vioce over IP : VoIP) และเว็บไซตเ์ ครือขำ่ ย
ทำงสังคม (Social network)

6

รูปที1่ .1 แสดงบรกิ ำรบนอนิ เตอรเ์ นต็

เวลิ ด์ไวด์เว็บ (World Wide Web) หรือเรียกสัน้ ๆ ว่ำ เวบ็ เปน็ กำรให้บรกิ ำรข้อมูลแบบไฮเปอรเ์ ทก็ ซ์
(hypertext) ทีป่ ระกอบไปด้วยเอกสำรจำนวนมำกทีม่ ีกำรเชือ่ มโยงกัน ซึ่งป็นแหล่งของข้อมูลขนำดใหญ่ทีผ่ ู้ใช้
อินเทอร์เน็ต สำมำรถเขำ้ ถงึ ผ่ำนโพรโทคอลทีเ่ รียกวำ่ เอชทีทีพี (hypertext Transfer Protocol: HTTP)
นอกจำกนี้
เวลิ ดไ์ วดเ์ ว็บคอนซอร์เทียมไดน้ ิยำมคำว่ำเว็บคือ จักรวำลของสำรสนเทศทสี่ ำมำรถเขำ้ ถงึ ไดผ้ ำ่ นเครือขำ่ ย และทำ
ให้เกดิ
องค์ควำมรูแ้ กม่ นุษยชำติ สำหรบั คำทเี่ กี่ยวข้องกับเวลิ ดไ์ วดเ์ ว็บทีค่ วรทรำบ เชน่

เวบ็ เพจ (Web page) เป็นหน้ำเอกสำรที่เขยี นขนึ้ ในรปู แบบภำษำเอชทีเอม็ แอล (Hypertext Language :
HTML) ซ่ึงสำมำรถเชื่อมโยงไปยังเอกสำรหน้ำอื่นได้ โดยเรียกดูผำ่ นเว็บเบรำว์เซอร์

โฮมเพจ (Home Page) เวบ็ เพจทีเ่ เสดงข้ึนมำเปน็ หนำ้ แรกของแต่ละเวบ็ ไซต์ สว่ นของโฮมเพจนีจ้ ะมี
จุดเชื่อมโยงใหส้ ำมำรถเข้ำไปเยี่ยมชมหน้ำตำ่ งๆ ของเว็บไซต์ได้

เวบ็ ไซต์ (Web site) เปน็ กลุม่ ของเว็บเพจทีม่ ีควำมเกีย่ วขอ้ งกัน และอยู่ภำยใตช้ ื่อโดเมนเดียวกัน
เว็บเซริ ์ฟเวอร์ (Web server) เป็นเครื่องคอมพวิ เตอร์ทีใ่ หบ้ ริกำรเว็บเพจ เมือ่ ผู้ใช้ร้องขอเว็บเพจผำ่ น
เวบ็ เบรำว์เซอรโ์ ดยใชย้ อู ำร์แอล (Uniform Resource Locator : URL) ระบุตำแหน่งของเว็บเพจ เวบ็ เซริ ์ฟเวอร์จะ
ส่ง
เวบ็ เพจทีค่ น้ หำได้กลับไปแสดงผลผำ่ นเว็บเบรำวเ์ ซอรข์ องผูใ้ ช้
เวบ็ โฮสติ้ง (Web Hosting) เปน็ กำรให้บรกิ ำรพน้ื ทสี่ ำหรับสรำ้ ง และจัดเก็บเว็บไซต์ของหน่วยงำน หรือ
บุคคลทั่วไป เพือ่ ให้บุคคลอืน่ เขำ้ ถงึ ได้โดยผำ่ นอนิ เทอรเ์ นต็
เว็บเบรำวเ์ ซอร์ (Web Browser) เปน็ โปรแกรมใช้สำหรบั แสดงเวบ็ เพจ และสำมำรถเชือ่ งโยงไปยัง
สว่ นอื่นในเว็บเพจเดยี วกันหรือ เว็บเพจอ่นื ผ่ำนกำรเชื่อมโยงหลำยมติ ิ หรือไฮเปอรล์ งิ ค์(Hyperlink) เรียกสัน้ ๆ ว่ำ
ลิงค์
(link) เวบ็ เบรำว์เซอร์ชว่ ยเพิ่มควำมนำ่ สนใจในกำรใช้งำนอินเทอรเ์ น็ต นอกเหนือไปจำกกำรสือ่ สำรหรอื
แลกเปล่ยี นไฟล์
ระหว่ำงเครือขำ่ ย ตัวอย่ำงเว็บเบรำว์เซอร์ เชน่ Mozilla Firefox, Microsoft Internet Explorer, Apple Safari
และ Opera

7

รูปท่ี 1.2 แสดงตัวอย่างโปรแกรมเวบ็ เบราว์เซอร์

โดเมนเนม (Domain Name) กำรเชือ่ มต่ออินเตอรเ์ นต็ จะต้องกำหนดที่
อยูห่ รือแอดเดรสของผู้ใชง้ ำน
เรียกว่ำ ไอพีแอดเดรส (Ip Address) มีกำรตั้งชือ่ แบบง่ำยขึ้นเรียกว่ำ
ระบบโดเมนเนม หรือ DNS - Domain Name
System) เป็นระบบท่แี ปลงตัวเลขไอพีแอดเดรสให้เป็นชือ่ ทีอ่ ่ำนเขำ้ ใจ
งำ่ ยและสอดคลอ้ งกับชื่อองค์กรหรือหน่วยงำน
ของผู้เปน็ เจำ้ ของ เช่น google.com (เวบ็ ไซตข์ องกูเกิล)

เวิลด์ไวด์เว็บคอนซอร์เทียม (World Wide Web Consortium:
W3C) เป็นหนว่ ยงำนทีท่ ำหน้ำที่
ควบคมุ ดูแลรวมทั้งกำหนดมำตรฐำน คำแนะนำต่ำงๆ ทีเ่ ก่ยี วกับ
อนิ เทอรเ์ น็ต โดยมีวัตถุประสงค์ใหอ้ ินเทอรเ์ น็ตมี
กำรพัฒนำอยำ่ งตอ่ เนื่อง

รปู ท่ี 1.3 แสดงเวิลดไ์ วดเ์ วบ็ WWW

[1] ทีม่ ำ : http://www.21.worawut-k.ws/index.php/browser/
[2] ที่มำ : http://www.networksupport.uk.com/services/domain-names

8

หลักกำรออกแบบเวบ็ ไซต์

วธิ ีกำรออกแบบและพัฒนำเวบ็ ไซตน์ ัน้ สำมำรถทำได้หลำยรูปแบบ ขน้ึ อยกู่ ับลักษณะของขอ้ มูลที่จะใช้
นำเสนอในเอกสำรเว็บ ควำมพงึ พอใจของผูท้ ี่ทำกำรสรำ้ ง ตลอดจนกลุ่มเป้ำหมำยหลักที่ตอ้ งกำรใหเ้ ป็นผู้อำ่ นข้อมูล
ในเอกสำรเวบ็ เหล่ำนัน้ ตัวอย่ำงเช่น หำกกลุม่ เป้ำหมำยเป็นเดก็ วัยรุ่น ควรนำเสนอข้อมูลเกีย่ วกับควำมสนใจของ
กลุ่มวัยรุน่ เช่น ข้อมูลทำงดำ้ นบันเทิง และควรออกแบบให้มีลูกเลน่ ที่หลำกหลำย สีสันใสเป็นทนี่ ่ำสนใจสำหรบั วัยรุ่น
เป็นต้น หำกเปน็ เวบ็ ไซต์ทีเ่ กี่ยวข้องทำงด้ำนวชิ ำกำร จะให้ควำมสำคัญกับเนื้อหำที่ข้อควำมมำกกว่ำสีสันทใ่ี ชใ้ นเวบ็ ไซต์

กำรออกแบบและพัฒนำเวบ็ ไซตน์ ั้นควรมกี ำรวำงแผนกอ่ นกำรพัฒนำเสมอ ต้องศกึ ษำถึงขอ้ กำหนด
พืน้ ฐำน
ที่ควรทรำบก่อน เช่น กำรกำหนดชือ่ โฟลเดอร์ ประเภทของแฟม้ ข้อมูลทีเ่ ปน็ เอกสำรเวบ็ ประเภทของแฟม้ ขอ้ มูล
รูปภำพทีส่ ำมำรถแสดงผลได้ ตลอดจนแฟ้มขอ้ มูลประเภทอืน่ ๆ ทีส่ ำมำรถนำมำใชป้ ระกอบในกำรทำเวบ็ ไซต์

กฎพืน้ ฐำนสำหรับกำรสรำ้ งเว็บไซต์ ควรใส่ใจมีอยู่ 10 ประกำร
1. ใชพ้ ื้นหลัง (Background) สะอำด เรียบงำ่ ย เลือกขนำดและสีให้เหมำะสม
2. คดิ กอ่ นใชเ้ อฟเฟคทต์ ่ำงๆ ไมค่ วรใชเ้ ยอะ
3. ใชต้ ัวอักษรที่คมชัด
4. ออกแบบกรำฟิกให้มีขนำดไฟลเ์ ล็กๆ เพื่อควำมรวดเรว็ ในกำรแสดงผล
5. ควบคุมขนำดของเว็บไซตใ์ ห้ดี อำจจะระบุว่ำควำมใช้กับหนำ้ จอขนำดใดเว็บเบรำว์เซอร์

รุ่นไหน
วำงรูปแบบโครงสรำ้ งใหเ้ หมำะสม ไม่ลน้ จนเกินไป หำกเวบ็ ไซตเ์ ป็นเฟรมควรตั้งค่ำแบบ

ยืดหยุ่นเปน็
เปอรเ์ ซนต์แทนตัวเลขคำ่ คงที่
6. วำงแผนและออกแบบกอ่ นลงมือสรำ้ ง ควรวำงแผนตลอดทั้งเวบ็ ไซต์ หำกเว็บไซต์มี

ควำมซับซ้อน
ควรเพม่ิ แผนทีข่ องเวบ็ ไซต์ (Site Map) เพือ่ ให้ผูช้ มเข้ำใจง่ำยและจัดกำรเวบ็ ไซตไ์ ดง้ ำ่ ยขึ้น
7. ชี้นำผูช้ มดว้ ยวธิ ีกำรง่ำย ๆ ตรงตำมจุดประสงค์ ไม่ควรทำเป็นเวบ็ ไซต์แบบรวมมิตร
8. อยำ่ พยำยำมใช้เทคโนโลยีตัวที่ล้ำหนำ้ เกินไป ควรดำเนินตำมเทคโนโลยีมำตรฐำนสำกล

ที่ผูค้ น
ทั่วไปใช้กันอยู่ ต้องคำนงึ ถงึ ข้อจำกัดของผูช้ มดว้ ย
9. งำ่ ย ๆ แต่จรงิ ใจ ครบถ้วน เปน็ กันเองกับผู้ใช้งำน
10. อัพเดทปรับปรุงเวบ็ ไซตอ์ ยูเ่ สมอ

9

ลำดับขัน้ ตอนสำหรับกำรพัฒนำเวบ็ ไซต์ สำมำรถจำแนกเป็นลำดับขั้นตอนได้ดังนี้
1. กำรวำงแผนพัฒนำเวบ็ ไซต์

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

ออกแบบมุมมองในหนำ้ เวบ็ (LayOut) คือกำรจัดวำงองคป์ ระกอบในเว็บไซต์วำ่ ส่วน
ใดควรจะมอี ะไร
อำจทำโดยกำรร่ำงใส่กระดำษเปลำ่ ๆ ไวก้ ่อนหรอื ใช้โปรแกรมคอมพวิ เตอร์ชว่ ยในกำร
ออกแบบกไ็ ด้ กำรใช้ตำรำง
ช่วย ในกำรจัดองคป์ ระกอบในหนำ้ เวบ็ นัน้ จะทำให้เวบ็ ไซตม์ ีควำมเป็นระเบียบยงิ่ ขน้ึ และ
สะดวกตอ่ กำรแกไ้ ขปรับปรุง
เว็บไซต์

10

รูปท่ี 1.4 แสดงตวั อย่างการออกแบบหน้าเวบ็ เพจ (Layout)

2. สร้ำงโฟลเดอร์ สำหรับเก็บเอกสำรเว็บไซตแ์ ละรูปภำพ
3. จัดหำภำพทีเ่ กีย่ วขอ้ งกับเนือ้ หำ มำปรับแต่งและเก็บไวใ้ นโฟลเดอรท์ สี่ ร้ำงขึ้นมำ
4. สร้ำงเอกสำรเว็บเพจโดยกำหนดชื่อเว็บเพจ ให้เป็นไปตำมขอ้ กำหนดและจัดเก็บไว้ใน
โฟลเดอรท์ ี่สร้ำงข้นึ
5. ตรวจสอบผลเอกสำรเว็บเพจและปรับปรุงแก้ไข ผ่ำนโปรแกรมเว็บเบรำวเ์ ซอร์ (Web
Browser)
6. ทำกำรเผยแพรโ่ ดย นำขอ้ มูลที่จัดทำข้ึนไปเกบ็ บนเครื่องแมข่ ่ำย (Server) และทำกำร
ตรวจสอบผลกำรเรียกดู
เอกสำรเวบ็ ไซต์ทอี่ ยู่บนเครือ่ งแมข่ ่ำยผำ่ นทำงจำกเคร่อื งลกู ขำ่ ย (Client)
[1] ทีม่ ำ : http://tarmomay.exteen.com/20130319/entry

11

กำรออกแบบโครงสรำ้ งเวบ็ ไซต์ สำมำรถทำไดห้ ลำยแบบ ขนึ้ อยู่
กับลักษณะของขอ้ มูล ควำมถนัดของผู้ออกแบบ
ตลอดจนกลุม่ เปำ้ หมำยที่ต้องกำรนำเสนอ โครงสร้ำงของเวบ็ ไซต์
ประกอบไปดว้ ย 3 ลักษณะดังนี้

1. แบบเชิงเส้น เปน็ โครงสร้ำงแบบธรรมดำ ง่ำยตอ่ กำร
จัดระบบข้อมูล ขอ้ มูลทีน่ ยิ มจัดดว้ ยโครงสรำ้ งแบบนี้
มักเปน็ ข้อมูลที่มีลักษณะเป็นเรือ่ งรำว ตำมลำดับ โครงสรำ้ งแบบนี้
เหมำะกับเวบ็ ไซต์ที่มีขนำดเลก็ เนือ้ หำไมซ่ ับซ้อนใช้
กำรลิงค์ (Link) ไปทีละหน้ำทิศทำงของกำรเข้ำสูเ่ นื้อหำ ภำยในเว็บ
จะเปน็ กำรดำเนินเรื่องในลักษณะเส้นตรง โดยมีป่มุ
เดนิ หน้ำ-ถอยหลัง เปน็ เครื่องมือหลักในกำรกำหนดทิศทำง ขอ้ เสียของ
โครงสร้ำงระบบนีค้ ือ ผูใ้ ช้ไม่สำมำรถกำหนดทิศทำง
กำรเข้ำสู่เนือ้ หำของตนเองไดท้ ำใหเ้ สียเวลำ ในกำรเขำ้ สู่เนอ้ื หำ

12

รูปที่ 1.4 แสดงโครงสร้างของเวบ็ ไซต์แบบเชิงเส้น

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

13

รูปที่ 1.5 แสดงโครงสร้างของเวบ็ ไซต์แบบลาดบั ชนั้
3. แบบผสม เป็นการจดั เรียงหน้าเอกสารเวบ็ ไซต์ โดยผสมผสานระหวา่ งแบบลาดบั
ชนั้ และแบบเชิงเส้น
โครงสร้างประเภทนีจ้ ะมีความยืดหยนุ่ มากทีส่ ดุ ทกุ หน้าในเวบ็ สามารถจะเช่ือมโยงไป
ถงึ กนั ได้หมด เป็นการสร้างรูปแบบ
การเข้าสเู่ นือ้ หาทีเ่ ป็นอสิ ระ ผ้ใู ช้สามารถกาหนดวธิ ีการเข้าสเู่ นือ้ หาได้ด้วยตนเอง

14
รูปที่ 1.6 แสดงโครงสร้างของเวบ็ ไซต์แบบผสม

15

กำรกำหนดโฟลเดอรเ์ ว็บไวซต์

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

ตัวอย่ำง กำรสร้ำงโฟลเดอร์ ชือ่ MyWeb ไวท้ ี่ Desktop ของระบบปฏบัติ
กำร Windows

1. ทีห่ นำ้ จอคอมพิวเตอร์ นำเมำสไ์ ปชีต้ รงตำแหน่งที่ว่ำงบน Desktop
จำกนั้นคลิกเมำส์ปุ่มขวำเพื่อแสดงเมนูลัด

2. ทำกำรเลือกคำสัง่ New ---> Folder
3. จะปรำกฎไอคอนโฟลเดอร์ใหม่ New Folder
4. ให้ทำกำรพิมพช์ ือ่ โฟลเดอร์ ในทีน่ ี้คือ MyWeb จำกนัน้ กดปุ่ม Enter
จะปรำกฎโฟลเดอรช์ ือ่ MyWeb

15

รูปที่ 1.7 แสดงขนั้ ตอนการสร้างโฟลดอร์สาหรับเก็บข้อมลู เวบ็ ไซต์

กำรตั้งชื่อโฟลเดอร์และไฟลเ์ ว็บเพจ
ขอ้ กำหนดสำหรบั กำรตัง้ ชือ่ ของแฟม้ ข้อมูลนั้น นอกจำกจะขน้ึ อย่กู ับควำมสำมำรถของระบบปฏบิ ัติกำรแล้ว
ยังตอ้ งขน้ึ อยู่กับข้อกำหนดของผูด้ ูแลระบบของเครือ่ งแม่ข่ำยท่ใี หบ้ รกิ ำรเว็บไซต์ด้วย ดังนั้นผูท้ ีส่ รำ้ งเว็บไซต์จะต้องสอบถำม
กฎกำรตัง้ ชื่อเหล่ำนีโ้ ดยละเอียด โดยทั่วไปแลว้ มีหลักกำรดังนี้
1. ควรใช้ตัวอักษรเปน็ ตัวพิมพเ์ ลก็ a-z หรือตัวเลข 0-9 หรือผสมกัน
2. หำ้ มเว้นวรรคในช่อื ไฟล์หรือโฟลเดอร์ ถ้ำต้องกำรสื่อควำมหมำยของคำหรือข้อควำมให้ใช้ Underscore
( _ ขีดล่ำง) Dash ( - ขีดกลำง) คัน่ เชน่ tip_tricks.html (ไม่ควรใช้ tip tricks.html) หรือ how_to_write.html อำจ
เขยี นเปน็ how2write.html ก็จะสือ่ ควำมหมำยได้
3. ห้ำมใช้เครือ่ งหมำยอื่นใดในชอื่ ไฟล์หรือโฟลเดอร์ ยกเว้น Underscore และ Dash
4. ชื่อไฟล์แรกของเอกสำรบนเวบ็ ไซต์ มักจะใช้ชือ่ index
5. นำมสกุลของเอกสำรบนเว็บที่เป็นภำษำ HTML จะมี 2 รูปแบบ คือ .htm และ .html (ควรสอบถำมผู้ดูแล
ระบบที่ใหบ้ รกิ ำรเครื่องเซิร์ฟเวอรเ์ กบ็ เอกสำรเวบ็ ว่ำใหบ้ ริกำรใชน้ ำมสกุลใดในไฟลเ์ ริม่ ตน้ ) คำ่ มำตรฐำนส่วนใหญ่กำหนด
ให้เปน็ index.html
6. ไมค่ วรใช้ตัวอักษรตัวเล็ก/อักษรตัวใหญ่ผสมกัน เพรำะในเครื่องทีใ่ ช้ระบบ Unix จะถือวำ่ มีควำมหมำย
ต่ำงกัน (ในวนิ โดวม์ ีควำมหมำยเป็นชือ่ เดียวกัน) เช่น Index.html กับ index.html จะถือว่ำมี 2 ไฟล์ที่แตกต่ำงกัน
นอกจำกนี้ ยังมีสืง่ ที่ควรพิจำรณำเพิ่มเติมดังตอ่ ไปนี้
รูปแบบกำรแสดงผลของหนำ้ เว็บเพจ หมำยถงึ ลักษณะกำรวำงเนือ้ หำและรำยกำรเลือกต่ำง ๆ บนหนำ้
เว็บเพจซึ่งมีได้หลำกหลำยรูปแบบ เชน่

กำรแสดงผลเนือ้ หำทัง้ หมดรวมในหนำ้ เดียวกัน ซงึ่ กำรแสดงผลแบบนี้จะรวมเอำรำยกำรเลือก
และเนือ้ หำไวใ้ นหนำ้ เดียวกัน

16

กำรแสดงผลด้วยตำรำง กำรแสดงผลรปู แบบนี้จะแยกระหว่ำงรำยกำรเลือกหรือเมนู (Menu)
ไว้
ดำ้ นหน่ึงของตำรำงและ เนื้อหำขอ้ ควำมจะอยอู่ ีกดำ้ นหนง่ึ

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

ขอ้ ควำมทีใ่ ชส้ ำหรับแสดงหัวเรื่องของเว็บเพจ หมำยถงึ ขอ้ ควำมทีจ่ ะปรำกฏในสว่ นหัว
ของหนำ้ ตำ่ ง
เอกสำรเว็บ (Title Bar) โดยข้อควำมสว่ นนจะถูกนำไปใช้เปน็ คำสำคัญ (Keyword) ที่ใชใ้ น
กำรค้นหำเวบ็ ไซตจ์ ำกบุคคล
อืน่ ข้อควำมที่นำมำกำหนดเปน็ หัวเรือ่ งของเวบ็ เพจนั้น ควรมีลักษณะดังตอ่ ไปนี้

- สำมำรถเปน็ ขอ้ ควำมภำษำไทยหรืออังกฤษ
- มีควำมยำวไมเ่ กนิ 64 ตัวอักษร
- เปน็ ข้อควำมทสี่ ือ่ ควำมหมำยที่กระชับเกี่ยวกับเนือ้ หำในหนำ้ เว็บเพจนั้น

ลักษณะของหน้ำเวบ็ หมำยถึง กำรกำหนดสีของพื้นของเอกสำร (Background Color)
หรือรปู ภำพทีจ่ ะ
นำมำใช้เป็นพืน้ หลังของเอกสำรเว็บ (Background Image) สีของตัวอักษรปกติ (Normal Text)
สีของตัวอักษรทีใ่ ช้เป็น
จุดเชื่อมตอ่ (link Text) เพื่อให้เอกสำรเวบ็ แตล่ ะหน้ำมีกำรแสดงผลที่สวยงำม และดงึ ดดู ควำม
สนใจของผูใ้ ช้งำน

17

โปรแกรมการสร้างเวบ็ ไซต์

กำรพัฒนำเวบ็ ไซต์สำมำรถทำได้โดยกำรใชภ้ ำษำ HTML ซึ่งมีลักษณะ
กำรเขียนโปรแกรมภำษำดว้ ยวธิ ีกำรลง
รหัสคำสัง่ HTML คล้ำยกับกำรเขยี นโปรแกรมภำษำคอมพิวเตอร์ทั่ว ๆ
ไป แตใ่ นปัจจุบันมีเคร่อื งมือชว่ ยพัฒนำหลำกหลำย
รูปแบบ ทั้งแบบชว่ ยลงรหัส HTML และแบบสรำ้ งงำนอัตโนมัติ
(Wizard) ทัง้ นี้สำมำรถจำแนกกำรสร้ำง/พัฒนำเว็บไซต์
ด้วยโปรแกรมตำ่ งๆ ได้ 4 วธิ ี คือ

1. กำรพัฒนำเว็บไซต์ดว้ ยโปรแกรม Text Editor
กำรใช้ Text Editor เช่น NotePad, Qeditor เปน็ วิธีท่เี หมำะ
สำหรับนักพัฒนำเว็บที่มีควำมรู้เกีย่ วกับภำษำ
HTML ในระดับสูง และตอ้ งกำรใส่ลูกเลน่ ให้กับเวบ็ เพรำะผู้พัฒนำ
สำมำรถควบคุมตำแหน่ง และจำนวนรหัสคำสัง่ ได้อิสระ อยำ่ งไรกต็ ำม
วิธีนีก้ ไ็ ม่เหมำะสำหรับผูพ้ ัฒนำในระดับต้น เพรำะต้องศกึ ษำคำสัง่
HTML และใช้เวลำในกำรพัฒนำพอสมควร
ในแตล่ ะหนำ้ เวบ็ ตลอดจนไมเ่ ห็นผลลัพธจ์ ำกกำรปอ้ นคำสัง่ ทันที ต้อง
เรียกผ่ำนโปรแกรมเบรำว์เซอร์

18

1. กำรพัฒนำเว็บไซตด์ ว้ ยโปรแกรม Text Editor

กำรใช้ Text Editor เชน่ NotePad, Qeditor เป็นวิธีที่
เหมำะสำหรับนักพัฒนำเว็บทมี่ ีควำมรูเ้ กี่ยวกับภำษำ
HTML ในระดับสูง และตอ้ งกำรใสล่ ูกเลน่ ใหก้ ับเวบ็ เพรำะ
ผู้พัฒนำสำมำรถควบคมุ ตำแหน่ง และจำนวนรหัสคำสงั่ ไดอ้ สิ ระ
อย่ำงไรก็ตำมวธิ นี ีก้ ไ็ มเ่ หมำะสำหรับผูพ้ ัฒนำในระดับต้น เพรำะ
ต้องศึกษำคำสั่ง HTML และใชเ้ วลำในกำรพัฒนำพอสมควร
ในแตล่ ะหน้ำเว็บ ตลอดจนไมเ่ ห็นผลลัพธจ์ ำกกำรป้อนคำสัง่
ทันที ต้องเรยี กผำ่ นโปรแกรมเบรำว์เซอร์

19

รูปที่ 1.8 แสดงตวั อยา่ งโปรแกรม Notepad

2. กำรพัฒนำเว็บไซต์ด้วยโปรแกรม HTML Editor
โปรแกรม HTML Editor ทีน่ ยิ มกันอยำ่ งสูงในปัจจุบัน ไดแ้ ก่ โปรแกรม
HomeSiteX, Coffee Cup HTML
Editor, HTML Assistant, HotDog Professional โดยโปรแกรมเหล่ำนี้ จะ
ชว่ ยให้กำรลงรหัสกระทำได้สะดวกและ
รวดเร็วเพรำะมีปุ่มคำสั่ง ควบคุมรหัสคำสั่ง HTML คลำ้ ยๆ กับปุ่มคำสัง่ ใน
Microsoft Office อยำ่ งไรกต็ ำมโปรแกรม
กลุ่มนีก้ ม็ ีจุดด้อย คือจะไมร่ ู้จักคำสัง่ HTML ใหม่ ๆ จึงไม่มีปุ่มคำสั่งเหล่ำนี้
ผูใ้ ชย้ ังต้องพมิ พเ์ องเชน่ เดมิ

20

รูปท่ี 1.9 แสดงตวั อย่างโปรแกรม Coffee Cup HTML Editor

3. กำรพัฒนำเว็บไซตด์ ว้ ยโปรแกรมสร้ำงงำนอัตโนมัติ หรอื HTML Generator
HTML Generator เปน็ โปรแกรมรุน่ ใหม่ทีช่ ว่ ยให้กำรพัฒนำเอกสำรเวบ็ กระทำไดส้ ะดวก
และรวดเร็ว เพรำะ
กำรปอ้ นขอ้ มูลในโปรแกรมเหลำ่ นีจ้ ะกระทำคลำ้ ยกับกำรปอ้ นข้อมูลใน Microsoft Word มีปุม่
คำสั่งชน่ เดียวกัน ตลอดจน
ผูใ้ ช้สำมำรถเหน็ ผลจำกกำรใชค้ ำสัง่ ได้ทันที ซึ่งเรียกว่ำกำรทำงำนแบบ WYSIWYG (What You
See Is What You Get)
หลังจำกนั้นโปรแกรมจะแปลงเอกสำรนั้นเป็นเอกสำร HTML ให้โดยอัตโนมัติ โดยทีผ่ ู้ใช้ไมต่ อ้ ง
ยุ่งยำกกับศกึ ษำชุดคำสัง่
HTML ตลอดจนกำรลงรหัส HTML อย่ำงไรกต็ ำมโปรแกรมกล่มุ นี้กม็ ีจุดดอ้ ยที่ว่ำ ชุดคำสัง่ HTML ใน
โปรแกรมแต่ละ
โปรแกรมจะมีจำกัด และบำงโปรแกรมยังไม่สนับสนนุ กำรทำงำนกับภำษำไทย หรืออำจจะตอ้ ง
ปรับปรุงโปรแกรมก่อนจงึ จะ
ใช้งำนภำษำไทยได้ ซึง่ สรำ้ งควำมยุ่งยำกใหก้ ับผู้ใช้ได้พอสมควร ตัวอย่ำงโปรแกรมในกลุ่มนี้ เช่น
MS-Office FrontPage
, DreamWeaver ,Yahoo SiteBuilder, Namo Webeditor เปน็ ต้น

21

รูปท่ี 1.10 แสดงตวั อย่างโปรแกรม Adobe Dreamweaver

4. กำรพัฒนำเวบ็ ไซต์ด้วยโปรแกรมบริหำร/จัดกำรเครื่องบริกำรเวบ็ และ
เว็บไซต์

ปัจจุบันมีกำรพัฒนำซอตฟแ์ วรท์ ี่ทำหนำ้ ที่ เป็นตัวจัดกำรบริหำรเครื่องบริกำร
เว็บ ทีช่ ่วยใหก้ ำรสรำ้ งเวบ็ ไซต์
กระทำไดง้ ่ำยและสะดวก เพรำะโปรแกรมมีฟังกช์ ันกำรทำงำน กำรจัดกำรสมำชิก
และเอกสำรเวบ็ ที่พรอ้ มสมบูรณ์ แต่
อย่ำงไรก็ตำมผูพ้ ัฒนำจะต้องมีควำมรูใ้ นดำ้ นระบบปฏบิ ัตกิ ำรในระดับทีส่ ูง มำก เชน่
Joomla, Drupal ,Mambo เปน็ ต้น
แต่ไม่วำ่ จะเลือกใชเ้ ครื่องมือใดก็ตำม ควรให้ควำมสำคัญกับกำรพัฒนำทีม่ ีมำตรฐำน
โดยเฉพำะเว็บภำษำไทยที่ควรแสดงผล
ภำษำไทยไดถ้ ูกต้องในทุกเวบ็ เบรำวเ์ ซอร์ และไม่เปน็ ภำระใดตอ่ ผูเ้ รียกดูเวบ็ ในทุกๆ
สถำนที่

22
รูปที่ 1.11 แสดงตวั อยา่ งโปรแกรม Joomla และ Drupal

23

24

HTML หรือ HyperText Markup Language เปน็ ภำษำ script ประเภทหนึ่ง ซ่งึ
ใช้ทำ Web page เป็น
งำนหลัก มีโครงสร้ำงกำรเขียนโดยอำศัยปำ้ ยระบุ (Tag) หรือคำสั่งสำหรับ
ควบคุมกำรแสดงผลขอ้ ควำมรูปภำพ หรอื วัตถุ
อื่น ๆ ผ่ำนโปรแกรมเบรำวเ์ ซอร์ ซ่ึงป้ำยระบุ หรือคำสั่งแตล่ ะคำสั่งนัน้ อำจจะมี
ส่วนขยำยทีใ่ ชส้ ำหรับบอกคุณลักษณะพิเศษ
(Attribute) สำหรับระบุหรอื ควบคุมลักษณะกำรแสดงผลเพม่ิ เติมได้ โดยแต่ละ
คำสั่งจะมีควำมแตกต่ำงกันออกไปในระบบ
World Wide Web ในระยะแรกเริ่มวัตถุประสงค์หลักของภำษำ HTML ถูกเสนอ
โดยนำย ทมิ เบอร์เนอร์ส-ลี (Tim
Berners -Lee) แห่งศูนย์ปฏบิ ัตกิ ำรวิจัยทำงอนุภำคฟิสกิ ส์ของยโุ รป (CERN)
ซึ่งตัง้ อยู่ที่กรุงเจนีวำ ประเทศสวิตเซอรแ์ ลนด์
โดยใช้เครือ่ งคอมพวิ เตอร์ apple ในกำรพัฒนำ

25

รูปที่ 2.1 แสดงนาย ทิม เบอร์เนอร์ส-ลี ผ้พู ฒั นาระบบ World Wide Web

ได้กำหนดไวว้ ำ่
เพื่อสรำ้ งสือ่ ทน่ี กั วิทยำศำสตร์สำมำรถจะเผยแพร่ผลงำน และใชอ้ ้ำงอิง ไดต้ ลอด 24 ช.ม.
เพื่อสรำ้ งภำษำคอมพวิ เตอรท์ ี่รองรับภำษำทอ้ งถนิ่ ที่ไมข่ ้ึนกับระบบของเครือ่ งคอมพิวเตอร์ (Platform)

หรือ
ระบบเครือข่ำยใดๆ

และด้วยวัตถุประสงค์ขำ้ งตน้ ภำษำ HTML จงึ ถูกใชง้ ำนอย่ำงแพร่หลำยในสังคมของนักวทิ ยำศำสตร์ และ
กำหนดให้
เครื่องมือท่ใี ช้เขียน เปน็ โปรแกรม text editor ทั่วๆ ไป
สำหรับภำษำ HTML ในอินเตอร์เน็ต ไดร้ ับกำรพัฒนำอย่ำงตอ่ เนื่อง เพื่อใหค้ นทุกๆ ชำตบิ นโลก สำมำรถเข้ำถึง
เผยแพร่ และอ้ำงอิง วิทยำกำรควำมรู้ได้ ดว้ ยกำรเชื่อมโยงไปมำแบบ hyperlink อำจจะด้วยตัวอักษร และ/หรือ
รูปภำพ
โดยอำจเชือ่ มโยงเฉพำะภำยใน เอกสำรนัน้ หรือเชือ่ มโยงขำ้ มไปยังเอกสำรอืน่ ๆ ได้
ภำษำ HTML มีตน้ แบบมำจำกภำษำ SGML (Standard Generalized Markup Language) ซงึ่ เป็นภำษำ
ที่ใช้ไดเ้ ฉพำะกับประเภท ของคอมพวิ เตอร์ และส่งิ ที่ HTML รับมำจำก SGML คือ กำรประกำศค่ำ และกำรกำหนด
รูปแบบ
เอกสำร (Document Type Definition –DTD) ส่งิ ทีท่ ำให้ ภำษำ HTML ได้รับควำมนยิ มอย่ำงมำก และรวดเร็ว กค็ ือ
HTML รวมถึง โปรโตคอล HTTP (HyperText Transfer Protocol) เปน็ ภำษำทีใ่ ช้สื่อสำรกันไดท้ ั่วโลก โดยที่ตัว
ภำษำและ
โปรโตคอล ไม่ขึน้ กับระบบเครือข่ำย และประเภทของคอมพิวเตอร์ (Platform) ซ่งึ มีควำมหลำกหลำย อัน
เนือ่ งมำจำก
เทคโนโลยีและประเภทกำรใชง้ ำนเป็นผลใหเ้ อกสำรที่เขยี นโดย HTML สำมำรถถ่ำยโอน ได้อยำ่ งกวำ้ งขวำง ทั้ง
ในรูปแบบ
ของตัวอักษร ภำพ และเสียง

26

ลักษณะของภำษำ HTML
องค์ประกอบของภำษำ HTML สำมำรถแบ่งออกได้ 2 สว่ น คือ
1. สว่ นทีเ่ ปน็ ข้อควำมทั่ว ๆ ไป
2. สว่ นทีเ่ ปน็ คำสัง่ ทีใ่ ช้ในกำรกำหนดรปู แบบของข้อควำมที่แสดง ซ่งึ เรำเรยี กคำสัง่
เหล่ำนีว้ ำ่ แท็ก (Tag)
โดยแท็กหรือคำสั่งของภำษำ HTML จะอย่ใู นเครื่องหมำย < > ซึง่ มีหลักในกำรเขียนดังนี้
หลักในกำรเขียนคำสัง่ หรือแท็กในภำษำ HTML
1. รูปแบบแท็กจะแยกออกเป็น 2 สว่ น คือแท็กเร่มิ ต้น เรียกวำ่ "แท็กเปดิ " และสว่ น
จบของแท็ก เรียกวำ่
"แท็กปดิ " แท็กปดิ จะต้องมีเครือ่ งหมำย Slash (/) ดังนี้ <แท็กเปดิ >ข้อควำม......</แท็กปิด>
เชน่ <title>ขอ้ ควำมทีต่ อ้ งกำร
ใหป้ รำกฎในแถบหัวเรือ่ ง </title>
2. บำงแท็กอำจไม่ต้องมีแท็กปิดกส็ ำมำรถใชง้ ำนได้ เช่น คำสั่งขึ้นบรรทัดใหม่ <br>
3. เรำสำมำรถพมิ พต์ ัวอักษรเป็นตัวเลก็ หรือใหญก่ ็ได้ (เวอรช์ ัน่ 4.0 ขน้ึ ไป) เช่น
<HTML>,<Html>,<html>
จะมีควำมหมำยเหมือนกัน แตแ่ นะนำใหใ้ ช้ตัวอักษรตัวเล็กทั้งหมด เพือ่ รองรับกับมำตรฐำน
ของ XHTML ตอ่ ไป
4. บำงแท็กจะมีตัวกำหนดคุณสมบัติ ทีเ่ รียกว่ำ แอตทรบิ ิวท์ (Attribute) และมีคำ่ ท่ี
ถูกกำหนดใหใ้ ช้ในแท็ก
(Value) width กำหนดคุณสมบัตคิ วำมยำวของเส้น แอททริบวิ ต์ size คือกำรกำหนดควำม
หนำของเส้น ค่ำที่กำหนดให้ใช้
600 เป็นคำ่ ควำมยำวของเส้น คำ่ ที่กำหนดให้ใช้ 5 คือเส้นมีควำมหนำ 5 จุด (Pixel)

[1] ที่มำ :
http://www.manager.co.th/Around/ViewNews.aspx?NewsID=9490000151958

28

โครงสรำ้ งหลักของภำษำ HTML จะเรมิ่ ด้วย <html> และจบดว้ ย </html> เสมอ ซึ่ง
ชุดคำสัง่ ที่ใช้จะแยกเปน็
2 ส่วนคือ

1. head คำสั่งทีอ่ ยู่ในสว่ นนีจ้ ะใช้บรรยำยรำยละเอียดเก่ยี วกับ web page ซง่ึ
จะไม่แสดงผลที่ web page
โดยตรง

2. body คำสั่งที่อยู่ในสว่ นนี้จะใช้ในกำรจัดรูปแบบตัวอักษร จัดหนำ้ ใส่รูปภำพ
ซง่ึ ตัวอักษรในส่วนนจี้ ะ
แสดงที่ webbrower โดยตรง

โดยทั้งสองสว่ นจะอย่ภู ำยในป้ำยระบุหรือคำสั่ง <html>......</html> ซึ่งเปน็ สว่ นที่
ใชส้ ำหรับบอกว่ำเอกสำรนี้
เปน็ เอกสำร html

<html>
<head>

คำสั่งในส่วนหัวของเวบ็ เพจ (head section)
</head>
<body>

คำสัง่ ในสว่ นของเนื้อหำของเวบ็ เพจ (Body section)
ในสว่ นนีจ้ ะเปน็ สว่ นที่ใช้แสดงผล
</body>
</html>

29

Head Section เป็นส่วนทใี่ ชอ้ ธบิ ำยเก่ยี วกับขอ้ มูลเฉพำะของหน้ำเวบ็ นนั้ ๆ เช่น ชื่อ
เรื่องของหนำ้ เว็บ (Title),
ชือ่ ผู้จัดทำเวบ็ (Author), คียเ์ วริ ด์ สำหรับกำรคน้ หำ (Keyword) เพื่อใชส้ ำหรับให้
ผูใ้ ช้งำนค้นหำขอ้ มูลเกีย่ วกับเวบ็ เพจที่
สร้ำงขน้ึ บนระบบเครือขำ่ ยอนิ เทอรเ์ นต็ โดยมี Tag สำคัญ คือ
<head>

<title>ขอ้ ควำมอธบิ ำยชือ่ เรื่องของเวบ็ เพจ</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name ="Author" content ="ชื่อผูพ้ ัฒนำเวบ็ ">
<meta name ="KeyWords" content ="ข้อควำม 1, ข้อควำม 2 ">
</head>

30

title
ขอ้ ควำมทีใ่ ช้เป็น title ไมค่ วรพมิ พ์เกิน 64 ตัวอักษร, ไม่ตอ้ งใสล่ ักษณะพเิ ศษ เชน่
ตัวหนำ, เอยี ง หรือสี โดย
ขอ้ ควำมในสว่ นนี้จะแสดงผลใน title bar ของ web browser
meta
Tag meta จะไม่ปรำกฏผลบนเบรำเซอร์ แต่จะเปน็ สว่ นสำคัญ ในกำรจัดอันดับบัญชีเวบ็
สำหรับผู้ใหบ้ รกิ ำร
สืบค้นเว็บ (Search Engine เชน่ google , yahoo) charset=utf-8 ใช้บอกว่ำใชช้ ุดตัวอักษรแบบ
ใดในกำรแสดงผล
ภำษำไทยเรำใช้ charset=TIS-620 หรอื อำจเปน็ charset=windows-874 ตอนนี้แนะนำให้ใชเ้ ปน็
charset=utf-8
keyword ดังภำพด้ำนบนจะเหน็ ว่ำเรำสำมำรถใช่ keywords มำกกว่ำ 1 คำไดโ้ ดยใช้
เครื่องหมำย (,) ในกำรคัน่ ระหว่ำงคำ
กำรพิมพช์ ุดคำสั่ง HTML สำมำรถพมิ พไ์ ดท้ ั้งตัวพิมพเ์ ล็ก ตัวพมิ พใ์ หญ่ หรือผสม กำรยอ่
หน้ำ เว้นบรรทัดหรือ
ชอ่ งว่ำง สำมำรถกระทำไดอ้ สิ ระ โปรแกรมเบรำเซอรจ์ ะไมส่ นใจเกี่ยวกับระยะเว้นบรรทัดหรือ
ยอ่ หน้ำ หรอื ช่องวำ่ งแต่จะ
เปน็ ประโยชนส์ ำหรับกำรอ่ำนคำสัง่ ของผู้สรำ้ งเว็บเพจ และกำรพัฒนำเวบ็ เพจตอ่ ไป

31

Body Section เป็นส่วนเนอื้ หำหลักของหนำ้ เว็บ ซง่ึ กำรแสดงผลจะตอ้ งใช้ Tag
จำนวนมำก ข้ึนอยูก่ ับลักษณะ
ของข้อมูล เช่น ข้อควำม, รูปภำพ, เสียง, วีดโิ อ หรือไฟล์ต่ำงๆ ส่วนเนื้อหำเอกสำรเว็บ เป็น
ส่วนกำรทำงำนหลักของหน้ำเว็บ
ประกอบดว้ ย Tag มำกมำยตำมลักษณะของขอ้ มูลทีต่ อ้ งกำรนำเสนอ กำรป้อนคำสัง่ ในส่วน
นี้ ไม่มีข้อจำกัดสำมำรถปอ้ น
ตดิ กันหรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แตม่ ักจะยดึ รูปแบบที่อ่ำนง่ำย คือ กำรทำย่อหนำ้ ใน
ชุดคำสัง่ ทีเ่ กีย่ วขอ้ งกัน ทัง้ นี้ให้
ป้อนคำสัง่ ทัง้ หมดภำยใต้ Tag <body> </body> และแบง่ กลุม่ คำสัง่ ได้ดังนี้

กลุ่มคำสัง่ เกีย่ วกับกำรจัดรูปแบบเอกสำร
กลุม่ คำสัง่ จัดแต่ง/ควบคุมรูปแบบตัวอักษร
กลุม่ คำสัง่ กำรทำเอกสำรแบบรำยกำร (List)
กลุม่ คำสัง่ เกีย่ วกับกำรทำลิงค์
กลุม่ คำสั่งจัดกำรรูปภำพ
กลุ่มคำสั่งจัดกำรตำรำง (Table)
กลุม่ คำสัง่ ควบคุมเฟรม
กลุม่ คำสัง่ อื่นๆ

32

คำสั่งเรม่ิ ต้นของเอกสำร HTML
<html>..........</html>
คำสัง่ <html> เป็นคำสั่งเริ่มต้นในกำรเขยี นโปรแกรมและคำสั่ง </html>

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

คำสัง่ กำหนดส่วนหัวเรื่องเอกสำรเว็บ (Head Section)
<head>..........</head>
Head Section เป็นสว่ นที่ใชอ้ ธิบำยเกีย่ วกับขอ้ มูลเฉพำะของหนำ้ เว็บนัน้ ๆ เช่น ชื่อเรือ่ งของ

หนำ้ เวบ็ (Title),
ชื่อผู้จัดทำเวบ็ (Author), คีย์เวิร์ดสำหรับกำรคน้ หำ (Keyword) โดยมี Tag สำคัญ คือ คำสัง่ กำหนด
ขอ้ ควำมในส่วนหัว
ของโปรแกรมเว็บเบรำว์เซอร์ <title>..........</title > ขอ้ ควำมทีใ่ ช้เปน็ title ไม่ควรพมิ พเ์ กิน 64
ตัวอักษร, ไมต่ อ้ งใส่
ลักษณะ พิเศษ เชน่ ตัวหนำ เอยี ง หรือสี และควรใช้ภำษำที่มีควำมหมำยครอบคลมุ ถึงเนือ้ หำของ
เว็บเพจนัน้ หรือเปน็
คำสำคัญในกำรค้นหำ (Keyword)

33

คำสั่งกำหนดสว่ นเนือ้ หำของเว็บเพจ
<body>..........</body>
Body Section เปน็ ส่วนเนื้อหำหลักของหนำ้ เว็บ ซ่งึ กำรแสดงผลจะต้องใช้ Tag จำนวน

มำกขนึ้ อย่กู ับลักษณะ
ของข้อมูล เช่น ข้อควำม, รูปภำพ, เสียง, วีดิโอ หรือไฟลต์ ่ำงๆ ส่วนเนือ้ หำเอกสำรเวบ็ เปน็ สว่ น
กำรทำงำนหลักของหนำ้ เว็บ
ประกอบดว้ ย Tag มำกมำยตำมลักษณะของข้อมูล ท่ตี อ้ งกำรนำเสนอ กำรปอ้ นคำสัง่ ในส่วนนี้
ไมม่ ีข้อจำกัดสำมำรถป้อน
ตดิ กัน หรอื 1 บรรทัดต่อ 1 คำสั่งก็ได้ แตส่ ่วนใหญ่จะยดึ รูปแบบทอ่ี ่ำนง่ำย คอื กำรทำย่อหนำ้
ในชุดคำสั่งที่เกีย่ วขอ้ งกัน
ทั้งนีใ้ หป้ ้อนคำสั่งทัง้ หมดภำยใต้ Tag <body>..........</body>

คำสั่งกำหนดสพี ืน้ หลังเว็บเพจ
กำรกำหนดสีพืน้ หลังของเอกสำรเว็บเพจ นัน้ สำมำรถทำไดโ้ ดย ใช้กำรอธิบำย

ลักษณะพเิ ศษ (Attibute) คือ
bgcolor ภำยใต้คำสัง่ เปิดของคำสั่ง <body> โดยมีรปู แบบดังนี้

body bgcolor = สีที่ต้องกำร> โดย สีทีต่ อ้ งกำรนัน้ จะมีหรอื ไม่มี
เครือ่ งหมำย " " กไ็ ด้

......................
</body>

34

โดยสีท่ตี อ้ งกำรกำหนดนัน้ สำมำรถกำหนดได้ 2 วิธี คือ
1. ระบุชือ่ ของสีท่ตี ้องกำร เช่น Blue , Green , Red , Yellow เป็นตน้
ดังตัวอย่ำงท่ี 2.1 กำรกำหนดพื้นหลังโดยกำรระบุชือ่ สี

<html>
<head>

<title> กำรกำหนดพืน้ หลังโดยกำรระบุชื่อสี </title>
</head>
<body bgcolor=yellow>
กำรกำหนดพื้นหลังโดยกำรระบุชื่อสี เปน็ สีเหลอื ง
</body>
</html>

จำกนัน้ บันทกึ ไฟลไ์ ปเกบ็ ไวใ้ นโฟลเดอร์ที่สร้ำงขน้ึ แล้วเปิดเอกสำรเวบ็ เพจจะได้ดังรูป

35

รูปที่ 2.2 แสดงผลลพั ธ์จากตวั อยา่ งท่ี 2.1

2. ระบุตัวเลข โดยใชก้ ำรกำหนดค่ำสีในระบบเลขฐำน 16 จำนวน 6 หลัก
สำหรับกำรผสมสี (RGB) โดยค่ำตัวเลข
2 หลักแรก หมำยถงึ ระดับของค่ำสีแดง (#ff0000) ตัวเลข 2 ต่อมำคู่
กลำง หมำยถงึ ระดับของค่ำสีเขียว (#00ff00)
และตัวเลข 2 หลักสุดทำ้ ย หมำยถงึ ระดับของคำ่ สีน้ำเงิน (#0000ff)

36

รูปที่ 2.3 แสดงคา่ สีในระบบเลขฐาน 16

หรือลองคลิกตัวอย่ำงรหัสสีทีเ่ ว็บไซต์ https://www.goosiam.com/The-free/color-
password.htm
ตัวอย่ำงที่ 2.2 กำรกำหนดพืน้ หลังโดยกำรระบุตัวเลขฐำน 16

<html>
<head>

<title> กำรกำหนดพื้นหลังโดยกำรระบุเลขฐำน 16</title>
</head>
<body bgcolor=#00ffff>

กำรกำหนดพื้นหลังโดยกำรระบุเลขฐำน 16 เปน็ สีฟ้ำ
</body>
</html>

37
รูปที่ 2.4 แสดงผลลพั ธ์จากตวั อย่างท่ี 2.2

38

2.4 การใช้โปรแกรม notepad

ในกำรสรำ้ งเอกสำร html ดว้ ยโปรแกรม Text Editor ในที่น้ใี ช้
โปรแกรม NotePad ซ่งึ มีมำพรอ้ มกับระบบ
ปฏบิ ัตกิ ำร Windows แลว้ สำมำรถทำได้งำ่ ยและสะดวก ที่สำคัญเป็น
โปรแกรมที่บังคับใช้ในกำรแข่งขันกำรเขียน
เว็บไซต์ดว้ ย โปรแกรม Text Editor ในงำนศิลปหัตถกรรมนักเรียนในแต่
ละปดี ้วย โดยเปดิ โปรแกรม NotePad แล้วพมิ พ์
คำสัง่ html ลงไป จำกนัน้ บันทกึ ไฟลโ์ ดยตัง้ ชื่อเปน็ ภำษำอังกฤษตัวพิมพ์
เลก็ และกำหนดนำมสกุลเปน็ .html เกบ็ ไว้ใน
โฟลเดอร์ที่สร้ำงขนึ้ ก่อนหน้ำนี้ จำกนัน้ เปดิ โปรแกรมเวบ็ เบรำวเ์ ซอร์ เช่น
IE , Firefox หรือChrome แล้วเปิดไฟล์เอกสำร
เว็บเพจที่สรำ้ งเพื่อดูผลลัพธ์

39

ขัน้ ตอนกำรเขำ้ สูโ่ ปรแกรม NotePad
1. คลิกปมุ่ start > All Program > Accessories > Notepad ดังรูป

รูปที่ 2.5 แสดงขัน้ ตอนกำรเขำ้ สโู่ ปรแกรม NotePad

40

2. จะไดห้ นำ้ ตำ่ งโปรแกรม NotePad ดังรูป

รูปท่ี 2.6 แสดงตวั อย่างโปรแกรม NotePad

41

หลังจำกทดลองใชค้ ำสัง่ เบือ้ งตน้ สรำ้ งเวบ็ เพจด้วยภำษำ html ต่อไปจะเป็นกำรบันทกึ และ
ดูผลลัพธ์ ซง่ึ มีขัน้ ตอนดังนี้
ขั้นตอนกำรบันทึกเอกสำร html

1. เมือ่ พมิ พโ์ ปรแกรมเสร็จ และตรวจควำมเรียบรอ้ ยแล้ว เลือก เมนู File > save
ดังรูป

รูปที่ 2.7 แสดงขนั้ ตอนการบนั ทกึ เอกสารเวบ็ เพจ

42

2. เลือกตำแหน่งทีอ่ ยูท่ ี่ตอ้ งกำรบันทกึ ในทีน่ ี้เลือก Desktop แลว้ เลือก
โฟลเดอร์ที่สร้ำงไวใ้ นครั้งแรก ดังรูป

43

จำกนัน้ Encoding แบบ UTF-8 ซึง่ รองรับหลำยภำษำในเวบ็ เพจเดียวกัน ตัง้ ชือ่ ไฟล์ ท่นี ำมสกุล
ลงท้ำยด้วย .html
แล้วกดปุม่ Save เพื่อบันทึก ดังรูป

รูปท่ี 2.8 ขนั้ ตอนการบนั ทกึ เอกสารเวบ็ เพจ (ตอ่ )

44

ขัน้ ตอนกำรดูผลลัพธ์ เอกสำร html
หลังจำกทเ่ี รำบันทกึ เอกสำรเรยี บร้อยแลว้ ใหเ้ รำดับเบิ้ลคลิกที่ไฟลเ์ วบ็ เพจทีเ่ รำสรำ้ ง

ในโฟลเดอรท์ ี่เรำ
กำหนดไว้ เพือ่ ดูผลลัพธ์ ดังรูป

รูปที่ 2.9 ขนั้ ตอนการดผู ลลพั ธ์เอกสารเวบ็ เพจ

45

รูปท่ี 210 แสดงผลลพั ธ์เอกสารเวบ็ เพจ
ขั้นตอนกำรเปดิ เอกสำร html เพื่อแก้ไข

ในกรณีที่ตอ้ งกำรแก้ไขไฟล์เวบ็ เพจที่เคยสรำ้ งไวแ้ ล้ว ให้เปดิ ไฟล์ Notepad ขึ้นมำใหม่
แลว้ ไปท่เี มนุ
File > Open แลว้ เลือกตำแหนง่ ไฟลเ์ วบ็ เพจทีเ่ รำบันทกึ ไว้ในคอมพิวเตอร์ แล้วทำกำรแก้ไข
และบันทกึ ซ่งึ กำร
บันทกึ มีสองแบบ กรณที ีเ่ รำไม่ต้องกำรเปลย่ี นชือ่ ไฟล์ใหม่ เลอื ก Save และในกรณีทีเ่ รำ
ต้องกำรเปลี่ยนชือ่ ไฟล์ใหม่
ใหเ้ ลอื ก Save As แลว้ ตัง้ ชือ่ ไฟลใ์ หม่ และบันทกึ ดังรูป

46
รูปท่ี 2.11 แสดงขนั้ ตอนเปิดเอกสารเว็บเพจ