HTML - เฟรม

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

ข้อเสียของเฟรม

มีข้อเสียเล็กน้อยในการใช้เฟรมดังนั้นจึงไม่แนะนำให้ใช้เฟรมในหน้าเว็บของคุณ -

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

การสร้างเฟรม

ในการใช้เฟรมบนเพจเราใช้แท็ก <frameset> แทนแท็ก <body> แท็ก <frameset> กำหนดวิธีแบ่งหน้าต่างออกเป็นเฟรม rows แอตทริบิวต์ของแท็ก <frameset> กำหนดเฟรมแนวนอนและ colsแอตทริบิวต์กำหนดกรอบแนวตั้ง แต่ละเฟรมจะระบุด้วยแท็ก <frame> และกำหนดว่าเอกสาร HTML ใดที่จะเปิดเข้าไปในเฟรม

Note- แท็ก <frame> เลิกใช้งานใน HTML5 ห้ามใช้องค์ประกอบนี้

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างการสร้างเฟรมแนวนอนสามเฟรม -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง

ลองใส่ตัวอย่างข้างต้นดังนี้เราแทนที่แอตทริบิวต์แถวด้วย cols และเปลี่ยนความกว้าง สิ่งนี้จะสร้างทั้งสามเฟรมในแนวตั้ง -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แอตทริบิวต์แท็ก <frameset>

ต่อไปนี้เป็นคุณสมบัติที่สำคัญของแท็ก <frameset> -

ซีเนียร์ No	คุณสมบัติและคำอธิบาย
1	cols ระบุจำนวนคอลัมน์ที่มีอยู่ในชุดเฟรมและขนาดของแต่ละคอลัมน์ คุณสามารถระบุความกว้างของแต่ละคอลัมน์ได้หนึ่งในสี่วิธี - ค่าสัมบูรณ์เป็นพิกเซล ตัวอย่างเช่นการสร้างสามกรอบแนวตั้งใช้cols = "100, 500, 100" เปอร์เซ็นต์ของหน้าต่างเบราว์เซอร์ ตัวอย่างเช่นการสร้างสามกรอบแนวตั้งใช้cols = "10%, 80%, 10%" ใช้สัญลักษณ์ตัวแทน ตัวอย่างเช่นการสร้างสามกรอบแนวตั้งใช้cols = "10% * 10%" ในกรณีนี้สัญลักษณ์แทนจะใช้เวลาที่เหลือของหน้าต่าง ตามความกว้างสัมพัทธ์ของหน้าต่างเบราว์เซอร์ ตัวอย่างเช่นการสร้างสามกรอบแนวตั้งใช้cols = "3 2 * 1* *" นี่เป็นอีกทางเลือกหนึ่งของเปอร์เซ็นต์ คุณสามารถใช้ความกว้างสัมพัทธ์ของหน้าต่างเบราว์เซอร์ ที่นี่หน้าต่างแบ่งออกเป็นหก: คอลัมน์แรกใช้เวลาครึ่งหนึ่งของหน้าต่างคอลัมน์ที่สองใช้เวลาหนึ่งในสามและที่สามใช้หนึ่งในหก
2	rows แอตทริบิวต์นี้ทำงานเหมือนกับแอตทริบิวต์ cols และรับค่าเดียวกัน แต่ใช้เพื่อระบุแถวใน frameset ยกตัวอย่างเช่นการสร้างสองเฟรมแนวนอนใช้แถว = "10%, 90%" คุณสามารถระบุความสูงของแต่ละแถวในลักษณะเดียวกับที่อธิบายไว้ข้างต้นสำหรับคอลัมน์
3	border แอตทริบิวต์นี้ระบุความกว้างของเส้นขอบของแต่ละเฟรมเป็นพิกเซล ตัวอย่างเช่น border = "5" ค่าศูนย์หมายถึงไม่มีเส้นขอบ
4	frameborder แอตทริบิวต์นี้ระบุว่าควรแสดงเส้นขอบสามมิติระหว่างเฟรมหรือไม่ แอตทริบิวต์นี้รับค่า 1 (ใช่) หรือ 0 (ไม่ใช่) ตัวอย่างเช่น frameborder = "0" ระบุว่าไม่มีเส้นขอบ
5	framespacing แอตทริบิวต์นี้ระบุจำนวนช่องว่างระหว่างเฟรมในชุดเฟรม ซึ่งสามารถรับค่าจำนวนเต็ม ตัวอย่างเช่น framespacing = "10" หมายความว่าควรมีระยะห่าง 10 พิกเซลระหว่างแต่ละเฟรม

แอตทริบิวต์แท็ก <frame>

ต่อไปนี้เป็นคุณสมบัติที่สำคัญของแท็ก <frame> -

ซีเนียร์ No	คุณสมบัติและคำอธิบาย
1	src แอ็ตทริบิวต์นี้ใช้เพื่อตั้งชื่อไฟล์ที่ควรโหลดในเฟรม ค่าของมันสามารถเป็น URL ใดก็ได้ ตัวอย่างเช่น src = "/html/top_frame.htm" จะโหลดไฟล์ HTML ที่มีอยู่ในไดเรกทอรี html
2	name แอตทริบิวต์นี้ช่วยให้คุณตั้งชื่อให้กับเฟรมได้ ใช้เพื่อระบุว่าควรใส่เอกสารในเฟรมใด นี่เป็นสิ่งสำคัญอย่างยิ่งเมื่อคุณต้องการสร้างลิงก์ในเฟรมหนึ่งที่โหลดเพจไปยังอีกเฟรมหนึ่งซึ่งในกรณีนี้เฟรมที่สองต้องมีชื่อเพื่อระบุตัวเองว่าเป็นเป้าหมายของลิงก์
3	frameborder แอ็ตทริบิวต์นี้ระบุว่าจะแสดงเส้นขอบของเฟรมนั้นหรือไม่ มันจะแทนที่ค่าที่กำหนดในแอตทริบิวต์ frameborder บนแท็ก <frameset> หากมีการกำหนดค่านี้และสามารถรับค่าได้ทั้ง 1 (ใช่) หรือ 0 (ไม่ใช่)
4	marginwidth แอตทริบิวต์นี้ช่วยให้คุณสามารถระบุความกว้างของช่องว่างระหว่างด้านซ้ายและขวาของเส้นขอบของเฟรมและเนื้อหาของเฟรม ค่านี้กำหนดเป็นพิกเซล ตัวอย่างเช่น marginwidth = "10"
5	marginheight แอตทริบิวต์นี้ช่วยให้คุณระบุความสูงของช่องว่างระหว่างด้านบนและด้านล่างของเส้นขอบและเนื้อหาของเฟรม ค่านี้กำหนดเป็นพิกเซล ตัวอย่างเช่น marginheight = "10"
6	noresize โดยค่าเริ่มต้นคุณสามารถปรับขนาดเฟรมใดก็ได้โดยคลิกและลากบนขอบของเฟรม แอตทริบิวต์ noresize ป้องกันไม่ให้ผู้ใช้สามารถปรับขนาดเฟรมได้ ตัวอย่างเช่น noresize = "noresize"
7	scrolling แอ็ตทริบิวต์นี้ควบคุมลักษณะของแถบเลื่อนที่ปรากฏบนเฟรม ซึ่งจะรับค่าเป็น "ใช่" "ไม่" หรือ "อัตโนมัติ" ตัวอย่างเช่น scrolling = "no" หมายความว่าไม่ควรมีแถบเลื่อน
8	longdesc แอ็ตทริบิวต์นี้ช่วยให้คุณสามารถระบุลิงก์ไปยังเพจอื่นที่มีคำอธิบายแบบยาวเกี่ยวกับเนื้อหาของเฟรม ตัวอย่างเช่น longdesc = "framedescription.htm"

รองรับเบราว์เซอร์สำหรับเฟรม

หากผู้ใช้ใช้เบราว์เซอร์เก่าหรือเบราว์เซอร์ใด ๆ ที่ไม่รองรับเฟรมองค์ประกอบ <noframes> ควรแสดงต่อผู้ใช้

ดังนั้นคุณต้องวางองค์ประกอบ <body> ไว้ในองค์ประกอบ <noframes> เนื่องจากองค์ประกอบ <frameset> ควรจะแทนที่องค์ประกอบ <body> แต่ถ้าเบราว์เซอร์ไม่เข้าใจองค์ประกอบ <frameset> ก็ควรเข้าใจสิ่งที่อยู่ภายใน องค์ประกอบ <body> ซึ่งมีอยู่ในองค์ประกอบ <noframes>

คุณสามารถใส่ข้อความที่ดีสำหรับผู้ใช้ของคุณที่มีเบราว์เซอร์เก่า เช่นขออภัย !! เบราว์เซอร์ของคุณไม่รองรับเฟรม ดังที่แสดงในตัวอย่างข้างต้น

ชื่อเฟรมและคุณลักษณะเป้าหมาย

หนึ่งในการใช้เฟรมที่ได้รับความนิยมมากที่สุดคือการวางแถบนำทางไว้ในเฟรมเดียวจากนั้นโหลดหน้าหลักลงในเฟรมแยกต่างหาก

ลองดูตัวอย่างต่อไปนี้ที่ไฟล์ test.htm มีรหัสต่อไปนี้ -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

ที่นี่เราได้สร้างสองคอลัมน์เพื่อเติมเต็มสองเฟรม เฟรมแรกกว้าง 200 พิกเซลและจะมีแถบเมนูการนำทางที่ใช้งานโดยmenu.htmไฟล์. คอลัมน์ที่สองเติมในพื้นที่ที่เหลือและจะมีส่วนหลักของหน้าและดำเนินการโดยmain.htmไฟล์. สำหรับลิงก์ทั้งสามที่มีอยู่ในแถบเมนูเราได้กล่าวถึงกรอบเป้าหมายเป็นmain_pageดังนั้นเมื่อใดก็ตามที่คุณคลิกลิงก์ใด ๆ ในแถบเมนูลิงก์ที่มีอยู่จะเปิดขึ้นในหน้าหลัก

ต่อไปนี้เป็นเนื้อหาของไฟล์ menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

ต่อไปนี้เป็นเนื้อหาของไฟล์ main.htm -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

เมื่อเราโหลด test.htm ไฟล์จะสร้างผลลัพธ์ต่อไปนี้ -

ตอนนี้คุณสามารถลองคลิกลิงก์ที่มีอยู่ในแผงด้านซ้ายและดูผลลัพธ์ targetattributeยังสามารถใช้ค่าใดค่าหนึ่งดังต่อไปนี้ -

ซีเนียร์ No	ตัวเลือกและคำอธิบาย
1	_self โหลดเพจลงในเฟรมปัจจุบัน
2	_blank โหลดหน้าลงในหน้าต่างเบราว์เซอร์ใหม่ กำลังเปิดหน้าต่างใหม่
3	_parent โหลดเพจลงในหน้าต่างหลักซึ่งในกรณีของเฟรมเซ็ตเดียวคือหน้าต่างเบราว์เซอร์หลัก
4	_top โหลดหน้าลงในหน้าต่างเบราว์เซอร์แทนที่เฟรมปัจจุบัน
5	targetframe โหลดเพจลงใน targetframe ที่มีชื่อ