top of page

บทที่ 7 

การเชื่อมโยงเว็บเพจ

การเชื่อมโยงเว็บเพจ

             7.1 การเชื่อมโยงเว็บเพจ

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

 

              7.2 ส่วนประกอบของการเชื่อมโยง

การเชื่อมโยงนั้น จะต้องประกอบด้วยส่วนสําคัญ 2 ส่วน คือ 1. จุดเชื่อมโยง (Link)

 

               1จุดเชื่อมโยง(Link).เป็นส่วนของเอกสารที่จะใช้เป็นจุดเชื่อมโยงไปยังส่วนอื่น ๆ ซึ่งส่วนของเอกสารที่จะใช้เป็น

จุดเชื่อมโยงนี้อาจเป็นข้อความหรือรูปภาพก็ได้ 

 

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

Link

Target

จุดเชื่อมโยง(Link) คือ จุดเชื่อมโยงไปยังเนื้อความอื่น ๆ

เป้าหมาย Taget) คือ จุดหมายที่ต้องการเชื่อมโยงไปถึง

         7.3 การสร้างจุดเชื่อมโยง

เราสามารถสร้างจุดเชื่อมโยงได้ 2 แบบด้วยกัน คือ 

         1. จุดเชื่อมโยงที่เป็นข้อความ (Text Link) 

         2. จุดเชื่อมโยงที่เป็นรูปภาพ (Graphic Link)

      ซึ่งการสร้างจุดเชื่อมโยงนี้จะกระทําได้โดยการใส่จุดเชื่อมโยงนั้นซึ่งอาจเป็นข้อความหรือ รูปภาพไว้ระหว่างแท็ก

<a>...</a> (เรียกว่า Anchor Tag อ่านว่า แองเคอร์)

          7.3.1 การสร้างจุดเชื่อมโยงให้กับข้อความ (Text Link)

เป็นการกําหนดให้ข้อความใด ๆ ในเอกสารเป็นจุดเชื่อมโยง ซึ่งจุดเชื่อมโยงที่ได้นี้จะเรียกว่า Hypertext link

รูปแบบ

<a href = URL> ข้อความจุดเชื่อมโยง </a>

         href  หมายถึง Hypertext Reference เป็นการบอกให้รู้ว่าข้อความนี้มีการเชื่อมโยง ไปยังตําแหน่ง URL ที่กําหนด

  

          URL  หมายถึง Uniform Resource Location เป็นการระบุตําแหน่งของเป้าหมาย ที่จะเชื่อมไปถึง ซึ่งการระบุ URL นี้จะกระทําได้ 2 แบบตัวยกันคือ 

      - Absolute URL  เป็นการระบุตําแหน่ง URL แบบสมบูรณ์ ในรูปแบบ โพรโทคอละเชื่อโฮส.โดเมน/ชื่อไฟล์ : มักใช้เมื่อเป้าหมายอยู่ในเว็บไซต์อื่น เช่น href="http://www.softpressbook.com"

      - Relative URL เป็นการระบตําแหน่งของไฟล์เอกสารโดยอ้างอิงจากเอกสารที่กําลัง ใช้งานอยู่ จะใช้ในกรณีที่เชื่อมโยงไปยังเอกสารที่อยู่ในเว็บไซต์เดียวกัน เช่น href="recipes/index.html"

           7.3.2 การสร้างจุดเชื่อมโยงให้กับรูปภาw (Graphic Link)

เป็นการกําหนดให้รูปภาพใด ๆ ที่ต้องการใช้เป็นจุดเชื่อมโยง

รูปแบบ

<a href = URL> <img src = "ชื่อไฟล์รูปภาพ"> </a>

<!DOCTYPE html>

<html>

<head>

<title>Anchor Tag</title>

</head>

<body>

<a href="http://www.softpressbook.com"> <img src="logosoft.gif'sch <br>

<a href="http://www.softpressbook.com > สํานักพิมพ์ซอฟท์เพรส/a>

</body>

</html>

7.4 ลักษณะการเชื่อมโยงไปยังตําแหน่งต่าง ๆ

เราสามารถกําหนดการเชื่อมการกําหนดการเชื่อมโยงไปยังตําแหน่งต่าง ๆ ได้หลายแบบด้วยกัน คือ

      1.การเชื่อมโยงภายในเว็บเพจเดียวกัน

      2.การเชื่อมโยงไปยังเว็บเพจอื่นในเว็บไซต์เดียวกัน

      3.การเชื่อมโยงไปยังเว็บไซต์อื่น

      4.การเชื่อมโยงไปยังอีเมล (Email link)

      5.การเชื่อมโยงไปยังไฟล์ดาวน์โหลด

7.4.1 การเชื่อมโยงภายในเว็บเพจเดียวกัน

      การเชื่อมโยงลักษณะนี้ จะมีการจัดวาง จุดเชื่อมโยงและเป้าหมายอยู่ภายในเว็บเพจเดียวกัน

Link

Target

กําหนดเป้าหมาย

<a name = "ชื่อเป้าหมาย"> ข้อความที่ต้องการแสดง <a >

ชื่อเป้าหมาย (Target) เป็นชื่อของตําแหน่งจุดเชื่อมโยงที่ตั้งไว้ข้างต้น เป็นจุดหมายที่

ต้องการเชื่อมโยงไปถึง

กําหนดจุดเชื่อมโยง

<a href = “ยชื่อจุดเชื่อมโยง”> ข้อความที่เป็นจุดเชื่อมโยง <a>

ชื่อจุดเชื่อมโยง (Link) เป็นชื่อของตําแหน่งในเอกสาร ที่ใช้เป็นจุดเชื่อมโยงไปยัง

เนื้อความอื่นๆ ต้องนําหน้าด้วยเครื่องหมาย #

7.4.2 การเชื่อมโยงไปยังเว็บเพจอื่น

        

        เป็นการเชื่อมโยงไปยังไฟล์เว็บเพจอื่นที่อยู่ใน

เว็บไซต์เดียวกัน

Link

รูปแบบ

<a href = ชื่อไฟล์ .html> ข้อความจุดเชื่อมโยง </a>

Target

7.4.3 การเชื่อมโยง

            การเชื่อมโยงไปยังเว็บไซต์ที่ทําหนด เป็นการเชื่อมโยงไปยังเว็บไซต์ต่าง ๆ ในอินเทอร์เน็ต

Link

URL ในอินเทอร์เน็ต

รูปแบบ

<a href = URL> ข้อความจุตเชื่อมโยง </a>

     URL หมายถึง Uniform Resource Location ซึ่งเป็นรูปแบบมาตรฐานที่เป็นแหล่ง บริการหรือแหล่งที่จะขอใช้บริการอินเทอร์เน็ต โดยเขียนในรูปแบบ

โพรโทคอละปเชื่อโฮส.โดเมน/ชื่อไฟล์

7.4.4 การเชื่อมโยงไปยังอีเมล

             

         การเชื่อมโยงลักษณะนี้จะเป็นการเปิดโปรแกรมเขียนอีเมลเพื่อให้ผู้ชมส่งข่าวสารมาหาเรา

ได้โดยสะดวก

รูปแบบ

<a href = "mailto:ที่อยู่อีเมล”> ข้อความจุดเชื่อมโยง </a>

ที่อยู่อีเมล หรือ Email address เป็นตําแหน่งที่อยู่อีเมลที่ต้องการส่งอีเมลไปถึง

โดยเขียนอยู่ในรูปแบบ

ชื่อ@ที่อยู่

เมื่อ ชื่อ เป็นชื่อผู้ใช้บริการอีเมล

@ อ่านว่า แอท แปลว่า อยู่ที่

ที่อยู่ เป็นชื่อเครื่องให้บริการอีเมลที่ผู้ใช้นั้นเป็นสมาชิกอยู่

ตัวอย่างเช่น

sitt99@hotmail.com

หมายถึง ผู้ใช้บริการอีเมลชื่อ sit99 อยู่ที่ hotmail.com

ตัวอย่างการเชื่อมโยงไปยังอีเมล

       ในที่นี้ให้เปิดไฟล์ HW5-1.htmlขึ้นมา แล้วจะทําการเพิ่มหัวข้อ “ติดต่อเราเพื่อสร้างการ เชื่อมโยงไปยังอีเมลของเรา ซึ่งเมื่อคลิกเมาส์ที่ข้อความนี้จะเปิดโปรแกรมเขียนอีเมล โดยผู้รับคือที่อยู่อีเมลที่เรากําหนด

<ul>

<li> ข่าวเด็ดๆ </li><br>

</li> บันเทิงเริงรมย์ </li> <br>

<li> รักการอ่าน </li> <br>

| <li><a href="mailto:sitt99@hotmail.com > ติดต่อเรา</a> </li>

</ul>

7.4.5 การเชื่อมโยงไปยังไฟล์ดาวโหลด

             นอกจากการเชื่อมโยงไป.. เชื่อมโยงไปยังไฟลชน

ขายเร็วมโยงไปยังโฟล์ดาวน์โหล เวลาการเชื่อมโยงไปยังหน้าเว็บเพจอื่นที่เป็นไฟล์ htrol แล้ว เรายังสามารถกําหนดการ

เปยังไฟล์ชนิดอื่น เช่น ไฟล์รูปภาพ, ไฟล์เอกสารของโปรแกรม Ofice, ไฟล์บีบอัด, หนังสือแบบ pdf, พผมลองเตย เป็นต้น เพื่อเปิดดูข้อมูลหรือดาวน์โหลดมาเก็บไว้ในเครื่อง โปรแกรมเว็บเบราว์เซอร์จะทํางานตามชนิดของไฟล์นั้น ๆ ดังนี้

1.ถ้าเป็นไฟล์รูปภาพ เว็บเบราว์เซอร์จะเปิดได้เองทันทีโดยอัตโนมัติ 

2.ถ้าเป็นไฟล์ชนิดอื่น ๆ จะปรากฎหน้าต่างให้ดาวน์โหลดไฟล์

         ซึ่งเราอาจเลือก Openเพื่อเปิดดู หรือเลือก Save เพื่อบันทึกไฟล์นั้นเก็บลงในเครื่องของเรา เพื่อเปิดดูในภายหลังก็ได้ ซึ่งการเปิดไฟล์เหล่านี้ในเครื่องเราจะต้องมีโปรแกรมที่ใช้เปิดไฟล์ ชนิดนั้นอยู่ด้วย

การสร้างการเชื่อมโยงไปยังไฟล์ดาวน์โหลดนี้ จะมีรูปแบบดังนี้

รูปแบบ

<a href = “ชื่อไฟล์ดาวน์โหลด> ข้อความจุดเชื่อมโยง </a>

โดยที่

ชื่อไฟล์ดาวน์โหลด

จะเป็นไฟล์ที่ต้องการให้ไปดาวน์โหติด ซึ่งต้องระมแหล่งที่เก็บ และชนิดของไฟด้วย ตัวอยางเช่น 1

http://www.softnessbook.ccontot t pof http://www.padกรรsgoo.ccorn00848943 ng

7.5 การทําหนดส์ให้กับจุดเชื่อมโยง

         โดยทั่วไปเว็บเบราว์เซอร์จะแสดงจุดเชื่อมโยงด้วยสีฟ้า และเมื่อมีการคลิกที่จุดเชื่อมโยง แล้วจะถูกแสดงด้วยสีม่วงแทน แต่เราสามารถกําหนดสีให้กับจุดเชื่อมโยงที่เราสร้างขึ้นได้ใน

รูปแบบ

<body แท็กการกําหนดสี = ชื่อสีมาตรฐาน

หรือ

<body แท็กการกําหนดสี = #RRGGBB>

โดยที่

     แท็กการกําหนดสี   เป็นการกําหนดส่วนที่ต้องการจะกําหนดสี ซึ่งอาจเป็น

        link                   เป็นการกําหนดสีข้อความที่เป็นจุดเชื่อมโยง แต่ยังไม่ได้ทําการ คลิกเพื่อ                                    ไปยังเป้าหมาย

       

        vlink                  เป็นการกําหนดสีข้อความที่เป็นจุดเชื่อมโยง และได้ทําการคลิก เพื่อไปยัง                                   เป้าหมายมาแล้ว (Visited link)

       

         alink                  เป็นการกําหนดสีข้อความที่เป็นจุดเชื่อมโยง และกําลังไปยัง

                                 เป้าหมายอยู่ขณะนั้น (Active link)

       

         ชื่อสีมาตรฐาน และ #RRGGBB

                                 เป็นชื่อสมาตรฐานหรือรหัสสีที่ต้องการกําหนดให้กับ แท็กการกําหนดสี

ตัวอย่างการกําหนดสีให้กับจุดเชื่อมโยง ลองเพิ่มคําสั่งต่อไปนี้ลงในไฟสี link5 html

<body link="green" vlink="blue" alink="red">

bottom of page