บทที่ 10 การเขียนเว็บเพจด้วยภาษา HTML

การเขียนเว็บเพจด้วยภาษา HTML

1.เว็บเพจคืออะไร
เว็บเพจ (อังกฤษ: web page, webpage) หรือแปลเป็นไทยว่า หน้าเว็บ คือเอกสารเว็บชนิดหนึ่งเหมาะสำหรับเวิลด์ไวด์เว็บและเว็บเบราว์เซอร์ เว็บเบราว์เซอร์จะแสดงเว็บเพจบนจอคอมพิวเตอร์หรืออุปกรณ์เคลื่อนที่ เว็บเพจก็คือสิ่งที่ปรากฏออกมา แต่ศัพท์นี้ก็ยังหมายถึงแฟ้มคอมพิวเตอร์ที่มักจะเขียนเป็นเอชทีเอ็มแอลหรือภาษามาร์กอัปที่เทียบเคียงได้ ซึ่งมีลักษณะเด่นอันเป็นหลักก็คือ การจัดเตรียมข้อความหลายมิติที่จะนำไปสู่ เว็บเพจอื่น ผ่านทางลิงก์ เว็บเบราว์เซอร์จะประสานงานกับทรัพยากรเว็บที่อยู่โดยรอบเว็บเพจที่เขียน อาทิสไตล์ชีต สคริปต์ และรูปภาพ เพื่อนำเสนอเว็บเพจนั้น

2.เว็บเพจทำงานได้อย่างไร

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

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

2. ฝั่งเซิร์ฟเวอร์จะทำการค้นหาไฟล์เว็บเพจตัวที่ถูกร้องขอ

3. เว็บเซิร์ฟเวอร์ส่งข้อมูลไปยังเครื่องผู้ใช้และแสดงผลบนบราวเซอร์

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

3.โปรแกรมที่ใช้สร้างเว็บเพจ

โปรแกรมที่ใช้ในการสร้างเว็บเพจมีหลายโปรแกรม ขึ้นอยู่กับลักษณะการสร้างเว็บเพจ ดังนี้

1. โปรแกรมสร้างเว็บเพจด้วยการเขียนโค้ดภาษา HTML

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

2. โปรแกรมสำเร็จรูปในการสร้างเว็บเพจ

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

4.หลักการออกแบบเว็บไซต์

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

1. การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหา

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

2. การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก

เป็นการออกแบบเว็บไซต์ที่เน้นภาพกราฟิกที่สวยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop สำหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้เวลาในการโหลดเว็บนาน

3.การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา

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

5.กระบวนการพัฒนาเว็บไซต์

แนวทางหลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์

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

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

การเตรียมสิ่งต่าง ๆ ที่จำเป็น ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำหรับสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น

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

· โครงสร้างและสารบัญของเว็บไซต์

· การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation)

· องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ

· การกำหนดรูปแบบและลักษณะของเว็บเพจ

· การกำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์

· การบริการเสริมต่าง ๆ

· การออกแบบเว็บไซต์ นับเป็นขั้นตอนในการออกแบบรูปร่าง  โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือPhotoshop หรือ Fireworks ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น<![endif]>

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