วิชาการสร้างเว็บไซต์

คาํนํา หนังสือเรียนวิชา การสร้างเว็บไซต์รหัสวิชา 20204-2008 เล่มนี้เรียบเรียงขึ้นเพื่อใช้ประกอบการเรียน การสอนที่เน้นผู้เรียนเป็นสําคัญตามหลักสูตรประกาศนียบัตรวิชาชีพ (ปวช.) พุทธศักราช 2562 นักงาน คณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธิการ เนื้อหาของหนังสือมีด้วยกันทั้งหมด 13 หน่วยการเรียน ประกอบด้วย (1) กระบวนการ และโครงสร้าง การทํางานของเว็บไซต์(2) การออกแบบเว็บไซต์(3) พื้นฐานภาษา HTML (4) การ จัดการข้อความในเว็บเพจ (5) การแทรกรูปภาพในเว็บเพจ (6) การแทรกตาราง (7) การเชื่อมโยง (Link) (8) การแบ่งหน้าเว็บเพจด้วย เฟรม (Frame) (9) Cascading Style Sheets (CSS) (10) การสร้างแบบฟอร์ม (11) การใช้โปรแกรมกราฟิก เสริมในการออกแบบสร้างเว็บไซต์(12) การอัพ โหลด (Upload) เว็บไซต์และ (13) ความรู้เบื้องต้นเกี่ยวกับ ATVLS พร้อมทั้งแบบฝึกหัด ใบงาน และแบบทดสอบหลังเรียน เพื่อให้ผู้เรียนให้ฝึกทักษะในสถานการณ์ต่าง ๆ มีทักษะการคิดและ แก้ไขปัญหา และบูรณาการการทํางานตามสาขาอาชีพต่าง ๆ ต่อไป ผู้เรียบเรียงและฝ่ายวิชาการ ศูนย์หนังสือ เมืองไทย หวังเป็นอย่างยิ่งว่า หนังสือเรียนวิชา การสร้าง เว็บไซต์เล่มนี้จะสามารถให้ความรู้และเกิดประโยชน์แก่ผู้สอน ผู้เรียน ตลอดจนผู้สนใจ ศึกษาทั่วไปเป็นอย่าง หากมีข้อผิดพลาดประการใด ผู้เรียบเรียงและฝ่ายวิชาการ ศูนย์หน้า เมืองไทยขอน้อมรับค่า ชมเพื่อเป็น ประโยชน์ในการปรับปรุงแก้ไขในโอกาสต่อไป

หลักสูตรประกาศนียบัตร วิชาชีพ พุทธศักราช 2562 ของสํานักงานคณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธิการ รหัสวิชา 20204-2088 ชื่อวิชา การสร้างเว็บไซต์ท-ป-น 2-2-3 จุดประสงค์รายวิชา เพื่อให้1. เข้าใจเกี่ยวกับกระบวนการและโครงสร้างการทํางานของเว็บไซต์2. เข้าใจโครงสร้างและไวยากรณ์ของโปรแกรมภาษาหรือกระบวนการใช้เครื่องมือการ สร้างเว็บไซต์3. เข้าใจหลักการออกแบบและกําหนดส่วนประกอบที่จําเป็นของเว็บเพจ 4. สามารถ ติดตั้งโปรแกรมจําลอง Web Server หรืออัพโหลด (Upload) เว็บไซต์5. สามารถใช้โปรแกรมภาษาหรือโปรแกรมสําเร็จรูปหรือโปรแกรมระบบ CMS สําหรับ การออกแบบและสร้างเว็ปไซต์6. มีเจตคติและกิจนิสัยที่ดีในการปฏิบัติงานคอมพิวเตอร์ด้วยความละเอียดรอบคอบ และ ถูกต้อง สมรรถนะรายวิชา 1. แสดงความรู้เกี่ยวกับกระบวนการโครงสร้างการทํางานและไวยากรณ์ของโปรแกรม ภาษาในการสร้าง 2. ประยุกต์ใช้โปรแกรมภาษาหรือโปรแกรมสําเร็จรูปหรือโปรแกรมระบบ CMS สําหรับ การออกแบบและสร้างเว็บไซต์3. ติดตั้งโปรแกรมจําลอง Web Server หรืออัพโหลด (Upload) เว็บไซต์4. ประยุกต์ใช้โปรแกรมกราฟิกเพื่อเสริมในการออกแบบและการสร้างเว็บไซต์

คําอธิบายรายวิชา ศึกษาและปฏิบัติเกี่ยวกับกระบวนการและโครงสร้างการทํางานของเว็บไซต์การออกแบบ เว็บไซต์การสร้างเว็บไซต์ด้วยโปรแกรมภาษา โปรแกรมสําเร็จรูปหรือโปรแกรมระบบ CMS (Content Management System) การใช้โปรแกรมกราฟิกเสริมในการออกแบบสร้างเว็บไซต์และการติดตั้งโปรแกรมจําลอง Web Server หรืออัพโหลด (Upload) เว็บไซ

สารบญัหน้า หน่วยที่1 กระบวนการและโครงสร้างการทํางานของเว็บไซต์ 1 1.1 ความรู้เกี่ยวกับอินเทอร์เน็ต 4 1.2 ความหมายของเว็บ 7 1.3 การทํางานของเว็บ 8 1.4 แนวทางการสร้างเว็บไซต์ 10 แบบฝึกหัดหน่วยท1ี่15 แบบทดสอบหลังเรียนหน่วยที่1 17 หน่วยที่2 การออกแบบเว็บไซต์19 2.1 ประเภทของเว็บไซต์ 21 2.2 การกําหนดขนาดของหน้าเว็บเพจ 22 2.3 โครงสร้างเว็บไซต์ 24 2.4 การออกแบบหน้าจอเว็บเพจ 26 2.5 ขั้นตอนการสร้างเว็บไซต์ 36 แบบฝึกหัดหน่วยที่2 40 ใบงานที่1 การออกแบบเว็บไซต์ 42 แบบทดสอบหลังเรียนหน่วยที่2 43 หน่วยที่3 พื้นฐานภาษา HTML 45 3.1 ความหมาย HTML 47 3.2 โครงสร้างภาษา HTML ตามมาตรฐาน HTML5 48 3.3 เครืองมือสร้างเว็บเพจ 50 3.4 การกําหนดค่าสีบนเว็บเพจ 55 3.5 การปรับแต่งเอกสาร HTML 56 3.6 การบันทึกไฟล์HTML 58 3.7 การเปิดไฟล์HTML 59

3.8 การทดสอบการทํางานของเว็บไชต์ 60 แบบฝึกหัดหน่วยที่3 63 แบบทดสอบหลังเรียนหน่วยที่3 65 หน่วยที่4การจัดการข้อความในเว็บเพจ 67 4.1 การจัดรูปแบบการแสดงข้อความ 69 4.2 การจัดการรูปแบบตัวอักษร 80 4.3 การสร้างลําดับรายการของข้อมูล (List) 92 แบบฝึกหัดหน่วยที่4 107 ใบงานที่2 การใส่ข้อความและจัดการข้อความในเว็บเพจ 110 แบบทดสอบหลังเรียนหน่วยที่4 111 หน่วยที่5 การแทรกรูปภาพในเว็บเพจ 115 5.1 การแทรกรูปภาพในเว็บเพจ 118 5.2 การใส่ข้อความกํากับรูปภาพ 119 5.3 การกําหนดขนาดรูปภาพ 121 5.4 การใส่กรอบให้รูปภาพ 122 5.5 การจัดตําแหน่งข้อความและรูปภาพ 123 5.6 การใช้รูปภาพเป็นพื้นหลัง 125 แบบฝึกหัดหน่วยที่5 128 ใบงานที่3 การแทรกรูปภาพในเว็บเพจ 130 แบบทดสอบหลังเรียนหน่วยที่5 131 หน่วยที่6การแทรกตาราง 133 6.1 การสร้างตารางในเว็บเพจ 136 6.2 การใส่ข้อความในตาราง 138 6.3 การจัดตําแหน่งข้อความในตาราง 139 6.4 การใส่หัวตาราง 143

6.5 การใส่ข้อความกํากับตาราง 145 6.6 การกําาหนดตําแหน่งของตาราง 146 6.7 การกําาหนดขนาดตาราง 148 6.8 การกําาหนดสีให้กับตาราง 149 6.9 การรวมเซลล์ในตาราง 153 6.10 การกําหนดการแสดงเส้นตาราง 156 6.11 การใช้ตารางจัดรูปแบบหน้าเว็บเพจ 158 แบบฝึกหัดหน่วยที่6 165 ใบงานที่4 การแทรกตาราง 168 แบบทดสอบหลังเรียนหน่วยที่6 169 หน่วยที่7 การเชื่อมโยง (Link) 171 7.1 การสร้างการเชื่อมโยง 174 7.2 การสร้างการเชื่อมโยงจากรูปภาพ 175 7.3 การสร้างการเชื่อมโยงภายในเว็บเพจ 176 7.4 การสร้างการเชื่อมโยงไปเว็บเพจอื่น 179 7.5 การสร้างการเชื่อมโยงไปเว็บไซต์ภายนอก 181 7.6 การสร้างการเชื่อมโยงเพื่อส่งอีเมล 183 7.7 การเชื่อมโยงไปยังไฟล์ดาวน์โหลด 184 7.8 การทํา Image Map เพื่อสร้างการเชื่อมโยง 185 7.9 การกําหนดสีตัวอักษรที่ใช้เชื่อมโยงข้อมูล 192 แบบฝึกหัดหน่วยที่7 197 ใบงานที่5 การเชื่อมโยง (Link) 201 แบบทดสอบหลังเรียนหน่วยที่7 203

หน่วยที่8 การแบ่งหน้าเว็บเพจด้วยเฟรม (Frame) 205 8.1 การแบ่งหน้าเว็บเพจออกเป็นเฟรม 208 8.2 การเชื่อมโยงและแสดงผลในเฟรม 212 แบบฝึกหัดหน่วยที่8 220 ใบงานที่6 การแบ่งหน้าเว็บเพจด้วยเฟรม (Frame) 222 แบบทดสอบหลังเรียนหน่วยที่8 223 หน่วยที่9 Cascading Style: Shirets (CSS) 225 9.1 ความรู้เบื้องต้นเกี่ยวกับ CSS 228 9.2 การเขียน CSS แบบ inline 230 9.3 การเขียน CSS แบบ Embedded 232 9.4 การเขียน CSS แบบ External 234 9.5 Selectors 237 9.6 รูปแบบการกําหนดคุณสมบัติใน CSS 243 แบบฝึกหัดหน่วยที่9 249 ใบงานที่7 การกําหนดรูปแบบเว็บเพจด้วย Cascading Style Sheets (CSS) 252 แบบทดสอบหลังเรียนหน่วยที่9 253 หน่วยที10 การสร้างแบบฟอร์ม 255 10.1 วิธีสร้างแบบฟอร์ม 259 10.2 การเพิ่มส่วนรับข้อมูล 260 แบบฝึกหัดหน่วยที10 275 ใบงานที่8 การสร้างแบบฟอร์ม 278 แบบทดสอบหลังเรียนหน่วยที่10 279 หน่วยที่11 การใช้โปรแกรมกราฟิกเสริมในการออกแบบสร้างเว็บไซต์ 281 11.1 ส่วนประกอบของโปรแกรม Adobe Photoshop 284 11.2 เลเยอร์ 288 11.3 การใช้งานโปรแกรม Photoshop 291

11.4 การแต่งภาพ 297 11.5 การแทรกข้อความ 301 แบบฝึกหัดหน่วยที่11 304 ใบงานที่9 การใช้โปรแกรมกราฟิกเสริมในออกแบบสร้างเว็บไซต์ 306 แบบทดสอบหลังเรียนหน่วยที่11 307 หน่วยที่12 การอัพโหลด (Upload) เว็บไซต์ 311 12.1 การขอพื้นที่เครื่องบริการเว็บ 314 12.2 วิธีการอัพโหลดเว็บไซต์ 322 แบบฝึกหัดหน่วยที่12 333 ใบงานที่10 การอัพโหลด (Upload) เว็บไซต์ 334 แบบทดสอบหลังเรียนหน่วยที่12 335 หน่วยที่13 ความรู้เบื้องต้นเกี่ยวกับ HTML5 337 13.1 ความแตกต่างของ HTML5 กับ HTML รุ่นเก่า 339 13.2 ส่วนประกอบใหม่ใน HTML5 340 13.3 ตัวอย่างแท็กคําสั่งในภาษา HTML5 342 แบบฝึกหัดหน่วยที่13 354 แบบทดสอบหลังเรียนหน่วยที่13 356 บรรณานุกรม 358

หน่วยท1ี่กระบวนการและโครงสร้างการสร้างทํางานเว ็ บไซต์1.1 ความรู้เกี่ยวกับอินเทอร์เน็ต อินเทอร์เน็ต (Internet) เป็นเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่มีการเชื่อมต่อคอมพิวเตอร์ที่อยู่ใน ที่ต่าง ๆ ทั่วโลกเข้าด้วยกันโดยมีข้อตกลงหรือข้อกําหนดที่เรียกว่าโปรโตคอล (Protocol) เป็นมาตรฐาน การ เชื่อมต่อระหว่างกันทําให้เกิดการติดต่อสื่อสารข้อมูลกันได้หลายรูปแบบ 1.1.1 การทํางานของอินเทอร์เน็ต การสื่อสารข้อมูลของเครื่องคอมพิวเตอร์ในระบบอินเทอร์เน็ต เป็นการติดต่อสื่อสารของผู้ใช้งาน ทั่วโลก ที่จะต้องอาศัยข้อกําหนดหรือข้อตกลงในการ ติดต่อสื่อสารที่มีชื่อว่า TCP/IP (Transmission Control Protocol/Internet Protocol) มาใช้เป็นมาตรฐานการติดต่อสื่อสารระหว่างกันโดยใช้หมายเลข IP Address ระบุที่อยู่ของ เครื่องคอมพิวเตอร์แต่ละเครื่อง และใช้โปรโตคอล TCP เป็นมาตรฐานในการติดต่อสื่อสาร กัน และผู้ใช้อินเทอร์เน็ตจะต้องเชื่อมต่อเครื่องคอมพิวเตอร์ของตนเองไปยังผู้ให้บริการ อินเทอร์เน็ตที่เรียกว่า ISP (Internet Service Provider) จากนั้นผู้ให้บริการเหล่านี้จะ เชื่อมต่อเครื่องของผู้ใช้ไปยังเครื่องคอมพิวเตอร์ที่ตั้ง ของเว็บไซต์หรือเครื่องบริการรับฝาก เว็บไซต์ที่เรียกว่าเครื่องเซิร์ฟเวอร์(Server) หรือโฮสท์(Host) หรือ เครื่องแม่ข่าย ดังนั้นใน การทํางานของอินเทอร์เน็ตจะต้องเกี่ยวข้องกับส่วนต่าง ๆ ดังนี้1. ทีซีพ/ีไอพี(TCP/IP) เป็นชุดของโปรโตคอลที่ใช้ในการสื่อสารผ่านเครือข่ายอินเทอร์เน็ตโดย มีวัตถุประสงค์เพื่อให้สามารถใช้สื่อสารจากต้นทางข้ามเครือข่ายไปยังปลายทางได้และสามารถหาเส้นทางที่จะ ส่งข้อมูลไปได้เองโดยอัตโนมัติซึ่งในระบบอินเทอร์เน็ตใช้โปรโตคอล TCP/IP เป็นภาษาหลักในการ ติดต่อสื่อสารกัน 2. ไอพีแอดเดรส (IP Address) ย่อมาจาก Internet Protocol Address หรือหมายเลขประจํา เครื่อง คอมพิวเตอร์แต่ละเครื่องในระบบเครือข่ายที่ใช้โปรโตคอล TCP/IP เพื่อใช้อ้างอิงหรือใช้ติดต่อกับเครื่อง คอมพิวเตอร์อื่นในเครือข่าย ซึ่ง IP Address จะถูกจัดเป็นตัวเลขชุดขนาด 32 บิต โดยจะมีตัวเลขถูกแบ่ง ออกเป็น 4 ส่วน ส่วนละ 8 บิตเท่ากัน ในการเขียนเพื่อระบุหมายเลข IP จะทําการแปลงให้เป็น เลขฐานสิบก่อน แล้วเขียนคั่นแต่ละส่วนด้วยจุด (.) ดังนั้นในตัวเลขแต่ละส่วนนี้จึงมีค่าได้ไม่เกิน 256 หรือ ตั้งแต่0 จนถึง 255 เท่านั้นโดยหมายเลข IP Address ของเครื่องคอมพิวเตอร์แต่ละเครื่องจะมีค่าไม่ซ้ํา กัน ซึ่งจะสามารถระบุหมายเลข Network กับหมายเลข Host ของเครื่องคอมพิวเตอร์

ตัวอย่างเช่นคอมพิวเตอร์เครื่องหนึ่งมีหมายเลข IP Address เป็น 192.168.100.33 และ มีSubnet Mask เป็น 255.255.255.0 ทําให้สามารถระบุได้ว่าคอมพิวเตอร์เครื่องนี้มีหมายเลข Network เบน 192,168,100 และมีหมายเลข Host เป็น 33 -การณ์ต่าง ๆ มากมาย การพัฒนา 3. โดเมน (Dornalin Name) หมายถึง ชื่อ เว็บไซต์หรือชื่อที่ตั้งที่ใช้แทนหมายเลข IP เพื่อให้ง่าย ต่อการจดจําหรือเพื่อประกาศความมีตัวตนบน อินเทอร์เน็ตให้ผู้คนทั่วไปได้รู้จัก ซึ่งจะต้องมีชื่อที่ไม่ซ้ํากันและ สามารถมีได้ชื่อเดียวในโลกเท่านั้นและเมื่อ เรียกใช้งานเว็บไซต์โดยการกรอกชื่อเว็บไซต์ลงไปในช่อง Address ของโปรแกรมเว็บบราว์เซอร์ระบบจะส่งชื่อ ไปร้องถามจากเครื่องแปลชื่อโดเมน หรือ Domain Name Server และตอบกลับมาเป็น IP Address แล้วส่ง คําร้องไปให้กับเครื่องปลายทางตาม IP Address และได้ข้อมูล กลับมาตามรูปแบบที่ร้องขอไปซึ่ง Domain Name จะแบ่งออกเป็นระดับชั้น โดยแต่ละระดับจะถูกคั่นด้วย ที่อยู่ใน แตรฐาน เครื่องหมายจุด เช่น www.krupanom.com เป็นชื่อโดเมนแบบ 2 ระดับ ใช้งาน เป็นชื่อโดเมนแบบ 3 ระดับ www.google.co.th โดย ส่วนแรก เป็นชื่อองค์กรหรือชื่อเว็บไซต์เช่นgoogle ส่วนที่สอง เป็นส่วนขยายบอกประเภท ขององค์กร เช่นเป็นองค์กรรัฐบาล เอกชน หรือองค์กรการค้า เช่น co ที่หมายถึง Cornmercial ส่วนที่สาม เป็นส่วนขยาย บอกประเทศที่เครื่องคอมพิวเตอร์นั้นตั้งอยู่เช่น 15 ที่หมายถึง Thailand การเชื่อมต่อเครื่องคอมพิวเตอร์ใน ระบบเาย สามารถจัดแบ่งการเร่งแต่งตามรูปแบบพื้นที่การเชื่อมต่อและได้มีการพัฒนาสถาปัตยกรรม Client/Server โดยแบ่งออกเป็นส่วนผู้ให้บริการ หรือ Server และส่วนใช้บริการหรือ Cuette Sever see ตามคําร้องของผู้ใช้บริการ แล้วส่งกลับไปให้1.2 บริการบนอินเทอร์เน็ต เครือข่ายอินเทอร์เน็ตเป็นเครือข่ายที่มีการเชื่อมโยงกันทั่วโลกเพื่อวัตถุประสงค์ใน การติดต่อสื่อสารข้อมูลกันจึงทําให้เกิดบริการต่าง ๆ เพื่อการสื่อสารข้อมูลบนระบบอินเทอร์เน็ต ดังนี้1. เวิลด์ไวด์เว็บ (WWW) หรือบริการเว็บไซต์เป็นบริการเผยแพร่ข้อมูลข่าวสารบนเครือข่าย อินเทอร์เน็ต เป็น บริการที่ได้รับความนิยมมากที่สุดโดยอาศัยโปรแกรมเว็บบราว์เซอร์(web Browser) ในการ ข้อมูล 2. จดหมายอิเล็กทรอนิกส์(Electronic Mail) เป็นการติดต่อสื่อสารโดยใช้หลักการรับส่ง จดหมายแบบปกติซึ่งผู้ใช้จะต้องมีที่อยู่ของจดหมายอิเล็กทรอนิกส์(E-mail Address) ที่สามารถสมัครใช้งานได้กับผู้ให้บริการ ทั่วไป อีกทั้งยังใช้เป็นที่เก็บจดหมายอิเล็กทรอนิกส์เพื่อการติดต่อสื่อสาร

3. บริการโอนย้ายไฟล์(File Transfer) เป็นบริการที่เกี่ยวข้องกับการโอนย้ายไฟล์ผ่านระบบ อินเทอร์เน็ต แบ่ง ออกเป็น (1) การดาวน์โหลดไฟล์(Download) เป็นการรับข้อมูลจากเครื่องคอมพิวเตอร์อื่น ในเครือข่ายเข้า มายังเครื่องคอมพิวเตอร์ของผู้ใช้ (2) การอัพโหลดไฟล์(Upload) เป็นการนําไฟล์ข้อมูลจากเครื่องของผู้ใช้ไปเก็บไว้ในเครื่อง ที่ให้บริการ (Server) ผ่านเครือข่ายอินเทอร์เน็ต 4. บริการสนทนาบนเครือข่ายอินเทอร์เน็ต (Instant Message) เป็นการส่งข้อความ รูปภาพ หรือไฟล์ข้อมูลถึง กันแบบทันทีทันใด เช่น โปรแกรม Windows Live Massager เป็นต้น 5. บริการค้นหาข้อมูลบนเครือข่ายอินเทอร์เน็ตเป็นบริการที่ช่วยอํานวยความสะดวกในการ ค้นหาข้อมูลที่ต้องการได้อย่างหลากหลายให้กับผู้ใช้บริการอินเทอร์เน็ต โดยมีบริการค้นหาข้อมูลในลักษณะ ต่าง ๆ ดังนี้ (1) เว็บไดเรกทอรี(Web Directory) เป็นการค้นหาข้อมูลโดยการเข้าไปเลือก Directory ที่จัดเตรียม และแยกหมวดหมู่ไว้ให้เรียบร้อยแล้ว เช่น www.yahoo.com (2) เสิร์สเอนจิน (Search Engine) เป็นการค้นหาข้อมูลโดยใช้โปรแกรม Search โดยการ เอาคําค้นที่ต้องการค้นหาไปเทียบกับเว็บไซต์ต่าง ๆ ว่ามีเว็บไซต์ใดบ้างที่มีคําที่ต้องการค้นหา เว็บไซต์ที่ให้บริการ ค้นหา ข้อมูลแบบ search engine เช่น www.google.co.th (3) เมตะเสิร์ช (Metasearch) เป็นการค้นหาข้อมูลแบบ Search Engine แต่จะทําการส่ง คําค้นที่ต้องการไปค้นหาในเว็บไซต์ที่ให้บริการสืบค้นข้อมูลอื่น ๆ อีกทีถ้าข้อมูลที่ได้มีซ้ํากันก็จะแสดงเพียง รายการ เดียว เว็บไซต์ที่ให้บริการMetasearch เช่น www.search.com (4) บริการกระดานข่าวหรือเว็บบอร์ด (Webboard) เป็นศูนย์กลางในการแสดงความคิดเห็นที่มีการ ตั้งกระทู้ถามตอบในหัวข้อที่สนใจ เช่น www.pantip.com

(5) ห้องสนทนา (Chat Room) เป็นการสนทนาออนไลน์อีกประเภทหนึ่งที่มีการส่งข้อความสั้น ๆ ถึง กัน โดยจะต้องเข้าไปในเว็บไซต์ที่ให้บริการห้องสนทนา เช่น www.sanook.com และ www.pantip.com เป็นต้น 1.2 ความหมายของเว็บ เวิลด์ไวด์เว็บ (World Wide Web) หรือที่เรียกสั้น ๆ ว่า เว็บ (Web) หรือ W3 (WWW) หรือ เครือข่าย ใยแมงมุมที่เรียกตามลักษณะของการเชื่อมต่อเครื่องคอมพิวเตอร์ที่โยงใยกันไปทั่วโลกคล้ายใยแมง มุมเป็น บริการเรียกดูเว็บไซต์ที่ต้องอาศัยโปรแกรมเว็บเบราว์เซอร์ (Web Browser) ในการเรียกดูข้อมูลด้วย การระบุชื่อของเว็บไซต์หรือ URL (Uniform Resource Locator) WWW เป็นบริการที่ทําให้คอมพิวเตอร์ที่เชื่อมต่ออยู่บนเครือข่ายอินเทอร์เน็ตสามารถเข้าถึงข้อมูลที่เก็บ ไว้ในคอมพิวเตอร์เครื่องอื่นได้โดยผ่านโปรแกรมเว็บเบราว์เซอร์ลักษณะเด่นของการนําเสนอข้อมูลเว็บคือ ความสามารถในการเชื่อมโยงไปยังจุดอื่นบนหน้าเว็บ เชื่อมโยงเว็บเพจอื่น ตลอดจนสามารถเชื่อมโยงไปยัง เว็บไซต์อื่น ๆ ในระบบเครือข่ายอินเทอร์เน็ตทําให้บริการ WWW เป็นแหล่งข้อมูลขนาดใหญ่1.2.1 คําศัพท์พื้นฐานเกี่ยวกับเว็บ 1. เว็บไซต์(Web Site) หมายถึง แหล่งที่รวมข้อมูลเอกสารและสื่อต่าง ๆ ที่ต้องการ เผยแพร่ไว้บนระบบเครือข่าย 2. โดยเพจ (Home) หมายถึง หน้าแรกของเว็บไซต์ซึ่งประกอบไปด้วยเมนูเชื่อมโยงและข้อมูล ต่าง ๆ 3. เว็บเพจ (Web Page) หมายถึง หน้าเอกสารที่อยู่ในรูปแบบไฟล์HTML(Hypertext Markup Language) ที่มีการเชื่อมโยง (Link) ไปส่วนต่าง ๆ 4. เว็บโฮสติ้ง (Web Hosting) หมายถึง การให้บริการเช่าพื้นที่หรือรับฝากข้อมูลของเว็บไซด์เพื่อให้เว็บไซด์สามารถออนไลน์บนอินเทอร์เน็ตได้5. ยูอาร์แอล (Uniform Resource Locator: URL) หมายถึง แหล่งที่อยู่ของเว็บไซต์เรา สามารถ เข้าถึงเว็บไซต์ใด ๆ ได้โดยการพิมพ์URL ในช่อง Address ของโปรแกรมเว็บบราว์เซอร์เช่น URL ของege http://www.krupanom.com 6. ซีเอ็มเอส (CMS) ย่อมาจาก Content Management System หมายถึง ระบบที่นํามาช่วย ในการสร้างและบริหารเว็บไซต์แบบสําเร็จรูป โดยผู้ใช้งานแทบไม่ต้องมีความรู้ในด้านการเขียนโปรแกรม ก็สามารถสร้างเว็บไซต์ได้ตัวอย่าง CMS ในปัจจุบัน เช่น Mambo, Joomla, WordPress are Drupal เป็นต้น

7. โปรแกรมประยุกต์บนเว็บ (Web Application) หมายถึง โปรแกรมประยุกต์ที่เข้าถึงด้วย โปรแกรมเว็บบราว์เซอร์ผ่านเครือข่ายคอมพิวเตอร์อย่างอินเทอร์เน็ตหรืออินทราเน็ต โดยไม่ต้องติดตั้ง ซอฟต์แวร์บนเครื่องผู้ใช้เช่น เว็บเมล์การพาณิชย์อิเล็กทรอนิกส์การประมูลออนไลน์เป็นต้น 8. เว็บบราว์เซอร์(Web Browser) หรือโปรแกรมค้นดูเว็บ หมายถึง โปรแกรมคอมพิวเตอร์ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลที่จัดเก็บในหน้าเว็บที่สร้างด้วยภาษา HTML ที่จัดเก็บไว้ที่เว็บ เซิร์ฟเวอร์เช่น Internet Explorer, Mozilla Firefox และ Safari เป็นต้น 1.2.2 ประโยชน์ของเว็บไซต์จากการที่เว็บไซต์สามารถเผยแพร่ข้อมูลด้วยข้อความ ภาพ เสียง และภาพเคลื่อนไหวได้ทําให้สามารถสร้างและพัฒนาเว็บไซต์เพื่อนําเสนอข้อมูลและข่าวสารในรูปแบบต่าง ๆ ได้อย่างมาก เช่น ข่าว และ เหตุการณ์ข้อมูลความรู้ข้อมูลประชาสัมพันธ์ข้อมูลเพื่อความบันเทิง ข้อมูลเพื่อการค้าขาย การ ดาวน์โหลด ข้อมูลและการติดต่อสื่อสารข้อมูลต่าง ๆ ทําให้เว็บไซต์มีประโยชน์ในการใช้งานด้านต่าง ๆ ดังนี้1. ช่วยเผยแพร่ข้อมูลข่าวสารและบริการต่าง ๆ ให้เป็นที่รู้จักอย่างแพร่หลาย 2. ช่วยส่งเสริมศักยภาพการแข่งขันในด้านธุรกิจเข้าถึงกลุ่มลูกค้าหรือผู้ใช้บริการเป้าหมายได้ทุก วัน สามารถซื้อขายสินค้าหรือบริการผ่านเว็บไซต์ได้ตลอด 24 ชั่วโมง และทั่วโลกนอกจากนั้นยัง ช่วยขาย สินค้าทางอินเตอร์เน็ต สร้างรายได้โดยไม่ต้องมีหน้าร้านหรือสํานักงานสามารถ ให้บริการต่าง ๆ ของธุรกิจหรือ องค์กรแบบออนไลน์เป็นการอํานวยความสะดวกแก่ลูกค้า 3. ช่วยสร้างภาพลักษณ์ที่ดีและทันสมัยน่าเชื่อถือมากขึ้นให้กับองค์กร บริษัทและธุรกิจต่าง ๆ เพิ่มยอดขายให้กับธุรกิจ 4. ช่วยลดค่าใช้จ่ายในการโฆษณาประชาสัมพันธ์ธุรกิจไม่ต้องเสียค่าใช้จ่ายสูง สําหรับการที่จะมีบไซต์เพื่อติดต่อกับโลกภายนอกเพิ่มประสิทธิภาพในการโฆษณาให้คําแนะนําต่าง ๆ เกี่ยวกับ สินค้าและ การแก่ลูกค้าได้ตลอด 24 ชั่วโมง โดยไม่ต้องรอร้านเปิดให้บริการเป็นการเพิ่มช่องทาง ในการขายสินค้าและ การของบริษัทให้เป็นที่รู้จักทั้งในจังหวัด ต่างจังหวัดและต่างประเทศ 5. เพิ่มช่องทางในการติดต่อสื่อสาร เพื่อความสะดวกและเป็นการยกระดับมาตรฐานการดําเนิน 1.3การทํางานของเว็บ การทํางานของเว็บจะมีลักษณะการทํางานเช่นเดียวกับบริการอื่นบนอินเทอร์เน็ตใน รูปแบบ Client/Server โดยมีโปรแกรมเว็บเบราว์เซอร์ทางด้าน Client ทําหน้าที่ร้องขอบริการและมีเว็บ เซิร์ฟเวอร์(Web Server) ทําหน้าที่เป็นผู้ให้บริการ ด้วยการติดต่อผ่านโปรโตคอล HTTP (Hypertext Transfer Protocol) ส่วนการทํางานของเว็บแบบ Static ที่มีนามสกุลของไฟล์เป็น htm หรือ html นั้นเมื่อ

เราใช้โปรแกรมเว็บเบราว์เซอร์เปิดดูเว็บเพจใดเว็บเซิร์ฟเวอร์ก็จะส่งเว็บเพจนั้นกลับมายังโปรแกรมเว็บเบราว์เซอร์เพื่อแสดงผลตามคําสั่งภาษา HTML (Hypertext Markup Language) ที่อยู่ในไฟล์ 1.4 แนวการสร้างเว็บไซต์การสร้างเว็บไซต์ในปัจจุบันสามารถทําได้ง่ายหลายรูปแบบ โดยเฉพาะโปรแกรม ช่วยสร้างเว็บที่ไม่ต้อง เขียนคําสั่งภาษา HTML ไปเลือกใช้ได้มากมาย ซึ่งโปรแกรมที่ใช้ในการสร้างเว็บแต่ละ แบบต่างก็มีประสิทธิภาพ และมีข้อดีข้อเสียที่แตกต่างกัน เช่น โปรกรม Desiresawee โปรแกรม FrontPage หรืออาจจะสร้างโดยใช้ภาษาสําหรับสร้างเว็บเพจโดยเฉพาะ เช่น Active Server Page (ASP), PHP, Java Server Pages (JSP) เป็นต้น ซึ่งทุกโปรแกรมที่ได้กล่าวมาต่างก็มีพื้นฐานมาจากภาษา HTML (Hyper Text Markup Language) ซึ่งเป็นภาษาแม่ขณะของคําสั่งที่มีความสามารถสูงกว่าเอกสารธรรมดาทั่วไป และจัดอยู่ในตระกูลของภาษา ใช้สําหรับกําหนดรูปแบบของเอกสาร (Milkup Language) สรุปสาระสําคัญ อินเทอร์เน็ต (Internet) เป็นเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่มีการเชื่อมต่อคอมพิวเตอร์ที่อยู่ใน ที่ต่าง ๆ ทั่วโลกเข้าด้วยกันโดยมีข้อตกลง ข้อกําหนด หรือมาตรฐานการเชื่อมต่อระหว่างกัน

1. ทีซีพี/ไอพี(TCP/IP) เป็นชุดของโปรโตคอลที่ถูกใช้ในการสื่อสารผ่านเครือข่ายอินเทอร์เน็ต 2. ไอพี/แอดเดรส (IP Address) คือหมายเลขประจําเครื่องคอมพิวเตอร์แต่ละเครื่องในระบบเครือข่าย ที่ใช้ โปรโตคอลแบบ TCP/IP เพื่อใช้อ้างอิงหรือใช้ติดต่อกับเครื่องคอมพิวเตอร์อื่น ๆ ในเครือข่าย 3. โดเมนเนม (Domain Name) หมายถึง ชื่อเว็บไซต์หรือชื่อที่ตั้งที่ใช้แทนหมายเลข IP เพื่อให้ง่ายต่อ การ จดจําหรือเพื่อประกาศความมีตัวตนบนอินเทอร์เน็ตให้ผู้คนทั่วไปได้รู้จัก เครือข่ายอินเทอร์เน็ตเป็นเครือข่ายที่มีการเชื่อมโยงกันทั่วโลกเพื่อการติดต่อสื่อสารข้อมูลกันในระบบ ทําให้มีบริการเพื่อการสื่อสารข้อมูลต่าง ๆ เกิดขึ้นบนระบบอินเทอร์เน็ต ดังนี้ (1) เวิลด์ไวด์เว็บ (WWW) หรือบริการเว็บไซต์(2) จดหมายอิเล็กทรอนิกส์(Electronic Mail) เป็นการติดต่อสื่อสารโดยใช้หลักการรับส่งจดหมาย (3) บริการโอนย้ายไฟล์(File Transfer) เป็นบริการโอนย้ายไฟล์ผ่านระบบอินเทอร์เน็ต (4) บริการสนทนาบนอินเทอร์เน็ต (Instant Message) เป็นการส่งข้อความ รูปภาพ หรือ ไฟล์ข้อมูล ต่าง ๆ ถึงกันแบบทันทีทันใด (5) บริการค้นหาข้อมูลบนอินเทอร์เน็ต (6) บริการกระดานข่าวหรือเว็บบอร์ด (Web board) เป็นศูนย์กลางในการแสดงความ คิดเห็น (7) ห้องสนทนา (Chat Room) เป็นการสนทนาออนไลน์อีกประเภทหนึ่งที่ส่งข้อความสั้น ๆ ถึงกัน

