ดาวโหลดเอกสาร  [DOC]  [PDF]

      <img src=การเชื่อมโยง (link)
      เป็นที่ทราบกันดีอยู่แล้ว ในเว็บไซต์หนึ่ง ๆ จะมีหน้าเพจมากกว่าหนึ่งหน้า อย่างเช่นจากหน้าโฮมเพจก็สามารถเลือกเพื่อเข้าไปดูข้อมูลในหน้าอื่น ๆ ได้ ซึงเรียกว่าการเชื่อมโยงเว็บเพจ หรือ การลิงค์ ซึ่งก่อนทำการลิงค์หน้าเว็บเพจ ต้องมีเว็บเพจอย่างน้อย 2 หน้าขึ้นไปและ ยังมีการเชื่อมโยงอีกหลายรูปแบบ ซึ่งการเชื่อมโยงกันนี้เอง ทำให้เกิดเป็นเครือข่ายอินเตอร์เน็ต สามารถเข้าไปหาข้อมูล ต่าง ๆ ได้ ไม่ว่าข้อมูลนั้นจะอยู่อีกฝั่งของซีกโลกก็ตาม
      การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ
      1. การเชื่อมโยงระหว่างเว็บเพจ
        <a href="ไฟล์เว็บเพจ">
        ...สิ่งที่จะลิงค์...
        </a>
      2. การเชื่อมโยงนอกเว็บไซต์
        <a href="URL">
        ...สิ่งที่จะลิงค์...
        </a>
      3. การเชื่อมโยงภายในหน้าเว็บเพจ
        <a name="กำหนดชื่อปลายทาง">
        </a> และ
        <a href="#ชื่อปลายทาง">
        ..สิ่งที่จะลิงค์...
        </a>
      4. การเชื่อมโยงแบบอีเมล์
        <a href="mailto: E-mail address ที่ต้องการส่งถึง">
        ..สิ่งที่จะลิงค์... </a>
      ในการเชื่อมโยง (link) สามารถที่จะลิงค์โดยใช้รูปภาพ หรือข้อความก็ได้ โดยเมื่อรูปภาพหรือข้อความถูกลิงค์ เมื่อทดสอบ ผ่านเว็บบราวเซอร์ สัญลักษณ์เมาส์จะเปลี่ยนจากภาพลูกศร เป็นภาพมือแทน เมื่อเมาส์ถูกเลื่อนไปอยู่บริเวณที่ได้ลิงค์ไว้
      การเชื่อมโยงระหว่างเว็บเพจ
      ตัวอย่างที่ 1 รูปแบบการเชื่อมโยงระหว่างเว็บเพจ
      <html>
        <head><title>
        ....การเชื่อมโยงระหว่างเว็บเพจ....
        </title></head>
        <body>
          <a href="index.html">
          เลือกที่นี้เพื่อกลับไปหน้าแรก
          </a><p>
          <a href="index.html">
          <img src="pic\home.jpg">
          </a>
        </body>
      </html>
      แสดงผลตัวอย่างที่ 1
     
      การเชื่อมโยงนอกเว็บไซต์
      ตัวอย่างที่ 2 รูปแบบการเชื่อมโยงนอกเว็บไซต์
      <html>
        <head><title>
        ....การเชื่อมโยงนอกเว็บไซต์....
        </title></head>
        <body>
          <a href="http://www.chauatwit.ac.th">
          โรงเรียนชะอวดวิทยาคาร
          </a><p>
          <a href="http://www.chauatwit.ac.th">
          <img src="pic\logo.jpg">
          </a>
        </body>
      </html>
      แสดงผลตัวอย่างที่ 2
v
      การเชื่อมโยงภายในหน้าเว็บเพจ
     ; สำหรับเว็บบางเว็บที่มีข้อมูลในแต่ละหน้าเยอะ ๆ ต้องเลื่อนลงไปด้านล่างมาก ๆ ซึ่ง วิธีการแก้ไขปัญหาเหล่านี้ ก็คือการเพิ่มลิงค์เพื่อลิงค์เอกสารในหน้านั้น โดยสามารถแบ่งตามหัวข้อย่อย ๆ ก็ได้ ซึ่งสามารถจะมองว่าเป็นในลักษณะของเมนูย่อยก็ได้ นอกจากนี้ ก็สามารถใช้ในกรณีที่ลงไปดูข้อมูลด้านล่างแล้วอยากจะเลื่อนมาที่ด้านบนของเว็บ ในส่วนท้ายเพจ สามารถทำลิงค์ ให้เลือกเพื่อ go to top ได้อย่างรวดเร็ว คงเคยจะเห็นกันมาบ้างแล้ว
      ตัวอย่างที่ 3 การเชื่อมโยงภายในหน้าเว็บเพจ
      <html>
        <head>
          <title>
          ....การเชื่อมโยงภายในหน้าเว็บเพจ
          </title>
        </head>
        <body>
          <a name="top"></a>
          <img src="pic/02.jpg" width="400" height="267" border="0" alt=""><br>
          <img src="pic/03.jpg" width="400" height="267" border="0" alt=""><br>
          <a href="#top">
          Go to Top
          </a><p>
          <a href="#top">
          <img src="pic/top.jpg"width="50" height="50">
          </a>
        </body>
      </html>
      แสดงผลตัวอย่างที่ 3
     
      การเชื่อมโยงแบบอีเมล์
      สำหรับการเชื่อมโยงแบบนี้ จะเห็นบ่อยในเว็บเพจซึ่งเป็นส่วนลิงค์สำหรับให้ผู้เยี่ยมชมส่งเมลไปผู้ดูแลเว็บไซต์ โดยใช้ E-mail ตามที่ผู้เขียนเว็บได้ระบุไว้ในคำสั่งสำหรับลิงค์ การลิงค์แบบนี้นั้นเมื่อผู้ใช้งานเลือกที่ลิงค์ จะมีการเชื่อมโยงไปยังโปรแกรม Microsofe outlook ซึ่งเป็นโปรแกรมสำหรับส่งเมลตัวหนึ่ง โดยที่ช่อง address To (ปลายทาง) จะปรากฏ E-mail Address ที่ระบุไว้ที่คำสั่งลิงค์ปรากฏอยู่
      ตัวอย่างที่ 4 การเชื่อมโยงแบบอีเมล์
      <html>
        <head><title> ....การเชื่อมโยงแบบอีเมล์.... </title></head>
        <body>
          <a href="mailto:kruaew101@gmail.com">
          ลิงค์เมล์ส่งเมล์ไปที่ kruaew101@gmail.com
          </a><p>
          <a href="mailto:kruaew101@gmail.com ">
          <img src=" pic\mail.jpg">
          </a>
        </body>
      </html>
      แสดงผลตัวอย่างที่ 4
     
      การใช้คำสั่งกำหนดตัวเชื่อมโยงไฟล์เสียง
      การเชื่อมโยงโดยเป็นการใส่เพลงโดยการกำหนดตัวเชื่อม ในช่องว่าง ๆให้ใส่ตำแหน่งไฟล์เสียง ลงไป ส่วนตรง "คำอธิบาย" ให้ใส่ข้อความที่สื่อความหมายให้รู้ว่า ตัวเชื่อมนี้ เป็นไฟล์เพลง เช่น "เพลงแสนสนุก"
      <A HREF="ชื่อไฟล์.นามสกุล"> คำอธิบาย </A>
      ตัวอย่างที่ 5 การใช้คำสั่งกำหนดตัวเชื่อมไฟล์เสียง
      <html>
         <head> <title>
         การใช้คำสั่งกำหนดตัวเชื่อมไฟล์เสียง
         </title><head>
         <body>
           <A HREF="song.mp3">
         เลือกเพื่อเชื่อมไปยังเพลงนี้
         </a>
         </body>
      </html>
      การเชื่อมโยงเพื่อเปิดเอกสารอื่น ๆ
      การลิงค์เอกสารอื่น ๆ เช่นการลิงค์ไฟล์ .pdf หรือ filename.doc และสำหรับเอกสารที่ต้องการให้ดาวน์โหลด สามารถเตรียมไฟล์เป็นไฟล์สกุล .zip เวลาดาวน์โหลด บราวเซอร์จะได้เรียกให้มีการบันทึกไฟล์อัตโนมัติ
      ตัวอย่างที่ 6 การเชื่อมโยงเอกสารอื่น ๆ
      <html>
        <head><title>
        ....การเชื่อมโยงเอกสารอื่น ๆ....
        </title></head>
        <body>
          <a href="work.pdf">
        เอกสารอ่านเพิ่มเติม
        </a><p>
        </body>
      </html>
      แสดงผลตัวอย่างที่ 6