หน่วยที่ 1 หลักการสร้างเว็บเพจด้วยภาษา HTML

หน่วยการเรียนรู้ที่ 1 Hyper Text Markup Language หลกั การสรา้ งเว็บเพจด้วยภาษา HTML 3 ชั่วโมง

หลักการสร้างเว็บเพจดว้ ยภาษา HTML หนว่ ยการ เรยี นรูท้ ี่ 1 หลักการสร้าง เวบ็ เพจดว้ ย ภาษา HTML 1. การสร้างเวบ็ เพจ 2. ระบบอนิ เทอรเ์ นต็ 3. ภาษา HTML 1.1 ความหมายของ 2.1 ความหมายของ 3.1 ความหมายของ เว็บเพจ อินเทอร์เน็ต ภาษา HTML 1.2 ประโยชนข์ อง 2.2 ทีม่ าของระบบ 3.2 ความเปน็ มาของ เว็บเพจ อินเทอรเ์ น็ต ภาษา HTML 1.3 ข้ันตอนการทางาน 2.3 ความสาคัญของ 3.3 ประโยชน์ของ ของเว็บเพจ อินเทอรเ์ นต็ ภาษา HTML 1.4 หลกั การสรา้ ง 2.4 หลกั การทางาน เวบ็ เพจ ของอนิ เทอรเ์ น็ต 1.5 คาศพั ท์เกยี่ วกับ 2.5 การสืบค้นขอ้ มูล เวบ็ บนอินเทอรเ์ น็ต 1.6 การออกแบบหน้า เว็บเพจ 2901-2006 การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 17

หลกั การสร้างเว็บเพจด้วยภาษา HTML หนว่ ยการ เรยี นรทู้ ี่ 1 1. การสร้างเวบ็ เพจ 2. ระบบอนิ เทอรเ์ นต็ 3. ภาษา HTML ปัจจบุ นั น้เี ปน็ ยุคของการบรโิ ภคข้อมูลขา่ วสาร ผา่ นเทคโนโลยีอินเทอร์เน็ต กิจกรรม ความบันเทงิ และการทาธรุ กรรมต่าง ๆ โดยใช้กระบวนการทางคอมพิวเตอร์ โทรศัพท์มือถือ ร่วมกับ ระบบเครือข่ายท้ังแบบใช้สาย และไร้สาย การบริโภคข้อมูลมีหลากหลายรูปแบบ ท้ังกระบวน เครือข่ายสังคม Social Network อาทิ Facebook, Line การแสดงข้อมูลผ่านกระบวนการของเว็บ ซ่ึงแสดงได้หลากหลายรูปแบบ ทั้งภาพ เสียง ภาพเคล่ือนไหว เว็บเพจจึงเป็นพ้ืนฐานในการสร้าง เว็บไซต์ หลักการสรา้ งเวบ็ เพจจงึ มีความจาเป็นสาหรับผู้ท่ีต้องการสร้างเว็บไซต์เป็นของตนเองเพ่ือให้ ไดเ้ ว็บทม่ี ีมาตรฐานและเป็นทส่ี นใจของผู้เข้าชมหน้าเว็บ ภาษา HTML (HYPER TEXT MARKUP LANGUAGE) เป็นภาษาหนึ่งท่ีใช้ในการ สร้างเว็บเพจ โดยเป็นภาษาเชิงโครงสร้าง มีรูปแบบท่ีชัดเจน มีกระบวนการทางานท่ีเป็นข้ันตอน เข้าใจง่าย จึงเหมาะท่ีจะเป็นภาษาพื้นฐานในการสร้างเว็บเพจ โดยผู้เรียนควรรู้จักกับคาศัพท์ที่ เกีย่ วกบั เวบ็ เพจ หลักการสร้างเว็บเพจ และวิธีการทางานต่าง ๆ ที่เก่ียวกับกระบวนการของเว็บเพื่อ ใชใ้ นการพัฒนาเว็บไซต์ของตนเองให้มีความน่าสนใจ เพือ่ ให้มีความรู้ ความเขา้ ใจ มีทักษะ และความกระตือรือร้นในการแสวงหาความรู้เก่ียวกับการสร้าง เวบ็ เพจดว้ ยภาษา HTML และสามารถนาไปใชป้ ระโยชนใ์ นการพฒั นาชน้ิ งานได้ 1. บอกความหมายของเว็บเพจได้ 2. บอกประโยชนข์ องเว็บเพจได้ 3. อธิบายขน้ั ตอนการทางานของเว็บเพจได้ 4. อธิบายหลักการสร้างเวบ็ เพจได้ 2901-2006 การพัฒนาเว็บดว้ ยภาษาเอชทีเอม็ แอล 18

หลักการสรา้ งเว็บเพจดว้ ยภาษา HTML 5. บอกความหมายของคาศพั ท์ต่าง ๆ ท่ีเกี่ยวขอ้ งกับเว็บเพจได้ 6. ออกแบบหน้าเว็บเพจได้ 7. บอกความหมายของอินเทอร์เนต็ ได้ 8. บอกทมี่ าของระบบอนิ เทอร์เน็ตได้ 9. บอกความสาคญั ของระบบอนิ เทอรเ์ นต็ ได้ 10. อธบิ ายกระบวนการทางานของระบบอนิ เทอร์เน็ตได้ 11. สืบคน้ ขอ้ มูลบนระบบอนิ เทอรเ์ น็ตได้ 12. บอกความหมายของ HTML ได้ 13. บอกความเป็นมาของภาษา HTML ได้ 14. บอกประโยชนข์ องภาษา HTML ได้ 15. มีความกระตือรือรน้ ในการแสวงหาความรู้เก่ยี วกับการสรา้ งเวบ็ เพจด้วยภาษา HTML 1. การสร้างเวบ็ เพจ 1.1 ความหมายของเวบ็ เพจ 1.2 ประโยชนข์ องเว็บเพจ 1.3 ขน้ั ตอนการทางานของเว็บเพจ 1.4 หลกั การสร้างเว็บเพจ 1.5 คาศพั ทเ์ กย่ี วกบั เวบ็ 1.6 การออกแบบหน้าเว็บเพจ 2. ระบบอนิ เทอรเ์ นต็ 2.1 ความหมายของอินเทอรเ์ น็ต 2.2 ทีม่ าของระบบอินเทอรเ์ นต็ 2.3 ความสาคญั ของอินเทอร์เน็ต 2.4 หลกั การทางานของอนิ เทอรเ์ น็ต 2.5 การสืบคน้ ข้อมลู บนอินเทอร์เน็ต 3. ภาษา HTML 3.1 ความหมายของภาษา HTML 3.2 ความเป็นมาของภาษา HTML 3.3 ประโยชน์ของภาษา HTML 2901-2006 การพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล 19

