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

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

สร้างไฮเปอร์ลิงก์ในงานนำเสนอ

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

• ที่อยู่อินเทอร์เน็ต
• เอกสาร;
• ที่อยู่อีเมล
• สไลด์การนำเสนอ
• สไลด์ของการนำเสนออื่น

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

• ไปยังที่อยู่อีเมล
• ไปยังหน้าเว็บหรือไฟล์
• ไปยังเอกสารใหม่
• ไว้ในเอกสารฉบับนี้

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

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

การสร้างไฮเปอร์ลิงก์ใน Word

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

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

การสร้างไฮเปอร์ลิงก์ใน HTML

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

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

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

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

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

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

หน้า 15

โค้ด html ส่วนนี้จะสร้างย่อหน้าที่มีลิงก์ ลิงก์ชี้ไปที่หน้าเว็บ page15.html ซึ่งอยู่ในโฟลเดอร์แคตตาล็อกซึ่งจัดเก็บไว้ในโฟลเดอร์รูทของเว็บไซต์ www.site.ru

หน้าหนังสือ 15

หากเพจไม่ได้ใช้ สไตล์ CSSและไม่ใช้แอตทริบิวต์เพิ่มเติม จากนั้นไฮเปอร์ลิงก์บนเพจจะแสดงดังต่อไปนี้ตามค่าเริ่มต้น:

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

ที่อยู่อินเทอร์เน็ต

ที่อยู่แบบเต็มประกอบด้วยที่อยู่อินเทอร์เน็ตของเว็บเซิร์ฟเวอร์ และเส้นทางไปยังไฟล์ที่ต้องได้รับ ตัวอย่างเช่น:

http://www.site.ru/catalog/page15.html

ที่นี่ www.site.ru คือที่อยู่ของเว็บเซิร์ฟเวอร์ และ /catalog/page15.html คือเส้นทางไปยังไฟล์บนเซิร์ฟเวอร์นี้ โดยทั่วไป ที่อยู่อินเทอร์เน็ตแบบเต็มมักจะใช้เฉพาะเมื่อจำเป็นในการสร้างไฮเปอร์ลิงก์ที่ชี้ไปยังแหล่งข้อมูลใดๆ ที่อยู่บนเว็บไซต์อื่น

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

มีที่อยู่อินเทอร์เน็ตแบบสั้น แน่นอนและ ญาติ- ที่อยู่ที่แน่นอนจะระบุเส้นทางไปยังไฟล์เป้าหมายที่เกี่ยวข้องกับโฟลเดอร์รูทของไซต์ ที่อยู่ดังกล่าวขึ้นต้นด้วยสัญลักษณ์ / (เครื่องหมายทับ) ซึ่งหมายถึง โฟลเดอร์รูท- ตัวอย่างเช่น ที่อยู่ "/page15.html" ชี้ไปที่ไฟล์ page15.html ซึ่งจัดเก็บไว้ในโฟลเดอร์รากของไซต์ หรือที่อยู่ “/catalog/page.html” ชี้ไปที่ไฟล์ page.html ซึ่งอยู่ในโฟลเดอร์แคตตาล็อกซึ่งซ้อนอยู่ในโฟลเดอร์รูทของไซต์

ที่อยู่สัมพัทธ์หมายถึงเส้นทางของไฟล์ที่สัมพันธ์กับไฟล์หน้าเว็บปัจจุบัน ที่อยู่ที่เกี่ยวข้องไม่มีอักขระสแลชนำหน้า ลองดูตัวอย่างบางส่วน

ตัวอย่างเช่น ที่อยู่ "page.html" ชี้ไปที่ไฟล์ที่อยู่ในโฟลเดอร์เดียวกันกับไฟล์ของหน้าเว็บปัจจุบัน และที่อยู่ “catalog/page.html” จะเปิดไฟล์ page.html ที่จัดเก็บไว้ในโฟลเดอร์แคตตาล็อกซึ่งซ้อนอยู่ในโฟลเดอร์ที่จัดเก็บไว้ หน้าปัจจุบัน- การใช้จุดสองจุดที่จุดเริ่มต้นของที่อยู่ คุณสามารถระบุโฟลเดอร์ของระดับการซ้อนก่อนหน้าได้ ตัวอย่างเช่น ที่อยู่ “.../page.html” ชี้ไปที่หน้า page.html ที่จัดเก็บไว้ในโฟลเดอร์ที่ซ้อนโฟลเดอร์ที่มีหน้าเว็บปัจจุบันอยู่

เชื่อมโยงไปยังอีเมล

