เราทุกคนต้องการให้เว็บไซต์ของเรามีการเข้าชมสูง ถึง เครื่องมือค้นหาไม่ได้ข้ามพวกเขา อย่างไรก็ตาม เพื่อให้บรรลุเป้าหมายเหล่านี้ เราจำเป็นต้องรู้พื้นฐานเป็นอย่างน้อย
ในบทความนี้ เราจะบอกความหมายของไฮเปอร์ลิงก์และอธิบายวิธีสร้างไฮเปอร์ลิงก์บนเว็บไซต์ของคุณเอง
ความหมายไฮเปอร์ลิงก์
ความสำคัญหลักของไฮเปอร์ลิงก์คือสามารถใช้เพื่ออ้างถึงทั้งสองไฮเปอร์ลิงก์ได้ หน้าภายในไซต์ของตัวเองและบนหน้าของไซต์อื่น
ไม่มีความลับที่เสิร์ชเอ็นจิ้นคำนึงถึงจำนวนลิงก์ที่วางบนเว็บไซต์อย่างถี่ถ้วนและยังวิเคราะห์เนื้อหาของข้อความสมออย่างระมัดระวัง
จากข้อมูลนี้ โปรแกรมค้นหาจะจัดอันดับไซต์ต่างๆ และไซต์ที่มีไฮเปอร์ลิงก์ที่ถูกต้องมากกว่าจะมีข้อได้เปรียบที่สำคัญ
วิธีสร้างไฮเปอร์ลิงก์บนเว็บไซต์ของคุณเอง ในเอกสารฉบับนี้เราจะพูดถึงลิงก์ที่มองเห็นได้
ซึ่งปรากฏบนหน้าเว็บ เมื่อคลิกลิงก์นี้ด้วยเมาส์ ผู้ใช้จะเข้าสู่หน้าอื่นของไซต์ของคุณหรือไซต์อื่นทันที
ตัวอย่างที่ 1
ในตัวอย่างนี้:
เอ - แท็ก href เป็นคุณลักษณะ,
ภาษา HTML http://ru.site/articles - นี่คือที่อยู่ URL
หน้าหนึ่งของเว็บไซต์ของเรา
และวลี “บทความเกี่ยวกับวิธีสร้างเว็บไซต์ในระบบ panweb ด้วยตัวคุณเองและฟรี” คือข้อความของไฮเปอร์ลิงก์ที่ผู้ใช้เว็บไซต์ของคุณจะมองเห็นได้
ไฮเปอร์ลิงก์ในหน้าต่างใหม่ ไฮเปอร์ลิงก์อาจปรากฏต่อผู้ใช้ในรูปแบบที่แตกต่างกัน บางครั้งเวลาเปิดเพจที่มีลิงค์พาไปหน้าใหม่ แทนที่อันเก่า และเพื่อกลับไปสู่หน้าก่อนหน้า
คุณต้องพิมพ์ที่อยู่ในเบราว์เซอร์หรือคลิกที่ไอคอน "ย้อนกลับ"
สิ่งนี้ไม่สะดวกสำหรับผู้ใช้เสมอไป เว็บมาสเตอร์จำนวนมากต้องการสร้างไฮเปอร์ลิงก์เพื่อให้หน้าที่นำไปเปิดในหน้าต่างเบราว์เซอร์ใหม่
ตัวอย่างที่ 2
บทความเกี่ยวกับวิธีสร้างเว็บไซต์โดยใช้ระบบ panweb ด้วยตัวเองและฟรี
ข้อแตกต่างเพียงอย่างเดียวคือหน้าที่ลิงค์นำไปสู่จะเปิดในหน้าต่างใหม่วิธีสร้างไฮเปอร์ลิงก์บนเว็บไซต์ที่สร้างในระบบ
แพนเว็บ วิธีสร้างไฮเปอร์ลิงก์บนเว็บไซต์ที่สร้างในระบบหากคุณสร้างเว็บไซต์ของคุณด้วยเครื่องมือสร้างเว็บไซต์ฟรี
ไปที่แผงแก้ไขของเว็บไซต์ของคุณ ในหน้าต่าง "โหมดแก้ไขข้อความ" คลิกที่ "html" โหมดแก้ไขเนื้อหาข้อความใน "html" จะเปิดขึ้น:
วันที่ดีทุกคนของฉัน เพื่อนรักและผู้อ่าน ฉันหวังว่าคุณจะตัดสินใจเข้าร่วมการแข่งขันของฉันและกำลังเขียนเกี่ยวกับเส้นทางการเขียนบล็อกของคุณอยู่แล้ว ฉันอยากจะศึกษาภาษา html ต่อไป และวันนี้ฉันอยากจะบอกคุณเกี่ยวกับองค์ประกอบที่สำคัญที่สุดอย่างหนึ่ง นั่นคือไฮเปอร์ลิงก์
ใช่ หากไม่มีไฮเปอร์ลิงก์ดังกล่าว อินเทอร์เน็ตคงไม่สะดวกนัก ไม่ ฉันกำลังโกหก มันไม่ง่ายเลยที่จะนำทางเลย คุณจินตนาการถึงอินเทอร์เน็ตที่ไม่มีพวกเขาได้ไหม? โดยส่วนตัวแล้วฉันไม่ทำ
และวันนี้เราจะมาเรียนรู้วิธีการแทรกไฮเปอร์ลิงก์ใน html แต่ก่อนอื่นฉันอยากจะถามคุณว่า: คุณรู้หรือไม่ว่าไฮเปอร์ลิงก์คืออะไรและแตกต่างจากอย่างไร ลิงค์ปกติ- จริงๆ แล้วทุกอย่างเป็นเรื่องง่ายที่นี่ ลิงก์คือข้อมูลง่ายๆ ที่อ้างอิงถึงเอกสาร ในเวลาเดียวกันคุณไม่สามารถคลิกข้อความนี้ได้ (ไม่มีอะไรเกิดขึ้น) แต่คุณรู้ว่าจะหาข้อมูลได้ที่ไหน
ตัวอย่าง: คุณสามารถเรียนรู้วิธีไฮไลต์ทรงผมใน Photoshop ได้ที่ //site/adobe-photoshop/kak-vydelit-volosy/
ไฮเปอร์ลิงก์เป็นข้อความเดียวกัน แต่สาระสำคัญคือคุณสามารถคลิกที่ข้อความนี้และไปที่หน้าไซต์หรือวัตถุอื่น ๆ ที่ต้องการ ยิ่งกว่านั้นข้อความอาจเป็นอะไรก็ได้ในขณะที่ที่อยู่นั้นเขียนแยกกันภายในและอาจแตกต่างไปจากเดิมอย่างสิ้นเชิง แต่อาจเป็นไปได้ว่าในการพูดภาษาพูดพวกเขายังคงเรียกง่ายๆว่าลิงก์ นี่คือตัวอย่างของไฮเปอร์ลิงก์:
คุณสามารถอ่านเกี่ยวกับวิธีการเน้นสีผมอย่างเหมาะสมใน Photoshop ได้ในบทช่วยสอนของฉัน
โอ้ดี. ทฤษฎีที่ดี. ตอนนี้เรามาดูการฝึกฝนกันดีกว่าและดูว่าใครเป็นผู้รับผิดชอบเรื่องทั้งหมดนี้
รับผิดชอบไฮเปอร์ลิงก์ แท็กที่จับคู่แต่โดยตัวมันเองมันไม่ได้แสดงถึงสิ่งใดเลย มันจะไปพร้อมกับแอตทริบิวต์เสมอ และใน ในกรณีนี้เราจำเป็นต้องเขียน href เดียวกันนี้อย่างต่อเนื่อง ในค่าแอตทริบิวต์เราใส่ลิงก์ไปยังทรัพยากรที่ต้องการ และในเนื้อหานั้นเราเขียนข้อความเองซึ่งควรจะคลิกได้ (ทำงานเมื่อคลิก) ดูตัวอย่างแล้วฉันคิดว่าคุณจะเข้าใจทุกอย่าง
เครื่องมือค้นหายานเดกซ์
ตามที่คุณเข้าใจในตัวอย่างนี้ฉันเขียนว่าเมื่อคุณคลิกที่ข้อความ "เครื่องมือค้นหา Yandex" บุคคลจะถูกส่งไปยังที่อยู่ที่เขียนด้วยค่าของแอตทริบิวต์ href
ฉันคิดว่าหลายท่านคงรู้ว่ามีลิงค์ภายในและภายนอก ลิงก์ภายในดำเนินการภายในไดเร็กทอรีเดียวนั่นคือเว็บไซต์และลิงก์ภายนอกนำไปสู่บางส่วน ทรัพยากรของบุคคลที่สาม- และตอนนี้ฉันจะแสดงให้คุณเห็นวิธีการทำทั้งสองอย่าง
ไฟล์อยู่ในโฟลเดอร์เดียวกัน
แต่การเปลี่ยนแปลงดังกล่าวจะได้ผลหากไฟล์ที่คุณกำลังลิงก์ไปนั้นอยู่ในโฟลเดอร์เดียวกันกับไฟล์ที่คุณกำลังวางลิงก์ สำหรับตัวเลือกอื่นๆ ทุกอย่างจะแตกต่างกันเล็กน้อย
ไฟล์ในโฟลเดอร์อื่น
- เปิดไฟล์ pushkin.html ใน Notepad++
- ตอนนี้ค้นหาคำว่ารูปถ่ายแล้วห่อไว้ในแท็ก<href> .
- ตอนนี้ให้ความสนใจ! ในค่าแอตทริบิวต์ เราระบุเส้นทางที่เกี่ยวข้องกับไฟล์ที่กำลังแก้ไข นั่นคือ pushkin.html เอง คุณควรจะได้สิ่งนี้:
เราทำอะไรไปแล้วบ้าง? และเราทำสิ่งต่อไปนี้: เนื่องจากเส้นทางสู่ภาพถ่ายนั้นแยกจากกัน โฟลเดอร์ imgซึ่งอยู่ในโฟลเดอร์เดียวกันกับไฟล์ pushkin.html จากนั้นในค่าแอตทริบิวต์เราต้องเขียนชื่อของโฟลเดอร์ก่อนจากนั้นจึงใช้เครื่องหมายทับ (/) ชื่อเต็มของเอกสาร (ในกรณีของเรา ภาพถ่าย)
ตอนนี้ให้บันทึกและเรียกใช้ไฟล์ pushkin.html ในเบราว์เซอร์ของคุณ คุณจะเห็นว่าคำว่า "ภาพถ่าย" ถูกเน้นด้วยสีน้ำเงินและสามารถคลิกได้ ซึ่งหมายความว่าเมื่อคลิกที่ลิงก์นี้ เราจะไปที่ไฟล์ fofo.jpg ซึ่งอยู่ในโฟลเดอร์ img
แล้วยังไงล่ะ? ทุกอย่างชัดเจนหรือไม่? หากมีอะไรเกิดขึ้น อย่าลังเลที่จะถาม
การเปลี่ยนแปลงภายนอก
และแน่นอนว่าเราอดไม่ได้ที่จะพูดถึง ลิงค์ภายนอกหลังจากคลิกที่เราจะถูกนำไปยังไซต์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิง แต่ไม่มีอะไรซับซ้อนที่นี่ ประเด็นทั้งหมดคือคุณใส่ค่า href ที่อยู่แบบเต็มเว็บไซต์หรือหน้าเว็บ ฉันแสดงตัวอย่างกับ Yandex ด้านบน แต่นี่เป็นอีกตัวอย่างหนึ่ง:
ฉันจะเรียนเพื่อเป็นผู้เชี่ยวชาญด้านโครงการเพื่อสังคม
ที่นี่เราไปถึง หน้าเฉพาะไซต์เฉพาะ
เปิดในหน้าต่างใหม่
ตามค่าเริ่มต้น เมื่อคุณคลิกลิงก์ เอกสารจะเปิดขึ้นในหน้าต่างเดียวกับหน้าของคุณ เช่น เพจของคุณจะถูกปิดอย่างดุเดือด และนี่ก็ไม่ดี โดยเฉพาะเพื่อการเลื่อนตำแหน่ง โครงการเนื้อหาหรือบล็อก ขอแนะนำให้ตรวจสอบให้แน่ใจว่าเมื่อคุณคลิกลิงก์ เอกสารจะเปิดขึ้นในหน้าต่างหรือแท็บใหม่โดยไม่ปิดหน้าของคุณ
สิ่งนี้จะช่วยเราได้ คุณลักษณะเป้าหมายด้วยค่า "_blank" ไม่มีอะไรซับซ้อนที่นี่ คุณเพียงแค่ต้องแทรกสิ่งนี้ลงในแท็กเปิด หลังค่าแอตทริบิวต์ href ลองใช้ข้อความที่ตัดตอนมาจากไฟล์ lukomorye.html ซึ่งเราได้สร้างลิงก์ไปยังหน้า pushkin.html ตอนนี้เราจะเขียนแอตทริบิวต์นี้เท่านั้น มันควรมีลักษณะเช่นนี้:
จากบทกวี Ruslan และ Lyudmila (ผู้แต่ง - A.S. Pushkin)
ทุกอย่างชัดเจนที่นี่ ตอนนี้เมื่อคุณคลิกที่เนื้อหา หน้าที่ต้องการเปิดในหน้าต่างใหม่ สิ่งนี้จำเป็นมาก เพราะถ้าคุณไม่ลงทะเบียน ผู้ใช้ก็จะออกจากเพจของคุณไป ดังนั้นไม่ว่าในกรณีใดเขาจะยังคงอยู่เฉพาะในกรณีที่เขาไม่ได้ปิดโดยเฉพาะ พยายามทำทุกอย่างด้วยตัวเองเพียงแค่ทำให้ทุกอย่างสวยงามด้วยมือของคุณเอง ไม่จำเป็นต้องคัดลอกและวาง
บางอย่างเช่นนี้ ดูเหมือนว่าฉันได้บอกคุณทุกสิ่งที่สำคัญที่สุดแล้ว แต่ถ้าคุณต้องการก้าวไปในทิศทางนี้และเรียนรู้ HTML และ CSS เพื่อสร้างเว็บไซต์ บล็อก และแม้แต่ร้านค้าออนไลน์ระดับมืออาชีพ อย่าลืมลองดู หลักสูตรวิดีโอที่ยอดเยี่ยมในหัวข้อนี้ บทเรียนนี้ยอดเยี่ยมมากและได้รับการสอนสำหรับผู้ที่ยังน้อยหรือไม่คุ้นเคยกับการสร้างเว็บไซต์
นี่เป็นการสรุปบทเรียนของเราสำหรับวันนี้ ฉันหวังว่าคุณจะชอบบทความของฉันและจะดีใจถ้าคุณเป็นผู้อ่านประจำของฉัน ดังนั้นอย่าลืมสมัครรับข้อมูลอัปเดตบล็อกของฉันเพื่อให้คุณไม่พลาดสิ่งที่น่าสนใจ ฉันขอให้คุณประสบความสำเร็จในทุกความพยายามของคุณ ลาก่อน!
ขอแสดงความนับถือ มิทรี คอสติน
- ไฮไลต์ลิงก์
- คลิก คลิกขวาเมาส์เพื่อแสดงเมนู
- จากนั้นคลิกซ้ายที่ "คัดลอก" ในเมนูที่ปรากฏขึ้น:
เรากลับไปที่ Subscribe.ru ในกลุ่ม “ ความรู้ด้านคอมพิวเตอร์- ในความคิดเห็นคุณควรเขียนข้อความหรือใส่ลิงก์เช่น http://..... ซึ่งในกรณีนี้จะถูกมองว่าเป็น ข้อความธรรมดา- เลือกข้อความนี้ (ดังที่แสดงด้านล่าง) และไอคอน "ลูกโซ่" (วงกลมสีแดงในภาพ) จะกลายเป็น "ใช้งานอยู่":
คลิกซ้ายที่ไอคอน "ลูกโซ่" ซึ่งจะเปิดหน้าต่าง "เพิ่ม/แก้ไขลิงก์" ที่นี่ในหน้าต่าง "ที่อยู่ลิงก์" คุณต้องป้อนที่อยู่ลิงก์ที่คัดลอกไว้ก่อนหน้านี้ซึ่งอยู่ในคลิปบอร์ดแล้ว ในการดำเนินการนี้คุณสามารถคลิกขวาและในเมนูที่ปรากฏขึ้นให้คลิกที่ตัวเลือก "วาง" ในหน้าต่าง "เปิดใน..." ควรตั้งค่าเป็น "หน้าต่างใหม่" จะดีกว่า
ตอนนี้สิ่งที่เหลืออยู่คือคลิกที่ปุ่ม "แทรก" ดังที่สมาชิกกลุ่มคนหนึ่งพูด พวกเขาจัดการลิงก์ "สีน้ำเงิน" ได้ เช่น มันกลายเป็นไฮเปอร์ลิงก์ที่มีไฮไลต์สีน้ำเงินที่มีลักษณะเฉพาะ
สวัสดีผู้เยี่ยมชมที่รัก!
ในบทความนี้ ฉันจะแสดงวิธีเพิ่มลิงก์ไปยังเว็บไซต์ในรูปแบบของไฮเปอร์ลิงก์ รูปภาพ และปุ่มที่คุณสามารถตั้งค่าการออกแบบของคุณเองได้โดยใช้ สไตล์ CSS- ตัวเลือกทั้ง 3 นี้ถูกใช้บ่อยมากและมีผลค่อนข้างดีเมื่อผู้เยี่ยมชมใช้
เริ่มจากสิ่งที่ง่ายที่สุดและไปถึงจุดที่ซับซ้อน
ลิงก์ปกติและไฮเปอร์ลิงก์
http://site/poleznoe/kak-sdelat-ssylku-na-sait.html
http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html |
ตัวเลือกนี้มีอยู่ แต่มี ข้อเสียเปรียบที่สำคัญหากเรากำลังพูดถึงประสิทธิภาพของลิงก์ดังกล่าว ไม่สามารถคลิกได้นั่นคือคุณไม่สามารถไปได้ด้วยการคลิกเมาส์ง่ายๆ ตัวเลือกนี้ค่อนข้างยากสำหรับผู้เยี่ยมชมที่จะรับรู้
อีกสิ่งหนึ่งคือไฮเปอร์ลิงก์ซึ่งเมื่อคลิกจะเปลี่ยนเส้นทางไปยังเอกสารอื่นบนอินเทอร์เน็ตทั้งภายใน (ภายในไซต์เดียวกัน) และภายนอก (ไซต์อื่น) ตัวอย่างของลิงค์ดังกล่าวสามารถดูได้ด้านล่าง ลองคลิกลิงค์ดูครับ
หน้าหลักของทรัพยากรของฉันควรเปิดในแท็บใหม่ หากต้องการใช้ตัวเลือกนี้ คุณต้องใช้เครื่องมือของเครื่องยนต์หรือเขียนโค้ด HTML บรรทัดถัดไป.
คลิกที่นี่
ลิงค์ถูกสร้างขึ้นด้วยแท็กง่ายๆ ภายในมีที่อยู่ซึ่งผู้ใช้จำเป็นต้องเปลี่ยนเส้นทาง เช่นเดียวกับจุดยึดลิงก์ (ในตัวอย่างด้านบน จุดยึดคือวลี “คลิกที่นี่”) ซึ่งระบุข้อความลิงก์ที่อธิบายสิ่งที่คุณจะ ได้รับเมื่อคุณไปที่ที่อยู่นี้
หากคุณมีเว็บไซต์ธรรมดาที่สร้างด้วย HTML คุณควรเขียนโค้ดนี้ในตัวแก้ไขเพจ โดยเปลี่ยนที่อยู่ของฉันเป็นของคุณและระบุจุดยึดของคุณ มันจะมีลักษณะเช่นนี้
ภายในแท็กลิงก์ นอกจากนี้ยังมีแอตทริบิวต์สำหรับเปิดหน้าในแท็บใหม่
เป้าหมาย = "_ว่าง" |
สิ่งนี้สำคัญมากเช่นกัน ไม่แนะนำให้ทิ้งผู้เยี่ยมชมออกจากทรัพยากร แต่ควรทิ้งเขาไว้ โดยใช้ คุณลักษณะนี้คุณจะมั่นใจได้ว่าผู้เยี่ยมชมจะไม่ออกจากหน้าปัจจุบันโดยการคลิกลิงก์หลายลิงก์ในหน้าเดียว แต่ในขณะเดียวกันจะเปิดหน้าอื่น ๆ อีกมากมาย นี่เป็นสิ่งสำคัญหากคุณกำลังโปรโมตเว็บไซต์
คุณสามารถเพิ่มลงในลิงค์ แอตทริบิวต์ชื่อซึ่งเป็นแท็กส่วนหัวและเราให้ เครื่องมือค้นหาเข้าใจว่าลิงก์นำไปสู่จุดใด นอกจากนี้ แท็กนี้จะแสดง (หากลงทะเบียนไว้) เมื่อเราชี้ไปที่ลิงก์ในรูปแบบของคำแนะนำเครื่องมือ
ขอแนะนำให้เพิ่ม แท็กชื่อเพื่อให้ผู้เยี่ยมชมเห็นคำแนะนำเครื่องมือนี้เมื่อพวกเขาวางเมาส์เหนือและเข้าใจว่าพวกเขากำลังไปที่ใด ซึ่งทำได้ง่ายดายภายในแท็กเปิด ดังตัวอย่างด้านล่าง
เมื่อใช้เครื่องมือ เช่น WordPress การเพิ่มลิงก์ไปยังเว็บไซต์นั้นทำได้ง่ายมาก โดยไม่ต้องแก้ไขใดๆ ในโหมด html เครื่องมือแก้ไขโพสต์มีไอคอนพิเศษพร้อมไอคอนการเชื่อมต่อ
ในภาพ ฉันแสดงให้เห็นกระบวนการทั้งหมดในการเพิ่มการเชื่อมโยงระหว่างข้อความกับหน้าอื่น
- ขั้นแรก เลือกวลีที่คุณต้องการสร้างลิงก์
- คลิกที่ไอคอนเพิ่มการเชื่อมต่อ
- เราตั้งค่าพารามิเตอร์ลิงก์ (ที่อยู่ของหน้าที่คุณต้องการเปลี่ยนเส้นทางผู้ใช้ตลอดจนชื่อของลิงก์นั่นคือจุดยึดหากจำเป็น)
คุณไม่จำเป็นต้องป้อนชื่อลิงก์ เนื่องจากจะเป็นข้อความที่ถูกเลือกในขั้นตอนแรก ในภาพฉันแสดงการเพิ่มลิงค์จากไปแล้ว หน้าที่มีอยู่เว็บไซต์. คุณสามารถทำได้ จากนั้นเมื่อคุณคลิกที่รายการใดรายการหนึ่งจากรายการ URL และชื่อจะถูกป้อนโดยอัตโนมัติ
สามารถป้อน URL บนเว็บไซต์ภายนอกได้ หากจำเป็น ให้ป้อนที่อยู่แบบเต็ม (สัมบูรณ์) ของหน้า หากต้องการเปิดหน้าในแท็บใหม่ ไม่จำเป็นต้องป้อนแอตทริบิวต์ด้วยตนเอง เครื่องยนต์ให้ตัวเลือกนี้โดยใช้ช่องทำเครื่องหมายเดียว (ดูภาพด้านบน)
สูงกว่าเล็กน้อยฉันพูดเกี่ยวกับที่อยู่ที่แน่นอน ซึ่งหมายความว่าที่อยู่แบบเต็มของหน้าที่คุณต้องการเปลี่ยนเส้นทางจะถูกเขียนไว้ภายในลิงก์ ไม่ว่าจะเป็นแหล่งข้อมูลของเราหรืออื่น ๆ
นอกจากนี้ยังมีที่อยู่แบบสัมพันธ์ซึ่งไม่จำเป็นต้องป้อนที่อยู่แบบเต็ม เพียงระบุเส้นทางไปยังไดเร็กทอรีหรือหน้าของไซต์โดยไม่ต้องระบุก็เพียงพอแล้ว ชื่อโดเมน- ลิงก์ดังกล่าวใช้ได้กับเพจภายในแหล่งข้อมูลเดียวเท่านั้น คุณไม่สามารถอ้างถึงโครงการภายนอกเช่นนั้นได้
หากคุณต้องการเจาะลึกกระบวนการสร้างสรรค์ ที่อยู่ที่เกี่ยวข้องฉันขอแนะนำอย่างยิ่ง อ่านบทความนี้บนแหล่งข้อมูลอื่น ทุกอย่างถูกจัดวางอย่างเจ๋งมาก
ลิงค์รูปภาพ
ลิงก์ในรูปแบบของรูปภาพยังใช้กันอย่างแพร่หลายแม้ว่าจะควรใช้ตามวัตถุประสงค์ที่ต้องการเท่านั้น หากเราเป็นลิงก์ธรรมดาไปยังหน้าอื่น ๆ ในไซต์ของเรา ก็ไม่ควรสร้างลิงก์เหล่านั้นด้วยรูปภาพ เนื่องจากไม่ชัดเจนเสมอไปว่าคุณต้องคลิกที่รูปภาพเพื่อไปยังหน้าใดหน้าหนึ่ง
ขอแนะนำให้ทำเช่นนี้เมื่อคุณต้องการโฆษณาใครสักคน เช่น หลักสูตรวิดีโอของใครบางคน ในกรณีนี้ คุณจะต้องระบุไฮเปอร์ลิงก์ปกติ ตามด้วยลิงก์รูปภาพทันที ในกรณีนี้ รูปภาพจะนำไปสู่เว็บไซต์ของหลักสูตรที่สามารถซื้อได้ชัดเจนยิ่งขึ้น
หากเราใช้โหมด html หลักการของการสร้างโครงสร้างลิงก์จะเหมือนกันทุกประการ รวมถึงแอตทริบิวต์ทั้งหมดด้วย ข้อแตกต่างเพียงอย่างเดียวคือจุดยึดลิงก์ ซึ่งดูเหมือนโค้ดสำหรับรูปภาพนั้น ในกรณีก่อนหน้านี้มีข้อความธรรมดา
ในทางปฏิบัติมันจะเป็นแบบนี้
อย่างที่คุณเห็น ภายในแท็กลิงก์เปิดและปิดจะมีโค้ดรูปภาพซึ่งมีลักษณะเฉพาะของตัวเองด้วย คุณต้องใส่แท็กชื่อเดียวกัน ระบุเส้นทางไปยังรูปภาพบนโฮสต์หรือบนแหล่งข้อมูลอื่น นอกจากนี้ยังควรระบุขนาดภาพ (กว้าง - กว้าง, สูง - สูง) และมันก็คุ้มค่าที่จะลงทะเบียนอย่างแน่นอน แอตทริบิวต์สำรองซึ่งทำหน้าที่เป็นคำอธิบายสำหรับรูปภาพ หากคุณจดทุกอย่างไว้ การปรับรูปภาพให้เหมาะสมก็อยู่ในเกณฑ์มาตรฐาน
นี่คือลักษณะที่ปรากฏในโหมด html ฉันแบ่งโค้ดออกเป็น 3 ส่วนเพื่อให้โครงสร้างลิงก์เข้าใจได้ง่ายขึ้น (รูปภาพที่คลิกได้)
ปัญหาเดียวที่นี่คือการป้อนโค้ดของรูปภาพซึ่งใช้เป็นจุดยึดให้ถูกต้อง
ปุ่มลิงก์โดยใช้สไตล์ CSS
หากคุณต้องการทำอะไรที่แตกต่างออกไป ตัวเลือกนี้ก็เกิดขึ้นเช่นกัน นอกจากนี้ยังช่วยให้คุณเปลี่ยนสไตล์เพื่อที่ว่าเมื่อคุณวางเมาส์เหนือปุ่ม ทั้งตัวปุ่มเองและสีของคำจารึกที่จะอยู่ข้างในก็จะเปลี่ยนไป หากคุณถ่ายภาพก็เป็นไปไม่ได้เสมอไปที่จะตระหนักถึงสิ่งนี้ ด้วยสไตล์ อะไรก็เป็นไปได้
ข้อดีอีกอย่างที่ดีมากคือเราสามารถวางปุ่มไว้ตรงกลางได้อย่างเคร่งครัดและจะคลิกได้เฉพาะบริเวณปุ่มเท่านั้น หากเราถ่ายภาพ เมื่อเราวางไว้ตรงกลาง ความกว้างทั้งหมดของพื้นที่เนื้อหารอบๆ รูปภาพจะสามารถคลิกได้ บางครั้งข้อบกพร่องดังกล่าวส่งผลให้เกิดการคลิกรูปภาพโดยไม่ตั้งใจ และจริงๆ แล้วเป็นเรื่องที่น่ารำคาญ
ตัวอย่างเช่น ฉันสร้างสิ่งนี้ ปุ่มง่ายๆซึ่งนำไปสู่ หน้าแรกเว็บไซต์. คุณสามารถตรวจสอบการทำงานของมันได้
ถ้าคุณมอง ซอร์สโค้ดปุ่มแล้วคุณก็ง่ายมาก ข้อแตกต่างเพียงอย่างเดียวจากไฮเปอร์ลิงก์ทั่วไปคือการมีรหัสซึ่งถูกเพิ่มเข้าไปในแท็กเปิด และในทางกลับกัน สไตล์การออกแบบจะถูกเขียนลงในไฟล์ style.css
นี่คือโครงสร้างของปุ่มนั่นเอง
เราจะเห็นว่าทันทีหลังจากเปิดแท็กลิงก์ id="button" ถูกระบุ ซึ่งกำหนดสไตล์การออกแบบของตัวเอง โครงสร้างที่เหลือจะเหมือนกับไฮเปอร์ลิงก์
หลักการมีความชัดเจน ดังนั้นฉันจึงให้สไตล์ที่ฉันเพิ่มลงในปุ่มลิงก์นี้
/* รูปแบบปุ่มใน โหมดปกติ*/#button ( จอแสดงผล: block; width: 550px; /* ความกว้างของปุ่ม */height: 60px; /* height */สีพื้นหลัง: #ff4343; /* สีพื้นหลัง */text-shadow: 1px 1px #800909; /* เงาข้อความ */สี: #fff; /* สีข้อความ */border-style: solid; /* ประเภทเส้นขอบของปุ่ม */border-width: 1px; /* ความหนาของเส้นขอบของปุ่ม * /border-color: # db3a3a; /* สีของเส้นขอบ (กรอบ) ของปุ่ม */font-size: 18px; /* ขนาดข้อความ */line-height: 60px; น้ำหนักข้อความ */font-family: arial; /* ประเภทแบบอักษร */text-align: center; /* การจัดตำแหน่งข้อความ */text- ตกแต่ง: ไม่มี; /* การขีดเส้นใต้ข้อความ */margin: ปุ่มจากองค์ประกอบอื่น ๆ หน้า */text-transform: uppercase; /* เพื่อให้ตัวอักษรทั้งหมดเป็นตัวพิมพ์ใหญ่ หากไม่จำเป็น ให้ลบบรรทัด */) /* รูปแบบปุ่มเมื่อเลื่อนเมาส์ */#button:hover ( background-color : # f23333; ขนาดตัวอักษร: 19px;
ไฮเปอร์ลิงก์เป็นอย่างมาก เครื่องมือที่สะดวกซึ่งช่วยให้หลังจากคลิกที่ส่วนของข้อความหรือรูปภาพที่กำหนดแล้ว สามารถเปลี่ยนเส้นทางผู้อ่านไปยังแหล่งที่มาได้ ข้อมูลเพิ่มเติมภายในเอกสารเดียวกันหรือต่างกัน ทรัพยากรภายนอกบนอินเทอร์เน็ต นอกจากนี้การคลิกไฮเปอร์ลิงก์อาจทำให้เกิดบางอย่าง การกระทำพิเศษ- เช่นการดาวน์โหลดโปรแกรมเกี่ยวกับอะไร เรากำลังพูดถึงในเอกสาร
วิธีสร้างไฮเปอร์ลิงก์ใน Wordการตั้งค่าไฮเปอร์ลิงก์ในโปรแกรมแก้ไขข้อความ Word นั้นง่ายมาก จดที่อยู่ของหน้าอินเทอร์เน็ตที่คุณต้องการสร้างไฮเปอร์ลิงก์ในรูปแบบ http://adress.ru เว้นวรรคหลังจากนั้นหรือกดปุ่ม Enter และ โปรแกรมแก้ไขข้อความแปลงเป็นทันที ไฮเปอร์ลิงก์ที่ใช้งานอยู่- นี่เป็นตัวเลือกที่ง่ายที่สุด แต่ไม่ยืดหยุ่นที่สุด
เพื่อใช้ประโยชน์จากคุณสมบัติทั้งหมดสำหรับการทำงานกับไฮเปอร์ลิงก์ใน Word และสามารถตั้งค่าให้เป็นส่วนหนึ่งของข้อความภายในเอกสาร ไฟล์และหน้าเว็บ เอกสารใหม่และอีเมล คุณต้องหันไปใช้เครื่องมือที่ออกแบบมาเป็นพิเศษเพื่อจุดประสงค์นี้
โดยไปที่ส่วนนี้ แทรกและคลิกที่ปุ่ม ไฮเปอร์ลิงก์.
นี่จะเป็นการเปิดตัวช่วยสร้างไฮเปอร์ลิงก์ ซึ่งจะช่วยคุณลิงก์ข้อความในเอกสารไป แหล่งต่างๆข้อมูลเพิ่มเติม
- ด้วยไฟล์หรือหน้าเว็บเพื่อเชื่อมต่อกับหน้าเว็บในบรรทัด ข้อความป้อนข้อมูลที่จะปรากฏในส่วนที่มองเห็นได้ของไฮเปอร์ลิงก์ (เช่น เป็นอย่างไร) และในฟิลด์ ที่อยู่การบันทึกลิงก์ที่แน่นอนในรูปแบบของที่อยู่อินเทอร์เน็ต (เช่น http://site) เมื่อตั้งค่าลิงก์ไปยังไฟล์ ให้เลือกลิงก์นั้นในไดรฟ์คอมพิวเตอร์ของคุณและป้อนข้อความลิงก์ด้วย
- โดยมีสถานที่ในเอกสารไฮเปอร์ลิงก์ใน Word สามารถเชื่อมโยงกับตำแหน่งต่อไปนี้ในเอกสาร: จุดเริ่มต้นของเอกสาร ส่วนหัว และบุ๊กมาร์กภายใน ในกรณีนี้ ต้องมีส่วนหัวและบุ๊กมาร์กอยู่ในเอกสารอยู่แล้ว สิ่งที่คุณต้องทำคือเลือกตำแหน่งในเอกสารเพื่อติดตั้งไฮเปอร์ลิงก์และป้อนข้อความ
- พร้อมเอกสารใหม่คุณสามารถเชื่อมโยงไฮเปอร์ลิงก์ไปยังเอกสารใหม่ที่เป็นหนึ่งในนั้นได้ ไฟล์มาตรฐานสำนักงาน. เมื่อต้องการทำเช่นนี้ก็เพียงพอที่จะระบุ เส้นทางเต็มไปยังไฟล์บนคอมพิวเตอร์และข้อความลิงก์นั้นเอง
- ด้วยที่อยู่อีเมลในกรณีนี้เมื่อคุณคลิกที่ลิงค์ดังกล่าว โปรแกรมจะเปิดขึ้นเพื่อใช้งาน ทางอีเมลและมีการสร้างตัวอักษรใหม่สำหรับผู้รับที่ระบุในไฮเปอร์ลิงก์ สิ่งที่เหลืออยู่คือพิมพ์ข้อความของตัวอักษรแล้วกดปุ่มเพื่อส่ง