หลักการสรา้ งเว็บเพจด้วยภาษา HTML หนว่ ยการ เรยี นรู้ท่ี 1 1. การสรา้ งเวบ็ เพจ เว็บเพจ (Web Page) หมายถึง หน้าเอกสารท่ีแสดงผ่านโปรแกรมเว็บเบราว์เซอร์ (Web Browser) โดยใช้บรกิ ารของระบบเครือข่ายอินเทอร์เน็ตในการเช่ือมโยงคอมพิวเตอร์หลาย ๆ เคร่ืองเข้าด้วยกัน หรือที่เรียกว่าบริการ WWW (World Wide Web) ซึ่งจะไปเรียกใช้ไฟล์เว็บเพจที่ ถูกเกบ็ ไวใ้ นเวบ็ เซิรฟ์ เวอร์ (Web Sever) ตามปกติเว็บเพจจะถูกเก็บอยู่ในรูปแบบไฟล์เอชทีเอ็มแอล (HTML) โดยหนงึ่ ไฟล์ของเอชทเี อ็มแอลก็คอื เวบ็ เพจ 1 หนา้ ภายในหน้าเว็บเพจจะประกอบด้วยข้อความ ภาพ เสียง วิดีโอ และภาพเคลื่อนไหว เป็นการแสดงผลแบบมัลติมีเดีย รวมถึงมีการเช่ือมโยงเว็บเพจท่ีเรียกว่า ลิงก์ (Link) เพื่อใช้ในการ เรยี กดเู อกสารเว็บเพจหน้าอ่ืน ๆ ท่ีเก่ียวข้องได้สะดวก เว็บเพจจะถูกนามาใช้ประโยชน์ในหลายด้าน เช่น การประชาสัมพันธ์ การซื้อขายสินค้าและบริการ ความบันเทิง การนาเสนอข้อมูลความรู้ สารสนเทศด้านต่าง ๆ จึงทาให้แต่ละเว็บเพจมีความแตกต่างกันไป ตามวัตถุประสงค์ของการใช้งาน เว็บเพจนั้น ๆ ภาพท่ี 1.1 แสดงหนา้ เว็บเพจกูเกลิ ประเทศไทย ท่มี า : Google.com. หน้าโฮมเพจ. [ออนไลน]์ . [15 สงิ หาคม 2559]. เข้าถงึ ไดจ้ าก : http://www.google.com. 2901-2006 การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 20

หลกั การสร้างเว็บเพจด้วยภาษา HTML 1.2.1 นาเสนอข่าวสาร และสถานการณ์ในปจั จุบัน ด้วยความรวดเร็ว ทันเหตุการณ์ โดยข้อมูลท่ีนาเสนอประกอบด้วยข้อความ ภาพ เสียง และภาพเคล่ือนไหว ทาให้ผู้ใช้เว็บเพจรับรู้ เรื่องราวทเี่ กิดขึ้นจากทตี่ ่าง ๆ ทว่ั โลกในเวลาเดียวกนั หรอื ใกล้เคียงเวลาท่ีเกิดข้ึนจรงิ ภาพที่ 1.2 แสดงหน้าเวบ็ เพจในการนาเสนอข่าว ทมี่ า : news.sanook.com. เวบ็ ไซตข์ า่ ว. [ออนไลน์]. [30 สงิ หาคม 2559]. เขา้ ถึงไดจ้ าก : http://www.http://news.sanook.com/region/. 1.2.2 เป็นแหล่งข้อมูลความรู้ สารสนเทศ และห้องสมุดขนาดใหญ่ เว็บเพจเป็น เอกสารทเ่ี ช่อื มโยงขอ้ มูลถงึ กนั ได้ มกี ารเกบ็ รวบรวมความรู้ สารสนเทศจากผู้รู้ ผู้เชี่ยวชาญ ไว้เป็นคลัง ความรู้ขนาดใหญ่ในเว็บเซิร์ฟเวอร์ ผู้ใช้เว็บสามารถเข้าถึงข้อมูลได้ง่าย รวดเร็ว การค้นหาไม่ลาบาก ลดความยุ่งยากในการดูแลรักษาข้อมูล ภาพที่ 1.3 แสดงหนา้ เวบ็ เพจของหอ้ งสมดุ ทมี่ า : hongsamut.com. เวบ็ ไซตห์ อ้ งสมดุ . [ออนไลน]์ . [30 สิงหาคม 2559]. เขา้ ถงึ ไดจ้ าก : https://www.hongsamut.com/. 2901-2006 การพฒั นาเว็บดว้ ยภาษาเอชทีเอ็มแอล 21

หลักการสรา้ งเว็บเพจดว้ ยภาษา HTML 1.2.3 เป็นการประชาสัมพันธ์หน่วยงาน องค์การ หรือบริษัท เว็บเพจทาให้การ แนะนาองค์กรเป็นไปได้ง่าย สะดวก รวดเร็ว และกว้างขวาง โดยสามารถประชาสัมพันธ์ส่วนต่าง ๆ ขององค์กร เช่น ความเป็นมา สินค้าและบริการ ที่อยู่ที่สามารถติดต่อได้ รวมถึงข่าวประชาสัมพันธ์ อ่นื ๆ ขององค์กร ภาพท่ี 1.4 แสดงเว็บเพจการประชาสมั พันธ์ ที่มา : กระทรวงศกึ ษาธิการ. เว็บไซตป์ ระชาสัมพนั ธ์. [ออนไลน]์ . [30 สงิ หาคม 2559]. เขา้ ถึงได้จาก : http://www.moe.go.th/moe/th/home/. 1.2.4 นาเสนอความบนั เทงิ ได้หลากหลายรปู แบบ เนื่องจากเว็บเพจมีการนาเสนอท้ัง ภาพ เสียง และวิดีโอ จึงทาให้การนาเสนอความบันเทิงเป็นเร่ืองที่ง่ายและสะดวกในการเข้าถึง เช่น การฟงั วทิ ยุ ฟงั เพลง และดูภาพยนตร์ออนไลน์ เกม และเว็บเพจทีร่ วมเรื่องตลกขาขันต่าง ๆ ภาพที่ 1.5 แสดงเว็บเพจท่นี าเสนอความบนั เทิงรปู แบบไฟลว์ ดิ ีโอ ที่มา : youtube.com. เว็บไซตบ์ นั เทงิ . [ออนไลน์]. [30 สิงหาคม 2559]. เข้าถงึ ได้จาก : https://www.youtube.com/watch?v=W07-oPGW2V8. 2901-2006 การพัฒนาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 22

หลกั การสร้างเวบ็ เพจดว้ ยภาษา HTML 1.2.5 ดา้ นการเงิน การลงทนุ ปัจจุบันธนาคาร องค์กร หรอื หนว่ ยงานท่ีเกี่ยวข้องกับ สถาบันการเงิน การลงทุน มีการพัฒนาเว็บไซต์ของตนเอง เพื่ออานวยความสะดวก และเข้าถึง ผู้บริโภคได้อย่างรวดเร็ว ทั่วถึง โดยมีการนาเสนอข้อมูลทางการเงินและการลงทุน รวมไปถึงบริการ สาหรับทาธรุ กรรมการเงนิ ออนไลนผ์ ่านเครือขา่ ยอินเทอรเ์ นต็ ภาพที่ 1.6 แสดงหนา้ เวบ็ เพจของธนาคารกรงุ ไทย ท่มี า : ธนาคารกรุงไทย. เว็บไซต์ธนาคาร. [ออนไลน์]. [30 สิงหาคม 2559]. เขา้ ถงึ ไดจ้ าก : http://www.ktb.co.th/. 1.2.6 การซ้ือ ขาย สินค้าและบริการผ่านเว็บ เว็บทาหน้าท่ีเหมือนร้านค้าสาหรับ ขายสนิ คา้ และบริการต่าง ๆ เปน็ การลดต้นทุนในการจัดต้ังร้านค้าท่ีต้องมีหน้าร้านจริงซึ่งมีค่าใช้จ่าย อ่ืน ๆ ในการดาเนินการ รวมทง้ั ลดตน้ ทุนในการเกบ็ สนิ คา้ ในคลงั สินค้า ภาพที่ 1.7 แสดงหน้าเวบ็ เพจการซ้ือขายสินคา้ และบริการผา่ นเว็บ ท่ีมา : LAZADA. เวบ็ ไชต์ขายสินค้า. [ออนไลน]์ . [30 สงิ หาคม 2559]. เขา้ ถึงได้จาก : http://www.lazada.co.th/. 2901-2006 การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 23