โดยการใช้ ภาษา HTMLสามารถสร้างได้ ไฮเปอร์ลิงก์ทางไปรษณีย์คลิกเพื่อเปิดโปรแกรม โปรแกรมรับส่งเมล- เมื่อระบุที่อยู่ในแอตทริบิวต์ hrefก่อนอีเมลที่คุณต้องใส่ "เมลโต:", เช่น. บางอย่างเช่นนี้: href="mailto: [ป้องกันอีเมล]“ และหลังลำไส้ใหญ่ก่อน ที่อยู่ทางไปรษณีย์ไม่ควรมีช่องว่าง

เขียนจดหมาย

วิธีทำรูปภาพเป็นลิงค์

นี่คือที่ฉันพูดถึงการสร้างไฮเปอร์ลิงก์ให้จบ ฉันจะเตือนคุณถึงประเด็นหลักเท่านั้น:

1. ใช้ในการสร้างลิงค์ แท็กที่จับคู่ ด้วยแอตทริบิวต์ href ที่จำเป็น ซึ่งค่านี้มีที่อยู่ของหน้า Landing Page: ข้อความ;
2. เมื่อสร้างลิงก์ไปยังเมล คุณต้องใส่ "mailto:" ในแอตทริบิวต์ href หน้าที่อยู่อีเมล: เขียนจดหมาย;
3. หากคุณต้องการสร้าง ลิงค์รูปภาพ,จากนั้นเราก็ใส่แท็ก img ไว้ในแท็ก : .

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

การแทรกไฮเปอร์ลิงก์

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

หน้าแรกของ Google

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

โครงสร้างแท็ก ...

คุณจะสังเกตเห็นว่าแท็ก - จับคู่: ต้องมีแท็กปิด.

href—แอตทริบิวต์แท็ก ระบุวัตถุประสงค์ของลิงก์

https://google.com/ - ค่าแอตทริบิวต์ซึ่งมี URL ของทรัพยากรที่จะเกิดการเปลี่ยนแปลง ประกอบด้วยสองเท่าหรือ คำพูดเดียว- ขึ้นอยู่กับโครงสร้างการซ้อนแท็กตาม กฎ HTML.

หน้าแรกของ Google

โครงสร้างทั้งหมดนี้เรียกว่า องค์ประกอบเอกสารเว็บ

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

หน้าแรก Google

ที่นี่: องค์ประกอบ

หน้าแรก Google

มีองค์ประกอบที่ซ้อนกัน

Google

ไฮเปอร์ลิงก์แบบสัมบูรณ์

protocol://ชื่อโดเมน/เส้นทางไฟล์

ตัวอย่างที่อยู่ของเครื่องมือค้นหาที่ใช้กันทั่วไปในอเมริกา: https://aol.com - แบบสัมบูรณ์ เนื่องจากมีโดเมน name.com

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

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

มีโปรโตคอลอื่นๆ อีกหลายประการ วัตถุประสงค์พิเศษ(gopher, telnet) ซึ่งค่อนข้างหายากการใช้งานซึ่งต้องใช้ความรู้พิเศษในการเขียนโปรแกรมหรือการบริหารระบบ

ไฮเปอร์ลิงก์แบบสัมพันธ์

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

เมื่อสร้างพจนานุกรมออนไลน์ โปรแกรมเมอร์จะวางตัวอักษรไว้ที่จุดเริ่มต้นของหน้า และหากไม่ใช่เพื่อใช้ลิงก์ ผู้ใช้จะต้องหมุนวงล้อของเมาส์เป็นเวลานานมากจึงจะถึงตัวอักษร “ฉัน” ".

ไปที่ตัวอักษร I

ที่ไหน ใช่แล้วเรียกว่า สมอ,ก ไปที่ตัวอักษร I- สมอปลายทาง แนะนำให้ใช้พุกเพื่อแสดงจุดยึดอย่างถูกต้อง ตัวอักษรละตินและตัวเลขจึงไม่ควรเขียนว่า "ฉัน" แม้จะชัดเจนกว่าก็ตาม

ตอนนี้เพื่อที่จะเปลี่ยนจากตัวอักษรที่จุดเริ่มต้นของหน้าเป็นตัวอักษร "ฉัน" คุณต้องยึดจุดยึดในตำแหน่งในเอกสาร HTML โดยที่คำที่ขึ้นต้นด้วยตัวอักษร "ฉัน" เริ่มต้น:

จดหมายฉัน

มีเครื่องหมายแฮชอยู่ด้านหน้าจุดยึดโดยที่การเปลี่ยนไปใช้ตัวอักษรจะไม่ทำงาน

