“ไฮเปอร์ลิงก์ใน HTML” เป็นบทเรียนที่ห้าของหนังสือเรียน HTML บทเรียนนี้จะเน้นไปที่การใช้ไฮเปอร์เท็กซ์ลิงก์ เอกสารเว็บใดๆ ก็ตามจะขึ้นอยู่กับลิงก์ไฮเปอร์เท็กซ์ ดังนั้นเว็บมาสเตอร์ทุกคนจะต้องสามารถทำงานกับลิงก์ได้

กฎการใช้ไฮเปอร์เท็กซ์ลิงก์

ไฮเปอร์ลิงก์ในรูปแบบ HTMLจำเป็นสำหรับการเชื่อมต่อเอกสารต่าง ๆ ทั้งภายในไซต์เดียวและทั่วทั้งอินเทอร์เน็ต ในการสร้างลิงก์ไฮเปอร์เท็กซ์ (ไฮเปอร์ลิงก์) จะใช้คำอธิบาย :

คุณลักษณะเป้าหมายของแท็ก กำหนดวิธีการเปิดหน้าใหม่และรับค่าต่อไปนี้:

• ลิงก์ – กำหนดลักษณะที่ปรากฏของลิงก์ที่ยังไม่ได้เข้าชม
• Alink – กำหนดลักษณะที่ปรากฏของลิงก์ที่เข้าชมแล้ว
• Vlink – กำหนดลักษณะที่ปรากฏของลิงก์ที่เลือก

ในบทถัดไป เราจะพูดถึงการทำงานกับกราฟิกในรูปแบบ HTML: เราจะได้เรียนรู้วิธีแทรกรูปภาพและปรับแต่งรูปภาพ รูปร่างฯลฯ

