แท็ก a <a> </a>
ในหน้านี้จะกล่าวถึงแท็ก a เพียงในส่วนแอททริบิว href
( แท็ก a มีแอททริบิวหลายอย่าง แต่ที่สำคัญมีเพียงอันเดียวคือ href )

แท็ก a นี้สำคัญมากทีเดียว
เพราะเป็นแท็กสำหรับสร้าง link

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

การสร้าง link ก็ไม่ยากนักครับ มีโครงสร้าง ดังนี้

<a href="internet_address หรือ ไฟล์ html"> ตัวอักษรลิ้งค์ </a>



การลิ้งค์ไปยัง internet address( url )
     test.htm - notepad

จะได้ผลเป็น
test.htm -  Microsoft Internet Explorer
 
       เว็บสนุก


กรณีนี้กำหนดเป็น url จะต้องทดสอบขณะต่ออินเตอร์เนตอยู่ครับ
การลิ้งค์ไปยัง ไฟล์ html อื่นๆ ที่อยู่ Folder เดียวกัน
สมมุติ เรามีไฟล์ html อยู่ 2 ไฟล์ / ก่อนจะทดสอบแท็กนี้ ให้สร้างไฟล์ html ขึ้น 2 ไฟล์ /
คือ 1.htm กับ 2.htm

ถ้าต้องการให้ ที่หน้า 1.htm มีอักษรลิงค์ ไปยังหน้า 2.htm

เราก็ต้องเปิดไฟล์ 1.htm ด้วย Notepad  แล้วพิมพ์ว่า
     test.htm - notepad


ตัวอย่าง ไฟล์ html ที่อยู่ Folder เดียวกัน

จะได้ผลดังนี้ครับ
1.htm -  Microsoft Internet Explorer
 
       คลิ้กที่นี่ เพื่อไปที่หน้า 2

โปรดอย่าทดลองคลิ้กที่นี่ครับ เพราะว่าไฟล์ 2.htm ไม่มีในเว็บไซท์นี้
แต่คุณสามารถทดสอบคลิ้กกับ1.htm ที่คุณสร้างและsave ไว้ภายในคอมฯได้
โดยเมื่อคลิ้กแล้วจะปรากฎว่าเว็บเพจจะเปลี่ยนไปยัง หน้า 2.htm
ตัวอย่างการลิ้งค์ไปยัง ไฟล์ html อื่นๆ ที่อยู่คนละ folder
มีสองกรณี ด้วยกัน คือ
  1. ลิงค์จากไฟล์ html ที่อยู่ระดับสูงกว่า ไปยัง ไฟล์ html ที่อยู่ระดับต่ำกว่า
  2. ลิงค์จากไฟล์ html ที่อยู่ระดับต่ำกว่า ไปยังไฟล์ html ที่อยู่ระดับสูงกว่า

ลิงค์จากไฟล์ html ที่อยู่ระดับสูงกว่า ไปยัง ไฟล์ html ระดับต่ำกว่า
สมมุติ เรามีไฟล์ html อยู่ 2 ไฟล์
คือ 1.htm กับ 3.htm
โดยไฟล์ 3.htm อยู่ใน mydoc
ซึ่งเป็น folder รองลงไป จาก folder ที่บรรจุ ไฟล์ 1.htm

ถ้าต้องการให้ ที่หน้า 1.htm มีอักษรลิงค์ ไปยังหน้า 3.htm

เราก็ต้องเปิดไฟล์ 1.htm ด้วย Notepad  แล้วพิมพ์ว่า
     test.htm - notepad
ก็จะได้ดังนี้ครับ
1.htm -  Microsoft Internet Explorer
 
       คลิ้กที่นี่ เพื่อไปที่หน้า 3




ลิงค์จากไฟล์ html ที่อยู่ระดับต่ำกว่า ไปยังไฟล์ html ที่อยู่ระดับสูงกว่า
สมมุติ เรามีไฟล์ html ชื่อ 3.htm อยู่ใน mydoc
และมีไฟล์ 1.htm อยู่ folder ระดับสูงกว่า
( ในลักษณะเดียวกับภาพทางด้านซ้าย )

ถ้าต้องการให้ ที่หน้า 3.htm มีอักษรลิงค์ ไปยังหน้า 1.htm

เราก็ต้องเปิดไฟล์ 3.htm ด้วย Notepad  แล้วพิมพ์ว่า
     3.htm - notepad
ก็จะได้ดังนี้ครับ
1.htm -  Microsoft Internet Explorer
 
       คลิ้กที่นี่ เพื่อไปที่หน้า 1



//--- หมายเหตุ ---//
ไฟล์ 1.htm 2.htm 3.htm
เป็นเพียงไฟล์ที่สมมติขึ้น ไม่มีอยู่จริงในเว็บนี้
คุณจะไปสร้างไฟล์ และทดสอบด้วยตัวเอง หรือดาวน์โหลด ไฟล์ตัวอย่างก็ได้ครับ


ดาวน์โหลดไฟล์ตัวอย่าง
link.zip




ผมเชื่อว่า มีบางคน กำลังมีข้อสงสัยอยู่ว่า
ถ้าไดเรคทอรี่มีลักษณะค่อนข้างซับซ้อนแล้ว จะต้องเขียนกี่ชั้นอย่างไร
ผมยกตัวอย่างให้อย่างนี้ครับ

ถ้าต้องการให้ไฟล์ html ที่อยู่ในโฟล์เดอร์ c:/myfol/web01/
สามารถลิงค์ ไปยังไฟล์ c:/myfol/web02/page05.htm

ให้เปิดไฟล์ html ที่อยู่ใน c:/myfol/web01/ และเขียนดังนี้ครับ
     3.htm - notepad
การใช้เครื่องหมาย .. เป็นเสมือนสัญลักษณ์แทนการขึ้น
ไปยังโฟล์เดอร์ที่สูงกว่า 1 ชั้น

เช่น สมมุติไฟล์ html อยู่ภายใน c:/myfol/myweb01/
เมื่อเราสร้าง link ภายในไฟล์ html นั้น โดยเขียนว่า
<a href="../main.htm">ไปยังหน้าหลัก</a>
ก็จะเสมือนกับเขียนว่า
<a href="c:/myfol/main.htm">ไปยังหน้าหลัก</a>

และหากเราเขียนว่า
<a href="../../main.htm">ไปยังหน้าหลัก</a>
ก็จะเป็นสัญลักษณ์แทนการเลื่อนขึ้นไป
ยังโฟล์เดอร์ที่สูงกว่า 2 ชั้น
ถ้าแท็กทางด้านบนเขียนไว้ภายในไฟล์
c:/myfol/myweb01/index.htm
ก็จะมีค่าเท่ากับเขียนว่า
<a href="c:/main.htm">ไปยังหน้าหลัก</a>

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