จะสร้างลิงค์ใน HTML ได้อย่างไร?

สารบัญ:

จะสร้างลิงค์ใน HTML ได้อย่างไร?
จะสร้างลิงค์ใน HTML ได้อย่างไร?
Anonim

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

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

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

HTML คืออะไร

HTML ย่อมาจาก Hyper Text Mark-Up Language แปลจากภาษาอังกฤษ แปลว่า "Hypertext Markup Language"

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

HTML โค้ดเขียนด้วยตัวอักษรละตินโดยเฉพาะและเรียกว่าแท็ก และแต่ละโค้ดอยู่ในวงเล็บเหลี่ยม บางแท็กจับคู่แล้ว บางแท็กไม่จับคู่

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

แท็กที่ไม่ได้จับคู่ไม่จำเป็นต้องมีคู่หู

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

ออกแบบเว็บ
ออกแบบเว็บ

HTML ถูกใช้ที่ไหน

ความเข้าใจดั้งเดิมของ HTML ที่ต้องการคือการสร้างเว็บไซต์

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

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

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

นอกจากนี้ยังใช้ HTML ในการสร้างอีเมลเพื่อแจกจ่าย

รายชื่อจดหมายทางอินเทอร์เน็ต
รายชื่อจดหมายทางอินเทอร์เน็ต

ลิงค์คืออะไร

อนุญาตให้คุณไปยังหน้าเว็บอื่น ทั้งในไซต์และภายนอก

HTML มักจะใช้ลิงก์:

  • เพื่อไปยังแหล่งข้อมูลบนเว็บภายนอก
  • เพื่อเลื่อนดูหน้าต่างๆ ภายในเว็บไซต์
  • เพื่อไปที่ Google ฟอร์ม

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

ประเภทของลิงค์

ในความหมายดั้งเดิม ลิงก์คือที่อยู่ของทรัพยากรบนเว็บที่คุณเข้าไปได้ด้วยการคลิก

ประเภทของลิงค์
ประเภทของลิงค์

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

ลิงก์ประเภทอื่นๆ:

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

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

รูปภาพไฮเปอร์ลิงก์จะไม่เปลี่ยนรูปลักษณ์ ไม่ว่าจะเข้าชมหรือไม่

วิธีแทรกลิงค์ปกติ

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

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

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

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

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

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

วิธีแทรกไฮเปอร์ลิงก์รูปภาพ

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

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

แท็ก

นอกจาก src แล้ว ยังมีคุณสมบัติอื่นๆ ที่ช่วยให้คุณปรับความสูง ความกว้าง และตำแหน่งของภาพ และอื่นๆ อีกมากมาย บางส่วน:

  • Src - ระบุเส้นทางไปยังรูปภาพ
  • Lowsrc - เหมือนกับแอตทริบิวต์ก่อนหน้า แต่ระบุไว้สำหรับรูปภาพคุณภาพต่ำ
  • ความสูง - ความสูงของภาพ
  • ความกว้าง - ความกว้าง
  • Alt - คำอธิบายรูปภาพ เมื่อคุณวางเมาส์เหนือรูปภาพหรือรูปภาพ ข้อความที่ระบุในแอตทริบิวต์นี้จะปรากฏขึ้น
  • Border - กำหนดความหนาของเส้นขอบรอบรูปภาพ

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

จะมีลักษณะดังนี้: <a href="ที่อยู่หน้าเว็บ"

. คุณลักษณะเหล่านี้จะช่วยกำหนดขนาดที่เหมาะสมสำหรับรูปภาพ เส้นขอบช่วยสร้างเส้นขอบที่มองไม่เห็นรอบรูปภาพ

ตามลิงค์
ตามลิงค์

แอตทริบิวต์ด้านบนใช้กับแท็กแทรกรูปภาพแยกต่างหาก ตัวอย่างเช่น:.

สมอลิงค์คืออะไร

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

การสร้างลิงก์ Anchor จะต้องใช้แท็กแอตทริบิวต์มากกว่าลิงก์ประเภทอื่นๆ

ลิงค์สมอ
ลิงค์สมอ

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

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

เคล็ดลับ

การวางบล็อคข้อมูลต่างๆ บนเว็บเพจ
การวางบล็อคข้อมูลต่างๆ บนเว็บเพจ

ช่วยเหลือจากผู้มีประสบการณ์โปรแกรมเมอร์:

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

สรุป

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

แนะนำ: