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

แผนการโพสต์:

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

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

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

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

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

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

นอกจากนี้ยังมีความแตกต่างอีกมากมายที่จะช่วยให้งานของคุณง่ายขึ้นและคุณจะอ่านได้ด้านล่างในบทความของฉัน - เหล่านี้คือ rel=”nofollow” และ target=“_blank” และสิ่งที่น่าสนใจอื่น ๆ อีกมากมายที่เกี่ยวข้องกับลิงก์

แท็กลิงก์ A – สร้างไฮเปอร์ลิงก์ในเอกสาร html โดยมีและไม่มีจุดยึด

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

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

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

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

ที่นี่ควรเป็นข้อความของไฮเปอร์ลิงก์ของคุณนั่นคือสมอ

อย่างที่คุณเห็น ลิงก์เริ่มต้นด้วยวงเล็บเปิด ":

โดยทั่วไปแล้ว การบอกผู้ใช้ถึงวิธีการเปิดลิงก์นั้นไม่ใช่เรื่องดี ผู้เชี่ยวชาญด้านการใช้งานเว็บไซต์มีมติเป็นเอกฉันท์อ้างว่าผู้ใช้สามารถตัดสินใจได้ว่าจะเปิดลิงก์อย่างไร เขาจะจัดเรียงหน้าต่างของเขาโดยที่เราไม่ต้องการในเรื่องนี้ นอกจากนี้เรายังจะทำลายฟังก์ชันการทำงานของปุ่ม "ย้อนกลับ" ของเบราว์เซอร์มาตรฐานด้วย การเข้าไปยุ่งเกี่ยวกับนิสัยที่หยาบคายเช่นนั้นอาจก่อให้เกิดความเกลียดชังได้!

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

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

อย่างไรก็ตาม นอกเหนือจากด้านศีลธรรมแล้ว ยังมีด้านเทคนิคสำหรับปัญหานี้ด้วย - คุณลักษณะเป้าหมายหายไป ข้อกำหนด XHTML 1.0 เข้มงวดและจะไม่ผ่านการตรวจสอบ!

วิธีแก้ไขที่ถูกต้อง: JavaScript

แม้ว่าย่อหน้าก่อนหน้าแล้ว หากคุณยังคงตัดสินใจ (หรือถูกบังคับให้) เปิดหน้าเว็บในหน้าต่างใหม่ อย่างน้อยก็ขอให้ทำอย่างถูกต้อง

นี่คือจุดที่ JavaScript มาช่วยเหลือ เรามาลองสกัดกั้นเหตุการณ์ onclick ของลิงก์และบังคับให้เปิดหน้าต่างใหม่โดยใช้ฟังก์ชัน window.open() จากนั้นเราจะห้ามไม่ให้ติดตามลิงก์ในหน้าต่างดั้งเดิมโดยระบุ return false:

ลิงค์จะเปิดขึ้นในหน้าต่างใหม่

เราตรวจสอบวิธีแก้ปัญหาผลลัพธ์: .

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

ทางออกที่ดีกว่า

ตัวบล็อกป๊อปอัปได้รับการออกแบบมาเพื่อต่อสู้กับโฆษณาที่น่ารำคาญเป็นหลัก คุณลักษณะนี้มีอยู่ในเบราว์เซอร์สมัยใหม่ทั้งหมด เบราว์เซอร์บางตัวมีการบล็อกในระดับที่แตกต่างกัน ตัวอย่างเช่น ใน Opera 9+ คุณสามารถบล็อกเฉพาะหน้าต่างที่ "ไม่ต้องการ" หรือทุกอย่างได้

ฉันไม่รู้ว่าผู้ใช้ประสบปัญหาอย่างมากกับป๊อปอัปกี่เปอร์เซ็นต์ แต่เฉพาะการตั้งค่าเหล่านี้เท่านั้น แทนที่จะเปิดหน้าต่าง ข้อความแจ้งเล็ก ๆ “หน้าต่างป๊อปอัปถูกบล็อก” จะปรากฏขึ้น ยิ่งไปกว่านั้น แม้แต่การแสดงการตอบสนองของเบราว์เซอร์ต่อการคลิกก็สามารถปิดการใช้งานได้ในการตั้งค่า ในกรณีนี้ลิงก์จะใช้งานไม่ได้: “ฉันคลิกแล้ว แต่ไม่มีอะไรเกิดขึ้น!”

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

ลิงค์จะเปิดขึ้นในหน้าต่างใหม่

ที่นี่เราใช้ประโยชน์จากความจริงที่ว่าฟังก์ชัน window.open() กลับมา จริงหากหน้าต่างเปิดสำเร็จและเป็นเท็จอย่างอื่น นั่นคือในกรณีที่ลิงก์เปิดในหน้าต่างใหม่ได้สำเร็จ เราจะบล็อกการเปิดลิงก์ในหน้าต่างของมันเอง เนื่องจาก ผลตอบแทนจะเป็น!true=false และในทางกลับกัน หากไม่สามารถเปิดหน้าต่างได้ การคืนค่าจริงจะทำให้ลิงก์ทำงานได้ตามปกติ

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

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

เป็นไปได้ไหมที่จะใช้แท็ก target="_blank" เพื่อบังคับให้ลิงก์เปิดในหน้าต่างเบราว์เซอร์ใหม่ สิ่งนี้ไม่เป็นอันตรายใช่ไหม? สิ่งนี้ส่งผลกระทบอะไรบ้างหรือไม่?

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

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

แอตทริบิวต์ target="_blank" เป็นแอตทริบิวต์ที่ไม่ถูกต้อง และอนุญาตให้ใช้ในเอกสารเฉพาะกาลเท่านั้น:

เพื่อเปรียบเทียบใน Blogger จะเป็นดังนี้:

มีข้อมูลเกี่ยวกับประเภทเอกสารซึ่งเป็นองค์ประกอบที่จำเป็นของหน้าเว็บที่บอกเบราว์เซอร์ถึงวิธีตีความหน้า ฉันจะไม่เข้าไปในประวัติศาสตร์ของการสร้าง HTML, XML, XHTML - ทั้งหมดนี้เป็นเนื้อหาสำหรับบทความมากกว่าหนึ่งบทความ แต่ฉันจะพยายามถ่ายทอดสาระสำคัญ

หากเรากำลังพูดถึง Blogger เทมเพลตของเราคือส่วนผสมของสองภาษา - HTML และ XML ในกรณีเช่นนี้จำเป็นต้องระบุ - XHTML 1.0 Strict เอกสารประเภทนี้ต้องมีไวยากรณ์ที่ชัดเจน และข้อกำหนดสำหรับเอกสารประเภทนี้ไม่มีแอตทริบิวต์ target="_blank" นั่นคือสาเหตุที่แอตทริบิวต์นี้ไม่ถูกต้องสำหรับเรา และในความเป็นจริง ห้ามมิให้ใช้คุณลักษณะนี้

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

นักพัฒนาของไซต์ใดไซต์หนึ่งเป็นผู้กำหนดประเภทเอกสาร ขึ้นอยู่กับภาษาหรือเวอร์ชันของเอกสารที่ใช้เมื่อจัดวางไซต์

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

ตัวเลือกแรกคือเพื่อให้เอกสารถูกต้อง คุณสามารถใช้สคริปต์ JavaScript หรือ JQuery พิเศษที่จะเปิดหน้าเว็บในเบราว์เซอร์ใหม่

ข้อเสียของวิธีนี้: หากปิดการใช้งาน JavaScript ในการตั้งค่าเบราว์เซอร์ หน้าจะไม่เปิดในหน้าต่างใหม่

ตัวเลือกที่สองคือใช้ target="_blank" และไม่ต้องประสบปัญหานี้อีกต่อไป แม้ว่าแอตทริบิวต์นี้จะไม่ถูกต้อง แต่เบราว์เซอร์ทั้งหมดยังคงรองรับอยู่ และการใช้งานไม่ส่งผลกระทบต่อการจัดทำดัชนีเว็บไซต์โดยเครื่องมือค้นหา แต่อย่างใด

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

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

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

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

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

ฉันมีความคิดเห็นเกี่ยวกับเรื่องนี้อย่างไร? ตัวฉันเองเป็นมือใหม่ฉันรู้จักผู้คนมากมายที่พวกเขารู้เกี่ยวกับอินเทอร์เน็ตคือ Yandex และ Odnoklassniki และพวกเขาไม่รู้ว่าจอภาพคืออะไรเหตุใดจึงมีปุ่มมากมายบนแป้นพิมพ์และทำไมล้อเลื่อนของเมาส์ จำเป็นเลย ( แน่นอนว่าช่องว่างดังกล่าวจะถูกเติมเต็มอย่างรวดเร็ว). ตัวฉันเองคิดว่าการเปิดไซต์ใหม่ในแท็บเดียวกับที่ฉันอยู่ตอนนี้นั้นไม่สะดวกอย่างยิ่ง แม้ว่าฉันจะวางแผนออกจากไซต์จริงๆ ฉันก็ไม่ต้องกังวลมากเกินไปหากฉันปิดแท็บก่อนหน้า ฉันต้องการให้ลิงก์ภายในไซต์เปิดในแท็บเดียวกัน และลิงก์ภายนอกในแท็บใหม่ นี่เป็นความเห็นส่วนตัวของฉันและฉันไม่ได้อ้างว่าเป็นความจริง

หากคุณคิดอย่างจริงจังเกี่ยวกับปัญหานี้และตัดสินใจใช้สคริปต์พิเศษ ฉันพยายามค้นหาวิธีแก้ปัญหาให้กับคุณ สคริปต์นี้เหมาะสำหรับเว็บไซต์ CMS และแพลตฟอร์ม Blogger ฉันจะแสดงให้คุณเห็นโดยใช้ Blogger เป็นตัวอย่าง

ไปที่การออกแบบ – แก้ไข HTML ค้นหาโค้ดแล้วใส่โค้ดไว้ข้างหน้า:

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

ภายนอก (
การขยาย: 0 10px 2px 0;
พื้นหลัง: url (http://lh6.googleusercontent.com/_G92voTj-yF0/TcFG68RdfLI/AAAAAAABfA/QJM25G6lInk/externallink.gif) ไม่ทำซ้ำตรงกลางด้านขวา;
}

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

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

http://sites.google.com/site/seobiblioteka/extlinks.js
http://sites.google.com/site/seobiblioteka/external.js

แต่สคริปต์สองตัวสุดท้ายไม่รองรับการโหลดสไตล์อัตโนมัติ ดังนั้นหากคุณต้องการใช้สไตล์สำหรับลิงก์ภายนอกที่แตกต่างจากลิงก์ภายใน อย่าลืมกำหนด class class="external" ให้กับลิงก์

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

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

สวัสดีผู้อ่านบล็อกไซต์ที่รัก วันนี้ฉันต้องการพูดคุยรายละเอียดเพิ่มเติมเกี่ยวกับไฮเปอร์ลิงก์ที่มีอยู่ ภาษา HTML, วิธีวางลงในข้อความบนเว็บไซต์, วิธีสร้างลิงก์ไปยังรูปภาพ, วิธีใช้แท็ก "A" และแอตทริบิวต์ "Href" และ "Target Blank" อย่างถูกต้อง (เปิดในหน้าต่างใหม่)

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

ไฮเปอร์ลิงก์และจุดยึดคืออะไร?

ดังนั้นเราจึงได้คุ้นเคยกับแท็กที่ล้าสมัยซึ่งไม่แนะนำให้ใช้ในชีวิตประจำวันแล้ว เรามาทำความรู้จักกันต่อไป

ในการสร้างไฮเปอร์ลิงก์ในโค้ด Html เราจำเป็นต้องใช้แท็ก A ด้วย โดยเราสามารถใช้แอตทริบิวต์ต่างๆ การตั้งค่า เช่น ที่อยู่ URL ของเป้าหมายเพื่อเลื่อนไปตามลิงก์นี้ (href) หรือคำสั่ง ที่จะเปิดในหน้าต่างใหม่ (target= _blank) แต่มาพูดถึงทุกสิ่งตามลำดับ

ดังที่เราได้กล่าวไว้ข้างต้น ไฮเปอร์ลิงก์เป็นองค์ประกอบสำคัญของภาษา Html และช่วยให้คุณสามารถเชื่อมโยงไปยังหน้าภายในของไซต์ของคุณเองและไปยังแหล่งข้อมูลทางอินเทอร์เน็ตอื่นๆ ฉันจะบอกว่าซ้ำซาก - การคลิกลิงก์นั้นดำเนินการตามลิงก์ (คุณคิดอย่างไร)

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

ในกรณีนี้จะไม่ปรากฏให้เห็นบนเพจเพราะว่า ได้รับการจดทะเบียนในพื้นที่หัวหน้า รหัสแหล่งที่มาเอกสาร เนื้อหาที่ไม่แสดงบนหน้า (ฉันกล่าวถึงโครงสร้างของรหัสภาษามาร์กอัปไฮเปอร์เท็กซ์ในบทความเกี่ยวกับ )

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

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

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

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

อาจมีความสับสนบ้างเพราะ... ใน SEO คำว่าคือ แต่ในภาษา Html “anchor” หมายถึงจุดยึด (คำแปลของคำว่า Anchor) หรือเครื่องหมายในข้อความซึ่งสามารถอ้างอิงได้

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

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

วิธีสร้างจุดยึดและแฮชลิงก์

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

เหล่านั้น. ในการสร้างจุดยึดคุณต้องป้อนแอตทริบิวต์ "ชื่อ" ลงในแท็กไฮเปอร์ลิงก์ว่าง "A" ซึ่งเป็นค่าที่ใช้ป้ายกำกับเฉพาะที่ไม่ควรมีช่องว่างและคุณสามารถใช้อักขระละตินตัวเลข , ยัติภังค์และขีดล่าง (ในลักษณะคล้ายคลึงกับกฎที่คุณสามารถสร้าง URL - ,,,[_],[-]) ได้อย่างสมบูรณ์

ในกรณีนี้ Anchor จะไม่สามารถมองเห็นได้บนหน้าเว็บเนื่องจาก เราไม่ได้เขียนข้อความใดๆ ภายในองค์ประกอบ "A" อย่างไรก็ตาม จุดยึดที่สร้างขึ้นในลักษณะนี้จะทำให้โค้ด Html เสียหาย ดังนั้นในปัจจุบันจึงใช้วิธีอื่นในการสร้างป้ายกำกับบ่อยกว่าจุดยึดมาก

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

เหล่านั้น. ในการสร้างแอนะล็อกของจุดยึด ก็เพียงพอที่จะกำหนดแอตทริบิวต์ Universal ID ให้กับแท็กใด ๆ (สามารถใช้กับแท็กทั้งหมดได้และโดยวิธีการทำงานตามแท็กนั้น) เช่น:

ข้อความชื่อเรื่อง

ดังนั้นตอนนี้แทนที่จะสร้างจุดยึดตามจำนวนที่ต้องการซึ่งทำให้โค้ดเสียหายและปรากฏอยู่ ช่วงเวลานี้ไม่ถูกต้อง (ไม่แนะนำโดยสมาคม W3C ซึ่งพัฒนาภาษา Html) เราเพียงแค่เพิ่ม Id

ปรากฎว่าสำหรับสิ่งนี้คุณจะต้องแทรกแอตทริบิวต์ที่จำเป็น "Href" ลงในไฮเปอร์ลิงก์ "A" ตามปกติ แต่ค่าที่จะถูกสร้างขึ้นจากชื่อของป้ายกำกับที่ต้องการ (จุดยึด) ที่นำหน้าด้วยแฮช เครื่องหมาย “#” ซึ่งเรียกอีกอย่างว่าแฮช ( โดยวิธีนี้เป็นที่ที่ขาของชื่อที่ใช้บ่อยเติบโต: แฮชลิงก์):

จะย้ายไปยังตำแหน่งของหน้าที่ทำเครื่องหมายด้วยจุดยึด

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

หากคุณสร้างจุดยึดโดยใช้แอตทริบิวต์ ID ในแท็กที่อยู่ในตำแหน่งที่สะดวก คุณจะต้องคำนึงว่านอกเหนือจากข้อจำกัดเกี่ยวกับประเภทของอักขระที่ใช้ (,,,[_],[-]) แล้ว ค่า ID ต้องขึ้นต้นด้วยตัวอักษรละติน

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

หากคุณไม่ได้เขียนชื่อป้ายกำกับจุดยึด (href="#") หลังสัญลักษณ์แฮช "#" ไฮเปอร์ลิงก์ดังกล่าวจะเลื่อนหน้าไปยังจุดเริ่มต้น นี่คือวิธีที่คุณสามารถสร้างปุ่ม "กลับสู่ด้านบน" ง่ายๆ โดยการสร้างลิงก์จากรูปภาพ (เราจะพูดถึงเรื่องนี้ในภายหลัง) และแทรกลงในเทมเพลตเว็บไซต์ของคุณ เช่นนี้

Href เป็นแอตทริบิวต์แท็กที่จำเป็นสำหรับไฮเปอร์ลิงก์ใดๆ

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

สมอ

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

อย่างไรก็ตาม ฉันขอเตือนคุณว่าเมื่อสร้าง URL ควรใช้เฉพาะอักขระต่อไปนี้: (,,,[_],[-]) และไม่ใช้ช่องว่าง หากเราพิจารณาเนื้อหาของแอตทริบิวต์ Href สำหรับลิงก์แบบสัมบูรณ์ ก็สามารถแสดงแผนผังได้ดังต่อไปนี้:

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

โปรโตคอล (ปกติคือ http)://domain_name (เช่น เว็บไซต์)/path_to_file ( หน้าเว็บ)

นอกจากโปรโตคอล http แบบธรรมดาแล้ว บนอินเทอร์เน็ต คุณยังสามารถค้นหาลิงก์ที่มีโปรโตคอล https ซึ่งแตกต่างจากโปรโตคอลที่ใช้การเข้ารหัส หลังนี้ใช้บนไซต์ที่จำเป็นต้องปกป้องช่องทางการแลกเปลี่ยนข้อมูลระหว่างเซิร์ฟเวอร์และเบราว์เซอร์ของลูกค้า ตัวอย่างเช่น ใช้ในบริการเงินอิเล็กทรอนิกส์ของ Web Money

บนอินเทอร์เน็ต คุณสามารถค้นหาเนื้อหา Href เวอร์ชันต่างๆ ได้ เช่น เนื้อหานี้:

Https://site/videokursy

หรือสิ่งนี้ (มีนามสกุลไฟล์):

Https://site/seo/kak-raskrutit-sajt.html

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

ดาวน์โหลดบางอย่างจากลิงค์

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

ดาวน์โหลดจากเซิร์ฟเวอร์ Ftp

ตัวอย่างเช่น คุณสามารถสร้าง (เมล) ได้โดยเพิ่ม Url ที่เกี่ยวข้องลงใน Href:

เขียนจดหมาย

เมื่อคุณคลิกลิงก์นี้ ค่าเริ่มต้นที่คุณใช้จะเปิดขึ้นบนคอมพิวเตอร์ของคุณ โปรแกรมเมล(ในเบราว์เซอร์คุณสามารถกำหนดค่าลิงก์ด้วย mailto ใน Href เพื่อเปิดใน Gmail ฯลฯ ) และกล่องโต้ตอบสำหรับสร้างจดหมายใหม่จะปรากฏขึ้น โดยที่อยู่อีเมลที่ระบุใน Href จะถูกแทรกลงในช่อง "ถึง"

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

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

วิธีเปิดลิงค์ในหน้าต่างใหม่ (เป้าหมายว่างเปล่า)

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

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

ในเครื่องมือค้นหา ฉันต้องกำหนดค่าการเปิดลิงก์ในหน้าต่างใหม่ด้วย เพื่อให้ผลลัพธ์อยู่ใกล้แค่เอื้อมและคุณสามารถกลับมาที่ลิงก์ได้ตลอดเวลา เพื่อวัตถุประสงค์เหล่านี้ ตามที่ได้กล่าวไปแล้ว Html จะใช้แอตทริบิวต์ Target พิเศษ ซึ่งโดยค่าเริ่มต้นจะมีค่า Self:

เปิดเอกสารในหน้าต่างเดียวกัน

แม้ว่าแน่นอนว่าไม่มีใครเขียน target="_self" ในแท็ก "A" เนื่องจากค่านี้ถูกใช้เป็นค่าเริ่มต้น แต่หากคุณต้องการเปิดหน้าเว็บในหน้าต่างใหม่ คุณจะต้องเขียน target="_blank ":

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

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

ตัวอย่างเช่น หากคุณต้องการให้ไฮเปอร์ลิงก์ทั้งหมดบนไซต์ของคุณเปิดในหน้าต่างใหม่ คุณจะต้องเพิ่มแท็กฐานที่มีแอตทริบิวต์ target="_blank" ในพื้นที่ส่วนหัวของเทมเพลตที่คุณใช้:

มีอย่างอื่นอยู่ที่นั่น

และตอนนี้ หากคุณต้องการเปิดลิงก์ใดลิงก์หนึ่งในหน้าต่างเดียวกัน คุณจะต้องเพิ่ม target="_self" ให้กับแท็ก “A” เนื่องจากตามค่าเริ่มต้นแล้ว ตอนนี้คุณจะใช้ _blank โอ้วิธีการ

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

ไฮเปอร์ลิงก์โฮเวอร์และคลิกสี - วิธีเปลี่ยน

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

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

ตามค่าเริ่มต้นในรูปแบบ HTML ล้วนๆ (โดยไม่ต้องใช้ คุณสมบัติซีเอสเอส) ลิงก์จะถูกเน้นด้วยการขีดเส้นใต้และมีตัวเลือกสีได้ 3 แบบ:

สีน้ำเงินคือสีของลิงก์ที่ไม่ได้ติดตามซึ่งผู้ใช้ยังไม่ได้คลิก

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

สีม่วงคือสีสำหรับลิงก์ที่ใช้แล้วที่ผู้ใช้ติดตามไปแล้ว

ใน Html 4.01 สีสำหรับลิงก์เหล่านี้เป็นค่าเริ่มต้น แต่สามารถเปลี่ยนแปลงได้โดยใช้คุณลักษณะพิเศษที่เขียนลงในแท็ก Body ซึ่งคุณจะพบได้ในไฟล์หนึ่งของเทมเพลตที่คุณใช้ หากต้องการเปลี่ยนสีทั้งสามสี จะใช้แอตทริบิวต์ 3 รายการตามลำดับ:

ลิงค์—กำหนดสีของลิงค์ที่ยังไม่ได้เยี่ยมชม

Alink - สีของสีที่ใช้งานอยู่ซึ่งเบราว์เซอร์กำลังประมวลผล

Vlink - สีของไฮเปอร์ลิงก์ที่ผู้ใช้เยี่ยมชมแล้ว

จำไว้ว่าฉันเขียนเกี่ยวกับวิธีการแล้ว ดังนั้น คุณลักษณะที่กล่าวถึงอาจมีลักษณะดังนี้:

โดยธรรมชาติแล้วสิ่งที่หมายถึงที่นี่คือตัวเลือก Html ล้วนๆ เมื่อไม่สะดวกหรือเป็นไปไม่ได้ที่จะใช้สไตล์ด้วยเหตุผลบางประการ ไม่เช่นนั้นสีทั้งหมดเหล่านี้สามารถตั้งค่าและเปลี่ยนแปลงได้อย่างง่ายดายโดยใช้ .

วิธีสร้างรูปภาพเป็นลิงค์ - สองวิธี

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

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

หากต้องการลบการเพิ่มเส้นขอบให้กับรูปภาพที่คุณได้ไฮเปอร์ลิงก์ไว้ คุณต้องเพิ่มแอตทริบิวต์ Border ที่มีค่าเป็นศูนย์ให้กับแท็ก Img:

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

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

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

คุณอาจจะสนใจ

เลือก ตัวเลือก พื้นที่ข้อความ ป้ายกำกับ ชุดข้อมูล คำอธิบาย - แท็ก แบบฟอร์ม HTMLรายการแบบหล่นลงและ ช่องข้อความ
วิธีการใส่เข้าไป ลิงค์ HTMLและรูปภาพ (ภาพถ่าย) - แท็ก IMG และ A
Iframe และ Frame - คืออะไรและอย่างไรจึงจะดีที่สุดในการใช้เฟรมใน Html
อักขระช่องว่างและการจัดรูปแบบของโค้ดในรูปแบบ Html รวมถึงอักขระพิเศษ พื้นที่ไม่ทำลายและตัวช่วยจำอื่น ๆ
MailTo - คืออะไรและจะสร้างลิงค์ใน Html เพื่อส่งอีเมลได้อย่างไร
วิธีการตั้งค่าสีในโค้ด Html และ CSS, การเลือกเฉดสี RGB ในตาราง, เอาต์พุต Yandex และโปรแกรมอื่น ๆ
แบบอักษร (ใบหน้า ขนาด และสี) Blockquote และแท็ก Pre - การจัดรูปแบบข้อความแบบเดิม HTML บริสุทธิ์(ปราศจาก ใช้ CSS)
Img - แท็ก Html สำหรับการแทรกรูปภาพ (Src) การจัดตำแหน่งและการตัดข้อความรอบ ๆ (การจัดแนว) ตลอดจนการตั้งค่าพื้นหลัง (พื้นหลัง)
รายการในโค้ด Html - แท็ก UL, OL, LI และ DL
แท็กหัวเรื่องและแอตทริบิวต์ H1-H6 เส้นแนวนอน Hr, ตัวแบ่งบรรทัด Br และตัวแบ่งย่อหน้า P ตามมาตรฐาน Html 4.01