Download to read offline
1 html
- 1.
- 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 จะรองรับรูปแบบสื่อสารต่างรูปแบบกันได้ทั้งภาพ, เสียง, ข้อความ, วิดีโอและอื่นๆอีกมากมาย
- 6. สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ ก่อนที่จะลงมือเขียนโปรแกรมภาษา HTML เพื่อสร้างเว็บเพจหรือ โฮมเพจ ได้นั้น ต้อง เช็ค ความพร้อม ของอุปกรณ์ เครื่องมือ สาหรับการ สร้าง ก่อนว่า มีครบหรือไม่ ▪ เครื่องคอมพิวเตอร์ ขนาดตั้งแต่ 486 หรือ Pentium ขึ้นไป ▪ หน่วยความจาไม่น้อยกว่า 8 MB ▪ พื้นที่ฮาร์ดดิสก์ขนาดไม่น้อยกว่า 20 MB ▪ Mouse ▪ โปรแกรมในการสร้างเว็บเพจ
- 7. สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ (ต่อ) โปรแกรมทุกตัวต้องติดตั้งลงในฮาร์ดดิสก์เรียบร้อยและอยู่ในสภาพที่พร้อมจะ ใช้งานได้ ตลอดเวลาไฟล์ของโปรแกรม HTML เป็นแท็ก ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คาสั่งต่าง ๆ ลงใน โปรแกรมแล้วเรา จะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น เรา จะไม่สามารถ แสดงผล ได้ ทาง บราวเซอร์ และ ถ้ามีการแก้ไข หรือ เขียนโปรแกรม เราก็สามารถ ใช้โปรแกรมนี้เป็นตัวแก้ไขได้เลย
- 8. การออกแบบเว็บไซต์ 1. แนวคิดในการออกแบบ ▪ ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่างการดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพื่อศึกษาเป็น ตัวอย่างนั้น นับเป็นวิธีการที่ง่ายที่สุด แต่ก็ควรนาไปประยุกต์ใช้ให้เหมาะสมกับเนื้อหา และกลุ่มเป้าหมายของเราด้วย ▪ ศึกษาจากสื่อสิ่งพิมพ์ในรูปแบบต่างๆ สื่อสิ่งพิมพ์ในที่นี้ ได้แก่ แมกกาซีน โปสเตอร์ โฆษณา โบชัวร์ หรือหนังสือบางเล่มที่มีรูปแบบและจุดดึงดูดความสนใจ สามารถ นามาประยุกต์ใช้ในเว็บไซต์ของเราได้เช่นกัน
- 9. การออกแบบเว็บไซต์(ต่อ) 2. การกาหนดขนาดของเว็บเพจ ขนาดของเว็บไซต์ที่นิยมในปัจจุบันมี 2ขนาด คือ ▪ ขนาดเว็บไซต์แบบ 800 X 600 pixels เป็นขนาดที่สามารถใช้ได้กับหน้าจอทุกขนาด ในปัจจุบันเป็นขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากอดีตขนาดของ จอคอมพิวเตอร์มีขนาดเล็ก ▪ ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้ นิยมใช้จอคอมพิวเตอร์ขนาดใหญ่ขึ้นเนื่องมาจากราคาจอคอมพิวเตอร์ที่ถูกลง
- 10. การออกแบบเว็บไซต์(ต่อ) 3. รูปแบบการออกแบบเว็บไซต์ เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไม่มากนัก ซึ่งการออกแบบหน้าตาเว็บไซต์ส่วนใหญ่จะมองดู องค์ประกอบขององค์กรหน่วยงาน หรือเนื้อหาเรื่องที่นาเสนอเป็นหลัก ซึ่งการออกแบบหน้าของเว็บไซต์มีอยู่ 3 แบบ คือ ▪ การออกแบบเว็บไซต์ที่เน้นการนาเสนอเนื้อหา เป็นการออกแบบเว็บไซต์ที่เน้นการนาเสนอเนื้อหามากกว่า รูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบหน้าตารูปแบบง่าย เช่น มีเมนูสารบัญ และ เนื้อหา ▪ การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก เป็นการออกแบบเว็บไซต์ที่เน้นภาพกราฟิกที่สวยงาม ซึ่งอาจจะใช้ โปรแกรม Photoshop สาหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้เวลาในการโหลดเว็บ นาน ▪ การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา เป็นการออกแบบเว็บที่นิยมในปัจจุบันซึ่งประกอบด้วยข้อความ รูปภาพ โดยมีการจัดองค์ประกอบต่าง ๆ เพื่อให้เว็บน่าสนใจ
- 11. การออกแบบเว็บไซต์(ต่อ) 4. การออกแบบโครงสร้างเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ คือการวางแผนการจัดลาดับ เนื้อหาสาระ ของเว็บไซต์ ออกเป็นหมวดหมู่ เพื่อจัดทาเป็นโครงสร้างในการจัดวางหน้าเว็บเพจ ทั้งหมด เปรียบเสมือนแผนที่ ที่ทาให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยในนัก ออกแบบเว็บไซต์ไม่ให้หลงทาง การจัดโครงสร้างของเว็บไซต์ มีจุดมุ่งหมายสาคัญคือ การที่จะทาให้ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูลในเว็บเพจได้อย่างเป็นระบบ ซึ่งถือว่า เป็นขั้นตอนที่สาคัญ ที่สามารถสร้างความสาเร็จให้กับผู้ที่ทาหน้าที่ในการออกแบบและ พัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสร้างหรือจัดระเบียบของข้อมูลที่ ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานและง่าย ต่อการเข้าอ่านเนื้อหาของผู้ใช้เว็บไซต์
- 12. การออกแบบเว็บไซต์(ต่อ) หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้ ▪ กาหนดวัตถุประสงค์โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์นี้ทาเพื่ออะไร ▪ ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้างต้องการสื่อสาร ข้อมูลอะไรที่พวกเขาต้องการโดย ขั้นตอนนี้ควรปฏิบัติควบคู่ไปกับขั้นตอนที่หนึ่ง ▪ วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัดโครงสร้างหรือจัดระเบียบ ข้อมูลที่ชัดเจน การที่เนื้อหามี ความต่อเนื่องไปไม่สิ้นสุดหรือกระจายมากเกินไป อาจทาให้เกิดความสับสนต่อผู้ใช้ได้ ฉะนั้นจึงควรออกแบบให้มีลักษณะที่ชัดเจนแยกย่อยออกเป็นส่วนต่าง ๆ จัดหมวดหมู่ในเรื่องที่สัมพันธ์กัน รวมทั้งอาจมี การแสดงให้ผู้ใช้เห็นแผนที่โครงสร้างเพื่อป้องกันความสับสนได้ ▪ กาหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผู้ใช้ควรทา อะไรบ้าง จานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด ▪ หลังจากนั้น จึงทาการสร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้อผิดพลาดและทาการแก้ไขปรับปรุง แล้วจึงนาเข้าสู่ เครือข่ายอินเทอร์เน็ตเป็นขั้นสุดท้าย
- 13. การออกแบบเว็บไซต์(ต่อ) 5. องค์ประกอบที่ดีของการออกแบบเว็บไซต์ ▪ โครงสร้างที่ชัดเจนผู้ออกแบบเว็บไซต์ควรจัดโครงสร้างหรือจัดระเบียบของข้อมูลที่ ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่สัมพันธ์กันและให้อยู่ในมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานและง่าย ต่อการอ่านเนื้อหาของผู้ใช้ ▪ การใช้งานที่ง่าย ลักษณะของเว็บที่มีการใช้งานง่ายจะช่วยให้ผู้ใช้รู้สึกสบายใจต่อการอ่าน และสามารถทาความเข้าใจกับเนื้อหาได้อย่างเต็มที่ โดยไม่ต้องมาเสียเวลาอยู่กับการทา ความเข้าใจด้วยเหตุนี้ผู้ออกแบบจึงควรกาหนดปุ่มการใช้งานที่ชัดเจน เหมาะสม โดยเฉพาะปุ่มควบคุมเส้นทางการเข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอย หลัง หากเป็นเว็บไซต์ที่มีเว็บเพจจานวนมาก ควรจะจัดทาแผนผังของเว็บไซต์ (Site Map) ที่ช่วยให้ผู้ใช้ทราบว่า ตอนนี้อยู่ ณ จุดใด หรือเครื่องมือสืบค้น (Search Engine) ที่ช่วยในการค้นหาหน้าที่ที่ต้องการ
- 14. การออกแบบเว็บไซต์(ต่อ) ▪ การเชื่อมโยงที่ดี ลักษณะไฮเปอร์เท็กซ์ที่ใช้ในการเชื่อมโยงควรอยู่ในรูปแบบที่เป็น มาตรฐาน ทั่วไปและต้องระวังเรื่องของตาแหน่งในการเชื่อมโยง การที่จานวนการ เชื่อมโยงมากและกระจัดกระจายอยู่ทั่วไปในหน้าอาจก่อให้เกิดความสับสน นอกจากนี้คา ที่ใช้สาหรับการเชื่อมโยงจะต้องเข้าใจง่ายมีความชัดเจนและไม่สั้นจนเกินไป นอกจากนี้ใน แต่ละเว็บเพจที่สร้างขึ้นมาควรมี จุดเชื่อมโยงกลับมายังหน้าแรกของเว็บไซต์ที่กาลังใช้ งานอยู่ด้วย ทั้งนี้เผื่อว่าผู้ใช้เกิดหลงทาง และไม่ทราบว่าจะทาอย่างต่อไปดีจะได้มีหนทาง กลับมาสู่จุดเริ่มต้นใหม่ ระวังอย่าให้มีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) เพราะจะ ทาให้ผู้ใช้ไม่รู้จะทาอย่างไรต่อไป
- 15. การออกแบบเว็บไซต์(ต่อ) ▪ ความเหมาะสมในหน้าจอ เนื้อหาที่นาเสนอในแต่ละหน้าจอควรสั้นกระชับ และทันสมัย หลีกเลี่ยงการใช้หน้าจอที่มีลักษณะการเลื่อนขึ้นลง (Scrolling) แต่ถ้าจาเป็นต้องมี ควร จะให้ข้อมูลที่มี ความสาคัญอยู่บริเวณด้านบนสุดของหน้าจอ หลีกเลี่ยงการใช้กราฟิก ด้านบนของหน้าจอ เพราะถึงแม้จะดูสวยงาม แต่จะทาให้ผู้ใช้เสียเวลาในการได้รับข้อมูล ที่ต้องการ แต่หากต้องมีการใช้ภาพประกอบก็ควรใช้เฉพาะที่มีความสัมพันธ์กับเนื้อหา เท่านั้น นอกจากนี้การใช้รูปภาพเพื่อเป็นพื้นหลัง (Background) ไม่ควรเน้นสีสันที่ฉูดฉาด มากนัก เพราะอาจจะไปลดความเด่นชัดของเนื้อหาลง ควรใช้ภาพที่มีสีอ่อน ๆ ไม่สว่าง จนเกินไปรวมไปถึงการใช้เทคนิคต่าง ๆ เช่น ภาพเคลื่อนไหว หรือตัวอักษรวิ่ง (Marquees) ซึ่งอาจจะเกิดการรบกวนการอ่านได้ ควรใช้เฉพาะที่จาเป็นจริง ๆ เท่านั้น ตัวอักษรที่นามาแสดงบนจอภาพควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันและลวดลายมาก เกินไป
- 16. การออกแบบเว็บไซต์(ต่อ) ▪ ความรวดเร็ว ความรวดเร็วเป็นสิ่งสาคัญประการหนึ่งที่ส่งผลต่อการเรียนรู้ผู้ใช้จะเกิด อาการเบื่อหน่ายและหมดความสนใจกับเว็บที่ใช้เวลาในการแสดงผลนาน สาเหตุสาคัญที่ จะทาให้การแสดงผลนานคือการใช้ภาพกราฟิกหรือภาพเคลื่อนไหว ซึ่งแม้ว่าจะช่วยดึงดูด ความสนใจได้ดี ฉะนั้นในการออกแบบจึงควรหลีกเลี่ยงการใช้ภาพขนาดใหญ่ หรือ ภาพเคลื่อนไหวที่ไม่จาเป็น และพยายามใช้กราฟิกแทนตัวอักษรธรรมดาให้น้อยที่สุด โดย ไม่ควรใช้มากเกินกว่า 2 – 3 บรรทัดในแต่ละหน้าจอ
- 17. โครงสร้างของเว็บไซต์ 1. เว็บที่มีโครงสร้างแบบเรียงลาดับ (SequentialStructure) เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่ นิยม จัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราวตามลาดับของเวลา เช่น การเรียงลาดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทางของ การเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดาเนินเรื่องในลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการกาหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้ คือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ ทาให้เสียเวลาเข้าสู่เนื้อ
- 18.
- 19. โครงสร้างของเว็บไซต์(ต่อ) 2. เว็บที่มีโครงสร้างแบบลาดับขั้น (HierarchicalStructure) เป็นวิธีที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา ออกเป็นส่วนต่างๆ และมีรายละเอียดย่อยๆ ในแต่ละส่วนลดหลั่นกันมาในลักษณะแนวคิด เดียวกับ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทาความเข้าใจกับโครงสร้างของเนื้อหาใน เว็บลักษณะนี้ ลักษณะเด่นเฉพาะของ เว็บประเภทนี้คือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหา ในลักษณะเป็นลาดับจากบนลงล่าง
- 20.
- 21. โครงสร้างของเว็บไซต์(ต่อ) 3. เว็บที่มีโครงสร้างแบบตาราง (GridStructure) โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่น ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน เหมาะแก่ การแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็น ลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้
- 22. โครงสร้างของเว็บไซต์(ต่อ) ในการจัดระบบโครงสร้างแบบนี้ เนื้อหาที่นามาใช้แต่ละส่วนควรมีลักษณะที่เหมือนกัน และ สามารถใช้รูปแบบร่วมกันหลักการออกแบบคือนาหัวข้อทั้งหมดมาบรรจุลงในที่ เดียวกันซึ่ง จะเป็นหน้าแผนภาพ (Map Page) ที่แสดงในลักษณะเดียวกับโครงสร้างของ เว็บ เมื่อคลิกเลือก หัวข้อใด ก็จะเข้าไปสู่หน้าเนื้อหา (Topic Page) ที่แสดงรายละเอียด ของหัวข้อนั้นๆ และภายในหน้านั้น ก็จะมีการเชื่อมโยงไปยังหน้ารายละเอียดของหัวข้ออื่นที่ เป็นเรื่องเดียวกัน นอกจากนี้ยังสามารถนา โครงสร้างแบบเรียงลาดับและแบบลาดับขั้นมา ใช้ร่วมกันได้อีกด้วย ถึงแม้โครงสร้างแบบนี้ อาจจะสร้างความยุ่งยากในการเข้าใจได้ และ อาจเกิดปัญหาการคงค้าง ของหัวข้อ (Cognitive Overhead) ได้ แต่จะเป็นประโยชน์ที่สุด เมื่อผู้ใช้ได้เข้าใจถึงความสัมพันธ์ ระหว่างเนื้อหา ในส่วนของการออกแบบจาเป็นจะต้องมี การวางแผนที่ดี เนื่องจากมีการเชื่อมโยงที่เกิดขึ้น ได้หลายทิศทาง นอกจากนี้การปรับปรุง แก้ไขอาจเกิดความยุ่งยากเมื่อต้องเพิ่มเนื้อหาในภายหลัง
- 23.
- 24. โครงสร้างของเว็บไซต์(ต่อ) 4. เว็บที่มีโครงสร้างแบบใยแมงมุม (WebStructure) โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกัน ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกาหนดวิธีการเข้าสู่ เนื้อหาได้ด้วย ตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จากัดเฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถเชื่อมโยงออก ไปสู่เนื้อหาจากเว็บภายนอกได้
- 25.
- 26. คาสั่งเริ่มต้น คาสั่งเริ่มต้นหรือ Tag ที่ใช้ในภาษาHTML ประกอบไปด้วยเครื่องหมายน้อยกว่า < ตาม ด้วย ชื่อคาสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า > เป็นส่วนที่ทาหน้าที่ตกแต่งข้อความ เพื่อการแสดงผลข้อมูลโดยทั่วไปคาสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบางคาสั่ง เท่านั้นมี่มีรูปแบบคาสั่งอยู่เพียงตัวเดียวในแต่ละคาสั่ง จะมีคาสั่งเปิดและคาสั่งปิด คาสั่ง ปิดของแต่ละคาสั่งจะมีรูปแบบเหมือนคาสั่งเปิดเพียงแต่จะเพิ่ม /(Slash) นาหน้าคาสั่งปิด ให้ดูแตกต่างเท่านั้นและในคาสั่งเปิดบางคาสั่งอาจมีส่วนขยายอื่นผสมอยู่ด้วยในการเขียน ด้วยตัวอักษรเล็กหรือใหญ่ทั้งหมดหรือเขียนปนกันกฌได้ไม่มีผลอะไร
- 27. คาสั่งเริ่มต้น (ต่อ) คาสั่งเริ่มต้นของเอกสาร HTML <HTML>..........</HTML> คาสั่ง<HTML> เป็นคาสั่งเริ่มต้นในการเขียนโปรแกรมและคาสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คาสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้อง เขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
- 28. คาสั่งเริ่มต้น (ต่อ) คาสั่งเริ่มต้นของเอกสาร HTML <HEAD>..........</HEAD> HeadSection เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทาเว็บ (Author), คีย์เวิร์ดสาหรับการค้นหา (Keyword) โดยมี Tag สาคัญ คือ TITLE
- 29. คาสั่งเริ่มต้น (ต่อ) คาสั่งเริ่มต้นของเอกสาร HTML <TITLE>..........</TITLE> ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุมถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคาสาคัญในการค้นหา (Keyword)
- 30. คาสั่งเริ่มต้น (ต่อ) คาสั่งเริ่มต้นของเอกสาร HTML <BODY>..........</BODY> BodySection เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จานวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทางานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนาเสนอ การป้อนคาสั่งในส่วนนี้ ไม่มีข้อจากัด สามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คาสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทาย่อหน้าในชุดคาสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคาสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>