Home » , , , , , , , , » การเชื่อมโยง (ลิงค์)
วันอังคารที่ 22 กรกฎาคม พ.ศ. 2557
undefined

การเชื่อมโยง (ลิงค์)

:: การเชื่อมโยง (ลิงค์)
เป็นที่ทราบกันดีอยู่แล้วนะค่ะ ในเว็บไซต์หนึ่ง ๆ จะมีหน้าเพจมากกว่าหนึ่งหน้า อย่างเช่นจากหน้าโฮมเพจก็สามารถคลิกเพื่อเข้าไปดูข้อมูลในหน้าอื่น ๆ ได้ ซึงเราเรียกว่าการเชื่อมโยงเว็บเพจ หรือ การลิงค์ ซึ่งก่อนที่เราจะทำการลิงค์หน้าเว็บเพจ เราจะต้องมีเว็บเพจอย่างน้อย 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>

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

 รูปแบบการเชื่อมโยงระหว่างเว็บเพจ

  <html>
  <head><title> ....การเชื่อมโยงระหว่างเว็บเพจ....</title></head>
       <body>
               <a href="index.html">คลิ๊กที่นี้เพื่อกลับไปหน้าแรก</a><p> <!--ลิงค์โดยใช้ข้อความ ->     
               <a href="index.html"><img src="home.gif"></a> <!--ลิงค์โดยใช้รูปภาพ ->     
       </body>
  </html>
 รูปแบบการเชื่อมโยงนอกเว็บไซต์

  <html>
  <head><title> ....การเชื่อมโยงนอกเว็บไซต์....</title></head>
       <body>
                <!--ลิงค์โดยใช้ข้อความ ->               <a href="http://www.nextstepdev.com">ลิงค์มาที่เว็บไซต์ Nextstepdev.com</a><p>
                <!--ลิงค์โดยใช้รูปภาพ ->               <a href="http://www.nextstepdev.com"><img src="nextstpdev.gif"></a>      
       </body>
  </html>

 การเชื่อมโยงภายในหน้าเว็บเพจ
สำหรับเว็บบ้างเว็บที่มีข้อมูลในแต่ละหน้าเยอะ ๆ ต้องเลื่อนลงไปด้านล่างมาก ๆ ซึ่ง วิธีการแก้ไขปัญหาเหล่านี้ ก็คือการเพิ่มลิงค์เพื่อลิงค์เอกสารในหน้านั้น โดยเราอาจแบ่งตามหัวข้อย่อย ๆ ก็ได้ค่ะ (เหมือนการลิงค์ในหน้านี้ค่ะ) ซึ่งอาจจะมองว่าเป็นในลักษณะของเมนูย่อยก็ได้ค่ะ นอกจากนี้ ก็สามารถใช้ในกรณีที่ลงไปดูข้อมูลด้านล่างแล้วอยากจะเลื่อนมาที่ด้านบนของเว็บ ในส่วนท้ายเพจ เราก็อาจทำลิงค์ ให้คลิ๊กเพื่อ go to top ได้อย่างรวดเร็วค่ะ คงเคยจะเห็นกันมาบ้างแล้วนะค่ะ (ก็เหมือนการลิงค์ในหน้านี้อีกน่ะแหละค่ะ)

  <html>
  <head>
  <title> ....การเชื่อมโยงภายในหน้าเว็บเพจ โดยคลิ๊กที่ด้านล่าง แล้วเลื่อนขึ้นมาด้านบน....</title>
  </head>
       <body>
                <!--กำหนดชื่อปลายทาง เขียนโค้ดส่วนนี้ไว้บริเวณด้านบนของเพจ->
               <a name="top"></a>
                <!--ช่วงระหว่างนี้ต้องมีข้อมูลเยอะ ๆ เกินหนึ่งหน้าเพจสกรีนจึงจะเห็นผลการทำงาน->         
               <!--ลิงค์โดยใช้ข้อความ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->
               <a href="#top">Go to Top</a><p>
               <!--ลิงค์โดยใช้รูปภาพ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->
               <a href="#top"><img src="top.gif"></a>      
       </body>
  </html>

 การเชื่อมโยงแบบอีเมล์
สำหรับการเชื่อมโยงแบบนี้ มักจะเห็นบ่อยในเว็บเพจซึ่งเป็นส่วนลิงค์สำหรับให้ผู้เยี่ยมชมส่งเมล์มายังผู้ดูแลเว็บไซต์ โดยใช้ E-mail ตามที่ผู้เขียนเว็บได้ระบุไว้ในแท็กสำหรับลิงค์  การลิงค์แบบนี้นั้นเมื่อผู้ใช้งานคลิ๊กที่ลิงค์ จะมีการเชื่อมโยงไปยังโปรแกรม Microsofe outlook ซึ่งเป็นโปรแกรมสำหรับส่งเมล์ตัวหนึ่ง โดยที่ช่อง address To (ปลายทาง) จะปรากฏ E-mail Address ที่ระบุไว้ที่แท็กลิงค์ปรากฏอยู่

<html>
  <head><title> ....การเชื่อมโยงแบบอีเมล์....</title></head>
       <body>
                <!--ลิงค์โดยใช้ข้อความ ->               <a href="mailto:mail@domain.com">ลิงค์เมล์ส่งเมล์ไปที่ mail@domain.com</a><p>
                <!--ลิงค์โดยใช้รูปภาพ ->               <a href="mailto:mail@domain.com"><img src="contact.gif"></a>      
       </body>
  </html>

 Tip HTML
เทคนิคการเชื่อมโยงแบบอีเมล์ จากโค้ดการเชื่อมโยงแบบอีเมล์ จะเห็นได้ว่าสามารถใช้แบบลิงค์ข้อความ หรือลิงค์รูปภาพก็ได้ แต่ที่อยากแนะนำ คือ ควรจะเป็นลิงค์แบบรูปภาพมากกว่า เพราะการลิงค์แบบรูปภาพจะสร้างความปลอดภัยให้กับอีเมล์มากกว่าค่ะ
คงเคยจะเจอมาบ้างนะค่ะ ที่ในวันหนึ่ง ๆ อีเมล์ของเรามีเมล์ที่เราไม่เคยติดต่อเลย มีเมล์แปลก ๆ เช่นเมล์โฆษณา เชิญชวนซื้อของต่าง ๆ หรือเมล์ขยะที่เรียกว่า Junk Mail แล้วเคยคิดไหมค่ะว่า ผู้ที่ส่งอีเมล์มาหาเรานั้น ได้ที่อยู่อีเมล์เรามาจากไหน คำตอบก็คือ จะมีพวกทำธุรกิจหาอีเมล์ไปขายให้กับผู้สนใจ สำหรับเอาอีเมล์ไปใช้โฆษณาประชาสัมพันธ์ธุรกิจค่ะ ซึ่งเจ้าพวกหาอีเมล์นี้เค้าไม่เข้ามาหาทีละเว็บหรอกค่ะ แต่พวกนี้จะใช้โปรแกรม โดยโปรแกรมจะไปกวาดหาอีเมล์ในเว็บต่าง ๆ อัตโนมัติ ซึ่งรูปแบบของการทำงานก็คือ หาจากข้อความที่ เป็นรูปแบบ xxx@xxxx.xxx ซึ่งหากเราเขียนโค้ดลิงค์เมล์ของเราแบบข้อความ โปรแกรมกวาดเมล์ก็จะได้อีเมล์ของเราไปค่ะ ทีนี้ล่ะค่ะ คุณที่เป็นคนดูแลเว็บ วัน ๆ ก็จะได้เมล์ขยะมาเป็นร้อย ๆ เลยล่ะค่ะ
ข้อหลีกเลี่ยงปัญหานี้ก็คือ ไม่ควรใส่รูปแบบ xxx@xxxx.xxx บนหน้าเว็บค่ะ แต่ควรสร้างข้อความ xxx@xxxx.xxx เป็นภาพกราฟิค แล้วใช้วิธีลิงค์แบบรูปภาพค่ะ และขอแนะนำอีกสักนิดค่ะ สำหรับคนที่ชอบใช้งานเว็บบอร์ด แสดงความคิดเห็นตามเว็บต่าง ๆ คุณเป็นผู้ที่มีโอกาสโดนโปรแกรมกวาดอีเมล์กวาดอีเมล์ไปเยอะขึ้นค่ะ แต่ก็ไม่ได้หมายความว่าจะให้คุณเลิกแสดงความคิดเห็นค่ะ คุณก็ยังแสดงความคิดเห็นได้ตามปกติค่ะ แต่เวลาใส่อีเมล์ ควรใส่ลักษณะนี้แทนค่ะ xxx(@)xxxx.xxx
การลิงค์เอกสารอื่น ๆ การลิงค์เอกสารอื่น ๆ เช่นการลิงไฟล์ .pdf การลิงค์เอกสารสำหรับให้ดาวนโหลดต่าง ๆ สามารถลิงค์ได้เหมือนรูปแบบที่ 1 เหมือนการลิงค์เชื่อมโยงระหว่างเว็บเพจ เีพียงแค่คุณต้องระบุไฟล์ที่ต้องการเชื่อมโยงให้ถูกต้องค่ะ เช่นใส่ชื่อเป็น filename.pdf หรือ filename.doc การลิงค์แบบนี้ สำหรับไฟล์ .doc บราวเซอร์ยุคหลัง ๆ จะแสดงเนื้อไฟล์ ส่วนสำหรับ .pdf ในเครื่องจะเปิดดูไฟล์ ต้องลงโปรแกรม Adobe Reader ไว้ด้วยค่ะ ไม่งั้นจะไม่สามารถดูไฟล์ได้ และสำหรับเอกสารที่ต้องการให้ดาวน์โหลด ก็อาจเตรียมไฟล์เป็นไฟล์สกุล .zip เวลาดาวน์โหลด บราวเซอร์จะได้เรียกให้มีการเซฟไฟล์อัตโนมัติค่ะ
แท็ก Comment หรือ หมายเหตุ 
จะเห็นว่าในโค้ดของบทความนี้ มีแท็ก <!--........-> อยู่ แท็กนี้เป็นแท็ก Comment ในภาษา html โดยข้อความที่ปรากฏอยู่ในแท็กนี้ จะไม่แสดงผลออกทางเว็บบราวเซอร์ค่ะ