หลักการสร้างเว็บเพจด้วยภาษา HTML 1.2.7 เป็นแหล่งในการดาวน์โหลดข้อมูลต่าง ๆ เช่น เนื้อหาความรู้ สารสนเทศ เกี่ยวกับการเรยี นการสอน ไฟลโ์ ปรแกรม ไฟล์ภาพ เสียงเพลง และอ่ืน ๆ ที่เว็บเพจนั้นให้บริการผ่าน เว็บเพจ หรอื เว็บไซต์ ภาพท่ี 1.8 แสดงหน้าเวบ็ เพจที่เป็นแหลง่ ในการดาวนโ์ หลดฟรีโปรแกรม ทม่ี า : THAIWARE. เวบ็ ไซต์ดาวน์โหลด. [ออนไลน์]. [30 สิงหาคม 2559]. เขา้ ถงึ ได้จาก : https://www.thaiware.com/. 1.2.8 บริการในการติดต่อสื่อสาร เช่น การรับส่งจดหมายอิเล็กทรอนิกส์ (e-mail) ซงึ่ มีความรวดเร็ว และสามารถแนบไฟล์เอกสารได้หลากหลายรูปแบบ นอกจากนี้ยังมีเว็บบอร์ด และ สื่อสงั คมออนไลน์ (Social Network) ทม่ี กี ารใหบ้ ริการผ่านทางเวบ็ ไซต์ ภาพที่ 1.9 แสดงหนา้ เว็บเพจท่ีใหบ้ ริการจดหมายอิเลก็ ทรอนิกส์ (e-mail) ทม่ี า : gmail.com. เวบ็ ไซต์สง่ อเี มล. [ออนไลน]์ . [30 สิงหาคม 2559]. เขา้ ถึงได้จาก : http://www.gmail.com. 2901-2006 การพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล 24

หลักการสร้างเว็บเพจด้วยภาษา HTML เว็บเพจที่ผู้ใช้งานเรียกใช้ที่หน้าจอคอมพิวเตอร์ของตนเองนั้น มีลาดับขั้นตอนการ ทางานของเว็บเพจดังตอ่ ไปนี้ 1.3.1 ผู้ใชพ้ ิมพ์ชื่อเว็บเพจในช่อง Address ของโปรแกรมเว็บเบราว์เซอร์ จะมีการ ร้องขอขอ้ มลู ไฟล์เวบ็ เพจหนา้ น้ันไปยังเคร่อื งเซิรฟ์ เวอร์ (Server) คอื เคร่อื งทเ่ี ก็บและเผยแพรเ่ วบ็ เพจ 1.3.2 ฝัง่ เซิร์ฟเวอร์จะทาการค้นหาไฟล์เวบ็ เพจตัวที่ถูกรอ้ งขอ 1.3.3 เวบ็ เซิรฟ์ เวอรส์ ง่ ขอ้ มูลไปยังเครือ่ งผ้ใู ช้และแสดงผลบนเบราว์เซอร์ 1. พมิ พ์ชอื่ Web Page ในช่อง Address ของ Web Browser Web Server 3. Web Server ส่งข้อมูลไปยังเครอื่ ง ผู้ใช้และแสดงผลบน Web Browser 2. Server จะทาการค้นหาไฟล์ Web Page ที่ถกู รอ้ งขอ ภาพที่ 1.10 แสดงขน้ั ตอนการทางานของเวบ็ เพจ หลักการสร้างและออกแบบเว็บ เป็นส่ิงสาคัญในการสร้างเว็บเบื้องต้น เพื่อให้เว็บ เพจมีความน่าสนใจ และใช้งานไดง้ า่ ย เว็บเพจควรประกอบด้วย 6 สว่ นหลัก ๆ ดว้ ยกันคือ 1.4.1 การเขียนข้อมูลในบล็อก (Containing block) โดยจะเขียนข้อมูลท่ีต้องการ แสดงในหน้าเว็บเพจลง Tag <div> หรือ <table> ภายใต้ Tag <body> ข้อดีของการทางานแบบ Containing block คือสะดวกในการปรับเปลี่ยนขนาดของตัวอักษร การจัดตาแหน่งการแสดงผลใน หนา้ เวบ็ เชน่ จัดข้อมูลชิดซา้ ย ชิดขวา หรอื จัดก่ึงกลางหนา้ เว็บเพจ 1.4.2 โลโก้ (Logo) เป็นสัญลักษณ์ที่แสดงตัวตนของเว็บ หรือภาพสัญลักษณ์ของ หนว่ ยงาน ทาให้ผูใ้ ชง้ านหรือ ผเู้ ขา้ ชมเวบ็ จดจาตวั ตนของเวบ็ ไซตไ์ ด้ง่าย ดังน้ันการออกแบบโลโก้จึงมี ความสาคญั เปน็ อยา่ งมาก ตาแหน่งที่ควรจะวางโลโก้ คือตาแหน่งด้านบนของหน้าเว็บเพจ และโลโก้ ควรมีการเชื่อมโยง (Link) ไปที่หน้าหลัก (Homepage) ของเวบ็ ไซต์เสมอ 2901-2006 การพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 25

หลกั การสร้างเว็บเพจด้วยภาษา HTML 1.4.3 ตาแหนง่ นา (Navigation) เปน็ สว่ นทนี่ าผู้เข้าชมเว็บไซต์ไปยังส่วนต่าง ๆ ของ เวบ็ โดยตาแหนง่ ท่คี วรจะวาง Navigation คือ ส่วนด้านบนของหน้าเว็บ หรือส่วนที่ผู้เข้าชมสามารถ มองเห็นได้ทันที โดยไมจ่ าเปน็ ต้องเลือ่ นหนา้ จอของเว็บ ขึ้นลง หรอื เล่ือนหน้าจอไปซ้ายขวา 1.4.4 เนื้อหา (Content) เป็นส่วนที่มีความสาคัญมากท่ีสุด เพราะเป็นหัวใจหลักที่ ผ้ใู ช้งาน หรอื ผู้เข้าชมเว็บไซตต์ อ้ งการขอ้ มลู สารสนเทศ ท่ีถูกต้อง กะทดั รัด ชดั เจน ดังน้ันในการสร้าง สว่ นของเน้ือหาควรเน้นรูปแบบท่ีง่ายต่อการอ่าน การแสดงข้อมูลที่กระชับ จัดรูปแบบที่สวยงาม ใช้ ตัวอกั ษร และสตี ัวอกั ษรทีส่ บายตา จัดภาพประกอบท่ตี รงกับเน้อื หาเทา่ นนั้ 1.4.5 ส่วนลา่ งสดุ (Footer) ส่วนใหญ่จะเป็นลิงก์ต่าง ๆ หรือเป็นเน้ือหาท่ีเก่ียวข้อง กับเวบ็ ไซต์ เชน่ ท่ีอยู่ ลขิ สทิ ธ์ิ นอกจากนี้ Footer ยงั เปน็ ตัวระบุตาแหน่งสุดท้ายของหน้าเว็บซ่ึงใช้ใน การบอกให้ผู้ใชง้ านเว็บ หรอื ผเู้ ขา้ ชมเว็บทราบว่าจะไมม่ เี นอ้ื หาอืน่ ๆ ต่อจากตาแหนง่ นี้ 1.4.6 พื้นที่ว่างในหน้าเว็บ (Whitespace) การเว้นช่องว่างต่าง ๆ เอาไว้ ไม่ว่าจะ เป็นระยะห่างระหว่างตัวอักษร เนื้อหาต่าง ๆ ในหน้าเว็บ หรือช่องว่างระหว่างภาพ จะทาให้การ แสดงผลของเว็บเพจดูสบายตา สวยงาม เป็นระเบียบมากข้ึนกว่าการท่ีจะใส่ทุกอย่างในหน้าเว็บจน เต็มหน้าจอ เพราะทาให้ดูอึดอดั และขาดความสวยงาม ในการใช้งานคอมพิวเตอร์และการเรียกใช้เว็บเพจ ผู้ใช้จะเจอกับคาศัพท์ในการ เรียกชือ่ อุปกรณ์ โปรแกรม หรอื ระบบตา่ ง ๆ ยกตัวอย่างคาศัพท์ที่เกยี่ วข้องกบั เวบ็ เพจดงั ต่อไปน้ี 1.5.1 โฮมเพจ (Home Page) คือเว็บเพจหน้าแรกซ่ึงเป็นทางเข้าหลักของ เว็บไซต์ เวบ็ เพจทุก ๆ หน้าในเวบ็ ไซต์จะถกู เช่ือมโยงจากหน้าโฮมเพจ ถ้าเปรียบกับร้านค้า โฮมเพจ ก็เป็นเสมอื นหน้าร้าน ถ้าเปรียบกับหนังสือหนึ่งเล่ม โฮมเพจ เปรียบเป็นหน้าสารบัญท่ีบอกตาแหน่ง ของหน้าเอกสารท่ีเราต้องการค้นหา และกาหนดตาแหน่งการเช่ือมโยงไปยังหน้าเพจน้ัน ดังนั้น โฮมเพจจงึ มักถูกออกแบบให้สวยงาม โดดเดน่ และน่าสนใจมากทสี่ ุด ภาพท่ี 1.11 แสดงหนา้ จอโฮมเพจของดไี ซน์นิว ทม่ี า : designil.com. การออกแบบหนา้ โฮมเพจ. [ออนไลน์]. [30 สิงหาคม 2559]. เขา้ ถึงได้จาก : https://www.designil.com/thai-best-webdesign-gallery.html. 2901-2006 การพฒั นาเว็บดว้ ยภาษาเอชทีเอม็ แอล 26

