Workshop: Various Links
เรียนรู้ลิงค์หลายรูปแบบ พร้อมตัวอย่างและแบบฝึกหัด
1. External links
Visit Wikipedia
target="_blank" เปิดลิงค์ในแท็บใหม่
Visit Google
target="_self" เปิดลิงค์ในหน้าเดิม
2. Internal links & Anchor links
<a href="about.html">About Us</a>
<a href="#jump">Jump to Section</a>
<h3 id="jump">This is the jump target</h3>
Click to jump
This is the jump target
4.Downlode Links
<a href="files/sample.txt" download>Download File</a>Download Text File
ต้องมีไฟล์ในโฟเดอร์จึงดาวน์โหลดได้จริง
5. Button Links
ลิงก์ที่ออกแบบให้คล้ายปุ่ม เหมาะกับปุ่มสมัคร ปุ่มอ่านเพิ่มเติม หรือปุ่มนำทาง
<a href="https://www.example.com" class="btn-link">
Visit Website
</a>
สร้างปุ่มด้วยแท็ก button
<button onclick="document.location='index.html'">HTML Tutorial</button>
- มักใช้เมื่อลิงก์ไป หน้าในเว็บเดียวกัน
- ผูกกับ DOM (document) โดยตรง
<button onclick="location.href='https://www.example.com'">Visit Website</button>
- นิยมใช้มากกว่า
- เหมาะทั้งลิงก์ ภายในและภายนอกเว็บ
- ผูกกับ window โดยตรง
ปุ่ม document.location
ปุ่ม location.href
ตัวอย่างปุ่ม
เพิ่มขอบ
เพิ่มแอนิเมชัน
ปุ่มสีดำ ขอบทอง
6. Image Link
คลิกที่รูปภาพเพื่อเปิดลิงก์
<a href="https://youtube.com">
<img src="images/sample.jpg" width="250">
</a>
💡
หากต้องการไปรูปของตนเอง ต้องเก็บรูปไว้ในโฟลเดอร์ เช่น images/photo.jpg