ไฮเปอร์ลิงก์สามารถเชื่อมโยงเพจภายในไซต์เดียวหรือชี้ไปยังหน้าใดก็ได้บนอินเทอร์เน็ต เมื่อสร้างลิงก์ไปยังหน้าของบุคคลอื่น คุณควรใช้ที่อยู่ที่แน่นอนของหน้าเสมอ (http://www.site.com/page.html) หากคุณกำลังสร้างลิงก์ไปยังเพจภายในไซต์ ขอแนะนำให้ใช้ URL ที่เกี่ยวข้อง (page.html, Catalog/page.html) เมื่อสร้างไฮเปอร์ลิงก์แบบกราฟิก โปรดทราบว่าผู้ใช้บางรายอาจไม่สามารถเข้าถึงกราฟิกได้ ดังนั้นอย่าลืมใส่องค์ประกอบข้อความที่เหมาะสมด้วย

ตัวอย่าง:

ไฮเปอร์ลิงก์ภายในหน้า html

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

ตัวอย่าง:

ไฮเปอร์ลิงก์ทางไปรษณีย์

ตัวอย่าง:

การเปิดหน้า html ในหน้าต่างใหม่

เมื่อใช้แอตทริบิวต์ TARGET คุณสามารถโหลดเพจในหน้าต่างเบราว์เซอร์ใหม่ได้ คุณลักษณะนี้มีวัตถุประสงค์เพื่อระบุชื่อของหน้าต่าง ชื่อหน้าต่างใช้เพื่อวัตถุประสงค์อย่างเป็นทางการ หากต้องการเปิดหน้าในหน้าต่างใหม่ คุณต้องใช้ค่าคงที่ _blank

ตัวอย่าง:

สีข้อความไฮเปอร์ลิงก์

คุณลักษณะ LINK, ALINK, VLINK ระบุสีแบบอักษรของไฮเปอร์ลิงก์

แอตทริบิวต์ LINK ใช้เพื่อเน้นไฮเปอร์ลิงก์ที่ผู้ใช้ยังไม่ได้เข้าชม

ขั้นตอนการติดตามไฮเปอร์ลิงก์

เบราว์เซอร์บางตัวอาจรองรับความสามารถในการนำทางไฮเปอร์ลิงก์โดยใช้ปุ่ม Tab ในกรณีนี้ เบราว์เซอร์จะเน้นไฮเปอร์ลิงก์ตามลำดับที่ปรากฏในข้อความของหน้าโดยค่าเริ่มต้น คุณสามารถเปลี่ยนลำดับการเปลี่ยนแปลงได้โดยใช้แอตทริบิวต์แท็ก TABINDEX - หากต้องการรวมไฮเปอร์ลิงก์ไว้ในรายการที่อธิบายลำดับการนำทางใหม่ คุณต้องกำหนดแอตทริบิวต์ TABINDEX เป็นจำนวนเต็มบวกในช่วงตั้งแต่ 1 ถึง 32767 หากต้องการแยกไฮเปอร์ลิงก์ออกจากรายการ คุณต้องกำหนดหมายเลขลบให้กับแอตทริบิวต์ เมื่อผู้ใช้กดปุ่ม TAB เคอร์เซอร์จะย้ายไปยังไฮเปอร์ลิงก์ที่มีค่าดัชนีบวกน้อยที่สุด หากไฮเปอร์ลิงก์หลายรายการถูกกำหนดให้เป็นค่าดัชนีเดียวกัน รายการแรกที่เลือกจะเป็นรายการที่ปรากฏอยู่สูงกว่าในข้อความหน้า

อย่างที่คุณเข้าใจ ในตัวอย่างนี้ ฉันเขียนไว้ว่าเมื่อคุณคลิกที่ข้อความ “ เครื่องมือค้นหา Yandex" บุคคลนั้นจะถูกส่งไปยังที่อยู่ที่เขียนด้วยค่าของแอตทริบิวต์ href

ฉันคิดว่าหลายท่านคงรู้ว่ามีลิงค์ภายในและภายนอก ลิงก์ภายในดำเนินการภายในไดเร็กทอรีเดียว นั่นคือ ไซต์และลิงก์ภายนอกนำไปสู่แหล่งข้อมูลของบุคคลที่สาม และตอนนี้ฉันจะแสดงให้คุณเห็นวิธีการทำทั้งสองอย่าง

การเปลี่ยนแปลงภายใน

ไฟล์อยู่ในโฟลเดอร์เดียวกัน

แต่การเปลี่ยนแปลงดังกล่าวจะได้ผลหากไฟล์ที่คุณกำลังลิงก์ไปนั้นอยู่ในโฟลเดอร์เดียวกันกับไฟล์ที่คุณกำลังวางลิงก์ สำหรับตัวเลือกอื่นๆ ทุกอย่างจะแตกต่างกันเล็กน้อย

ไฟล์ในโฟลเดอร์อื่น

1. เปิดไฟล์ pushkin.html ใน Notepad++
2. ตอนนี้ค้นหาคำว่ารูปถ่ายแล้วห่อไว้ในแท็ก<href> .
3. ตอนนี้ให้ความสนใจ! ในค่าแอตทริบิวต์ เราระบุเส้นทางที่เกี่ยวข้องกับไฟล์ที่กำลังแก้ไข นั่นคือ pushkin.html เอง คุณควรจะได้สิ่งนี้:

เราทำอะไรไปแล้วบ้าง? และเราทำสิ่งต่อไปนี้: เนื่องจากเส้นทางไปยังภาพถ่ายอยู่ในโฟลเดอร์ img แยกต่างหากซึ่งอยู่ในโฟลเดอร์เดียวกับไฟล์ pushkin.html ดังนั้นในค่าแอตทริบิวต์เราต้องเขียนชื่อของโฟลเดอร์ก่อนและ จากนั้นใช้เครื่องหมายทับ (/) ชื่อเต็มของเอกสาร (ในกรณีของเราคือรูปถ่าย)

ตอนนี้ให้บันทึกและเรียกใช้ไฟล์ pushkin.html ในเบราว์เซอร์ของคุณ คุณจะเห็นว่าคำว่า "ภาพถ่าย" ถูกเน้นด้วยสีน้ำเงินและสามารถคลิกได้ ซึ่งหมายความว่าเมื่อคลิกที่ลิงก์นี้ เราจะไปที่ไฟล์ fofo.jpg ซึ่งอยู่ในโฟลเดอร์ img

แล้วยังไงล่ะ? ทุกอย่างชัดเจนหรือไม่? หากมีอะไรเกิดขึ้น อย่าลังเลที่จะถาม

การเปลี่ยนแปลงภายนอก

และแน่นอนว่าเราไม่สามารถพลาดที่จะพูดถึงลิงก์ภายนอกได้หลังจากคลิกแล้วเราจะถูกนำไปยังไซต์อื่นโดยสิ้นเชิง แต่ไม่มีอะไรซับซ้อนที่นี่ ประเด็นทั้งหมดก็คือ คุณใส่ที่อยู่แบบเต็มของเว็บไซต์หรือหน้าเว็บลงในค่า href ฉันแสดงตัวอย่างกับยานเดกซ์ด้านบน แต่นี่เป็นอีกตัวอย่างหนึ่ง:

ฉันจะเรียนเพื่อเป็นผู้เชี่ยวชาญด้านโครงการเพื่อสังคม

ที่นี่เราไปถึงหน้าเฉพาะของไซต์ใดไซต์หนึ่ง

เปิดในหน้าต่างใหม่

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

แอตทริบิวต์เป้าหมายที่มีค่า “_blank” จะช่วยเราในเรื่องนี้ ไม่มีอะไรซับซ้อนที่นี่ คุณเพียงแค่ต้องแทรกสิ่งนี้ลงในแท็กเปิด หลังค่าแอตทริบิวต์ href ลองใช้ข้อความที่ตัดตอนมาจากไฟล์ lukomorye.html ซึ่งเราได้สร้างลิงก์ไปยังหน้า pushkin.html ตอนนี้เราจะเขียนคุณลักษณะนี้เท่านั้น มันควรมีลักษณะเช่นนี้:

จากบทกวี Ruslan และ Lyudmila (ผู้แต่ง - A.S. Pushkin)

ทุกอย่างชัดเจนที่นี่ ตอนนี้เมื่อคุณคลิกที่เนื้อหา หน้าที่ต้องการเปิดในหน้าต่างใหม่ สิ่งนี้จำเป็นมาก เพราะถ้าคุณไม่ลงทะเบียน ผู้ใช้ก็จะออกจากเพจของคุณไป ดังนั้นไม่ว่าในกรณีใดเขาจะยังคงอยู่เฉพาะในกรณีที่เขาไม่ได้ปิดโดยเฉพาะ พยายามทำทุกอย่างด้วยตัวเองเพียงแค่ทำให้ทุกอย่างสวยงามด้วยมือของคุณเอง ไม่จำเป็นต้องคัดลอกและวาง

บางอย่างเช่นนี้ ดูเหมือนว่าฉันได้บอกคุณถึงสิ่งที่สำคัญที่สุดทั้งหมดแล้ว แต่ถ้าคุณต้องการก้าวไปในทิศทางนี้และเรียนรู้ HTML และ CSS เพื่อสร้างเว็บไซต์ บล็อก และแม้แต่ร้านค้าออนไลน์ระดับมืออาชีพ อย่าลืมลองดู หลักสูตรวิดีโอที่ยอดเยี่ยมในหัวข้อนี้ บทเรียนนี้ยอดเยี่ยมมากและได้รับการบอกเล่าสำหรับผู้ที่ยังไม่ค่อยคุ้นเคยกับการสร้างเว็บไซต์

นี่เป็นการสรุปบทเรียนของเราสำหรับวันนี้ ฉันหวังว่าคุณจะชอบบทความของฉันและจะดีใจถ้าคุณเป็นผู้อ่านประจำของฉัน ดังนั้นอย่าลืมสมัครรับข้อมูลอัปเดตบล็อกของฉันเพื่อให้คุณไม่พลาดสิ่งที่น่าสนใจ ฉันขอให้คุณประสบความสำเร็จในทุกความพยายามของคุณ ลาก่อน!

ขอแสดงความนับถือ มิทรี คอสติน

ในบทช่วยสอนนี้ เราจะได้เรียนรู้วิธีสร้างไฮเปอร์ลิงก์ หากไม่มีพวกเขา ก็ไม่มีเว็บไซต์เต็มรูปแบบเกิดขึ้นได้ ไฮเปอร์ลิงก์คือลิงก์ที่เมื่อคลิกแล้ว จะนำเบราว์เซอร์ไปยังหน้าอื่นบนอินเทอร์เน็ต หรือไปยังไซต์อื่น หรือไปยังตำแหน่งเฉพาะในเอกสาร โดยทั่วไป ไม่ว่าเราจะกำหนดไว้ที่ใด สำหรับบทช่วยสอนนี้ คุณต้องเตรียมงานบางอย่าง: สร้าง หน้าใหม่ด้วยชื่อ Third_page.html

สร้างรายการเช่นนี้บนหน้า:

• หน้าแรก
• หน้าแรก
• หน้าสอง

รหัสมีลักษณะดังนี้:

• หน้าแรก
• หน้าสอง
• หน้าสาม

ตอนนี้เราจะสร้างเมนูจากรายการนี้ ซึ่งแต่ละบรรทัดจะนำไปสู่หน้าอื่น ซึ่งสามารถทำได้โดยใช้ไฮเปอร์ลิงก์ แท็กไฮเปอร์ลิงก์มีลักษณะดังนี้:

ที่นี่ภายในแท็กองค์ประกอบรายการ (

รหัสจะมีลักษณะดังนี้:

เปิดเพจในเบราว์เซอร์ของคุณ คลิกลิงก์ ดูวิธีการทำงานของการนำทางเพจ หากลิงก์ของคุณไม่เปิดขึ้น ให้ทำตามขั้นตอนเหล่านี้:

• ตรวจสอบว่าไฟล์ทั้งหมด (index.html, Second_page.html) อยู่ในโฟลเดอร์เดียวกันกับ Third_page.html
• ลบคุกกี้ในเบราว์เซอร์ของคุณ
• รีสตาร์ทเบราว์เซอร์ของคุณ จากนั้นโหลด Third_page.html อีกครั้ง

ดังนั้นเราจึงได้เรียนรู้วิธีสร้างลิงก์ที่ง่ายที่สุดโดยที่ไม่สามารถจินตนาการถึงหน้าเดียวบนอินเทอร์เน็ตได้ ด้วย Dreamweaver คุณสามารถสร้างไฮเปอร์ลิงก์ได้เร็วและง่ายขึ้น

สร้างหน้าใหม่ชื่อ: Third_page.html- สร้างรายการ คล้ายกับสิ่งนั้นซึ่งเราได้อธิบายไว้เมื่อทำงานในแผ่นจดบันทึก

Dreamweaver ใช้หน้าต่างเพื่อสร้างไฮเปอร์ลิงก์ ลิงค์(หมายเลข 1) เลือกข้อความ: หน้าแรก ในแท็บ ไฟล์(หมายเลข 2) คลิกซ้ายที่ไฟล์ ดัชนี.html(หมายเลข 3) และโดยไม่ต้องปล่อยปุ่ม ให้ลากไปในช่องลิงก์ ข้อความที่เลือกในช่องการออกแบบของคุณควรเปลี่ยนแปลง: สีแบบอักษรจะเปลี่ยนเป็นสีน้ำเงินและขีดเส้นใต้จะปรากฏขึ้น ดังนั้นเราจึงสร้างไฮเปอร์ลิงก์แรกของเรา

เลือกข้อความ "หน้าสาม" ในช่อง Link ให้ป้อน: http://www.mail.ru/

ดูหน้าในเบราว์เซอร์ของคุณ

ในบทนี้ เราได้เรียนรู้วิธีสร้างไฮเปอร์ลิงก์พื้นฐาน ทักษะเหล่านี้จะช่วยเราในการสร้างเว็บไซต์ที่สวยงามและใช้งานง่ายในอนาคต ในบทถัดไป เราจะเรียนรู้วิธีสร้างตาราง

ไฮเปอร์ลิงก์เป็นตัวบ่งชี้ให้เบราว์เซอร์ทราบว่าควรเข้าถึงวัตถุใดภายในหรือภายนอกเอกสาร HTML การใช้ไฮเปอร์ลิงก์ ผู้ใช้สามารถย้ายจากหน้าหนึ่งไปอีกหน้าหนึ่ง ดาวน์โหลดไฟล์ ฯลฯ ส่วนของข้อความหรือรูปภาพ (ไฟล์กราฟิก) สามารถออกแบบให้เป็นไฮเปอร์ลิงก์ได้ เมื่อหน้าเว็บแสดงในหน้าต่างเบราว์เซอร์ ลิงก์ข้อความมักจะถูกเน้นด้วยสีน้ำเงินและขีดเส้นใต้ อย่างไรก็ตาม นี่ไม่ใช่กรณีเสมอไป หากต้องการไปยังตำแหน่งที่ลิงก์ชี้ไป ผู้ใช้เพียงแค่คลิกข้อความเท่านั้น

ในการสร้างไฮเปอร์ลิงก์ คุณต้องใช้แท็ก และการกำหนดแท็ก คุณลักษณะ HREF- ค่าของมันจะต้องเป็น URL ที่ลิงค์ชี้ไป ข้อความลิงก์อยู่ระหว่างแท็ก และ.

หากหน้าเว็บที่มีจุดลิงก์อยู่ในไซต์อื่น ค่าแอตทริบิวต์ก็จะเป็นค่านั้น HREFต้องเป็น URL แบบเต็มรวมถึงชื่อโปรโตคอล ลิงก์ดังกล่าวเรียกว่าลิงก์ภายนอก หากไฮเปอร์ลิงก์ชี้ไปที่หน้าอื่นของไซต์เดียวกันการค้นหาเอกสารก็เพียงพอที่จะระบุเฉพาะเส้นทางที่เกี่ยวข้อง ลิงค์ดังกล่าวเรียกว่าลิงค์ภายใน

ไฮเปอร์ลิงก์สามารถชี้ไปยังตำแหน่งเฉพาะภายในเพจได้ หากฝังแท็ก Anchor ไว้ที่นั่นในครั้งแรก แท็กยังใช้เพื่อกำหนดจุดยึด และแต่แทนที่จะเป็นแอตทริบิวต์ HREFตั้งค่าแอตทริบิวต์ ชื่อซึ่งค่าจะต้องเป็นชื่อของสมอ สามารถประกอบด้วยตัวอักษรและตัวเลข แต่ต้องไม่มีการเว้นวรรค หากมีหลายป้ายกำกับในหนึ่งหน้า ป้ายกำกับทั้งหมดก็ควรมีชื่อต่างกัน

หากต้องการสร้างลิงก์ไปยังจุดยึดที่ติดตั้งไว้ คุณต้องมีในแท็ก ใส่ชื่อไว้ที่ส่วนท้ายของ URL หลังชื่อเอกสาร คั่นด้วย # - เครื่องหมาย # หมายความว่าจะตามด้วยชื่อของแท็ก ไม่ใช่ชื่อไฟล์

หากอยู่ในคุณลักษณะ HREFตั้งค่าที่อยู่ อีเมลด้วยคำว่า mailto: ข้างหน้า จากนั้นหลังจากเลือกลิงก์ดังกล่าวแล้ว คุณสามารถส่งข้อความไปที่ช่องนั้นได้ “เพื่อใคร”ที่อยู่นี้จะถูกบันทึกไว้

ตัวอย่างด้านล่างนี้กล่าวถึงการใช้ไฮเปอร์ลิงก์ประเภทต่างๆ

เอกสาร HTML ที่ใช้ไฮเปอร์ลิงก์และจุดยึด:

โปรแกรมมาตรฐานเวอร์ชันใหม่สำหรับ ระบบปฏิบัติการ Windows และไดรเวอร์สามารถพบได้บนเว็บไซต์ของบริษัท ไมโครซอฟต์

และตอนนี้คุณสามารถไปที่หน้าหลักของเว็บไซต์ได้แล้ว

คุณสามารถดูวิธีติดต่อฉันได้ในตอนท้ายของหน้านี้

ในเอกสารข้อความนี้

[ป้องกันอีเมล]

นี่คือลักษณะของเอกสาร HTML หลังจากที่เบราว์เซอร์เล่นแล้ว:

โปรแกรมมาตรฐานเวอร์ชันใหม่สำหรับห้องผ่าตัด ระบบวินโดวส์ไดรเวอร์สามารถพบได้บนเว็บไซต์ Microsoft

คุณสามารถใช้วัสดุที่โพสต์ในเอกสารข้อความนี้ได้

ในตัวอย่างนี้ คำว่า "Microsoft" จะอยู่ในแท็กไฮเปอร์ลิงก์ภายนอกและข้อความ "หน้าแรกของเว็บไซต์"- ในแท็กลิงก์ภายใน ข้อความ "ที่ส่วนท้ายของหน้านี้"วางไว้ในแท็กลิงก์จุดยึด และ "ในเอกสารข้อความนี้"- ในแท็กไฮเปอร์ลิงก์พร้อมแอตทริบิวต์ HREFซึ่งเราระบุการเชื่อมต่อไม่ใช่กับหน้าเว็บ แต่ด้วย เอกสารข้อความซึ่งบันทึกไว้ในโฟลเดอร์เดียวกันกับเอกสาร HTML ปัจจุบัน ข้อความ " [ป้องกันอีเมล] " อยู่ในแท็กที่อธิบายป้าย Anchor และในแอตทริบิวต์ HREFที่อยู่อีเมลที่ให้ไว้

หากผู้เยี่ยมชมเพจใช้ ลิงค์ภายนอก Microsoft เพจที่มีที่อยู่ต่อไปนี้จะเปิดขึ้น: http://www.microsoft.com/- หลังจากคลิกไฮเปอร์ลิงก์ "หน้าแรกของเว็บไซต์"จะเปิด หน้าแรกเว็บไซต์. การคลิกลิงก์ภายในในเอกสารข้อความจะเป็นการเปิดหน้าต่างที่มีเอกสารข้อความ text.docที่อยู่ในโฟลเดอร์ปัจจุบัน หากคุณใช้ลิงก์จุดยึดที่ส่วนท้ายของหน้านี้ รูปภาพของหน้าปัจจุบันจะเลื่อนเพื่อให้ข้อความป้ายกำกับ " [ป้องกันอีเมล] " ซึ่งเชื่อมโยงกับจุดยึดนั้น จะถูกวางไว้ในส่วนที่มองเห็นได้ของเอกสารบนหน้าจอ

วางข้อความ " [ป้องกันอีเมล] " คือไฮเปอร์ลิงก์ ซึ่งผู้ใช้จะสามารถส่งจดหมายโดยใช้อีเมลที่กำหนดค่าไว้ในคอมพิวเตอร์ไปยังอีเมลที่ระบุในแอตทริบิวต์ HREFที่อยู่ - [ป้องกันอีเมล] .

ลองดูอีกตัวอย่างหนึ่งของการสร้างไฮเปอร์ลิงก์ข้อความ สมมติว่าเอกสาร HTML สองฉบับถูกบันทึกในโฟลเดอร์หนึ่ง ซึ่งอธิบายงานของบริษัทสองส่วน - 1.htmlและ 2.html.

มาสร้างรายการไฮเปอร์ลิงก์กัน ซึ่งแต่ละไฮเปอร์ลิงก์จะแสดงให้เห็นขอบเขตงานของบริษัทด้านใดด้านหนึ่ง:

ผลิตภัณฑ์ของเรา

ลูกค้าของเรา

ผลลัพธ์:

ผลิตภัณฑ์ของเรา

ลูกค้าของเรา

ในตัวอย่างนี้ แท็กไฮเปอร์ลิงก์จะอยู่ภายในแท็กส่วนหัวระดับแรก ข้อความไฮเปอร์ลิงก์จะอยู่ในบรรทัดแยกกันและออกแบบเป็นส่วนหัวระดับแรก

ตามค่าเริ่มต้น ไฮเปอร์ลิงก์ของข้อความจะแสดงเป็นสีน้ำเงินและขีดเส้นใต้ และหากมีการใช้แล้ว ไฮเปอร์ลิงก์จะแสดงเป็นสีแดงเข้ม หากต้องการเปลี่ยนสีเหล่านี้ ให้เพิ่มแอตทริบิวต์ที่เกี่ยวข้องในแท็ก : - ซึ่งหมายความว่าหลังจากโหลดหน้าเว็บครั้งแรก ไฮเปอร์ลิงก์ทั้งหมดจะเป็นสีม่วง และหากผู้เข้าชมใช้หนึ่งในนั้น สีของข้อความจะกลายเป็นสีเหลือง วิธีนี้จะสะดวกเมื่อมีลิงก์จำนวนมากบนหน้าเว็บ และผู้เยี่ยมชมต้องการดูทีละลิงก์ จากนั้นการแทนที่สีอื่นสำหรับไฮเปอร์ลิงก์ที่เข้าชมจะทำให้การดูดังกล่าวมีการจัดระบบ