Author Chatchai Charoensarikorn

บทเรียนนี้จะอธิบาย Attribute ต่างๆ สำหรับแท็ก <input> ใน HTML value Attribute Attribute value ใช้ระบุค่าเริ่มต้นสำหรับฟิลด์อินพุต: ตัวอย่าง readonly Attribute Attribute readonly ระบุว่าฟิลด์อินพุตเป็นแบบอ่านอย่างเดียว ฟิลด์อินพุตแบบอ่านอย่างเดียวไม่สามารถแก้ไขได้ (อย่างไรก็ตาม ผู้ใช้สามารถแท็บไปยังฟิลด์นั้น เน้นสี และคัดลอกข้อความจากนั้น) ค่าของฟิลด์อินพุตแบบอ่านอย่างเดียวจะถูกส่งเมื่อทำการส่งแบบฟอร์ม ตัวอย่าง ป้อนข้อมูลแบบอ่านอย่างเดียว: disabled Attribute Attribute disabled อินพุตใช้ในการระบุว่าปิดใช้งานช่องอินพุต Disabled Input Field จะไม่สามารถคลิกได้ โดยค่าของ Disabled Input Field จะไม่ถูกส่งเมื่อกดส่งแบบฟอร์ม ตัวอย่าง Disabled Input Field: size Attribute Attribute size ใช้ระบุความกว้างในช่องที่ไว้กรอกตัวอักษร หมายเหตุ: […]

ในบทเรียนจะอธิบายเกี่ยวกับ Element Form ที่ใช้งานต่างกัน HTML <form> สามารถมีองค์ประกอบแบบฟอร์มต่อไปนี้ตั้งแต่หนึ่งรายการขึ้นไป: <input> Element องค์ประกอบแบบฟอร์มที่ใช้มากที่สุดอย่างหนึ่งคือ <input> องค์ประกอบนี้สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ Attribute type ตัวอย่าง <label> Element <label> ใช้กำหนดป้ายกำกับสำหรับองค์ประกอบหลายรูปแบบ <label> มีประโยชน์สำหรับผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากโปรแกรมอ่านหน้าจอจะอ่านออกเสียงฉลากเมื่อผู้ใช้โฟกัสไปที่องค์ประกอบอินพุต <label> ยังช่วยผู้ใช้ที่มีปัญหาในการคลิกพื้นที่ขนาดเล็กมาก (เช่น ปุ่มตัวเลือกหรือช่องทำเครื่องหมาย) เนื่องจากเมื่อผู้ใช้คลิกข้อความภายในองค์ประกอบ องค์ประกอบดังกล่าวจะ <label> สลับปุ่มตัวเลือก/ช่องทำเครื่องหมาย Attribute for ของ Tag <label> ควรเท่ากับ Attribute id ของ Element <input> เพื่อผูกเข้าด้วยกัน <select> Element <select> ใช้กำหนดรายการแบบ Drop-down List: ตัวอย่าง <option> กำหนดตัวเลือกที่สามารถเลือกได้ตามค่าเริ่มต้น […]

แบบฟอร์ม HTML ใช้เพื่อรวบรวมอินพุตของผู้ใช้ อินพุตของผู้ใช้มักถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล ตัวอย่าง HTML Forms ชื่อ: นามสกุล: หากคุณคลิกปุ่ม “ส่ง” ข้อมูลแบบฟอร์มจะถูกส่งไปยังหน้าชื่อ “action_page.php” <form> Element Tag <form> ใช้เพื่อสร้างรูปแบบ HTML สำหรับการป้อนข้อมูลของผู้ใช้: <form> คือคอนเทนเนอร์สำหรับองค์ประกอบอินพุตประเภทต่างๆ เช่น ช่องข้อความ ช่องทำเครื่องหมาย ปุ่มตัวเลือก ปุ่มส่ง ฯลฯ <input> Element <input> เป็นองค์ประกอบรูปแบบที่ใช้มากที่สุด สามารถแสดงได้หลายวิธี ขึ้นอยู่กับ Attribute type ตัวอย่างบางส่วน: Type คำอธิบาย <input type=”text”> แสดงฟิลด์ป้อนข้อความบรรทัดเดียว <input type=”radio”> แสดงปุ่มตัวเลือก (สำหรับเลือกหนึ่งในหลายตัวเลือก) <input type=”checkbox”> แสดงกล่องกาเครื่องหมาย (สำหรับการเลือกหลายตัวเลือก) <input […]

