การเปลี่ยนเส้นทางหน้าเว็บ (Page redirection) คือเมื่อคลิก URL หนึ่งแต่ถูกนำไปหน้าอื่น ใช้แท็ก <meta> พร้อมแอตทริบิวต์ content เพื่อกำหนดจำนวนวินาที ตัวอย่าง: เปลี่ยนหน้าไป tutorialspoint.com หลัง 10 วินาที <!DOCTYPE html> <html> <head> <title>HTML Meta Tag</title>

Local Storage ออกแบบมาเพื่อเก็บข้อมูลข้ามหน้าต่างและอยู่นานกว่าช่วงเซสชัน Web applications สามารถเก็บข้อมูลผู้ใช้หลายเมกะไบต์ เช่น เอกสารที่ผู้ใช้สร้างหรือกล่องจดหมาย ฝั่ง client เพื่อประสิทธิภาพ localStorage บันทึกข้อมูล string ในเบราว์เซอร์ ไม่มีวันหมดอายุ ส่วน sessionStorage จำกัดเฉพาะเซสชัน ปิด

HTML5 Geolocation API ให้ตำแหน่งละติจูด/ลองจิจูด สามารถนำไปแสดงบน Google Maps ได้ ต้องมี API Key จาก Google Cloud Console ขั้นตอน ไปที่ Google Cloud Console สร้าง API Key สำหรับ Maps Static API นำ API Key ไปใส่ในโค้ด ใช้ navigator.geolocation.getCurrentPosition() ดึงตำแหน่ง สร้าง URL รูปภาพแผนที่จ

เพื่อวาดเส้นตรงใน HTML ใช้ Canvas element ร่วมกับเมธอด lineTo() ซึ่งรับพารามิเตอร์ x และ y สำหรับตำแหน่งปลายเส้น ตัวอย่าง <!DOCTYPE html> <html>    <head>       <title>HTML Canvas</title>    </head>    <body> &nb

เมธอด arc() ใช้สร้างวงกลมใน HTML5 Canvas สำหรับวงกลมสมบูรณ์ ใช้มุมเริ่มต้น 0 และมุมสิ้นสุด 2*Math.PI พารามิเตอร์ของ arc() ลำดับพารามิเตอร์คำอธิบาย 1xพิกัด x ของจุดศูนย์กลาง 2yพิกัด y ของจุดศูนย์กลาง 3rรัศมีของวงกลม 4startingAngleมุมเริ่มต้น (เรเดียน) 5endingAngleมุมสิ้นสุด (เรเดียน) 6counterclo

เพื่อวาดข้อความทึบ (filled text) บน Canvas ใน HTML5 ใช้เมธอด fillText() เมธอดนี้จะเติมสีข้อความที่ตำแหน่งที่กำหนดโดยพิกัด x และ y สีเริ่มต้นคือสีดำ ไวยากรณ์ fillText(text, x, y [, maxWidth ] ) พารามิเตอร์ ลำดับพารามิเตอร์คำอธิบาย 1textข้อความที่จะวาด 2xพิกัด x 3yพิกัด y 4maxWidthความกว้างสูงสุด

HTML5 Geolocation API อนุญาตให้แบ่งปันตำแหน่งกับเว็บไซต์ JavaScript สามารถดึงละติจูดและลองจิจูดส่งไปยังเซิร์ฟเวอร์เพื่อค้นหาธุรกิจใกล้เคียงหรือแสดงตำแหน่งบนแผนที่ Geolocation ซับซ้อน จึงต้องจับข้อผิดพลาดและจัดการอย่างเหมาะสม เมธอด getCurrentPosition() และ watchPosition() ใช้ callback function สำหรั

เพื่อวาดข้อความบน Canvas ใน HTML5 ใช้เมธอด strokeText() เมธอดนี้จะวาดขอบข้อความที่ตำแหน่งที่กำหนดโดยพิกัด x และ y สีเริ่มต้นคือสีดำ ไวยากรณ์ strokeText(text, x, y [, maxWidth ] ) พารามิเตอร์ ลำดับพารามิเตอร์คำอธิบาย 1textข้อความที่จะวาด 2xพิกัด x เริ่มต้นการวาด 3yพิกัด y เริ่มต้นการวาด 4maxWidt

บทนำ รวม Geolocation API กับ Google Maps Static API เพื่อแสดงแผนที่ตำแหน่งปัจจุบัน ต้องมี API Key จาก Google Cloud Console ขั้นตอนเตรียม API Key ไปที่ Google Cloud Console สร้าง Project / เลือก Project Enable Maps Static API สร้าง Credentials → API Key (แนะนำ) จำกัด API Key: HTTP Referr

บทนำ HTML5 Web Storage ให้เก็บข้อมูลฝั่ง Client (Key-Value) แทน Cookies ข้อดี: ขนาดใหญ่กว่า (5-10MB), ไม่ส่งไป Server ทุก Request, API ง่าย เปรียบเทียบ คุณสมบัติsessionStoragelocalStorage อายุข้อมูลจนกว่าจะปิด Tab/Windowถาวร (จนกว่าจะลบ) ขอบเขตต่อ Tab (แต่ละ Tab แยกกัน)ต่อ Origin (Do

บทนำ Geolocation API ให้ JavaScript เข้าถึงตำแหน่งผู้ใช้ ผ่าน navigator.geolocation ต้องใช้ HTTPS ตัวอย่าง: หาตำแหน่งปัจจุบัน (Get Current Position) <!DOCTYPE HTML> <html> <head> <script> function showLocation(position) { var lat = position.coords.latitu

บทนำ กราฟิกเวกเตอร์ (SVG) เหมาะสำหรับ Responsive Design เพราะ Resolution Independent - ขยาย-ย่อไม่เสียคุณภาพ ไฟล์เล็ก และจัดการด้วย CSS/JS ได้ เทคนิค: Vector Background ด้วย CSS Fixed Positioning <!DOCTYPE html> <html> <head> <style> #bgVector { position

บทนำ มีหลายวิธีใช้ SVG ใน HTML5 เลือกตามความเหมาะสม วิธีที่ 1: Inline SVG (แนะนำมากที่สุด) <svg width=100 height=100> <circle cx=50 cy=50 r=40 fill=blue /> </svg> ✅ จัดสไตล์ด้วย CSS ได้ ✅ จับ Event ได้ ✅ Accessibility ดี ✅ ไม่ต้อง Request เพิ่ม วิธีที่ 2: <img> Tag <i

บทนำ แอตทริบิวต์ list เชื่อม <input> กับ <datalist> ให้ Autocomplete Suggestions (แตกต่างจาก Select ที่บังคับเลือก) ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML List Attribute</title> </head> <body> <p>พิมพ์ชื่อเคร

บทนำ แอตทริบิวต์ min และ max กำหนดค่าต่ำสุดและสูงสุดขององค์ประกอบ ใช้กับ <input>, <meter>, <progress> องค์ประกอบที่รองรับ Elementminmax <input>✓✓ <meter>✓✓ <progress>-✓ Input Types ที่รองรับ min/max number, range date, month, week, ti

บทนำ แอตทริบิวต์ multiple (Boolean) อนุญาตให้เลือก/กรอกหลายค่าได้ ใช้กับ <input> และ <select> Input Types ที่รองรับ Typeพฤติกรรม fileเลือกหลายไฟล์พร้อมกัน (Ctrl/Cmd + Click) emailกรอกหลายอีเมล คั่นด้วย Comma <select multiple>เลือกหลายรายการ (Ctrl/Cmd + Click)

บทนำ หมายเหตุ: การเล่นเสียงอัตโนมัติ (Autoplay) ในเบราว์เซอร์สมัยใหม่ ถูกบล็อก หากมีเสียง ต้องใช้ muted หรือโต้ตอบผู้ใช้ก่อน วิธีเดิม (Deprecated - ใช้ <embed>) <!DOCTYPE html> <html> <head> <title>HTML Background Music (Old Method)</title> </head>

บทนำ แอตทริบิวต์ pattern กำหนด Regular Expression (Regex) สำหรับ Validate ค่าที่กรอก ใช้ได้กับ: text, search, url, tel, email, password, date ตัวอย่างโค้ด (รหัสผ่านอย่างน้อย 8 ตัวอักษร) <!DOCTYPE html> <html> <body> <h2>สมัครสมาชิก</h2> <form action=/new.

บทนำ แอตทริบิวต์ placeholder แสดงข้อความแนะนำ (Hint) ในช่องกรอก ก่อนที่ผู้ใช้จะพิมพ์ จะหายเมื่อเริ่มพิมพ์ ตัวอย่างโค้ด <!DOCTYPE html> <html> <body> <h2>สมัครสมาชิก</h2> <form action=/new.php> <input type=text placeholder=ชื่อผู้ใช้ name=name

บทนำ แอตทริบิวต์ required ระบุว่าช่องกรอก ต้องกรอกก่อนส่งฟอร์ม ใช้ได้กับ <input>, <select>, <textarea> ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML Required Attribute</title> </head> <body> <h2>สมัครสมาชิก<