หลักการสร้างเว็บเพจด้วยภาษา HTML 1.5.2 WWW (World Wide Web) หรือเรียกโดยย่อว่า เว็บ (Web) คือ การ นาเสนอข้อมูลไฟล์เอชทีเอ็มแอล จากโปรแกรมแสดงเว็บ (Web Browser) เช่น Internet Explorer โดยการเชื่อมต่อคอมพิวเตอร์ท่ัวโลกเข้าด้วยกัน ผ่านเครือข่ายอินเทอร์เน็ต (Internet) จาก แหลง่ ข้อมลู หนึง่ ไปยังแหล่งขอ้ มูลทอ่ี ยู่ห่างไกล ด้วยความรวดเร็ว และง่ายตอ่ การใช้งานมากที่สดุ ภาพท่ี 1.12 แสดงการเข้าถงึ ข้อมูลแบบ www ทีม่ า : ภาพแสดงข้อมลู แบบ www. [ออนไลน]์ . [30 สิงหาคม 2559]. เข้าถึงได้จาก : http://chutimunjojo.blogspot.com/2015/06/2-w.html., https://www.evo- colo.com/. 1.5.3 เว็บเบราว์เซอร์ (Web Browser) คือ โปรแกรมคอมพิวเตอร์ ท่ีผู้ใช้สามารถดู ข้อมูล โต้ตอบข้อมูล ข่าวสาร สารสนเทศท่ีจัดเก็บไว้ในหน้าเว็บที่สร้างด้วยภาษาเอชทีเอ็มแอล โดย จัดเก็บไว้ในเว็บเซอร์วิซ หรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บ เปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ท่ีเรียกว่าเวิลด์ไวด์เว็บ (WWW) ผา่ นระบบอนิ เทอรเ์ นต็ ภาพที่ 1.13 แสดงโลโก้ของโปรแกรม Web Browser ตา่ ง ๆ ที่มา : ภาพโลโก้เว็บเบราวเ์ ซอร์. [ออนไลน]์ . [30 สงิ หาคม 2559]. เขา้ ถงึ ได้จาก : https://pixabay.com/en/photos/web%20browser/. 1.5.4 เวบ็ ไซต์ (Web Site) หมายถงึ เวบ็ เพจหลาย ๆ หน้า ซ่ึงเชื่อมโยงกันผ่านทาง ไฮเปอร์ลงิ ก์ ส่วนใหญ่จัดทาข้ึนเพื่อนาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ 2901-2006 การพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล 27

หลกั การสรา้ งเวบ็ เพจดว้ ยภาษา HTML หน้าแรกของเว็บไซต์ หรือโฮมเพจ โดยท่ัวไปเว็บไซต์จะให้บริการแก่ผู้ใช้แบบไม่มีค่าใช้จ่าย แต่บาง เวบ็ ไซต์จาเป็นตอ้ งมกี ารสมคั รสมาชิก และเสยี คา่ บริการในการดูข้อมูลภายในเว็บไซต์น้ัน เช่น ข้อมูล ทางวชิ าการ ข้อมูลตลาดหลักทรัพย์ เปน็ ต้น ผู้จัดทาเว็บไซต์มีหลายระดับ ต้งั แต่เว็บไซต์ส่วนตัว จนถึง ระดับเว็บไซต์สาหรบั ธรุ กิจ หรือองคก์ รต่าง ๆ การเรียกดูเว็บไซต์โดยท่ัวไปนิยมเรียกดูผ่านซอฟต์แวร์ ในลกั ษณะของเว็บเบราว์เซอร์ ภาพท่ี 1.14 แสดงแผนผงั เวบ็ ไซต์ ทม่ี า : ภาพแผนผังเว็บไซต์. [ออนไลน]์ . [30 สิงหาคม 2559]. เข้าถึงได้จาก : https://sorawit220.wordpress.com/assignment/assignment-3/ search-engine/. ภาพที่ 1.15 แสดงหนา้ เว็บไซต์บนอปุ กรณ์เทคโนโลยีสารสนเทศ ทม่ี า : ภาพหนา้ เว็บไซตบ์ นอปุ กรณไ์ อที. [ออนไลน์]. [30 สิงหาคม 2559]. เขา้ ถงึ ได้จาก : https://software.thaiware.com/4888-MindMaple-Lite.html. 1.5.5 โดเมนเนม (Domain Name) คือ ช่ือเว็บไซต์ที่ต้องกรอกลงในช่อง Address ของโปรแกรมเว็บเบราว์เซอร์เพื่อเรียกใช้เว็บไซต์นั้น เช่น www.srtc.ac.th เป็นต้น ชื่อเว็บไซต์หรือ 2901-2006 การพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล 28

หลกั การสรา้ งเวบ็ เพจดว้ ยภาษา HTML โดเมนเนม เป็นส่งิ แรกทแ่ี สดงตัวตนของเวบ็ ไซต์ในระบบเครือข่ายอินเทอร์เน็ต ผู้สร้างเว็บสามารถมี โดเมนเนมของตนเองได้ด้วยการจดทะเบียนขอใช้โดเมนเนมกับผู้ให้บริการ ซ่ึงมีค่าใช้จ่ายในการจด ทะเบียน และโดเมนเนมจะต้องไม่ซ้า กับช่ือโดเมนเนมท่ีมีการใช้ไปก่อนแล้ว โดเมนเนมของแต่ละ เวบ็ ไซต์จะต้องไมซ่ า้ กนั ตัวอยา่ งการแบง่ กลมุ่ ของโดเมนออกเป็นแต่ละประเภท ดงั ตารางที่ 1.1 ตารางที่ 1.1 แสดงตัวอยา่ งการแบ่งกลมุ่ ของโดเมนออกเป็นแตล่ ะประเภท การแบ่งกลมุ่ โดเมนของสหรัฐอเมรกิ า การแบ่งกลุ่มโดเมนของประเทศอื่น ๆ .com : กลุม่ ธรุ กจิ การค้า .co : ภาคเอกชน เช่น www.hotmail.com เช่น www.pizza.co.th .org : หน่วยงานไม่หวงั ผลกาไร .or : องคก์ รไมห่ วงั ผลกาไร เชน่ www.thai.tourismthailand.org เช่น www.bot.or.th .net : หนว่ ยงานเก่ียวกับเครือข่าย .go : หนว่ ยงานราชการ เชน่ www.flashfly.net เชน่ www.suratthani.go.th .mil : หนว่ ยงานทหาร .ac : สถาบันการศึกษา เชน่ www.uscg.mil เช่น www.srtc.ac.th .gov : หน่วยงานรฐั บาล เช่น www.cia.gov .edu : สถาบันการศึกษา เชน่ www.bbc.th.edu ทมี่ า : การแบ่งกลมุ่ โดเมน. [ออนไลน]์ . [30 สิงหาคม 2559]. เข้าถึงได้จาก : http://www. mindphp.com/คมู่ อื /73-คืออะไร/2045-url-คอื อะไร.html. 1.5.6 URL (Universal Resource Locator) คอื ทอ่ี ยู่ (Address) ของข้อมลู ตา่ ง ๆ ในระบบอนิ เทอรเ์ นต็ เช่น รูปแบบของ URL เชน่ http://www.mindphp.com/support/urlfaq.htm ประกอบด้วย 1.5.6.1 ชื่อโปรโตคอล http (Hyper Text Transfer Protocol) 1.5.6.2 ชอื่ เครื่องคอมพิวเตอร์ และช่อื เครอื ข่ายยอ่ ย (www.mindphp) 1.5.6.3 ประเภทของเว็บไซต์ (.com) 1.5.6.4 ไดเร็กทอรี่ (/support/) 1.5.6.5 ชอ่ื ไฟล์และนามสกลุ (urlfaq.htm) 1.5.7 ไอพีแอดเดรส (IP Address) ย่อมาจากคาเต็มว่า Internet Protocol Address คือ หมายเลขประจาเคร่ืองคอมพิวเตอร์แต่ละเครื่องในระบบเครือข่ายท่ีใช้โปรโตคอล 2901-2006 การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 29