URL (Uniform Resource Locator) คือชื่อที่ใช้เรียกที่อยู่ของเว็บไซต์ URL สามารถประกอบด้วยคำ (เช่น hostatom.com) หรือ IP (Internet Protocol) Address เช่น 192.68.20.50 คนส่วนใช้ชื่อในการแทน URL เพราะชื่อจำง่ายกว่าตัวเลข IP เว็บเบราว์เซอร์ใช้เรียกเพจจากเว็บเซิร์ฟเวอร์โดยใช้ URL เพื่อระบุเอกสาร (หรือข้อมูลอื่นๆ) บนเว็บที่อยู่เว็บ เช่น htttps://kb.hostatom.com/category/html/index อธิบาย: URL Schemes Scheme ย่อมาจาก ใช้กับ http HyperText Transfer Protocol เว็บเพจทั่วไป ที่ไม่มีการเข้ารหัส https Secure HyperText Transfer Protocol เว็บเพจที่ต้องการความปลอดภัย เข้ารหัส ftp File Transfer Protocol […]

อีโมจิคืออะไร ? อิโมจิดูเหมือนรูปภาพหรือไอคอน แต่ไม่ใช่ อิโมิจิเป็นตัวอักษร (อักขระ) จากชุดอักขระ UTF-8 (Unicode) UTF-8 ครอบคลุมอักขระและสัญลักษณ์เกือบทั้งหมดในโลก HTML charset Attribute หากต้องการแสดงหน้าเพจ HTML อย่างถูกต้อง เว็บเบราว์เซอร์ต้องทราบชุดอักขระที่ใช้ในเพจ สิ่งนี้ระบุไว้ในแท็ก <meta> หากไม่ได้ระบุ UTF-8 จะเป็นชุดอักขระเริ่มต้นใน HTML อักขระ UTF-8 เราไม่สามารถพิมพ์อักขระ UTF-8 จำนวนมากบนแป้นพิมพ์ได้ แต่สามารถแสดงโดยใช้ตัวเลขได้เสมอ (เรียกว่า Entity Numbers) เช่น A คือ 65 B คือ 66 C คือ 67 ตัวอย่าง อธิบายตัวอย่าง <meta charset=”UTF-8″> Element ใช้ระบุชุดอักขระเพื่อให้เบราว์เซอร์เข้าใจว่าคุณกำลังแสดงอักขระ คุณต้องขึ้นต้น Entity […]

สัญลักษณ์ที่ไม่มีอยู่บนแป้นพิมพ์ของคุณสามารถเพิ่มได้โดยใช้ Entities HTML Symbol Entities ต่อจากบทเรียนก่อนหน้า ในบทเรียนนี้จะพูดถึงสัญลักษณ์ทางคณิตศาสตร์ ทางเทคนิค ทางเงินตรา ปกติแล้วจะไม่ปรากฎอยู่บนคีย์บอร์ด หากต้องการเพิ่มสัญลักษณ์ดังกล่าวในหน้า HTML คุณสามารถใช้ Entity Name และ Entity Number (สามารถอ้างอิงเลขฐานสิบหรือเลขฐานสิบหกได้เช่นกัน) หมายเหตุ: การใช้ Symbols จะนำหน้าด้วย & และลงท้ายด้วย ; ตัวอย่าง แสดงเครื่องหมายยูโร € พร้อม Entity Name เลขฐานสิบและค่าฐานสิบหก ตัวอย่างสัญลักษณ์ทางคณิตศาสตร์ใน HTML สัญลักษณ์ Entity Number Entity Name อธิบายสัญลักษณ์ ∀ &#8704; &forall; FOR ALL ∂ &#8706; &part; PARTIAL […]

