Course Content
วิชาคอมพิวเตอร์เพื่ออาชีพ 1 (ง30241) ชั้นมัธยมศึกษาปีที่ 4 แผนการเรียนศิลป์คำนวณ/สหศิลป์ ภาคเรียนที่ 1 ปีการศึกษา 2564
About Lesson

การเชื่อมโยงเว็บเพจ (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>