ข้อความ รูปภาพ ลิงก์ และรายการ
จัดรูปแบบข้อความด้วยหัวเรื่องและย่อหน้า ฝังรูปภาพพร้อมข้อความ alt สร้างไฮเปอร์ลิงก์ และสร้างรายการแบบเรียงลำดับกับไม่เรียงลำดับ
ข้อความ รูปภาพ ลิงก์ และรายการ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
หัวข้อ: h1 ถึง h6
HTML มีหัวข้อหกระดับ ใช้หัวข้อเหล่านี้เพื่อสร้างโครงร่างเอกสาร ไม่ใช่เพื่อเปลี่ยนขนาดข้อความ <h1> คือชื่อหน้าเว็บ (ใช้หนึ่งครั้งต่อหน้า) <h2> ใช้สำหรับส่วนหลัก <h3> ใช้สำหรับส่วนย่อย และต่อไปตามลำดับ
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>ย่อหน้าและ <br>
องค์ประกอบ <p> ใช้ครอบข้อความหนึ่งย่อหน้า เบราว์เซอร์จะเพิ่มระยะห่างด้านบนและด้านล่างให้อัตโนมัติ ใช้ <br> แต่พอเหมาะ เฉพาะกับการขึ้นบรรทัดที่มีความหมาย เช่น ในที่อยู่หรือบทกวี ไม่ใช่เพื่อสร้างระยะห่างระหว่างย่อหน้า
องค์ประกอบข้อความแบบอินไลน์
ใช้องค์ประกอบแบบอินไลน์เพื่อเพิ่มความหมายให้ข้อความ: <strong> สำหรับข้อความสำคัญ (ตัวหนา) <em> สำหรับการเน้น (ตัวเอียง) <code> สำหรับตัวอย่างโค้ด <mark> สำหรับข้อความที่ไฮไลต์ และ <small> สำหรับข้อความตัวพิมพ์เล็ก
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>รูปภาพ: องค์ประกอบ <img>
องค์ประกอบ <img> ใช้ฝังรูปภาพ แอตทริบิวต์ src ระบุที่อยู่เว็บ และ alt ระบุข้อความทดแทนสำหรับโปรแกรมอ่านหน้าจอและกรณีที่โหลดรูปภาพไม่สำเร็จ ควรใส่ค่า alt ที่มีความหมายเสมอ
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">การเขียนข้อความ alt ที่ดี
ข้อความ alt ควรสื่อถึงเนื้อหาและจุดประสงค์ของรูปภาพ รูปภาพตกแต่ง (ตัวเว้นระยะหรือไอคอนที่ใช้ตกแต่งเท่านั้น) ให้ใช้ alt="" (สตริงว่าง) เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป อย่าเขียน alt="image of" เด็ดขาด เพียงอธิบายว่ารูปภาพแสดงอะไร
ไฮเปอร์ลิงก์: องค์ประกอบ <a>
องค์ประกอบ <a>(จุดยึด) ใช้สร้างไฮเปอร์ลิงก์ แอตทริบิวต์ href กำหนดที่อยู่ปลายทางของลิงก์ ข้อความลิงก์ควรอธิบายปลายทาง อย่าเขียนว่า "คลิกที่นี่" เด็ดขาด
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>หมายเหตุด้านความปลอดภัยของ target=_blank
เมื่อเปิดลิงก์ในแท็บใหม่ด้วย target="_blank" ควรเพิ่ม rel="noopener noreferrer" เสมอ หากไม่มี หน้าที่เปิดขึ้นมาอาจเข้าถึงออบเจ็กต์หน้าต่างของหน้าที่เปิดมันได้ ซึ่งเป็นช่องโหว่ด้านความปลอดภัยที่เรียกว่าการแย่งควบคุมแท็บย้อนกลับ
รายการไม่เรียงลำดับ: <ul>
ใช้ <ul> (รายการไม่เรียงลำดับ) เมื่อไม่สำคัญว่ารายการจะอยู่ในลำดับใด เช่น คุณลักษณะ ส่วนผสม หรือลิงก์การนำทาง แต่ละรายการคือ <li> โดยค่าเริ่มต้นเบราว์เซอร์จะแสดงจุดนำหน้า แต่เกือบทุกครั้งคุณจะปรับรูปแบบด้วย CSS
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>รายการเรียงลำดับ: <ol>
ใช้ <ol> (รายการเรียงลำดับ) เมื่อลำดับมีความสำคัญ เช่น ขั้นตอนในบทเรียน อันดับ หรือคำแนะนำ รายการจะมีหมายเลขโดยอัตโนมัติ ใช้แอตทริบิวต์ start และ reversed เพื่อควบคุมการกำหนดหมายเลข
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>รายการคำอธิบาย: <dl>
<dl> (รายการคำอธิบาย) ใช้จัดกลุ่มคำศัพท์กับคำจำกัดความหรือคำอธิบายของคำเหล่านั้น ใช้สำหรับอภิธานศัพท์ ข้อมูลเมตา (ผู้เขียน/วันที่) และคู่ชื่อ-ค่า <dt> คือคำศัพท์ ส่วน <dd> คือคำอธิบาย
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>รายการซ้อนกัน
รายการสามารถซ้อนกันเพื่อแสดงลำดับชั้นได้ ให้วาง <ul> หรือ <ol> ของรายการย่อยไว้ภายในองค์ประกอบ <li> ของรายการหลัก อย่าซ้อนรายการเพียงเพื่อสร้างการเยื้อง ให้ใช้ CSS แทน
ตรวจสอบอย่างรวดเร็ว
แอตทริบิวต์ใดใช้ระบุคำอธิบายรูปภาพเป็นข้อความสำหรับโปรแกรมอ่านหน้าจอ
ทบทวน: หัวข้อ ข้อความ รูปภาพ ลิงก์ และรายการ
ใช้องค์ประกอบหัวข้อสำหรับโครงสร้างเอกสาร ใช้ p สำหรับย่อหน้า ใช้ img พร้อมข้อความ alt ที่มีความหมายสำหรับรูปภาพ ใช้ a พร้อมข้อความลิงก์ที่อธิบายปลายทางสำหรับการนำทาง และใช้ ul/ol/dl สำหรับเนื้อหาแบบรายการ ความหมายเชิงโครงสร้างทำให้ HTML เข้าถึงได้และเครื่องสามารถอ่านได้
คำถามที่พบบ่อย
บทเรียน “ข้อความ รูปภาพ ลิงก์ และรายการ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ข้อความ รูปภาพ ลิงก์ และรายการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ข้อความ รูปภาพ ลิงก์ และรายการ”
จัดรูปแบบข้อความด้วยหัวเรื่องและย่อหน้า ฝังรูปภาพพร้อมข้อความ alt สร้างไฮเปอร์ลิงก์ และสร้างรายการแบบเรียงลำดับกับไม่เรียงลำดับ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ข้อความ รูปภาพ ลิงก์ และรายการ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โครงสร้างเอกสาร: DOCTYPE html head body
- แท็กเชิงความหมาย: header nav main article footer
- ข้อความ รูปภาพ ลิงก์ และรายการ
- ฟอร์ม: input label button