I'm trying to create a simple webpage using frames.
Currently I have file index.html with the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="description" content="description">
<meta name="author" content="author">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<frameset>
<frame name="header" src="header.html">
<frame name="sidebar" src="sidebar.html">
<frame name="mainarea" src="home.html">
<frame name="footer" src="footer.html">
</frameset>
</html>
Files header.html, sidebar.html, home.html, and footer.html all look like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Header</title>
<meta name="description" content="description">
<meta name="author" content="author">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<p>Header</p>
</body>
</html>
When I try to open the file (index.html), I get this.
What am I doing in incorrectly? I want all 4 html files to display, not just the first one.
You need to specify rows and cols on the frameset element — or the browser will not know how to size the frames, and will not display them properly.
This code, for instance, would yield four quadrants:
<frameset cols="50%,*" rows="50%,*">
<frame name="header" src="header.html">
<frame name="sidebar" src="sidebar.html">
<frame name="mainarea" src="home.html">
<frame name="footer" src="footer.html">
</frameset>
Your example calls for something like this:
<frameset cols="100%" rows="10%,*,10%">
<frame name="header" src="header.htm" noresize="">
<frameset cols="20%,80%" rows="100%">
<frame name="sidebar" src="sidebar.htm" noresize="">
<frame name="home" src="home.htm" noresize="">
</frameset>
<frame name="footer" src="footer.htm" noresize="">
</frameset>
NB: frameset is not valid HTML5 as it has been deprecated. I recommend you to look into newer ways of achieving the desired effect if this is for anything non-trivial, as browsers probably won't support frameset forever.
Related
I have the following HTML files
INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>This is a frameset with OBJECT in the HEAD</title>
</head>
<frameset cols="50%,50%">
<frame src="bianca.html" name="bianca"></frame>
<frame src="second.html" name="second"></frame>
</frameset>
</html>
BIANCA.HTML
<!-- In bianca.html -->
<html>
<head>
<title>Bianca's page</title>
</head>
<body>
...the beginning of the document...
<p id="test">
<script type="text/javascript">
console.log(window.parent.bianca.document.getElementById("test"));
console.log(window.parent.second.document.getElementById("test1"));
</script>
...the rest of the document...
</p>
</body>
</html>
SECOND.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="test1">From second frame</h1>
</body>
</html>
The output(as logged in the console)is :
<p id="test">...</p>
undefined
Why is the second line undefined, however if i change the order of the frames in index.html as:
<FRAME src="second.html" id="second" name="second"></FRAME>
<FRAME src="bianca.html" id="bianca" name="bianca">
then correct output(as expected) is logged. Why is it not working in the first case?
In html I use the frame on the main page but the downsampling does not appear on the main frame please solve the problem
<pre>
<frameset rows = "15%,90%" frameborder="YES" border="2" framespacing="0">
<frame src="html/top_frame.html" name="top">
<frame src="html/login.html" name="main" scrolling="YES" >
</frameset>
</pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<pre>
<frameset rows = "15%,90%" frameborder="YES" border="2" framespacing="0">
<frame src="html/top_frame.html" name="top">
<frame src="html/login.html" name="main" scrolling="YES" >
</frameset>
</pre>
</head>
<body>
</body>
</html>
How to load a page from server in <iframe> / <frame> in Chrome? Do we have set any specific headers to load?
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<TITLE>TEST</TITLE>
</HEAD>
<FRAMESET ROWS="3%, 97%">
<FRAME SRC="HTTPS://WWW.YAHOO.COM" BORDER="0" />
<FRAME SRC="HTTPS://WWW.GOOGLE.COM" BORDER="0" />
</FRAMESET>
</HTML>
This will help you.
<iframe src="https://www.w3schools.com" height="100%" width="100%"></iframe>
Let's say I have the following HTML files:
header.html
<html>
<head>
<link href="headerstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>Page Header</div>
</body>
</html>
body.html
<html>
<head>
<script src="body.js"></script>
</head>
<body>
<span>Page Body</span>
</body>
</html>
I want to take these two files and make a master file that would look like this:
<html>
<head>
<link href="headerstyle.css" rel="stylesheet" type="text/css" />
<script src="body.js"></script>
</head>
<body>
<div>Page Header</div>
<span>Page Body</span>
</body>
</html>
How can I go about merging them into one HTML file in Java, maybe using Java (JSoup) or JQuery?
Thank you all in advance.
You can do by <Frameset> Hope you get your needs
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame src="frame_a.htm">
<frame src="frame_c.htm">
</frameset>
<frame src="frame_b.htm">
</frameset>
I got this exercise I have to make involving framesets. I've created this html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<frameset rows="50%,50%" cols="50%,50%">
<frame src="../../topleft.html" name="topleft">
<frame src="topright.html" name="topright">
<frame src="botleft.html" name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="brtl.html" name="brtl">
<frame src="brtr.html" name="brtr">
</frameset>
<frame src="botrbot.html" name="botrbot">
</frameset>
</frameset>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>topleft.html</title>
</head>
<body>
topleft
</body>
</html>
All the other html's are identical to topleft.html and therefor I've not included them. Nothing is showing in my browser. What am I doing wrong?
if you are using frameset there is no use of body, so just remove the <body> and </body>.
if you want the browser to display something when no frames are supported follow this link.
Frameset tag can't use the body, so just remove tag after try comes to output.