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

แม้ว่าการใช้งานจะลดลงในช่วงไม่กี่ปีที่ผ่านมา เนื่องจากมีการใช้เทคนิคที่ทันสมัยและยืดหยุ่นมากขึ้น เช่น CSS และ JavaScript ยังคงพบได้ในบางเว็บไซต์ โดยเฉพาะที่สร้างในปี 1990 และต้นปี 1990 ของปี 2000

เฟรมหรือเฟรมทำงานอย่างไรใน HTML?

กรอบประกอบด้วยสององค์ประกอบ:

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

2. เฟรม: ธาตุ ถูกใช้ภายในก เพื่อกำหนดแต่ละส่วน และส่งไปเรียกเอกสารอื่น ๆ ที่โหลดอยู่ภายในเฟรมเซ็ต

• ติดตามด้วย: ตัวอย่าง 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 ระหว่างเฟรม

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

ตัวอย่างการใช้งาน:

วิธีเชื่อมโยงไปยังเฟรมเฉพาะ

เราสามารถเปิดลิงค์ในเฟรมเฉพาะโดยใช้แอตทริบิวต์ เป้า ในฉลาก. คุณค่าของ เป้า ควรเหมือนกับชื่อเฟรม (แยม คุณลักษณะของ ). ตัวอย่างเช่น:

ในเมนู.html
หน้า 1
หน้า 2

ในกรณีนี้ การคลิกลิงก์ "หน้า 1" หรือ "หน้า 2" ในกรอบเมนูจะเป็นการโหลดหน้าที่เกี่ยวข้องในกรอบ "เนื้อหา"

วิธีทำลายเฟรม

หากคุณต้องการให้ลิงก์เปิดหน้านอกเฟรมเซ็ต (เช่น แทนที่เฟรมเซ็ตทั้งหมด) คุณสามารถใช้ค่าพิเศษ _สูงสุด สำหรับแอตทริบิวต์ เป้า. ตัวอย่างเช่น:

ในเมนู.html
ออกไปจากเฟรม

เมื่อคุณคลิก "ออกจากเฟรม" เบราว์เซอร์จะโหลด "pageOutofFrames.html" เต็มหน้าต่างแทนที่ชุดเฟรม

ตัวอย่างการแบ่งหน้าจอออกเป็นสองคอลัมน์ด้วยกรอบ

ตัวอย่างนี้แบ่งหน้าจอออกเป็นสองคอลัมน์ที่มีขนาดเท่ากัน แต่ละคอลัมน์จะโหลดหน้า HTML ที่แตกต่างกัน

ตัวอย่างการสร้างแถบนำทางด้านข้างพร้อมกรอบ

ตัวอย่างนี้สร้างแถบด้านข้างที่กินพื้นที่ 25% ของหน้าจอและใช้สำหรับการนำทาง หน้าจอที่เหลือใช้เพื่อแสดงเนื้อหาหลัก

ตัวอย่างการแบ่งหน้าจอเป็นแถวและคอลัมน์

ตัวอย่างที่ซับซ้อนกว่านี้จะแบ่งหน้าจอออกเป็นสี่ส่วนเท่าๆ กัน แต่ละส่วนจะโหลดหน้า HTML ที่แตกต่างกัน

ตัวอย่างการนำทางด้านบนด้วยเฟรม HTML

สร้างไฟล์ที่กำหนดสองเฟรมในแถว ไฟล์สองไฟล์ที่กำหนดคือ: ไฟล์หนึ่งสำหรับการนำทาง (ซึ่งใช้พื้นที่ 20% ของความกว้างของหน้าต่าง) และอีกไฟล์หนึ่งสำหรับเนื้อหาหลัก (ซึ่งใช้พื้นที่ส่วนที่เหลือของความกว้างของหน้าต่าง)

ถัดไป คุณจะต้องสร้างไฟล์ "navigation.html" และ "content.html" ตัวอย่างเช่น "navigation.html" อาจมีลักษณะดังนี้:

หน้า 1

หน้า 2

หน้า 3


และ "content.html" อาจเป็นดังนี้:

ยินดีต้อนรับสู่เว็บไซต์ของเรา!

ที่นี่จะเป็นเนื้อหาของหน้าที่เลือกในการนำทาง

ในกรณีนี้ เมื่อคุณคลิกลิงก์ใน "navigation.html" หน้าเว็บที่เกี่ยวข้องจะถูกโหลดในกรอบ "เนื้อหา"