แบบทดสอบหลังเรียนหน่วยที่1 กระบวนการและโครงสร้างการทํางานของเว ็ บไซต์คําชี้แจง ให้นักเรียนเลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบ 1. ความหมายอินเทอร์เน็ตที่ถูกต้องที่สุดคือข้อใด ก. เครือข่ายส่วนบุคคลขนาดเล็ก ข. เครือข่ายคอมพิวเตอร์ในเขตเมือง ค.เครือข่ายที่มีการเชื่อมต่อคอมพิวเตอร์ที่อยู่ในที่ต่าง ๆ ทั่วโลกเข้าด้วยกัน ง. เครือข่ายคอมพิวเตอร์เฉพาะพื้นที่2. การทํางานของอินเทอร์เน็ตข้อใดถูกต้องที่สุด ก. สามารถเชื่อมต่อถึงกันได้เหมือนระบบไฟฟ้า ข. การสื่อสารข้อมูลอาศัยโปรโตคอลเป็นข้อตกลงในการสื่อสาร ค.ส่งข้อมูลถึงกันด้วยกระแสไฟฟ้า ง. ถูกทุกข้อ 3. บริการใดไม่มีอยู่บนอินเทอร์เน็ต ก. WWW ข. File Transfer ค. Electronic Mail ง. Programming Online 4. ความหมายของเว็บข้อใดถูกต้องที่สุด ก. โปรแกรมที่ใช้โอนถ่ายไฟล์บนอินเทอร์เน็ต ข. เอกสารหน้าแรกที่แสดงบนโปรแกรมเว็บเบราว์เซอร์ค. แหล่งที่อยู่ของเว็บไซต์ง. เอกสารที่สามารถเรียกดูได้ด้วยการระบุURL ที่โปรแกรมเว็บเบราว์เซอร์5. ความหมายของ URL ข้อใดถูกต้องที่สุด ก. จดหมายอิเล็กทรอนิกส์ค. แหล่งที่อยู่ของเว็บไซต์ค. แหล่งที่อยู่ของเว็บไซต์ง. การโอนถ่ายไฟล์ข้อมูลบนอินเทอร์เน็ต 6. ประโยชน์ของเว็บข้อใดน้อยที่สุด ก. ทําให้ได้เจอเพื่อนเก่า ๆ ที่ไม่ได้ติดต่อกันมานานๆ ข. เพิ่มช่องทางในการติดต่อสื่อสาร ค. ส่งเสริมศักยภาพการแข่งขันธุรกิจ ง. เผยแพร่ข้อมูลข่าวสาร

7. การทํางานของเว็บข้อใดถูกต้องที่สุด ก. เว็บสามารถแสดงผลด้วยโปรแกรมจําลองเครื่องบริการเว็บ ข. เว็บสามารถเผยแพร่บนอินเทอร์เน็ตได้โดยตัวมันเอง ค. เครื่องบริการเว็บส่งเว็บมาแสดงที่เครื่องคอมพิวเตอร์ทุกเครื่องอัตโนมัติ ง.เครื่องผู้ใช้ร้องขอบริการไปที่เครื่องบริการเว็บแล้วจึงส่งผลกลับมาแสดง 8. การสร้างเว็บไซต์ด้วยภาษา HTML มีความหมายตรงตามข้อใด ก. การจ้างบริษัทสร้างและจัดการเว็บไซต์ข. การใช้โปรแกรมสร้างเว็บเพจ ค. การใช้ระบบช่วยสร้างและบริหารเว็บไซต์แบบสําเร็จรูป ง. การใช้คําสั่งต่าง ๆ ของภาษา HTML สร้างเว็บไซต์9. การสร้างเว็บไซต์ด้วยโปรแกรมสําเร็จรูป มีความหมายตรงตามข้อใด ก. การใช้คําสั่งต่าง ๆ ของภาษา HTML สร้างเว็บ ข.การจ้างบริษัทสร้างและจัดการเว็บไซต์ค. การใช้โปรแกรมสร้างเว็บเพจ ง. การใช้ระบบช่วยสร้างและบริหารเว็บไซต์แบบสําเร็จรูป 10. การสร้างเว็บไซต์ด้วยโปรแกรมระบบ CMS มีความหมายตรงตามข้อใด ก. การใช้ระบบช่วยสร้างและบริหารเว็บไซต์แบบสําเร็จรูป ข. การใช้โปรแกรมสร้างเว็บเพ ค. การใช้คําสั่งต่าง ๆ ของภาษา HTML สร้างเว็บ ง. การจ้างบริษัทสร้างและจัดการ เฉลย 1.ข. 2.ข.3.ง.4.ง 5.ก.6.ข 7.ง.8.ก.9.ข.10.ค.

หน่วยท2ี่การออกแบบไซต์2.1ประเภทของเว็บไซต์เว็บไซต์ที่เผยแพร่อยู่ในปัจจุบันสามารถแบ่งออกเป็นประเภทต่าง ๆ ตามลักษณะการทํางานของเว็บไซต์ได้ เป็น 2 ประเภท ดังนี้1. Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML และบันทึกเป็นไฟล์นามสกุล .htm หรือ html ประกอบด้วยข้อความ รูปภาพ และไฟล์มัลติมีเดียต่าง ๆ ตามที่กําหนดไว้ในเว็บเพจเมื่อมีผู้เรียกดู เว็บเพจนั้น เว็บเซิร์ฟเวอร์(Web Server) ก็จะส่งไฟล์นั้นไปให้ยังเครื่องที่ร้องขอ และแสดงผลออกทาง โปรแกรมเว็บเบราว์เซอร์บนเครื่องของผู้ชมนั้น Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่จํานวน หน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลง ข้อมูลบ่อย ๆ และไม่มีการติดต่อฐานข้อมูล เว็บไซต์ประเภทนี้สามารถกําหนดรูปแบบการตกแต่งและเนื้อหา ได้ตามต้องการแต่การแก้ไขเปลี่ยนแปลงค่อนข้างยุ่งยาก และไม่สามารถใช้งานฐานข้อมูลได้2. Dynamic Website เป็นเว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลได้โดยไม่ต้องเขียน ข้อมูล ในแต่ละหน้าเว็บเพจเอง เช่น กระดานข่าวหรือ Webboard ระบบสืบค้นข้อมูลเว็บไซต์รูปแบบนี้จะถูก สร้าง ด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่น ๆ ไฟล์เอกสารที่ได้จะมีง นามสกุล php, asp เป็นต้น และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนํา ข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจการทํางานของเว็บไซต์รูปแบบนี้จะต่างจากแบบ Static Website โดยเมื่อมีผู้เรียกดูหน้าเว็บเพจ ไฟล์หน้าเว็บเพจนั้นจะถูกแปลและกระทําคําสั่งและทําให้อยู่ในรูปแบบเอกสาร HTML ก่อนจึงส่งกลับให้Web Server เพื่อส่งต่อไปให้ผู้ใช้งานต่อไป 2.2การกําหนดขนาดของหน้าเว็บเพจ สิ่งที่ต้องคํานึงถึงอันดับแรกในการออกแบบและสร้างเว็บไซด์คือการ กําหนดขนาดของหน้าเว็บเพจ อันเป็นส่วนสําคัญที่จะทําให้ผู้เข้าชมเว็บไซต์สามารถเข้าถึงข้อมูลได้อย่าง ครบถ้วนหรือไม่เพราะถ้ากําหนด ขนาดของหน้าเว็บเพจไม่เหมาะสมอาจทําให้ผู้เข้าชมเว็บไซต์ไม่สามารถ มองเห็นบางส่วนของหน้าเว็บเพจเพราะ ขนาดเล็กเกินไป หรือใหญ่เกินไปจนตกขอบจอภาพ หรือทําให้สัดส่วน ของเว็บเพจผิดรูปไม่น่าสนใจ จึงควร คํานึงถึงขนาดของหน้าเว็บเพจเป็นหลักโดยพิจารณาจากแนวโน้มการใช้จอภาพในปัจจุบันที่ส่วนใหญ่

2.3 โครงสร้างเว็บไซต์โครงสร้างเว็บไซต์เป็นแผนผังของการเรียงลําดับเนื้อหาหรือการจัดวางตําแหน่งเว็บ เพจทั้งหมด ที่จะทํา ให้เรารู้ว่าทั้งเว็บไซต์ประกอบด้วยเนื้อหาอะไรบ้างดังนั้นการออกแบบโครงสร้างเว็บไซต์จึง เป็นเรื่องสําคัญที่จะ ทําให้สามารถออกแบบระบบเนวิเกชั่นได้เหมาะสม และเป็นแนวทางการทํางานที่ชัดเจน สําหรับขั้นตอนต่อ ๆ ไป ซึ่งมีโครงสร้างเว็บไซต์แบบต่าง ๆ ดังนี้(บริษัท สยามไซเบอร์เอ็ด จํากัด, 2557: ออนไลน)์ 2.4 การออกแบบหน้าจอเว็บเพจ การออกแบบหน้าเว็บเพจเป็นการวางโครงร่าง กําหนดตําแหน่งการจัดวาง ส่วนประกอบต่าง ๆ บนเว็บเพจ เพื่อการนําเสนอข้อมูลที่ครบถ้วนและเป็นที่สนใจแก่ผู้เข้าชม

สรุปสาระสําคัญ การออกแบบเว็บไซต์จึงเป็นการวางแผนการแสดงผลและการจัดวางข้อมูลต่าง ๆ ของเว็บไซต์ให้มีความเหมาะสม มีประสิทธิภาพในการแสดงเนื้อหาแก่ผู้เยี่ยมชมได้อย่างชัดเจน เข้าใจง่าย และเกิดความ น่าสนใจ ให้มากที่สุด 1. ประเภทของเว็บไซต์(1) Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML และบันทึกเป็นไฟล์นามสกุล .htm หรือ html ประกอบด้วยข้อความ รูปภาพ และไฟล์มัลติมีเดียต่าง ๆ เมื่อมีผู้เรียกดูเว็บเพจ Web Server ก็จะ ส่งไฟล์นั้นไปให้ยังเครื่องที่ร้องขอ และแสดงผลออกทางโปรแกรมเว็บเบราว์เซอร์บนเครื่องของผู้ชมนั้น (2) Dynamic Website เป็นเว็บไซต์ที่เว็บเพจสามารถเปลี่ยนแปลงข้อมูลได้โดยไม่ต้องเขียนแต่ละ เป็นแผง เช่น กระดานข่าวหรือ Web Board ระบบสืบค้นข้อมูลเว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษาScript แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่น ๆ ไฟล์เอกสารที่ได้จะมีนามสกุล -php, .asp เป็นต้น 2. การกําหนดขนาดของหน้าเว็บเพจ การกําหนดขนาดของหน้าเว็บเพจที่นิยมในปัจจุบันมีขนาด คือ (1) ขนาดเว็บไซต์แบบ 800 x 600 pixel เป็นขนาดที่สามารถใช้ได้กับหน้าจอทุกขนาดใน ปัจจุบัน เป็นขนาดรองการ แบน - ทีน ทีนีจากจอภาพขนาดเล็ก (2) ขนาดเว็บไซต์แบบ 1024 x 768 pixel เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้จอพิวเต อร์ขนาดใหญ่ขึ้น นอกจากนั้นเรายังสามารถใช้ตารางช่วยในการออกแบบหน้าเว็บเพจ โดยกาหนดขนาดตาราง กว้าง ประมาณ 500-1004 pixel แล้วกําหนด Align เป็น Center เพื่อจัดให้เนื้อหาอยู่กึ่งกลางตลอด การทํา เช่นนี้จะทําให้สามารถแก้ปัญหาเรื่องขนาดหน้าจอที่ผู้ใช้แตกต่างกัน ทําให้เว็บไซต์ของเราสามารถแสดงได้กับ ทุกขนาดจอภาพ ดังที่เห็นในเว็บไซต์ต่าง ๆ ในปัจจุบัน ข้อมูลเพิ่มเติม https://youtu.be/p-XQX_O5q8

แบบทดสอบหลังเรียนหน่วยที่2 การออกแบบเว ็ บไซต์คําชี้แจง ให้นักเรียนเลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1. ความแตกต่างของ Static Web กับ Dynamic Web ข้อใดถูกต้องที่สุด ก. Static Web ใช้กับเว็บไซต์ขนาดเล็ก Dynamic Website ใช้กับเว็บไซต์ขนาดใหญ่ข. Static Web เปลี่ยนแปลงข้อมูลไม่ได้Dynamic Website เปลี่ยนแปลงข้อมูลใต้ค. Static Web ใช้ในการฝึกสร้างเว็บของผู้เริ่มต้น ง. Dynamic Website เหมาะกับมืออาชีพ 2. หน้าเว็บเพจขนาดใดเหมาะสม ก. 640 X 480 พิกเซล ข. 1024 x 768 พิกเซล ค. 1024 x 768 พิกเซล ง. 1920 x 1080 พิเชล 3. โครงสร้างเว็บไซต์แบบเรียงลําดับ (Sequential Structure) ตรงกับข้อใด ก. มีการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน ข. ทุกหน้าในเว็บสามารถเชื่อมโยงไปถึงกันได้หมด ค. แบ่งเนื้อหาออกเป็นส่วน มีรายละเอียดย่อย ๆ ง.เป็นเรื่องราวตามลําดับของเวลา 4.โครงสร้างเว็บไซต์แบบลําดับชั้น (Hierarchical Structure) ตรงกับข้อใด ก. มีการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน ข. ทุกหน้าในเว็บสามารถเชื่อมโยงไปถึงกันได้หมด ค. แบ่งเนื้อหาออกเป็นส่วน มีรายละเอียดย่อย ๆ ง. เป็นเรื่องราวตามลําดับของเวลา 5. โครงสร้างเว็บไซต์แบบตาราง (Grid Structure) ตรงกับข้อใด ก. มีการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน ข. ทุกหน้าในเว็บสามารถเชื่อมโยงไปถึงกันได้หมด ค. แบ่งเนื้อหาออกเป็นส่วน มีรายละเอียดย่อย ๆ ง. เป็นเรื่องราวตามลําดับของเวลา 6. โครงสร้างเว็บไซต์แบบใยแมงมุม (Web Structure) ตรงกับข้อใด ก. มีการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน ข. ทุกหน้าในเว็บสามารถเชื่อมโยงไปถึงกันได้หมด

