คำสั่ง HTML คำสั่งเชื่อมโยงลิงค์

คำสั่ง HTML

คำสั่งเชื่อมโยงลิงค์ (Link) HTML

       บทนี้เราจะกล่าวกันในเรื่องการเชื่อมโยง(Link) รูปแบบต่างๆในการเขียนเว็บ HTML คำสั่งที่ใช้เป็นหลักเลยก็คือแท็ก <a> ที่มีแอททริบิว(attributes) ที่สำคัญคือ href, target ,rel เป็นต้น นอกจากนี้เราจะมาดูการนำไปใช้ในรูปแบบต่างๆ เช่น การสร้างการเชื่อมโยง(Hyperlink) แบบปกติ , การสร้างลิงค์กับรูปภาพ , การสร้างลิงค์ในหน้าใหม่(new browser window) , การลิงค์ไปยังอีเมล์ด้วยคำสั่ง 'mailto'  , และการสร้างการเชื่อมโยงด้วยจาวาสคริป (Javascript link)

รูปแบบ

<a href="URL" attributes >Example Text</a>

ตัวอย่าง
<a href="index.html">หน้าหลัก</a><a href="http://108like.com">ไปยังเว็บ 108Like</a><a href="#">ไปด้านบน</a>

ผลลัพธ์

หน้าหลัก >> ลิงค์ไปยังไฟล์ 'index.html'
ไปยังเว็บ 108Like >> ลิงค์ไป URL ที่ระบุในที่นี้คือ http://108like.com
ไปบ้านบน >> ไปยังด้านบนสุดของหน้า

ตัวอย่าง 

<a href="http://www.108like.com"><img src="img/108like.png" /></a>ผลลัพธ์
  
<!-- Logo ที่ลิงค์ไปยัง URL: http://108like.com -->

    

สำหรับคำสั่งรูปภาพผู้เขียนจะไม่ขออธิบาย(หากมาถึงจุดนี้แล้วยังไม่เข้าใจสามารถศึกษาต่อในหัวข้อBasic HTML ที่ได้เขียนไว้แล้วก่อนหน้านี้) นอกจากนี้เราสามารถกำหนดรูปแบบของการเปิดลิงค์ต่างๆด้วยแอททริบิวต์ target ซึ่งมีรูปแบบและตัวอย่างดังนี้ 

รูปแบบ

<a href="http://108like.com" target="VALUE" >Go to 108Like</a>


รูปแบบ VALUE ที่ใช้กับ target ได้แก่

_blank           เปิดลิงค์ในหน้าต่างใหม่
_parent         เปิดลิงค์ในหน้าเดิม (ถือเป็นค่า Default)
_self             เปิดลิงค์ในหน้าเฟรมนั้นๆ (ศึกษาเรื่อง frame)
_top             เปิดลิงค์ทับเฟรมเดิมทั้งหมด (ศึกษาเรื่อง frame)

   

จะเห็นว่าหากต้องการให้ลิงค์นั้นเปิดในหน้าต่างใหม่ก็เพียงแต่เพิ่มแอททริบิว target="_blank" เท่านั้น แต่หากไม่ก็เพียงแค่เปลี่ยน value ให้เป็น _parent หรือลบแอททริบิวท์ target ก็ได้เช่นเดียวกัน ส่วน _self และ _top ล้วนเกี่ยวกับ frame โปรดศึกษาเรื่องเฟรม(Frame) ในภาษา HTML (แต่ผู้เขียนเห็นว่าเฟรมจะกลายเป็นแท็กที่ยกเลิกไปในอนาคต เพราะไม่นิยมใช้กันแล้วในปัจจุบัน ข้อเสียอย่างหนึ่งคือไม่เป็นผลดีต่อ SEO ในนี้เราจะไม่กล่าวถึง) 

.............................................................................................................