DCRUB

การใช้งาน JavaScript ใน HTML5 สามารถทำได้หลายวิธี โดย JavaScript เป็นภาษาสคริปต์ที่ใช้เพื่อเพิ่มความสามารถเชิงโต้ตอบให้กับเว็บไซต์ เช่น การทำงานของฟอร์ม การอัปเดตเนื้อหาแบบไดนามิก และการสร้างแอนิเมชัน ใน HTML5 JavaScript สามารถใช้งานได้ทั้งการฝังสคริปต์ลงในหน้า HTML โดยตรง หรือการเชื่อมโยงไปยังไฟล์สคริปต์ภายนอก การเขียน JavaScript ในแท็ก <script> ภายในไฟล์ HTML การฝัง JavaScript ไว้ภายในแท็ก <script> จะทำให้โค้ด JavaScript สามารถทำงานร่วมกับโครงสร้าง HTML ในหน้านั้น ๆ ได้โดยตรง ตัวอย่างนี้เป็นการใช้ JavaScript เพื่อแสดงกล่องข้อความ (alert)…

การใช้งาน iframe ใน HTML5 มีไว้เพื่อฝังเนื้อหา เช่น เว็บไซต์อื่น, วิดีโอ หรือไฟล์จากแหล่งภายนอกมาแสดงในหน้าเว็บเพจ โดยไม่ต้องเปลี่ยนหน้าเว็บของตัวเอง การใช้งานนี้เป็นประโยชน์ในการแสดงข้อมูลแบบฝังโดยไม่ต้องเปิดแท็บหรือหน้าต่างใหม่ การใช้งานพื้นฐานของ iframe โครงสร้างพื้นฐานของการใช้งาน iframe มีดังนี้ ตัวอย่างการใช้งานต่าง ๆ ของ iframe ฝังเว็บไซต์อื่น การฝังเว็บไซต์จากแหล่งอื่นเข้ามาในหน้าเว็บของเรา ในกรณีนี้ใช้ width=”100%” เพื่อให้ขนาดกว้างเต็มของหน้าเว็บ และตั้งค่า height=”500″ เพื่อกำหนดความสูง ฝังวิดีโอจาก YouTube iframe ใช้กันอย่างแพร่หลายในการฝังวิดีโอจากเว็บไซต์ เช่น YouTube การควบคุมการแสดงผลผ่านคุณสมบัติเพิ่มเติม sandbox ป้องกันการกระทำบางอย่างในเนื้อหาที่ฝัง เช่น การรัน JavaScript…

ใน HTML5 id Attribute มีความสำคัญในการระบุเอกลักษณ์ขององค์ประกอบ (Element) แต่ละตัวในหน้าเว็บ โดยต้องมั่นใจว่า id ของแต่ละองค์ประกอบมีความเป็นเอกลักษณ์เฉพาะภายในเอกสารเดียวกัน ซึ่งสามารถนำมาใช้ในการระบุจุดเฉพาะเจาะจงในหน้าเว็บ การสร้างลิงก์ภายใน (anchor link) การปรับแต่ง CSS หรือการใช้งาน JavaScript การใช้งาน id Attribute พร้อมตัวอย่าง ใช้เพื่อระบุเอกลักษณ์ขององค์ประกอบ ตัวอย่างพื้นฐานคือการใช้ id เพื่อให้ CSS หรือ JavaScript เข้าถึงองค์ประกอบนั้นๆ ได้ง่าย ในตัวอย่างนี้ id=”highlight” ถูกใช้กับ <h1> ซึ่งสามารถใช้ในการกำหนดสไตล์หรือการเขียนโค้ดเพื่อปรับแต่งข้อความนี้โดยเฉพาะ การใช้ id ในการสร้าง Anchor…

ใน HTML5, class attribute เป็นคุณสมบัติที่ใช้ในการกำหนดกลุ่มขององค์ประกอบ (elements) ที่มีลักษณะหรือพฤติกรรมเหมือนกัน โดย class มักใช้เพื่อการจัดการกับ CSS หรือ JavaScript ได้อย่างสะดวก ทำให้นักพัฒนาสามารถนำรูปแบบการจัดการเดียวกันมาใช้ซ้ำได้ในหลายๆ ส่วนของหน้าเว็บ ลักษณะการใช้งาน ตัวอย่างรูปแบบการใช้งาน การกำหนดหลาย class ใน element เดียว ใน HTML5 เราสามารถกำหนดได้หลาย class ใน element เดียว โดยแต่ละ class จะแยกกันด้วยช่องว่าง เช่น กรณีนี้ class box และ shadow จะถูกนำไปใช้กับ…

<div> (Division) element ใน HTML5 เป็นหนึ่งในองค์ประกอบที่ใช้บ่อยที่สุดในการสร้างโครงสร้างและจัดกลุ่มเนื้อหาภายในหน้าเว็บ เป็นองค์ประกอบแบบบล็อก (block-level element) ซึ่งจะครอบคลุมพื้นที่เต็มความกว้างของหน้าจอหรือคอนเทนเนอร์ที่อยู่ภายใน การใช้งานทั่วไปของ <div> จัดกลุ่มเนื้อหา ใช้ในการจัดกลุ่มเนื้อหาหลาย ๆ ส่วนให้เป็นหนึ่งเดียว เช่น ข้อความ รูปภาพ หรือลิงก์ เพื่อให้ง่ายต่อการจัดรูปแบบและปรับแต่งด้วย CSS หรือจัดการด้วย JavaScript ตัวอย่าง การจัดเค้าโครง (Layout) การใช้งาน <div> เพื่อจัดส่วนต่าง ๆ ในหน้าเว็บ เช่น ส่วนหัว ส่วนเนื้อหา และส่วนท้าย สามารถจัดวางได้ด้วย CSS เช่น Flexbox…

ใน HTML5, Element จะแบ่งออกเป็นสองประเภทหลัก คือ Block Element และ Inline Element ซึ่งทั้งสองประเภทมีลักษณะการแสดงผลและการจัดการที่แตกต่างกัน โดยเราสามารถประยุกต์ใช้งานได้ในหลายรูปแบบ Block Element Block Element เป็นองค์ประกอบที่ถูกแสดงผลเต็มความกว้างของหน้าจอ (เต็มบรรทัด) และเริ่มต้นบรรทัดใหม่โดยอัตโนมัติเมื่อจบการแสดงผลของ element ก่อนหน้า ซึ่งจะครอบคลุมพื้นที่ตามความกว้างของเอลิเมนต์แม่ (parent element) เช่น div, p, h1 ถึง h6, section, article เป็นต้น คุณสมบัติ ตัวอย่างการใช้งาน Block Element ในตัวอย่างนี้ div เป็น…

การใช้งาน Description List ใน HTML5 ใช้ในการสร้างรายการที่มีการจับคู่ระหว่าง ชื่อหัวข้อ (Term) และ คำอธิบาย (Description) โดยใช้แท็ก <dl>, <dt>, และ <dd> ซึ่งมีการใช้งานดังนี้: ตัวอย่างการใช้งานพื้นฐาน ผลลัพธ์: จะได้รายการที่แสดงคำศัพท์พร้อมคำอธิบาย Animal List Cat A small domesticated carnivorous mammal. Dog A domesticated carnivorous mammal, often kept as a pet or for…

ใน HTML5 การใช้งาน Ordered List (ol) คือการสร้างรายการที่มีลำดับ โดยแต่ละรายการจะมีหมายเลขหรือตัวอักษรกำกับ สามารถปรับแต่งลำดับการแสดงผลและสัญลักษณ์นำหน้ารายการได้ โครงสร้างพื้นฐานของ Ordered List แท็กที่ใช้สร้างรายการแบบลำดับคือ <ol> (Ordered List) และแท็ก <li> (List Item) สำหรับแต่ละรายการ ตัวอย่าง ผลลัพธ์ Item 1 Item 2 Item 3 การปรับแต่ง type ของลำดับใน Ordered List HTML5 มีคุณสมบัติ type ที่สามารถใช้กำหนดรูปแบบของลำดับได้ เช่น การใช้ตัวเลข,…

