การเชื่อมโยงเว็บเพจ (Link)
การเชื่อมโยงเว็บเพจ หรือที่เรียกว่าลิงค์ (Link) ถือว่าเป็นคุณสมบัติที่สำคัญของภาษา HTML ดังจะเห็นได้จากเว็บเพจทัว่ ๆ ไป จุดเชื่อมโยงเว็บเพจอาจจะเป็นข้อความหรือรูปภาพก็ได้
การสร้างจุดเชื่อมโยงข้อความ (Text Link)
ในการเชื่อมโยงเวบเพจเราจะใช้แท็ก <A> โดยการกำหนดข้อความในเอกสาร HTML เป็นจุดเชื่อมโยงโดยมีรูปแบบดังนี้
<A HREF = “URL”> ข้อความ </A>
A HREF หมายถึง Hypertext Reference ส่วน URL (Uniform Resource Location) คือ รูปแบบมาตรฐานที่เป็นแหล่งที่ขอใช้บริการอินเทอร์เน็ต โดยเขียนอยู่ในรูปแบบดังนี้
โปรโตคอล://ชื่อโฮส.โดเมน/ชื่อไฟล์
ตัวอย่างเช่น
http://www.microsoft.com/ ftp://ftp.nectec.or.th/
http://www.north.rit.ac.th/index.html
ตัวอย่าง link1.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER>
<H2>สภาบันการศึกษา</H2></CENTER><BR>
<A HREF=”http://www.north.rit.ac.th/”>สถาบันเทคโนโลยีราชมงคล วิทยาเขตภาคพายัพ
</A><BR>
<A HREF=”http://www.ru.ac.th/”>มหาวิทยาลัยรามคำแหง</A><BR>
<A HREF=”http://www.cu.ac.th/”>จุฬาลงกรณ์มหาวิทยาลัย</A><BR>
<A HREF=”http://www.tu.ac.th/”>มหาวิทยาลัยธรรมศาสตร์</A><BR>
</BODY>
</HTML>
การสร้างจุดเชื่อมโยงกับรูปภาพ (Graphic Link)
เป็นการกำหนดให้รูปภาพเป็นจุดเชื่อมโยง โดยมีรูปแบบดังนี้
<A HREF = “URL”><IMG SRC = “ชื่อไฟล์”></A>
ตัวอย่าง link2.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER>
<H2>หนังสือพิมพ์ไทย</H2>
<P>
<A HREF=”http://www.komchadluek.com/”>
<IMG SRC=”komchadluek.gif” BORDER=”0″>
</A>
<P>
<A HREF=”http://www.thairath.com/”>
<IMG SRC=”thairath.gif” BORDER=”0″>
</A>
</CENTER>
</BODY>
</HTML>
การกำหนดสีให้กับจุดเชื่อมโยงเวบเพจ
การสร้างเวบเพจด้วยภาษา HTML นั้น จุดเชื่อมโยงข้อความที่เราสร้างขึ้นจะมีสีที่แตกต่างจากปกติพร้อมทั้งมีเส้นใต้บ่งบอกจุดเชื่อมโยงด้วย เราจะกำหนดสีของ Link ในเวบเพจจากแท็ก Body โดยมีรูปแบบดังนี้
<BODY Attributes = “ชื่อสีมาตราฐาน”>
หรือ
<BODY Attributes = “#RRGGBB”>
Attributes ที่ใช้ในการกำหนดสีมีด้วยกันดังนี้
– BGCOLOR กำหนดสีพื้นหลังให้กับเวบเพจ
– TEXT กำหนดสีตัวอักษรปกติ
– LINK กำหนดสีตัวอักษรที่เป็นจุดเชื่อมโยง
– VLINK (Visited Link) กำหนดสีตัวอักษรที่ทำการคลิกเพื่อไปยังเป้าหมายแล้ว
– ALINK (Active Link) กำหนดสีตัวอักษรที่กำลังคลิกไปยังเป้าหมาย
ตัวอย่าง link3.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY TEXT=”RED” LINK=”BLUE” VLINK=”GREEN” ALINK=”ORANGE”> <CENTER>
<H2>สภาบันการศึกษา</H2>
</CENTER><BR>
<A HREF=”http://www.north.rit.ac.th/”>สถาบันเทคโนโลยีราชมงคล วิทยาเขตภาคพายัพ
</A><BR>
<A HREF=”http://www.ru.ac.th/”>มหาวิทยาลัยรามคำแหง</A><BR>
<A HREF=”http://www.cu.ac.th/”>จุฬาลงกรณ์มหาวิทยาลัย</A><BR>
<A HREF=”http://www.tu.ac.th/”>มหาวิทยาลัยธรรมศาสตร์</A><BR>
</BODY>
</HTML>
การเชื่อมโยงระหว่างเว็บเพจ
ในการระบุตำแหน่งที่อยู่สำหรับลิงค์นั้น ถ้าอยู่ต่างเว็บไซต์กันจะต้องระบุไว้ให้ครบถ้วน ตามตัวอย่างที่ 22-24 ที่ผ่านมา แต่ถ้าเป็นไฟล์ HTML ในเว็บไซต์เดียวกันเราสามารถละชื่อเว็บไซต์ได้เหลือเพียงชื่อไฟล์ก็พอ
ตัวอย่าง link3.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER>
<H2>สภาบันการศึกษา</H2>
</CENTER><BR>
<A HREF=”head.html”>ตัวอย่างที่ 1</A><BR>
<A HREF=”paragraph.html”>ตัวอย่างที่ 4</A><BR>
<A HREF=” font_size.html”>ตัวอย่างที่ 8</A><BR>
<A HREF=” order_list.html”>ตัวอย่างที่ 15</A><BR>
<A HREF=” table3.html”>ตัวอย่างที่ 18</A><BR>
</BODY>
</HTML>