การสร้างจุด Link (Text Link) [Article ID : 104]

การสร้าง Link ในแบบ Text Link

Link หรือ ลิงค์ เป็นจุดเชื่อมโยงที่ปรากฎบนหน้าเว็บ เพื่อให้ผู้ใช้งานเว็บสามารถคลิกหรือกดไปยังหน้าเว็บอื่น ๆ หรือไปยังไฟล์เอกสารอื่น ๆ ได้ ซึ่งวิธีการสร้าง Link หรือ Hyper Link นั้น เราสามารถแบ่งออกได้เป็น 2 แบบ คือ
1. ลิงค์ไปยังไฟล์หรือข้อมูลที่อยู่ภายในเว็บไซต์
2. ลิงค์ไปยังข้อมูล หรือเว็บภายนอก

ซึ่งเรามาดูวิธีการสร้าง Link ทั้ง 2 แบบกัน ดังนี้

การสร้าง Text Link แบบลิงค์ภายในเว็บไซต์

ทำการจัดเตรียมข้อมูลต่าง ๆ ที่ต้องใช้ในการสร้าง Link เสียก่อน เช่น สร้างไฟล์เว็บเพจต่าง ๆ เพื่อรอการสร้างลิงค์ไปหากัน จากนั้นให้ทำการพิมพ์ข้อความตามที่ต้องการกับเว็บเพจของเรา แล้วให้ปฏิบัติตามขั้นตอนต่าง ๆ ดังนี้

1. เลือกข้อความที่ต้องการให้เป็นลิงค์
2. จากนั้นไปที่ Properties Panel Option ที่เขียนว่า Link กดที่ปุ่ม Browse... เพื่อเลือกไฟล์ที่ต้องการลิงค์ไปหา ดังรูป เมื่อเลือกไฟล์ที่ต้องการลิงค์ไปหาได้แล้ว กดที่ปุ่ม OK

3. ข้อความที่เลือกไว้ยังข้อ 1 จะกลายเป็นลิงค์ ดังรูป

การสร้าง Text Link แบบลิงค์ไปภายนอกเว็บไซต์

ทำการเก็บข้อมูล URL ของเว็บที่ต้องการทำลิงค์ไป ซึ่งอาจจะได้มาจากการ Copy ที่ Address Bar ของ Web Browser จากนั้นปฏิบัติ ดังนี้

 ตัวอย่าง URL : http://gmail.com/ 
 

1. เลือกข้อความที่ต้องการให้เป็นลิงค์
2. จากนั้นไปที่ Properties Panel Option ที่เขียนว่า Link ให้ทำการพิมพ์ URL ของเว็บไซต์ที่ต้องการลิงค์ไป ดังรูป จากรูปข้างต้น เป็นการลิงค์ไปที่เว็บ Gmail ซึ่งเป็นเว็บที่อยู่ภายนอกเว็บไซต์ของเรา

3. ข้อความที่เลือกไว้ยังข้อ 1 จะกลายเป็นลิงค์ ดังรูป

คลิปประกอบบทความ

*คลิกที่โลโก้ YouTube เพื่อเข้าดูที่ยูทูปนะครับ จะสามารถขยายจอดูได้

การสร้าง Link นี้ถือว่าเป็นพื้นฐานสำคัญมากสำหรับการสร้างเว็บไซต์ เนื่องจาก เอกลักษณ์ของเว็บ คือ การที่สร้างเชื่อมโยงกันได้ในระหว่างเอกสารที่อยู่บน Internet ดังนั้น เมื่อเรียนรู้การสร้าง Link ไปแล้วจะทำให้เรามีความรู้ความเข้าใจเกี่ยวกับการสร้างเว็บนี้มากขึ้น.
*คลิกที่นี้เพื่ออ่านการสร้างจุดลิงค์ด้วยรูปภาพ

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การ Insert คลิป Video มาแสดงบนเว็บเพจ (HTML5)

เรื่อง : การ Insert คลิปวีดีโอมาใช้งานกับเว็บเพจด้วย Dreamweaver CC สอบถามกันเข้ามาว่า..."ต้...  

วิธีการนำรูปภาพเข้ามาใช้งานใน Web Page ด้วย Dreamweaver

เรื่อง : การใส่รูปภาพให้กับ Web Page ด้วยโปรแกรม Dreamweaver การจัดทำ Web Page แน่นอนสิ่งหนึ่งที่จะขาดไม่ได้นอกจากตัวหน...  

การแทรกวัน-เวลาเพื่อแสดงบนเว็บเพจ (Insert Date)

เรื่อง : การพิมพ์วันที่-เวลาเพื่อแสดงผลที่หน้าเว็บเพจ หลายครั้งการสร้าง Web Page ขึ้นมา เราต้องการบันทึกวัน-เวลาลงไปแสด...  

การปรับแต่งแก้ไขรูปภาพด้วย Dreamweaver

เรื่อง : การตบแต่งแก้ไขรูปภาพด้วยโปรแกรม Dreamweaver Dreamweaver มี Option ที่จะทำให้เราสามารถทำการแก้...