ที่อยู่แบบสัมพันธ์เมื่อสร้างไซต์

อัลกอริธึมที่สะดวกและเป็นที่ยอมรับโดยทั่วไปสำหรับการสร้างเว็บไซต์โดยโปรแกรมเมอร์:

• สร้างโฟลเดอร์บนคอมพิวเตอร์ของคุณและวางไว้ในตำแหน่ง เข้าถึงได้อย่างรวดเร็วเพื่อความสะดวก
• การสร้างโฟลเดอร์หลักในโฟลเดอร์นี้
• การสร้างเว็บเพจรอง (index.html/page2)
• และการจัดวางไฟล์กราฟิกในนั้น
• การสร้างโฟลเดอร์และวางวัตถุอื่น ๆ ไว้ในนั้น (เช่นไฟล์สำหรับดาวน์โหลด)
• เติมเนื้อหาลงในไซต์
• โฮสต์ไฟล์ไซต์

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

สมมติว่าโปรแกรมเมอร์ได้สร้างหน้าหลักของไซต์ index.html ซึ่งมีลิงก์ไปยังหน้าอื่น page2.html ตกแต่งด้วยรูปภาพ img.png แล้ว เส้นทางสัมพัทธ์รูปภาพนี้จะมีลักษณะดังนี้:

รูปภาพ

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

วิธีการติดตามไฮเปอร์ลิงก์

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

ไวยากรณ์แอตทริบิวต์ เป้า:

หน้าแรกของ Google

หน้าแรกของ Google จะเปิดขึ้นในหน้าต่างใหม่

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

สีของไฮเปอร์ลิงก์

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

