Now i have the footer and header of the main page copied in every page of my site, is there a way to set it somehow to update on every page each time i modify it on index, or to get it from an external source?
For a more advanced approach, you can simply use PHP Includes or Requires.
include ‘filename’;
or
require ‘filename’;
The filename’s will simply be your header and footer pages. I’ll show you an example to get the idea.
Let’s say we have a footer and it looks like this:
<?php
echo “<p>Copyright of Brian. SO
1994-“.date(“Y”).</p>”;
?>
Now be mindful that, like always, you can add attributes to the paragraph in your footer and header and even call style sheets that can style those paragraphs or whatever you’ve got in you footer or header.
Now, to have your page(s) display the footer or header that you’ve made, and in your case, both; simply use the format shown here:
<html>
<body>
<h1>Welcome to my Homepage!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include ‘footer.php’;?>
</body>
</html>
Now, notice that in my example, my footer file is in a .php format rather than an .html, that’s because my footer example contained a PHP specific function to render the current year. If yours is strictly HTML with a CSS style sheet linked to it, simply type ’footer.html’; or whatever your file name is. The header works the same exact way!
You can’t do this with plain HTML. You may use jquery or javascript frameworks though.
Follow this solution here: https://stackoverflow.com/a/18712605/3086531
I'm using the AIR HTML control and I want to pass in a full HTML page string. A full HTML page simply meaning that the HTML markup has HTML begin and end tags. It looks like htmlText property accepts HTML formatted markup but might not be built to accept a full HTML page. A HTML formatted markup would be something like this:
<p>This is a paragraph. Here is <b>bold</b> text.</p>
Here is a full HTML page example:
<html>
<body>
<p>This is a paragraph</p>
</body>
</html>
Or would it be better to write the page to the file system and then load it through the location property? One thing to note is that I could be updating the HTML page a lot so I would like to avoid writing to the file system if possible.
I'm curious as to exactly what the flexibility is for the html5 <object> tag.
If I have a main web page set up like this
<body>
<div id="container">
<object data="??"></object>
</div>
</body>
and in a separate webpage I have this:
<body>
<div id="info">
<p> text text blah blah text </p>
</div>
</body>
Is there a way to pull specifically the html from the "info" div on the secondary page into the object on the primary page? If not, what kind of alternative solution should I look into?
object is not an HTML5 specific tag, it also existed in HTML 4.01. It is not useful for including pages into other pages, rather it allows the page to contain Java Applets, Flash etc. The only HTML solution for including pages is the iframe tag.
You should instead insert some JavaScript that makes an AJAX call to fetch the second page. Parse it using innerHTML. Then you can select the desired element using getElementById and insert it into the container div.
If you want to do it from the server side, have a look at PHP...
There are many people that mark closing tags like this to help identify the closing tag that goes with an HTML tag:
<div id="header">
<div id="logo">
<a href="index.php">
<img id="logoimg" src="images/as_logo.png" alt="Logo" border="0" />
</a>
</div> <!-- logo -->
</div> <!-- header -->
I was wondering if it is syntactically ok to do this:
<div id="header">
<div id="logo">
<a href="index.php">
<img id="logoimg" src="images/as_logo.png" alt="Logo" border="0" />
</a>
</div id="logo">
</div id="header">
UPDATE: Here is the text from the spec on HTML5.3:
8.1.2.2. End tags
End tags must have the following format:
The first character of an end tag must be a U+003C LESS-THAN SIGN
character (<).
The second character of an end tag must be a U+002F
SOLIDUS character (/).
The next few characters of an end tag must be
the element’s tag name.
After the tag name, there may be one or more
space characters.
Finally, end tags must be closed by a U+003E
GREATER-THAN SIGN character (>).
8.1.2.3. Attributes
Attributes for an element are expressed inside the element’s start tag.
Note that attributes are only allowed on START TAGS.
using #jbyrds idea; using the HR tag allows you to see if you forgot the z attribute:
<div id="header">
<div id="logo">
<a href="index.php" id=link">
<img id="logoimg" src="images/as_logo.png" alt="Logo" border="0" />
</a><hr z="link">
</div><hr z="logo">
</div><hr z="header">
Although this adds more text, 32 extra characters vs. the original or the tags having a hidden class, you can use CSS to hide them.
[z] {
display: none;
}
Short answer, No.
Use the comments instead.
The answer is no for most tags. However, you could argue that tags like "img" that can be self-closing, are able to have attributes in them. But these self-closing tags are taking the place of an opening tag and a closing tag, so it's not the same as having an attribute in a closing tag. To be honest, there is really no need for this, it would just create more for the browser to have to read and make the page size bigger.
Sorry, but it doesn't work and doesn't validate.
If you try other attributes in closing tags, then the browser skips the attribute. I tried it in several ways, tested it with ids and classes, and the css and the javascript didn't recognized them in the ending tag.
Your best bet is the commenting.
EDITED
Or you could make your own html tags.
You must use hyphenation, and you should avoid
document.createElement('foo-bar');
no, not possible. some browser will ignore it, but maybe some other browsers will complain and won't display HTML correctly.
The original question describes a specific scenario of four parts:
improving html code readability, and specifically: matching opening and closing <div> … <\div> tags;
while reading (debugging) the rendered html page source grabbed from the browser;
when the rendered source has been dynamically generated (server-side generated/processed) and also stripped of all comments before sending the webpage to the requesting client;
and in this case the question is specific to WordPress (the well known php CMS platform for creating websites, blogs, etc.).
The specific complexity here is that there is no one source file to look at on the server as the webpage was dynamically generated by code with input from many files, databases, APIs, etc.
AND
That as previously noted, a common technique of placing a comment at the end of each closing <\div> is not helpful here because Wordpress, has stripped all comments prior to serving the page, presumably to make the page size smaller.
A Javascript Solution:
Forget about trying to hack the html in an effort to circumvent WordPress and the browser and the standards. Instead simply re-insert the comments back into the rendered source like this.
When matching opening <div id="myDivID"> and
closing </div> tags this javascript may help.
This function will comment every closing div tag
and label it with the div’s ID attribute, producing
a result like this:
<div id="myDivID">
<p>
Lorem ipsum dolor sit amet, consectetur
...
anim id est laborum.
</p>
</div><!-- end #myDivID -->
This will work even when the rendered page is
stripped of comments (by WordPress as in the
original question). Just trigger or inject the
function at any point you like, then view or save
the source. As others noted previously, using
comments doesn't violate the spec as some other
suggestions may.
This short function should be easy to understand and
to modify for similar purposes. (Note the insertBefore
workaround, as there is no JS insertAfter method.)
var d = window.document;
insertCommentAtDivCloseTag(d);
function insertCommentAtDivCloseTag(document) {
var d = document;
var divList = d.getElementsByTagName('div');
var div = {};
for (div of divList) {
var parent = div.parentNode;
var newNode = new Comment(' end #' + div.id + ' ');
parent.insertBefore(newNode, div.nextSibling);
}
}
This is the quick and easy one-off solution. If that’s all you need skip the rest...
If WordPress/web development is something you do everyday you may wish to consider exploring some of the following:
Hack WordPress
Again forget about hacking the HtML standard and hack wordpress instead. In fact WordPress is designed to be hacked. Virtually every function WordPress uses in creating a webpage has a hook that you can use to override or alter what it does.
Codex, The Rosetta Stone of WordPress
Find the one stripping out your comments and add a function to turn it off and on.
If it’s been thought of before, there’s already a plugin for it.
WordPress Plugins Home Page
WordPress plugins come and go, some are maintained others not, some are very good, and some are poorly designed, some are just bad. So caveat emptor. With that proviso, I was able find such a plug-in in ten seconds, with one search, on the first try.
Beyond WordPress
For so many reasons, it is beneficial to serve the smallest possible version of your webpage and WordPress may not be the only actor dynamically altering your code or caching older versions.
Your WordPress Installation and Blog Post (database)
↓
WordPress Theme
↓
WordPress Plugins
↓
The HTTP Server, such as Apache and it’s Modules
↓
A Proxy Server such as Nginx
↓
A Hosting Provider
↓
A CDN, Content Delivery Network
↓
(More Network)
↓
Finally My Browser the Client
↑
Also any Caches Maintained by Any of the Above
Finally, if this sort of thing is or is becoming your job, you’ll eventually want to explore specialized IDEs and separate production and development servers.
Accepting that the simple answer is No, my entire HTML life, I've identified closing tags by following with a comment. But long ago, it became impossible to nest comments. So when debugging, it is a royal pain to comment out a <DIV>...</DIV>, because of that identifying comment. Closing the DIV comment this way makes the comment closure hard to spot.
<!--
</DIV>--><!-- END DIV NAMEOFDIV -->
It is better placed on its own line, but this both hard to read and involves too much temporary manipulation...
<!--
</DIV>
-->
<!-- END DIV NAMEOFDIV -->
I'm no expert in such issues, but from this HTML end-user's view it seems absolutely absurd that a closing DIV can't be easily identified.
I will experiment with other kludges, such as adding a useless <i CLOSES NAMEOFDIV></i> tag. Or maybe a fake, meaningless tag? (e.g., <ENDDIV NAMEOFDIV>) (The nondisplayed HR z= trick is neat, but yet another visual confusion.)
We really shouldn't have to. What were the powers that be thinking?
I am having 1 pure html page for ex. sample.html. I need to include this html into another pure html for ex.Orginal.html.How to do this? I am having a header image in my sample.html.It should come at the top of the Orginal.html page.
If you're using Apache web server, you could try using server side includes.
You can't do such things in pure HTML, unless you use frames or iframe element. But better merge them by hand...
Here is an example of how to do it in pure HTML with an iframe, which although strangely not mentioned in HTML 4 specification is supported by all major browsers (and is in the HTML 5 specification)
<body>
<h1>This is original page</h1>
<p>Some content on original page.</p>
<iframe src="sample.html" width="600" height="300"></iframe>
</body>
You can adjust the width and height and you can also remove the border if you want the page to be more seamless.
Be wary of JavaScript solutions to this problem, especially if you want to be viewed on mobile devices.
Additional note: Avoid frameset solutions also, as they aren't valid markup.
See Include One File In Another, which has a summary of the various techniques that are available (along with their pros and cons).
You could use JavaScript to load some HTML from one document into another. This task is fairly simple using the jQuery toolkit:
$("The ID of a container (a div element for instance) in which you want to load
the contents of a HTML file").load("path to html file you want to load");
<div id="inserthere" />
$(function ()
{
$("#inserthere").load("loadme.html"); // Load the contents of loadme.html
// and stuff it in the div with the
// ID of "inserthere"
});