Session 5 Examples
Basic Frameset | Nested Framesets | Link Targets | Frame Formatting | Inline Frames
To use these examples, type (or copy) the code into a new document, save as an htm file, then view in your browser. Modify the code to see what effect it has on the output. Experiment. Play.
Detailed instructions are available here
Note that each <html> block has to be saved as a separate htm file.
Basic Frameset
<html> <!-- save as basicFrameset.htm -->
<head>
<title>Basic Frameset</title>
</head>
<frameset rows="200,20%,*">
<frame src="doc1.htm" name="frameOne">
<frame src="doc2.htm" name="frameTwo">
<frame src="doc3.htm" name="frameThree">
</frameset>
<noframes>Time to upgrade your browser!!!</noframes>
</html>
<html> <!-- save as doc1.htm -->
<head>
<title>Document One</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</body>
<html> <!-- save as doc2.htm -->
<head>
<title>Document Two</title>
</head>
<body>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</body>
</html>
<html> <!-- save as doc3.htm -->
<head>
<title>Document Three</title>
</head>
<body>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</body>
</html>
Nested Framesets
<html> <!-- save as nested.htm -->
<head>
<title>Nested Framesets</title>
</head>
<frameset rows="150,*">
<frame src="doc1.htm" name="frameOne">
<frameset cols="200, *">
<frame src="doc2.htm" name="frameTwo">
<frame src="doc3.htm" name="frameThree">
</frameset>
</frameset>
<noframes>
Time to upgrade your browser!!!
</noframes>
</html>
Link Targets
<html> <!-- save as links.htm -->
<head>
<title>Links</title>
<base target="frameThree">
</head>
<body>
<p><a href="linkTargets.htm" target="_top">Home</a></p>
<p>
<a href="doc1.htm">Document 1</a><br>
<a href="doc2.htm">Document 2</a><br>
<a href="doc3.htm">Document 3</a>
</p>
<p>
<a href="http://www.google.com" target="_blank">Google</a><br>
<a href="http://www.microsoft.com" target="_top">Microsoft</a>
</p>
</body>
</html>
<html> <!-- save as linkTargets.htm -->
<head>
<title>Link Targets</title>
</head>
<frameset rows="150,*">
<frame src="doc1.htm" name="frameOne">
<frameset cols="200, *">
<frame src="links.htm" name="frameTwo">
<frame src="doc3.htm" name="frameThree">
</frameset>
</frameset>
<noframes>
Time to upgrade your browser!!!
</noframes>
</html>
Frame Formatting
<html> <!-- save as frameFormatting.htm -->
<head>
<title>Frame Formatting</title>
</head>
<frameset rows="150,*" framespacing="5" border="5" bordercolor="#0000FF">
<!-- borders within this frameset will be 5px blue -->
<frame src="doc1.htm" name="frameOne" noresize="noresize"> <!-- not resizable! -->
<frameset cols="200, *" framespacing="10" frameborder="yes" border="10" bordercolor="#FF0000">
<!-- borders within this frameset will be 10px red -->
<frame src="links.htm" name="frameTwo" scrolling="auto"> <!-- options are auto, yes, and no -->
<frame src="doc3.htm" name="frameThree">
</frameset>
</frameset>
<noframes>
Time to upgrade your browser!!!
</noframes>
</html>
Inline Frames
<html> <!-- Save as iFrames.htm -->
<head>
<title>Inline Frames</title>
</head>
<body>
<p>A few examples of iframes...</p>
<p>
<iframe name="google" src="http://www.google.com" width="400" height="300" align="left" hspace="10" vspace="10" marginheight="20" marginwidth="20" border="2" frameborder="1">Content here for browsers that don't display iframes. Perhaps a link to the url you were going to display?</iframe> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p><iframe src="http://www.jdhorn.com/student/html/Session05.htm" width="600" height="400" align="right">Content here for browsers that don't display iframes. Perhaps a link to the url you were going to display?</iframe> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Attributes:
<ul>
<li>src (url to display)</li>
<li>height and width (in px)</li>
<li>align (bottom, left, middle, right, or top)</li>
<li>border (width in px)</li>
<li>frameborder (1 or 0)</li>
<li>marginheight and marginwidth (in px)</li>
<li>hspace and vspace (in px)</li>
</ul>
</p>
</body>
</html>