กำหนดสีของลิงก์ในแท็ก โดยใช้คุณลักษณะและคุณค่าของมัน ซึ่งในนั้น สี HTMLวี ระบบอาร์จีบี(#00FF00) หรือระบุชื่อสีโดยตรง (“สีเขียว”) แอตทริบิวต์สำหรับลิงก์มีสามประเภท:

• link — กำหนดสีของลิงค์ที่ยังไม่ได้เยี่ยมชม
• vlink - กำหนดสีของลิงค์ที่ผู้ใช้ติดตามไปแล้ว
• alink - กำหนดสีของลิงค์ในขณะที่เปลี่ยนไปยังหน้าอื่น สิ่งนี้เกิดขึ้นอย่างรวดเร็ว ดังนั้นจึงไม่สามารถรับผลกระทบนี้ได้เสมอไป

ตัวอย่างมาร์กอัป:

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

ไฮเปอร์ลิงก์กราฟิก

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

วิธีที่ใช้กันอย่างแพร่หลายในการเปลี่ยนปุ่มคงที่ ( ) ไปจนถึงกราฟิกที่สวยงามที่สร้างโดยนักออกแบบเว็บไซต์ในโปรแกรมแก้ไขกราฟิก (GIMP, Photoshop)

ในการแทรกกราฟิกเป็นไฮเปอร์ลิงก์ไปยังหน้าไซต์ จะใช้ไวยากรณ์เดียวกัน แต่แทนที่จะใช้ข้อความ จะใช้แท็กแทรกรูปภาพตามกฎ HTML:

เช่นเดียวกับแอตทริบิวต์สำหรับการตั้งค่าข้อความแสดงแทน ความกว้าง ความสูง และอื่นๆ

โทรจากเว็บไซต์

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

...สมาชิก...

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

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

จริยธรรมของการสร้างไฮเปอร์ลิงก์

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

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

ยานเดกซ์

• ผู้ใช้จะต้องได้รับข้อมูลที่แท้จริงเกี่ยวกับไฟล์ที่จะดาวน์โหลดเมื่อคลิกที่ลิงค์

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

Anti-Seo เมื่อสร้างไฮเปอร์ลิงก์

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

เทคนิคอย่างหนึ่งที่พวกเขาใช้คือการแทรกไฮเปอร์ลิงก์ที่ "มองไม่เห็น" ลงในหน้าเว็บ ผู้ฉ้อโกงรู้วิธีสร้างไฮเปอร์ลิงก์ใน HTML และใช้แอตทริบิวต์เพื่อลบขีดเส้นใต้ของลิงก์และกำหนดสีของข้อความโดยรอบเพื่อให้ผู้ใช้ทั่วไปไม่เห็น และด้วยความช่วยเหลือของเครื่องมือเทคโนโลยีเว็บอื่นๆ (CSS, JavaScript, PHP) คุณสามารถตั้งโปรแกรมพฤติกรรมของเครื่องมือเหล่านั้นได้ ตัวอย่างเช่น เหตุการณ์ OnMouseOver ภาษาจาวาสคริปต์เปิดใช้งานการทำงานขององค์ประกอบหน้าเว็บ เมื่อผู้ใช้โฮเวอร์เหนือลิงก์ที่มองไม่เห็น พวกเขาจะถูกพาไปที่ หน้าโฆษณาไซต์อื่น หรือแย่กว่านั้นคือเมื่อมีลิงก์ที่มองไม่เห็นไปยังไฟล์และเริ่มดาวน์โหลดและติดตั้งสิ่งที่ไม่จำเป็นลงในคอมพิวเตอร์ของเขา ซอฟต์แวร์- โดยปกติแล้วสิ่งเหล่านี้คือไวรัสที่เปลี่ยนแปลง หน้าแรกเบราว์เซอร์เกะกะ ฮาร์ดไดรฟ์โปรแกรมมากมายและอื่นๆ

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

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

มาจบทฤษฎีกันดีกว่า มาดูวิธีสร้างไฮเปอร์ลิงก์ใน MS Word กัน

วิธีที่ง่ายที่สุดคือเพียง คัดลอกที่อยู่ไซต์- เลือกและคัดลอกข้อความจากแถบที่อยู่ของเบราว์เซอร์

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

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

ตอนนี้เรามาดูวิธีการกัน ทำให้ข้อความเป็นไฮเปอร์ลิงก์- เมื่อต้องการทำเช่นนี้ ให้เลือก ส่วนที่จำเป็นข้อความหรือคำ คลิกขวาแล้วเลือก "ไฮเปอร์ลิงก์"

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

เลือกข้อความ คลิกขวาที่ข้อความแล้วเลือก "ไฮเปอร์ลิงก์"

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

ในตัวอย่างที่พิจารณา เมื่อคุณคลิกที่ "เอกสาร" โฟลเดอร์ "ดาวน์โหลด" จะเปิดขึ้น

ถึง ทำให้รูปภาพเป็นไฮเปอร์ลิงก์– เลือกและทำซ้ำขั้นตอนข้างต้น หากรูปภาพในข้อความทำหน้าที่เป็นไฮเปอร์ลิงก์ เมื่อคุณโฮเวอร์เหนือรูปภาพนั้น หน้าต่างป๊อปอัปจะปรากฏขึ้น กด Ctrl แล้วคลิกที่มัน

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

เมนูบริบทต่อไปนี้จะปรากฏขึ้น ในนั้นให้คลิกที่รายการ "สร้างไฮเปอร์ลิงก์".

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

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

ให้คะแนนบทความนี้:

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

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

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

§ 1. ลิงก์ไปยังไฟล์ ลิงก์ไปยังไซต์ ลิงก์ไปยังหน้า

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

เพื่อไม่ให้ความคิดของฉันฟุ้งซ่าน ฉันจะแสดงให้คุณเห็นทุกอย่างพร้อมตัวอย่าง

ในเบราว์เซอร์เราจะเห็นสิ่งนี้:

ในเบราว์เซอร์เราจะเห็นสิ่งนี้:

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

§ 2. การสร้างลิงก์ภายนอก

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

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

ตัวอย่างเช่น หากต้องการสร้างลิงก์ข้อความไปยังหน้าแรกของไซต์นี้ คุณต้องเขียนโค้ด HTML ต่อไปนี้:

http://www.seoded.ru/"> หน้าแรกของเว็บไซต์เว็บไซต์

ในเบราว์เซอร์จะมีลักษณะดังนี้:

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

§ 2.1 ลิงค์กราฟิก (ลิงค์รูปภาพ)

อย่างที่บอกไปข้างต้น ในการสร้างลิงค์รูปภาพ คุณต้องใช้ . ตัวอย่างของลิงค์ดังกล่าวมีลักษณะดังนี้:

และเบราว์เซอร์จะแสดง:

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

เส้นขอบ = "0">

หน้าแรก

§ 3. ลิงก์ภายใน

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

ชื่อ = "ชื่อสมอ"> ข้อความ

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

โรคหัดอยู่ในตำแหน่งบนหน้าที่ผู้ใช้ควรไปหลังจากคลิกลิงก์

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

ฉันสร้างสมอด้วยชื่อ ซาโกโลวอคและวางไว้ข้างชื่อบทเรียนนี้ (“ไฮเปอร์ลิงก์ใน HTML”) รหัสจุดยึดมีดังนี้:

ชื่อ = "zagolovok">

href="#zagolovok">ไปที่ชื่อ

และในเบราว์เซอร์เช่นนี้:

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

ไปยังที่อยู่เดิม:

http://www..html

http://www..html#zagolovok

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

§ 4. การอ้างอิงแบบสัมบูรณ์และแบบสัมพันธ์

หน้าแรก

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

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

/klienty.html">ลูกค้า

ตอนนี้สมมติว่ามีโฟลเดอร์เดียวกันกับหน้าหลัก โฟลเดอร์ซากาซี่และแล้ว ในนั้นอยู่ที่หน้า klienty.html จากนั้นโค้ดสำหรับลิงก์ที่เกี่ยวข้องจะมีลักษณะดังนี้:

/zakazy/klienty.html">ลูกค้า

ตอนนี้เรามาดูการสร้างไฮเปอร์ลิงก์กัน สัมพันธ์กับหน้าเดิม- สมมุติว่าเรามีเพจ ราคา.html (หน้าแรก) และคุณจะต้องลิงก์ไปยังหน้านั้น ลูกค้า.htmlมีตัวเลือกทั่วไปดังต่อไปนี้:

1. หน้า price.html และ clienty.html อยู่ ในโฟลเดอร์เดียว.

klienty.html">ลูกค้า




2. ในโฟลเดอร์รูทของไซต์, หน้า price.html อยู่ในโฟลเดอร์ซากาซี่ สูงขึ้นหนึ่งระดับ).

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

