DCRUB

DCRUB

HTML5 การใช้งาน YouTube Video

การใช้งาน YouTube Video ใน HTML5 สามารถทำได้หลายวิธี โดยสามารถนำไปประยุกต์ใช้ในเว็บเพจได้หลากหลายรูปแบบ เรามาดูกันว่าใช้แบบไหนได้บ้าง การฝัง (Embed) วิดีโอจาก YouTube วิธีพื้นฐานที่สุดคือการใช้ iframe เพื่อนำวิดีโอจาก YouTube มาฝังในเว็บเพจ HTML5 การปรับขนาดวิดีโอให้ตอบสนอง (Responsive) วิดีโอที่ฝังด้วย iframe อาจไม่ตอบสนองต่อขนาดของหน้าจอ วิธีแก้ไขคือใช้ CSS เพื่อให้วิดีโอตอบสนองได้ทุกขนาดหน้าจอ การตั้งค่าเริ่มเล่นอัตโนมัติ (Autoplay) สามารถตั้งค่าวิดีโอให้เริ่มเล่นอัตโนมัติเมื่อเปิดเว็บเพจโดยเพิ่มพารามิเตอร์ autoplay=1 ใน URL การเล่นวิดีโอซ้ำ (Loop) สามารถตั้งค่าให้วิดีโอเล่นซ้ำได้โดยใช้พารามิเตอร์ loop=1 และระบุ playlist เท่ากับ VIDEO_ID…

HTML5 การใช้งาน Audio

การใช้งาน audio ใน HTML5 นั้นช่วยให้เราสามารถแทรกไฟล์เสียงลงในหน้าเว็บได้อย่างง่ายดาย โดย HTML5 ได้เพิ่มแท็ก <audio> สำหรับใช้ในการเล่นเสียง ซึ่งมีความยืดหยุ่นในการควบคุมและแสดงผล รวมถึงการประยุกต์ใช้ไฟล์เสียงในลักษณะต่าง ๆ โดยไม่ต้องพึ่งพาปลั๊กอินจากภายนอก เช่น Flash รูปแบบการใช้งานเบื้องต้น การประยุกต์ใช้งาน การเล่นเสียงอัตโนมัติ (Autoplay) สามารถตั้งค่าให้เสียงเล่นโดยอัตโนมัติเมื่อโหลดหน้าเว็บด้วยการใช้แอตทริบิวต์ autoplay ดังนี้ การเล่นเสียงซ้ำ (Loop) การเล่นเสียงซ้ำสามารถทำได้ด้วยการใช้แอตทริบิวต์ loop การซ่อนเครื่องเล่นเสียง (Hidden Audio) หากไม่ต้องการให้แสดงเครื่องเล่นเสียง แต่ต้องการเล่นเสียงเบื้องหลัง สามารถซ่อนเครื่องเล่นด้วยการลบแอตทริบิวต์ controls ออกและใช้แอตทริบิวต์ hidden แทน การควบคุมการเล่นเสียงด้วย JavaScript นอกจากการใช้แอตทริบิวต์ในแท็ก…

HTML5 การใช้งาน Video

ใน HTML5 มีการรองรับการใช้งานวิดีโอผ่านแท็ก <video> โดยไม่ต้องพึ่งปลั๊กอินภายนอกเช่น Flash ซึ่งการใช้งานแท็ก <video> ใน HTML5 มีรูปแบบการใช้งานที่หลากหลาย สามารถประยุกต์ใช้งานได้ตามต้องการ รูปแบบพื้นฐานและตัวอย่างการใช้งานมีดังนี้ การใช้งานเบื้องต้น การใช้งาน <video> ขั้นพื้นฐานคือการแสดงวิดีโอพร้อมกำหนดแหล่งไฟล์วิดีโอผ่านแอตทริบิวต์ src การรองรับหลายรูปแบบของวิดีโอ (Multiple Video Sources) เพื่อให้รองรับเบราว์เซอร์ต่าง ๆ ที่อาจรองรับรูปแบบไฟล์วิดีโอที่แตกต่างกัน สามารถใช้ <source> สำหรับระบุแหล่งไฟล์หลาย ๆ รูปแบบได้ เบราว์เซอร์จะเลือกเล่นไฟล์วิดีโอที่สามารถรองรับได้จากไฟล์ที่ระบุไว้ การเล่นวิดีโออัตโนมัติ (Autoplay) หากต้องการให้วิดีโอเล่นอัตโนมัติเมื่อโหลดหน้าเว็บ สามารถใช้แอตทริบิวต์ autoplay วิดีโอจะเริ่มเล่นทันทีที่หน้าเว็บโหลดเสร็จ การวนซ้ำวิดีโอ (Loop) สามารถใช้แอตทริบิวต์…

HTML5 การใช้งาน Multimedia

ใน HTML5 มีการปรับปรุงและเพิ่มฟีเจอร์ใหม่ๆ ที่ทำให้การใช้งานสื่อมัลติมีเดีย (Multimedia) สะดวกและเป็นมาตรฐานมากขึ้น โดย Multimedia ใน HTML5 สามารถแบ่งได้เป็นสองประเภทหลัก คือ เสียง (Audio) และ วิดีโอ (Video) โดยใช้แท็ก <audio> และ <video> ที่สามารถฝังไฟล์สื่อภายในหน้าเว็บได้โดยไม่ต้องใช้ปลั๊กอินเสริม เช่น Flash Player การใช้งานเสียง (Audio) HTML5 มี <audio> แท็กที่ใช้สำหรับการเล่นไฟล์เสียง เช่น MP3, WAV, และ Ogg โดยสามารถตั้งค่าให้ควบคุมการเล่นได้ เช่น การเล่นซ้ำอัตโนมัติ การควบคุมระดับเสียง…

HTML5 การใช้งาน SVG Graphic

SVG (Scalable Vector Graphics) เป็นมาตรฐานสำหรับการสร้างภาพกราฟิกแบบเวกเตอร์ที่สามารถขยายหรือย่อได้โดยไม่สูญเสียความคมชัด ซึ่งเป็นมาตรฐานที่กำหนดโดย W3C และเหมาะสมสำหรับการใช้งานใน HTML5 เนื่องจาก SVG สามารถรวมเข้าไปในเอกสาร HTML ได้โดยตรง นอกจากนี้ยังรองรับการโต้ตอบ (Interactive) และการเปลี่ยนแปลงแบบแอนิเมชันผ่าน CSS และ JavaScript ได้อีกด้วย ข้อดีของ SVG การใช้งาน SVG ใน HTML5 การใช้งานโดยตรงใน HTML เราสามารถใส่โค้ด SVG ลงใน HTML โดยตรงได้ การฝัง SVG ผ่านไฟล์แยก อีกวิธีหนึ่งในการใช้งาน SVG คือการฝังผ่านไฟล์…

HTML5 การใช้งาน Canvas Graphic

ใน HTML5, <canvas> เป็นองค์ประกอบที่ใช้ในการวาดกราฟิกผ่านการเขียนโค้ด JavaScript สามารถใช้ในการวาดรูปภาพ กราฟเส้น, การสร้างแอนิเมชัน, เกม, และกราฟิกเชิงโต้ตอบได้ โดยทั่วไปจะใช้กับ API ของ CanvasRenderingContext2D สำหรับกราฟิกแบบสองมิติ การใช้งาน <canvas> เบื้องต้น องค์ประกอบ <canvas> จะต้องกำหนดความกว้าง (width) และความสูง (height) ตามที่ต้องการ จากนั้นจะใช้ JavaScript ในการเข้าถึงและวาดกราฟิก ฟังก์ชันต่าง ๆ ที่สามารถใช้ได้ การวาดรูปทรงพื้นฐาน สี่เหลี่ยม ตัวอย่าง การวาดเส้น ตัวอย่าง การวาดวงกลมและรูปร่างโค้ง ตัวอย่าง การใส่ข้อความ ตัวอย่าง…

HTML5 Attribute ของ Input

ใน HTML5 มีประเภทของ <input> ที่หลากหลายเพื่อรองรับการป้อนข้อมูลที่แตกต่างกัน โดยสามารถประยุกต์ใช้ Attribute (คุณลักษณะ) ต่าง ๆ เพื่อควบคุมและปรับแต่งการทำงานของ input ได้ตามต้องการ ซึ่งคุณลักษณะที่นิยมใช้มีดังนี้ Common Attributes (คุณลักษณะทั่วไป) ตัวอย่างการประยุกต์ใช้งาน

HTML5 Input ประเภทต่างๆ

HTML5 เพิ่มประเภทของ input หลายรูปแบบที่ช่วยให้เราสามารถสร้างฟอร์มที่มีประสิทธิภาพและใช้งานง่ายมากขึ้น ซึ่ง input ประเภทต่าง ๆ มีดังนี้ text ใช้สำหรับรับข้อมูลที่เป็นข้อความทั่วไป เช่น ชื่อ, ที่อยู่ เป็นต้น password ใช้สำหรับรับข้อมูลที่เป็นรหัสผ่าน โดยจะแสดงเป็นเครื่องหมาย เช่น จุด (•) แทนตัวอักษร email ใช้สำหรับรับข้อมูลที่เป็นอีเมล โดยจะตรวจสอบรูปแบบของอีเมลให้ถูกต้อง url ใช้สำหรับรับข้อมูลที่เป็น URL โดยตรวจสอบให้แน่ใจว่าเป็น URL ที่ถูกต้อง tel ใช้สำหรับรับข้อมูลที่เป็นเบอร์โทรศัพท์ ไม่มีการตรวจสอบรูปแบบของเบอร์โทรศัพท์ number ใช้สำหรับรับข้อมูลที่เป็นตัวเลข โดยสามารถกำหนดขอบเขตได้ด้วย min, max และ…

HTML5 Form Elements

Form Elements ใน HTML5 เป็นชุดเครื่องมือที่ช่วยให้ผู้ใช้สามารถกรอกข้อมูลและส่งข้อมูลไปยังเซิร์ฟเวอร์ได้อย่างสะดวก HTML5 ได้เพิ่มความสามารถใหม่ๆ ให้กับฟอร์ม เช่น ชนิดของ input แบบใหม่ ที่ช่วยให้การป้อนข้อมูลมีความถูกต้องมากขึ้น เช่น email, url, date และอื่นๆ ประเภทของ Form Elements ใน HTML5 1. <form> ใช้ในการสร้างฟอร์มสำหรับรับข้อมูลจากผู้ใช้ 2. <input> ใช้สำหรับรับข้อมูลในรูปแบบต่างๆ จากผู้ใช้ มีชนิดย่อยที่สำคัญดังนี้ ตัวอย่าง 3. <textarea> 4. <select> และ <option> 5. <button>…

HTML5 Form Attributes

ใน HTML5 มี Form Attributes หลากหลายรูปแบบที่สามารถใช้ในการควบคุมการทำงานของฟอร์ม เช่น การกำหนดลักษณะของการส่งข้อมูล, การตั้งค่าปลายทาง, การจัดการข้อมูล, การเปิดปิดการใช้งาน เป็นต้น 1. action ตัวอย่าง 2. method ตัวอย่าง ใช้ POST เมื่อต้องการส่งข้อมูลที่เป็นความลับ เช่น รหัสผ่าน หรือเมื่อส่งข้อมูลจำนวนมาก ขณะที่ GET เหมาะสำหรับการส่งข้อมูลขนาดเล็กที่ไม่สำคัญ 3. enctype ตัวอย่าง 4. target ตัวอย่าง: 5. novalidate ตัวอย่าง 6. autocomplete ตัวอย่าง 7.…

HTML5 การใช้งาน Form

