เขียน web ตอนที่ 3
สมาชิกเลขที่14 | 30 ก.ย. 53
4K views
คำสั่งในการทำ Hyperlink
หลังจากที่เรารู้เกี่ยวกับ โครงสร้าง HTML และการจัดรูปแบบตัวอักษร ในตอนที่ 3 เรามารู้เกี่ยวกับการทำ hypeerlink กัน
hyperlink คืออะไร hyperlink พูดอย่างง่ายๆ คือ การทำให้ ข้อความหรือรูปภาพ ของเราสามารถเชื่อมโยงไปยัง เอกสารหรือ File อื่นๆได้
ตัวอย่างที่ 1 การใช้คำสั่งในการสร้าง Hyperink
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 3.1</TITLE>
</HEAD>
<BODY>
<a href = "http://www.google.com" target = "_blank">เปิด web site google</a>
</BODY>
</HTML>
ในตัวอย่างที่ 1 จะเป็นการเปิด web google ในหน้าต่างใหม่ขึ้นมา
คำอธิบายคำสั่ง
<a href = "http://www.google.com" target = "_blank">เปิด web site google</a>
<a ......>ข้อความหรือรูปภาพ</a> คือคำสั่งในการทำ Hyperlink
เช่น
href = "http://www.google.com" คือ การบอกว่า เราต้องการให้ เชื่อมโยงหรือให้ link ไปเปิดที่ web site หรือ เปิด หน้า page ใด
target = เป็นการบอกให้เปิดหน้า page ใหม่ แบบใด โดยสามารถกำหนดได้ดังนี้
คือ _blank = เปิดหน้าต่างใหม่
_self = เปิดในหน้าเดิม
_top = เปิดในหน้าเอกสารบนสุด
_parent = เปิดในหน้าเอกสารในลักษณะของ frame
(_top และ _parent จะอธิบายเพิ่มเติมในตอนถัดๆไป ในเรื่องของ frame นะครับ)
คราวนี้ ลองมาดูในตัวอย่างที่ 2 กันบ้าง ในตัวอย่างนี้ จะเป็นการเปิดหน้า page ที่เราสร้างขึ้นมาเองบ้าง
ตัวอย่างที่ 2 การใช้คำสั่งในการสร้าง Hyperink
ในตัวอย่างนี้เราต้องสร้าง file html ขึ้นมา 2 file วิธีการสร้างยังจำกันได้มั้ยครับถ้าไม่ได้ ย้อนกลับไปดู
เขียน web ตอนที่ 1
โดย file แรก ผมจะตั้งชื่อ ว่า example01.html
file ที่ 2 ตั้งชื่อว่า example02.html
ดังนี้ครับ
File example01.html
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 3.2 </TITLE>
</HEAD>
<BODY>
File Example01 ครับ
<a href = "example02.html" target = "_self">เปิด Example02</a>
</BODY>
</HTML>
File example02.html
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 3.2 </TITLE>
</HEAD>
<BODY>
File Example02 ครับ
<a href = "example01.html" target = "_self">กลับไปหน้า Example01</a>
</BODY>
</HTML>
จากตัวอย่างถ้าเรา Click ที่ example01 ก็จะ ไปเปิดหน้า example02 ในหน้าต่างเดิมให้ครับ
และจาก คุณสมบัติในการสามารถเชื่อมโยงเอกสารหรือเปิดหน้า web ต่างๆ ได้เราจึงเรียกเอกสารลักษณะนี้ว่า hypertext markup language หรือ HTML นี่เอง
หลังจากที่เรารู้เกี่ยวกับ โครงสร้าง HTML และการจัดรูปแบบตัวอักษร ในตอนที่ 3 เรามารู้เกี่ยวกับการทำ hypeerlink กัน
hyperlink คืออะไร hyperlink พูดอย่างง่ายๆ คือ การทำให้ ข้อความหรือรูปภาพ ของเราสามารถเชื่อมโยงไปยัง เอกสารหรือ File อื่นๆได้
ตัวอย่างที่ 1 การใช้คำสั่งในการสร้าง Hyperink
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 3.1</TITLE>
</HEAD>
<BODY>
<a href = "http://www.google.com" target = "_blank">เปิด web site google</a>
</BODY>
</HTML>
ในตัวอย่างที่ 1 จะเป็นการเปิด web google ในหน้าต่างใหม่ขึ้นมา
คำอธิบายคำสั่ง
<a href = "http://www.google.com" target = "_blank">เปิด web site google</a>
<a ......>ข้อความหรือรูปภาพ</a> คือคำสั่งในการทำ Hyperlink
เช่น
href = "http://www.google.com" คือ การบอกว่า เราต้องการให้ เชื่อมโยงหรือให้ link ไปเปิดที่ web site หรือ เปิด หน้า page ใด
target = เป็นการบอกให้เปิดหน้า page ใหม่ แบบใด โดยสามารถกำหนดได้ดังนี้
คือ _blank = เปิดหน้าต่างใหม่
_self = เปิดในหน้าเดิม
_top = เปิดในหน้าเอกสารบนสุด
_parent = เปิดในหน้าเอกสารในลักษณะของ frame
(_top และ _parent จะอธิบายเพิ่มเติมในตอนถัดๆไป ในเรื่องของ frame นะครับ)
คราวนี้ ลองมาดูในตัวอย่างที่ 2 กันบ้าง ในตัวอย่างนี้ จะเป็นการเปิดหน้า page ที่เราสร้างขึ้นมาเองบ้าง
ตัวอย่างที่ 2 การใช้คำสั่งในการสร้าง Hyperink
ในตัวอย่างนี้เราต้องสร้าง file html ขึ้นมา 2 file วิธีการสร้างยังจำกันได้มั้ยครับถ้าไม่ได้ ย้อนกลับไปดู
เขียน web ตอนที่ 1
โดย file แรก ผมจะตั้งชื่อ ว่า example01.html
file ที่ 2 ตั้งชื่อว่า example02.html
ดังนี้ครับ
File example01.html
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 3.2 </TITLE>
</HEAD>
<BODY>
File Example01 ครับ
<a href = "example02.html" target = "_self">เปิด Example02</a>
</BODY>
</HTML>
File example02.html
<HTML>
<HEAD>
<TITLE> บทเรียนที่ 3.2 </TITLE>
</HEAD>
<BODY>
File Example02 ครับ
<a href = "example01.html" target = "_self">กลับไปหน้า Example01</a>
</BODY>
</HTML>
จากตัวอย่างถ้าเรา Click ที่ example01 ก็จะ ไปเปิดหน้า example02 ในหน้าต่างเดิมให้ครับ
และจาก คุณสมบัติในการสามารถเชื่อมโยงเอกสารหรือเปิดหน้า web ต่างๆ ได้เราจึงเรียกเอกสารลักษณะนี้ว่า hypertext markup language หรือ HTML นี่เอง
Share this
