ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytการเชื่อมโยงหน้าเว็บเพจ


  ความรู้เกี่ยวกับการเชื่อมโยง | การเชื่อมโยงด้วยใช้ข้อความ | การเชื่อมโยงโดยใช้รูปภาพ | การเชื่อมโยงด้วย e-Mail

ytความรู้เกี่ยวกับการเชื่อมโยง

การเชื่อมโยงหน้าเว็บเพจ คือ การกำหนดส่วนของข้อความหรือรูปภาพที่ต้องการ เพื่อเป็นจุดเชื่อมโยงไปยังเนื้อหาจุดอื่นๆ ซึ่งเนื้อหาที่จะเชื่อมโยงไปอาจจะอยู่ภายในหน้าเดียวกัน , คนละหน้ากันก็ได้ หรืออาจจะอยู่คนละเว็บไซต์เลยก็ได้ การเชื่อมโยงหน้าเว็บเพจ ประกอบด้วยส่วนประกอบที่สำคัญ 2 ส่วน คือ

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

รูปแบบการสร้างจุดเชื่อมโยงแบบต่างๆ ดังนี้

  • การลิงค์ภายในเว็บเพจเดียวกัน (Name Anchor)
    ในกรณีที่หน้าเว็บเพจยาวหรือมีหลายหัวข้อที่น่าสนใจต้องการให้ผู้ชมไปถึงหัวข้อนั้นโดยสะดวกรวดเร็ว ดังขั้นตอน ต่อไปนี้

    กำหนดเป้าหมาย (Target)
    - คำสั่ง <A NAME=ชื่อเป้าหมาย>....ข้อความที่ใช้เป็นจุดเชื่อมโยง....</A> 
    เช่น <A NAME=intro >ความรู้เบื้องต้น</A>

    กำหนดจุดเชื่อมโยง (Link)
    - คำสั่ง <A HREF=#ชื่อจุดเชื่อมโยงในข้อ 1>.....ข้อความ.....</A> 
    เช่น <A HERF=#intro>คลิกไปที่ความรู้เบื่องต้น</A> คลิกดูตัวอย่าง
     
  • การลิงค์ภายในเว็บไซต์ (Web Page/File) เป็นการเชื่อมโยงไปยังหน้าเว็บเพจอื่นภายในไซต์เดียวกัน
    - คำสั่ง  <A HERF="ชื่อแฟ้ม" >.....ข้อความที่ใช้เป็นจุดเชื่อมโยง.....</A>
    เช่น <A HERF=chapter3.htm>คลิกตัวอย่าง</A>  คลิกตัวอย่าง
  • การลิงค์ไปยังเว็บไซต์อื่น (URL/Website) เป็นการเชื่อมโยงไปยังหน้าเว็บเพจหรือเว็บไซต์อื่น ดังตัวอย่างในหัวข้อข้างล่างนี้ ด้วยการระบุชื่อโดเมนเต็ม
    - คำสั่ง  <A HERF=ชื่อเว็บไซต์ >.....ข้อความที่ใช้เป็นจุดเชื่อมโยง.....</A>
    เช่น  <A HERF=http://www.google.co.th>google</A>  คลิกดูตัวอย่าง

  • การลิงค์อีเมล์ (e-Mail Link) เป็นการสร้างจุดเชื่อมโยงพิเศษที่ต้องการให้ผู้ชมคลิกเพื่อเปิดโปรแกรมรับส่งอีเมล์ที่มีในเครื่องเพื่อเขียนข้อความ
    คลิกดูรายละเอียด


    หรืออาจจะแบ่งประเภทการเชื่อมโยง เป็นได้ ดังนี้
ytText Links : ข้อความเป็นจุดเชื่อมโยง

ารสร้างข้อความเป็นจุดเชื่อมโยงทำได้ง่ายๆ ด้วยการใช้คำสั่ง <A src="ตำแหน่งว็บเพจหรือชื่อเว็บเพจ"> ข้อความ </A> ครอบข้อความนั้น โดยในคำสั่งเปิดจะต้องมีการระบุเป้าหมายเว็บไซต์ดังตัวอย่างด้านล่าง

<html>
<head>
<title> Text Links : การสร้างจุดเชื่อมโยง </title>
</head>
<body>
ตัวอย่างข้อความเชื่อมโยง<br><br>
เชื่อมโยงภายในเว็บไซต์<br>
<A HREF="chapter3.htm">คลิกที่นี่กลับไปบทที่ 3</A><br>
เชื่อมโยงภายนอกเว็บไซต์<br>
<A HREF="http://www.kroocom.th.gs">เว็บไซต์ครูวันฉลอง</A>
</body>
</html>
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

ตัวอย่างข้อความเชื่อมโยง

เชื่อมโยงภายในเว็บไซต์

คลิกที่นี่กลับไปบทที่ 3

เชื่อมโยงภายนอกเว็บไซต์

เว็บไซต์ครูวันฉลอง

ตัวอย่างข้างบนเมื่อนำเมาท์ไปชี้ที่ข้อความจะปรากฏว่า ลูกศรเปลี่ยนเป็นรูปมือชี้ เมื่อคลิกที่ข้อความนั้นก็จะนำทางไปสู่หน้าเว็บไซต์ใหม่คือบทที่ 3 ทันที ถ้าต้องการให้ชี้ไปยังเว็บไซต์อื่นก็เปลี่ยนแปลงจาก chapter3.htm เป็นชื่อเว็บไซต์ได้เลย เช่น
                <A HREF="http://www.kroocom.th.gs">เว็บไซต์ครูวันฉลอง</A>

Click to TOP

ytImage Links : รูปภาพเป็นจุดเชื่อมโยง

เราสามารถใช้รูปภาพแทนข้อความในการใช้เป็นจุดเชื่อมโยง โดยนำคำสั่ง <A> และ </A> ครอบที่คำสั่งแสดงรูปภาพ <IMG> เมื่อนำเอาเมาท์ไปวางบนรูปภาพก็จะเปลี่ยนเป็นรูปมือชี้ และจะสังเกตเห็นเส้นขอบรอบรูป ถ้าไม่ต้องการให้มีเส้นขอบต้องกำหนด border="0" ดังตัวอย่าง

        ตัวอย่าง 1 : <A HREF="http://www.google.co.th"><IMG SRC="images/chickenlittle_mojo1.gif"></A>
        ตัวอย่าง 2 : <A HREF="chapter3.htm><IMG SRC="images/chickenlittle_mojo1gif" border="0"></A>
ตัวอย่าง 1 :
chickenlittle
ตัวอย่าง 2 :
chickenlittle

Click to TOP

yte-Mail Links : เชื่อมโยงไปยังอีเมล์

New Message         ถ้าคุณท่องเน็ตบ่อยๆ จะพบว่าบางจุดเชื่อมโยงในหน้าเว็บเพจเมื่อเราคลิกจะปรากฏว่าหน้าต่างโปรแกรมรับ-ส่งอีเมล์อย่าง Outlook Express พร้อมกับ New Message
        ถ้าสังเกตให้ดีจะพบว่าในช่อง To: จะมีที่อยู่อีเมล์ของจุดเชื่อมโยงมาปรากฏแล้วโดยอัตโนมัติโดยไม่ต้องป้อนด้วยมือ เพียงแต่เขียนหัวเรื่อง (subject) และเนื้อความในจดหมยให้ครบถ้วนแล้วสามารถส่งออกไปได้ทันที
        การสร้างจุดเชื่อมโยงแบบนี้เป็นที่นิยมสำหรับไว้รับคำแนะนำ ติ/ชมจากผู้เข้าชมเว็บไซต์ เพื่อการนำไปพัฒนาให้ดียิ่งๆ ขึ้นไป
        คำสั่งที่ใช้เหมือนกับคำสั่งเชื่อมโยงอื่นๆ เพียงแต่เปลี่ยนเป้าไปหาชื่ออีเมล์โดยมีคำ emailto:name@domain จะใช้เป็นข้อความหรือรูปภาพเชื่อมโยงก็ได้ ดังตัวอย่าง
 ลิงค์โดยใช้ข้อความ : <A HREF="mailto:[email protected]">ผู้จัดทำ</A>
 ลิงค์โดยใช้รูปภาพ : <A HREF="mailto:[email protected]"><IMG SRC="images/email.gif" border="0"></A>

Tip!
          คุณสามารถกำหนดหัวข้ออีเมล์โดยอัตโนมัติไปกับจุดเชื่อมโยงโดยเพิ่มเติมคำสั่งเพียงเล็กน้อยดังนี้
<A HREF="mailto:[email protected]?subject=แนะนำเว็บ">ผู้ดูแลเว็บไซต์</A>
          ในหัวข้อจดหมายจะปรากฏข้อความ Subject : แนะนำเว็บ ให้โดยอัตโนมัติ  ตัวอย่างเช่น 


ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP