Author Chatchai Charoensarikorn

มัลติมีเดียคืออะไร? มัลติมีเดียมีหลายรูปแบบ สามารถเป็นได้เกือบทุกอย่างที่คุณได้ยินหรือเห็น เช่น ภาพ เพลง เสียง วิดีโอ บันทึก ภาพยนตร์ ภาพเคลื่อนไหว และอื่นๆ เว็บเพจมักประกอบด้วยองค์ประกอบมัลติมีเดียประเภทและรูปแบบต่างๆ การสนับสนุนของเบราว์เซอร์ ในตอนแรกเว็บเบราว์เซอร์รองรับเฉพาะข้อความเท่านั้น โดยจำกัดเพียงแบบอักษรเดียวในสีเดียว ต่อมาเบราว์เซอร์ที่รองรับสี ฟอนต์ รูปภาพ และมัลติมีเดีย รูปแบบมัลติมีเดีย(Multimedia Formats) องค์ประกอบมัลติมีเดีย (เช่น เสียงหรือวิดีโอ) จะถูกจัดเก็บไว้ในไฟล์มีเดีย วิธีทั่วไปในการค้นหาประเภทของไฟล์คือการดูที่นามสกุลไฟล์ ไฟล์มัลติมีเดียมีรูปแบบและนามสกุลต่างกัน เช่น .wav, .mp3, .mp4, .mpg, .wmv และ .avi รูปแบบวิดีโอทั่วไป HTML รองรับรูปแบบ MP4, WebM และ Ogg YouTube แนะนำให้ใช้รูปแบบ MP4 Format File Description MPEG .mpg.mpeg […]

HTML Canvas คืออะไร? <canvas> ใช้ในการวาดกราฟิกได้ทันทีผ่าน JavaScript <canvas>เป็นเพียงภาชนะสำหรับกราฟิก คุณต้องใช้ JavaScript เพื่อวาดกราฟิกจริงๆ ซึ่ง canvas มีหลายวิธีในการวาดเส้นทาง กล่อง วงกลม ข้อความ และการเพิ่มรูปภาพ เบราว์เซอร์ที่สนับสนุน ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ <canvas> ทั้งหมด Element Chrome Edge Firefox Safari Opera <canvas> 4.0 9.0 2.0 3.1 9.0 ตัวอย่าง Canvas canvas เป็นพื้นที่สี่เหลี่ยมบนหน้า HTML ตามค่าเริ่มต้น canvas ไม่มีเส้นขอบและไม่มีเนื้อหา มาร์กอัปมีลักษณะดังนี้: หมายเหตุ:ระบุ id แอตทริบิวต์ (ที่จะอ้างถึงในสคริปต์) เสมอและแอตทริบิวต์  width และ height เพื่อกำหนดขนาดของ canvas หากต้องการเพิ่มเส้นขอบให้ใช้ […]

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

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

แบบฟอร์ม 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 […]

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

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