เชื่อมต่อเอกสารด้วย hyperlink
hyperlink หรือเราเรียกกันสั้นว่า link ซึ่งเราจะเห็นอยู่ในทุกเว็บไซต์ ใช้เพื่อเปิดเว็บเพจอื่นๆใน เว็บไซต์ของเรา หรือเชื่อมโยงไปที่ web site หรือ เว็บเพจอื่นๆ ซึ่งมีความสำคัญมากในเว็บไซต์
1.สร้าง hyperlink ตัวอย่าง
<html>
<body>
<p>
<a href="hyperlink2.html">
นี่คือลิงค์</a> ที่เปิดไปยังหน้าอื่นๆในเว็บไซต์นี้
</p>
<p>
<a href="http://www.ubuntu.com/">
นี่คือลิงค์</a> ที่เปิดไปเว็บไซต์ www.ubuntu.com
</p>
</body>
</html>
ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ
รูปแบบของ hyperlink ภายใน directory เดียวกัน
| <a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
รูปแบบของ hyperlink จาก directory ที่สูงกว่า
| <a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น
| <a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
ลิงค์กับเว็บภายนอก
รูปแบบของ hyperlink กับเว็บภายนอก
| <a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a> |
2.สร้าง hyperlink ด้วยรูปภาพ
<html>
<body>
<p>
รูปที่ต้องการใช้ของท่าน
<br>
<a href="url ของรูปภาพ">
<img border="0" src="logo.jpg" >
</a>
</p>
</body>
</html>
ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ
รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ
| <a href='หน้าที่ต้องการเชื่อมโยง'> |
3.สร้าง hyperlink ในหน้าเดียวกัน ตัวอย่าง
<html>
<body>
<p>
<a href="#C5">เปิดบทที่ 5</a>
</p>
<h2>บทที่ 1</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 2</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 3</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 4</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2> <a name ='C5'>บทที่ 5</a></h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 6</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 7</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 8</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 9</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
<h2>บทที่ 10</h2>
<p>เนื้อหาในบทนี้ เกี่ยวกับ ................ ........... ........</p>
</body>
</html>
ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>
รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน
สร้างจุดที่ต้องการจะลิงค์ไป
| <a name='ชื่อจุดลิงค์'> </a> |
สร้างลิงค์
| <a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </a> |
4.เปิด browser ใหม่เมื่อคลิกที่ลิงค์
<html>
<body>
<a href="url ของหน้าใหม่" target="_blank">ข้อความ</a>
<p>
การทำให้เปิด browser ใหม่เมื่อคลิกที่ลิงค์ ทำได้โดย
ใช้ target = "_blank" เท่านั้นเอง
</p>
</body>
</html>
การสร้าง link ให้เปิด browser ใหม่เราจะใช้ Attributes โดยพิมพ์ target="_blank" ใน a tag
เปิด browser ใหม่เมื่อคลิกที่ลิงค์
| <a href="เป้าหมาย" target="_blank">ตัวอักษรที่ใช้แสดง</a> |
