ลิงก์หรือยึดบนหน้าเว็บ
หนึ่งใน differentiators หลักระหว่างเว็บไซต์และรูปแบบอื่น ๆ ของสื่อการสื่อสารเป็นความคิดของ "การเชื่อมโยง" หรือเชื่อมโยงหลายมิติที่พวกเขาเป็นที่รู้จักกันในแง่การออกแบบเว็บ
นอกเหนือจากการช่วยในการทำเว็บสิ่งที่เป็นอยู่ในปัจจุบันการเชื่อมโยงและรูปภาพต่างๆได้อย่างง่ายดายมากที่สุดโดยการเพิ่มสิ่งต่างๆบนหน้าเว็บ (เพียงสอง แท็กพื้นฐาน HTML ) และพวกเขาสามารถนำความตื่นเต้นและการโต้ตอบกับสิ่งที่จะเป็นอย่างอื่นหน้าเว็บข้อความล้วน ในบทความนี้คุณจะได้เรียนรู้เกี่ยวกับแท็ก (anchor) ซึ่งเป็นองค์ประกอบ HTML ที่ใช้จริงเพื่อเพิ่มลิงก์ไปยังหน้าเว็บไซต์
การเพิ่มลิงก์
ลิงก์เรียกว่า anchor ใน HTML ดังนั้นแท็กจึงเป็นแท็ก A โดยปกติแล้วผู้คนเพียง แต่อ้างถึงข้อมูลเพิ่มเติมเหล่านี้ว่า "ลิงก์" แต่ส่วนที่ยึดเป็นสิ่งที่ถูกเพิ่มเข้าไปในหน้าใด ๆ
เมื่อคุณเพิ่มลิงก์คุณต้องชี้ไปที่ที่อยู่เว็บเพจที่คุณต้องการให้ผู้ใช้ไปเมื่อคลิกหรือแตะ (หากอยู่ในหน้าจอสัมผัส) ที่เชื่อมโยง คุณระบุสิ่งนี้ด้วยแอ็ตทริบิวต์
แอตทริบิวต์ href ย่อมาจาก "hypertext reference" และมีจุดประสงค์เพื่อกำหนด URL ที่คุณต้องการให้ลิงก์เฉพาะไปที่ หากไม่มีข้อมูลนี้การเชื่อมโยงจะไม่มีประโยชน์ - จะบอกเบราว์เซอร์ว่าผู้ใช้ควรได้รับที่อื่น แต่จะไม่มีข้อมูลปลายทางสำหรับที่ที่ "ที่ไหนสักแห่ง" ควรเป็น แท็กนี้และแอตทริบิวต์นี้จับมือกัน
ตัวอย่างเช่นในการสร้างลิงก์ข้อความคุณจะเขียน:
URL ของหน้าเว็บเพื่อไปที่ "> ข้อความที่จะเป็นลิงก์
ดังนั้นเพื่อเชื่อมโยงไปยังหน้าแรกของ About.com Web Design / HTML คุณจะต้องเขียน:
คุณสามารถเชื่อมโยงเกือบทุกอย่างในหน้า HTML รวมทั้ง ภาพ เพียงแค่ล้อมรอบองค์ประกอบ HTML หรือองค์ประกอบที่คุณต้องการเป็นลิงก์ที่มีแท็ก และ นอกจากนี้คุณยังสามารถสร้าง ลิงก์ตัวยึด โดยการ เว้น แอตทริบิวต์ href - แต่โปรดอย่าลืมย้อนกลับและอัปเดตข้อมูล href ภายหลังหรือลิงก์จะไม่ทำอะไรเมื่อเข้าถึง
HTML5 ทำให้สามารถเชื่อมโยงองค์ประกอบระดับบล็อกเช่นย่อหน้าและองค์ประกอบ DIV ได้ คุณสามารถเพิ่มแท็ก anchor ลงในพื้นที่ขนาดใหญ่เช่นรายการ division หรือ definition และพื้นที่ทั้งหมดจะ "คลิกได้" วิธีนี้สามารถเป็นประโยชน์อย่างยิ่งเมื่อพยายามสร้างพื้นที่ที่มีขนาดใหญ่และเป็นมิตรกับการตีในเว็บไซต์
บางสิ่งที่ต้องจำเมื่อเพิ่มลิงค์
- ต้องใช้ แท็กสุดท้าย หากคุณลืมใส่ไว้ทุกอย่างที่ลิงก์ต่อไปนี้จะเชื่อมโยงกันจนกว่าลิงก์อื่นจะปิดแท็ก
- โดยส่วนใหญ่แล้วจะเป็นการดีที่จะเชื่อมโยงรูปภาพเดี่ยวและช่วงเวลาสั้น ๆ ของข้อความแทนที่จะเป็นข้อความขนาดใหญ่ ลิงค์สามารถเพิ่มสีและขีดเส้นใต้สไตล์ให้กับหน้าเว็บของคุณซึ่งอาจอ่านได้ยาก แน่นอนคุณสามารถใช้ CSS เพื่อเปลี่ยนรูปแบบลิงก์เหล่านี้และแก้ไขสีหรือลบเส้นใต้ แต่ก็ยังดีที่จะต้องคำนึงถึงความเป็นจริงนี้
- ตรวจสอบให้แน่ใจว่าได้ตรวจสอบลิงก์ของคุณเพื่อไม่ให้เกิดความเสียหาย Link Rot สามารถทำให้ทั้งผู้ใช้และเครื่องมือค้นหาพิจารณาไซต์ของคุณไม่ถูกต้อง ใช้ตัวตรวจสอบลิงก์เป็นประจำเพื่อยืนยันลิงก์บนหน้าเว็บของคุณ โดยเฉพาะอย่างยิ่งเมื่อคุณลิงก์ไปยังไซต์ของบุคคลที่สาม (ไซต์ที่คุณไม่ได้จัดการ) และอาจเปลี่ยนแปลงหน้าเว็บของพวกเขาในช่วงเวลาดังกล่าวทำให้คุณไม่สามารถเชื่อมโยงได้ ตัวตรวจสอบการเชื่อมโยงจะพบลิงก์ที่เสียไปเหล่านี้เพื่อให้คุณสามารถทำการอัปเดตที่จำเป็นได้
- หลีกเลี่ยงข้อความเช่น "คลิกที่นี่" ในลิงก์ของคุณ โปรดจำไว้ว่าคนที่มีหน้าจอสัมผัสไม่สามารถ "คลิก" เพื่อให้ข้อความรู้สึกเหมือนเป็นผลิตภัณฑ์ในยุคที่ผ่านมาและไม่มีความเกี่ยวข้องกับเว็บศูนย์กลางสำหรับอุปกรณ์ที่มีอยู่ในปัจจุบัน
ประเภทลิงก์ที่น่าสนใจอื่น ๆ
องค์ประกอบ A จะสร้างลิงก์มาตรฐานไปยังเอกสารอื่น แต่มีลิงก์ประเภทอื่น ๆ ที่คุณอาจสนใจ:
- ลิงก์ภายในหรือจุดยึด - เป็นลิงก์ไปยังที่อื่นภายในหน้าเว็บไม่จำเป็นต้องอยู่ด้านบน
- แผนที่ภาพ - แผนที่รูปภาพ เพื่อสร้างลิงก์บนรูปภาพที่แม็ปกับพื้นที่เฉพาะของภาพ เหล่านี้สามารถใช้สำหรับเกมหรือการนำทางที่สร้างสรรค์ได้ คุณมักจะเห็นแผนที่เหล่านี้พร้อมแผนที่ที่สามารถคลิกได้บนพื้นที่ต่างๆบนแผนที่ โปรดทราบว่าแผนที่ภาพไม่ได้ใช้ในเว็บไซต์ที่ทันสมัยที่สุดส่วนหนึ่งเป็นเพราะอาจทำให้เกิดปัญหากับอุปกรณ์เคลื่อนที่ได้
- องค์ประกอบ - องค์ประกอบนี้ใช้เพื่อเชื่อมโยงเอกสารและหน้าอื่น ๆ กับเอกสารปัจจุบัน จะไม่สร้างพื้นที่ที่สามารถคลิกได้บนหน้าเว็บของคุณ แต่เป็นประโยชน์ที่จะเข้าใจ