HTML Code:
HTML Code:
HTML Code:
This is achieved using the
Tip: You could use
HTML Code:
HTML Code:
The frameset (frame_example_frameset_1.html):
View the result
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>
The left frame (frame_example_left.html):
<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>
</body>
</html>
The right frame (frame_example_right.html):
<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>
Add a Top Frame
You can do this by "nesting" a frame within another frame.HTML Code:
The frameset (frame_example_frameset_2.html):
View the result
<html>
<head>
<title>Frameset page</title>
</head>
<frameset rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>
The top frame (frame_example_top.html):
<html>
<body style="background-color:maroon">
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</html>
(The left and right frames don't change)Remove the Borders
You can get rid of the borders if you like. Officially, you do this usingframeborder="0".
I say, officially because this is what the HTML specification
specifies. Having said that, different browsers support different
attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.HTML Code:
The frameset (frame_example_frameset_3.html):
View the result
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>
(The left, right, and top frames don't change)Load Another Frame
Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).This is achieved using the
name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target attribute.Tip: You could use
base target="content" at the top of
your menu file (assuming all links share the same target frame). This
would remove the need to specify a target frame in each individual link.HTML Code:
The frameset (frame_example_frameset_4.html):
View the result
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left_2.html" />
<frame name="content" src ="/html/tutorial/frame_example_yellow.html" />
</frameset>
</html>
The left frame (frame_example_left_2.html):
<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left_2.html).</p>
<p>
<a target="content" href="frame_example_yellow.html">Yellow</a><br />
<a target="content" href="frame_example_lime.html">Lime</a>
</p>
</body>
</html>
The yellow frame (frame_example_yellow.html):
<html>
<body style="background-color:yellow">
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>
The lime frame (frame_example_lime.html):
<html>
<body style="background-color:Lime">
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>
Tag Reference
Here's some more info on the above tags.The frameset Tag
In your frameset tag, you specify eithercols or rows, depending on whether you want frames to go vertically or horizontally.| Attribute | Description |
|---|---|
| rows | Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100% |
| cols | Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100% |
The frame Tag
For each frame you want to display, you specify aframe tag. You nest these within the frameset tag.| Attribute | Description |
|---|---|
| name | Assigns a name to a frame. This is useful for loading contents into one frame from another. |
| longdesc | A long description - this can elaborate on a shorter description specified with the title attribute. |
| src | Location of the frame contents (for example, the HTML page to be loaded into the frame). |
| noresize | Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not). |
| scrolling | Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values:
|
| frameborder | Whether the frame should have a border or not. Possible values:
|
| marginwidth | Specifies the margin, in pixels, between the frame's contents and it's left and right margins. |
| marginheight | Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins. |
The noframe Tag
Thenoframes tag is used if the user's browser doesn't
support frames. Anything you type in between the noframes tags is
displayed in their browser.HTML Code:
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<noframes>
<body>Your browser doesn't support frames.
Therefore, this is the noframe version of the site.</body>
</noframes>
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>
0 comments:
Posting Komentar