คำอธิบายเกี่ยวกับลิงค์แบบ Anchor Links คือ
การสร้างลิงค์สำหรับเชื่อมโยงจุดอ้างอิงที่มีปลายทางอยู่ในหน้าเว็บเดียวกันหรือข้ามเพจก็ได้ โดยถ้าผู้เข้าชมเว็บของเราไปคลิกเมาส์ ณ ตำแหน่งนั้น ก็จะสามารถกำหนดได้ว่าต้องการส่งผู้เข้าชมเว้บไปสู่จุดอ้างอิงในตำแหน่งใดของหน้าเว็บเป้าหมาย ซึ่งลิงก์ชนิดนี้เหมาะสำหรับหน้าเพจที่มีเนื้อหายาวมาก เพื่อให้ผู้ชมจะได้ไม่ต้องเสียเวลาเลื่อนหาเนื้อหาที่ต้องการ
ซึ่งคำอธิบายยืดยาวแบบข้างบนนี้อาจทำให้บางคนสับสนได้ ผมเองลองกลับไปอ่านที่ตัวเองเขียนไว้ดูก็งงเหมือนกัน ดังนั้นใช้เมาส์กดลิงก์ตัวอย่างข้างล่างนี้ดูจะเข้าใจได้ง่ายกว่า
ตัวย่างที่ 1 ลิงก์ไปสู่ส่วนท้ายของบทความนี้ (โดยปลายทางจะมีคำว่า "จบแล้วจ้า" เขียนอยู่ด้านบน)
จบแล้วจ้า
ตัวย่างที่ 2 ลิงก์ไปสู่ปลายทางภายในบทความอื่น (โดยส่งไปสู่ขั้นตอน 13 ที่อยู่กลางบทควา่มนั้น)
ตัวอย่างการใช้ Photoshop ทำ Inverse Selection
โดยวิธีสร้างลิงก์ดังกล่าวทำได้ด้วย 2 ขั้นตอนดังต่อไปนี้
วิธีสร้างจุดอ้างอิง
เราต้องสร้างจุดอ้างอิงสำหรับใช้เป็นปลายทางของลิงก์ขึ้นมาก่อน
ซึ่งสร้างโดยเข้าไปในบทความนั้นๆ แล้วก็กดเป็นโหมด HTML จากนั้นก็วางโค้ดลงไป
ซึ่งจุดอ้างอิงปลายทางโดยทั่วไปจะมีโครงสร้างดังนี้
<div id="ชื่อจุดอ้างอิง">ข้อความที่แสดง</div>
โดยมีความหมายดังนี้
ชื่อจุดอ้างอิง - คือสิ่งที่ต้องระบุไว้ในลิงก์ที่เราสร้างขึ้น
ข้อความที่แสดง - จะเป็นสิ่งที่ผู้ชมเว็บมองเห็น
โดยจุดอ้างอิงของตัวอย่างที่ 1 ซึ่งอยู่ด้านบนนั้นเขียนได้ดังนี้
<div id="anchortext1">จบแล้วจ้า</div>
ซึ่งค่าที่ผมกำหนดไว้มีดังนี้
ชื่อจุดอ้างอิง ผมตั้งไว้เป็น anchortext1
ข้อความที่แสดง ผมตั้งไว้เป็น จบแล้วจ้า
วิธีสร้างลิงก์ไปสู่จุดอ้างอิง
วิธีสร้างลิงก์แบบจุดอ้างอิงก็คล้ายกับการกำหนดที่ตั้ง URL แบบปกติแต่ให้เขียนต่อท้ายด้วย "#" แล้วค่อยตามด้วย "ชื่อจุดอ้างอิง" อีกทีหนึ่ง
ซึ่งมีโครงสร้างดังนี้
ที่ตั้งของหน้า#ชื่อจุดอ้างอิง
ตัวอย่างเช่นที่ตั้ง URL ของหน้านี้คือ
http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html
ดังนั้นที่ตั้งของจุดอ้างอิง anchortext1 ก็คือ
http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html#anchortext1
โดยพอนำที่ตั้ง URL ที่กล่าวมาไปสร้างเป็นลิงก์ข้อความแบบง่ายๆ ก็จะมีโครงสร้างคือ
<a href="ที่ตั้งของหน้า#ชื่อจุดอ้างอิง">ข้อความลิงก์</a>
ดังนั้นลิงก์ข้อความในตัวอย่างที่ 1 จะสามารถเขียนได้ดังนี้
<a href="http://tip.maxlayout.com/2014/05/blogger-create-anchor-text-link.html#anchortext1">จบแล้วจ้า</a>
ส่วนลิงก์ข้อความตามตัวอย่างที่ 2 นั้นตามปกติแล้วจะเขียนว่า
<a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html#anchortext2" >ตัวอย่างการ Inverse Selection</a>
แต่ผมต้องการให้ลิงก์นี้ให้เป็นชนิดสั่งเปิดในหน้าต่างใหม่โดยเขียน
target="_blank"
เพิ่มไปด้านหลังที่ตั้ง URL ซึ่งจะกลายเป็นดังนี้
<a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html#anchortext2" target="_blank">ตัวอย่างการ Inverse Selection</a>
Credit:
http://blogtimenow.com/how-to/create-anchor-links-wordpress-blogger-jump-links/
จบแล้วจ้า
0 ความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น