การสร้างจุด 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

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

การใช้ CSS กับโปรแกรม Dreamweaver CC

เรื่อง : สร้าง CSS ด้วยโปรแกรม Dreamweaver CC CSS ย่อมาจาก Cascading Style Sheets ...  

การใส่เสียงเพลงประกอบเว็บเพจ หรือไฟล์ Audio ให้กับเว็บ (HTML5)

เรื่อง : วิธีการใส่เสียงเพลง (Audio) ประกอบหน้าเว็บด้วยโปรแกรม Dreamweaver CC บางครั้งเราอาจจะมีความต้องการดึงดูดผู้ที่เข้...  

การสร้างจุด Link ด้วยรูปภาพ (Image Link)

เรื่อง : การสร้าง Link ในแบบ Image Link ในบทความก่อนได้แนะนำการสร้างลิงค์ด้วยข้อความกันไปแล้ว มาในบทความนี้ จะมาแนะนำการ...  

ก้าวแรกของนักพัฒนาเว็บ : ทำความรู้จักกับโปรแกรม Dreamweaver

เรื่อง : ก้าวแรกสู่การเป็นนักพัฒนาเว็บไซต์ เริ่มทำความรู้จักกับโปรแกรม Dreamweaver Dreamweave...