การเชื่อมโยงหลายมิติเป็นองค์ประกอบ HTML ที่ใช้บ่อยในเว็บไซต์เนื่องจากหน้าต่างๆของเว็บไซต์ประกอบด้วยไฮเปอร์ลิงก์และการเชื่อมโยงหลายมิติให้เสร็จสิ้นการกระโดดระหว่างหน้า การเชื่อมโยงหลายมิติเป็นวิธีการหลักของการมีปฏิสัมพันธ์ระหว่างผู้ชมและเซิร์ฟเวอร์และการเรียนรู้จะค่อยๆลึกลงไปในเทคโนโลยีที่ตามมา การเชื่อมโยงหลายมิติ
การเชื่อมโยงหลายมิติเป็นองค์ประกอบ HTML ที่ใช้บ่อยในเว็บไซต์เนื่องจากหน้าต่างๆของเว็บไซต์ประกอบด้วยไฮเปอร์ลิงก์และการเชื่อมโยงหลายมิติให้เสร็จสิ้นการกระโดดระหว่างหน้า การเชื่อมโยงหลายมิติเป็นวิธีการหลักของการมีปฏิสัมพันธ์ระหว่างผู้ชมและเซิร์ฟเวอร์และการเรียนรู้จะค่อยๆลึกลงไปในเทคโนโลยีที่ตามมา
- หมายเหตุ: รูปภาพสามารถใช้เป็นลิงค์และคุณจะได้เรียนรู้รายละเอียดรูปภาพในหน้าเว็บบทถัดไป
4.5.1 เพิ่มลิงก์ไปยังข้อความแท็กของไฮเปอร์ลิงก์คือ <a> </a> การเพิ่มไฮเปอร์ลิงก์ลงในข้อความนั้นคล้ายกับแท็กที่แก้ไขอื่น ๆ ข้อความหลังจากลิงค์มีสไตล์พิเศษของตัวเองเพื่อแยกความแตกต่างจากข้อความอื่น ๆ รูปแบบลิงค์เริ่มต้นคือข้อความสีน้ำเงินและขีดเส้นใต้ ไฮเปอร์ลิงก์ถูกเปลี่ยนเส้นทางไปยังหน้าอื่นและแท็ก <a> </a> มีแอตทริบิวต์ HREF ที่รับผิดชอบในการระบุที่อยู่ของหน้าใหม่ ที่อยู่ที่ระบุโดย HREF โดยทั่วไปใช้ที่อยู่สัมพัทธ์
- หมายเหตุ: ในการพัฒนาเว็บไซต์เอกสารมักใช้กับที่อยู่
สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่อ A.HTM และเขียนโค้ดตามที่แสดงในรหัส 4.18
รหัส 4.18 การตั้งค่าไฮเปอร์ลิงก์: A.HTM
<html>
<head>
<title> การตั้งค่าไฮเปอร์ลิงก์ </title>
</head>
<body>
<font size = 5>
<a href = ul_ol.htm> ป้อนหน้าการตั้งค่าของรายการ </a>
</font>
</body>
</html>
ป้อน http: //localhost/a.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.19
รูปที่ 4.19 การตั้งค่าไฮเปอร์ลิงก์
ผู้อ่านสามารถดูรูปแบบเริ่มต้นของการเชื่อมโยงหลายมิติในรูปที่ 4.19 เมื่อคุณคลิกลิงก์ในหน้าหน้าจะข้ามไปที่หน้า UL_OL.htm ในไดเรกทอรีเดียวกันนั่นคือหน้าการตั้งค่ารายการในส่วนก่อนหน้า เมื่อคุณคลิกปุ่มย้อนกลับของเบราว์เซอร์และกลับไปที่หน้า A.HTM สีของลิงค์ข้อความจะเปลี่ยนสีม่วงซึ่งบอกผู้ชมว่ามีการเยี่ยมชมลิงค์นี้แล้ว
4.5.2 แก้ไขวิธีการเปิดหน้าต่างของลิงค์โดยค่าเริ่มต้นวิธีการเชื่อมโยงหลายมิติเปิดหน้าใหม่คือการเหนือตัวเอง ขึ้นอยู่กับความต้องการที่แตกต่างกันของผู้ชมผู้อ่านสามารถระบุวิธีอื่น ๆ ในการเปิดหน้าต่างใหม่สำหรับไฮเปอร์ลิงก์ แท็กไฮเปอร์ลิงก์ให้แอตทริบิวต์เป้าหมายสำหรับการตั้งค่าที่มีค่าเช่น _self (การเขียนทับด้วยตนเอง, เริ่มต้น), _blank (สร้างหน้าต่างใหม่เพื่อเปิดหน้าใหม่), _top (เปิดในหน้าต่างเบราว์เซอร์ทั้งหมดโครงสร้างเฟรมทั้งหมดจะถูกละเว้น) และ _parent (เปิดในหน้าต่างก่อนหน้า)
- หมายเหตุ: ใช้วิธี _top และ _parent สำหรับหน้าเฟรมและมีคำอธิบายโดยละเอียดในบทต่อไปนี้
4.5.3 เพิ่มข้อความพรอมต์ลงในลิงค์ในหลายกรณีข้อความของการเชื่อมโยงหลายมิตินั้นไม่เพียงพอที่จะอธิบายเนื้อหาที่จะเชื่อมโยง แท็กไฮเปอร์ลิงก์ให้คุณลักษณะชื่อเรื่องเพื่ออำนวยความสะดวกให้กับผู้ชม ค่าของแอตทริบิวต์ชื่อเรื่องคือเนื้อหาพรอมต์ เนื้อหาพรอมต์จะปรากฏขึ้นเมื่อเคอร์เซอร์ของเบราว์เซอร์อยู่บนไฮเปอร์ลิงก์ซึ่งจะไม่ส่งผลกระทบต่อความเรียบร้อยของเค้าโครงหน้า แก้ไขไฟล์เว็บเพจ A.HTM และเขียนโค้ดตามที่แสดงในรหัส 4.19
รหัส 4.19 การตั้งค่าไฮเปอร์ลิงก์: A.HTM
<html>
<head>
<title> การตั้งค่าไฮเปอร์ลิงก์ </title>
</head>
<body>
<font size = 5>
<a href = ul_ol.htm target = _blank title = hello reader สิ่งที่คุณเห็นตอนนี้คือข้อความพรอมต์ คลิกลิงก์นี้เพื่อข้ามไปที่หน้า UL_OL.htm > ป้อนหน้าการตั้งค่าของรายการ </a>
</font>
</body>
</html>
ป้อน http: //localhost/a.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.20
รูปที่ 4.20 ข้อความพรอมต์ไฮเปอร์ลิงก์
4.5.4 สมอคืออะไรบทความบนเว็บจำนวนมากมีเนื้อหามากมายซึ่งนำไปสู่หน้ายาว ผู้ชมจำเป็นต้องลากแถบเลื่อนของเบราว์เซอร์อย่างต่อเนื่องเพื่อค้นหาเนื้อหาที่ต้องการ ฟังก์ชันสมอของไฮเปอร์ลิงก์สามารถแก้ปัญหานี้ได้ สมอเป็นสมอที่ดึงมาจากเรือ หลังจากที่จุดยึดถูกโยนลงเรือจะไม่ลอยไปหรือหลงทางได้ง่าย อันที่จริงแล้วจุดยึดจะถูกใช้เพื่อกระโดดในสถานที่ต่าง ๆ ภายในหน้าเดียวและในบางสถานที่พวกเขาเรียกว่าบุ๊กมาร์ก
แอตทริบิวต์ชื่อของแท็กไฮเปอร์ลิงก์ใช้เพื่อกำหนดชื่อของสมอ หนึ่งหน้าสามารถกำหนดจุดยึดหลายตัว ผ่านแอตทริบิวต์ HREF ของไฮเปอร์ลิงก์คุณสามารถข้ามไปยังจุดยึดที่สอดคล้องกันตามชื่อ สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory ชื่อ A_ANCHOR.htm และเขียนโค้ดตามที่แสดงในรหัส 4.20
รหัส 4.20 Hyperlink Anchor: a_anchor.htm
<html>
<head>
<title> การตั้งค่าไฮเปอร์ลิงก์ </title>
</head>
<body>
<font size = 5>
<a name = top> นี่คือจุดยึดที่ด้านบน </a> <br />
<a href =#1> ที่ 1 </a> <br />
<a href =#2> 2nd </a> <br />
<a href =#3> ครั้งที่ 3 </a> <br />
<a href =#4> คนที่ 4 </a> <br />
<a href =#5> 5th </a> <br />
<a href =#6> 6th </a> <br />
<H2> ประธานาธิบดีที่ประสบความสำเร็จของสหรัฐอเมริกา </h2>
●คนแรก (1789-1797) <a name = 1> นี่คือจุดยึดของคนแรก </a> <br />
ชื่อ: จอร์จวอชิงตัน <br />
จอร์จวอชิงตัน <br />
เกิดและเสียชีวิต: 1732-1799 <BR />
พรรคการเมือง :: สหพันธ์ <br />
●บุคคลที่สอง (1797-1801) <a name = 2> นี่คือจุดยึดของบุคคลที่สอง </a> <br />
ชื่อ: John Adams <br />
John Adams <br />
เกิดและเสียชีวิต: 1735-1826 <BR />
พรรคการเมือง :: สหพันธ์ <br />
●บุคคลที่สาม (1801-1809) <a name = 3> นี่คือจุดยึดของบุคคลที่สาม </a> <br />
ชื่อ: Thomas Jefferson <br />
โทมัสเจฟเฟอร์สัน <br />
เกิดและเสียชีวิต: 1743-1826 <BR />
พรรคการเมือง :: พรรคคอมมิวนิสต์ประชาชน <br />
●โพสต์ที่ 4 (1809-1817) <a name = 4> นี่คือจุดยึดของโพสต์ที่ 4 </a> <br />
ชื่อ: James Madison <br />
James Madison <br />
เกิดและเสียชีวิต: 1751-1836 <BR />
พรรคการเมือง: สาธารณรัฐประชาชนจีน <br />
●โพสต์ที่ 5 (1817-1825) <a name = 5> นี่คือจุดยึดของโพสต์ที่ 5 </a> <br />
ชื่อ: James Monroe <Br />
James Monroe <br />
เกิดและเสียชีวิต: 1758-1831 <BR />
พรรคการเมือง: สาธารณรัฐประชาชนจีน <br />
</font>
</body>
</html> l>
ก่อนการทดสอบผู้อ่านสามารถดูได้จากรหัส 4.20 ว่าแท็ก <a> </a> ใช้เพื่อกำหนดจุดยึดและชื่อของสมอจะถูกกำหนดด้วยแอตทริบิวต์ชื่อ (ชื่อไม่มีข้อ จำกัด และสามารถปรับแต่งได้) ลิงค์ไปค้นหาจุดยึดใช้แอตทริบิวต์ HREF เพื่อระบุชื่อที่เกี่ยวข้องและควรเพิ่มสัญลักษณ์ # ก่อนชื่อ ป้อน http: //localhost/a_anchor.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.21
รูปที่ 4.21 Hyperlink Anchor
เมื่อผู้ชมคลิกที่ไฮเปอร์ลิงก์หน้าจะเลื่อนไปยังตำแหน่งจุดยึดของชื่อค่าแอตทริบิวต์ HREF โดยอัตโนมัติ
- หมายเหตุ: ฉลากที่กำหนดจุดยึดไม่จำเป็นต้องมีเนื้อหาเฉพาะ แต่เป็นเพียงการวางตำแหน่ง
4.5.5 อีเมล, FTP และ Telnet Linksการเชื่อมโยงหลายมิติสามารถขยายฟังก์ชั่นของหน้าเว็บต่อไปและสิ่งที่ใช้กันทั่วไปคืออีเมลการเชื่อมต่อ FTP และ Telnet ในการทำฟังก์ชั่นข้างต้นให้สมบูรณ์คุณจะต้องปรับเปลี่ยนค่า HREF ของไฮเปอร์ลิงก์เท่านั้น รูปแบบสำหรับการส่งอีเมลคือ:
<a href = mailto: ที่อยู่อีเมล> ส่งอีเมลถึงฉัน </a>
ที่อยู่อีเมลจะต้องเสร็จสมบูรณ์เช่น [email protected]
ดังที่ได้กล่าวไว้ก่อนหน้านี้โปรโตคอล HTTP ใช้ในการเรียกดูหน้าเว็บในขณะที่เซิร์ฟเวอร์ FTP เชื่อมต่อด้วยโปรโตคอล FTP รูปแบบลิงค์มีดังนี้:
<a href = ftp: // ที่อยู่ IP เซิร์ฟเวอร์หรือชื่อโดเมน> ข้อความที่เชื่อมโยง </a>
ความแตกต่างระหว่างลิงก์เซิร์ฟเวอร์ FTP และลิงค์เว็บคือโปรโตคอลที่ใช้นั้นแตกต่างกัน FTP ต้องการการอนุญาตให้เข้าสู่ระบบจากผู้ดูแลระบบเซิร์ฟเวอร์ อย่างไรก็ตามเซิร์ฟเวอร์ FTP บางตัวสามารถเข้าถึงได้โดยไม่ระบุชื่อจึงได้รับไฟล์สาธารณะบางไฟล์ ในทำนองเดียวกันเซิร์ฟเวอร์ที่เชื่อมต่อกับโปรโตคอล Telnet ยังใช้วิธีการที่คล้ายกันรูปแบบมีดังนี้:
<a href = telnet: // ที่อยู่ IP เซิร์ฟเวอร์หรือชื่อโดเมน> ข้อความที่เชื่อมโยง </a>
โปรโตคอล Telnet มีน้อยมากและส่วนใหญ่ใช้กับโปรโตคอล HTTP สร้างไฟล์หน้าเว็บใน D:/ Web/ Directory, ชื่อ Mail.htm และเขียนโค้ดตามที่แสดงในรหัส 4.21
รหัส 4.21 การตั้งค่าอื่น ๆ สำหรับไฮเปอร์ลิงก์: mail.htm
<html>
<head>
<title> การตั้งค่าอื่น ๆ สำหรับไฮเปอร์ลิงก์ </title>
</head>
<body>
<font size = 5>
<a href = mailto: [email protected] title = Hello Readers คลิกที่นี่เพื่อส่งอีเมล > ส่งอีเมลถึงฉัน </a> <br />
<a href = ftp: //101.22.25.11 ชื่อเรื่อง = ผู้อ่านสวัสดียินดีต้อนรับสู่เซิร์ฟเวอร์ FTP > เชื่อมต่อเซิร์ฟเวอร์ ftp </a> <br />
<a href = telnet: //101.22.25.11 ชื่อเรื่อง = ผู้อ่านสวัสดียินดีต้อนรับสู่เซิร์ฟเวอร์ Telnet > เชื่อมต่อเซิร์ฟเวอร์ Telnet </a>
</font>
</body>
</html> s
ป้อน http: //localhost/mail.htm ในแถบที่อยู่เบราว์เซอร์และเอฟเฟกต์การเรียกดูจะแสดงในรูปที่ 4.22
รูปที่ 4.22 การตั้งค่าอื่น ๆ สำหรับการเชื่อมโยงหลายมิติ