HTML Entity คือ อักขระพิเศษที่ใช้ในการเขียนเว็บด้วย HTML สำหรับแทนที่เครื่องหมาย หากคุณใช้เครื่องหมายน้อยกว่า (<) หรือมากกว่า (>) ในข้อความของคุณ เบราว์เซอร์อาจผสมเครื่องหมายเหล่านี้กับแท็ก จึงจำเป็นต้องมีอักขระพิเศษในการแสดงเครื่องหมายแทน อักขระพิเศษ (Entity) มีลักษณะดังนี้: ในการแสดงเครื่องหมายน้อยกว่า (<) เราสามารถเขียน: &lt; หรือ &#60; ข้อดีของการใช้ Entity Name: ชื่อ Entity จำง่ายข้อเสียของการใช้ Entity Name: เบราว์เซอร์อาจไม่รองรับ Entity Name ทั้งหมด แต่จะรองรับ Entity Number การทำให้เนื้อหามีช่องว่างแบบไม่ตัดคำ (Non-breaking Space) Entity ที่ใช้สำหรับการทำให้เนื้อหาไม่แยกออกจากกันกันทั่วไปใน HTML คือ &nbsp; Non-breaking Space คือ ช่องว่างที่จะไม่ขึ้นบรรทัดใหม่ คำสองคำที่คั่นด้วยช่องว่างที่ไม่แบ่งจะติดกัน (ไม่แตกเป็นบรรทัดใหม่) สิ่งนี้มีประโยชน์เมื่อเกิดปัญหาการตัดคำขึ้นบรรทัดใหม่ซึ่งอาจส่งผลทำให้เนื้อหาอ่านแล้วไม่เข้าใจ ตัวอย่าง […]

Semantic Elements = Elements ที่มีความหมาย Semantic Elements คืออะไร ? Semantic Elements คำที่แทนกลุ่ม Tag ที่มีการกำหนดเนื้อหาได้อย่างชัดเจนยกตัวอย่าง เช่น Semantic Elements: <form>, <table>, และ <article> – เป็นแท็กที่มีการกำหนดเนื้อหาอย่างชัดเจน Non-semantic Elements: <div> และ <span> – เป็นแท็กที่ไม่ได้บอกเกี่ยวกับเนื้อหา Semantic Elements ใน HTML เว็บไซต์ส่วนใหญ่ที่เขียนโดย HTML จะมีโค้ดเช่น <div id=”nav”> <div class=”header”> <div id=”footer”> เพื่อระบุว่าส่วนไหนคือ การนำทาง ส่วนหัว และส่วนท้ายของเว็บเพจ ใน HTML มี Semantic Elements บางตัวที่สามารถใช้เพื่อกำหนดส่วนต่างๆ ของหน้าเว็บ:   HTML <section> […]

Responsive Web Design คือการสร้างหน้าเว็บที่แสดงผลได้เหมาะสมกับทุกอุปกรณ์ ซึ่งจะมีการปรับขนาดหน้าจอแสดงผลของเว็บไซต์ (Viewport) โดยอัตโนมัติ Responsive Web Design คืออะไร ? Responsive Web Design คือการใช้ HTML และ CSS เพื่อปรับขนาด, ซ่อน, ย่อ/ขยาย เว็บไซต์อัตโนมัติทำให้เว็บไซต์ดูดีในทุกขนาด (เดสก์ท็อป แท็บเล็ต และโทรศัพท์) การตั้งค่า Viewport ในการที่จะทำ Responsive Website คุณควรจะเพิ่มแท็ก <meta> ในหน้าเว็บของคุณ ตัวอย่าง การตั้งค่าวิวพอร์ตของหน้าเว็บจะให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับวิธีควบคุมขนาดของหน้าเว็บ นี่คือตัวอย่างของหน้าเว็บที่ไม่มี Viewport Meta Tag กับหน้าเว็บที่มี Viewport Meta Tag ที่ไม่มี Viewport Meta Tag มี Viewport […]

<head> Element คือ ส่วนที่เป็นเหมือนคอนเทนเนอร์ไว้ใส่ Element อื่นๆ เช่น <style>, <meta>, <link>, <script>, <base> <head> Element <head> Element คือคอนเทนเนอร์สำหรับ Metadata จะอยู่ระหว่าง Tag <html> และ <body> Metadata เป็นข้อมูลเกี่ยวกับเอกสาร HTML Metadata ไม่แสดงผลในเบราว์เซอร์ โดยทั่วไป Metadata จะกำหนดชื่อเอกสาร ประเภทตัวอักษร สไตล์ สคริปต์ และข้อมูลเมตาอื่นๆ <title> Element <title> คือ Tag ใช้ระบุชื่อเรื่องของเอกสาร ชื่อเรื่องต้องเป็นข้อความเท่านั้น และจะแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า Tag <title> นั้นสำคัญมากสำหรับการปรับแต่งเว็บไซต์ให้ติดเสิร์ช เพราะอัลกอริทึมของเครื่องมือค้นหาใช้ชื่อหน้าเว็บเพื่อตัดสินใจลำดับเมื่อแสดงรายการหน้าในผลการค้นหา แท็ก <title> สามารถ: ดังนั้น พยายามตั้งชื่อให้ถูกต้องและมีความเหมาะสมกับเรื่องนั้นๆ […]