ค. แบ่งเนื้อหาออกเป็นส่วน มีรายละเอียดย่อย ๆ ง. เป็นเรื่องราวตามลําดับของเวลา จากภาพตอบคําถามข้อ 7-9 7. จากภาพหมายเลข 1 มีความหมายตรงตามข้อใด ก. ส่วนเมนู(Navigator) ข. ส่วนเนื้อหา (Contents) ค. ส่วนหัวของหน้าเว็บเพจ (Header ง. ส่วนท้ายของหน้าเว็บเพจ (Footer) 8. จากภาพหมายเลข 2 มีความหมายตรงตามข้อใด ก. ส่วนหัวของหน้าเว็บเพจ (Header) ข. ส่วนเนื้อหา (Contents) ค. ช่องว่าง (Space) ง. โลโก้(Logo) 9. จากภาพหมายเลข 3 มีความหมายตรงตามข้อใด ก. ส่วนท้ายของหน้าเว็บเพจ (Footer) ข. ส่วนหัวของหน้าเว็บเพจ (Hear ค. ส่วนเมนู(Navigator) ง. ส่วนเนื้อหา (Contents) 10. ในขั้นตอนการสร้างเว็บไซต์ก่อนการอัพโหลดเว็บไซต์ควรจะต้องกระทําในข้อใดก่อน ก. กําหนดการเชื่อมโยงเว็บเพจ ข. ลงทะเบียนขอพื้นที่เว็บไซต์ค. การสร้างเว็บเพจ ง. อัพโหลดเว็บไซต์เฉลย 1.ค 2.ก. 3.ง.4.ง.5.ก.6.ค.7.ง.8.ง.9.ค.10.ง.

หน่วยท3ี่พื้นฐานภษาHTML 3.1 ความหมาย HTML HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่งที่มีโครงสร้างการเขียน โดยอาศัยตัวกํากับหรือแท็ก (Tag) ควบคุม การแสดงผลข้อความรูปภาพหรือวัตถุอื่น ๆ ผ่านโปรแกรม เว็บเบราว์เซอร์โดยแต่ละแท็กอาจจะมีส่วนขยายที่เรียกว่า แอททริบิวท์(Attribute) สําหรับระบุหรือควบคุม การแสดงผลของเว็บได้ด้วย 3.2 โครงสร้างภาษา HTML ตามมาตรฐาน HTML5 ภาษา HTML ประกอบด้วยสองส่วนที่สําคัญคือส่วน Head กับส่วน Body ซึ่ง ส่วน Head จะคล้ายกับ ส่วนที่เป็นหัวของเอกสารทั่วไปหรือบรรทัด Title ของหน้าต่างการทํางานในระบบ Windows และส่วน Body จะเป็นส่วนเนื้อหาของเอกสารที่ประกอบด้วยแท็กคําสั่งที่ใช้จัดรูปแบบหรือตกแต่ง ภาษา HTML โดยทั้ง ถนนจะอยู่ภายใน html..c/html> การใช้ตัวอักษรในคําสั่งภาษา HTML สามารถใช้ได้ทั้งอักษรตัวพิมพ์เล็กและอักษรตัวพิมพ์ใหญ่หรือ ใช้ผสมกัน การย่อหน้า เว้นบรรทัดหรือช่องว่างสามารถทําได้อย่างอิสระ เพราะโปรแกรม เว็บบราว์เซอร์จะไม่สนใจการเว้นวรรคหรือช่องว่างระยะเว้นบรรทัดหรือย่อหน้า โดยมีโครงสร้างภาษา HTML ดังนี้3.3เครื่องมือการสร้างเว็บเพจ การสร้างเว็บเพจด้วยภาษา HTML จะเป็นการเขียนแท็กคําสั่งและข้อมูลที่ต้องการ นําเสนอเรียงต่อ กันในหน้าเอกสารซึ่งสามารถใช้โปรแกรมประเภท Text Editor ทั่วไปมาใช้เป็นเครื่องมือสร้าง เว็บเพจด้วย ภาษา HTML ได้เช่น โปรแกรม Notepad โปรแกรม EditPlus โปรแกรม Adobe Dreamweaver โปรแกรม Atom โปรแกรม Visual Studio Code โปรแกรม Sublime Text ดังมีรายละเอียดต่อไปนี้โปรแกรม Notepad เป็นโปรแกรมประเภท Text Editor มาตรฐานที่มีมากับระบบปฏิบัติการ • Windows สามารถเริ่มใช้งานโดยคลิก Start > All Programs > Accessories > Notepad เพื่อเปิด โปรแกรมขึ้นมา และสามารถพิมพ์ข้อความหรือคําสั่งในภาษา HTML ได้ตามรูปแบบภาษา HTML หรือจัด โครงสร้างให้สวยงามและดูง่าย

3.5การปรับแต่งเอกสาร HTML การปรับแต่งเอกสาร HTML เป็นการกําหนดการแสดงผลในภาพรวมของเว็บเพจ เช่น การกําหนดสีพื้น หลังเว็บเพจ การใส่ภาพพื้นหลังเพื่อสร้างความน่าสนใจ 3.6 การบันทึกไฟล์HTML การบันทึกไฟล์เมื่อเขียนคําสั่งภาษา HTML เสร็จแล้วให้การบันทึกไฟล์โดยเลือกนามสกุลของไฟล์เป็น .htm หรือ html ส่วนนี้สําคัญมากเมื่อเราใช้โปรแกรม Notepad สร้างเว็บเพจเพราะค่าเริ่มต้นการบันทึกไฟล์ของ Notepad เป็น .txt ถ้าไม่เปลี่ยนหรือกําหนดนามสกุลไฟล์ใหม่จะทําให้เกิดข้อผิดพลาดในการแสดงผลได้แต่ถ้าใช้โปรแกรมประเภท EditPlus จะสามารถบันทึกไฟล์ได้ทันทีตามรูปแบบไฟล์ที่เลือกสร้างตั้งแต่แรก และ ควรจัดเก็บไฟล์ไว้ใน Folder ที่เตรียมไว้สําหรับเก็บทรัพยากรของเว็บไซต์3.7การเปิดไฟล์HTML ไฟล์ที่บันทึกไว้เป็นไฟล์เว็บเพจหรือไฟล์ที่มีนามสกุลไฟล์เป็น .htm หรือ .html จะมีค่าเริ่มต้นในการ เปิด ใช้งานกับโปรแกรมเว็บเบราว์เซอร์หรือใช้กับโปรแกรมที่ใช้ล่าสุด ฉะนั้นเพื่อความถูกต้องในการเปิดไฟล์HTML ขึ้นมาเพื่อทําการแก้ไขจึงควรคลิกขวาที่ไฟล์นั้น ๆ แล้วเลือกคําสั่ง Open with > Notepad หรือ EditPlus

3.8 การทดสอบการทํางานของเว็บไซต์หลังจากสร้างหน้าเว็บเพจด้วยภาษา HTML หรือโปรแกรม สําเร็จรูปต่าง ๆ แล้ว สามารถทดสอบ ๆ การทํางานเพื่อดูผลงานหรือตรวจสอบการแสดงผลของการแก้ไข คําสั่งต่าง ๆ ได้โดยการใช้โปรแกรม เว็บบราว์เซอร์หรือโปรแกรมค้นดูเว็บซึ่งแต่ละโปรแกรมจะมีหน้าตาและ สีสันแตกต่างกัน ไปรวมทั้ง การแสดงผลในภาษาไทยอาจได้ผลลัพธ์ที่ไม่ถูกต้องหรือหากการตั้งค่าไม่ถูกต้องจะไม่สามารถแสดง ภาษาไทยได้การสร้างเว็บเพจจึงต้องมีการทดสอบผลเพื่อทดสอบการทํางานเว็บไซต์ตลอดเวลาการเลือกใช้ โปรแกรมเว็บบราว์เซอร์แต่ละโปรแกรมควรเรียนรู้วิธีการใช้งานและการปรับแต่งโปรแกรม เพราะอาจ มีผลต่อ การแสดงผลของเว็บเพจได้และควรแนะนําผู้ใช้เกี่ยวกับการแสดงผลของเว็บไซต์ว่า แสดงผลได้ดีกับ โปรแกรม เว็บบราว์เซอร์ใด และขนาดความละเอียดของจอภาพเท่าใด เพื่อให้เป็นไปตามวัตถุประสงค์ของ การนําเสนอ ซึ่งโปรแกรมเว็บบราว์เซอร์(Web Browser)

สรุปสาระสําคัญ HTML หรือ Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่งที่มีโครงสร้างการ เขียน โดยใช้ตัวกํากับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือส่วนประกอบอื่น ๆ ผ่านโปรแกรม เว็บบราว์เซอร์แต่ละ Ta อาจมีส่วนขยายที่เรียกว่า Attribute สําหรับระบุหรือควบคุมการแสดงผลเว็บได้โดย มีโครงสร้างภาษา HTML <!DOCTYPE html <html> <head> <title>Title of the Web page</title> <meta charset="UTF-8"> </head> <body> Content of the web page...... <-this is HTML structure - </body> </html>

แบบทดสอบหลังเรียนหน่วยที่3 พื้นฐานภาษา HTML คําชี้แจง ให้นักเรียนเลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1. ความหมายของ HTML ข้อใดถูกต้องที่สุด ก. ภาษาเขียนโปรแกรมเชิงโครงสร้าง ข. ภาษาที่ใช้กําหนดรูปแบบการแสดงของ HTM ค. ภาษาที่ใช้ในการเขียนเว็บเพจ โดยใช้แท็กกําหนดการแสดงผล ง. มาตรฐานของภาษา HTML รุ่นล่าสุด 2. คําสั่งรูปแบบใหม่ตามโครงสร้างภาษา HTML5 ตรงกับข้อใด ก. <html> ข. <!DOCTYPE html> A. <head> ค. <head> ง. <body> 3. วิธีใดเป็นการใส่ Comment ในเอกสารเว็บเพจ ก. // Comment ข./"Comment"/ ค. // Comment/ ง.<-This is a comment-> 4. ข้อใดไม่เป็นเครื่องมือที่ใช้สร้างเว็บเพจด้วยภาษา HTML ก. Notepad ข. Adobe Dreamweaver ค. EditPlus ง. Mozilla Firefox 5. การกําหนดสีในเว็บเพจข้อใดถูกต้องที่สุด ก. คลิกเลือกสีจากตารางสีค. color="#FF0099"ข. color src="red" ง. color="สีแดง" 6. การใส่สีเป็นพื้นหลังเว็บเพจข้อใดถูกต้องที่สุด ก. <body bgcolor="#FF0099"> ข. <body bgcolor="picture.jpg"> ค.<body background="Blue"> ง. <body background="bgpict.jpg">

7. การใส่ภาพพื้นหลังเว็บเพจข้อใดถูกต้องที่สุด ก. <body bgcolor="pict.jpg"> ข. <body bgcolor="#FF0099"> ค. <body background="Blue"> ง. <body background="bgpict.jpg"> 8. การบันทึกไฟล์HTML ข้อใดถูกต้องที่สุด ก.Openแล้วเลือกนามสกุลของไฟล์เป็น .htm หรือ htm ข. File/Save ค. Save แล้วเลือกนามสกุลของไฟล์เป็น .htm ง. Save As แล้วเลือกนามสกุลของไฟล์เป็น .htm หรือ html 9. การเปิดไฟล์HTML เพื่อแก้ไข ข้อใดถูกต้องที่สุด ก. ดับเบิ้ลคลิกที่ไฟล์นั้น ๆ ข. ลากไฟล์ที่ต้องการไปใส่ใน Recycle Bin ค. คลิกขวาที่ไฟล์แล้วเลือกคําสั่ง Open with > Notepad หรือ EditPlus ง. ถูกทุกข้อ 10.การทดสอบการทํางานของเว็บไซต์ข้อใดถูกต้องที่สุด ก. ดับเบิ้ลคลิกที่ไฟล์เพื่อเปิดไฟล์เว็บเพจในโปรแกรมเว็บเบราว์เซอร์ข. คลิกขวาที่ไฟล์แล้วเลือกคําสั่ง Open with > Notepad หรือ EditPlus ค. ลากไฟล์ไปวางในโฟลเดอร์ที่ต้องการ ง. ถูกทุกข้อ เฉลย 1.ค 2.ก. 3.ง.4.ง.5.ก.6.ค.7.ง.8.ง.9.ค.10.ง.

หน่วยท4ี่การจัดการข้อความในเว ็ บเพจ 4.1 การจัดรูปแบบการแสดงข้อความ การแสดงข้อความของเอกสาร HTML ในโปรแกรมเว็บเบราว์เซอร์ทั่วไป ถ้าไม่ใช้แท็กคําสั่งจัดรูปแบบ การ แสดงข้อความ ข้อความจะปรากฏต่อเนื่องกันไป จะทําให้มีปัญหาในการอ่านข้อความนั้น ๆ และทําให้ๆ หน้า เว็บเพจดูแน่นเกินไปไม่สวยงาม 4.1.1 การขึ้นบรรทัดใหม่<br> โดยปกติแล้วภาษา HTML จะไม่สามารถรับรู้ได้ว่าจะมีการขึ้นบรรทัดใหม่ถ้าเราต้องการขึ้นบรรทัดใหม่ในเว็บ เพจจะต้องใช้แท็ก cbr เพื่อระบุให้มีการขึ้นบรรทัดใหม่แท็ก <br> เป็นค่ากําหนดบรรทัด (Break Rule) แล้ว ขึ้นบรรทัดใหม่เพื่อแสดง ส่วนที่เหลือในบรรทัดถัดไป <IDOCTYPE html <html> <head <title> การขึ้นบรรทัดใหม่</title> <meta charset="UTF-8" </head> <body>บรรทัดทัดที่1 ย่อหน้า 1 ภาษา HTML เป็นการใช้สร้างเอกสารเว็บเพจตามมาตรฐานของ The World Wide Web Consortium (WSC) <br>ที่2 ที่สามารถส่งข้อมูลประเภทข้อความ รูปภาพ เสียง </body </html>

4.2 การจัดการรูปแบบตัวอักษร การจัดการรูปแบบตัวอักษรเป็นการกําหนดลักษณะและแบบของตัวอักษรแบบเจาะจงให้แสดงบน โปรแกรม เว็บเบราว์เซอร์ใด ๆ เช่น การกําหนดแบบตัวอักษร ตัวอักษร ขนาดตัวอักษรตัวหนา ตัวเอียง ตัวขดีตัวขีดเส้น ได้แสดงแบบเลขยกกําลังในสูตรทางคณิตศาสตร์หรือแสดงแบบตัวห้อมในสูตรทางวิทยาศาสตร์มีรายละเอียดดังต่อไปนี้4.2.1 การกําหนดรูปแบบตัวอักษร <font face> การกําหนดรูปแบบของตัวอักษรหรือข้อ ความสามารถกําหนดได้ด้วยการกําหนดแอททริบิวต์face แล้วตามด้วยชื่อของรูปแบบตัวอักษรที่ต้องการ ซึ่งหน้าเอกสารเว็บเพจสามารถกําหนดรูปแบบตัวอักษร หลายรูปแบบ เช่น AngsanaUPC, CordiaUPC, BrowalliaUPC หรือ MS Sans Serif เป็นต้น โดยโปรแกรม เว็บเบราว์เซอร์จะตรวจสอบการใช้รูปแบบตัวอักษรอัตโนมัติในที่นี้แนะนําให้ใช้รูปแบบ MS Sans Se เพื่อ ความเหมาะสมในการแสดงผลภาษาไทยในโปรแกรม เว็บบราว์เซอร์ทั่วไปมีรูปแบบคําสั่งดังนี้<font face a font>ข้อความที่ต้องการกําหนดรูปแบบตัวอักษร....</font> และถ้าต้องการกําหนดรูปแบบตัวอักษรมากกว่า 1 รูปแบบ เพื่อความยืดหยุ่นในการแสดงผล โปรแกรมเว็บบ ราว์เซอร์ในกรณีที่ไม่มีรูปแบบแรกสามารถแสดงเป็นรูปแบบลําดับต่อไป

4.3 การสร้างลําดับรายการของข้อมูล (List) การสร้างลําดับรายการของข้อมูลหรือ List เป็นการนําเสนอข้อมูลในแบบจัดเรียงรายการทําให้ข้อมูล เป็น รายการหัวข้อ มีการแบ่งข้อมูลออกเป็นหมวดหมู่ทําให้เอกสารจัดเป็นระเบียบสวยงาม อ่านได้ง่ายและ กระชับ มากขึ้น โดยแท็ก <ol> สามารถกําหนดแอททริบิวท์ได้ดังนี้type กําหนดประเภทของสัญลักษณ์ที่ต้องการแสดงดังนี้1 หมายถึง ตัวเลขโดยเรียงลําดับจาก 1 2 3... A หมายถึง พยัญชนะภาษาอังกฤษแบบตัวพิมพ์ใหญ่เรียงลําดับจาก A, B, C a หมายถึง พยัญชนะภาษาอังกฤษแบบตัวพิมพ์เล็กเรียงลําดับจาก a, b, | หมายถึง ตัวเลขโรมันแบบตัวพิมพ์ใหญ่เรียงลําดับจาก I, II, III... i หมายถึง ใช้ตัวเลขโรมันแบบตัวพิมพ์เล็กเรียงลําดับจาก i, ii, ili start กําหนดค่าเริ่มต้นให้กับหัวข้อแรกโดยปกติถ้าไม่ระบุจะเป็นหมายเลข 1 เสมอ

สรุปสาระสําคัญ การแสดงข้อความของเอกสาร HTML ในโปรแกรมเว็บเบราว์เซอร์ทั่วไปถ้าไม่มีการใช้แท็กคําสั่ง เกี่ยวกับ การจัดรูปแบบการแสดงความ การลดความปรากฏต่อเนื่องกันไป ทําให้เกิดความไม่สะดวกต่อการเข้า ชมเว็บไซต์หรืออาจจะทําให้มีปัญหาในการอ่านข้อความนั้น ๆ และทําให้หน้าเว็บเพจดูแน่นเกินไปไม่สวยงาม ดังนี้1. การจัดรูปแบบการแสดงข้อความ (1) การขึ้นบรรทัดใหม่<br> โดยปกติแล้วภาษา HTML จะไม่สามารถรับรู้ได้ว่าจะมีการขึ้น บรรทัด ใหม่ดังนั้นถ้าเราต้องการ ให้เกิดการขึ้นบรรทัดใหม่บนเว็บเพจเราจะต้องใช้คําสั่ง <br> (2) การขึ้นย่อหน้าใหม่<p> การจัดย่อหน้าในภาษ HTML จะใช้คําสั่ง <p> เป็นคําสั่งที่สั่งให้ระบบ ตัว โปรแกรมเว็บเบราวเซอร์ขึ้นย่อหน้าใหม่ (paragraph) <p>..ข้อความ</p> จัดวางตําแหน่งข้อความในย่อหน้ากําหนดค่าของการจัดตําแหน่งการแสดงผล <p align="left/right /center>.</p> (3) การอัดค้านบรรทัดใหม่chobr> ในการแสดงผลข้อความบนโปรแกรมเว็บเบราว์เซอร์และผู้ใช้ปรับเปลี่ยนขนาดหน้าต่างแสดงผลจะทําให้ข้อความที่มีความยาวเกินไปจะถูกโปรแกรมเว็บเบราว์เซอร์ตัดคํา ขึ้นบรรทัดใหม่โดยอัตโนมัติแบบทดสอบหลังเรียนหน่วยที่4 การจัดการข้อความในเว ็ บเพจ ชี้แจง ให้เลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1. คําสั่งขึ้นบรรทัดใหม่คือข้อใด ก. centers ข.<hr> ค.<br> ง.<wbr> 2. คําสั่งขึ้นย่อหน้าใหม่คือข้อใด ก. <br> ข.<nobr>...</nobr>

ค. <wbr> ง. <hr> 3. คําสั่งไม่ติดคําขึ้นบรรทัดใหม่คือข้อใด ก.<hr> ข. <wbr> ค. <hr> ง. <nobr>...</nobr> 4. คําสั่งแสดงข้อความตามรูปแบบที่กําหนดคือข้อใด ก. <nobr> ข.<br> ข<nobr>...</nobr>. ง. <wbr> 5. คําสั่งแสดงข้อความตามรูปแบบที่กําหนดคือข้อใด ก. <nobr>...</nobr> ข. <br>...</br ค. <pre>...</pre> ง. <p>...</p> 6. คําสั่งแสดงเส้นคั่นในแนวนอนคือข้อใด ก. <hr> ค. <xr> ข. <br> ง. <nr> 7. คําสั่งจัดข้อความให้อยู่กึ่งกลางหน้าคือข้อใด ก.<nr> ข. <align> ค. <middle> ง. <center> 8. คําสั่งแสดงช่องว่างหรือเว้นวรรคคือข้อใด ก. Don ข. Mov ค. Do ง.&nbsp; 9. คําสั่งกําหนดรูปแบบตัวอักษรคือข้อใด ก. <fonts ชื่อ font></font> ข. <font sizes ขนาดตัวอักษร >...</font> ค. <font face="ชื่อ font>...</font> ง. <font color= ชื่อสี>...</font> 10. คําสั่งกําหนดสีตัวอักษรคือข้อใด ก. <font color=" อสี่">...</font>

ข. <font size="ขนาดตัวอักษร">...</font> ค. <font face="ชื่อ font">...</font> ง. <font= ชื่อสี>...</font> 11. คําสั่งกําหนดขนาดของตัวอักษรคือข้อใด ก. <font="ขนาดตัวอักษร">...</font> ค. <font size="ขนาดตัวอักษร">...</font ข. <font face="ชื่อ font">...</font> ง. <font color="ชื่อสี">...</font> 12. จากคําสั่ง ข้อความ^{ข้อความ}" ปรากฏผลตามข้อใด ก. ข้อความ ข. ข้อความข้อความ ค. ข้อความข้อความ ง. ข้อความ 13. จากคําสั่ง <s>ข้อความ</s>" ปรากฏผลตามข้อใด ก. ข้อความ ข. ข้อความ ค. ข้อความ ง. ข้อความ 14. คําสั่งกําหนดลักษณะข้อความที่เป็นคํานิยามคือข้อใด ก.<dfn>...</dfn> ข. <code> </code> ค. <samp>...</samp> ง. ^... 15. คําสั่งสร้างตัวอักษรวิ่งคือข้อใด ก. <font>...</font ข. <img>...</img> ค.<marquee>...</marquee> ง. <pre>...</pre> 16. คําสั่งกําหนดหัวเรื่องคือข้อใด ก. <hn>...</hn> ข. <ol type="1">...</ol> ค. <ul>...</ul> ง. <dl>...</dl> 17. คําสั่งสร้างลําดับรายการแบบเรียงลําดับคือข้อใด ก. <hn>...</hn>

ข. <d! >...</dis ค. <ul>...</ul> ง. <ol type="1">...</ob 18. คําสั่งสร้างลําดับรายการแบบไม่เรียงลําดับข้อมูลคือข้อใด ก. <hn>...</hn> ข. <ol type="1">...</ol> ค. <dl>...</dl> ง.<ul>...</ul> 19. คําสั่งสร้างลําดับรายการแบบรายการคําศัพท์คือข้อใด ก. <hn>...</hn> ข. <ol type="1">..</ol> ค. <dt>...</dl ง. <b>...</ul> 20. จากคําสั่งต่อไปนี้จะปรากฏผลตามใด ก. 1. คําถามข้อที่1 a. ตัวเลือกที่1 b. ตัวเลือกที่2 2. คําถามข้อที่2 a. ตัวเลือกที่1 b. ตัวเลือกที่2 ข. 1. คําถามข้อที่1

2. คําถามข้อที่2 a. ตัวเลือกที่1 b.คําถามข้อที่2 ค. 1. คําถามข้อที่1 a. ตัวเลือกที่2 2. ตัวเลือกที่2 ง. 1. คําถามข้อที่1 2. คําถามข้อที่2 เฉลย 1.ค.2.ข.3.ง.4.ง.5.ค.6.ก.7.ง.8.ง.9.ค. 10.ก.11.ค. 12.ข.13. ง 14.ก. 15 .ค. 16.ก. 17.ง. 18.ง 19.ค 20.ก. หน่วยท5ี่การแทรกรูปภาพรูปภาพในเว ็ บเพจ 5.1 การแทรกรูปภาพในเว็บ การแทรกรูปภาพในเว็บเพจจะใช้คําสั่ง <img> พร้อมกับระบุชื่อไฟล์รูปภาพที่จะนํามาแสดงโดยมีรูปแบบคําสั่งดังนี้<img src=ชื่อไฟล์รูปภาพ ชื่อไฟล์รูปภาพจะต้องเป็นไฟล์รูปภาพที่สามารถแสดงผลในโปรแกรมเว็บบราว์เซอร์ได้รวมถึงไฟล์ภาพเคลื่อนไหวแบบ Gif Animation

5.2 การใส่ข้อความกํากับรูปภาพ นอกจากการแทรกรูปภาพในเว็บเพจแล้ว เรายังสามารถกําหนดให้มีการแสดงชื่อรูปภาพ คําบรรยาย หรือรายละเอียดของรูปภาพได้เมื่อนําเมาส์ไปชี้บนรูปภาพนั้น หรือในกรณีที่กําหนดให้โปรแกรมเว็บเบราว์เซ อร์ไม่ต้องแสดงรูปภาพเพื่อความรวดเร็วในการชมเว็บ รูปภาพนั้นจะถูกแทนที่ด้วยชื่อที่เรียกว่า Alternative Text โดยใช้การเพิ่มคุณสมบัติลงไปในคําสั่งแทรกรูปภาพ การใส่ข้อความกํากับรูปภาพควรใส่ในกรณีที่กําหนดให้โปรแกรมเว็บบราว์เซอร์ไม่ต้องโหลดรูปภาพมา แสดงจะมีข้อความกํากับรูปภาพปรากฏขึ้นมาแทน ซึ่งผู้ใช้สามารถอ่านคําบรรยายเพื่อให้ทราบว่ารูปภาพนั้นคือ อะไร เพราะข้อความกํากับรูปภาพจะปรากฏ ในขณะที่ภาพกําลังโหลดอยู่ทําให้ผู้ใช้ที่รออยู่ทราบว่าภาพนั้นคือ อะไรก่อนที่รูปภาพจะถูกโหลดมาครบ ด้วย การใช้แอททริบิวต์alt โดยมีรูปแบบคําสั่งดังนี้ 5.3 การกําหนดขนาดรูปภาพ

การกําหนดขนาดของรูปภาพเป็นการทําให้รูปภาพในเว็บเพจมีการแสดงผลในขนาดที่แตกต่างกันตามที่ต้องการ โดยใช้แท็ก <img> มีรูปแบบคําสั่งดังนี้<img src= ชื่อไฟล์รูปภาพ" width=" ค่าความกว้าง” height=" ค่าความสูง โดยการกําหนดความกว้างและความสูงของรูปภาพสามารถกําหนดได้2 รูปแบบ คือ 5.3.1 การกําหนดค่าที่แน่นอน มีหน่วยเป็นพิกเซล เช่น width="300" หมายถึง การกําหนดให้รูปภาพ มีความกว้าง 300 พิกเซล ซึ่งการกําหนดค่าด้วยวิธีนี้จะมีผลทําให้รูปภาพมีขนาดคงที่ไม่ว่าจะย่อหรือ ขยายการ แสดงผลจะไม่มีผลต่อขนาดของรูปภาพ 5.3.2 การกําหนดค่าเป็นสัดส่วนหรือร้อยละ โดยเปรียบเทียบกับส่วนการแสดงผล เช่น width="30%" หมายถึงการกําหนดให้รูปภาพมีความกว้าง 30% ของส่วนการแสดงผล และเมื่อมีการย่อหรือ ขยาย การแสดงผลจะทําให้ขนาดของรูปภาพย่อและขยายสัดส่วนของเว็บเพจแต่จะไม่สามารถใช้ได้กับแอททริบิวท์height 5.4 การใส่กรอบให้รูปภาพ การใส่กรอบให้รูปภาพเป็นการทําให้รูปภาพมีเส้นขอบเพื่อใช้เน้นรูปภาพหรือแยกส่วนที่เป็นรูปภาพจาก ข้อความมีรูปแบบคําสั่งดังนี้<img src= "ชื่อไฟล์รูปภาพ" border="ขนาดความหนาของกรอบ">;;;;;;;;;;;;;;;;;;;; โดยที่border เป็นแอทริบิวต์ที่ใช้ในการกําหนดขนาดกรอบของรูปภาพ โดยมีค่าเป็นตัวเลขตั้งแต่0-10

5.5 การจัดตําแหน่งข้อความและรูปภาพ การจัดตําแหน่งข้อความและรูปภาพ เป็นการจัดตําแหน่งให้รูปภาพเข้ากับข้อความที่แสดงบนเว็บเพจ ด้วยการ ใช้แอททริบิวท์align ของแท็ก <img> มีรูปแบบคําสั่งดังนี<img src="ชื่อไฟล์รูปภาพ" align="ตําแหน่งของรูปภาพ > โดย align เป็นแอททริบิวท์ที่ใช้ในการจัดตําแหน่งข้อความและรูปภาพ มีรายละเอียดดังนี้โดย Left จัดตําแหน่งรูปภาพด้านซ้ายของข้อความ Right จัดตําแหน่งรูปภาพด้านขวาของข้อความ Top จัดตําแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงในระดับ เดียวกันกับขอบด้านบนของรูปภาพ Middle จัดตําแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงในระดับ กึ่งกลางความสูงของรูปภาพ bottom จัดตําแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความ จะแสดงในระดับเดียว

5.6 การใช้รูปภาพเป็นพื้นหลัง การใช้รูปภาพเป็นพื้นหลังเป็นการตกแต่งหน้าเว็บเองด้วยรูปภาพที่แสดงเป็นพื้นหลังของเว็บเพจโดย ใช้ภาพมาเรียงต่อกันคล้ายการวางแผ่นกระเบื้องสามารถทําได้ด้วยการกําหนดแอท Backround <body> มีรูปแบบคําสั่งดังนี้<body background=ชื่อไฟล์รูปภาพ การใช้รูปภาพเป็นพื้นหลังนิยมใช้ไฟล์ประเภท " of หรือ "jpg โดยโปรแกรมเว็บเบราว์เซอร์จะน่า รูปภาพ เหล่านั้นมาเรียงต่อกันจนเต็มหน้าจอภาพของการแสดงผลโดยอัตโนมัติ สรุปสาระสําคัญ

การสร้างเว็บเพจนอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพเพื่อเพิ่มความน่าสนใจให้กับ เว็บเพจ นอกจากนี้รูปภาพยังสามารถซึ่งความหมายได้ชัดเจนกว่าข้อความ การใส่รูปภาพในเอกสาร HTML นั้นจะต้องเตรียมรูปภาพก่อนโดยมีวิธีการจัดการกับรูปดังนี้1.การแทรกรูปภาพในเว็บเพจจะใช้คําสั่ง cimies พร้อมกับระบุไฟล์รูปภาพที่จะนํามาแสดง โดยมีรูปแบบคําสั่ง ดังนี้<img src="โฟล์รูปภาพ 2.การใส่ข้อความกํากับรูปภาพจะใช้แอทริบิวต์คือ โดยมีรูปแบบคําสั่งแท็กดังนี้คําสั่งแท็ก <img มีรูปแบบ คําสั่งดังนี้<img src=" ชื่อไฟล์รูปภาพ"alt= ความกํากับรูปภาพ"> 3. การกําหนดขนาดรูปภาพ เป็นการทําให้รูปภาพบนเว็บเพจการแสดงผลในขนาดที่แตกต่างกัน โดย กําหนด ขนาดของรูปภาพในแท็ก <irng> มีรูปแบบคําสั่งดังนี้<img src="ชื่อไฟล์รูปภาพ width= ค่าความกว้าง” height=" ความสูง > 4. การใส่กรอบให้รูปภาพเป็นการทําให้รูปภาพมีขอบเส้นเพื่อเน้นรูปภาพหรือแยกส่วนที่เป็นรูปภา จากข้อความ ซึ่งสามารถกําหนดแอททริบิวต์border ในแม็ก cimmer มีรูปแบบคําสั่งดังนี้<img src="ชื่อไฟล์รูปภาพ border= ขนาดความหนาของกรอบ"> 5. การจัดตําแหน่งข้อความและรูปภาพเป็นการกําหนดแอททริบิวท์align ในแท็ก<img> มีรูปแบบคําสั่งดังนี้<img src="ซึ่งไฟล์รูปภาพ" align="ตําแหน่งของรูปภาพ"> 6. การจัดระยะห่างข้อความกับรูปภาพสามารถกําหนดขนาดช่องว่างระหว่างรูปภาพกับข้อความโดยมีแอททริบิวต์hspace และ Vspace มีรูปแบบคําสั่งดังนี้<img src="ชื่อไฟลร์ูปภาพ" vspace="ระยะห่างจากขอบบนและล่าง" hspace="ระยะห่างจากขอบซา้ยและขวา"> 7.การจัดข้อความจากแนวรูปภาพสามารถกําหนดแอทริบิวต์clear ในแท็ก <br> ซึ่งมีรูปแบบคําสั่งดังนี้<bt clear="ตําแหน่งความ"> 8. การใช้รูปภาพเป็นพื้นหลังทําได้โดยมีการกําหนดแอททริบิวต์background ในแท็ก <body>มีรูปแบบสั่ง ดังนี้<body background="ชื่อไฟลร์ูปภาพ"> แบบทดสอบหลังเรียนหน่วยที่5

การแทรกรูปภาพในเว ็ บเพจ ชี้แจง ให้เลือกคําตอบที่ถูกต้องที่สุดเพียงคําตอบเดียว 1. ข้อใดไม่ใช่ชนิดของไฟล์รูปภาพที่ใช้ในการสร้างเว็บเพจ ก. GIF ข.PNG ค.PSD ง. JPG 2. การแทรกรูปภาพบนเว็บเพจ ข้อใดถูกต้องที่สุด ก. <img="ชื่อไฟล์รูปภาพ"> ข. <img src="ชื่อไฟล์รูปภาพ > ค. <sound src="ชื่อไฟล์รูปภาพ > ง. <body src="ชื่อไฟล์รูปภาพ"> 3. การใส่ข้อความกํากับรูปภาพ ข้อใดถูกต้องที่สุด ก. <img src= "ชื่อไฟล์รูปภาพ ข้อความกํากับรูปภาพ ข. <title>ข้อความกํากับรูปภาพ</title> ค. <img src="ชื่อไฟล์รูปภาพ" alt="ข้อความกํากับรูปภาพ"> ง.</img> 5. <body> ข้อความกํากับรูปภาพ</body> 4. การกําหนดขนาดรูปภาพข้อใดถูกต้องที่สุด ก. <img src=" ชื่อไฟล์รูปภาพ" width="ค่าความกว้าง ความสูง ข. <img width="ค่าความกว้าง” height="ค่าความสูง ค. <img src="ชื่อไฟล์รูปภาพ">width="ค่าความกว้าง” height="ค่าความสูง” </img> ง. <img src="ชื่อไฟล์รูปภาพ" width="ค่าความกว้าง” height="ค่าความสูง 5. การใส่กรอบให้กับรูปภาพข้อใดถูกต้องที่สุด ก. <img src="ชื่อไฟล์รูปภาพ">width="ค่าความกว้าง” height="ค่าความสูง” </img> ข. <img border="ขนาดความหนาของกรอบ ค. <img src="ชื่อไฟล์รูปภาพ" border="ขนาดความหนาของกรอบ” > ง. <img src="ชื่อไฟล์รูปภาพ"> border="ขนาดความหนาของกรอบ”</img> 6. การจัดตําแหน่งข้อความและรูปภาพข้อใดถูกต้องที่สุด ก. <img src= ชื่อไฟล์รูปภาพ" align="ตําแหน่งของรูปภาพ ข. <img src= ชื่อไฟล์รูปภาพ" width="ค่าความกว้าง” height="ค่าความสูง"> ค. <img align="ตําแหน่งของรูปภาพ"> ง<img src="ชื่อไฟล์รูปภาพ > align = ตําแหน่งของรูปภาพ”</img>

7. การจัดข้อความจากแนวรูปภาพข้อใดถูกต้องที่สุด ก. <img src="ชื่อไฟล์รูปภาพ" align="ตําแหน่งของรูปภาพ > ข. <img src="ชื่อไฟล์รูปภาพ" width="ค่าความกว้าง” height="ค่าความสูง"> ค. <br clear align="ตําแหน่งข้อความ"> ง. <hr clear = "ตําแหน่งข้อความ 8. คําสั่งในข้อใด แสดงผลเหมือนกับคําสั่งต่อไปนี้ก.<p><img src="picture.jpg" align="top">ข้อความ</p>"ข. <p><img src='picture.jpg" align="bottom">ข้อความ </p> ค. <p><img src="picture.jpg" align="middle">ข้อความ </p> ง. <p><img src="picture.jpg" align="right">ข้อความ</p> 9. การใช้รูปภาพเป็นพื้นหลังข้อใดถูกต้องที่สุด ก. <p><img src="picture.jpg" align="left">ข้อความ<p> ข. <body besound="ชื่อไฟล์รูปภาพ"> ค. <body background="ชืชื่อไฟล์รูปภาพ"> ง. <body img src=" ชื่อไฟล์รูปภาพ 10. การกําหนดให้รูปภาพพื้นหลังเป็นแบบคงที่ข้อใดถูกต้องที่สุด ก. <body background="ชื่อไฟล์รูปภาพ" byproperties="fixed"> ข. <p><img src="picture.jpg" align="left">ข้อความ </p> ค. <body img src="ชื่อไฟล์รูปภาพ” byproperties="fixed"> ง. <p><img src="picture.jpg" align="left" bgproperties="fixed">ข้อความ เฉลย 1.ค. 2.ข. 3.ค.4.ก.5.ข .6.ค.7.ข.8.ง.9.ข.10.ก.หน่วยที่6 การแทรกตาราง 6.1 การสร้างตารางในเว็บเพจ คําสั่งภาษา HTML ที่ใช้สําหรับสร้างตารางจะประกอบด้วยคําสั่งแท็กหลายคําสั่งประกอบกันให้แสดงผล ออกมาเป็นตาราง มีรูปแบบดังนี้

<table>...</table> เป็นคําสั่งสร้างตาราง ใช้กําหนดขอบเขตของตารางรวมถึงการกําหนด รายละเอียดต่าง ๆ ที่มีการแสดงผลทั้งตาราง ๆ <tr>...</tr> เป็นคําสั่งที่ใช้กําหนดแถวของตาราง เป็นคําสั่งคู่ที่ต้องมีทั้งแท็กเปิดและแท็กปิดการใช้แท็ก <tr>...</tr> 1 ครั้ง หมายถึง 1 แถว <td>...</td> เป็นคําสั่งที่ใช้กําหนดจํานวนคอลัมน์ของตารางและใช้แสดงข้อมูลของแต่ละเซลล์ตารางเป็นคําสั่งคู่ที่ต้องมีทั้งแท็กเปิดและแท็กปิด การใช้แท็ก <td>...</td> 1 ครั้ง หมายถึง 1 คอลัมน์หรือ ใน ข้อ 1 เซลล์ 6.2 การใส่ข้อความในตาราง การใส่ข้อความในตารางสามารถทําได้ด้วยการพิมพ์ข้อความในแท็ก <td>...</td> ที่ต้องการมีรูปแบบดังนี้<td> ข้อความในตาราง</d ตัวอย่างที่6.3 <!DOCTYPE html> <html <head> <title> การใส่ข้อความในตาราง</title> <meta charset="UTF-8"> </head <body <table> <tr>

<td>ข้อความแถว! คอลัมน์:</td> <td>ข้อความแถว! คอลัมน์2 </td </tr> <tr> <td>ข้อความแถว2 คอลัมน์1 </td> <td>ข้อความแถว2 คอลัมน์2 </td> </tr> </table> </body> </html> 6.3 การจัดตําแหน่งข้อความในตาราง การกําหนดตําแหน่งข้อความภายในเซลล์ของตารางซึ่งปกติการแสดงข้อความในเซลล์ของตาราง จะ ชิดซ้ายของเซลล์เสมอ และถ้าต้องการกําหนดตําแหน่งข้อความของภายในเซลล์ของตาราง สามารถกําหนด ได้2 รูปแบบดังนี้6.3.1 การกําหนดตําแหน่งข้อความในแนวนอน สามารถทําได้ด้วยการกําหนดแอททริบิวท์alien โดย กําหนดที่แท็ก <tr> หรือแท็ก <td> มีรูปแบบคําสั่งดังนี้<table>

<tr align= ตําแหน่งการแสดงผลข้อความ" > <td align= ตําแหน่งการแสดงผลข้อความ"></td </tr> </table> แอททริบิวท์alien ใช้กําหนดตําแหน่งข้อความภายในเซลล์ของตารางซึ่งจะกําหนดหรือไม่กําหนดก็ได้มีรายละเอียดดังนี้Left กําหนดให้ข้อความชิดซ้ายของเซลล์ตาราง Right กําหนดให้ข้อความขิดขวาของเชลล์ตาราง Center กําหนดให้ข้อความกึ่งกลางของเซลล์ตาราง Justify กําหนดให้ข้อความเต็มช่องเชลล์ตาราง 6.4การให้หัวตาราง การกําหนดหัวข้อตารางจะใช้แท็ก <th> หรือ Table Head ซึ่งจะมีผลทําให้หัวของตารางมีตัวอักษร เป็นตัวหนาและมีตําแหน่งอยู่ที่กึ่งกลางของตาราง มีรูปแบบคําสั่งดังนี<table> <tr> <th>หัวข้อตาราง1</th> <th>หัวข้อตาราง2</th> <th>หัวข้อตาราง3</th> </tr <tr> <td>ข้อมูล1</td> <td>ข้อมูล2</td> <td>ข้อมูล3</td> </tr <tr> <td>ข้อมูล4</td> <td>มูล5</td <td>ข้อมูล6</td> </tr> </table>

<th>…<th> เป็นแท็กกําหนดหัวตาราง (Table Head) โดยข้อความที่อยู่ภายในคําสั่งนี้จะเป็นตัวหนา และจัด อยู่กึ่งกลางมีลักษณะการใช้งานเหมือนแท็ก <td> 6.5 การใช้ข้อความกํากับตาราง การใส่ข้อความกํากับตารางหรือการแสดงชื่อของตารางทําได้โดยใช้แท็ก secactions ซึ่งจะต้องกําหนด คําสั่ง นี้ไว้ในแท็ก <table> เท่านั้นz แท็ก ecaptions มีแอททริบิวท์4.0 ที่ใช้กําหนดตําแหน่งซึ่งตารางซึ่งมีรายละเอียดดังนี้Bottom กําหนดให้ชื่อตารางอยู่กึ่งกลางส่วนล่างของตาราง Center กําหนดให้ชื่อตารางอยู่กึ่งกลางส่วนบนของตาราง Left กําหนดให้ชื่อตารางอยู่ชิดซ้ายส่วนบนของตาราง Right กําหนดให้ตารางอยู่ชิดขวาส่วนบนของตาราง Top กําหนดให้ชื่อตารางอยู่กึ่งกลางชิดซ้ายส่วนบนของตาราง 6.6 การใส่ข้อความกํากับตาราง การกําหนดตําแหน่งของตารางเป็นการกําหนดให้ตารางอยู่ในตําแหน่งชิดซ้าย กึ่งกลางหรือชิดขวา ซึ่ง ปกติตารางจะชิดซ้ายของหน้าเว็บเพจเสมอ สามารถกําหนดตําแหน่งได้โดย ใช้แอทริบิวต์align ภายในแท็ก <table> มีรูปแบบคําสั่งดังนี้การกําหนดตําแหน่งของตาราง <table align="ตําแหน่งของตาราง"> แอททริบิวท์align ใช้กําหนดตําแหน่งของตาราง โดยปกติหากได้กําหนดแอททริบิวท์align จะมีค่าเป็น left นอกจากนั้นยังสามารถกําหนดของตารางในตําแหน่งต่าง ๆ ได้ดังนี้Center กําหนดให้ตารางให้อยู่กึ่งกลางของหน้าเว็บเพจ Left กําหนดให้ตารางชิดซ้ายของหน้าเว็บเพจ Right กําหนดให้ตารางชิดขวาของหน้าเว็บเพจ

6.7 การกําหนดขนาดตาราง การกําหนดรายละเอียดการแสดงผลของตาราง สามารถกําหนดได้ในแท็ก <table> เช่น การกําหนด ขนาดของตารางปกติถ้าไม่มีการกําหนดขนาดของตาราง ขนาดจะเป็นไปตามข้อความในเซลล์นั้นและ ถ้า ต้องการกําหนดขนาดตารางสามารถทําได้โดยการกําหนดแอททริบิวท์ในแท็ก <table> มีรูปแบบดังนี้ การกําหนดขนาดสามารถกําหนดได้2 รูปแบบดังนี้6.7.1 การกําหนดขนาดด้วยค่าตัวเลขที่แน่นอน มีหน่วยเป็นพิกเซล เช่น width="300" หมายถึง การ กาหนดให้ตารางมีความกว้างเท่ากับ 300 พิกเซล 6.7.2 การกําหนดขนาดด้วยค่าตัวเลขเป็นสัดส่วนหรือร้อยละ โดยเปรียบเทียบกับการผล เช่น width="40%" หมายถึง การกําหนดให้ตารางมีความกว้างเท่ากับร้อยละ 40 ของส่วนการแสดงผลหรือหน้า 6.8 การกําหนดสีให้กับตาราง การกําหนดสีให้กับตารางเป็นการกําหนดให้ตารางมีสีตามต้องกา ซึ่งสามารถกําหนดสีได้ทั้งพื้นหลัง ตาราง และกําหนดสีให้แต่ละเซลล์ดังนี้6.8.1การกําหนดสีพื้นหลังของตาราง การกําหนดสีพื้นหลังของตารางทําได้ด้วยการกําหนดแอททริบิวต์bgcolor ภายในแท็ก <table> มีรูปแบบคําสั่งดังนี้<table bgcolor=" สีRGB หรือ ชื่อของ"" > 6.9 การรวมเซลล์ในตาราง การรวมเซลล์ในตารางเป็นการทําให้เซลล์ในตารางหลายเซลล์รวมเป็นเซลล์เดียวกัน ซึ่งสามารถทําได้ทั้งแนวตั้งและแนวนอนดังนี้6.9.1 การรวมเซลล์ในแนวนอน สามารถทําได้โดยการกําหนดแอททริบิวท์colspanที่แท็ก<std> โดยมีการกําหนดรูปแบบดังนี้

6.10 การกําหนดการแสดงเส้นตาราง การกําหนดให้แสดงหรือไม่แสดงเส้นของตารางบางส่วน เพื่อให้เหมาะสมสําหรับการแสดงข้อมูลบาง ประเภท มี2 รูปแบบดังนี้6.10.1 การแสดงเส้นขอบด้านนอกของตาราง มีรูปแบบการใช้คําสั่งดังนี้<table frame="รูปแบบที่ต้องการ โดยแอททริบิวท์frame เป็นการกําหนดให้แสดงหรือไม่แสดงเส้นของตารางบางส่วน มีรายละเอียดดังนี้Above แสดงเฉพาะเส้นด้านบนของเซลล์Below แสดงเฉพาะเส้นด้านล่างของเซลล์Border แสดงเส้นทุกด้าน Box แสดงเส้นทุกด้าน Hsides แสดงเส้นแนวนอนทุกเส้น Hs แสดงเฉพาะเส้นด้านซ้ายของเซลล์Vold แสดงเส้นแนวตั้งทุกเส้น Vsides แสดงเฉพาะเส้นด้านขวาของเซลล์สรุปสาระสําคัญ 1. การสร้างตารางในเว็บเพจ คําสั่งภาษา HTML ที่ใช้สําหรับสร้างตารางจะประกอบด้วยคําสั่งแท็กต่าง ๆ หลายคําสั่งประกอบกัน ให้แสดงผลออกมาเป็นตาราง และมีความหมายของคําสั่งดังนี้<table> <tr <b>ข้อมูลในตาราง</td>