1 html
- 2. ▪ ความหมายของ HTML
▪ สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ
▪ การออกแบบเว็บไซต์
▪ โครงสร้างของเว็บไซต์
▪ คาสั่งเริ่มต้น
หัวข้อในการนาเสนอ
- 3. ความหมายของ HTML
▪HTML ย่อมาจากคาว่า “Hyper Text Markup Language” ซึ่งเป็นรหัสในการสร้าง
เว็บเพจ ใช้ในการนิยามตาแหน่งและรายละเอียดของส่วนต่างๆบน Web Page
(หรือเอกสารที่เป็น Hypertext อื่นๆ) โดยเอกสารที่สร้างด้วย HTML อาจจะ
ประกอบไปด้วย ข้อความทั่วไป (Text),รูปแบบของข้อความ เช่น ลักษณะตัวอักษร
เข้ม, ตัวเอน,รูปภาพและส่วนประกอบที่สาคัญอื่นๆ เมื่อเข้าสู่ Web page เมื่อใด
Web browser (เช่น Firefox, IE หรือ Web Browser อื่นๆ) จะทาหน้าที่อ่าน
เอกสารที่สร้าง HTML ทาการแปลงคาสั่งต่างๆ ที่กาหนดไว้ และแสดงผลลัพธ์ให้
เห็นบน Web Page ที่อยู่บนจอภาพ
- 4. ความหมายของ HTML (ต่อ)
▪HTML เป็นภาษาคอมพิวเตอร์ที่เป็นมาตรฐาน และเป็นอิสระไม่มีบริษัทใดบริษัท
หนึ่งเป็นเจ้าของโดยเฉพาะ เช่น ถ้าเราใช้ฟอร์แมต .DOC ของไมโครซอฟท์ เพื่อจะ
เป็นเจ้าของซอฟต์แวร์ก่อน
▪HTML ได้รวมเอาคุณสมบัติของ “ไฮเปอร์เท็กซ์ (Hypertext)” เข้าไว้ด้วยกัน และ
เป็นหัวใจหลักประการหนึ่งของ HTML เลยทีเดียว บนเว็บเพจนั้นเราจะทราบได้
ทันทีว่าข้อความที่สามารถคลิกได้จะพาไปสู่เนื้อหาอื่นๆบนเว็บเพจได้ซึ่งง่ายต่อการ
สื่อความกัน
- 5. ความหมายของ HTML (ต่อ)
▪HTML รองรับระบบมัลติมีเดียได้ (Multimedia) ได้ เป็นอีกเหตุผลหนึ่งสาหรับการ
ใช้ HTML เราจะรู้ว่าการใช้งานระบบมัลติมีเดียได้อย่างไรนั้นคือสิ่งที่ทาให้เว็บมี
ความแตกต่างไปจากสื่อกลางการสื่อสารอื่นๆ เช่นหนังสือพิมพ์ จดหมาย
อิเล็กทรอนิกส์ เพราะ HTML จะรองรับรูปแบบสื่อสารต่างรูปแบบกันได้ทั้งภาพ,
เสียง, ข้อความ, วิดีโอและอื่นๆอีกมากมาย
- 8. การออกแบบเว็บไซต์
1. แนวคิดในการออกแบบ
▪ ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่าง การดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพื่อศึกษาเป็น
ตัวอย่างนั้น นับเป็นวิธีการที่ง่ายที่สุด แต่ก็ควรนาไปประยุกต์ใช้ให้เหมาะสมกับเนื้อหา
และกลุ่มเป้าหมายของเราด้วย
▪ ศึกษาจากสื่อสิ่งพิมพ์ในรูปแบบต่างๆ สื่อสิ่งพิมพ์ในที่นี้ ได้แก่ แมกกาซีน โปสเตอร์
โฆษณา โบชัวร์ หรือหนังสือบางเล่มที่มีรูปแบบและจุดดึงดูดความสนใจ สามารถ
นามาประยุกต์ใช้ในเว็บไซต์ของเราได้เช่นกัน
- 11. การออกแบบเว็บไซต์(ต่อ)
4. การออกแบบโครงสร้างเว็บไซต์
การออกแบบโครงสร้างเว็บไซต์ คือ การวางแผนการจัดลาดับ เนื้อหาสาระ
ของเว็บไซต์ ออกเป็นหมวดหมู่ เพื่อจัดทาเป็นโครงสร้างในการจัดวางหน้าเว็บเพจ
ทั้งหมด เปรียบเสมือนแผนที่ ที่ทาให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยในนัก
ออกแบบเว็บไซต์ไม่ให้หลงทาง การจัดโครงสร้างของเว็บไซต์ มีจุดมุ่งหมายสาคัญคือ
การที่จะทาให้ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่างเป็นระบบ ซึ่งถือว่า
เป็นขั้นตอนที่สาคัญ ที่สามารถสร้างความสาเร็จให้กับผู้ที่ทาหน้าที่ในการออกแบบและ
พัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่
ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน
จะช่วยให้น่าใช้งานและง่าย ต่อการเข้าอ่านเนื้อหาของผู้ใช้เว็บไซต์
- 12. การออกแบบเว็บไซต์(ต่อ)
หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้
▪ กาหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์นี้ทาเพื่ออะไร
▪ ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้างต้องการสื่อสาร ข้อมูลอะไรที่พวกเขาต้องการโดย
ขั้นตอนนี้ควรปฏิบัติควบคู่ไปกับขั้นตอนที่หนึ่ง
▪ วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัดโครงสร้างหรือจัดระเบียบ
ข้อมูลที่ชัดเจน การที่เนื้อหามี ความต่อเนื่องไปไม่สิ้นสุดหรือกระจายมากเกินไป อาจทาให้เกิดความสับสนต่อผู้ใช้ได้
ฉะนั้นจึงควรออกแบบให้มีลักษณะที่ชัดเจนแยกย่อยออกเป็นส่วนต่าง ๆ จัดหมวดหมู่ในเรื่องที่สัมพันธ์กัน รวมทั้งอาจมี
การแสดงให้ผู้ใช้เห็นแผนที่โครงสร้างเพื่อป้องกันความสับสนได้
▪ กาหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผู้ใช้ควรทา
อะไรบ้าง จานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด
▪ หลังจากนั้น จึงทาการสร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้อผิดพลาดและทาการแก้ไขปรับปรุง แล้วจึงนาเข้าสู่
เครือข่ายอินเทอร์เน็ตเป็นขั้นสุดท้าย
- 13. การออกแบบเว็บไซต์(ต่อ)
5. องค์ประกอบที่ดีของการออกแบบเว็บไซต์
▪ โครงสร้างที่ชัดเจน ผู้ออกแบบเว็บไซต์ควรจัดโครงสร้างหรือจัดระเบียบของข้อมูลที่
ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน
จะช่วยให้น่าใช้งานและง่าย ต่อการอ่านเนื้อหาของผู้ใช้
▪ การใช้งานที่ง่าย ลักษณะของเว็บที่มีการใช้งานง่ายจะช่วยให้ผู้ใช้รู้สึกสบายใจต่อการอ่าน
และสามารถทาความเข้าใจกับเนื้อหาได้อย่างเต็มที่ โดยไม่ต้องมาเสียเวลาอยู่กับการทา
ความเข้าใจด้วยเหตุนี้ผู้ออกแบบจึงควรกาหนดปุ่มการใช้งานที่ชัดเจน เหมาะสม
โดยเฉพาะปุ่มควบคุมเส้นทางการเข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอย
หลัง หากเป็นเว็บไซต์ที่มีเว็บเพจจานวนมาก ควรจะจัดทาแผนผังของเว็บไซต์ (Site
Map) ที่ช่วยให้ผู้ใช้ทราบว่า ตอนนี้อยู่ ณ จุดใด หรือเครื่องมือสืบค้น (Search Engine)
ที่ช่วยในการค้นหาหน้าที่ที่ต้องการ
- 14. การออกแบบเว็บไซต์(ต่อ)
▪ การเชื่อมโยงที่ดี ลักษณะไฮเปอร์เท็กซ์ที่ใช้ในการเชื่อมโยง ควรอยู่ในรูปแบบที่เป็น
มาตรฐาน ทั่วไปและต้องระวังเรื่องของตาแหน่งในการเชื่อมโยง การที่จานวนการ
เชื่อมโยงมากและกระจัดกระจายอยู่ทั่วไปในหน้าอาจก่อให้เกิดความสับสน นอกจากนี้คา
ที่ใช้สาหรับการเชื่อมโยงจะต้องเข้าใจง่ายมีความชัดเจนและไม่สั้นจนเกินไป นอกจากนี้ใน
แต่ละเว็บเพจที่สร้างขึ้นมาควรมี จุดเชื่อมโยงกลับมายังหน้าแรกของเว็บไซต์ที่กาลังใช้
งานอยู่ด้วย ทั้งนี้เผื่อว่าผู้ใช้เกิดหลงทาง และไม่ทราบว่าจะทาอย่างต่อไปดีจะได้มีหนทาง
กลับมาสู่จุดเริ่มต้นใหม่ ระวังอย่าให้มีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) เพราะจะ
ทาให้ผู้ใช้ไม่รู้จะทาอย่างไรต่อไป
- 15. การออกแบบเว็บไซต์(ต่อ)
▪ ความเหมาะสมในหน้าจอ เนื้อหาที่นาเสนอในแต่ละหน้าจอควรสั้น กระชับ และทันสมัย
หลีกเลี่ยงการใช้หน้าจอที่มีลักษณะการเลื่อนขึ้นลง (Scrolling) แต่ถ้าจาเป็นต้องมี ควร
จะให้ข้อมูลที่มี ความสาคัญอยู่บริเวณด้านบนสุดของหน้าจอ หลีกเลี่ยงการใช้กราฟิก
ด้านบนของหน้าจอ เพราะถึงแม้จะดูสวยงาม แต่จะทาให้ผู้ใช้เสียเวลาในการได้รับข้อมูล
ที่ต้องการ แต่หากต้องมีการใช้ภาพประกอบก็ควรใช้เฉพาะที่มีความสัมพันธ์กับเนื้อหา
เท่านั้น นอกจากนี้การใช้รูปภาพเพื่อเป็นพื้นหลัง (Background) ไม่ควรเน้นสีสันที่ฉูดฉาด
มากนัก เพราะอาจจะไปลดความเด่นชัดของเนื้อหาลง ควรใช้ภาพที่มีสีอ่อน ๆ ไม่สว่าง
จนเกินไปรวมไปถึงการใช้เทคนิคต่าง ๆ เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง
(Marquees) ซึ่งอาจจะเกิดการรบกวนการอ่านได้ ควรใช้เฉพาะที่จาเป็นจริง ๆ เท่านั้น
ตัวอักษรที่นามาแสดงบนจอภาพควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันและลวดลายมาก
เกินไป
- 17. โครงสร้างของเว็บไซต์
1. เว็บที่มีโครงสร้างแบบเรียงลาดับ (Sequential Structure)
เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่
นิยม จัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราวตามลาดับของเวลา เช่น
การเรียงลาดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้
เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทางของ
การเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดาเนินเรื่องในลักษณะเส้นตรง โดยมี
ปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการกาหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้
คือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ ทาให้เสียเวลาเข้าสู่เนื้อ
- 19. โครงสร้างของเว็บไซต์(ต่อ)
2. เว็บที่มีโครงสร้างแบบลาดับขั้น (Hierarchical Structure)
เป็นวิธีที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา
ออกเป็นส่วนต่างๆ และมีรายละเอียดย่อยๆ ในแต่ละส่วนลดหลั่นกันมาในลักษณะแนวคิด
เดียวกับ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทาความเข้าใจกับโครงสร้างของเนื้อหาใน
เว็บลักษณะนี้ ลักษณะเด่นเฉพาะของ เว็บประเภทนี้คือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว
นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหา ในลักษณะเป็นลาดับจากบนลงล่าง
- 21. โครงสร้างของเว็บไซต์(ต่อ)
3. เว็บที่มีโครงสร้างแบบตาราง (Grid Structure)
โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่น
ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน
เหมาะแก่ การแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็น
ลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้
- 22. โครงสร้างของเว็บไซต์(ต่อ)
ในการจัดระบบโครงสร้างแบบนี้ เนื้อหาที่นามาใช้แต่ละส่วนควรมีลักษณะที่เหมือนกัน
และ สามารถใช้รูปแบบร่วมกัน หลักการออกแบบคือนาหัวข้อทั้งหมดมาบรรจุลงในที่
เดียวกันซึ่ง จะเป็นหน้าแผนภาพ (Map Page) ที่แสดงในลักษณะเดียวกับโครงสร้างของ
เว็บ เมื่อคลิกเลือก หัวข้อใด ก็จะเข้าไปสู่หน้าเนื้อหา (Topic Page) ที่แสดงรายละเอียด
ของหัวข้อนั้นๆ และภายในหน้านั้น ก็จะมีการเชื่อมโยงไปยังหน้ารายละเอียดของหัวข้ออื่นที่
เป็นเรื่องเดียวกัน นอกจากนี้ยังสามารถนา โครงสร้างแบบเรียงลาดับและแบบลาดับขั้นมา
ใช้ร่วมกันได้อีกด้วย ถึงแม้โครงสร้างแบบนี้ อาจจะสร้างความยุ่งยากในการเข้าใจได้ และ
อาจเกิดปัญหาการคงค้าง ของหัวข้อ (Cognitive Overhead) ได้ แต่จะเป็นประโยชน์ที่สุด
เมื่อผู้ใช้ได้เข้าใจถึงความสัมพันธ์ ระหว่างเนื้อหา ในส่วนของการออกแบบจาเป็นจะต้องมี
การวางแผนที่ดี เนื่องจากมีการเชื่อมโยงที่เกิดขึ้น ได้หลายทิศทาง นอกจากนี้การปรับปรุง
แก้ไขอาจเกิดความยุ่งยากเมื่อต้องเพิ่มเนื้อหาในภายหลัง
- 24. โครงสร้างของเว็บไซต์(ต่อ)
4. เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกัน
ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกาหนดวิธีการเข้าสู่
เนื้อหาได้ด้วย ตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์
(Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย
โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured)
นอกจากนี้การเชื่อมโยงไม่ได้จากัดเฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถเชื่อมโยงออก
ไปสู่เนื้อหาจากเว็บภายนอกได้
- 26. คาสั่งเริ่มต้น
คาสั่งเริ่มต้นหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า < ตาม
ด้วย ชื่อคาสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า > เป็นส่วนที่ทาหน้าที่ตกแต่งข้อความ
เพื่อการแสดงผลข้อมูลโดยทั่วไปคาสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบางคาสั่ง
เท่านั้นมี่มีรูปแบบคาสั่งอยู่เพียงตัวเดียวในแต่ละคาสั่ง จะมีคาสั่งเปิดและคาสั่งปิด คาสั่ง
ปิดของแต่ละคาสั่งจะมีรูปแบบเหมือนคาสั่งเปิดเพียงแต่จะเพิ่ม /(Slash) นาหน้าคาสั่งปิด
ให้ดูแตกต่างเท่านั้นและในคาสั่งเปิดบางคาสั่งอาจมีส่วนขยายอื่นผสมอยู่ด้วยในการเขียน
ด้วยตัวอักษรเล็กหรือใหญ่ทั้งหมดหรือเขียนปนกันกฌได้ไม่มีผลอะไร
- 30. คาสั่งเริ่มต้น (ต่อ)
คาสั่งเริ่มต้นของเอกสาร HTML
<BODY>..........</BODY>
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag
จานวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์
ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทางานหลักของหน้าเว็บ ประกอบด้วย Tag
มากมายตามลักษณะของข้อมูล ที่ต้องการนาเสนอ การป้อนคาสั่งในส่วนนี้ ไม่มีข้อจากัด
สามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คาสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย
คือ การทาย่อหน้าในชุดคาสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคาสั่งทั้งหมดภายใต้ Tag
<BODY> … </BODY>
