บทที่ 1 การสร้างเว็บเพจเบื้องต้น

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

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

5. การเงนิ การลงทนุ เปน็ เวบ็ ไซต์ที่นำเสนอข้อมูลทางการเงินและการลงทนุ รวมไปถึงบริการสำหรบั ทำธุรกรรมการเงินออนไลนผ์ ่านเครือขา่ ยอนิ เทอร์เนต็ #เว็บธนาคารทน่ี ำเสนอข้อมลู และบรกิ ารทางการเงิน# 6. ซอื้ ขายสนิ คา้ และบริการเปน็ เวบ็ ไซต์ทส่ี รา้ งขน้ึ ใหเ้ หมือนร้านค้าสำหรบั ขายสนิ คา้ และบริการ ต่างๆ รวมท้งั ยังบริการรบั ฝากขายสนิ ค้าผา่ นรา้ นเหล่านไี้ ดอ้ ีกด้วย #เว็บบรกิ ารซอ้ื ขายสินค้าออนไลน์#

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

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

โปรแกรมทใ่ี ชส้ รา้ งเว็บเพจ โปรแกรมทใ่ี ช้สร้างเว็บเพจ โปรแกรมท่ีใช้ในการสรา้ งเวบ็ เพจ โปรแกรมท่ีใชใ้ นการสรา้ งเว็บเพจมี หลายโปรแกรม ขึ้นอยู่กบั ลกั ษณะการสร้างเว็บเพจ ดงั นี้ 1. โปรแกรมสร้างเว็บเพจดว้ ยการเขียนโคด้ ภาษา HTML โปรแกรม Notepad เปน็ โปรแกรมสร้าง หนา้ เวบ็ เพจด้วยภาษา HTML เป็นโปรแกรมประเภท Text Editor ท่ีถกู ติดต้ัง มาพร้อม กับระบบปฏิบัติการ Microsoft Windows หรือเราอาจจะดาวนโ์ หลดโปรแกรมท่ีอำนวยความสะดวกในการเขยี นโค้ดคำสงั่ มา ติดต้งั เพิ่มเตมิ อย่างเช่นโปรแกรม Edit Plus เปน็ ตน้ 2. โปรแกรมสำเรจ็ รูปในการสร้างเว็บเพจ ปัจจุบันมโี ปรแกรมสำเรจ็ รูปท่ชี ่วยสร้างเว็บไซต์ได้อย่าง ง่ายดาย แคเ่ พ่ิมขอ้ ความและแทรกรูปภาพในตำแหนง่ ที่ตอ้ งการบนหนา้ เวบ็ เพจก็ทำให้เว็บเพจออกมาสวยงาม

ได้ แถมยังมีเครื่องมือที่ชว่ ยจัดวางหน้าเว็บ แทรกลูกเลน่ หรอื ภาพเคลื่อนไหวไดด้ ้วยโปรแกรมท่ีใชส้ รา้ งเว็บไซต์ เช่น Macromedia Dreamweaver, Microsoft FrontPage เป็นต้น ซึ่งโปรแกรมเหลา่ น้ีจะทำการสรา้ งโคด้ HTML ให้อตั โนมัติ หลักการออกแบบเว็บไซต์ การออกแบบเวบ็ ไซต์ที่ดีจะต้องคำนึงถึงขนาดของเวบ็ ไซต์และรูปแบบเว็บไซตเ์ พื่อให้ตรงกบั วตั ถปุ ระสงคใ์ นการสร้างเวบ็ ไซต์ 1. การกำหนดขนาดเว็บไซต์ขนาดของเวบ็ ไซต์ท่ีนิยมในปจั จุบนั 1.1 เว็บไซต์แบบ 1920 X 1080 pixels เปน็ ขนาดทส่ี ามารถใช้ไดก้ ับหนา้ จอทุกขนาดใน ปัจจุบนั เป็นขนาดของการออกแบบเว็บไซตท์ ีใ่ ช้ในอดีต เนื่องจากอดตี ขนาดของจอคอมพวิ เตอร์มีขนาดเล็ก 1.2 เว็บไซต์แบบ 1024 X 768 pixels เปน็ ขนาดทนี่ ยิ มในปัจจุบนั เนื่องจากผูใ้ ช้นิยมใช้ จอคอมพวิ เตอร์ขนาดใหญ่ขน้ึ เน่ืองมาจากราคาจอคอมพิวเตอรท์ ่ีถูกลง 2. รูปแบบการออกแบบเว็บไซต์ เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไมม่ ากนกั ซง่ึ การ ออกแบบหน้าตาเว็บไซต์สว่ นใหญ่จะมองดู องคป์ ระกอบขององค์กร หน่วยงาน หรือเน้ือหาเรอ่ื งทนี่ ำเสนอเป็น หลกั ซ่งึ การออกแบบหนา้ ตาของเวบ็ ไซตม์ ีอยู่ 3 แบบ คือ 2.1. การออกแบบเวบ็ ไซต์ที่เน้นการนำเสนอเน้ือหา เป็นการออกแบบเวบ็ ไซตท์ ่เี น้นการ นำเสนอเน้อื หามากกว่ารูปภาพ โดยโครงสรา้ งใชร้ ปู แบบตารางเปน็ หลกั มีการออกแบบหนา้ ตารูปแบบง่าย เชน่ มเี มนูสารบญั และเน้ือหา 2.2. การออกแบบเว็บไซต์ทเ่ี น้นภาพกราฟกิ เป็นการออกแบบเว็บไซตท์ ่เี น้นภาพกราฟิกที่ สวยงาม ซ่งึ อาจจะใชโ้ ปรแกม Adobe Photoshop สำหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสยี อาจจะใช้เวลาในการโหลดเว็บไซต์นาน

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

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