การใช้งานฟอร์ม (Form) ใน HTML5 เป็นส่วนสำคัญในการรับข้อมูลจากผู้ใช้และส่งข้อมูลไปยังเซิร์ฟเวอร์ โดย HTML5 ได้เพิ่มคุณสมบัติใหม่ๆ ที่ทำให้การสร้างฟอร์มมีความยืดหยุ่นและง่ายขึ้น เราสามารถใช้ฟอร์มในหลายรูปแบบเพื่อเก็บข้อมูลได้หลากหลาย เช่น ข้อความ ตัวเลข วันที่ ไฟล์ และอื่นๆ โครงสร้างพื้นฐานของฟอร์มใน HTML5 ส่วนประกอบของฟอร์มใน HTML5 ช่องกรอกข้อความ (Text Input) ช่องกรอกอีเมล (Email Input) ช่องกรอกหมายเลข (Number Input) ช่องกรอกรหัสผ่าน (Password Input) เลือกวันที่ (Date Input) ช่องเลือกสี (Color Input) ช่องเลือกไฟล์ (File…

ข้อแตกต่างระหว่าง HTML และ XHTML

HTML (HyperText Markup Language) vs XHTML (Extensible HyperText Markup Language) ทั้ง HTML และ XHTML เป็นภาษาที่ใช้ในการพัฒนาเว็บไซต์ แต่มีความแตกต่างกันในด้านการออกแบบและข้อกำหนดการใช้งาน: 1. มาตรฐานและข้อบังคับการเขียน 2. ความยืดหยุ่น 3. การเขียนแท็ก 4. ความเข้ากันได้กับเบราว์เซอร์ 5. ชนิดของเอกสาร (DOCTYPE) 6. การใช้งานในปัจจุบัน สรุป HTML มีความยืดหยุ่นและใช้งานง่ายกว่าด้วยกฎการเขียนที่หลวม ขณะที่ XHTML ต้องทำตามกฎที่เข้มงวดมากกว่า

HTML5 Uniform Resource Locator (URL)

Uniform Resource Locator (URL) เป็นที่อยู่หรือที่ตั้งของทรัพยากรต่างๆ บนอินเทอร์เน็ต ซึ่งใช้ในการอ้างอิงไฟล์ รูปภาพ เอกสาร หรือข้อมูลต่างๆ ที่ถูกเก็บไว้บนเซิร์ฟเวอร์ โดยใน HTML5 URL เป็นสิ่งสำคัญในการเชื่อมโยงระหว่างหน้าเว็บ และการเข้าถึงทรัพยากรจากแหล่งภายนอก โครงสร้างของ URL URL มีโครงสร้างพื้นฐานตามรูปแบบนี้ ประเภทของ URL ที่ใช้งานได้ใน HTML5 Absolute URL (URL แบบเต็ม) เป็น URL ที่ระบุที่อยู่ของทรัพยากรทั้งหมด ซึ่งสามารถเข้าถึงได้จากทุกที่ในอินเทอร์เน็ต ตัวอย่าง ในตัวอย่างนี้ เป็นที่อยู่เต็มที่เชื่อมโยงไปยังหน้าเว็บ page.html บนเซิร์ฟเวอร์ example.com Relative…

HTML5 การใช้งาน Encoding (Character Set)

การกำหนด Encoding หรือ Character Sets ใน HTML5 มีความสำคัญอย่างยิ่งในการทำให้หน้าเว็บสามารถแสดงผลข้อความได้อย่างถูกต้อง โดยเฉพาะเมื่อต้องแสดงผลข้อความที่เป็นภาษาต่างๆ เช่น ภาษาไทย จีน ญี่ปุ่น หรือภาษาอื่นๆ ที่ไม่ได้ใช้ชุดตัวอักษรแบบ ASCII ปกติ การระบุ Character Encoding อย่างถูกต้องจะช่วยให้ข้อความไม่แสดงผลเป็นเครื่องหมายคำถามหรือสัญลักษณ์ที่ไม่ถูกต้อง การกำหนด Encoding ใน HTML5 HTML5 มักใช้ชุดตัวอักษรแบบ UTF-8 เป็นมาตรฐาน เนื่องจากสามารถรองรับตัวอักษรได้ทุกภาษาและเป็นที่นิยมใช้งานมากที่สุดในปัจจุบัน วิธีการกำหนด Encoding โดยใช้ <meta> Tag ในตัวอย่างนี้ได้กำหนด Encoding เป็น UTF-8 ผ่านทาง…

HTML5 การใช้งาน Emoji

การใช้งาน Emoji ใน HTML5 เป็นเรื่องง่ายและช่วยเพิ่มความสนุกและการสื่อสารที่มีความหมายมากขึ้นให้กับเว็บไซต์ ใน HTML5 เราสามารถใช้งาน Emoji ได้หลายวิธี ซึ่งได้แก่การใช้ Unicode, HTML Entities, และการคัดลอกวาง Emoji ตรง ๆ ไปในโค้ด การใช้ Unicode เราสามารถใส่ Emoji โดยใช้ Unicode ซึ่งเป็นรหัสมาตรฐานที่แสดงถึงตัวอักษรหรือสัญลักษณ์ต่าง ๆ ทั่วโลก โดย Emoji แต่ละตัวจะมี Unicode ของตัวเอง ตัวอย่างเช่น ในโค้ดนี้ เราใช้ Unicode สำหรับ Emoji “😊”…

HTML5 การใช้งาน Symbol Entities

ใน HTML5 เราสามารถใช้ Symbol Entities หรืออักขระพิเศษ (Entities) เพื่อแสดงอักขระที่ไม่สามารถพิมพ์ได้โดยตรง เช่น เครื่องหมายพิเศษ สัญลักษณ์ทางคณิตศาสตร์ หรืออักขระที่มีความหมายพิเศษในภาษา HTML (เช่น <, >, และ &) การใช้อักขระพิเศษเหล่านี้ทำได้โดยการใช้อักขระแทนค่าที่มีรูปแบบดังนี้ ประเภทของ Symbol Entities และตัวอย่างการใช้งาน อักขระพิเศษใน HTML (Reserved Characters) อักขระบางตัวใน HTML มีความหมายพิเศษและไม่สามารถใช้งานได้ตรงๆ เช่น <, >, และ & เราจึงต้องใช้อักขระแทนค่าเหล่านี้ ตัวอย่าง สัญลักษณ์เครื่องหมายทางคณิตศาสตร์ (Mathematical Symbols)…

HTML5 Entities

ใน HTML5 Entities หมายถึงรหัสพิเศษที่ใช้แทนตัวอักษรหรือสัญลักษณ์ที่ไม่สามารถพิมพ์ลงใน HTML โดยตรงได้ เช่น ตัวอักษรที่มีความหมายพิเศษใน HTML อย่าง <, >, หรือสัญลักษณ์เฉพาะ เช่น ตัวอักษรภาษาต่างๆ หรือสัญลักษณ์ทางคณิตศาสตร์ รูปแบบการใช้งาน Entities ใน HTML Entities มีรูปแบบหลัก 2 ประเภท: ตัวอย่างการใช้งาน Entities Named Entities ใช้ชื่อที่แทนสัญลักษณ์ ตัวอย่างด้านบนนี้ แทนที่สัญลักษณ์ที่มีความหมายพิเศษใน HTML ด้วย Entities เพื่อป้องกันการเกิดความขัดแย้งในการแสดงผล Numeric Entities ใช้รหัสตัวเลขแทนสัญลักษณ์ Hexadecimal Numeric…

HTML5 Style Guide

Style Guide ใน HTML5 คือการกำหนดรูปแบบและโครงสร้างของการเขียนโค้ด HTML ให้เป็นมาตรฐานเดียวกัน โดยมีจุดประสงค์เพื่อให้โค้ดอ่านง่าย เข้าใจง่าย และง่ายต่อการบำรุงรักษาในระยะยาว อีกทั้งยังช่วยให้หลายคนสามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพเมื่อทำงานเป็นทีม หลักการของ Style Guide ใน HTML5 โครงสร้างของไฟล์ HTML (HTML Document Structure) ตัวอย่าง การเว้นวรรคและการเยื้อง (Indentation) ตัวอย่าง การตั้งชื่อคลาสและไอดี (Naming Conventions) ตัวอย่าง การจัดการกับอักขระพิเศษ (HTML Entities) ตัวอย่าง องค์ประกอบเชิงความหมาย (Semantic HTML) ตัวอย่าง การแสดงความคิดเห็นในโค้ด (Commenting Code)…

HTML5 การใช้งาน Semantic Elements

Semantic Elements ใน HTML5 คือชุดขององค์ประกอบที่มีความหมายชัดเจนและบอกถึงเนื้อหาภายในหรือบทบาทขององค์ประกอบนั้น โดยไม่เพียงแต่ช่วยให้นักพัฒนาเข้าใจและจัดระเบียบโค้ดได้ดีขึ้น แต่ยังช่วยให้เครื่องมือค้นหาและอุปกรณ์ช่วยเหลือ (เช่น screen reader) สามารถเข้าใจเนื้อหาและโครงสร้างของหน้าเว็บได้ดียิ่งขึ้น ซึ่งช่วยในการทำ SEO (Search Engine Optimization) ด้วย ตัวอย่าง Semantic Elements ที่ใช้บ่อยใน HTML5 1. <header> ใช้สำหรับส่วนหัวของเอกสารหรือส่วนหนึ่งของเอกสาร เช่น หัวเรื่อง หรือเมนูนำทาง ตัวอย่างการใช้งาน 2. <nav> ใช้สำหรับการนำทางในเว็บไซต์ มักจะประกอบไปด้วยลิงก์ที่นำไปยังส่วนต่าง ๆ ของเว็บไซต์ ตัวอย่างการใช้งาน 3. <section> ใช้เพื่อแบ่งเนื้อหาในเอกสารออกเป็นส่วน ๆ…

HTML5 การใช้งาน Code Element

ใน HTML5 องค์ประกอบ <code> ถูกใช้เพื่อแสดงข้อความที่เป็นโค้ดคอมพิวเตอร์หรือโค้ดโปรแกรม ซึ่งโดยทั่วไปจะเป็นข้อความที่ต้องการให้แตกต่างจากข้อความธรรมดา เพื่อระบุว่าเป็นคำสั่งของโปรแกรมหรือภาษาโปรแกรมใดๆ การใช้งาน <code> ใน HTML5 แสดงโค้ดในบรรทัดเดียวกันกับข้อความ (Inline code): <code> ใช้เพื่อแสดงโค้ดคอมพิวเตอร์ที่อยู่ในบรรทัดเดียวกันกับข้อความทั่วไป ตัวอย่าง ผลลัพธ์: To display a message, use the console.log() function in JavaScript. แสดงโค้ดหลายบรรทัดในรูปแบบบล็อก (Code block): หากต้องการแสดงโค้ดหลายบรรทัดหรือโค้ดบล็อกขนาดใหญ่ มักจะใช้ร่วมกับแท็ก <pre> ซึ่งเป็นการเก็บการจัดรูปแบบ (เช่นการเว้นวรรค) และแสดงโค้ดในลักษณะตามจริง ตัวอย่าง ผลลัพธ์ การแสดงโค้ดภายในฟอร์แมตอื่น…

HTML5 การออกแบบเว็บแบบ Responsive

Responsive Web Design คือการออกแบบและพัฒนาเว็บไซต์ที่สามารถแสดงผลได้อย่างเหมาะสมบนทุกขนาดหน้าจอ ไม่ว่าจะเป็นหน้าจอคอมพิวเตอร์ แท็บเล็ต หรือโทรศัพท์มือถือ โดยการทำให้เว็บไซต์สามารถปรับขนาด การจัดวาง และองค์ประกอบต่าง ๆ ของเว็บไซต์ให้เหมาะสมกับขนาดหน้าจอที่แสดงผล โดยไม่ต้องออกแบบเว็บไซต์หลายเวอร์ชันสำหรับแต่ละอุปกรณ์ องค์ประกอบหลักของ Responsive Web Design ใน HTML5 ประกอบด้วย คำสั่งนี้กำหนดให้เว็บไซต์มีความกว้างเท่ากับหน้าจอของอุปกรณ์และเริ่มต้นการซูมที่ระดับ 1.0 ซึ่งเป็นการตั้งค่าพื้นฐานของการทำ Responsive Design ในตัวอย่างนี้ เมื่อขนาดหน้าจอของอุปกรณ์ที่แสดงผลมีความกว้างน้อยกว่า 600px พื้นหลังของเว็บไซต์จะเปลี่ยนเป็นสีฟ้าอ่อน ตัวอย่างนี้เป็นการออกแบบสองคอลัมน์ที่มีความกว้าง 50% เมื่อแสดงบนหน้าจอใหญ่ แต่จะปรับให้เป็นหนึ่งคอลัมน์ที่มีความกว้าง 100% เมื่อหน้าจอมีขนาดเล็กกว่า 600px การกำหนดให้ max-width เป็น 100%…

HTML5 การใช้งาน Layout Elements

ใน HTML5 มี Layout Elements หลายตัวที่ออกแบบมาเพื่อกำหนดโครงสร้างของหน้าเว็บให้มีความหมายชัดเจนและง่ายต่อการเข้าใจ โดยสามารถประยุกต์ใช้งานได้หลายแบบ ซึ่งประกอบด้วย 1. <header> ใช้สำหรับส่วนหัวของหน้าเว็บหรือหัวข้อย่อยในส่วนต่าง ๆ ของเอกสาร เช่น โลโก้ เมนูนำทาง หรือชื่อเรื่องของเนื้อหา ตัวอย่าง 2. <nav> ใช้สำหรับกำหนดเมนูนำทาง (Navigation) เช่น ลิงก์ที่เชื่อมโยงไปยังหน้าต่าง ๆ ของเว็บไซต์ ตัวอย่าง 3. <section> ใช้กำหนดส่วนหลักของเนื้อหาที่มีความสัมพันธ์กัน มักใช้ในกรณีที่เนื้อหาถูกแบ่งออกเป็นกลุ่ม ๆ ตัวอย่าง 4. <article> ใช้สำหรับเนื้อหาที่เป็นอิสระและสามารถนำไปใช้ในบริบทอื่นได้ เช่น บทความหรือบล็อกโพสต์ ตัวอย่าง 5.…

HTML5 การใช้งาน Head Element

<head> element ใน HTML5 เป็นส่วนที่ใช้ในการเก็บข้อมูลเมตาและองค์ประกอบต่าง ๆ ที่ไม่แสดงบนหน้าจอโดยตรง แต่มีผลต่อการทำงานของหน้าเว็บ เช่น การกำหนดข้อมูลที่เกี่ยวข้องกับ SEO, การเรียกใช้ไฟล์ CSS, การตั้งค่าไอคอน เป็นต้น องค์ประกอบใน <head> ที่ใช้ได้ใน HTML5 <title> กำหนดชื่อของหน้าเว็บ ซึ่งจะแสดงบนแถบเบราว์เซอร์หรือแท็บ <meta> ใช้สำหรับกำหนดข้อมูลเมตาที่เกี่ยวกับหน้าเว็บ เช่น charset, description, keywords, viewport – กำหนด charset (การเข้ารหัสตัวอักษร) – กำหนด description สำหรับ SEO – กำหนด…

HTML5 การระบุ File Path

ใน HTML5 การใช้งาน File Path หมายถึงการระบุเส้นทางไฟล์ที่ใช้ในการเรียกทรัพยากรต่าง ๆ เช่น ไฟล์รูปภาพ, ไฟล์ CSS, ไฟล์ JavaScript หรือแม้กระทั่งไฟล์ HTML อื่น ๆ เพื่อแสดงผลในเว็บไซต์ โดยเส้นทางของไฟล์ที่ใช้นั้นสามารถระบุได้หลายรูปแบบตามตำแหน่งที่อยู่ของไฟล์ และลักษณะการเรียกใช้ ดังนี้ ประเภทของ File Path ใน HTML5 Absolute Path (เส้นทางแบบเต็ม) เส้นทางแบบ Absolute จะเป็นการระบุเส้นทางแบบเต็มของไฟล์ที่ต้องการเรียกใช้ โดยมักจะเริ่มด้วยชื่อโดเมน เช่น หรือเส้นทางที่อ้างอิงจากตำแหน่งที่อยู่ของไฟล์ในระบบ ตัวอย่าง ในตัวอย่างนี้ จะใช้ URL…