เว็บไซต์แตกต่างจากสื่อการสื่อสารใด ๆ ที่มาก่อนหน้านี้ หนึ่งในสิ่งสำคัญที่ทำให้เว็บไซต์แตกต่างจากรูปแบบสื่อสมัยก่อนเช่นการพิมพ์วิทยุและแม้แต่โทรทัศน์เป็นแนวคิดของ " ไฮเปอร์ลิงก์ "
การเชื่อมโยงหลายมิติยังเป็นที่รู้จักกันทั่วไปว่าเป็น "การเชื่อมโยง" ซึ่งเป็นสิ่งที่ทำให้เว็บมีพลวัตร ไม่เหมือนกับสิ่งตีพิมพ์ที่สามารถอ้างอิงบทความอื่นหรือแหล่งข้อมูลอื่น ๆ เว็บไซต์ต่างๆสามารถใช้ลิงก์เหล่านี้เพื่อส่งผู้เข้าชมมายังหน้าเว็บและแหล่งข้อมูลเหล่านั้นได้จริง ไม่มีสื่อออกอากาศอื่น ๆ สามารถทำเช่นนี้ได้ คุณสามารถฟังโฆษณาทางวิทยุหรือดูทางทีวี แต่ไม่มีไฮเปอร์ลิงก์ที่สามารถนำคุณไปยัง บริษัท ในโฆษณาเหล่านั้นได้ตามที่เว็บไซต์นั้นทำได้ง่ายๆ ลิงค์จริงๆมีการสื่อสารที่น่าอัศจรรย์และเครื่องมือปฏิสัมพันธ์!
บ่อยครั้งลิงก์ที่พบในเว็บไซต์เป็นเนื้อหาข้อความที่นำผู้เข้าชมไปยังหน้าอื่น ๆ ของเว็บไซต์เดียวกัน การนำทางของเว็บไซต์เป็นตัวอย่างหนึ่งของลิงก์ข้อความในทางปฏิบัติ แต่การเชื่อมโยงไม่จำเป็นต้องเป็นแบบข้อความ คุณยังสามารถเชื่อมโยงรูปภาพในเว็บไซต์ของคุณได้อย่างง่ายดาย ลองดูวิธีนี้แล้วตามด้วยบางกรณีที่คุณต้องการใช้การเชื่อมโยงหลายมิติภาพ
วิธีเชื่อมโยงภาพ
สิ่งแรกที่คุณต้องทำคือวางภาพลงในเอกสาร HTML ของคุณ การใช้ภาพโดยใช้ลิงก์เป็นภาพกราฟิกของไซต์ซึ่งเชื่อมโยงกลับไปยังหน้าแรกของเว็บไซต์ ในตัวอย่างโค้ดด้านล่าง ไฟล์ที่เราใช้คือ SVG สำหรับโลโก้ของเรา นี่เป็นตัวเลือกที่ดีเนื่องจากจะช่วยให้ภาพของเราสามารถปรับขนาดได้เพื่อความละเอียดที่แตกต่างกันในขณะเดียวกันก็รักษาคุณภาพของภาพและขนาดไฟล์โดยรวมไว้ด้วย
ต่อไปนี้คือวิธีการวางภาพในเอกสาร HTML:
รอบแท็กรูปภาพตอนนี้คุณจะต้องเพิ่มลิงก์ anchor โดยเปิดส่วน anchor ก่อนภาพและปิด anchor หลังจากภาพ นี้คล้ายกับวิธีที่คุณจะเชื่อมโยงข้อความเพียงแทนการตัดคำที่คุณต้องการจะเชื่อมโยงกับยึดแท็กคุณห่อภาพ ในตัวอย่างด้านล่างเราจะเชื่อมโยงกลับไปยังหน้าแรกของเว็บไซต์ของเราซึ่งคือ "index.html"
เมื่อเพิ่ม HTML นี้ลงในหน้าเว็บของคุณอย่าวางช่องว่างระหว่างแท็ก anchor และแท็กรูปภาพ หากทำเช่นนี้เบราว์เซอร์บางตัวจะเพิ่มทิปเล็ก ๆ อยู่ข้างภาพซึ่งจะดูแปลก ๆ
ภาพโลโก้ตอนนี้จะทำหน้าที่เป็นปุ่มโฮมเพจซึ่งเป็นเว็บมาตรฐานที่สวยมากในปัจจุบัน โปรดสังเกตว่าเราไม่ได้รวมรูปแบบภาพเช่นความกว้างและความสูงของภาพในมาร์กอัพ HTML ของเรา เราจะออกจากรูปแบบภาพเหล่านี้ไปยัง CSS และรักษาโครงสร้าง HTML ที่แยกจากกันและรูปแบบ CSS
เมื่อคุณเข้าสู่ CSS แล้วรูปแบบที่คุณเขียนเพื่อกำหนดเป้าหมายกราฟิกโลโก้นี้อาจรวมถึงการปรับขนาดภาพรวมถึง รูปแบบที่ตอบสนอง ต่อภาพที่เป็นมิตรกับอุปกรณ์หลาย ๆ เครื่องรวมทั้งภาพที่คุณต้องการเพิ่มลงในภาพ / ลิงก์เช่นเส้นขอบหรือ CSS ปล่อยเงา นอกจากนี้คุณยังสามารถให้รูปภาพหรือเชื่อมโยงแอตทริบิวต์ class ถ้าต้องการ "hooks" เพิ่มเติมเพื่อใช้กับสไตล์ CSS ของคุณ
ใช้ Cases for Image Links
ดังนั้นการเพิ่มลิงก์ภาพทำได้ง่าย ดังที่เราได้เห็นแล้วสิ่งที่คุณต้องทำคือห่อรูปด้วยแท็ก anchor ที่เหมาะสม คำถามต่อไปอาจเป็น "เมื่อไหร่ที่คุณจะทำเช่นนี้จริงนอกเหนือจากโลโก้ / ลิงค์หน้าแรกที่กล่าวถึง?"
นี่คือความคิดบางอย่าง:
- ภาพขนาดย่อในแกลเลอรีที่เชื่อมโยงกับภาพขนาดใหญ่เหล่านั้น
- ภาพที่ใช้เพื่อแสดงเนื้อหาเช่นรูปภาพผลิตภัณฑ์สำหรับเว็บไซต์อีคอมเมิร์ซ
- ภาพ Teaser ที่เป็นส่วนหนึ่งของเนื้อหาอื่น ๆ เช่นบทความบล็อกหรือข่าวประชาสัมพันธ์ที่ดึงดูดผู้คนให้สังเกตว่าเนื้อหาให้พื้นที่เป้าหมายเพื่อแตะหรือคลิกเพื่ออ่านบทความเต็มรูปแบบ
- ภาพไอคอนที่ใช้เป็นปุ่มเพื่อเชื่อมต่อกับฟังก์ชันการทำงานหรือหน้าเว็บเฉพาะภายในไซต์
- ลิงก์สื่อสังคมออนไลน์ที่ใช้โลโก้ที่เป็นที่รู้จักของไซต์สื่อสังคมออนไลน์ต่างๆที่มีความสำคัญต่อไซต์หรือ บริษัท ดังกล่าว
- รูปภาพที่ใช้เป็นปุ่มสำหรับฟังก์ชันการทำงานบางอย่างเช่นการส่งแบบฟอร์ม (คำแนะนำแนวทางปฏิบัติที่ดีที่สุด - จากมุมมองประสิทธิภาพของเว็บไซต์ปุ่มที่ออกแบบสไตล์ CSS อย่างหมดจดเป็นทางเลือกที่ดีกว่าปุ่มรูปภาพ)
เตือนเมื่อใช้รูปภาพ
รูปภาพสามารถมีบทบาทสำคัญในความสำเร็จของเว็บไซต์ หนึ่งในตัวอย่างที่กล่าวมาข้างต้นโดยใช้รูปภาพร่วมกับเนื้อหาอื่น ๆ เพื่อดึงดูดความสนใจไปที่เนื้อหานั้นและทำให้ผู้คนอ่าน
เมื่อใช้ภาพคุณต้องใส่ใจใน การเลือกภาพที่เหมาะสมกับความต้องการของคุณ ซึ่งรวมถึงหัวข้อเรื่องรูปแบบที่ถูกต้องรูปแบบและตรวจสอบให้แน่ใจว่ารูปภาพใด ๆ ที่คุณใช้ในเว็บไซต์ของคุณ ได้รับการปรับให้เหมาะสมกับการจัดส่งเว็บไซต์อย่างเหมาะสม นี้อาจดูเหมือนเป็นจำนวนมากของการทำงานเพียงเพื่อเพิ่มภาพ แต่ผลตอบแทนที่คุ้มค่า! ภาพสามารถเพิ่มความสำเร็จให้กับไซต์ได้เป็นอย่างมาก
อย่าลังเลที่จะใช้ภาพที่เหมาะสมกับไซต์ของคุณและเชื่อมโยงภาพเหล่านั้นเมื่อจำเป็นเพื่อเพิ่มเนื้อหาในเนื้อหาของคุณโต้ตอบกับเนื้อหาของคุณ แต่ควรคำนึงถึงแนวทางปฏิบัติที่ดีที่สุดของภาพเหล่านี้และใช้กราฟิก / ลิงก์เหล่านี้ได้อย่างถูกต้องและมีความรับผิดชอบในงานออกแบบเว็บของคุณ