I want to show a html email inside my html page
Thats is my simplified index.html
<!DOCTYPE html>
<html class="no-js" lang="">
<head></head>
<body>
<div id='email_goes_here'></div>
</body>
</html>
And that the beginning of my email.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
....
I want to put the code from email.html inside the div#email_goes_here from index.html.
Is it valid to just copy and paste the code in the div? I am not sure if its valid html to have 2 <!DOCTYPE html> and 2 <html> tags. If its not valid, how could I display the html page inside another html page? Any approach using PHP or jQuery would be fine.
I was looking for this problem, but I didnt find anything. I only found the question how to include some html content in anoter html file, but not how to include a complete html page. Here are the links that I found:
Include another HTML file in a HTML file
view html page inside another html
How do I load an HTML page in a <div> using JavaScript?
How to include an HTML page into another HTML page without frame/iframe?
Your simplest approach will be to use <iframe>.
If you use the srcdoc attribute, you will avoid having to set up any external html documents.
Working Example:
<iframe srcdoc="
<html>
<head>
<style>p{color: rgb(255,0,0);}</style>
</head>
<body>
<p>This is an example of an <code>iframe</code> which uses the <code>srcdoc</code> attribute.</p>
</body>
</html>
">
</iframe>
Further Reading: https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe
Short answer: Use PHP.
There are many ways to include your pages inside others. Copy-paste won't be a good thing to do as, you guessed it, two html declarations can't be in the same page.
You could use an <iframe>, but looking at how browsers are starting to drop those, a more viable way is using PHP include or require. Of course, even with this method, two html declarations aren't allowed, so you'll have to "clean" your email.html file.
EDIT: Forgot to point it that iframes aren't allowed in mobile browsers, so you will lose those if you use iframes.
You can try to use iframe :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe
It permit to have one page inside another, but have some limitations.
Another way to do this more properly would be to use some javascript framework that are made to do reusable components (like Angular.js or React.js). And use your email page as a component.
It will be longer to learn though.
You can use HTML tag to embed another document within the current HTML document.
Read more: https://www.w3schools.com/TAGs/tag_iframe.asp
Related
Is it possible to use PHP to include the contents of the <body> on one page, and add it to the <body> of the other page, while doing the same thing for the header? Or is it just easier / better to use two pages? This is kind of what I'm going for:
Some Page
<html>
<head>
- nav.php's header -
- stuff special to Some Page -
</head>
<body>
- nav.php's body -
- content special to Some Page -
</body>
</html>
I know the require statement can be used to take the whole contents of a file. Is there some sort of "merge" statement to kind of merge the pages together?
You are going to run into all sorts of security, re-use and maintenance issues if you rely on the inline behaviour of included files in PHP. But if you stick to some simple rules you can avoid these problems:
Any HTML tag opened by PHP must be closed in the same scope (i.e. function)
Included files must only contain namespace, constant, function and object definitions or further include/require statements (but using the autoloader is prefereable).
So applying these to your base page above, and observing the established good practice of putting includes/requires at the top of your page....
<?php
// always start your page with a PHP block - it makes interfering with the headers
// much less painful
require_once('nav.inc.php');
function local_head_content()
{
...
}
function local_body_content()
{
...
}
?>
<html>
<head>
<?php
nav_head_content();
local_head_content();
?>
</head>
<body>
<?php
nav_body_content();
local_body_content();
</body>
</html>
But it would probably be better to invoke local_head_content() / local_body_content() as callbacks from nav content.
(yes it is possible to do what you ask, even without function calls - but it would be a very bad idea which is why I've not explained how to do this).
A more conventional approach to solving the problem of shared content across different files is to use a front controller pattern - instead of the webserver selecting the page specific content, this is done in the PHP code with all URLs pointing to the same entry script.
Since you are including nav.php in the <body> of index.php, nav.php should not contain tags like <html>, etc. since that will result in a final page which does not conform to the HTML spec.
Using your example, this is the contents of the index.php page which will be received by the browser:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style>
- styles for index.php -
</style>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<style>
- Style for navigation menu -
</style>
</head>
<body>
<h1>Title</h1>
<nav>
- Navigation -
</nav>
</body>
</html>
<content>
- content here -
</content>
</body>
</html>
As you can see, your final page contains multiple <!DOCTYPE> tags, multiple <html> tags, etc.
nav.php should contain only the tags which you want to be included in that part of the final page. So your nav.php should look more like this:
<nav>
- Navigation -
</nav>
As for your styles in index.php, you should have a <link> tag which pulls in an external style sheet, e.g. <link rel="stylesheet" href="style.css">. All the CSS for all pages would go in style.css.
I have a php file with multiple forms.. for simplicity's sake I have created multiple html file and each of them has a form and starts from <html> and ends with </html>.
the php file is something like this:
<?php
include('f1.html');
include('f2.html');
...
?>
The result of this seems okay.. my question is, it is okay if I keep it like this or I have to create head.html and end.html then includes forms in between??
what is the differences??
Any help is appreciated
Thanks
Yes, you can include as many as you want. But each html file should not contain <html /> enclosed. You should put it in your main file and the file which you want to include - in that file just use div wrapper to include your content. I mean you can use any html tag that you use the tag inside body tag.
But as per google page speed guide, you should maintain least html size as far as possible.
Here's an example:
main.php:
<!DOCTYPE html>
<html>
<head>
<title>Example page</title>
</head>
<body>
<?php
include('f1.html');
include('f2.html');
?>
</body>
</html>
f1.html and f2.html:
<div>
your content
</div>
Is there any method to cache an HTML-code of ExtJS components with further initializing it (binding events and so on) so that I can send it by PHP inside one solid HTML file?
In other words I want server to send already pre-rendered page.
If your idea is to capture the memory state of the client application that seems like a bold project, to say the least. See this other question.
If what you want is to have all you application embedded in one single HTML file, that is possible. Just concatenate all you Javascript (including Ext's code) and put it in a script tag, and do the same with the CSS and wrap in into a style tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/* All your CSS here */
</style>
<script>
// All you javascript here
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
Obviously, if you care about the maintainability of you code, you should automate this procedure...
I have written a function where code related to the headers of a site are included. This is the function:
First of all, is there any problem with a coding such as the above-anything at all?
Secondly, Netbeans issues a warning in the html tag: Stray start html tag here.
I suppose this happens because the html tag is enclosed in a function and this functions does not contain the end tag-I assume.
function output_headers()
{?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Appointmetns24x7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/admingeneral.css"/>
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
</head>
<body> <?php
}
If there is nothing wrong with this coding scheme then I will just ignore netbeans warning and continue.
The actual error message is due to the <body> tag not being closed. Netbeans is picking this up and warning you that the HTML may be invalid... because it is invalid. Netbeans has no way of knowing just by looking at this function that it shouldn't be a complete HTML document.
If you must do things this way, you should avoid splitting individual HTML tags between different code blocks. Best practice would be to make sure that any function that outputs an HTML tag also outputs the corresponding closing tag.
However the way you're doing things is not ideal in any case.
You've split your template into a 'header' and (presumably) a 'footer' function. This sort of technique was quite common years ago, but these days it's not considered particularly good practice.
A better technique would be to have a separate template file, which contains all your HTML -- ie the header and the footer, with placeholders where you want the dynamic content to go. You then build the dynamic content bits as strings, and feed them into the template.
In its simplest form, this just means that the template is a plain HTML file with PHP blocks, for placeholders like <?php echo $mainBodyCode; ?> in the appropriate places. You then just need to make sure the placeholder variables are populated, and include it when you want to output the page.
Hope that helps.
I would sat the stray tag is the
xmlns="http://www.w3.org/1999/xhtml"
because you called <!DOCTYPE html> which isn't xhtml, so calling the xml namespace is invalid.
It seems that if you enclose root type html(html tag) elements inside a function and then close them in a place on the script outside the function the beginning tag was set-then this interpreted as error in Netbeans.
Someone can just choose to ignore it, else he should avoid coding this way, putting html header info in a function.
When designing a website in PHP, you typically have a header.php file that you include in every page on the site. The header.php file would include the <head> tag (among other things). However, I often find that I need to put page-specific JavaScript within the <head> tag.
The way I've handled this in the past is by adding IF statements to my header to determine what pieces of JavaScript should be outputted (i.e. IF this is the home page, output the JavaScript needed for the home page, IF this is the about page, output the JavaScript needed for the about page, etc.).
This is probably a terrible way to do it. What is the standard practice?
Well, first of all, <script> tags do not need to be located in the header. It's perfectly valid to put them anywhere in the HTML document.
But if you're determined to include them in the header, a simple solution is to declare a variable that the header should echo which contains your script tags. For example:
<?php
$scripts = "<script src='script.js' type='text/javascript'></script>";
include("header.php");
?>
And then your header.php script would like as follows:
<html>
<head>
<!-- header stuff goes here -->
<?php /*echo out scripts */ echo $scripts; ?>
</head>
<body>
<!-- part of body goes here -->
Assuming you are actually including header.php in every file, just define an array before you include header.php and add the extra scripts to that. Then in header.php, have it check for that array and write out extra script tags if necessary:
mypage.php:
$extra_scripts = array('jquery.js','jquery-ui.js');
include('header.php');
// Rest of your code.
header.php:
if (is_array($extra_scripts)) {
foreach( $extra_scripts as $script ) {
// Render a script tag
}
}
If you use a templating engine like Twig, you can inherit a base template as opposed to including a header and a footer and modify the 'blocks' defined in that base.
For example purposes, your base template might include a content block and a header_javascript block like so
{% block header_javascript %}
<script src='/js/jquery.js' type='text/javascript'></script>
{% endblock %}
Then, in your child template, you can override this block, call {{ parent() }} and then add your additional, page-specific scripts.
I can see that your question has been answered very clearly. but I would like to add something.
Well, technically, it is valid to place you script tag anywhere in your document but it is better to place your script at the end of document, unless necessary. it will let visitor still see your html and javascript yet to be download, and BTW normally you don't need to run you script until DOM is ready.
This is how I do it:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta name="description" content="Page Description" />
<!-- Includes header stuff, css, js, google analytics, etc.. -->
<? include('header.php'); ?>
</head>
<body>
...
This allow me to avoid repetitive coding while adding flexibility to my pages.