จากรูปดา้ นบนจะเหน็ วา่ เราได้แบง่ หน้าเว็บเพจออกเปน็ ส่วนๆ โดยเราสามารถแบ่งสว่ นประกอบของหน้าเวบ็ ได้ดังนี้ สว่ นประกอบของหนา้ เวบ็ เพจ สว่ นประกอบของหน้าเว็บเพจท่ีดี จะมีอยดู่ ว้ ยกันท้ังหมด 3 สว่ นหลัก ๆ ดงั น้ี 1. ส่วนหัวของหน้า (Header) เป็นส่วนที่อยู่บนสุดของหน้า มักใส่ภาพกราฟิกเพื่อสร้างความ ประทับใจ เช่นภาพโลโก้ (Logo) เมนูหลักหรือลิงก์ (Navigation Bar) เพื่อเป็นจุดเชื่อมโยงไปสู่เนื้อหาของ เวบ็ ไซต์ในหน้าตอ่ ไป 2. ส่วนของเนื้อหา (Body) เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวาง อยใู่ นส่วนนด้ี ้วย 3. ส่วนท้ายของหน้า (Footer) เป็นส่วนที่อยู่ด้านล่างสุดของหน้า มักวางระบบนำทางที่เป็นลิงค์ ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์ , ข้อความ แสดงลิขสิทธ์ิ, วิธีการติดต่อกับผู้ดแู ลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น โดยปกติส่วนหัวและส่วนท้าย มกั แสดงเหมอื นกนั ในทุกหน้าของเว็บเพจ ขั้นตอนที่ 5 สร้างเว็บเพจในแต่ละหน้าเมื่อได้ทำการออกแบบหน้าเว็บเพจแต่ละหน้าแล้ว ต่อไปคือ ขั้นตอนการสร้างหน้าเว็บเพจตามที่ได้ออกแบบไว้ ด้วยโปรแกรมต่างๆไม่ว่าจะเป็นโปรแกรมประเภท Text Editor เพื่อใช้ในการเขียนชุดคำสั่ง HTML หรือโปรแกรมสำเร็จรูปเพื่อให้แต่ละหน้าเว็บเพจนำเสนอข้อความ รปู ภาพ วดี โี อ และเสียง อยใู่ นรปู แบบตามทต่ี ้องการ ตัวอย่างการสร้างหน้าเวบ็ เพจด้วยโปรแกรม Notepad

ขั้นตอนที่ 6 จดโดเมนเนมและหาพื้นท่ีฝากเวบ็ ไซต์ หลังจากเราสร้างเวบ็ ไซต์เสร็จแล้ว ขั้นตอนต่อไป คือ ทำการต้งั ช่ือเว็บไซต์คือการจดโดเมนเนม และหาทฝ่ี ากเว็บไซต์ ทีเ่ รียกวา่ เว็บโฮสตง้ิ (Web Hosting) ที่มี ทั้งแบบเสียค่าใช้จ่าย และแบบให้พื้นที่ฝากเว็บไซต์ฟรี อย่างเช่นเว็บไซต์ที่ให้บริการฝากเว็บไซต์ฟรี คือ http://www.thcity.com วิธีการให้ทำการสมัครตามขั้นตอนต่างๆบนหน้าเวบ็ เพจ เท่านี้เราก็จะมีชื่อเวบ็ ไซต์ และพ้ืนที่ ฝากเว็บไซตแ์ ลว้ ขั้นตอนที่ 7 อัพโหลดเว็บไซต์หลังจากสมัครบริการพื้นที่ฝากเว็บไซต์แล้ว ขั้นตอนต่อไป คือการอัพ โหลดไฟล์เว็บไซตข์ องเราไปยังเวบ็ ไซต์ท่ีให้บริการพน้ื ทีฝ่ ากเว็บไซต์ผ่านโปรแกรม FTP เช่นโปรแกรม Filezilla แค่น้ที กุ คนทัว่ โลกก็สามารถเปดิ ดูเว็บไซตข์ องเราผ่านระบบเครือข่ายอินเทอร์เน็ตได้แลว้