พื้นฐานการทำเว็บไซต์

การเชื่อมโยงเว็บเพจด้วย 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 ขนาดของตัวอักษรที่แสดงก็จะเปลี่ยนแปลง

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


เลื่อนขึ้นด้านบน