DCRUB

แท็ก <thead> ใน HTML5 ใช้เพื่อจัดกลุ่มแถวหัวตาราง (table header rows) ในตาราง <table> โดยเฉพาะ ซึ่งจะช่วยในการจัดรูปแบบตารางให้เข้าใจง่ายขึ้น โดยเฉพาะในกรณีที่ตารางมีหลายแถวหลายคอลัมน์ การใช้ <thead> จะช่วยแยกส่วนหัวตารางออกจากเนื้อหาหลักหรือข้อมูลที่แสดงผลในตาราง การใช้งานแท็ก <thead> โครงสร้างพื้นฐานของตารางที่มีการใช้แท็ก <thead> มีดังนี้ อธิบายโครงสร้าง ประโยชน์ของการใช้ <thead> ตัวอย่างการใช้ <thead> กับ CSS การจัดรูปแบบหัวตารางให้มีสไตล์พิเศษ ผลลัพธ์ การประยุกต์ใช้ <thead> กับ <tfoot> นอกจาก <thead> สำหรับหัวตารางแล้ว ยังสามารถใช้ <tfoot> สำหรับส่วนท้ายของตารางได้ด้วย…

แท็ก <th> ใน HTML5 ใช้สำหรับระบุส่วนหัวของตาราง (Table Header) ซึ่งมักจะอยู่ในแท็ก <thead> ของตารางหรือใช้ร่วมกับแท็ก <tr> เพื่อกำหนดหัวข้อคอลัมน์หรือแถวในตาราง <table> รูปแบบการใช้งานแท็ก <th> กำหนดหัวของคอลัมน์: ใช้ <th> ภายใน <tr> เพื่อกำหนดหัวข้อของคอลัมน์ ดังตัวอย่าง ในตัวอย่างนี้ <th> ถูกใช้ใน <tr> แรกเพื่อกำหนดหัวของแต่ละคอลัมน์ในตาราง กำหนดหัวของแถว: นอกจากการใช้งานในคอลัมน์แล้ว <th> สามารถใช้ในแถวเพื่อกำหนดหัวของแถวได้ด้วย ดังตัวอย่าง ในตัวอย่างนี้ <th> ใช้ในแถวแรกเป็นหัวของคอลัมน์ และในแถวที่สองและสามเพื่อระบุหัวของแถว การจัดแนวข้อความ: ค่าเริ่มต้นของแท็ก <th> คือข้อความจะถูกทำให้เป็นตัวหนาและอยู่กึ่งกลางของเซลล์…

<tfoot> ใน HTML5 คือแท็กที่ใช้สำหรับการกำหนดส่วนท้ายของตาราง (table footer) โดยแท็กนี้จะใช้ควบคู่กับแท็ก <table>, <thead>, และ <tbody> เพื่อแบ่งส่วนต่าง ๆ ของตารางให้อ่านและจัดการได้ง่ายขึ้น การใช้งานทั่วไปของ <tfoot> แท็ก <tfoot> จะถูกใช้เพื่อแสดงข้อมูลที่เกี่ยวข้องกับการสรุปผลลัพธ์ หรือตัวเลขสรุปที่ด้านล่างของตาราง เช่น การสรุปยอดรวม เป็นต้น แม้ว่าจะอยู่ในตำแหน่งท้ายของตาราง แต่ HTML จะทำการโหลด <tfoot> ก่อน <tbody> เมื่อทำการเรนเดอร์ในหน้าเว็บ โครงสร้างพื้นฐาน การประยุกต์ใช้งาน <tfoot> ในรูปแบบต่าง ๆ สรุปยอดรวม ใช้ <tfoot> สำหรับการแสดงผลรวมของข้อมูลในตาราง…

