บทนำ แท็ก <canvas> ของ HTML5 ใช้สำหรับวาดกราฟิกผ่าน JavaScript ใช้เมธอด lineTo(x, y) เพื่อวาดเส้นตรงจากจุดปัจจุบันไปยังจุดที่กำหนด ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Lines</title> </head> <body> <canvas id

บทนำ แท็ก <canvas> ของ HTML5 ใช้สำหรับวาดกราฟิกและแอนิเมชันผ่าน JavaScript โดยใช้เมธอด getContext(2d) เพื่อรับคอนเท็กซ์การวาดภาพ 2 มิติ ในการวาดเส้นโค้งกำลังสอง (Quadratic Bezier Curve) ให้ใช้เมธอด quadraticCurveTo(cpx, cpy, x, y) โดยที่: cpx, cpy = จุดควบคุม (control point) x, y = จุดป

บทนำ ฟอร์ม HTML ใช้สำหรับรับข้อมูลจากผู้ใช้ โดยใช้แท็ก <form> ร่วมกับองค์ประกอบฟอร์มต่างๆ เช่น ช่องกรอกข้อความ (<input type=text>) ปุ่มラジオ (<input type=radio>) และปุ่มส่ง (<input type=submit>) เพื่อล้างค่าทุกช่องในฟอร์ม ให้ใช้แท็ก <input> พร้อมแอตทริบิวต์ type=reset

บทนำ การส่งอีเมลผ่านฟอร์ม HTML สามารถทำได้โดยการเพิ่มที่อยู่อีเมลในแอตทริบิวต์ action ของฟอร์ม โดยใช้โปรโตคอล mailto: ตามด้วยที่อยู่อีเมล เช่น mailto:emailid@example.com ตัวอย่างโค้ด ลองรันโค้ดต่อไปนี้เพื่อส่งอีเมลด้วยฟอร์ม HTML: <!DOCTYPE html> <html> <body> <h2>Stud

ปุ่มรีเซ็ต (Reset button) ใช้สำหรับล้างค่าทุกช่องกรอกในฟอร์ม HTML ให้กลับสู่ค่าเริ่มต้น สร้างได้โดยใช้แท็ก <input> พร้อมแอตทริบิวต์ type="reset" ตัวอย่าง <!DOCTYPE html> <html>    <body>       <form>          

ใช้ <fieldset> จัดกลุ่ม form controls ที่เกี่ยวข้องกัน และ <legend> ให้ชื่อกลุ่ม ช่วย accessibility และ visual grouping โครงสร้างพื้นฐาน <form> <fieldset> <legend>Group Title</legend> <!-- form controls --> </fieldset> </form> ตัวอย

ใช้แท็ก <select> สร้าง dropdown list (select box) ให้ผู้ใช้เลือก 1 รายการ (หรือหลายรายการด้วย multiple) จากรายการ <option> โครงสร้างพื้นฐาน <select name=dropdown> <option value=value1>Display Text 1</option> <option value=value2 selected>Display Text 2</op

ใช้ attribute selected ใน <option> ที่ต้องการให้เลือกไว้ตั้งแต่แรก รูปแบบ <select name=language> <option value=java>Java</option> <option value=python selected>Python</option> <option value=js>JavaScript</option> </select> ตัวอย่างเต็ม &l

ใช้ createLinearGradient() สร้าง gradient แบบเส้นตรง จากจุดเริ่มต้นไปจุดสิ้นสุด Syntax const gradient = ctx.createLinearGradient(x0, y0, x1, y1); Parameter Parameterคำอธิบาย x0, y0จุดเริ่มต้น (start point) x1, y1จุดสิ้นสุด (end point) ทิศทาง Gradient ทิศทางParame

ใช้ createRadialGradient() สร้าง gradient แบบรัศมี (Circular/Radial) จากวงกลมหนึ่งไปอีกวงกลมหนึ่ง Syntax const gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1); Parameter Parameterคำอธิบาย x0, y0จุดศูนย์กลางวงกลมเริ่มต้น (start circle) r0รัศมีวงกลมเริ่มต้น x1,

เมธอด drawImage() ของ Canvas 2D Context ใช้วาดรูปภาพ, canvas อื่น, หรือ video frame ลงบน canvas สามารถ crop, scale, transform ได้ Syntax Variations // Basic - วาดเต็มรูป ctx.drawImage(image, x, y) // With scaling - วาดพร้อม resize ctx.drawImage(image, x, y, width, height) // With cropping - crop

SVG (Scalable Vector Graphics) เป็นกราฟิกเวกเตอร์ที่ขยายได้ไม่เสียคุณภาพ วาดวงกลมด้วยแท็ก <circle> ภายใน <svg> Attribute ของ <circle> Attributeคำอธิบาย cxX coordinate ของจุดศูนย์กลาง cyY coordinate ของจุดศูนย์กลาง rรัศมี (radius) fillสีเติม (CSS color

แท็ก <base> กำหนด Base URL สำหรับ relative URLs ทั้งหมดในหน้าเว็บ วางใน <head> มีได้เพียง 1 ต่อหน้า Attribute Attributeค่าคำอธิบาย hrefURLBase URL สำหรับ relative links ทั้งหมด target_blank, _self, _parent, _topDefault target สำหรับ links ทั้งหมด ตัวอย่าง <

แท็ก <kbd> (Keyboard Input) ใช้สำหรับแสดงคีย์หรือการกดคีย์บอร์ดที่ผู้ใช้ต้องกด Browser แสดงเป็น monospace font โดยค่าเริ่มต้น ตัวอย่างพื้นฐาน <!DOCTYPE html> <html> <body> <p>Two special keys in keyboard are: <kbd>Ctrl</kbd>, <kbd>Alt</kbd>.&l

แท็ก <samp> (Sample Output) ใช้สำหรับแสดงตัวอย่าง output จากโปรแกรมคอมพิวเตอร์ terminal, console, log ไฟล์ ฯลฯ Browser แสดงเป็น monospace font โดยค่าเริ่มต้น ตัวอย่าง <!DOCTYPE html> <html> <head> <title>HTML samp Tag</title> </head> <body> <p&

แท็ก <var> ใช้สำหรับแทนตัวแปรในนิพจน์คณิตศาสตร์ หรือตัวแปรในโปรแกรม Browser จะแสดงเป็นตัวเอียง (italic) โดยค่าเริ่มต้น ตัวอย่าง <!DOCTYPE html> <html> <head> <title>HTML var Tag</title> </head> <body> <p>The equations: <var>2x</var&

รูปภาพเคลื่อนไหวใน HTML ใช้ไฟล์ GIF (Graphics Interchange Format) แสดงได้โดยตรงด้วยแท็ก <img> เหมือนรูปภาพทั่วไป รูปแบบพื้นฐาน <img src=animation.gif alt=คำอธิบาย width=300 height=200> ตัวอย่าง <!DOCTYPE html> <html> <head> <title>Animated Image</title>

Radio Button ใช้เมื่อผู้ใช้เลือกได้ เพียง 1 ตัว จากกลุ่มตัวเลือก (Single selection) สร้างด้วย <input type=radio> Attribute สำคัญ Attributeคำอธิบาย type=radioกำหนดเป็น radio button (จำเป็น) nameชื่อกลุ่ม ต้องเหมือนกันทุกตัวในกลุ่ม (จำเป็น) valueค่าที่ส่งเมื่อถูกเลือก

Checkbox ใช้เมื่อผู้ใช้สามารถเลือกได้หลายตัวพร้อมกัน (Multiple selection) สร้างด้วย <input type=checkbox> Attribute สำคัญ Attributeคำอธิบาย type=checkboxกำหนดเป็น checkbox (จำเป็น) nameชื่อฟิลด์ ส่งไป server (checkbox ที่เลือกเท่านั้น) valueค่าที่ส่งเมื่อถูกเลือก (de

ใช้ <input type=password> สำหรับรับรหัสผ่าน จะแสดงเป็นจุด (●) หรือ asterisk (*) แทนตัวอักษรจริง รูปแบบพื้นฐาน <label> Password: <input type=password name=password id=password> </label> ตัวอย่างเต็ม <!DOCTYPE html> <html> <head> <title>HTML Form