คำสั่งลิงค์ต่างๆใน HTML (Link HTML)







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

คำสั่งลิงค์ HTML 


รูปแบบ

<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
ไปบ้านบน >> ไปยังด้านบนสุดของหน้า
   
จุดนี้เชื่อว่าคงจะยังไม่งง(หรือเปล่า?) เพราะคำสั่งสำหรับใช้ในการเชื่อมโยงระหว่างหน้าเว็บเพจ หรือแม้แต่คำสั่งลิงค์ไปยังเว็บไซต์ภายนอกด้วย URL ต่างมีรูปแบบเหมือนกันคือใช้แท็ก <a>..</a> ครอบตัวอักษร และตามด้วยแอททริบิว(attribute) ที่ขาดไม่ได้คือ href เพื่อระบุไปยังตำแหน่งที่ต้องการ ดังนั้นหากต้องการให้ลิงค์รูปภาพไปยังเพจต่างๆก็เพียงแต่เอาแท็ก <a> ครอบแท็ก <img /> รูปภาพนั้นๆก็จะสามารถเชื่อมโยงได้เช่นเดียวกันกับ text ทั่วๆไป ดังตัวอย่าง

ตัวอย่าง 

<a href="http://www.108like.com"><img src="img/108like.png" /></a>


ผลลัพธ์

108like.com 
<!-- 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 ในนี้เราจะไม่กล่าวถึง) 
 
นอกจากนี้ยังมีแอททริบิวต์อื่นๆ อาธิเช่น rel ที่มี Value มากมาย ได้แก่ alternate author bookmark help license next nofollow noreferrer prefetch prev search tag รวมถึงแอททริบิวท์ที่รองรับ HTML5 type ,media ,download เป็นต้น

ลิงค์รูปแบบอื่นๆ

ลิงค์ไปที่ Email นอกจากแท็ก <a> จะสามารถเชื่อมโยง(link)ไปยัง URL ต่างๆได้แล้ว ยังสามารถลิงค์ไปยัง Email ด้วยคำสั่ง mailto: ตามด้วยที่อยู่อีเมล์ เช่น 
<a href="mailto:myemail@example.com">Text Example</a> 
ลิงค์ด้วย Javascript เป็นการเพิ่มคำสั่งจาวาสคริปท์เข้าไปยังแอททริบิวต์ href เช่นเดียวกันกับ mailto เมื่อคลิกไปที่ลิงค์ดังกล่าว จาวา  สคริปท์ก็จะเริ่มทำงาน เช่น 
<a href="javascript:alert('Hello Javascript');">Test JavaScript</a>
ลิงค์ไปยังไฟล์เอกสารอื่นๆ เช่น .doc .rtf .pdf .img ฯลฯ เหล่านี้สามารถใช้ได้เช่นเดียวกัน ที่สำคัญคือต้องระบุตำแหน่งไฟล์ ชื่อไฟล์ รวมถึงนามสกุลไฟล์ให้ถูกต้อง 

สรุปการสร้าง Link รูปแบบต่างๆใน HTML

จะเห็นว่าแท็ก <a> มีแอททริบิวท์ที่สำคัญคือ href เพื่อใช้ในการระบุที่อยู่ซึ่งอาจเป็นตำแหน่งไฟล์ URL หรืออื่นๆ หากต้องการให้ลิงค์เปิดในหน้าใหม่ก็เพียงเพิ่มคำสั่ง target="_blank" เท่านั้น ขอบเขตของคำสั่งนี้ขึ้นอยู่กับการนำไปวางครอบ หากครอบทั้งเอกสาร เอกสารนั้นๆก็จะกลายเป็นลิงค์ทั้งหน้า เพราะฉะนั้นอย่าลืม </a> ด้วยแล้วกัน(เตือนโดยเฉพาะสำหรับมือใหม่) นอกจากนี้จะเห็นว่ามีแอททริบิวต์แปลกๆอย่าง rel หรือ type ตรงจุดมีโอกาสสามารถศึกษาต่อยอดด้วยตนเอง เพราะแท็กเหล่านี้จะมีประโยชน์ในขั้น advance สำหรับการเขียนเว็บไซต์และบทความ นอกจากนี้ผู้เขียนยังได้กล่าวถึง mailto ซึ่งผู้เขียนเองก็ไม่ค่อยมีโอกาสได้ใช้ และเรื่องของ <a> ที่นำไปประยุกต์ใช้กับจาวาสคริปท์ก็สามารถศึกษาได้จากบทความที่เกี่ยวกับ Javascript หรือ Jquery ซึ่งปัจจุบันผู้ที่มีความสามารถด้านการเขียนจาวาสคริปท์ Jquery , AJAX เหล่านี้ล้วนเป็นที่ต้องการของเหล่านักพัฒนาเว็บไซต์มาก
เรื่องของการสร้างลิงค์ในภาษา HTML ไม่ได้เป็นเรื่องยากมากนัก หวังว่าผู้ศึกษาทุกท่านจะได้เรียนรู้และเข้าใจเป็นอย่างดี เพราะคงไม่มีใครสร้างเว็บไซต์โดยที่ไม่ลิงค์เชื่อมโยงไปยังหน้าอื่นๆเลย แท้จริงแล้วเนื้อหาในบทนี้สามารถบรรยายสั้นๆได้ด้วยย่อหน้าเดียว(ดังสรุปด้านบน) แต่เนื่องด้วยผู้เขียนอยากให้มองเห็นภาพว่าแท็ก <a>..</a> นั้นสามารถนำมาประยุกต์ได้หลายๆแบบ แต่หลักๆที่ใช้ก็คือแบบแรก (a + href) หัวข้อต่อไปจะเป็นเรื่องของสี(color) โปรดติดตาม 108Like Computer กับการพัฒนาเว็บไซต์ในบทต่อไป
   

 
   

 
MrPandaman


( Last update on 2014-06-23 )

ตรงนี้ถ้าเราชนะ
ไปที่ไหนเราก็ชนะ

 Artticle |  Email |  Facebook

1,195 : 1,382