Tag Bingkai dalam HTML
Teg bingkai HTML digunakan untuk memaparkan berbilang tapak pada satu halaman web dalam bentuk bahagian. Teg ini membolehkan mereka bentuk halaman web supaya berbilang halaman web dengan kandungan yang berbeza boleh digabungkan dan dipaparkan secara individu pada satu halaman web. Ini dicapai dengan membahagikan halaman web tunggal kepada bahagian yang berbeza, yang boleh dipanggil bingkai. Bingkai individu boleh dimuatkan secara berasingan. Teg bingkai digunakan bersama-sama dengan teg set bingkai, yang mana teg set bingkai boleh dianggap sebagai bekas dan berbilang teg bingkai di dalamnya akan mewakili berbilang tapak.
Sintaks:
Sintaks asas teg bingkai adalah seperti di bawah,
<frame src = "URL">
Atribut src menentukan sumber fail.
Seperti yang dinyatakan,
<frameset> <frame src = " "> <frame src = " "> . . <frame src = " "> </frameset>
Perhatikan bahawa teg set bingkai mempunyai teg akhir, tetapi teg bingkai tidak mempunyai teg.
Contoh Teg Bingkai dalam HTML
Contoh teg bingkai dalam html diberikan di bawah:
Contoh #1 – Jajarkan bingkai Secara Mendatar
Terdapat tiga fail frame1, frame2 dan utama.
Bingkai1.html
Kod:
<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>Bingkai2.html
Kod:
<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>Utama.html
Kod:
<!DOCTYPE html> <html> <head> <meta name = "viewport" content= "width = device-width, initial-scale = 1.0"> <title> frame tag in HTML </title> <frameset cols = "50%, 50%" > <frame src = "frame1.html" > <frame src = "frame2.html" > </frameset> </head> <body> </body> </html>
Output: Di sini, kami telah menggunakan atribut cols untuk menentukannya sebagai lajur dan lebar setiap bingkai telah ditetapkan kepada 50%.
Contoh #2 – Jajarkan bingkai Menegak
Terdapat Empat fail frame1, frame2,frame3 dan utama.
Bingkai1.html
Kod:
<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>Bingkai2.html
Kod:
<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>Frame3.html
Kod:
<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 3 </h1>
</div>
</body>
</html>Utama.html
Kod:
<!DOCTYPE html> <html> <head> <meta name = "viewport" content= "width = device-width, initial-scale = 1.0"> <title> frame tag in HTML </title> <frameset rows = "30%, 30%, 30%" > <frame src = "frame1.html" > <frame src = "frame2.html" > <frame src = "frame3.html" > </frameset> </head> <body> </body> </html>
Output: Di sini, kami telah menggunakan atribut cols pada teg set bingkai untuk membahagikan bingkai secara mendatar dan ketinggian telah disebut dalam peratusan.
Contoh #3 – Menavigasi bingkai berbeza menggunakan pautan
Untuk contoh ini, tiga fail, frame1.html, frame2.html dan frame3.html, adalah sama.
Kami akan menggunakan atribut nama dengan tag bingkai.
Utama.html
Kod:
<!DOCTYPE html> <html> <head> <meta name = "viewport" content= "width = device-width, initial-scale = 1.0"> <title> frame tag in HTML </title> <frameset cols = "30%, * " > <frame src = "menu.html" name = "menu" > <frame name = "frame" > </frameset> </head> <body> </body> </html>
menu.html
Kod:
<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : center;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> Menu </h2>
<a href = "frame1.html" target = "frame"> Frame 1 </a> </br> </br>
<a href = "frame2.html" target = "frame"> Frame 2 </a> </br> </br>
<a href = "frame3.html" target = "frame"> Frame 3 </a>
</div>
</body>
</html>Di sini Dalam teg frameset, kami telah membahagikan dua bingkai kepada lebar 30% untuk bingkai pertama dan baki semua lebar untuk bingkai kedua. Bingkai pertama akan menyenaraikan menu dalam bentuk hiperpautan. Untuk bingkai kedua, kami telah menetapkan nama untuknya, dan dalam menu.html, kami telah menetapkan sasaran sebagai nama bingkai untuk setiap pautan. Jadi, pautan ini akan mengarahkan bingkai, dan kandungan akan dipaparkan pada bingkai yang sama.
Output:
