Author Chatchai Charoensarikorn

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

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 ตัวอย่าง การแสดงผล A B C การแสดงผล A B C […]

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

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

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> Element <section> element ใช้กำหนดส่วนในเอกสาร […]

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

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

JavaScript ทำให้หน้าเพจ HTML มีไดนามิกและการตอบสนองกับผู้ใช้งานได้มากขึ้น ตัวอย่าง My First JavaScript Click me to display Date and Time. แท็ก HTML <script> องค์ประกอบ<script>ประกอบด้วยคำสั่งสคริปต์ หรือชี้ไปยังไฟล์สคริปต์ภายนอกผ่านsrcแอตทริบิวต์ การใช้งานทั่วไปสำหรับ JavaScript คือการจัดการรูปภาพ การตรวจสอบแบบฟอร์ม และการเปลี่ยนแปลงแบบไดนามิกของเนื้อหา การเลือกองค์ประกอบ HTML ส่วนใหญ่ JavaScript ใช้ document.getElementById() ตัวอย่าง JavaScript นี้เขียนว่า “Hello JavaScript!” เป็นองค์ประกอบ HTML ที่มี id=”demo”: ตัวอย่าง Use JavaScript to Change Text This example writes “Hello JavaScript!” […]