หลักการสร้างเว็บเพจด้วยภาษา HTML แบบ TCP/IP ถา้ เปรียบเทียบก็คือบ้านเลขที่ ในระบบเครือข่าย จาเป็นจะต้องมีหมายเลข IP กาหนด ให้กบั คอมพวิ เตอร์ และอปุ กรณ์อื่น ๆ เมื่อมีการโอนย้ายข้อมูล ก็จะสามารถทราบตาแหน่งของเคร่ือง ที่ต้องการส่งข้อมูลไป จะได้ไม่ผิดพลาดเวลาส่งข้อมูล IP Address ประกอบด้วยตัวเลข 4 ชุด มี เครื่องหมายจุดขั้นระหว่างชุด เช่น 192.168.100.1 หรือ 172.16.10.1 เป็นต้น โดยหมายเลข IP Address ของเครอ่ื งคอมพวิ เตอรแ์ ตล่ ะเคร่ืองจะมีค่าไม่ซ้ากัน 1.5.8 โปรโตคอล TCP/IP (Protocol TCP/IP) คือ ภาษาในการสื่อสารของเครื่อง คอมพิวเตอรท์ กุ ประเภทในระบบเครือข่ายอินเทอร์เน็ต โดยใช้มาตรฐานของภาษาท่ีชื่อว่า Protocol TCP/IP TCP ยอ่ มาจากคาวา่ Transmission Control Protocol IP ย่อมาจากคาว่า Internet Protocol TCP/IP คือ ชุดของโปรโตคอลที่ถูกใช้ในการส่ือสารผ่านเครือข่ายอินเทอร์เน็ต โ ด ย มี วั ต ถุ ป ร ะ ส ง ค์ เ พ่ื อ ใ ห้ ส า ม า ร ถ ใ ช้ ส่ื อ ส า ร จ า ก ต้ น ท า ง ข้ า ม เ ค รื อ ข่ า ย ไ ป ยั ง ป ล า ย ท า ง ไ ด้ และสามารถหาเส้นทางที่จะสง่ ขอ้ มลู ไปไดเ้ องโดยอตั โนมัติ TCP และ IP มีหน้าท่ีต่างกัน คือ TCP จะทาหน้าท่ีในการแยกข้อมูลเป็นส่วน ๆ เรียกว่า “Package” TCP ต้นทางจะส่ง Package ออกไป ส่วน TCP ปลายทางก็จะทาการรวบรวม ข้อมลู แตล่ ะส่วนเข้าดว้ ยกนั เพอ่ื นาไปประมวลผล โดยระหว่างการรบั สง่ ข้อมลู นน้ั ก็จะมีการตรวจสอบ ความถูกต้องของข้อมูลด้วย ถ้าเกิดข้อผิดพลาด TCP ปลายทางก็จะร้องขอไปยัง TCP ต้นทาง ให้ส่ง ขอ้ มลู มาใหใ้ หม่ IP จะทาหนา้ ท่ีในการจดั สง่ ข้อมูลจากเครอื่ งตน้ ทางไปยงั เคร่อื งปลายทางโดยอาศัย IP Address เปน็ ชอ่ งทางในการสง่ ขอ้ มลู 1.5.9 เสิร์ชเอนจิน (Search Engine) คือ โปรแกรมท่ีช่วยในการสืบค้นหาข้อมูลบน อินเทอร์เน็ต โดยสามารถสืบค้นข้อมูลสารสนเทศได้อย่างมากมาย ทั้งข้อความ รูปภาพ ภาพเคล่ือนไหว เพลง โปรแกรมคอมพิวเตอร์ แผนท่ี ข้อมูลของบุคคล กลุ่มข่าว และอื่น ๆ ซ่ึง หลักการสืบค้นจะแตกต่างกันไปแต่โปรแกรม เสิร์ชเอนจินส่วนใหญ่จะค้นหาข้อมูลจากคาสาคัญ (Keyword) ที่ผู้สืบค้นป้อนเข้าไป จากนั้นโปรแกรมจะแสดงรายการผลลัพธ์ท่ีคิดว่าผู้สืบค้นต้องการ ขน้ึ มา ตวั อยา่ งโปรแกรมเสิรช์ เอนจนิ เช่น กเู กิล (www.google.com) 2901-2006 การพฒั นาเวบ็ ด้วยภาษาเอชทีเอม็ แอล 30

หลกั การสร้างเว็บเพจดว้ ยภาษา HTML ส่ิงแรกของการออกแบบหน้าเว็บเพจ ผู้ออกแบบควรกาหนดขนาดหน้าจอท่ีจะให้ แสดงหน้าเว็บ โดยปกติจะกาหนดขนาดหน้าจออยู่ที่ 800X600 พิกเซล (pixels) หรือ 1280X720 พกิ เซล หนา้ เว็บเพจในปจั จุบันจะมีการนาเสนอข้อมลู อยู่ 3 แบบ คือ 1.6.1 การนาเสนอเนอื้ หามากกวา่ สง่ิ อนื่ ๆ โดยจะใชต้ ารางในการแสดงขอ้ มูลเป็นหลกั 1.6.2 การนาเสนอที่เน้นภาพกราฟิกเปน็ หลักมากกว่าเนือ้ หา โดยเน้นความสวยงาม ของภาพ และใช้ภาพในการเช่ือมโยงขอ้ มลู 1.6.3 การนาเสนอที่มีท้ังภาพและเนื้อหา เน้นการจัดวางภาพประกอบกับเนื้อหาที่ สอดคล้องกัน เพ่ือความสวยงามและความสมบูรณ์ของเน้ือหาในหน้าเว็บเพจ โดยข้ันตอนในการ ออกแบบเวบ็ เพจมดี ังต่อไปนี้ 1.6.3.1 กาหนดความตอ้ งการหรือวัตถุประสงค์ในการสร้างเว็บเพจ ว่าผู้ใช้ ตอ้ งการสร้างเวบ็ เพจเพือ่ อะไร เชน่ สร้างเว็บเพจในการขายสินค้า 1.6.3.2 กาหนดโครงร่างหนา้ เวบ็ เพจเพือ่ ความสวยงาม เช่น ออกแบบโลโก้ ของเว็บ กาหนดตาแหนง่ ของการวางภาพ หรือข้อความหนา้ เวบ็ 1.6.3.3 กาหนดการเช่อื มโยงขอ้ มูลในหนา้ เวบ็ เพจ เม่ือออกแบบหนา้ เวบ็ เพจได้แล้ว ก็จะสามารถดาเนินการออกแบบเว็บไซต์ต่อไปได้ โดยนาการออกแบบหนา้ เว็บเพจแตล่ ะหน้ามากาหนดโครงร่างของเว็บไซต์ กาหนดหน้าโฮมเพจให้กับ เว็บไซต์และแสดงการเชื่อมโยงไปยังเว็บเพจหน้าอ่ืน ๆ เรียกการกระทานี้ว่า การกาหนดผังของเว็บ (Site Map) 2. ระบบอินเทอร์เน็ต อนิ เทอร์เน็ต (Internet) หมายถงึ เครอื ข่ายคอมพิวเตอรข์ นาดใหญ่ ท่ีมีการเชื่อมต่อ ระหวา่ งเครอื ข่ายหลาย ๆ เครือข่ายทั่วโลก โดยใช้ภาษาท่ีถูกกาหนดให้เป็นมาตรฐานเดียวกันในการ สื่อสารระหว่างคอมพิวเตอร์ท่ีเรียกว่า โปรโตคอล (protocol) ผู้ใช้เครือข่ายอินเทอร์เน็ตสามารถ ส่ือสารถึงกันได้ในหลาย ๆ ทาง เช่น อีเมล (e-mail), เว็บบอร์ด (Web board) และสามารถสืบค้น ข้อมลู ขา่ วสารต่าง ๆ รวมทัง้ คดั ลอกแฟ้มขอ้ มูลและโปรแกรมมาใช้ได้ 2901-2006 การพัฒนาเวบ็ ด้วยภาษาเอชทีเอม็ แอล 31

