ลิงก์และรูปภาพ

สร้างลิงก์ไปยังหน้าอื่น และแสดงรูปภาพด้วยแท็ก a และ img

7 นาที · 3 คำถาม

คำว่า "HyperText" ใน HTML คือความสามารถในการเชื่อมโยงหน้าเว็บเข้าด้วยกันด้วย ลิงก์ นั่นเอง ลิงก์สร้างขึ้นด้วยแท็ก <a> (ย่อมาจาก anchor หรือจุดยึด) ปลายทางของมันกำหนดโดยแอตทริบิวต์ href (hypertext reference) ซึ่งบรรจุ URL: ที่อยู่ของหน้าเว็บ เช่น https://en.wikipedia.org ข้อความที่วางอยู่ระหว่าง <a> และ </a> จะกลายเป็นสิ่งที่คลิกได้

<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>

ในการแสดงรูปภาพ คุณใช้แท็ก <img> มันเป็น แท็กปิดตัวเอง (self-closing tag): มันไม่มีเนื้อหาและไม่มีแท็กปิด ทุกอย่างอยู่ในแท็กนั้นเอง มีแอตทริบิวต์สองตัวที่จำเป็น src (source หรือแหล่งที่มา) บอกว่าไฟล์รูปภาพอยู่ที่ไหน alt (alternative text หรือข้อความทางเลือก) บรรยายรูปภาพเป็นคำพูด: ข้อความนี้จะแสดงถ้ารูปภาพโหลดไม่สำเร็จ และมันจะถูกอ่านออกเสียงโดยโปรแกรมอ่านหน้าจอที่ผู้พิการทางสายตาใช้

<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">

คุณสามารถผสมทั้งสองเข้าด้วยกันได้: รูปภาพที่วางอยู่ภายในเอลิเมนต์ <a> จะกลายเป็นสิ่งที่คลิกได้ นั่นคือสิ่งที่โลโก้เว็บไซต์ทำอยู่พอดี ทำให้พาคุณกลับไปยังหน้าแรกเมื่อคุณคลิกที่มัน

<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. แอตทริบิวต์ใดบรรจุที่อยู่ปลายทางของลิงก์?
   • src
   • href
   • alt
   • lang
2. แอตทริบิวต์ alt ของรูปภาพมีไว้เพื่ออะไร?
   • บรรยายรูปภาพหากมันไม่แสดงผล
   • กำหนดขนาดของรูปภาพ
   • ให้ที่อยู่ของไฟล์รูปภาพ
3. แท็ก <img> มีแท็กปิดหรือไม่?
   • มี คุณต้องเขียน </img> เสมอ
   • ไม่มี มันเป็นแท็กปิดตัวเอง
   • เฉพาะเมื่อรูปภาพมีขนาดใหญ่