บทเรียนออนไลน์ การเขียนเว็บไซต์ด้วยภาษา HTML : ครูนุ่ม พิชชยานาฏ รีรักษ์ :

6.2 การสร้าง Link เชื่อมโยงในหน้าเว็บเพจเดียวกัน


จุดประสงค์

1. สามารถใช้คำสั่งภาษา HTML ทำ Link เชื่อมโยงภายในหน้าเว็บเพจเดียวกัน
2. สามารถทำการสร้างจุดเชื่อมโยง ภายในหน้าเว็บเพจเดียวกันได้

       การทำลิ้งค์เชื่อมโยงภายในหน้าเว็บเพจเดียวกันนี้ เหมาะสำหรับนำไปใช้กับหน้าเว็บเพจที่มีเนื้อหาขนาดยาว
(หลายบรรทัด) เพื่อให้นักเรียนสามารถคลิ๊กที่หัวข้อที่ต้องการอ่านได้ โดยไม่ต้องเสียเวลา เลื่อนหน้าเว็บเพจ
เพื่อค้นหา ตัวอย่างที่นำมาแสดงนี้ ยังไม่ถือว่าเป็นเว็บเพจที่มีขนาดยาว แต่นักเรียนสามารถนำไปประยุกต์ใช้
ได้ตามความเหมาะสม ...

ตัวอย่างโปรแกรม

<HTML>
<HEAD>
<TITLE> การทำลิ้งค์เชื่อมโยงภายในหน้าเว็บเพจเดียวกัน </TITLE>
</HEAD>
<BODY> กรุณาเลือกหัวข้อที่ต้องการ
1. <A HREF="#content">ข้อมูลทั่วไป</A><br>
2. <A HREF="#travel">ข้อมูลการเดินทาง</A><br>
3. <A HREF="#tour">สถานที่ท่องเที่ยวต่าง ๆ </A><p>
1.<A NAME="content">ข้อมูลทั่วไป</A><br>
            417 ปีแห่งการเป็นราชธานีเก่าแก่ของสยามประเทศ ประกอบด้วย   ราชวงศ์  คือ ราชวงศ์อู่ทอง ราชวงศ์สุพรรณภูมิ ราชวงศ์สุโขทัย ราชวงศ์ปราสาททองและราชวงศ์บ้านพลูหลวง  มีกษัตริย์ปกครองทั้งสิ้น 33 พระองค์ โดยมีปฐมกษัตริย์ คือ สมเด็จพระรามาธิบดีที่ 1 (พระเจ้าอู่ทอง)พระนครศรีอยุธยาจึงนับเป็นราชธานีที่มีอายุยาวนานที่สุดในประวัติศาสตร์ของชาติไทย  ตลอดระยะเวลา 417 ปี ที่กรุงศรีอยุธยาเป็นราชธานีแห่งราชอาณาจักรไทย มิได้เป็นเพียงช่วงแห่งความเจริญสูงสุดของชนชาติไทยเท่านั้น แต่ยังเป็นการสร้างสรรค์อารยธรรมของหมู่มวลมนุษยชาติซึ่งเป็นที่ประจักษ์แก่นานาอารยประเทศอีกด้วย แม้ว่ากรุงศรีอยุธยาจะถูกทำลายเสียหายจากสงครามกับประเทศเพื่อนบ้านหรือจากการบุกรุกขุดค้นของพวกเรากันเอง แต่สิ่งที่ปรากฏให้เห็นในปัจจุบันนี้ยังมีร่องรอยหลักฐานซึ่งแสดงอัจฉริยภาพและความสามารถอันยิ่งใหญ่ของบรรพบุรุษ แห่งราชอาณาจักรผู้อุทิศตนสร้างสรรค์ความเจริญรุ่งเรืองทางศิลปวัฒนธรรม และความมั่งคั่งไว้ให้แก่ผืนแผ่นดินไทย หรือแม้แต่ชาวโลกทั้งมวล จึงเป็นที่น่ายินดีว่า องค์การยูเนสโก้ โดยคณะกรรมการมรดกโลกได้มีมติรับนครประวัติศาสตร์
พระนครศรีอยุธยา ซึ่งมีอาณาเขตครอบคลุมอุทยานประวัติศาสตร์พระนครศรีอยุธยา และเป็นพื้นที่ที่ได้รับการจัดตั้งเป็น อุทยานประวัติศาสตร์มาตั้งแต่ปี พ.ศ. 2519 ไว้ในบัญชีมรดกโลก เมื่อวันที่ 13 ธันวาคม พ.ศ. 2534 ณ กรุงคาร์เทจ ประเทศตูนีเซีย พร้อมกับอุทยานประวัติศาสตร์สุโขทัย-อุทยานประวัติศาสตร์ศรีสัชนาลัย-อุทยานประวัติศาสตร์กำแพงเพชร โดยจะมีผลให้ได้รับความคุ้มครองตามอนุสัญญาที่ประเทศต่าง ๆได้ทำร่วมกัน จึงสมควรที่อนุชนรุ่นหลังจะได้ไปศึกษาเยี่ยมชมเมืองหลวงเก่าของเราแห่งนี้ี้<p>
2. <A NAME="travel">ข้อมูลการเดินทาง</A><br>
            จากกรุงเทพฯ สามารถเดินทางไปจังหวัดพระนครศรีอยุธยา ได้หลายเส้นทางดังนี้
