021ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ

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

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

3 ดาวน์โหลดขอ้ มลู เปน็ เว็บทีใ่ ห้บรกิ ารดาวน์โหลดไฟลต์ ่างๆ เช่น ไฟล์โปรแกรม ไฟลภ์ าพ และไฟล์เพลง เป็นตน้ บรกิ ารตดิ ตอ่ สอ่ื สาร เปน็ เว็บที่ให้บริการในการติดต่อส่ือสารถงกนั เช่น การรบั ส่งจดหมายอิเล็กทรอนกิ ส์ (E-mail), เว็บบอร์ด และ เว็บแชตสนทนาต่างๆ เป็นต้น การทำงานของเว็บเพจ นอกจากเราจะทราบประโยชน์ของเว็บเพจว่าทำอะไรได้บ้างแลว้ สิ่งทสี่ ำคญั ก่อนทเ่ี ราจะไปสรา้ งเวบ็ เพจ นั่นก็คือ การเข้าใจการทำงาน และการแสดงผลของเวบ็ เพจกัน เพ่ือเราจะสามารถวางแผนการสร้างเว็บ เพจได้อยา่ งถกู ตอ้ ง

4 จากรูปจะเหน็ การทำงานเป็นขนั้ ตอนต่างๆ ดังนี้ ขนั้ ตอนที่ 1 ผู้ใช้พมิ พ์ตำแหนง่ เวบ็ เพจในโปรแกรมบราวเซอร์ กจ็ ะมกี ารรอ้ งขอข้อมลู ไฟลเ์ วบ็ เพจ หน้าน้นั ไปยงั เคร่ืองเซอรเ์ วอร์ (Server คือ เครอ่ื งทเ่ี ก็บและเผยแพร่เวบ็ เพจ) ขั้นตอนที่ 2 ฝงั่ เซอร์เวอร์จะทำการคน้ หาไฟลเ์ วบ็ เพจตวั ทถ่ี ูกรอ้ งขอ ขน้ั ตอนที่ 3 เวบ็ เซอร์เวอร์สง่ ขอ้ มูลไปยงั เคร่อื งผ้ใู ชแ้ ละแสดงผลบนบราวเซอร์ แท้จรงิ แลว้ ไฟลเ์ ว็บเพจ จะเป็นโปรแกรม HTML ทีเ่ ป็นตัวกำหนดให้บราวเซอรแ์ สดงขอ้ ความ และดึง ข้อมูลของภาพ เสียง วิดีโอ ออกมาแสดงให้อยู่ในรูปแบบและตำแหนง่ ตามที่โปรแกรมกำหนด ซึ่งเราจะเรยี น วิธีการเขยี นภาษา HTML เพอ่ื สร้างและตกแต่งหน้าตาเว็บเพจภายในเนื้อหาในหาในเวบ็ ไซต์น้ี ตัวอยา่ งเวบ็ เพจทเี่ ป็นภาษา HTML ผลการรนั เว็บบราวเซอร์ สิ่งที่ควรรู้ก่อนสร้างเว็บเพจ คือ คำศัพท์ต่างๆ ที่ช่วยทำให้เราเขา้ ใจและสามารถศึกษาการสร้างเว็บ เพจได้อย่างถกู ต้อง ไคลเอนต์ - เซอรฟ์ เวอร์ (Client - Server) ในการติดต่อสื่อสารบนเครือข่ายอินเทอร์เน็ตที่คอมพิวเตอร์ทั่วโลกเชื่อมโยงถึงกันนั้น จะมีการ ติดต่อสื่อสารอยู่ 2 แบบ คือ แบบส่งข้อมูลและรับข้อมูล โดยเครื่องคอมพิวเตอร์ที่ทำการส่งข้อมูลเราจะ เรียกว่า เครื่องให้บริการ (Server) และเครื่องคอมพิวเตอร์ที่รับข้อมูล เราจะเรียกว่า เครื่องรับบริการ (Client)

5 เครือข่ายใยแมงมุม WWW (World Wide Web) บริการรูปแบบหนึ่งในอินเทอร์เน็ตที่เชื่อแน่ว่าเราทุกคนต้องเคยสัมผัสก็คือ WWW หรือที่เราเรียก สั้นๆว่า \"เว็บ\" นั่นเอง การให้บริการในรูปแบบนี้ คือ การเรียกบราวเซอร์ เช่น Internet Explorer หรือ Firefox จากเคร่อื งของเราและระบุ URL เพอื่ ใช้ในการอ้างทอี่ ย่ทู เี่ ก็บเวบ็ เท่านีเ้ รา ก็สามรารถเปิดดูเว็บได้แล้ว ดังตวั อย่างเมอื่ เราระบุ URL ที่ต้องการเปดิ เวบ็ ไซต์ (Web Site) เราจะเรียกกลุ่มของหน้าเว็บ หรือเว็บหลายๆหน้ารวมกัน ว่า \"เว็บไซต์\" (Web Site) โดยจะมีการ กำหนดเว็บเพจหน้าหนึ่งไว้เป็นหน้าแรก และเรียกว่า \"โฮมเพจ\" (Home Page) ที่เป็นช่องทางเข้าเว็บเพจ ทัง้ หมดภายในเว็บไซต์นน้ั ตัวอยา่ งหน้าโฮมเพจของเวบ็ ไซต์ Kapook.com เวบ็ บราวเซอร์ และเวบ็ เซิรฟ์ เวอร์ (Web Browser & Web Server) เวบ็ บราวเซอร์ (Web Browser) คือ โปรแกรมที่เป็นประตูเข้าสู่โลก World Wide Web ซึ่งเป็นโปรแกรมที่อยู่ในเครื่องคอมพิวเตอร์ ลูกข่าย (Client) มหี น้าท่ีในการส่งขอ้ มลู รอ้ งขอ และนำเสนอขอ้ มลู เว็บ โดยตวั เว็บบราวเซอร์จะเขา้ ใจในภาษา HTML ท่ีเปน็ มาตรฐานของเวบ็ ปจั จุบนั บราวเซอรท์ ่ไี ดร้ บั ความนยิ ม ก็มี Internet Explorer ของไมโครซอฟท์ Firefox และ Google Chrome ซึ่งเปน็ บราวเซอร์โอเพ่นซอรส์

6 เว็บเซริ ์ฟเวอร์ (Web Server) เปน็ ท่เี กบ็ เว็บเพจ เมื่อใดท่เี ราต้องการเปิดดูเว็บเพจ เราตอ้ งใช้ บราวเซอร์ดึงขอ้ มูล โดยทีบ่ ราวเซอรจ์ ะทำการติดต่อกบั เซริ ์ฟเวอร์ท่ีเกบ็ เว็บไซต์น้นั เพอื่ ใหม้ กี ารโอนย้ายข้อมูล มาแสดงท่ีเครอื่ งของเรา โดเมนเนม (Domain Name) การติดต่อกันบนอินเทอรเ์ นต็ นั้น จะใช้ไอพแี อดเดรสในการทำงาน แต่เปน็ ตัวเลขที่ยาว ทำให้ผใู้ ชจ้ ำยาก จงึ ได้มีการใช้โดเมนเนม (Domain Name) หรืออินเทอร์เน็ตแอดเดรส (Internet Address) มาใช้ ซ่ึงเปน็ การนำตวั อกั ษรทจ่ี ำง่ายมาใช้แทนไอพีแอดเดรส โดเมนเนมจะไมซ่ ำ้ กนั และ มักถกู ตั้งใหส้ อดคลอ้ งกบั ชอ่ื บริษัท หรอื องคก์ รผเู้ ปน็ เจ้าของ เพื่อสะดวกในการจดจำชื่อ เชน่ บริษัท ดีแทค มี โดเมนเป็น www.dtac.co.th ประเภทของโดเมนเนม โดเมนเนมเป็นชื่อของเวบ็ ไซต์ที่เราเผยแพร่ข้อมูล ซ่งึ จะไมซ่ ้ำใครในโลก มีการแบ่งโดเมนเปน็ 2 ประเภทตามลกั ษณะของมนั ได้แก่ โดเมนเนม 2 ระดับและโดเมนเนม 3 ระดบั โดเมนเนม 2 ระดับ จะมีรูปแบบ เชน่ dtac.com สำหรบั ตัวย่อท่อี ยู่หลงั เครอื่ งหมายจดุ ในโดเมนเนม คือคำย่อของประเภทองคก์ ร ซึง่ คำยอ่ ของ ประเภทองค์กรทเี่ ราจะพบบ่อย มีดงั นี้ ตัวยอ่ ประเภทองคก์ ร .com บริษทั หรอื องคก์ รพาณิชย์ เช่น บรษิ ัท ไอบีเอม็ มีอนิ เทอร์เนต็ แอดเดรสเป็น ibm.com .edu สถาบนั การศกึ ษา เชน่ มหาวิทยาลัยฮาร์วารด์ มอี ินเทอร์เน็ตแอดเดรสเปน็ harvard.edu .gov องค์กรรฐั บาล เช่น องค์กรนาซา่ มีอนิ เทอรเ์ นต็ แอดเดรสเป็น nasa.gov .mil องค์กรทางทหาร เชน่ af.mil เปน็ อินเทอรเ์ น็ตแอดเดรสของกองทพั อากาศสหรฐั ฯ .net องคก์ รท่ีทำหน้าทเ่ี ปน็ เกตเวย์ หรอื จุดเชอื่ มต่อเครือขา่ ย เชน่ mci.net .org องค์กรท่ีไมเ่ ข้าขา่ ยประเภทองค์กรทง้ั หมดที่ไดก้ ลางถงึ ด้านต้น .biz บริษัทหรอื งคก์ รทางธุรกิจ .info ใชใ้ นโอกาสโปรโมทสินค้า, เหตุการณส์ ำคญั เชน่ บอกขอ้ มลู สว่ นลดสินค้า โดเมนเนม 3 ระดับ จะมรี ูปแบบ เชน่ dtac.co.th โดยคำยอ่ ในส่วนที่ 2 หลังเครอื่ งหมายจุดใช้ระบุประเภทขององคก์ ร และคำย่อสว่ นท่ี 3 หลัง เครอ่ื งหมายจุดใชร้ ะบปุ ระเทศที่ต้งั ขององค์กรนัน้ เชน่

7 ตวั ยอ่ สว่ นท่ี 2 ตัวย่อสว่ นท่ี 3 .co บรษิ ทั หรอื องคก์ รพาณชิ ย์ .cn จนี .ac สถาบันการศกึ ษา .th ไทย .go องค์กรรฐั บาล .jp ญป่ี ุ่น .or องค์กรไมแ่ สวงผลกำไร .au ออสเตรเลีย .net องคก์ รทใ่ี ห้บริการเครอื ข่าย รายละเอียดเก่ยี วกับ URL content identifier เป็นส่วนทีแ่ จง้ ให้บราวเซอรท์ ราบวา่ ต้องจดั การข้อมลู ท่ีพบอยา่ งไร สำหรบั เว็บเพจใน World Wide Web จะใชโ้ ปรโตคอลมาตรฐานช่ือ HTTP (HyperText Transfer Protocol) สว่ น FTP เปน็ อกี โปรโตคอลเกี่ยวกับโอนยา้ ยไฟลข์ อ้ มลู ในอินเทอร์เน็ตทเ่ี รา พบได้บอ่ ย hostname เป็นส่วนที่ระบชุ อ่ื ของเว็บไซตท์ ่ที ำหน้าที่เผยแพร่เว็บเพจ บ่อยครั้งทีส่ ว่ นน้ีถูกเรยี กวา่ โดเมนเนม (Domain Name) เว็บไซตจ์ ะมีโดเมนเนมเฉพาะทไ่ี มเ่ หมือนใคร สว่ นระบตำแหน่ง ระบุที่เกบ็ ขอ้ มูลเว็บในเครอ่ื ง ชื่อไฟลข์ ้อมลู ส่วนสุดทา้ ยของ URL จะเป็นช่ือไฟลข์ ้อมูล เชน่ เวบ็ เพจจะมีนามสกลุ .htm หรอื .html ถ้าในสว่ นนี้ไม่มีใน URL บราวเซอร์จะถือว่าชื่อไฟลท์ ่ีต้องการเรยี กดูน้นั คอื index.htm ซ่ึงโดยปกติจะถกู ใช้เป็นชอ่ื โฮมเพจในเว็บไซต์ หลกั การออกแบบเวบ็ ไซต์ กำหนดขนาดของเว็บเพจ เราจะเห็นว่าขนาดของจอคอมพิวเตอร์ในปัจจุบันมีหลายขนาด เช่น 14\" 15\" และ 17\" เป็นต้น ซ่ึง ขนาดทแ่ี ตกต่างกนั นี้ทำให้การแสดงผลเวบ็ ไซต์แตกต่างกันดว้ ย เราจงึ ควรกำหนดขนาดเว็บไซต์ให้มีรูปแบบที่ มาตรฐาน เพื่อทำให้การแสดงข้อมลู ไดอ้ ย่างครบถ้วนชัดเจน โดยขนาดของเว็บไซตท์ ี่เหน็ กันมากทีส่ ุดมีอยู่ 2 ขนาดคือ

8 1. ขนาดของเว็บไซต์แบบ 800x600 pixels เป็นขนาดมาตรฐานที่ใช้กับหน้าจอคอมพิวเตอร์ได้ทุก ขนาด 2. ขนาดเว็บไซตแ์ บบ 1024x768 pixels ซึ่งขนาดแบบนี้กำลงั ได้รับความนยิ มเพ่ิมมากขึ้น เนื่องจาก จอคอมพวิ เตอรใ์ นปัจจบุ ันมีราคาถูกลงมาก ดงั นัน้ ผใู้ ชค้ อมพิวเตอร์จงึ หนั ไปใช้จอคอมพวิ เตอร์ท่มี ขี นาดใหญ่ข้ึน ด้วยเหมือนกนั 3. ขนาดเวบ็ ไซต์แบบยดื หยนุ่ ขยายตามความกว้างของหนา้ จอ เปน็ การออกแบบเว็บไซต์ท่ตี อ้ งการให้ การแสดงผลยืดหยุน่ เตม็ จอตามการตง้ั คา่ ความละเอยี ดหน้าจอคอมพวิ เตอร์ การออกแบบโครงสร้างเวบ็ ไซต์ เว็บไซต์ในปัจจุบัน จะมีหลักการออกแบบที่แตกต่างกันไม่มากนัก ซึ่งจะมีวิธีการออกแบบหน้าตา เว็บไซตอ์ ยู่ 3 แบบ คอื 1. ออกแบบหนา้ เวบ็ ไซต์ทีเ่ นน้ การนำเสนอเนอ้ื หามากๆ เป็นการออกแบบเว็บไซต์ที่มีการนำเสนอเนือ้ หามากกว่ารูปภาพ โดยจะใช้โครงสร้างของตารางเปน็ หลัก เพ่ือใส่ขอ้ ความแบบหนา้ สารบัญ และรูปภาพเป็นชิ้นเล็กๆ ได้ 2. ออกแบบหน้าเว็บไซต์ที่เน้นภาพกราฟิกเปน็ หลกั เป็นการออกแบบเว็บไซต์ ที่มีภาพกราฟิกที่สวยงาม ถูกจัดวางไว้ในหน้าโฮมเพจ ซึ่งแตกต่างจาก ข้อความแรกมาก เพราะจะไม่ค่อยมีข้อความในเว็บเพจ แต่จะเป็นการ Link ที่ภาพเพื่อเข้าไปยังหน้าเว็บเพจ อืน่ ๆ ตอ่ ไป การสร้างเว็บไซตแ์ บบน้ีจะใชโ้ ปรแกรม Photoshop สำหรับตกแตง่ ภาพก่อนนำไปใชบ้ นหน้าเวบ็ 3. ออกแบบหน้าเว็บไซตท์ ่ีมีท้งั ภาพและเนอื้ หา เปน็ การออกแบบหน้าเวบ็ ไซตท์ ผี่ สมกันระหว่างขอ้ ท่ี 1 และ 2 ขา้ งตน้ โดยจะเนน้ การจัดวางภาพท่ีตัด แบ่งเป็นช้นิ เล็กๆ ก่อน หลังจากนั้นจงึ ใส่ข้อความประกอบภาพลงไป เพ่ือใหเ้ ว็บไซต์ของเรามคี วามสวยงามด้วย ภาพกราฟิกทีน่ ำมาประกอบ และใส่เน้อื หาไดอ้ ย่างสมบรู ณ์ดว้ ย ขนั้ ตอนการสร้างเวบ็ ไซต์ เราสามารถนำไฟลเ์ ว็บเพจมารอ้ ยเรยี งและนำเสนอเป็นกลุม่ ขอ้ มลู ที่เรียกวา่ เว็บไซต์ ซึ่งจะมวี ธิ กี ารคดิ ต้ังแตก่ ำหนดโครงร่างของเว็บเพจ จนถึงการอัพโหลดเว็บขึ้นบนอินเทอร์เนต็ ทั้งหมด 6 ขั้นตอน ดงั นี้ ขนั ตอนที่ 1 กำหนดโครงรา่ งของเวบ็ ไซต์ ในการสรา้ งเว็บ เราจะเริ่มต้นด้วยการกำหนดผังของเว็บ หรอื เรียกว่า Site Map กอ่ น ดังตวั อย่างเรา มหี น้าเว็บเพจ 6 หน้า จึงกำหนด Site Map ดังรปู

9 ขั้นตอนท่ี 2 กำหนดการเชอื่ มโยงระหว่างเวบ็ เพจ เรากำหนดให้เวบ็ เพจแต่ละหนา้ เช่อื มโยงถงึ กนั เพอื่ ใหก้ ลบั ไปกลับมาระหว่างหนา้ ต่างๆ ได้ โดยจะ แสดงชือ่ ไฟล์ html แต่ละไฟลท์ ม่ี กี ารเชอ่ื มโยงสมั พันธ์กัน ดงั รูป ขั้นตอนท่ี 3 ออกแบบหน้าเวบ็ เพจแตล่ ะหน้าภายในเวบ็ ไซต์ เราสามารถออกแบบเว็บเพจในแตล่ ะหน้าให้สวยงาม เพื่อเตรียมภาพทีจ่ ำเปน็ สำหรับจัดวางบนหน้า เว็บเพจ เช่น การออกบบโลโก้ เพื่อเป็นสัญลักษณ์ให้กบั เว็บไซต์ของเราก่อน จากนั้นจึงทำการออกแบบหนา้ เวบ็ เพจในแต่ละหนา้ ตามลำดบั

10 ขัน้ ตอนที่ 4 สรา้ งเวบ็ เพจแต่ละหน้า เมอ่ื วางรปู แบบของเว็บเพจในแต่ละหน้าแล้ว จากนั้น เราก็ทำการเขียนโปรแกรมภาษา HTML เพ่ือ กำหนดให้แต่ละเว็บเพจนำเสนอข้อความ ภาพ หรือ วีดิโอ ให้อยู่ในรูปแบบตามที่เราต้องการจะนำเสนอ นนั่ เอง ขั้นตอนท่ี 5 ลงทะเบียนขอพน้ื ท่ีเวบ็ ไซตฟ์ รี ห ล ั ง จ า ก อ อ ก แ บ บ แ ล ะ ส ร ้ า ง เ ว ็ บ ไ ซ ต ์ จ น เ ส ร็ จ สมบูรณ์แล้ว ขั้นตอนถัดไปก็คือ การเผยแพร่เว็บไซต์นั้นสู่ เครือข่ายอินเทอร์เน็ต ให้คนอื่นๆสามารถเข้ามาเยี่ยมชม เว็บไซต์ของเราได้ วิธีการก็คือการนำเว็บไซต์ที่เราสร้างขึ้น ไปไว้บนพ้ืนท่ีท่ใี หบ้ ริการ (Web Hosting) ซงึ่ มีท้ังพ้นื ท่ที เ่ี รา ต้องจ่ายค่าบริการ และพ้ืนท่ที ่เี ราสามารถนำเว็บไวต์ไปฝาก ได้ฟรี ในหนังสือเล่มนี้เราได้ขอพื้นที่เว็บไซต์ฟรี เช่น www.000webhost.com/ ขั้นตอนที่ 6 อพั โหลดเวบ็ ไซต์ หลังจากท่ีเราไดส้ รา้ งเว็บไซตจ์ นเสร็จแล้ว ต่อไปเราจะทำการอัพโหลดเว็บไซตด์ ้วยโปรแกรม FileZilla เพื่อให้คนทั่วโลกสามารถดูเว็บไซต์ของ เราไดผ้ า่ นเครอื ข่ายอินเทอร์เนต็ ท่มี า http://dupracha.ac.th/courses/html/?web=00_intro