HTML : การเชื่อมโยง (Link)

HTML : การเชื่อมโยง(Link) By Alhavee

การเชื่อมโยงLink การเชื่อมโยงหรือที่เรียกกันว่าลิงค์ ใน html เอกสารสามารถสร้างการเชื่อมโยง (Link) ไปยังเอกสารส่วนอื่น หรือหน้าอื่นๆ ได้ นอกจากนั้นยังสามารถเชื่อมโยงไปยังเว็บไซต์ต่างๆได้อีกด้วย ทำให้เว็บเพจสามารถตอบสนองความต้องการของผู้ใช้ได้มากขึ้นโดยผู้ใช้ไม่จำเป็นต้องอ่านเอกสาร หมดทั้่งหน้าสามารถเลือกอ่านเฉพาะหน้าเว็บเพจที่สนใจได้ แบบผสมผสาน แบบเรียงลำดับ แบบระดับชั้น By Alhavee

ประเภทของการลิงค์แบ่งออกเป็น 2 ประเภทได้แก่ • ลิงค์ภายใน (Internal Link) เป็นการเชื่องโยงเอกสารภายในเว็บเดียวกัน ไม่ได้เชื่อโยงเว็บไซด์อื่น เช่น การลิงค์ในหน้าเว็บเพจเดียวกัน การลิงค์เว็บเพจอื่นในเว็บเดียวกัน เป็นต้น • ลิงค์ภายนอก (External Link) เป็นการเชื่องโยงเอกสารข้ามเว็บไซด์ ใน Internet โดยผ่าน URL ของว็บที่ต้องการ รูปแบบ <A HREF=“เว็บเพจ”>…</A> By Alhavee

การเชื่อมโยงภายในหน้าเว็บเพจเดียวกันการเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน ใช้ในกรณีที่เราต้องการให้มีจุดเชื่อมโยงในหน้าเดียวกัน เมื่อคลิกเมาส์ที่จุดเชื่อมโยงแล้วมีการเลื่อนตำแหน่ง ขึ้นหรือลงไปจากตำแหน่งเดิม เพื่อไปยังตำแหน่งที่ต้องการ รูปแบบ : การลิงค์ <a href="#ชื่อจุดเชื่อมโยง">ข้อความ</a> ข้อสังเกตในขั้นตอนของการสร้างการเชื่อมโยง หน้าชื่อจุดเชื่อมโยงต้องมีเครื่องหมาย # รูปแบบ : จุดปลายทางหรือตำแหน่งที่ต้องการเชื่อมโยง <a name="ชื่อจุดเชื่อมโยง">ข้อความที่ต้องการแสดง</a> ข้อสังเกตในขั้นตอนของการสร้างจุดเชื่อมโยง ชื่อจุดเชื่อมโยงไม่ต้องมีเครื่องหมาย # * หนังสือ 133 By Alhavee

ตัวอย่าง Ex_Link_1.html <body> การสร้างการเชื่อมโยงในหน้าเว็บเพจเดียวกัน <a href="#link1">1.ทดสอบ link 1</a> <a href="#link2">2.ทดสอบ link 2</a> <a href="#link3">3.ทดสอบ link 3</a> <hr> <a name="link1">ทดสอบ การเชื่อมโยง 1 สำเร็จ ใส่คำสั่ง ประมาณ 24 ครั้ง</a><hr> <a name="link2">ทดสอบ การเชื่อมโยง 2 สำเร็จ ใส่คำสั่ง ประมาณ 24 ครั้ง </a><hr> <a name="link3">ทดสอบ การเชื่อมโยง 3 สำเร็จ ใส่คำสั่ง ประมาณ 24 ครั้ง </a><hr> </body> By Alhavee

การเชื่อมโยงไปยังเว็บเพจคนละหน้าการเชื่อมโยงไปยังเว็บเพจคนละหน้า ใช้ในกรณีที่เราสร้างเว็บเพจไว้หลาย ๆ หน้าโดยเว็บเพจแต่ละหน้าจะทำการบันทึกเป็นไฟล์ HTML แยกกันไว้ หรือยู่ในโฟลเดอร์เดียวกัน 1. เว็บเพจปลายทางอยู่ใน directory เดียวกับเว็บเพจเริ่มต้น Website <a href="page1.html"> ไฟล์เริ่มต้น Index.html ไฟล์ปลายทาง page1.html page2.html images By Alhavee

การเชื่อมโยงไปยังเว็บเพจคนละหน้าการเชื่อมโยงไปยังเว็บเพจคนละหน้า 2. เว็บเพจปลายทางอยู่ใน directory ต่ำกว่าเว็บเพจเริ่มต้น <a href="code/page1.html"> Website ไฟล์เริ่มต้น Index.html Code ไฟล์ปลายทาง page1.html page2.html images By Alhavee

การเชื่อมโยงไปยังเว็บเพจคนละหน้าการเชื่อมโยงไปยังเว็บเพจคนละหน้า 3. เว็บเพจปลายทางอยู่ใน directory ต่ำกว่าเว็บเพจเริ่มต้น 2 ชั้นขึ้นไป Website ไฟล์เริ่มต้น Index.html Code <a href="code/sub/page2.html"> page1.html Sub ไฟล์ปลายทาง page2.html images By Alhavee

การเชื่อมโยงไปยังเว็บเพจคนละหน้าการเชื่อมโยงไปยังเว็บเพจคนละหน้า 4. เว็บเพจปลายทางอยู่ใน directory สูงกว่าเว็บเพจเริ่มต้น Website ไฟล์ปลายทาง Index.html Code ไฟล์เริ่มต้น page1.html Sub <a href="../index.html"> page2.html images By Alhavee

การเชื่อมโยงไปยังเว็บเพจคนละหน้าการเชื่อมโยงไปยังเว็บเพจคนละหน้า 5. เว็บเพจปลายทางอยู่ใน directory สูงกว่าเว็บเพจเริ่มต้น 2 ระดับ Website ไฟล์ปลายทาง Index.html <a href=“../../index.html"> Code page1.html Sub ไฟล์เริ่มต้น page2.html images By Alhavee

การเชื่อมโยงไปยังเว็บไชต์ภายนอกการเชื่อมโยงไปยังเว็บไชต์ภายนอก เราสามารถสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ ได้ โดยใช้รูปแบบ <a href="URL หรือที่อยู่ของเว็บไวต์ที่ต้องการ">ข้อความ</a> ตัวอย่าง Ex_link_3.html <body>การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ <hr><a href="http://www.google.com">1. google</a> <a href="http://www.sanook.com">2.sanook</a> <a href="http://www.mbk.ac.th">3Mbk</a> <hr></body> By Alhavee

การนำรูปภาพมาเป็นชุดเชื่อมโยงการนำรูปภาพมาเป็นชุดเชื่อมโยง สามารถนำรูปภาพมาเป็นจุดเชื่อมโยงได้โดยเปลี่ยนจากข้อความมารูปภาพแทน ตัวอย่างการเชื่อมโยงแบบเดิมโดยใช้ข้อความ <a href="http://www.mbk.ac.th">หมู่บ้านครู</a>ตัวอย่างการเชื่อมโยงโดยใช้รูปภาพชื่อว่า MBK.png <a href="http://www.mbk.ac.th"> <img src=“image/MBK.png"></a> By Alhavee

ตัวอย่าง Ex_Link_4.html <body> การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ โดยใช้รูปภาพ <hr> <a href="http://www.mbk.ac.th">หมู่บ้านครู</a> <a href="http://www.mbk.ac.th"><img src="images/MBK.png"></a> <hr> </body> By Alhavee

การกำหนดสีของจุดเชื่อมโยงการกำหนดสีของจุดเชื่อมโยง การสร้างการเชื่อมโยง ผู้สร้างเว็บเพจสามารถกำหนดสีของจุดเชื่อมโยงได้เอง <body link="ค่าสี"vlink="ค่าสี"alink="ค่าสี"> Link = สีของลิงค์ที่ยังไม่เคยถูกคลิก Vlink = สีของลิงค์ที่เคยถูกคลิกไปแล้ว alink= สีของลิงค์ตอนที่ถูกคลิก By Alhavee

ตัวอย่าง Ex_Link_5.html <body link="green" vlink="blue" alink="red"> ลิงค์ที่ยังไม่เคยถูกคลิกจะเป็นสีเขียว (link) ลิงค์ที่เคยถูกคลิกไปแล้วจะเป็นสีน้ำเงิน (vlink) ลิงค์ที่กำลังถูกคลิกจะเป็นสีแดง (alink) <hr> <a href="http://www.mbk.ac.th">หมู่บ้านคูร</a> <hr> </body> By Alhavee

Target Attribute (รูปแบบการแสดงหน้าลิงค์) <a href=“เว็บเพจ” target=“รูปแบบ” > By Alhavee

HTML : การเชื่อมโยง (Link)