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

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

1. สร้าง hyperlink

ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ

1.1. ลิงค์ภายในเว็บไซต์ด้วยกัน มีหลักการสร้าง hyperlink ดังรูปด้านล่าง

รูปแบบของ hyperlink ภายใน directory เดียวกัน

Source Code

<a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น

Source Code

<a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

รูปแบบของ hyperlink จาก directory ที่สูงกว่า

Source Code

<a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

1.2. ลิงค์กับเว็บภายนอก

รูปแบบของ hyperlink กับเว็บภายนอก

Source Code

<a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a>

คลิกเพื่อทดลองเขียนด้วยตัวเอง

2. สร้าง hyperlink ด้วยรูปภาพ

ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ

รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ

Source Code

คลิกเพื่อทดลองเขียนด้วยตัวเอง

3. สร้าง hyperlink ในหน้าเดียวกัน

ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>

รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน

สร้างจุดที่ต้องการจะลิงก์ไป

Source Code

สร้างลิงก์

Source Code

<a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </a>

คลิกเพื่อทดลองเขียนด้วยตัวเอง

4. เปิด browser ใหม่เมื่อคลิกที่ลิงก์

การสร้าง link ให้เปิด browser ใหม่เราจะใช้ Attributes โดยพิมพ์ target="_blank" ใน a tag

เปิด browser ใหม่เมื่อคลิกที่ลิงค์

Source Code

<a href="เป้าหมาย" target="_blank">ตัวอักษรที่ใช้แสดง</a>

คลิกเพื่อทดลองเขียนด้วยตัวเอง

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

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

ให้เราสร้างไฟล์มา 3 ไฟล์มีชื่อและ source code ดังนี้

1. index.html เป็นไฟล์ที่เทียบได้กับสารบัญของเว็บไซต์ของเรา ซึ่ง source code มีดังนี้

Source Code

<html> <head> <title>ทดลองสร้าง link ให้กับเว็บไซต์</title> </head> <body> เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้ <br> <a href = "page1.html">หน้า 1</a> <a href = "page2.html">หน้า 2</a> <br> <h1>คุณอยู่ที่ หน้าสารบัญ</h1> </body> </html>

2. page1.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 1 ของหนังสือ

Source Code

<html> <head> <title>ทดลองสร้าง link ให้กับเว็บไซต์</title> </head> <body> เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้ <br> <a href = "index.html">หน้าสารบัญ</a> <a href = "page2.html">หน้า 2</a> <br> <h1>คุณอยู่ที่ หน้า 1</h1> </body> </html>

3. page2.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 2 ของหนังสือ

Source Code

<html> <head> <title>ทดลองสร้าง link ให้กับเว็บไซต์</title> </head> <body> เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้ <br> <a href = "index.html">หน้าสารบัญ</a> <a href = "page1.html">หน้า 1</a> <br> <h1>คุณอยู่ที่ หน้า 2</h1> </body> </html>

ให้เราลอง เปิดไฟล์ดูจะเห็นดังรูปด้านล่าง

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

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

เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ

<a href = "index.html">หน้าสารบัญ</a> เป็นส่วนที่ใช้แสดง link ของเราซึ่งมีรายละเอียดดังนี้

<a href="ชื่อไฟล์ที่เราต้องการเปิดเมื่อคลิกที่ลิ้งค์นี้">ชื่อลิ้งค์ของเราที่แสดงใน web browser</a>

<h1>หน้า 1</h1> เป็นส่วนที่เปลี่ยนขนาดของข้อความของเราที่แสดงใน web browser ซึ่งเราสามารถลองเปลี่ยนขนาดโดยเปลี่ยนตัวเลขเป็น h2 , h3 ขนาดของตัวอักษรที่แสดงก็จะเปลี่ยนแปลง

ที่มา http://www.hellomyweb.com/course/html

ที่มา http://www.hellomyweb.com/course/how_to_create_website/

Page updated

Report abuse