น HTML5, <textarea> เป็นแท็กที่ใช้สร้างฟิลด์ที่ผู้ใช้งานสามารถพิมพ์ข้อความได้หลายบรรทัด เช่น ในแบบฟอร์มสำหรับกรอกข้อมูล ประโยชน์ของ <textarea> คือการรับข้อมูลที่เป็นข้อความยาว ซึ่งต่างจาก <input> ที่ใช้รับข้อมูลเพียงบรรทัดเดียว การใช้งาน <textarea> เบื้องต้น คุณสมบัติที่สามารถใช้ได้ของ <textarea> placeholder: ใช้เพื่อแสดงข้อความตัวอย่างในฟิลด์ก่อนที่ผู้ใช้งานจะพิมพ์ maxlength: จำกัดจำนวนตัวอักษรที่ผู้ใช้งานสามารถพิมพ์ลงในฟิลด์ได้ readonly: กำหนดให้ฟิลด์เป็นแบบอ่านอย่างเดียว ไม่สามารถแก้ไขได้ disabled: ปิดการใช้งานฟิลด์ ทำให้ไม่สามารถพิมพ์หรือคลิกได้ wrap: กำหนดลักษณะการตัดคำในฟิลด์ การตั้งค่าเริ่มต้น: สามารถเพิ่มข้อความเริ่มต้นลงใน <textarea> ได้โดยใส่ระหว่างแท็กเปิดและปิด การปรับแต่งเพิ่มเติมด้วย CSS เราสามารถปรับแต่งการแสดงผลของ <textarea> ได้โดยใช้ CSS เช่น…

ใน HTML5 มีหนึ่งฟีเจอร์ที่มีชื่อว่า <template> ซึ่งเป็น tag ที่ใช้สำหรับการกำหนดโครงสร้างของ HTML ที่ยังไม่ต้องการให้แสดงผลทันทีในหน้าเว็บ เพียงแต่ต้องการเก็บไว้รอให้ใช้งานภายหลัง เช่นเมื่อเรียกใช้งาน JavaScript ก็สามารถดึงส่วนประกอบ HTML จากภายใน <template> ออกมาได้ ซึ่งจะช่วยให้เราจัดการกับเนื้อหาได้ง่ายขึ้น ลักษณะการทำงานของ <template> Tag การใช้งานพื้นฐานของ <template> ในตัวอย่างนี้ เมื่อผู้ใช้คลิกปุ่ม “Load Content” จะมีการดึงข้อมูลจาก <template> และเพิ่มเนื้อหานั้นลงใน div#content การประยุกต์ใช้งาน <template> ในรูปแบบต่างๆ 1. การใช้กับการโหลดข้อมูลที่แสดงผลช้า (Lazy Load Content) เราสามารถใช้…

ใน HTML5 แท็ก <td> ใช้ในการสร้าง “เซลล์ข้อมูล” (data cell) ภายในตาราง (table) โดยอยู่ภายในแท็ก <tr> (table row) เพื่อกำหนดแต่ละเซลล์ในแถวของตาราง <table> การใช้งานพื้นฐานของ <td> การประยุกต์ใช้งานเพิ่มเติม การรวมเซลล์ (colspan) ผลลัพธ์: เซลล์แรกของแถวแรกจะรวม 2 คอลัมน์ การรวมเซลล์ในแนวตั้ง (rowspan) ผลลัพธ์: เซลล์แรกจะครอบคลุม 2 แถวในแนวตั้ง การจัดวางเนื้อหาใน <td> การจัดการสไตล์ด้วย CSS นอกจากการใช้แอตทริบิวต์แบบ inline เราสามารถใช้ CSS เพื่อจัดการรูปแบบเซลล์ได้…