ใน HTML5 การใช้งาน Unordered List (รายการแบบไม่เรียงลำดับ) ใช้แท็ก <ul> โดยรายการแต่ละรายการภายในจะถูกกำหนดด้วยแท็ก <li> รายการแบบไม่เรียงลำดับจะไม่แสดงตัวเลขหรือเลขเรียงลำดับ แต่จะแสดงด้วยสัญลักษณ์ เช่น จุดกลม (bullet) หรือสัญลักษณ์อื่น ๆ การใช้งานพื้นฐาน ในตัวอย่างข้างต้น รายการที่แสดงจะมีเครื่องหมายจุดกลม (bullet) นำหน้ารายการทุกข้อ รายการที่ 1 รายการที่ 2 รายการที่ 3 รูปแบบการปรับเปลี่ยนสัญลักษณ์ (List Style Type) เราสามารถปรับเปลี่ยนรูปแบบของสัญลักษณ์ที่ใช้ในรายการแบบไม่เรียงลำดับได้ด้วยการใช้ CSS ผ่านคุณสมบัติ list-style-type โดยตัวเลือกที่พบบ่อย ได้แก่ ตัวอย่างการใช้งาน ผลลัพธ์…

ใน HTML5 การใช้งาน List (รายการ) เป็นเครื่องมือพื้นฐานที่ใช้ในการจัดลำดับข้อมูล ซึ่งสามารถแบ่งออกเป็น 3 ประเภทหลัก คือ Ordered List Ordered List จะแสดงผลรายการโดยใช้ตัวเลขเรียงลำดับตามลำดับที่กำหนด โครงสร้าง ผลลัพธ์: นอกจากนี้เรายังสามารถเปลี่ยนรูปแบบลำดับได้ด้วยการใช้แอตทริบิวต์ type เช่น ตัวอย่าง ผลลัพธ์ รายการที่ 1 รายการที่ 2 รายการที่ 3 Unordered List Unordered List ใช้สำหรับรายการที่ไม่ต้องการลำดับเฉพาะ สามารถใช้ได้หลากหลายรูปแบบ เช่น จุด (bullet) หรือเครื่องหมายอื่น ๆ โครงสร้าง…

<colgroup> เป็นแท็กใน HTML5 ที่ใช้ในการจัดกลุ่มคอลัมน์ภายในตาราง <table> โดยการกำหนดรูปแบบหรือคุณสมบัติต่างๆ ให้กับกลุ่มคอลัมน์หลายๆ คอลัมน์พร้อมกัน แทนการระบุคุณสมบัติสำหรับแต่ละคอลัมน์แยกออกจากกันในแต่ละเซลล์ การใช้งาน <colgroup> และ <col> รูปแบบพื้นฐานของ <colgroup> การกำหนดคุณสมบัติคอลัมน์ด้วย <colgroup> ในตัวอย่างนี้ เราใช้ <col> ภายใน <colgroup> เพื่อกำหนดสีพื้นหลังของแต่ละคอลัมน์ โดยแต่ละ <col> จะตรงกับคอลัมน์ในตาราง ชื่อ อายุ ประเทศ สมชาย 30 ไทย จอห์น 25 อเมริกา การใช้ <colgroup> เพื่อจัดกลุ่มคอลัมน์หลายๆ คอลัมน์ร่วมกัน ในตัวอย่างนี้…

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

ใน HTML5 การใช้งาน colspan และ rowspan เป็นคุณสมบัติที่ใช้ควบคุมการรวมเซลล์ในตาราง (table) เพื่อสร้างเลย์เอาต์ของข้อมูลที่มีความซับซ้อนมากขึ้น ซึ่งแต่ละคุณสมบัติจะทำงานดังนี้ ตัวอย่างการใช้งาน colspan ในตัวอย่างนี้ เซลล์หัวข้อแถวแรกจะครอบคลุมสองคอลัมน์ หัวข้อที่รวม 2 คอลัมน์ ข้อมูล 1 ข้อมูล 2 ตัวอย่างการใช้งาน rowspan หัวข้อ 1 หัวข้อ 2 ข้อมูลที่รวม 2 แถว ข้อมูล 2.1 ข้อมูล 2.2 ในตัวอย่างนี้ เซลล์ที่ครอบคลุมสองแถวในคอลัมน์แรกจะถูกรวมให้เซลล์เดียว การใช้งาน colspan และ rowspan…

การจัดการกับ Table Padding และ Spacing ใน HTML5 เกี่ยวข้องกับการควบคุมพื้นที่ภายในและภายนอกของเซลล์ในตาราง โดยใช้ CSS เพื่อกำหนดขนาดของ Padding (พื้นที่ภายใน) และ Spacing (ช่องว่างระหว่างเซลล์) ซึ่งส่งผลต่อความเป็นระเบียบและความสวยงามของตาราง Table Padding Padding คือ พื้นที่ระหว่างขอบของเซลล์ตาราง (Cell) และเนื้อหาภายในเซลล์นั้นๆ การเพิ่ม Padding ทำให้มีพื้นที่ว่างระหว่างขอบกับข้อมูลภายในเซลล์มากขึ้น ตัวอย่างการใช้งาน ผลลัพธ์: ตารางนี้จะมี Padding ในแต่ละเซลล์ขนาด 10px โดยเนื้อหาภายในแต่ละเซลล์จะห่างจากขอบ 10px Header 1 Header 2 Content…

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

การจัดการกับขนาดของตาราง (Table Size) ใน HTML5 สามารถทำได้หลายวิธีเพื่อให้ตารางแสดงผลได้ตามที่ต้องการ ไม่ว่าจะเป็นการกำหนดขนาดตาราง ขนาดของเซลล์ หรือการควบคุมพื้นที่ภายในและภายนอกเซลล์ ตารางสามารถปรับได้ด้วยการใช้งานทั้ง CSS และ HTML การกำหนดขนาดตารางด้วย width และ height สามารถกำหนดขนาดของตารางได้ทั้ง width และ height โดยใช้ HTML attribute หรือ CSS property ตัวอย่างการใช้ HTML Attribute ตารางนี้จะมีความกว้าง 500px และความสูง 300px แต่การใช้ width และ height ใน HTML…

การใช้งาน Table Border ใน HTML5 นั้นคือการกำหนดเส้นขอบ (border) ของตาราง (<table>) และเซลล์ในตาราง เพื่อปรับแต่งความสวยงามและความชัดเจนของตารางในหน้าเว็บ โดยสามารถใช้งานได้หลากหลายรูปแบบผ่านการกำหนดค่าของ CSS การใช้งาน border แบบพื้นฐาน ใน HTML5 เราจะไม่ใช้แอตทริบิวต์ border ในแท็ก <table> ตรงๆ เหมือนใน HTML เก่าๆ แต่จะใช้ CSS แทน ตัวอย่างนี้จะกำหนดขอบ (border) หนา 1px และเป็นเส้นทึบ (solid) สีดำ สำหรับทั้งตาราง <table>, ส่วนหัวข้อ <th>…

ใน HTML5 การใช้งาน Table (ตาราง) เป็นการจัดข้อมูลให้อยู่ในรูปแบบแถวและคอลัมน์ เหมาะสำหรับการแสดงข้อมูลที่เป็นโครงสร้าง เช่น รายการสินค้า ตารางสรุปข้อมูล หรือผลลัพธ์จากการคำนวณ ข้อดีของตารางคือสามารถจัดการข้อมูลให้อยู่ในระเบียบ และทำให้การอ่านเข้าใจง่ายขึ้น โครงสร้างของ Table ใน HTML ตารางใน HTML จะมีแท็กหลัก ๆ ดังนี้: ตัวอย่างการใช้งานพื้นฐานของ Table ชื่อ อายุ เพศ สมชาย 30 ชาย สมหญิง 25 หญิง คุณสมบัติเสริมของ Table การรวมเซลล์ (Colspan และ Rowspan) ตัวอย่าง…

