เฟรมใน HTML ตัวอย่างจริง
Html / / May 15, 2023
เฟรมใน HTML เป็นวิธีการแบ่งหน้าต่างเบราว์เซอร์ออกเป็นหลายๆ ส่วน ซึ่งแต่ละส่วนสามารถโหลดและแสดงเอกสาร HTML ที่แตกต่างกันได้ ในบทความนี้ เราจะเห็นตัวอย่างการใช้งานจริงของเฟรมใน HTML
แม้ว่าการใช้งานจะลดลงในช่วงไม่กี่ปีที่ผ่านมา เนื่องจากมีการใช้เทคนิคที่ทันสมัยและยืดหยุ่นมากขึ้น เช่น CSS และ JavaScript ยังคงพบได้ในบางเว็บไซต์ โดยเฉพาะที่สร้างในปี 1990 และต้นปี 1990 ของปี 2000
เนื้อหาบทความ
- • เฟรมหรือเฟรมทำงานอย่างไรใน HTML?
- • วิธีสร้างเฟรมใน HTML
- • คุณลักษณะของเฟรมใน HTML
- • ตัวอย่างการใช้งาน:
- • วิธีเชื่อมโยงไปยังเฟรมเฉพาะ
- • ตัวอย่างการแบ่งหน้าจอออกเป็นสองคอลัมน์ด้วยกรอบ
- • ตัวอย่างการแบ่งหน้าจอเป็นแถวและคอลัมน์
- • ตัวอย่างการนำทางด้านบนด้วยเฟรม HTML
เฟรมหรือเฟรมทำงานอย่างไรใน HTML?
กรอบประกอบด้วยสององค์ประกอบ:
เฟรมเซ็ต: ธาตุ ใช้เพื่อแบ่งหน้าต่างเบราว์เซอร์ออกเป็นส่วนสี่เหลี่ยม ซึ่งแต่ละหน้าต่างสามารถโหลดเอกสาร HTML ของตัวเองได้
เฟรม: ธาตุ ถูกใช้ภายในก เพื่อกำหนดแต่ละส่วน และส่งไปเรียกเอกสารอื่น ๆ ที่โหลดอยู่ภายในเฟรมเซ็ต
- ติดตามด้วย: ตัวอย่าง iFrame
วิธีสร้างเฟรมใน HTML
หากต้องการสร้างเอกสาร HTML ที่มีเฟรม ให้ทำตามขั้นตอนง่ายๆ สองขั้นตอน:
1. สร้างเอกสาร HTML ที่กำหนดโครงสร้างของเฟรมโดยใช้องค์ประกอบ. ตัวอย่างเช่น:
ไฟล์ 1: frameset.html
2. สร้างเอกสาร HTML อย่างน้อยหนึ่งรายการเพื่อโหลดภายในเฟรม
ไฟล์ 2: frame1.html
นี่คือกรอบที่ 1
ไฟล์ 3: frame2.html
นี่คือกรอบที่ 2
คุณลักษณะของเฟรมใน HTML
แอตทริบิวต์องค์ประกอบที่สำคัญที่สุดบางส่วน เป็น:
เลื่อน:
คุณลักษณะนี้ใช้เพื่อควบคุมลักษณะที่ปรากฏของแถบเลื่อนในเฟรม สามารถมีค่าเป็น "อัตโนมัติ", "ใช่" หรือ "ไม่"ขนาด:
คุณลักษณะนี้ใช้เพื่อป้องกันไม่ให้ผู้ใช้ปรับขนาดเฟรมแยม:
แอตทริบิวต์นี้ใช้เพื่อตั้งชื่อให้กับเฟรม ซึ่งจะมีประโยชน์สำหรับการอ้างอิงเฟรมในลิงก์และสคริปต์src:
คุณลักษณะนี้ใช้เพื่อระบุ URL ของเอกสาร HTML ที่จะโหลดในเฟรมกรอบชายแดน
: คุณลักษณะนี้ระบุว่าเฟรมควรมีขอบหรือไม่ ค่าที่เป็นไปได้คือ "1" (เพื่อแสดงเส้นขอบ) หรือ "0" (เพื่อแสดงไม่มีเส้นขอบ) ตัวอย่างเช่น, .ชายแดน
: คุณลักษณะนี้กำหนดความกว้างของเส้นขอบระหว่างเฟรมเป็นพิกเซล ตัวอย่างเช่น, จะสร้างเส้นขอบ 5px ระหว่างเฟรมระยะห่างเฟรม
: คุณลักษณะนี้คล้ายกับชายแดน
. นอกจากนี้ยังกำหนดช่องว่างระหว่างเฟรมเป็นพิกเซล ตัวอย่างเช่น, จะกำหนดช่องว่าง 10px ระหว่างเฟรมสีเส้นขอบ
: แอตทริบิวต์นี้ช่วยให้คุณเปลี่ยนสีเส้นขอบของเฟรมได้ สามารถระบุสีที่ถูกต้องได้ ตัวอย่างเช่น, จะทำให้ขอบเฟรมเป็นสีแดง
ตัวอย่างการใช้งาน:
วิธีเชื่อมโยงไปยังเฟรมเฉพาะ
เราสามารถเปิดลิงค์ในเฟรมเฉพาะโดยใช้แอตทริบิวต์ เป้า
ในฉลาก. คุณค่าของ เป้า
ควรเหมือนกับชื่อเฟรม (แยม
คุณลักษณะของ ). ตัวอย่างเช่น:
ในกรณีนี้ การคลิกลิงก์ "หน้า 1" หรือ "หน้า 2" ในกรอบเมนูจะเป็นการโหลดหน้าที่เกี่ยวข้องในกรอบ "เนื้อหา"
วิธีทำลายเฟรม
หากคุณต้องการให้ลิงก์เปิดหน้านอกเฟรมเซ็ต (เช่น แทนที่เฟรมเซ็ตทั้งหมด) คุณสามารถใช้ค่าพิเศษ _สูงสุด
สำหรับแอตทริบิวต์ เป้า
. ตัวอย่างเช่น:
ในเมนู.html
ออกไปจากเฟรม
เมื่อคุณคลิก "ออกจากเฟรม" เบราว์เซอร์จะโหลด "pageOutofFrames.html" เต็มหน้าต่างแทนที่ชุดเฟรม
ตัวอย่างการแบ่งหน้าจอออกเป็นสองคอลัมน์ด้วยกรอบ
ตัวอย่างนี้แบ่งหน้าจอออกเป็นสองคอลัมน์ที่มีขนาดเท่ากัน แต่ละคอลัมน์จะโหลดหน้า HTML ที่แตกต่างกัน
ตัวอย่างการสร้างแถบนำทางด้านข้างพร้อมกรอบ
ตัวอย่างนี้สร้างแถบด้านข้างที่กินพื้นที่ 25% ของหน้าจอและใช้สำหรับการนำทาง หน้าจอที่เหลือใช้เพื่อแสดงเนื้อหาหลัก
ตัวอย่างการแบ่งหน้าจอเป็นแถวและคอลัมน์
ตัวอย่างที่ซับซ้อนกว่านี้จะแบ่งหน้าจอออกเป็นสี่ส่วนเท่าๆ กัน แต่ละส่วนจะโหลดหน้า HTML ที่แตกต่างกัน
ตัวอย่างการนำทางด้านบนด้วยเฟรม HTML
สร้างไฟล์ที่กำหนดสองเฟรมในแถว ไฟล์สองไฟล์ที่กำหนดคือ: ไฟล์หนึ่งสำหรับการนำทาง (ซึ่งใช้พื้นที่ 20% ของความกว้างของหน้าต่าง) และอีกไฟล์หนึ่งสำหรับเนื้อหาหลัก (ซึ่งใช้พื้นที่ส่วนที่เหลือของความกว้างของหน้าต่าง)
ถัดไป คุณจะต้องสร้างไฟล์ "navigation.html" และ "content.html" ตัวอย่างเช่น "navigation.html" อาจมีลักษณะดังนี้:
และ "content.html" อาจเป็นดังนี้:
ที่นี่จะเป็นเนื้อหาของหน้าที่เลือกในการนำทางยินดีต้อนรับสู่เว็บไซต์ของเรา!
ในกรณีนี้ เมื่อคุณคลิกลิงก์ใน "navigation.html" หน้าเว็บที่เกี่ยวข้องจะถูกโหลดในกรอบ "เนื้อหา"
วิธีการพูด? & เดล โมราล, ม. (ส.ฟ.). ตัวอย่างเฟรมในภาษา HTMLตัวอย่างของ. สืบค้นเมื่อ 15 พฤษภาคม 2566 จาก https://www.ejemplode.com/17-html/640-ejemplo_de_frames_en_html.html