Munu
การเชื่อมโยงเว็บเพจด้วย link
เว็บไซต์หนึ่งเว็บไซต์จะประกอบไปด้วยไฟล์(เว็บเพจ)มากมาย ประกอบกันเหมือนเป็นหนังสือหนึ่งเล่มที่ประกอบด้วยหน้ากระดาษมากมายหลายแผ่น เว็บไซต์ก็ใช่เดียวกันถ้าเรามีข้อมูลมากขึ้นเราก็จำเป็นจะต้องแบ่งหน้าเพื่อความสะดวกในการอ่าน เช่นเดียวกับหนังสือ
โดยที่การแบ่งหน้าของหนังสือนั้นใช้สารบัญบอกเลขหน้าที่เก็บข้อความนั้นไว้ แต่การทำเว็บไซต์ของเราจะใช้ link เป็นตัวแทนที่ใช้ในการเปิดไปยังหน้าต่างๆ ซึ่งในบทนี้เราจะลองสร้าง link ดู
ให้เราสร้างไฟล์มา 3 ไฟล์มีชื่อและ source code ดังนี้
1.index.html เป็นไฟล์ที่เทียบได้กับสารบัญของเว็บไซต์ของเรา ซึ่ง 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 ของหนังสือ
| <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 ของหนังสือ
| <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 ขนาดของตัวอักษรที่แสดงก็จะเปลี่ยนแปลง