ใน HTML5 การใช้งาน <title> เป็นการกำหนดชื่อของหน้าเว็บ (Page Title) ที่จะแสดงในแท็บของเบราว์เซอร์ และยังมีผลต่อ SEO (Search Engine Optimization) โดย <title> เป็นแท็กที่อยู่ภายใน <head> ของเอกสาร HTML การตั้งชื่อให้เหมาะสมมีความสำคัญ เพราะช่วยสื่อสารเนื้อหาของหน้าเว็บและดึงดูดผู้ใช้เข้ามาดู โครงสร้างการใช้งานเบื้องต้น ประยุกต์ใช้งานในหลายรูปแบบ การใช้งานแบบเน้นคำหลัก (Keyword Focused) เหมาะสำหรับการปรับปรุง SEO โดยใส่คำหลักที่สำคัญไว้ใน Title การใช้งานแบบเรียบง่ายและกระชับ ควรใช้งานในกรณีที่เนื้อหาของหน้าเว็บมีความเฉพาะเจาะจงและต้องการความชัดเจน การใช้งานร่วมกับชื่อแบรนด์ แสดงชื่อแบรนด์ร่วมกับชื่อเนื้อหาหรือผลิตภัณฑ์ เพื่อสร้างการจดจำแบรนด์ การใช้งานแบบดึงดูดและสร้างความน่าสนใจ การเพิ่มความน่าสนใจให้กับชื่อเพื่อกระตุ้นให้คลิกเข้าไปดู หลักการตั้งชื่อ Page Title…

Favicon (ย่อมาจาก “favorite icon”) คือไอคอนขนาดเล็กที่แสดงบนแท็บของเบราว์เซอร์ โดยปกติจะแสดงโลโก้หรือภาพสัญลักษณ์ที่สื่อถึงเว็บไซต์นั้นๆ ในการใช้งาน HTML5 การเพิ่ม Favicon ให้กับเว็บไซต์เป็นเรื่องที่ง่ายและสามารถทำได้หลายวิธี วิธีการใช้งาน Favicon ใน HTML5 การใช้งานรูปแบบพื้นฐาน วิธีที่ง่ายที่สุดในการเพิ่ม Favicon คือการใช้แท็ก <link> ในส่วน <head> ของไฟล์ HTML ดังนี้ รองรับไฟล์ที่มีหลายขนาดและหลายรูปแบบ ปัจจุบัน Favicon ไม่จำกัดเฉพาะไฟล์ .ico เท่านั้น เราสามารถใช้ไฟล์ PNG หรือ SVG ที่เป็นฟอร์แมตที่คมชัดกว่าได้ โดยอาจรองรับหลายขนาดสำหรับอุปกรณ์ที่แตกต่างกัน ตัวอย่างการใช้งาน การใช้ Favicon…

ใน HTML5, <picture> element ถูกออกแบบมาเพื่อช่วยจัดการแสดงผลรูปภาพในรูปแบบที่ยืดหยุ่นต่ออุปกรณ์และขนาดหน้าจอที่แตกต่างกัน โดย <picture> ทำงานร่วมกับ <source> element ซึ่งจะให้เรากำหนดแหล่งที่มาของรูปภาพตามเงื่อนไขต่าง ๆ เช่น ความกว้างของหน้าจอหรือประเภทของไฟล์รูปภาพ การใช้งาน <picture> Element รูปแบบการใช้งานหลักของ <picture> คือการให้เบราว์เซอร์เลือกแหล่งที่มาของรูปภาพที่เหมาะสมที่สุดโดยอัตโนมัติตามเงื่อนไขที่กำหนด ตัวอย่างเช่น สามารถใช้รูปภาพที่มีความละเอียดสูงสำหรับจอ Retina หรือเลือกรูปภาพที่มีขนาดเล็กสำหรับหน้าจอมือถือ โครงสร้างพื้นฐานของ <picture> ตัวอย่างการใช้งาน <picture> สำหรับ Retina Display เราสามารถใช้ <picture> เพื่อเลือกแสดงรูปภาพความละเอียดสูงหรือปกติ ขึ้นอยู่กับอุปกรณ์ที่มี pixel density ต่างกัน ในกรณีนี้ เบราว์เซอร์จะเลือกโหลดรูป…