ผลการเรียนรู้
สร้างจุดลิงค์และเมนูเชื่อมโยงข้อมูลบนเว็บเพจได้
จุดประสงค์นำทาง
- อธิบายคำสั่งสร้างจุดลิงค์และสร้างเมนูเชื่อมโยงข้อมูลบนเว็บเพจได้
- เขียนเว็บเพจสร้างจุดลิงค์และสร้างเมนูเชื่อมโยงข้อมูลบนเว็บเพจได้
การลิงค์บนเว็บเพจ
การลิงค์ คือ การเชื่อมโยงเว็บเพจหลาย ๆ เว็บเพจเข้าด้วยกันให้เป็นเว็บไซด์ ซึ่งมีลักษณะเหมือนใยแมงมุม จุดลิงค์เราต้องสร้างขึ้นมาเอง ส่วนปลายทางของลิงค์มีทั้งแบบสร้างขึ้นมา คือ ชื่อส่วนย่อยของเว็บเพจ และที่ไม่ต้องสร้าง คือชื่อของเว็บเพจหรือชื่อของ URL
1. สร้างจุดลิงค์ไปยังเว็บเพจอื่น
การสร้างลิงค์ไปยังหน้าต่าง ๆ ของเว็บเพจอื่นใช้ ทำได้โดยใช้แท็ก <A> ดังนี้
รูปแบบการใช้งาน
ชื่อแท็ก A
แอตทริบิวต์ HREF
รูปแบบ <a href=ที่อยู่ของเว็บเพจ>นี่คือจุดลิงค์</a>
ตัวอย่าง <a href=exam5.html> คลิกที่นี่</a>
การนำไปใช้
การสร้างจุดลิงค์ไปยังหน้าเว็บเพจอื่น สามารถทำได้ดังนี้
<body>
ศึกษาเนื้อหาบทเรียน<a href=exam4.html> กรุณาคลิกที่นี่</a>
</body>
2. สร้างจุดลิงค์ไปยังเว็บไซต์อื่น
การลิงค์ไปยังเว็บไซต์อื่น คือ การลิงค์ไปนอกเว็บไซต์ของเรา ซึ่งใช้แท็กและรูปแบบเหมือนกับการลิงค์หน้าเว็บเพจอื่น แต่จะกำหนดปลายทางเป็นชื่อ URL ดังนี้
<a href=url taget =เป้าหมาย>ข้อความ</a>
* url เป็นโปรโตคอลที่อ้างอิงไปยังเว็บไซต์ต่าง ๆ เช่น
*taget หมายถึง เป้าหมายที่ต้องการให้เว็บเพจที่เชื่อมโยงปรากฏ ดังนี้
_blank หมายถึง ให้เปิดเว็บเพจที่เชื่อมโยงในหน้าต่างใหม่
_parent หมายถึง ให้เปิดเว็บเพจที่เชื่อมโยงในหน้าต่างหลักที่จุดเชื่อมโยงอยู่
_self หมายถึง เปิดเว็บเพจที่เชื่อมโยงในหน้าต่างเดียวกับที่จุดเชื่อมโยงอยู่
_top หมายถึง เปิดเว็บเพจที่เชื่อมโยงเต็มจอหรือเต็มเฟรม โดยยกเลิกเฟรมเก่าทั้งหมด
การสร้างจุดลิงค์ไปยังเว็บไซต์อื่น สามารถทำได้ดังนี้
<body>
ต้องการเข้าเว็บโรงเรียนนางรอง <a href=http://www.nangrong.ac.th>กรุณาคลิกที่นี่</a>
</body>
3. สร้างจุดลิงค์ไปยังเว็บเพจในเว็บไซต์อื่น
การลิงค์ในลักษณะนี้คือการเจาะจงชื่อเว็บเพจปลายทางของเว็บไซต์อื่นที่ต้องการลิงค์ไป ดังนี้
<body>
ประกาศผลสอบคัดเลือกเข้าเรียนต่อโรงเรียนนางรอง <a href=http://www.nangrong.ac.th /grade.thml> กรุณาคลิกที่นี่</a>
</body>
4. สร้างจุดลิงค์ในเว็บเพจเดียวกัน
การลิงค์ในเว็บเพจเดียวกันจะแตกต่างจากการลิงค์ไปยังเว็บอื่น โดยมีขั้นตอนในการกำหนดตำแหน่งที่ปลายทางในเว็บเพจหน้านั้น ๆ เพิ่มขึ้นมาโดยใช้แอตทริบิวต์อีก 1 ตัวของ <A> คือ แอตทริบิวต์ NAME
รูปแบบการใช้งาน
แอตทริบิวต์ NAME
รูปแบบ <a name=ชื่อเป้าหมาย>ข้อความ</a>
ตัวอย่าง <a name=address></a>
การนำไปใช้
การสร้างจุดลิงค์ในเว็บเพจเดียวกัน สามารถทำได้ดังนี้
<body>
<a name=address>ข้อความ</a>
..................
..................
<a href=#address> กรุณาคลิกที่นี่</a>
</body>
5. การสร้างจุดลิงค์ด้วยรูปภาพ
การสร้างจุดลิงค์ด้วยรูปภาพทำได้เหมือนกับการสร้างจุดลิงค์ด้วยตัวอักษร แต่รูปภาพสามารถลิงค์ไปยังปลายทางได้เพียงจุดเดียว ทำได้ดังนี้
<body>
<a href=exam7_1.html><img src=nanta.jpg width=100 heigth=50 border=0> </img></a>
</body>
6. การลิงค์ไปยังอีเมลแอดเดรส
หากผู้เขียนเว็บเพจต้องการให้ผู้เข้าชมสามารถติดต่อกับผู้เขียนได้ด้วยการสร้างจุดลิงค์ไปยังอีเมลแอดเดรสของ ผู้เขียน ทำได้ดังนี้
<body>
<a href=mailto:tawandang@yahoo.com> ติดต่อผู้เขียน</a>
</body>