<tbody> เป็นหนึ่งในแท็กที่ใช้ใน HTML5 เพื่อกำหนดกลุ่มของแถว (rows) ในตาราง <table> ใช้เพื่อจัดกลุ่มเนื้อหาที่เป็นแถวของข้อมูลในตาราง โดยปกติจะใช้ควบคู่กับ <thead> สำหรับหัวตาราง และ <tfoot> สำหรับท้ายตาราง รูปแบบการใช้งาน <tbody> โครงสร้างพื้นฐาน โครงสร้างของ <tbody> จะถูกวางอยู่ภายในแท็ก <table> และควบคุมแถวของข้อมูลที่เป็นเนื้อหาหลักของตาราง การใช้งานร่วมกับ <thead> และ <tfoot> การใช้ <tbody> มักจะมีการใช้ร่วมกับ <thead> สำหรับหัวข้อของตาราง และ <tfoot> สำหรับข้อมูลในส่วนท้ายของตาราง การจัดการกับสไตล์ผ่าน CSS <tbody> สามารถใช้งานร่วมกับ CSS เพื่อกำหนดสไตล์ให้กับแถวในส่วนของเนื้อหาหลักได้…

แท็ก <table> ใน HTML5 ใช้ในการสร้างตารางข้อมูลในหน้าเว็บ โดยมีองค์ประกอบหลักต่างๆ ที่ใช้ร่วมกันเพื่อจัดระเบียบข้อมูลในรูปแบบแถวและคอลัมน์ ตารางใน HTML ประกอบด้วยองค์ประกอบพื้นฐานต่อไปนี้ องค์ประกอบหลักของแท็ก <table> ตัวอย่างการใช้งานพื้นฐาน การใช้งานที่ซับซ้อนมากขึ้น การรวมแถว (rowspan) และการรวมคอลัมน์ (colspan) สามารถใช้ rowspan เพื่อรวมแถวหลายๆ แถวเข้าด้วยกัน และใช้ colspan เพื่อรวมคอลัมน์หลายๆ คอลัมน์เข้าด้วยกันได้ การกำหนดส่วนหัว ตาราง เนื้อหา และส่วนท้าย แท็ก <thead>, <tbody>, และ <tfoot> ใช้ในการกำหนดส่วนต่างๆ ของตารางเพื่อแยกเป็นหัวเรื่อง เนื้อหา และท้ายเรื่อง การตกแต่งตารางด้วย…

<svg> (Scalable Vector Graphics) เป็นแท็กที่ใช้สำหรับการแสดงผลกราฟิกแบบเวกเตอร์ใน HTML5 กราฟิกแบบเวกเตอร์จะมีความยืดหยุ่น เพราะสามารถขยายหรือย่อขนาดได้โดยไม่สูญเสียความคมชัด เหมาะสำหรับการใช้กับโลโก้, ไอคอน, แผนภาพ, และกราฟิกที่ต้องการความคมชัดสูง การใช้งาน <svg> Tag นั้นสามารถแสดงผลกราฟิกด้วยคำสั่งที่มีลักษณะเป็นโค้ด ซึ่งสามารถควบคุมรูปร่าง สี ขนาด และตำแหน่งของกราฟิกได้ การใช้งาน <svg> Tag ทั่วไป ตัวอย่างต่อไปนี้แสดงการใช้งาน <svg> เพื่อสร้างรูปแบบต่าง ๆ ที่สามารถประยุกต์ใช้ได้ การสร้างรูปทรงเรขาคณิต การสร้างเส้นโค้ง (Path) การใช้ข้อความ (Text) ใน SVG การใช้กราฟิกแบบเวกเตอร์เป็นภาพพื้นหลัง (Background) การใช้ฟิลเตอร์ (Filters)…

ใน HTML5 แท็ก <sup> (superscript) ใช้สำหรับแสดงข้อความในรูปแบบตัวยก หรือข้อความที่เล็กกว่าปกติและถูกยกขึ้นไปด้านบนของข้อความปกติ การใช้งาน <sup> มักพบในการเขียนสัญลักษณ์ทางคณิตศาสตร์, หน่วยทางวิทยาศาสตร์, หรือการเขียนที่ต้องการแสดงลำดับของตัวเลขเช่นการเขียนลำดับที่ เช่น วันที่, หรือการอ้างอิงในงานเขียน รูปแบบการใช้งานแท็ก <sup> ใช้กับสูตรคณิตศาสตร์ การใช้ <sup> เพื่อเขียนเลขยกกำลังในสูตรทางคณิตศาสตร์ เช่น ผลลัพธ์ ใช้กับหน่วยทางวิทยาศาสตร์ ใช้แสดงหน่วยหรือสัญลักษณ์ในวิทยาศาสตร์ เช่น หน่วยองศาเซลเซียส หรือเลขแสดงปริมาณบางอย่าง ผลลัพธ์ ใช้ในการเขียนลำดับที่ ใช้แสดงลำดับเช่น วันที่ หรือการเขียนลำดับที่ เช่น 1st, 2nd, 3rd ผลลัพธ์ ใช้ในการอ้างอิงทางวิชาการ ในการเขียนเอกสารหรือบทความวิชาการ…

ใน HTML5 แท็ก <summary> ที่ทำงานคู่กับแท็ก <details> โดยแท็ก <summary> จะใช้สำหรับสร้างส่วนหัวของข้อมูลที่สามารถย่อ/ขยายได้ เมื่อผู้ใช้คลิกที่ <summary> ข้อมูลภายในแท็ก <details> จะถูกแสดงหรือซ่อนตามต้องการ การใช้งานแท็ก <summary> แท็ก <summary> ถูกใช้เพื่อระบุชื่อหัวข้อหรือหัวเรื่องของส่วนที่สามารถขยายหรือย่อได้ โดยจะวางไว้เป็นลูกของ <details> เพื่อให้ทำงานร่วมกัน ตัวอย่างการใช้งาน <summary> กับ <details> ในตัวอย่างนี้ แท็ก <summary> แสดงหัวข้อ “อ่านเพิ่มเติมเกี่ยวกับ HTML5” และเมื่อคลิกที่หัวข้อนี้ ข้อความภายในแท็ก <details> จะถูกแสดงขึ้นมา รูปแบบการประยุกต์ใช้งานของ <summary> ข้อมูลที่ซ่อน/แสดง เราสามารถใช้…

ใน HTML5 แท็ก <sub> ใช้สำหรับแสดงข้อความที่อยู่ในรูปแบบ “ตัวห้อย” (subscript) ซึ่งเป็นข้อความที่แสดงด้านล่างของข้อความหลัก นิยมใช้ในการแสดงสัญลักษณ์ทางคณิตศาสตร์ เคมี หรือตัวอักษรที่อยู่ในตำแหน่งตัวห้อย เช่น ดัชนีล่างในสูตรทางคณิตศาสตร์ หรือสูตรเคมี รูปแบบการใช้งาน <sub> การแสดงตัวเลขดัชนีล่าง (Subscript Numbers) ใช้ในกรณีที่ต้องการแสดงตัวเลขที่เป็นดัชนีล่าง เช่น ตัวแปรคณิตศาสตร์หรือสูตรต่าง ๆ ในตัวอย่างนี้ ค่า a2, b2, และ c2 จะแสดงเป็นรูปแบบตัวห้อย การใช้ในสูตรเคมี (Chemical Formulas) ในกรณีของสูตรเคมี ตัวห้อยใช้แทนจำนวนอะตอมในโมเลกุล เช่น น้ำ (H2O) คำว่า H2O…

ใน HTML5 แท็ก <style> ถูกใช้สำหรับการเพิ่ม CSS ภายในไฟล์ HTML เอง (Internal CSS) เพื่อกำหนดสไตล์ให้กับองค์ประกอบต่าง ๆ ของหน้าเว็บ โดยแท็ก <style> จะถูกวางภายใน <head> ของเอกสาร HTML รูปแบบของการใช้งานแท็ก <style> สามารถแบ่งออกเป็นหลายกรณีตามความต้องการ การใช้งานพื้นฐานของแท็ก <style> การประยุกต์ใช้แท็ก <style> ในการเลือกเฉพาะบางคลาสและไอดี นอกจากการกำหนดสไตล์โดยใช้ชื่อแท็กโดยตรง เรายังสามารถใช้คลาส (class) และไอดี (id) เพื่อกำหนดสไตล์เฉพาะบางส่วนได้ เช่น การใช้ Pseudo-classes และ Pseudo-elements ในแท็ก…

ใน HTML5, แท็ก <strong> ใช้เพื่อเน้นความสำคัญของข้อความ ซึ่งมักจะแสดงเป็นตัวหนาโดยเบราว์เซอร์ส่วนใหญ่ แต่จุดประสงค์หลักของแท็ก <strong> ไม่ใช่แค่การทำตัวหนา แต่เพื่อเน้นว่าข้อความมีความสำคัญมากกว่าเนื้อหาอื่นๆ การใช้แท็กนี้มีความหมายเชิงโครงสร้าง (semantic) มากกว่าการจัดรูปแบบ (presentation) เพียงอย่างเดียว รูปแบบการใช้งานของ <strong> และการประยุกต์ใช้ การเน้นความสำคัญของข้อความ: ใช้ <strong> เพื่อเน้นว่าข้อความมีความสำคัญเมื่อเทียบกับเนื้อหาอื่นๆ ในหน้า ในตัวอย่างนี้ คำว่า “ผ่าน” ถูกเน้นว่าเป็นสิ่งที่สำคัญกว่าข้อความอื่นในประโยค ใช้แทนการจัดรูปแบบ (แทนการใช้ <b>): แท็ก <strong> ควรใช้ในกรณีที่ข้อความมีความสำคัญเชิงเนื้อหา ส่วน <b> ควรใช้เมื่อต้องการเพียงทำตัวหนาโดยไม่มีความหมายเชิงเนื้อหา ในข้อความเตือนหรือประกาศ: เมื่อมีข้อความที่ต้องการเตือนหรือเน้นเรื่องความสำคัญเป็นพิเศษ เช่น ในหน้าประกาศหรือการแจ้งเตือน…

<span> ใน HTML5 เป็นหนึ่งใน inline element ที่ใช้เพื่อการจัดกลุ่มเนื้อหาภายในเอกสาร HTML โดยไม่ได้มีลักษณะการแสดงผลที่เจาะจงแบบเดียวกันกับ <div> ซึ่งเป็น block-level element การใช้งานทั่วไปของ <span> จะมีลักษณะเพื่อการกำหนดหรือปรับแต่งสไตล์ เช่นการเพิ่ม CSS หรือตำหนิองค์ประกอบต่าง ๆ ด้วย JavaScript ตัวอย่างการใช้งานพื้นฐานของ <span> ในตัวอย่างนี้ <span class=”highlight”>เน้นข้อความนี้</span> ใช้ <span> เพื่อกำหนดให้ส่วนของข้อความนั้นมีการเปลี่ยนแปลงสไตล์ เช่นสีแดงและตัวหนา รูปแบบการประยุกต์ใช้งาน 1. การใช้งานเพื่อการจัดกลุ่มข้อความ ใช้ <span> เพื่อจัดกลุ่มข้อความบางส่วนเพื่อเปลี่ยนแปลงสไตล์หรือเนื้อหา ในตัวอย่างนี้ ส่วนของ <span>…

<source> Tag ใน HTML5 ใช้เพื่อระบุแหล่งข้อมูลที่หลากหลายให้กับองค์ประกอบสื่อ เช่น <video>, <audio>, และ <picture> ซึ่งจะช่วยให้เบราว์เซอร์สามารถเลือกใช้ไฟล์ที่เหมาะสมที่สุดตามรูปแบบไฟล์ (file format) หรือเงื่อนไขต่างๆ ที่กำหนดไว้ เช่น ความกว้างของหน้าจอ ความละเอียดของอุปกรณ์ เป็นต้น การใช้งาน <source> Tag ในแต่ละบริบท สำหรับ <video> ใช้เพื่อระบุแหล่งที่มาของไฟล์วิดีโอในรูปแบบต่าง ๆ เช่น MP4, WebM, หรือ Ogg เพื่อให้เบราว์เซอร์เลือกไฟล์ที่รองรับได้ดีที่สุด สำหรับ <audio> ใช้เพื่อระบุแหล่งที่มาของไฟล์เสียงในรูปแบบต่าง ๆ เช่น MP3, Ogg,…

แท็ก <small> ใน HTML5 ใช้เพื่อระบุข้อความที่มีขนาดเล็กกว่าปกติหรือเป็นข้อความที่ไม่เน้นมาก โดยมักใช้ในการแสดงข้อมูลเสริมหรือข้อความที่เป็นข้อยกเว้น เช่น คำเตือน, ลิขสิทธิ์, หรือคำอธิบายเสริมที่ไม่สำคัญมากนัก ซึ่งจะทำให้ตัวอักษรในแท็กนี้เล็กลงจากขนาดของข้อความปกติ ลักษณะการใช้งานของ <small> แสดงข้อความเสริมที่ไม่เน้น ใช้เพื่อระบุข้อความที่ไม่สำคัญมาก ซึ่งมักจะอยู่ใต้หัวข้อหรือเนื้อหาหลัก เช่น ข้อความลิขสิทธิ์ หรือคำอธิบายเล็ก ๆ น้อย ๆ ที่ไม่ต้องการการเน้น แสดงข้อความลิขสิทธิ์หรือคำเตือน แท็ก <small> มักใช้แสดงข้อความที่เกี่ยวข้องกับลิขสิทธิ์หรือข้อจำกัดต่าง ๆ ที่ผู้ใช้ต้องทราบ เช่น ลิขสิทธิ์ข้อมูลหรือคำเตือนทางกฎหมาย ใช้กับข้อความในฟอร์ม ข้อความเพิ่มเติมหรือตัวอย่างในฟอร์มสามารถใส่ใน <small> เพื่อไม่ให้โดดเด่นมากเกินไปแต่ยังคงช่วยผู้ใช้งานได้ ใช้กับข้อความสั้นๆ ในตาราง สามารถใช้ในตารางเพื่อแสดงข้อมูลย่อย ๆ ที่ไม่จำเป็นต้องให้ความสำคัญมาก…

การใช้งาน <select> ใน HTML5 เป็นการสร้าง “กล่องรายการตัวเลือก” (dropdown list) ให้ผู้ใช้สามารถเลือกค่าได้หนึ่งค่า (หรือหลายค่าในกรณีที่ใช้คุณสมบัติ multiple) จากรายการที่กำหนดไว้ โดยรายการแต่ละรายการจะถูกกำหนดด้วยแท็ก <option> ที่อยู่ภายในแท็ก <select> นั่นเอง โครงสร้างพื้นฐานของ <select> ตัวอย่างพื้นฐาน คุณสมบัติ multiple คุณสมบัติ multiple ทำให้สามารถเลือกได้หลายค่า ในกรณีนี้ ผู้ใช้สามารถกดปุ่ม Ctrl (หรือ Command บน Mac) เพื่อเลือกหลายรายการพร้อมกัน การใช้งาน size คุณสมบัติ size สามารถกำหนดจำนวนของตัวเลือกที่จะแสดงในกล่อง dropdown โดยไม่ต้องคลิกเพื่อดูทั้งหมด…

แท็ก <section> ใน HTML5 ใช้เพื่อกำหนดกลุ่มของเนื้อหาที่มีความสัมพันธ์กัน หรือเป็นเนื้อหาที่แยกออกมาเป็นหมวดหมู่ชัดเจน โดยจะเป็นการแยกเนื้อหาเป็นส่วนย่อย ๆ เพื่อให้เนื้อหาดูเป็นระเบียบมากขึ้นและสามารถอธิบายเนื้อหานั้นได้ว่าเกี่ยวข้องกับอะไร ตัวอย่างการใช้งานเช่น การแบ่งเนื้อหาบนหน้าเว็บเพจให้เป็นหมวดหมู่ต่าง ๆ เช่น ข่าวสาร บทความ ผลิตภัณฑ์ หรือบทคอมเมนต์ เป็นต้น การใช้งานแท็ก <section> มักจะใช้ในบริบทที่เนื้อหานั้นมีหัวข้อหรือกลุ่มเนื้อหาที่มีความสัมพันธ์กัน ซึ่งแตกต่างจาก <div> ที่ใช้เพื่อจัดกลุ่มเนื้อหาทั่วไปโดยไม่มีความหมายเชิงเนื้อหาเฉพาะเจาะจง รูปแบบการใช้งาน <section> การใช้งานพื้นฐานในเว็บเพจทั่วไป ในกรณีที่ต้องการแบ่งเนื้อหาในหน้าเว็บเป็นกลุ่มย่อยที่มีหัวข้อแตกต่างกัน การใช้ <section> เพื่อกำหนดบทความหรือเนื้อหาตามหมวดหมู่ หากเว็บไซต์มีเนื้อหาหลายบทความ สามารถใช้ <section> เพื่อจัดหมวดหมู่ได้ การใช้ <section> ภายในบทความ สามารถแบ่งกลุ่มข้อมูลภายในบทความเดียวกันเป็นส่วน ๆ…

ใน HTML5, แท็ก <script> ใช้สำหรับการรวมและเรียกใช้โค้ด JavaScript ภายในเว็บเพจ ซึ่งมีหลายรูปแบบการใช้งานขึ้นอยู่กับวิธีการจัดการและการโหลดสคริปต์ การฝัง JavaScript ภายในแท็ก <script> รูปแบบนี้คือการเขียนโค้ด JavaScript ภายในไฟล์ HTML โดยตรง ในตัวอย่างนี้ JavaScript จะถูกฝังภายใน <script> และจะทำงานเมื่อเว็บเพจโหลดเสร็จแล้ว การลิงก์ไฟล์ JavaScript ภายนอก การแยกโค้ด JavaScript ออกมาไว้ในไฟล์แยกจาก HTML ช่วยให้การจัดการโค้ดสะดวกขึ้น app.js การใช้ไฟล์ JavaScript ภายนอกจะต้องระบุด้วย src attribute ไปยังไฟล์ที่เก็บโค้ด JavaScript การใช้ defer…

ใน HTML5 แท็ก <samp> ใช้สำหรับการแสดงตัวอย่างข้อมูลจากโปรแกรมหรือการส่งคืนผลลัพธ์จากระบบ เช่น ข้อความแสดงผลลัพธ์ของโค้ด ข้อความที่อธิบายการทำงานของคำสั่ง หรือการแสดงผลลัพธ์จากการเรียกใช้งานฟังก์ชัน เป็นต้น โดยข้อความภายในแท็ก <samp> จะแสดงผลเป็นฟอนต์แบบ fixed-width หรือ monospace ซึ่งช่วยแยกข้อความที่เป็นผลลัพธ์ออกจากข้อความอื่นที่เป็นข้อความปกติ ตัวอย่างการใช้งาน <samp> 1. การแสดงผลลัพธ์จากคำสั่งหรือโค้ด แท็ก <samp> ถูกใช้เพื่อแสดงผลลัพธ์จากการพิมพ์คำสั่ง ping ซึ่งเป็นการจำลองผลลัพธ์จากโปรแกรม 2. การแสดงข้อความที่ได้จากฟังก์ชัน ในตัวอย่างนี้ <samp> ใช้เพื่อแสดงข้อความที่เป็นผลลัพธ์จากการเรียกใช้งานฟังก์ชัน ซึ่งเป็นข้อความที่ระบบส่งกลับมาให้ผู้ใช้ 3. แสดงผลลัพธ์ของการทดสอบ ใช้ <samp> เพื่อแสดงผลการทดสอบระบบหรือฟังก์ชันว่าผลลัพธ์เป็นอย่างไร เช่น “Test passed”…

แท็ก <s> ใน HTML5 ใช้ในการแสดงข้อความที่เป็น “strikethrough” หรือขีดฆ่าข้อความนั้น ๆ โดยทั่วไปจะใช้เพื่อบอกว่าข้อความดังกล่าวไม่เกี่ยวข้องแล้วหรือไม่ถูกต้องอีกต่อไป แต่ยังคงแสดงไว้เพื่อการอ้างอิง ตัวอย่างเช่น การแสดงราคาเก่าที่ถูกยกเลิกไปแล้ว หรือข้อผิดพลาดในข้อความ รูปแบบการใช้งานพื้นฐาน ผลลัพธ์: ข้อความ “wrong text” จะถูกขีดฆ่า และข้อความ “and this is the correct one” จะแสดงตามปกติ การใช้งานร่วมกับสไตล์ CSS สามารถใช้ <s> ร่วมกับ CSS เพื่อปรับแต่งลักษณะการแสดงผลได้ เช่น เปลี่ยนสีของข้อความที่ถูกขีดฆ่า ผลลัพธ์: ข้อความราคา $50 จะถูกขีดฆ่าด้วยสีแดง…

ใน HTML5 มีการสนับสนุนแท็ก <ruby> ซึ่งใช้เพื่อแสดงคำอธิบายหรือการออกเสียงเพิ่มเติมของข้อความที่เขียนเป็นตัวอักษร เช่น การแสดงฟูริงานะ (furigana) บนตัวอักษรคันจิ (Kanji) ในภาษาญี่ปุ่น หรือเพื่อแสดงการออกเสียงพินอิน (Pinyin) ของภาษาจีน โดยโครงสร้างของ <ruby> จะมีแท็กย่อยๆ เช่น <rt> และ <rp> ประกอบอยู่ด้วยเพื่อทำให้การแสดงผลสมบูรณ์และถูกต้องมากขึ้น โครงสร้างและคำอธิบายแท็ก ตัวอย่างการใช้งาน 1. การใช้งานพื้นฐานสำหรับภาษาญี่ปุ่น (ฟูริงานะ) ในตัวอย่างนี้: ผลลัพธ์จะแสดงคำว่า 学校 และฟูริงานะ がっこう อยู่ด้านบนของคำว่า “学校” 2. การใช้งานสำหรับการออกเสียงพินอินในภาษาจีน ในตัวอย่างนี้: ผลลัพธ์จะแสดงคำว่า 汉字 และพินอิน…

ใน HTML5 แท็ก <rt> เป็นแท็กที่ใช้กำกับคำอ่านหรือคำอธิบาย (เช่น คำสะกด การออกเสียง) สำหรับตัวอักษรหรือคำที่อยู่ในแท็ก <ruby> ซึ่งส่วนใหญ่จะใช้ในการแสดงคำอ่านพินอินในภาษาจีนหรือฟุริงานะในภาษาญี่ปุ่น แท็ก <rt> มักใช้ร่วมกับ <ruby> และ <rp> เพื่อให้รองรับกับเบราว์เซอร์ที่ไม่สนับสนุนแท็ก <ruby> โครงสร้างพื้นฐาน ตัวอย่างการใช้งาน 1. การใช้ <rt> เพื่อกำกับคำอ่านของภาษาญี่ปุ่น (ฟุริงานะ) ในภาษาญี่ปุ่น จะใช้แท็ก <rt> เพื่อแสดงคำอ่านหรือการออกเสียง (ฟุริงานะ) ของคำที่เขียนด้วยตัวอักษรคันจิ การแสดงผล: 漢字 (อ่านว่า かんじ) 2. การใช้ <rt> เพื่อกำกับคำอ่านพินอินในภาษาจีน…