1. ใช้ทางหลวงหมายเลข 1 (ถนนพหลโยธิน) ผ่านประตูน้ำพระอินทร์ แล้วแยกเข้าทางหลวงหมายเลข 32 เลี้ยวซ้ายไปตามทางหลวงหมายเลข 309 เข้าสู่จังหวัดพระนครศรีอยุธยา
2. ใช้ทางหลวงหมายเลข 304 (ถนนแจ้งวัฒนะ) หรือทางหลวงหมายเลข 302 (ถนนงามวงศ์วาน) เลี้ยวขวาเข้าทางหลวงหมายเลข 306 (ถนนติวานนท์) แล้วข้ามสะพานนนทบุรีหรือสะพานนวลฉวี ไปยังจังหวัดปทุมธานีต่อด้วยเส้นทาง ปทุมธานี-สามโคก-เสนา (ทางหลวงหมายเลข 3111) เลี้ยวแยกขวาที่อำเภอเสนา เข้าสู่ทางหลวงหมายเลข 3263 เข้าสู่จังหวัดพระนครศรีอยุธยา
3. ใช้เส้นทางกรุงเทพฯ-นนทบุรี-ปทุมธานี ทางหลวงหมายเลข 306 ถึงทางแยกสะพานปทุมธานี เลี้ยวเข้าสู่ทางหลวงหมายเลข 347 แล้วไปแยกเข้าทางหลวงหมายเลข 3309 ผ่านศูนย์ศิลปาชีพบางไทร อำเภอบางปะอิน เข้าสู่จังหวัดพระนครศรีอยุธยา.<p>
3. <A NAME="tour">สถานที่ท่องเที่ยวต่าง ๆ</A><br>
            วัดราชบูรณะ อยู่เชิงสะพานป่าถ่าน ตรงข้ามวัดมหาธาตุ สมเด็จพระบรมราชาธิราชที่ 2 (เจ้าสามพระยา) โปรดเกล้าฯให้สร้างขึ้นเมื่อ พ.ศ. 1967 ณ บริเวณที่ถวายพระเพลิงเจ้าอ้ายพระยากับเจ้ายี่พระยาซึ่งชนช้างกัน จนถึงแก่พิราลัยและโปรดเกล้าฯให้ก่อเจดีย์ 2 องค์บริเวณนั้น เมื่อคราวเสียกรุงวัดนี้และวัดมหาธาตุถูกไฟไหม้เสียหายมาก ซากที่เหลืออยู่แสดงว่าวิหารและส่วนต่างๆ ของวัดนี้ใหญ่โตมาก วิหารหลวงมีขนาดยาว 63 เมตร กว้าง 20 เมตร ด้านหน้ามีบันไดขึ้น 3 ทาง ที่ผนังวิหารเจาะเป็นบานหน้าต่าง ปัจจุบันยังปรากฏซากของเสาพระวิหารและฐานชุกชีพระประธานเหลืออยู่
พระปรางค์ประธาน ป็นศิลปะอยุธยาสมัยแรกซึ่งนิยมสร้างตามแบบสถาปัตยกรรมขอมที่ให้พระปรางค์เป็นประธานของวัด  ช่องคูหาของพระปรางค์มีพระพุทธรูปยืนปูนปั้นประดิษฐานช่องละ 1 องค์ องค์ปรางค์ประดับด้วยปูนปั้นรูปครุฑ ยักษ์ เทวดา นาค.<p> </BODY>
</HTML>


อธิบายคำสั่ง

ส่วนที่ 1 กำหนดข้อความลิ้งค์ (ต้นทาง)
 
<A
แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="#ชื่อหัวข้อ"
ชื่อหัวข้อหรือตำแหน่ง ของข้อความที่ต้องการลิ้งค์ (ต้องระบุ)
>
อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ
ข้อความที่ใช้แสดงว่านี่คือลิ้งค์
</A>
แท็กปิดท้ายข้อความลิ้งค์
ส่วนที่ 2 กำหนดชื่อหรือตำแหน่งของลิ้งค์ (ปลายทาง)
 
<A แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
NAME="ชื่อหัวข้อ" ชื่อหัวข้อหรือตำแหน่งปลายทางของลิ้งค์ (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ ข้อความที่ใช้แสดงเป็นหัวข้อและตำแหน่งปลายทาง
</A> แท็กปิดท้ายข้อความลิ้งค์