แท็ก HTML iframe ฝังเอกสารเว็บลงในหน้าเว็บ เอกสารที่ฝังไว้อาจเป็น PDF, หน้าเว็บ หรือเนื้อหาอื่น แอตทริบิวต์ src กำหนดตำแหน่งของทรัพยากรที่ฝัง
คุณสามารถฝังเนื้อหาของเอกสารบนเว็บ เช่น PDF หรือแผนที่จาก Google Maps ลงในหน้าอื่นโดยใช้ HTML
นั่นคือสิ่งที่ HTML เข้ามาแล้ว HTML แท็กใช้เพื่อฝังวัตถุภายนอกเช่นหน้าเว็บอื่น ๆ ลงในหน้าเว็บเดียว บทช่วยสอนนี้จะอภิปรายพร้อมตัวอย่างวิธีใช้ HTML เพื่อฝังทรัพยากรบนเว็บลงในหน้าเว็บ
HTML iframe
HTML iframes หรือ inline frames แสดงเอกสารเว็บภายนอกบนหน้า คุณฝังแผนที่, PDF, วิดีโอ หรือแหล่งข้อมูลอื่นๆ ได้โดยใช้แท็ก HTML
โค้ดที่เก็บไว้ในเฟรมอินไลน์นั้นไม่ขึ้นกับส่วนที่เหลือของหน้าเว็บ สไตล์หรือ JavaScript ใดๆ ที่ใช้กับหน้าเว็บของคุณจะไม่ถูกนำไปใช้ภายใน iframe
นี่คือไวยากรณ์สำหรับ HTML แท็ก:
<iframe src="url"></iframe>
tag ใช้สำหรับสร้าง iframe เราได้ระบุ iframe src คุณลักษณะ. แอตทริบิวต์ประกอบด้วยตำแหน่งขององค์ประกอบ HTML ที่เราต้องการฝังลงในหน้าเว็บของเรา นี่ควรเป็น HTML URL
ตัวอย่างโค้ด iframe HTML
มาดูตัวอย่างกันว่า แท็กใช้งานได้
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
สมมติว่าเรากำลังสร้างเว็บไซต์สำหรับสังคมประวัติศาสตร์ของวอชิงตัน ดี.ซี. พวกเขาต้องการให้เราสร้างเพจที่มีวิดีโอที่ฝังไว้จาก Khan Academy เกี่ยวกับการเกิดรัฐธรรมนูญของสหรัฐอเมริกา เพจนี้เป็นสื่อแนะนำสำหรับผู้ที่สนใจเข้าร่วมสังคม เราสามารถใช้รหัสต่อไปนี้เพื่อฝังวิดีโอลงในเว็บไซต์ของเรา:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
รหัสของเราส่งคืน:
เราใช้ องค์ประกอบเพื่อฝังทรัพยากรเว็บภายนอกลงในหน้าเว็บของเรา แหล่งข้อมูลบนเว็บที่เราได้ฝังไว้คือลิงก์ “https://www.youtube.com/embed/Rk8dCnKIfP4” สิ่งนี้ชี้ไปที่วิดีโอที่สังคมประวัติศาสตร์ต้องการแสดงบนเว็บไซต์ของพวกเขา
HTML Iframe ความสูงและความกว้าง
แอตทริบิวต์ความสูงและแอตทริบิวต์ความกว้างใช้เพื่อกำหนดขนาดของ iframe สมมติว่าสังคมประวัติศาสตร์ของวอชิงตัน ดี.ซี. ต้องการให้เราสร้างวิดีโอที่ใหญ่ขึ้นบนเว็บไซต์ของพวกเขา
เราจะกำหนดความกว้างของวิดีโอ YouTube เป็น 500 พิกเซลและความสูงเป็น 300 พิกเซล:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
รหัสของเราส่งคืน:
ขณะนี้วิดีโอแบบฝังของเรามีความกว้าง 500 พิกเซลและสูง 300 พิกเซลในเอกสาร HTML ของเรา ทำให้ผู้คนสามารถดูวิดีโอของเราบนเว็บไซต์ได้ง่ายขึ้น
อีกทางหนึ่ง เราสามารถกำหนดความกว้างและความสูงของแท็ก iframe โดยใช้ CSS แต่เนื่องจาก HTML รองรับแอตทริบิวต์ส่วนสูงและน้ำหนัก จึงไม่จำเป็น
ลบ HTML iframe Border
เมื่อคุณทำงานกับ คุณจะสังเกตเห็นว่าเนื้อหาล้อมรอบด้วยเส้นขอบ หากคุณต้องการลบเส้นขอบนี้ คุณสามารถใช้ border:none; แอตทริบิวต์ CSS
สมาคมประวัติศาสตร์ได้ขอให้เราลบขอบรอบวิดีโอ YouTube ออกจากไซต์ของพวกเขา นี่คือรหัสที่เราจะใช้เพื่อลบเส้นขอบ:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
รหัสของเราส่งคืน:
ตอนนี้วิดีโอของเราไม่มีเส้นขอบแล้ว
เป้าหมายลิงก์ HTML iframe
นอกจากนี้ แท็กสามารถใช้เป็นเฟรมเป้าหมายสำหรับลิงก์ได้ เราสามารถตั้งค่า iframe ให้เป็นเฟรมเป้าหมายสำหรับลิงก์โดยใช้แอตทริบิวต์เป้าหมายในลิงก์ HTML แอตทริบิวต์ HTML เป้าหมายต้องอ้างอิงแอตทริบิวต์ชื่อของ .
สมมติว่าสังคมประวัติศาสตร์มีวิดีโออื่นที่พวกเขาต้องการให้เราแสดงบนเว็บไซต์ของพวกเขาในมาตรา I ของรัฐธรรมนูญของสหรัฐอเมริกา วิดีโอนี้เผยแพร่โดย Khan Academy ด้วย
เมื่อข้อความ เกิด ถูกคลิกบนหน้าเว็บ กำเนิดรัฐธรรมนูญของสหรัฐอเมริกา วิดีโอควรแสดงผลใน iframe เมื่อข้อความ บทความ I ถูกคลิก วิดีโอเกี่ยวกับมาตรา I ของรัฐธรรมนูญควรจะแสดงผล
เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
รหัสของเราส่งคืน:
โดยค่าเริ่มต้น วิดีโอการเกิดรัฐธรรมนูญของสหรัฐอเมริกาจะแสดงอยู่ใน iframe เนื้อหาของ iframe เปลี่ยนไปชี้ไปที่วิดีโอจาก Khan Academy ในมาตรา I ของรัฐธรรมนูญ สิ่งนี้จะเกิดขึ้นเมื่อเราคลิกที่ บทความที่ I URL.
iframe ของเราถูกเปลี่ยนเส้นทางไปยังวิดีโอที่เกิดรัฐธรรมนูญ หากวิดีโอนั้นไม่ได้แสดงอยู่แล้วเมื่อเราคลิก เกิด .
บทสรุป
แท็ก HTML ฝังทรัพยากรบนเว็บภายนอก เช่น หน้าเว็บลงในหน้าเว็บอื่น ซึ่งมีประโยชน์หากคุณต้องการเพิ่มแผนที่ ไฟล์ วิดีโอ หรือหน้าเว็บอื่นๆ ลงในไซต์ของคุณ
บทช่วยสอนนี้กล่าวถึงโดยอ้างอิงถึงตัวอย่าง วิธีใช้ HTML แท็กเพื่อแสดงทรัพยากรบนเว็บภายนอกบนหน้าเว็บ ตอนนี้คุณมีความรู้ที่จำเป็นในการเริ่มใช้งาน แท็กอย่างมืออาชีพ!
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ดใน HTML โปรดอ่านคู่มือการเรียนรู้ HyperText Markup Language