หลกั การสร้างเว็บเพจด้วยภาษา HTML ภาพที่ 1.16 แสดงการเชื่อมโยงขอ้ มูลจากทัว่ โลกด้วยระบบอนิ เทอรเ์ นต็ ทีม่ า : ภาพการเชื่อมโยงข้อมลู ในระบบอนิ เทอร์เนต็ . [ออนไลน]์ . [30 สงิ หาคม 2559]. เข้าถงึ ได้จาก : https://5100wisudablog.wordpress.com/2016/07/25. อินเทอร์เน็ตเกิดข้ึนในปีค.ศ. 1969 หรือในปี พ.ศ.2512 จากเครือข่าย Advanced Research Projects Agency NETwork เรยี กวา่ ARPANET ซ่ึงเป็นเครอื ข่ายสานกั งานโครงการวิจัย ชน้ั สงู ของกระทรวงกลาโหม ประเทศสหรัฐอเมริกา โดยวัตถุประสงค์หลักของการสร้างเครือข่าย คือ เพอ่ื ใหก้ ารทางานของเครอื่ งคอมพวิ เตอรส์ ามารถเชือ่ มตอ่ และมปี ฏิสัมพนั ธ์กนั ได้ เครือข่าย ARPANET ถือเป็นเครือข่ายเริ่มแรก ซึ่งต่อมาได้พัฒนาให้เป็นเครือข่าย อินเทอร์เน็ตในปัจจุบัน ความเป็นมาของอินเทอร์เน็ตในประเทศไทย เริ่มขึ้นเม่ือปี พ.ศ. 2530 โดย การเช่ือมต่อ มินิคอมพิวเตอร์ของมหาวิทยาลัยสงขลานครินทร์ และสถาบันเทคโนโลยีแห่งเอเชีย (AIT) ไปยังมหาวิทยาลัยเมลเบิร์น ประเทศออสเตรเลีย แต่ในครั้งนั้นยังเป็นการ เช่ือมต่อโดยผ่าน สายโทรศัพท์ ซงึ่ สามารถสง่ ขอ้ มลู ไดช้ า้ และไม่เปน็ การถาวร จนกระทัง่ ในปี พ.ศ. 2535 ศนู ย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ (NECTEC) ไดเ้ ชือ่ มตอ่ คอมพวิ เตอร์กับมหาวิทยาลัย 6 แห่ง ได้แก่ จุฬาลงกรณ์มหาวิทยาลัย, สถาบัน เทคโนโลยีแห่งเอเชีย (AIT), มหาวิทยาลัยสงขลานครินทร์ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และ คอมพิวเตอร์แห่งชาติ (NECTEC), มหาวิทยาลัยธรรมศาสตร์ และมหาวิทยาลัยเกษตรศาสตร์ เข้า ดว้ ยกันเรยี กวา่ \"เครอื ข่ายไทยสาร\" การให้บรกิ ารอินเทอรเ์ นต็ ในประเทศไทยเร่มิ ตน้ เป็นครั้งแรก เมื่อเดือนมีนาคม พ.ศ. 2538 โดยความรว่ มมือของรฐั วิสาหกจิ 3 แหง่ คือ การส่อื สารแหง่ ประเทศไทย, องค์การโทรศัพท์แห่ง ประเทศไทย และสานักงานส่งเสริมวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.) โดยให้บริการ 2901-2006 การพัฒนาเว็บดว้ ยภาษาเอชทีเอม็ แอล 32

หลกั การสร้างเว็บเพจดว้ ยภาษา HTML ในนาม บริษัทอินเทอร์เน็ต ประเทศไทย (Internet Thailand) เป็นผู้ให้บริการอินเทอร์เน็ตเชิง พาณิชยร์ ายแรกของประเทศไทย ในปจั จุบนั อินเทอรเ์ น็ตมคี วามสาคญั ตอ่ การดาเนินชวี ติ ประจาวันของคนเราหลาย ๆ ดา้ นตัวอยา่ งเช่น 2.3.1 ด้านการศึกษา การใช้อินเทอร์เน็ตเพื่อการสนับสนุนการศึกษาเป็นการใช้ อินเทอร์เน็ตในการติดต่อส่ือสาร นัดหมาย อธิบายรายละเอียด แลกเปล่ียนความคิดเห็น ความรู้ ประสบการณ์ ของครู อาจารย์ กับนักเรียน หรือนักเรียนกับนักเรียนด้วยกัน เพื่อการส่งการบ้าน ปัจจุบนั ยังมีการใชง้ านอินเทอร์เน็ตเพ่ือจัดระบบการเรียนการสอนออนไลน์ ซ่ึงกาลังได้รับความนิยม ในอย่างสูง เน่ืองจากสะดวก รวดเรว็ และสามารถจัดการเรยี นการสอนได้ทุกท่ีอย่างท่ัวถึง นอกจากน้ี อนิ เทอร์เนต็ ยังเปน็ แหล่งค้นคว้าขอ้ มลู เสมอื นหอ้ งสมุดขนาดใหญ่ที่มีข้อมูลครอบคลุมมีท้ังภาพ เสียง และภาพเคล่ือนไหว 2.3.2 ดา้ นการค้า ธุรกิจและการพาณิชย์ การใชอ้ นิ เทอร์เนต็ กบั งานธรุ กิจนน้ั ช่วยให้ สามารถตัดสินใจซือ้ ขายสนิ คา้ และบรกิ ารได้อย่างรวดเร็วและสะดวก นับวา่ เปน็ ตลาดท่ีกว้างขวางและ มีประสิทธิภาพในการติดต่อซ้ือสินค้าและบริการ เพราะยุคสมัยนี้ ผู้บริโภคนิยมความสะดวกสบาย รวดเรว็ ทนั ใจ ไมว่ ่าจะอย่ทู ี่ไหนก็สามารถเปิดเว็บไซต์เพื่อเลือกสินค้าและบริการได้ อีกทั้งปัจจุบันน้ีมี บริการทางดา้ นการเงิน หรือการทาธุรกรรมต่าง ๆ ทางด้านการเงินสะดวกสบายโดยผู้ให้บริการจาก หลากหลายแหล่ง เช่น ธนาคารพาณิชย์ทุกท่ี ต่างอานวยความสะดวกให้กับลูกค้าและผู้บริโภคผ่าน ระบบอนิ เทอร์เนต็ 2.3.3 ดา้ นความบันเทงิ อินเทอร์เน็ตถือว่าเป็นแหล่งความบันเทิงในอีกรูปแบบหนึ่ง เหมือนกบั การนงั่ ดูโทรทศั น์ ดูภาพยนตร์ อา่ นหนังสอื หรอื บทความตา่ ง ๆ ซึ่งสามารถจะดูหรือใช้งาน ท่ไี หนเมื่อไหรก่ ไ็ ด้ตามต้องการ อินเทอร์เน็ตต่อด้านความบันเทิงนั้นถือว่าเป็นท่ีพักผ่อนหย่อนใจ เรา สามารถคน้ หาขอ้ มูลไม่วา่ จะเป็น วารสาร หนงั สอื พมิ พ์ ข่าว นยิ าย วรรณกรรม ฟังวิทยุออนไลน์ หรือ อื่น ๆ ที่สนใจผา่ นระบบเครอื ข่ายอนิ เทอร์เนต็ 2.3.4 ด้านสื่อสารมวลชน งานส่ือสารมวลชนเป็นงานท่ีต้องเน้นความรวดเร็วเป็น หลักเพื่อให้ทันกับสถานการณ์บ้านเมืองในปัจจุบัน เพราะข่าวสารน้ันมีการอัพเดตอยู่ตลอดเวลา นอกจากนี้ยังสามารถใชใ้ นการตดิ ตอ่ ส่ือสาร การโฆษณาสนิ ค้า การค้าขาย รวมท้ังการประชาสัมพันธ์ การสื่อสารโดยใช้อินเทอร์เน็ตในปัจจุบันนั้นถือว่าเป็นการส่ือสารที่ไร้พรมแด น มีการเข้าถึง กล่มุ เปา้ หมายได้จานวนมาก ดว้ ยเวลาอนั รวดเร็วและใช้ต้นทนุ ตา่ 2901-2006 การพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 33

หลักการสร้างเวบ็ เพจดว้ ยภาษา HTML เครอื ข่ายอินเทอร์เนต็ สามารถทาให้เครอ่ื งคอมพิวเตอร์ต่างชนิด หรือต่างขนาดกันที่ เชื่อมตอ่ ภายในเครือข่าย สามารถส่ือสารกันได้ โดยต้องมีมาตรฐานการรับส่งข้อมูลเป็นแบบเดียวกัน หรือใช้กฎและข้อตกลงเดียวกัน เรียกว่า โปรโตคอล (Protocol) ในการควบคุมรูปแบบข้อมูล และ การส่งผ่านข้อมูลระหว่างเคร่ืองคอมพิวเตอร์ ใช้มาตรฐานโปรโตคอลในระบบอินเทอร์เน็ต เรียกว่า ทรานมิชช่ัน คอนโทร โปรโตคอล/อินเทอร์เน็ต โปรโตคอล (Transmission Control Protocol/ Internet Protocol) หรอื มชี ่ือยอ่ วา่ ทีซพี /ี ไอพี (TCP/IP) อินเทอร์เน็ตสามารถส่งข้อมูลระหว่างคอมพิวเตอร์เคร่ืองหนึ่งไปยังคอมพิวเตอร์ ปลายทางไดม้ ากกวา่ หนึง่ เสน้ ทาง ซง่ึ หากเสน้ ทางบางเสน้ ทางได้รับความเสียหาย ระบบเครือข่ายก็ยัง สื่อสารกันได้ โดยใช้เส้นทางที่เหลือเส้นทางอื่น ซ่ึงการส่งข้อมูลดังกล่าวจะใช้หลักการของเครือข่าย แบบแพ็กเกจสวิตช่ิง (Packet-Switching Network) โดยจะทาการแบ่งข้อมูลออกเป็นกลุ่ม ๆ หรือ แพ็กเกจ และส่งไปยังปลายทางโดยใช้เส้นทางต่าง ๆ กัน ขึ้นอยู่กับปลายทางที่กาหนด โดยเคร่ือง คอมพิวเตอร์ท่ีเช่ือมตอ่ อย่กู ับเครอื ข่ายจะตอ้ งมีหมายเลขประจาเครอ่ื งเพือ่ ให้เครอื่ งคอมพิวเตอร์อ่ืน ๆ อา้ งองิ ถงึ ได้ ข้อมูล สารสนเทศ ที่มีอยู่บนระบบอินเทอร์เน็ตมีอยู่มากมายมหาศาล ดังนั้น กระบวนการในการสบื ค้นข้อมูลบนอนิ เทอร์เน็ตจงึ ต้องมีข้นั ตอนในการคน้ หา เพื่อลดระยะเวลาในการ สืบค้น หลีกเล่ียงเน้ือหาท่ีไม่ตรงกับความต้องการ จีงควรระบุสิ่งที่ต้องการค้นหาให้ชัดเจนเพ่ือการ เข้าถึงข้อมูลโดยตรง การค้นหาข้อมูลบนอินเทอร์เน็ตต้องอาศัยเคร่ืองมือในการสืบค้นท่ีเรียกว่า เสิรช์ เอนจิน (Search Engine) โปรแกรมเสิร์จเอ็นจ้ินจะรวบรวมข้อมูลของเว็บไซต์ต่าง ๆ ไว้แล้วจัด หมวดหมู่ จดั ลาดับ ข้อมลู ทเ่ี กี่ยวขอ้ ง เชน่ ขอ้ ความ หวั ขอ้ หลกั ภาพ เน้ือหาที่มีคาค้นเหมือนข้อความ ทตี่ อ้ งการ หลกั การคน้ ข้อมูลของเสริ ์ชเอนจนิ แตล่ ะโปรแกรมจะไม่เหมือนกันขึ้นอยู่กับกลไกใน การค้นหา หรือการจัดเกบ็ ข้อมูล ประสิทธิภาพในการแสดงการค้นหา ความรวดเร็วในการให้บริการ แต่กระบวนการทางานในการสบื คนื ขอ้ มูลจะมีส่วนทค่ี ล้ายกัน โดยอาศยั หลักการดังนี้ 2.5.1 คน้ หาชือ่ URL ของเวบ็ ไซต์ต่าง ๆ 2.5.2 คน้ หาจากชื่อทตี่ าแหน่ง Title ของเวบ็ ไซต์ 2.5.3 ค้นหาจากคาสาคัญ (keyword) ที่อยู่ในแท็กคาสั่งในภาษา HTML คือ Tag <meta> 2901-2006 การพัฒนาเว็บด้วยภาษาเอชทีเอม็ แอล 34

