วิธีการตั้งค่าจุดยึด HTML อย่างถูกต้อง วิธีการตั้งค่าจุดยึด HTML จุดยึด HTML บนหน้า วิธีสร้างจุดยึดบนหน้า html
จนถึงขณะนี้ เราได้ดูลิงก์ที่นำไปสู่เอกสารอื่นๆ บนอินเทอร์เน็ตแล้ว และในบทนี้คุณจะได้เรียนรู้วิธีสร้างจุดยึด สมอ (จุดยึด) ใน HTMLเป็นบุ๊กมาร์กพิเศษที่ใช้ในการย้ายผู้ใช้ไปยังพื้นที่เฉพาะของหน้าเมื่อคลิกลิงก์
จะสร้างจุดยึดและลิงค์ได้อย่างไร?
ในการสร้างจุดยึดคุณต้องระบุตำแหน่งที่จะติดตามลิงก์: name = "name"> โดยที่ชื่อสมอคือคำใด ๆ ในภาษาอังกฤษ อย่างที่คุณเห็น ไม่จำเป็นต้องเขียนอะไรเลยระหว่างแท็กสำหรับบุ๊กมาร์ก เนื่องจากใช้เป็นป้ายกำกับบริการเท่านั้น สิ่งที่สำคัญที่สุดคืออย่าลืมสิ่งนั้น - นี่คือแท็กในตัว (อินไลน์) และสามารถวางไว้ในองค์ประกอบ HTML ที่สามารถมีประเภทนี้ได้เท่านั้น อย่างไรก็ตามมีองค์ประกอบดังกล่าวมากมาย
โน้ตสำคัญสองประการ! โปรดทราบว่าจะต้องระบุชื่อของจุดยึดในทั้งสองแห่งในกรณีเดียวกัน นั่นคือคุณไม่สามารถเขียนชื่อในจุดยึดได้ แต่เขียน #NAME ในลิงก์ได้ นอกจากนี้ หน้า HTML แต่ละหน้าไม่สามารถมีจุดยึดสองตัวที่มีชื่อเดียวกันได้ ไม่เช่นนั้นเบราว์เซอร์จะไม่เข้าใจว่าจะนำทางไปยังอันไหน แต่สามารถมีลิงก์ไปยังจุดยึดเดียวกันได้มากเท่าที่คุณต้องการ!
ตัวอย่างการสร้างจุดยึดใน HTML
ย่อหน้า
ย่อหน้า ไปจนถึงจุดเริ่มต้น
ย่อหน้า ไปจนถึงจุดเริ่มต้น
ย่อหน้า ไปจนถึงจุดเริ่มต้น
ย่อหน้า ไปจนถึงจุดเริ่มต้น
ผลลัพธ์ในเบราว์เซอร์
ลิงก์ไปยังจุดยึดของหน้า HTML อื่น
คุณและฉันได้เรียนรู้วิธีนำทางภายในหน้าแล้ว ตอนนี้เรามาเรียนรู้วิธีสร้างลิงก์จากหน้า HTML หนึ่งไปยังจุดยึดของหน้าอื่นๆ วิธีนี้จะสะดวกมาก โดยเฉพาะอย่างยิ่งหากคุณกำลังลิงก์ไปยังเพจที่มีข้อมูลจำนวนมาก แต่ผู้ใช้ต้องการเพียงบางส่วนเท่านั้น ดังนั้นในการสร้างลิงก์ไปยังจุดยึดของหน้าอื่นคุณต้องระบุ #Name ของสมอที่ต้องการในแอตทริบิวต์ HREF ในตอนท้ายของที่อยู่
ขออภัยฉันจะไม่แสดงผลลัพธ์ของตัวอย่างให้คุณเพราะฉันไม่เก่ง Cacti และฉันไม่มีบทความเกี่ยวกับพวกเขาในเว็บไซต์ -
ในคำสแลงของ Optimizers SEO (คนที่โปรโมตเว็บไซต์บนอินเทอร์เน็ต)“ Anchors” มักเรียกว่าไม่ใช่สิ่งที่เราได้ศึกษาที่นี่ แต่เนื้อหาของแท็ก นั่นคือสิ่งที่ผู้ใช้เห็นในหน้า
การบ้าน.
- สร้างชื่อเรื่องสำหรับบทความและสามส่วน
- ใต้หัวข้อแต่ละหัวข้อ ให้เขียนสองสามย่อหน้า แต่ใต้ชื่อบทความ ให้เขียนยาวจนกินเวลาประมาณหนึ่งหน้าครึ่ง
- ในตอนท้ายของแต่ละส่วน ให้เชื่อมโยงไปยังชื่อบทความ
- ใต้ชื่อบทความ ให้เขียนลิงก์ไปยังทุกหัวข้อทันที
- สร้างไฟล์บางไฟล์ (เช่น page2.html) และสร้างลิงก์ในไฟล์ไปยังทุกส่วนของเพจที่สร้างไว้ก่อนหน้านี้ ประเด็นนี้เป็นเพียงคำตอบ แต่ฉันแน่ใจว่าคุณสามารถจัดการได้! อย่างไรก็ตาม คุณสามารถใส่ page2.html ลงในโฟลเดอร์อื่นและฝึกฝนกับที่อยู่ที่เกี่ยวข้องได้
Anchor เป็นเครื่องมือที่มีประโยชน์มากที่ช่วยให้คุณสามารถจัดระเบียบเอกสารและทำให้ผู้ใช้อ่านได้ง่ายขึ้น เช่นเดียวกับเครื่องมือ HTML ทั้งหมด แท็กนี้เป็นไปตามไวยากรณ์มาตรฐาน และการทำงานกับแท็กนี้ไม่ทำให้เกิดปัญหาใดๆ
หลักการนี้ใช้เพื่อสร้างรายการที่ใช้งานอยู่ ลิงก์ไปยังจุดที่มีคำอธิบายที่ต้องการในข้อความ หรือบุ๊กมาร์ก- หน้าที่จัดโครงสร้างด้วยจุดยึดจะสร้างความประทับใจและอ่านง่าย
วิธีทำสมอเรือ
สมอเรือนั้นทำง่ายมาก สิ่งแรกที่คุณต้องทำคือ สร้างฉลากที่ต้องการในเนื้อหาของเอกสาร- มันเป็นของฉลากนี้ว่าลิงก์ในหน้าจะยึดและนำผู้อ่านไปยังจุดนี้
ฉลากถูกสร้างขึ้นด้วยวิธีมาตรฐานสำหรับภาษา HTML คุณสามารถใช้เครื่องมือชื่อหรือคุณสามารถตั้งค่า ID ขององค์ประกอบและอ้างอิงได้
ตัวอย่างการใช้ชื่อและรหัส
เครื่องมือชื่อ
ชื่อฉลากที่ระบุในราคาต้องไม่ซ้ำกันและแตกต่างจากชื่ออื่น ๆ ในหน้า มิฉะนั้นอัลกอริธึมจะสับสน
การเติมช่องว่างระหว่างแท็กในกรณีนี้ไม่จำเป็น แต่ได้รับการสนับสนุน สิ่งนี้ทำให้ง่ายต่อการนำทางรหัส
รหัสเครื่องมือ
วิธีนี้ง่ายกว่า การกำหนดหมายเลขประจำตัวให้กับองค์ประกอบเฉพาะบนเพจก็เพียงพอแล้ว
ในกรณีนี้หัวเรื่อง H1 กลายเป็นจุดยึดของเรา
ตัวอย่างของลิงค์ภายในหน้า
จำเป็นต้องอ้างอิงถึงจุดที่ 1 รหัสมีดังนี้:
บางครั้งสถานการณ์ก็เกิดขึ้น จำเป็นต้องเชื่อมโยงไปยังจุดเฉพาะในหน้าอื่นที่มีอยู่ในเว็บไซต์นี้- ตัวอย่างเช่น เมื่ออธิบายคุณสมบัติของการปรุงไก่ในเตาอบ คุณต้องไปที่หน้าเว็บไซต์ที่มีการอธิบายกฎการใช้เตาอบ ในเวลาเดียวกันหลังจากคลิกที่ลิงค์คุณต้องไปที่กฎเฉพาะเพื่อเพิ่มความเร็วในการรับรู้ของข้อความ ในกรณีนี้ คุณควรสร้างโครงสร้างดังนี้:
ในที่นี้ /adress-stranici คือชื่อของเพจบนเซิร์ฟเวอร์ที่อธิบายโหมดการทำงานและตำแหน่งที่เครื่องอ่านควรถูกส่งไป
Punkt1 เป็นโหมดที่คุณต้องเรียนรู้ในหน้านี้
13.07.2015
สวัสดีทุกคน!
เรายังคงศึกษาพื้นฐานของ HTML อย่างขยันขันแข็งต่อไป
ในบทนี้ เราจะได้เรียนรู้วิธีแคสต์จุดยึดบนหน้า HTML
ไม่ต้องกลัว! คุณมาถูกที่แล้ว - ฉันจะไม่บอกหรือสอนเทคนิคการเดินเรือที่นี่ ในบทนี้ ฉันจะบอกคุณว่า Anchor HTML คืออะไร วิธีสร้าง Anchor บนหน้า HTML และวิธีเพิ่ม Anchor ให้กับหน้าอื่น
บทเรียนจะมีประโยชน์และสำคัญมากเพราะคุณจะต้องเผชิญหน้ามากกว่าหนึ่งครั้ง HTML Anchors.
สมอ - คือบุ๊กมาร์กที่มีชื่อเฉพาะอยู่ในนั้น html เอกสารในสถานที่หนึ่งและทำหน้าที่นำทางไปยังเอกสารอย่างรวดเร็วโดยใช้ลิงก์
ถ้าคุณชอบคำอธิบายแบบเชื่อมโยง ฉันจะอธิบายดังนี้:
สมอ- นี่คือสิ่งที่คล้ายกับบุ๊กมาร์กหรือเนื้อหาในหนังสือ
ลิงก์ Anchor มักใช้สำหรับเว็บไซต์ธุรกิจ (ลิงก์หน้าเดียว) หรือที่จุดเริ่มต้นของบทความเพื่อนำทางไปยังส่วนที่ต้องการอย่างรวดเร็ว (เช่นใน Wikipedia)
ฉันคิดว่าคุณเข้าใจแล้ว Anchor Link ใน HTML คืออะไร?- ถ้าไม่ไม่ต้องกังวล อย่ากังวลกับทฤษฎี เพราะหลังจากตัวอย่างเชิงปฏิบัติ ทุกอย่างจะชัดเจนสำหรับคุณ
○ วิธีสร้างจุดยึดบนHTML
เพื่อสร้างจุดยึดบนหน้าเว็บให้กับแท็ก ป้อนแอตทริบิวต์ "name" โดยที่คุณระบุชื่อที่ไม่ซ้ำกันเป็นค่า เช่น "stepkinblog"
นี่คือลักษณะของรูปแบบจุดยึดใน HTML:
สำหรับแท็ก แท็กปิดที่จำเป็น.
ความสนใจ:
ผิด:
ขวา:
แทนที่จะเขียนแอตทริบิวต์ "name" คุณสามารถเขียนแอตทริบิวต์ "id" ได้
อาจจะเป็นเช่นนั้น
ความสนใจ:ชื่อของสมอจะต้องเขียนเป็นภาษาละติน
ผิด:
ขวา:
เนื้อหาถูกสร้างขึ้นในรูปแบบ HTML
ไปที่บทความหมายเลข 1 - เกี่ยวกับบล็อก BlogGood.ruไปที่บทความหมายเลข 2 - เกี่ยวกับเว็บไซต์บล็อก
ไปที่บทความหมายเลข 3 - เกี่ยวกับเว็บไซต์ wm-money.org.ua
บทความหมายเลข 1 - เกี่ยวกับบล็อก BlogGood.ru
บล็อกในหัวข้อต่างๆ การเพิ่มประสิทธิภาพ SEO การโปรโมตเว็บไซต์ การสร้างเว็บไซต์ เอฟเฟกต์อร่อยสำหรับเว็บไซต์ และอื่นๆ อีกมากมาย...
บทความหมายเลข 2 - เกี่ยวกับเว็บไซต์บล็อก
บล็อกที่อุทิศให้กับ: HTML, CSS, PHP, WordPress, Bootstrap
บทความหมายเลข 3 - เกี่ยวกับเว็บไซต์ wm-money.org.ua
แลกเปลี่ยน ถอน และฝาก WebMoney
○ ทำอย่างไรHTML Anchor ไปยังหน้าอื่น
สมมติว่าคุณมีสองหน้าเว็บ ในหน้าแรกคุณต้องการสร้างลิงค์ที่จะส่งผู้ใช้ไปยังส่วนที่เฉพาะเจาะจงของหน้าอื่นเช่นไปจนถึงวันชีวิตของนักเขียน Taras Shevchenko
ดังนั้นนี่คือวิธีการทำ ในหน้าแรกคุณเชื่อมโยงไปยังจุดยึด ในหน้าสองคุณต้องสร้างจุดยึดในสถานที่ที่เหมาะสม
ทีนี้ลองนำทั้งหมดนี้ไปใช้ด้วยตัวอย่าง
สร้างเพจชื่อ "index-1.html"
แทรกลิงก์ไปยังจุดยึดลงในข้อความ:
ข้อความ.. T. G. Shevchenko ...ข้อความ
โค้ด HTML เสร็จสมบูรณ์โดยสมบูรณ์: