เรียนรู้วิธีใช้ HTML <head> element บนเว็บไซต์ของคุณ HTML <head> element เป็น container สำหรับ metadata (ข้อมูลเกี่ยวกับข้อมูล) ของหน้าเว็บ เช่น page title, styles, และ scripts เนื้อหาภายใน <head> element จะถูก หลัก อ่านและประมวลผลโดย machines (เช่น browser) ไม่ใช่โดยผู้เยี่ยมชมเว็

หากคุณต้องการแสดงไวยากรณ์โค้ด HTML โดยไม่ ให้เบราว์เซอร์ตีความว่าเป็นมาร์กอัปจริง (และเรนเดอร์มัน) คุณต้อง escape ตัวอักษร HTML ที่ สงวนไว้ ก่อน ดูที่แท็ก <h1> ภายในเอลิเมนต์ <code></code> ด้านล่าง: หากคุณเพิ่มโค้ดข้างต้นลงในเอกสาร HTML แท็ก <h1> จะถูกตีความเป็นมาร์กอัปจริ

เรียนรู้วิธีใช้แอตทริบิวต์ HTML โดยดูที่ชื่อและค่าแอตทริบิวต์ที่ใช้บ่อยที่สุด HTML Attributes คืออะไร? ใน HTML แอตทริบิวต์คือเครื่องมือปรับเปลี่ยนที่ใช้เพิ่มข้อมูลเพิ่มเติมให้กับเอลิเมนต์ HTML หรือเปลี่ยนพฤติกรรมค่าเริ่มต้น (out of the box) ของพวกเขา เอลิเมนต์ HTML ที่ไม่มีแอตทริบิวต์เพิ่มเติมมีลั

แอตทริบิวต์ href แอตทริบิวต์ href เป็นหนึ่งในแอตทริบิวต์ที่สำคัญที่สุดใน HTML href ใช้สำหรับระบุ URL สำหรับ: ไฮเปอร์ลิงก์ (เรียกเพียงว่า ลิงก์) หรือสำหรับนำเข้ารีซอร์สภายนอก เช่น สไตล์และสคริปต์ กรณีการใช้งานที่พบบ่อยที่สุดของ href คือเพิ่มลิงก์ภายในหรือภายนอก (URL) บนแองคอร์เอลิเมนต์ <a>:

แท็ก <br> กำหนดเอลิเมนต์แบบ inline ใน HTML ที่บังคับให้ขึ้นบรรทัดใหม่ (line break) ระหว่างข้อความที่คุณวางไว้ระหว่างกัน ตัวอย่าง: <p> The &lt;br&gt; tag <br>forces<br>line<br>breaks in text </p> ผลลัพธ์: The <br> tagforces line breaks in text ข้อม

ใน HTML มีเอลิเมนต์รายการ 3 ประเภท: Unordered lists (ที่พบบ่อยที่สุด) Ordered lists Description lists Unordered Lists (รายการแบบไม่มีลำดับ) Unordered lists ถูกกำหนดด้วยเอลิเมนต์ <ul> และแต่ละรายการภายในถูกกำหนดด้วยเอลิเมนต์ <li>: ผลลัพธ์: Apple Banana Orange โดยค่าเริ่มต้น Unorde

เอลิเมนต์ HTML <noscript> ใช้แสดงเนื้อหาในเบราว์เซอร์ของผู้เยี่ยมชมเมื่อ JavaScript ปิดใช้งาน สมมติว่ามีใครเข้าชมเว็บไซต์ของคุณ แต่พวกเขาปิด JavaScript ในเบราว์เซอร์ไว้ เพื่อบอกพวกเขา (พวกเขาอาจปิด JavaScript ไปโดยไม่ได้ตั้งใจ) คุณจะใช้ <noscript> อย่างนี้: เพื่อแสดงตัวอย่าง ฉันเพิ่มโ

ฉันมักเห็นเว็บไซต์ที่ใช้ปุ่มและลิงก์ (แองคอร์เอลิเมนต์ <a>) สลับกันใช้ แต่ไม่ได้ยากที่จะทำให้ถูกต้อง นี่คือแนวทางพื้นฐาน: เมื่อไหร่ควรใช้ลิงก์ (<a>) ใช้ลิงก์ (<a href=/go-here>link</a>) หากคุณต้องการให้ผู้ใช้: ไปยังส่วนอื่นบนหน้าเดียวกัน ไปยังหน้าอื่นบนเว็บไซต์ของคุณ ไปยังเ

เรียนรู้วิธีใช้เอลิเมนต์ HTML <meta> เอลิเมนต์ <meta> ใช้กำหนดเมตาดาต้าหลายประเภทเกี่ยวกับเอกสาร HTML เมตาดาต้าหมายถึงข้อมูล หรือเฉพาะเจาะจงกว่านั้น เมตาดาต้าคือข้อมูลที่อธิบายและให้ข้อมูลเกี่ยวกับข้อมูลอื่น เอลิเมนต์ <meta> มีแอตทริบิวต์และค่าหลายอย่าง แอตทริบิวต์ name เป็นหนึ่

แอตทริบิวต์ rel=noopener เป็นหนึ่งในแอตทริบิวต์ HTML ที่สำคัญที่สุดที่ควรรู้ เพราะมันส่งผลโดยตรงต่อ ความปลอดภัยลิงก์ภายนอก บนแองคอร์ลิงก์ที่ใช้แอตทริบิวต์ target=_blank target=_blank ทำให้ลิงก์เปิดในแท็บเบราว์เซอร์ใหม่ นี่คือตัวอย่างลิงก์พร้อมแอตทริบิวต์ rel=noopener: rel=noopener ทำงานอย่างไร?

แอตทริบิวต์ target แอตทริบิวต์ target ระบุว่าจะเปิดลิงก์ที่ไหนเมื่อผู้ใช้คลิก หากคุณคลิกลิงก์ด้านล่าง คุณจะถูกนำไปหน้าหน้าของ TechStacker ในแท็บ/หน้าต่างเบราว์เซอร์เดียวกับที่คุณอยู่ตอนนี้: ดังนั้นหากคุณลิงก์ไปเว็บไซต์อื่น ผู้ใช้จะถูกย้ายออกจากเว็บไซต์ของคุณ ไปยังเว็บไซต์ที่คุณลิงก์ไป คุณอาจต้องก

ใน HTML แอตทริบิวต์ โดยปกติ ประกอบด้วยชื่อแอตทริบิวต์และค่าแอตทริบิวต์ เช่นในตัวอย่างแองคอร์เอลิเมนต์ อย่างไรก็ตาม บางครั้ง ค่า (พฤติกรรม) ถูกสร้างไว้ในตัวชื่อแอตทริบิวต์ ตัวอย่างเช่น แอตทริบิวต์ defer ที่เราใช้แก้ไขเอลิเมนต์ HTML <script>: สังเกตว่าแอตทริบิวต์ defer ไม่มีตัวดำเนินการกำหนด

ใน HTML คุณสามารถสร้างแอตทริบิวต์แบบกำหนดเองได้ คุณสามารถใช้ CSS เพื่อจัดสไตล์ หรือ JavaScript เพื่อควบคุมพฤติกรรมของแอตทริบิวต์เหล่านั้น คุณสามารถตั้งชื่อแอตทริบิวต์แบบกำหนดเองได้ตามต้องการ อย่างไรก็ตาม ชื่อแอตทริบิวต์แบบกำหนดเองต้องนำหน้าด้วยฉลาก data-: ตัวอย่าง ให้เรามีเอลิเมนต์อาหารชื่อ Apple

เอลิเมนต์ <figcaption> ใช้เพิ่มคำอธิบายสำหรับเอลิเมนต์ <figure> มักใช้เพื่อเพิ่มคำบรรยายรูปภาพ ตัวอย่างโค้ด:

เพื่อเติมสี HTML canvas ทั้งหมดด้วยสีเฉพาะ คุณสามารถใช้คุณสมบัติ fillRect() เพื่อเติมสี่เหลี่ยมผืนผ้าด้วยสีทึบ จากนั้นคุณกระจายสี่เหลี่ยมที่เติมสีแล้วทั่ว canvas โดยใช้คุณสมบัติ height และ width ของ canvas: const canvas = document.getElementById(my-canvas); const ctx = canvas.getContext(2d); ctx.fi

แอตทริบิวต์ <link media> ของ HTML ใช้ระบุประเภทอุปกรณ์ที่สินทรัพย์ (มักเป็นไฟล์ CSS) ควรเพิ่มประสิทธิภาพสำหรับ วิธีนี้ช่วยให้คุณมีสไตล์ชีต CSS ที่แตกต่างกันสำหรับวัตถุประสงค์ที่ต่างกัน แอตทริบิวต์ media รับค่าหลายค่า โดยที่มากที่สุดคือ: all: เป็นค่าเริ่มต้น ใช้กับอุปกรณ์ทุกประเภท screen: สำห

Modal คือหน้าต่างที่แยกจากหน้าต่างหลักของหน้าเว็บ จุดประสงค์หลักคือปิดกั้นหน้าต่างหลักจากการโต้ตอบของผู้ใช้ และแชร์ข้อมูลหรือยืนยันบางอย่างกับผู้ใช้ Modal windows ยอดนิยมใช้เป็นคอมโพเนนต์ล็อกอิน การยืนยันอินพุตของผู้ใช้ หรือการใช้งานอื่นๆ อีกมากมาย Bootstrap เป็น framework ที่ช่วยให้เราสร้าง compone

Tabs เป็นองค์ประกอบ UI (User Interface) ที่ช่วยให้เราเห็นแผ่นข้อมูลต่างๆ โดยไม่ใช้พื้นที่เพิ่มเติม เหมือนกับแท็บในสมุดบันทึกหรือหนังสือ พวกมันทำเครื่องหมายตำแหน่งบนหน้าสำหรับข้อมูลเพิ่มเติม และระบุตัวตนโดยสิ่งที่แผ่นข้อมูลนั้นมีอยู่ เมื่อคุณคลิกที่แท็บ คุณจะได้รับข้อมูลที่เกี่ยวข้องกับแท็บนั้น Boots

เมื่อเราพูดถึง markup languages ในการเขียนโปรแกรม เราไม่ได้หมายความว่ามีใครพยายามเพิ่มราคาสินค้า Markup ไม่ใช่การเพิ่มราคา มันคือวิธีการแสดงข้อมูลโดยใช้ภาษาสคริปต์ประเภทหนึ่ง ในคู่มือนี้ เราจะอภิปรายว่า markup languages คืออะไร พวกมันทำงานอย่างไร และเมื่อไหร่คุณอาจใช้ markup languages เราจะวิเคราะห์

เมื่อใช้ CSS สำหรับจัดสไตล์หน้าเว็บ คุณมักจะต้องการเป้าหมายส่วนเฉพาะของหน้าของคุณ วิธีหนึ่งที่คุณสามารถเลือกองค์ประกอบหนึ่งหรือหลายองค์ประกอบได้คือผ่านแอตทริบิวต์ ID และ/หรือ Class ของพวกเขา ขณะที่คุณผ่านบทช่วยสอนนี้ ลองดู Codepen แบบโต้ตอบและเล่นร่วมกับฉัน! แอตทริบิวต์ ID และ CSS Selector มาสร้างพา