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>
Related
I am using GoDaddy to have a mask of my website. When a user goes directly to the actual address of the site, the icon shows in the browser tab. When they go to the GoDaddy address, it doesn't show.
GoDaddy uses a <frameset> to perform the mask. The icon is set through <link href="http://THEACTUALADDRESS/favicon.ico" rel="icon" type="image/icon">. When I go to the link http://THEACTUALADDRESS/favicon.ico, the icon can be seen; that's not the problem.
Is it possible to set the website's icon from within a <frameset>? I have tried to use target="_top" inside the <link> but that does not fix the issue.
This is the code returned from the GoDaddy address:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>THEACTUALADDRESS</title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://THEACTUALADDRESS" frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 12 -->
<!-- -->
</html>
And the code at http://THEACTUALADDRESS/:
<html>
<head>
<link rel="icon" href="http://THEACTUALADDRESS/favicon.ico" type="image/icon" target="_top"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...the rest of the page
I needed to put the code in the framset index.html AND use a favicon.PNG. Then the icon appears in the framset AND at the actual site.
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.
I am working with frames for the first time. Here is
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="20%,*">
<frame name="top" src="top.html" name="topmenu" />
<frame name="main" src="content.html" name="content" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
top.html
<html>
<head></head>
<body>
<div id="container">
<!-- begin navigation -->
<nav id="navigation">
<ul>
<li>Contact</li>
</ul>
</nav>
<!-- end navigation -->
</div>
</body>
</html>
content.html
<html>
<head></head>
<body>
Some Content
</body>
<html>
contact.html
<html>
<head></head>
<body>
Contact page
</body>
<html>
With this, the output is as under
Now when I click on the Contact link, instead of displaying the content in the content.html, it opens in a new tab as under
What is the mistake I am making. I believe there is some problem from my side in choosing the proper target.
Frames are not supported in HTML5 ^, it is deprecated, and to get it working the <!DOCTYPE> must be set to either HTML Frameset DTD or XHTML Frameset DTD.
If you check the HTML setting in this jsFiddle you'll see that I had set the DOCTYPE to "HTML 4.01 Frameset" in order to make it works, as in this image:
** Also Note that you have used the name attribute twice in each frame tag and there should be only one!
<frame name="top" src="top.html" name="topmenu" />
<frame name="main" src="content.html" name="content" />
^ Sources:
https://developer.mozilla.org/en/docs/Web/HTML/Element/frame
http://www.w3schools.com/tags/tag_frame.asp
I am learning HTML and was creating frames which is not working for me. not sure why, below is my code, Please suggest on reason why it is not working. Browser renders me a blank page.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>
Frames
</title>
</head>
<body>
<frameset cols="25%,75%">
<frame src="Links.html" name="links"/>
<frame src="Main.html" name="content"/>
</frameset>
</body>
</html>
Links HTML
<!DOCTYPE html>
<html>
<head>
<title>
Links
</title>
</head>
<body>
<h3>Links</h3>
<ul style="link-style-type:square">
<li> Home</li>
<li> Contact us</li>
</ul>
<h3>Search</h3>
<ul style="link-style-type:square">
<li> Google.com</li>
</ul>
</body>
</html>
Main.HTML
<!DOCTYPE html>
<html>
<head>
<title>
Main
</title>
</head>
<body>
<h3 align="center">Welcome to Foddies</h3>
<p>
-: About us :-
Established in 2015. We are a leading food chain spread in 23 countries with all type of cusines :)
</body>
</html>
This is because frameset must not be inside body tags.
see this w3 recommendation.
change your code to this:
<!DOCTYPE html>
<html>
<head>
<title>
Frames
</title>
</head>
<frameset cols="25%,75%">
<frame src="Links.html" name="links"/>
<frame src="Main.html" name="content"/>
</frameset>
</html>
Also as suggested here, frame is now deprecated.
The frame tag is depricated and the functionality is removed from most browsers.
Edit: I would suggest using an iframe instead.
To use frames on a page use <frameset> tag only instead of <body>
tag.
Also Frames are deprecated in HTML, I would rather suggest go for iFrame tags.
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.