หลกั การสรา้ งเวบ็ เพจดว้ ยภาษา HTML 2.5.4 คน้ หาจากสว่ นทใ่ี ช้อธบิ ายหรอื บอกลักษณะของเว็บไซต์ 2.5.5 ค้นหาคาในหน้าเว็บเพจด้วย Web Browser ซ่ึงในเว็บเพจน้ันอาจมีเน้ือหา มากมาย การค้นหาคาในหนา้ เวบ็ เพจจะใช้เมนคู าสงั่ ในเวบ็ เบราว์เซอร์เปน็ ตวั ช่วยในการคน้ หา 3. ภาษา HTML ภาษาเอชทีเอ็มแอล (HTML) ย่อมาจาก Hyper Text Markup Language เป็น ภาษาคอมพิวเตอร์รูปแบบหนึ่งที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จาก แมแ่ บบของภาษา SGML (Standard Generalized Markup Language) HTML เป็นภาษามาตรฐานสากลท่ีใช้นาเสนอข้อมูลแบบผสมผสานของข้อมูล หลากหลายรูปแบบผ่านการส่ือสารแบบ World Wide Web (WWW) ซึ่งเป็นการเชื่อมต่อเครือข่าย ของเคร่อื งคอมพิวเตอรท์ ่ัวโลกเขา้ ดว้ ยกนั สามารถแสดงข้อมูลได้หลายรูปแบบ เช่น ข้อความ รูปภาพ เสียง ภาพเคลื่อนไหว ข้อมูลจะถูกเช่ือมโยงกัน ด้วยชุดคาส่ังต่าง ๆ ที่เรียกว่าแท็ก (Tag) แต่ละแท็ก อาจจะมีส่วนขยายที่เรียกว่า แอททริบิวต์ (Attribute) สาหรับระบุ หรือควบคุมการแสดงผลของ เว็บเพจเพื่อให้แสดงผลออกมาคล้ายกับส่ิงพิมพ์ สไลด์ หรือแบบมัลติมีเดียผ่านโปรแกรม เว็บ เบราว์เซอร์ แท็ก (Tag) เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคาสั่ง หรือ การลงรหัสคาสั่ง HTML ภายในเคร่ืองหมาย less-than bracket (<) และ greater-than bracket (>) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คอื Tag เดี่ยว เปน็ แท็กท่ไี มต่ ้องมีการปดิ รหสั เช่น <HR>, <BR> Tag คู่ หรือ Tag เปิด/ปดิ เป็นแท็กที่ประกอบด้วยแท็กเปิดและแท็กปิดโดยแท็กปิด จะมเี ครอ่ื งหมาย slash (/) นาหนา้ คาสง่ั ในแท็กนน้ั ๆ เชน่ <B>…</B>, <BLINK>…</BLINK> เรม่ิ ขึ้นเมอื่ ปี ค.ศ. 1980 โดย Tim Berners Lee ได้เสนอต้นแบบสาหรับนักวิจัยใน CERN เพื่อแลกเปลี่ยนเอกสารข้อมูลด้านการวิจัยโดยใช้ชื่อว่า Enquire ในปี ค.ศ. 1990 Tim Berners Lee ได้เขียนโปรแกรมเบราว์เซอร์ และทดลองรันบนเซิร์ฟเวอร์ที่พัฒนาขึ้น โดยมี HTML Tag อยู่ 18 แทก็ ในปี ค.ศ. 1991 ภาษา HTML ถูกพัฒนาจากภาษา SGML ต่อมาในปี ค.ศ. 1996 เพื่อกาหนด มาตรฐานให้ตรงกนั W3C (World Wide Web Consortium) จึงเป็นผู้กาหนดมาตรฐานทั้งหมดของ ภาษา HTML และปี ค.ศ. 1999 HTML 4.01 กถ็ ือกาเนิดขึ้นโดยมี HTML5 ซึ่งเป็น Web Hypertext 2901-2006 การพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 35

หลกั การสร้างเว็บเพจด้วยภาษา HTML Application ถูกพัฒนาต่อมาในปี ค.ศ. 2004 นอกจากนี้ยังมีการพัฒนาไปเป็น XHTML คือ Extended HTML ซ่ึงมีความสามารถและมาตรฐานท่ีรัดกุมกว่าโดยอยู่ภายใต้การควบคุมของ W3C (World Wide Web Consortium) ภาพที่ 1.17 แสดงวิวัฒนาการของภาษา HTML ทม่ี า : วิวัฒนาการของภาษา HTML. [ออนไลน]์ . [30 สงิ หาคม 2559]. เข้าถงึ ได้จาก : http://www.codingbasic.com/html.html. HTML ช่วยให้เราสามารถเผยแพรเ่ อกสารตา่ ง ๆ ท่ีเราสร้างข้ึน ให้คนท่ัวโลกได้อ่าน อย่างไม่มีข้อจากัด ท้ังด้านของเครื่องคอมพิวเตอร์ (Hardware) หรือแม้แต่ระบบปฏิบัติการ (Software) ไมว่ า่ จะใชร้ ะบบปฏิบตั กิ ารใดก็ตาม ถา้ มีโปรแกรม Web Browser ก็สามารถอ่านไฟล์ใน รูปแบบของ HTML ได้โดยมาตรฐานของภาษา HTML ถกู กาหนดอยภู่ ายใต้การควบคมุ ของ W3C หลักการสร้างเว็บเพจด้วยภาษา HTML เป็นกระบวนการในการเรียนรู้ข้อมูล สารสนเทศที่เกีย่ วขอ้ งกับเว็บเพจ ตั้งแตก่ ระบวนการในการออกแบบ ขั้นตอนการออกแบบ คาศัพท์ท่ี เก่ียวข้องกับเว็บ การสืบค้นข้อมูลในระบบอินเทอร์เน็ต และที่มาของภาษา HTML ท่ีจะนาการสร้าง เวบ็ เพจในรายวชิ าการพัฒนาเวบ็ ด้วยภาษา HTML 2901-2006 การพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 36

หลักการสร้างเวบ็ เพจด้วยภาษา HTML กังวาน อัศวไชยวศนิ และ อรพิน ประวัตบิ รสิ ุทธ.ิ์ คมู่ อื สร้างเวบ็ ไซตด์ ้วย HTML5 CSS3 & JavaScript ฉบับสมบูรณ์. กรงุ เทพฯ : โปรวิชั่น, 2556. กติ ติ ภกั ดีวัฒนะกลุ และ ทวศี ักดิ์ กาญจนสุวรรณ. สรา้ งระบบสารสนเทศบนเวบ็ ดว้ ย FrontPage 2002. กรงุ เทพฯ : เคทพี ี คอมพ์ แอนด์ คอนซลั ท์, 2544. จารนุ นั ท์ เรืองกจิ วณชิ กลุ . การสรา้ งเว็บไซต์. กรุงเทพฯ : ศูนยส์ ่งเสริมวชิ าการ, 2558. ประชา พฤกษ์ประเสรฐิ . การโปรแกรมเว็บด้วยภาษา HTML. กรงุ เทพฯ : บรษิ ทั ซัคเซส มเี ดีย จากัด, 2550. พรชัย ทองอนิ ทร.์ การสรา้ งเว็บไซต์. กรงุ เทพฯ : แม็คเอ็ดดเู คชน่ั , 2558. พนั จันทร์ ธนวฒั นเสถยี ร. ออกแบบและสรา้ งเวบ็ สวยด้วย Dreamweaver CS6 สาหรบั ผ้เู รมิ่ ต้น. กรงุ เทพฯ : รีไววา่ , 2557. วภิ าวี ณ นมิ ติ ร. การสรา้ งเวบ็ ไซต์. นนทบุรี : บ.ศูนย์หนังสอื เมอื งไทย จากดั , 2557. bloggang.com. การสรา้ งเวบ็ เพจด้วยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เข้าถึงได้จาก : http://www.bloggang.com. codingbasic.com. การสรา้ งเวบ็ เพจด้วยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เข้าถงึ ไดจ้ าก : http://www.codingbasic.com/html.html. comsystemshop.com. การสร้างเว็บเพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เขา้ ถึงได้จาก : http://www.comsystemshop.com. dupracha.ac.th. การสร้างเวบ็ เพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สงิ หาคม 2559]. เขา้ ถงึ ไดจ้ าก : http://dupracha.ac.th/courses/html/. emo-yumi.blogspot.com. การสร้างเว็บเพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เข้าถงึ ได้จาก : http://emo-yumi.blogspot.com. it-guides.com. การสร้างเว็บเพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เข้าถึง ไดจ้ าก : http://www.it-guides.com. kmitl.ac.th. การสร้างเวบ็ เพจด้วยภาษา HTML. [ออนไลน]์ . [15 สงิ หาคม 2559]. เขา้ ถึง ได้จาก : http://www.kmitl.ac.th. kroobannok.com. การสร้างเวบ็ เพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สงิ หาคม 2559]. เข้าถงึ ได้จาก : http://www.kroobannok.com. mindphp.com. การสรา้ งเวบ็ เพจด้วยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เข้าถึง ได้จาก : http://www.mindphp.com. 2901-2006 การพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล 37