0 ความคิดเห็น:

แสดงความคิดเห็น

Popular Posts

  • รวมโค้ดสี
  • HTML Basic : โค้ดง่ายๆ
    Hypertext Markup Language โครงสร้าง <html> <head> <title>.........</title> </head> <body> </body> ...
  • ทำความรู้จัก Search Engine
    ทำความรู้จัก Search Engine บทที่แล้วได้เกริ่นไปกี่ยวกับ SEO และเมื่อพูดถึง SEO หากจะไม่พูดถึงเรื่องของ Search Engine ก็คงกะไรอยู่ เพราะว่ามี...
  • เริ่มต้น SEO ด้วยการใส่ Meta Tag
    เริ่มต้น SEO ด้วยการใส่ Meta Tag การใส่แท็ก Meta วิธีเริ่มต้นสำหรับการทำ SEO ให้กับเว็บไซต์ ทำได้ง่าย ๆ แค่ใส่แท็ก Meta ให้เว็บไซต์ เว็บไซต์...
  • การใส่คำอธิบายให้รูปภาพ
    การใส่คำอธิบายให้รูปภาพ โดยใช้โปรแกรม Dreamweaver การใส่คำอธิบายให้รูปภาพ ก็คือการใส่คำสั่ง ALT Tag ในภาษา HTLM นั่นเอง และเราสามารถใช้โปรแ...
  • การจัดรูปแบบข้อความ
    ::  การจัดรูปแบบข้อความ สำหรับบทความนี้ก็ยังคงเกี่ยวข้องกับข้อความ เป็นบทความที่ต่อเนื่องมาจากบทความที่แล้ว ในบทความนี้เราจะมาจัดรูปแบบขอ...
  • Banner มาตรฐาน
    รู้เรื่อง Banner มาตรฐาน ตามเว็บไซต์ต่าง ๆ สิ่งที่เราจะเห็นบ่อย ๆ และเกือบทุก ๆ เว็บต้องมีก็คือ Banner หรือป้าย ซึ่งมีอยู่มากมาย จนบางเว็บอา...
  • การสร้างตาราง
    ::  การสร้างตาราง จากบทความในบทที่ผ่าน ๆ มา ในเรื่องของการจัดตำแหน่งของข้อความ จะเห็นได้ว่าถึงแม้เราจะสามารถจัดตำแหน่งได้แล้ว แต่การจัดตำ...
  • ลงโปรแกรมโปรแกรม Appserv
    ::  โปรแกรม Appserv โปรแกรมสำหรับจำลองเครื่องเป็น Server ในบทความนี้เราจะมาทำการติดตั้งโปรแกรม Appserv กันค่ะ ขั้นตอนแรกให้เราไปทำการหาโป...
  • Operator สำหรับการดำเนินการในภาษา PHP
    Operator สำหรับการดำเนินการในภาษา PHP ในบทความก่อนหน้านี้เราได้เรียนรู้เกี่ยวกับโอเปอเรเตอร์ที่ใช้ในการเปรียบเทียบ และในบทความเรื่องการใช้ W...
 
Copyright © 2015 สอนทำเว็บไซต์ ง่ายนิดเดี่ยว