ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLのフレームタグ

HTMLのフレームタグ

王林オリジナル: 2024-09-04 16:32:031154ブラウズ

HTML フレームタグは、単一の Web ページ上に複数のサイトをセクション形式で表示するために使用されます。このタグを使用すると、コンテンツが異なる複数の Web ページを組み合わせて 1 つの Web ページに個別に表示できるように Web ページをデザインできます。これは、単一の Web ページをフレームと呼ばれるさまざまなセクションに分割することによって実現されます。個々のフレームは個別にロードできます。フレームタグはフレームセットタグと一緒に使用されます。フレームセットタグはコンテナと見なされ、その中の複数のフレームタグは複数のサイトを表します。

構文:

フレームタグの基本的な構文は次のとおりです。

<frame src = "URL">

src 属性はファイルのソースを指定します。タグは他のいくつかの属性をサポートしていますが、src が主要な属性です。

前述したように、タグはとともに使用されます。タグ。フレームセットは、各フレームが同じページにロードされる個々のサイトを表す複数のフレームのコレクションと考えることができます。 Frame タグは、以下のように Frameset タグとともに使用されます。

<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>

frameset タグには終了タグがありますが、frame タグには終了タグがないことに注意してください。

HTML の Frame タグの例

HTML のフレームタグの例を以下に示します。

例 #1 – フレームを水平に整列させる

frame1、frame2、main の 3 つのファイルがあります。

フレーム1.html

コード:

<!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>

フレーム2.html

コード:

<!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>

Main.html

コード:

<!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>

出力: ここでは、cols 属性を使用して列として指定し、各フレームの幅は 50% に設定されています。

HTMLのフレームタグ

例 #2 – フレームを垂直方向に整列させる

frame1、frame2、frame3、main の 4 つのファイルがあります。

フレーム1.html

コード:

<!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>

フレーム2.html

コード:

<!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>

フレーム3.html

コード:

<!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>

Main.html

コード:

<!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>

出力: ここでは、frameset タグにcols 属性を使用してフレームを水平に分割し、高さはパーセンテージで指定されています。

HTMLのフレームタグ

例 #3 – リンクを使用してさまざまなフレームを移動する

この例では、frame1.html、frame2.html、frame3.html の 3 つのファイルは同じです。

フレームタグで name 属性を使用します。

Main.html

コード:

<!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

コード:

<!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>

こちら Frameset タグでは、2 つのフレームを最初のフレームの 30% の幅、2 番目のフレームの残りの全幅に分割しています。最初のフレームには、ハイパーリンクの形式でメニューがリストされます。 2 番目のフレームには名前を割り当て、menu.html でターゲットをすべてのリンクのフレーム名として設定しました。したがって、このリンクはフレームを誘導し、コンテンツは同じフレームに表示されます。

出力:

HTMLのフレームタグ

注: HTML5 では、