../klienty.html">ลูกค้า

จุดสองจุดบ่งบอกว่าคุณต้องออกไป โฟลเดอร์ปัจจุบันสูงขึ้นหนึ่งระดับ




3. หน้า klienty.html และโฟลเดอร์ zakazy อยู่ ในโฟลเดอร์รูทของไซต์, โฟลเดอร์เมเบล อยู่ในโฟลเดอร์ซากาซี่, หน้า price.html อยู่ในโฟลเดอร์ mebel(เช่น หน้า klienty.html ที่สัมพันธ์กับหน้า price.html เดิมอยู่ สูงขึ้นสองระดับ).

../../klienty.html">ลูกค้า

นั่นคือแต่ละระดับจะมีจุดสองจุดและเครื่องหมายทับ “ / ».




4. ในโฟลเดอร์รูทของไซต์, หน้า clienty.html อยู่ในโฟลเดอร์ซากาซี่(เช่น ตอนนี้หน้า klienty.html ที่สัมพันธ์กับหน้า price.html ดั้งเดิมอยู่ ต่ำกว่าหนึ่งระดับ).

zakazy/klienty.html">ลูกค้า

ในกรณีนี้ จะไม่มีการใช้จุดและเครื่องหมายทับ




5. หน้า price.html (หน้าเดิม) และโฟลเดอร์ zakazy อยู่ ในโฟลเดอร์รูทของไซต์, โฟลเดอร์เมเบล อยู่ในโฟลเดอร์ซากาซี่, หน้า clienty.html อยู่ในโฟลเดอร์ mebel(เช่น ขณะนี้หน้า klienty.html สัมพันธ์กับหน้า price.html เดิมแล้ว อยู่ด้านล่างสองระดับ).

zakazy/mebel/klienty.html">ลูกค้า




6. ในโฟลเดอร์รูทของไซต์ มีสองโฟลเดอร์: ซากาซีและโอปลาตา หน้า clienty.html อยู่ในโฟลเดอร์ซากาซี่, ราคาหน้าเดิม.html อยู่ในโฟลเดอร์ oplata(เช่น ทั้งสองหน้าโกหก วี โฟลเดอร์ต่างๆต่ำกว่าระดับหนึ่งจากโฟลเดอร์รูทของไซต์)

../zakazy/klienty.html">ลูกค้า

§ 5. ลิงก์ไปยังอีเมล

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

เมลถึง: [ป้องกันอีเมล]">จดหมายของฉัน

และในเบราว์เซอร์เช่นนี้:

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

title="ไปที่หน้าหลัก">!} หน้าแรก

§ 7. บทสรุป

นี่เป็นข้อมูลพื้นฐานเกี่ยวกับ การสร้างลิงค์ในรูปแบบ HTML- เกี่ยวกับเรื่องนี้ บทเรียนนี้ถือว่าแล้วเสร็จ. และข้อเท็จจริงข้อนี้ชี้ให้เห็นว่าส่วนใหญ่ พื้นฐาน HTMLคุณเชี่ยวชาญมันแล้ว

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

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

และนี่จะเป็นก้าวแรกในการเปลี่ยนเพจส่วนตัวของคุณให้เป็นแหล่งข้อมูลที่จริงจัง