Say I have a webpage with multiple html documents
ex:
Homepage.html Aboutme.html Contactinfo.html
And at the bottom of all of these pages I want a little message
"Hello and welcome to my website"
But I want to change that later on to something else
"I hope you enjoy my website"
Can I have a separate Html document linked to my other html documents to easily change the code without having to go to each document
So like footer html will contain
<p>"Hello and welcome to my website"</p>
And it shows up on all my pages
then later I change it to
<p>"I hope you enjoy my website"</p>
and then it changes on all my pages
similar to how you can link css files but instead with code
You cannot do this with only HTML - it lacks that capability.
You can do this with PHP, it is called a server-side include, and looks like this. Each page would have, embedded amongst the HTML:
<p>Paragraph on this page</p>
<?php include 'inc/message.inc.php'; ?>
<p>Another paragraph of information</p>
The above would load the contents of a file called message.inc.php and stored inside a folder called inc.
Alternately, you can use jQuery (javascript):
$('.msg').load('inc/message.inc.php');
But first you would need to create an HTML tag with that classname (note the link there - .msg with class="msg") msg could be a P tag, a div, a textarea, section, some kind of container.
<p class="msg"></p>
The PHP include is the better solution because the javascript will run after the DOM has been rendered, which might display a quick flash when the message is injected into the P element.
All that is required to use a PHP include is to use the .php file extension instead of .html -- that's it. If your webserver can do PHP (and most can), then it will instantly work.
Note that using the .php extension will not cause any problems with the HTML/CSS/javascript -- all of that will continue to work as before. The only difference is that NOW it can also handle PHP.
The file message.inc.php could simply be this:
message.inc.php
<p>Your cool message goes here</p>
That's it!
Related
Full context, because I'm not exactly sure what I'm looking for:
I am working on web software, and I have various mail templates that get sent. The templates are just HTML files. I'm planning to implement a text editor so that my clients can edit these mail templates. However, there are certain 'chunks' for the files that I don't want them to be able to edit, so I was thinking of putting 'flags' of some kind into the html so that I can detect them programmatically and make the blocks un-editable in the UI.
I was envisioning something like this:
<p>
lots of text here
</p>
<blank-tag-here-that-wont-display-or-do-anything>
<p>
important un-editable text here
</p>
<blank-tag-here-that-wont-display-or-do-anything>
<p>
other text here
</p>
Is there such a tag? Or something else I'm not considering? Thanks for the help.
Have you tried using your context then parse the html tags to find the tag and make the whole block visible='false' to the html editor, this way it will not show in the editor but if the html editor has the html view capability then the user will be able to modify the tag via the html viewer.
I am converting an existing HTML to AMP-HTML. In older HTML I am loading footer and header which are in separate HTML files which are loaded by using jquery as mentioned in the below code.
$("#divHeader").load('../header.html');
$("#divFooter").load('../footer.html');
These HTML have only static data. Is there any way to add these HTML in AMP pages? I cannot use amp-iframe because amp-iframe cannot be within first 75% of the viewport and has to be 600px away from the top as mentioned in this link.
AMP cannot contain any type of external stylesheet or scripts. For your HTML file, you might have used the HTML partials to load. But in the case of AMP pages, you cannot include that, you have to explicitly write your header and footer in AMP
In the official doc here, under the HTML Tags heading it is specified that
Scripts are Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) An exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components
If your are using PHP, or you're able to convert your pages to PHP, you can use an include or require statement.
<?php include_once('path/to/file.php'); ?>
<?php require_once('path/to/file.php'); ?>
The main difference between include and require are include will output an error if there is one and continue rendering the page. Require will stop at the error. The _once just makes sure it gets called once per page load. Not really necessary usually but I typically do it just to be safe.
It might be possible using amp-iframe or amp-list but other than that it is not possible.
Make two different HTML files where one stores the header and the other file stores the footer. Try loading them separately utilizing amp-iframe or amp-list. I tried doing this stuff personally but couldn't do it but I know some people have done it in the past.
All the best.
I have tried:
<html src="navbar.html"></html>
I have a file called navbar.html
Is there any way I could make it appear on every page I have?
I will be changing the navbar a lot throughout my website and I don't want to change it in all my 20+ pages. How can I make this one file appear in every page?
Would it be possible to make it in html rather than jquery and append it to every page?
something similar to
<script src="file.js"></script>
But html src
Why not just use PHP? As long as you're developing on a server (as PHP is server side) you can essentially change .html files to .php and include a file for the navbar. For example:
<?php include 'navbar.php'; ?>
Look up PHP include at http://php.net/manual/en/function.include.php. It will do exactly what you want. All you do is include the file on every page and it will be reflected in every page .
Visit our HTML tutorial
The href attribute specifies the destination address (http://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
http://www.w3schools.com/html/html_links.asp
I have created Schema.org code using schema.creator site for my local business and my products. I want this code to use in my company website. I have couple of questions on this:
Is it fine to paste this code in my index.html page?
Where exactly do I need to paste this code in the HTML page? I tried to paste it under head, and the content is directly displaying in the browser.
I have created the code to get Rich Snippet. Is it correct way to create Rich Snippet?
Schema tags should be inside the body tag.
I do not use a generator but always look at schema.org as reference and validate them with Google testing tool.
I am trying to include this line of html into a sharepoint 2007 content section inside a page i have just created. I am the owner.
<link rel="stylesheet" type="text/css" href="/sites/gskglobal/mcLaren-partnership/Documents/live.css" />
I input this using Edit HTML Source on a piece of content (This was the only way i could find out how to input HTML directly).
When i click ok the styles display perfectly having already uploaded the css file.
When i click save it removes the entire link element and leaves me with no stylesheet.
i could put the styles in line, but i really don't want to do this.
N.B no erros are displayed only
Warning: The HTML source you entered might have been modified.
Both of those will work, however the CSS may get executed AFTER the SharePoint Page is rendered.
The short and simple way is to add the CSS file to any document library (Style Library too). Add the Link script above into a text file and upload that. Add a Content Editor Web Part to the page and through the settings, point it to the TEXT file with the script.
The CEWP part is executed during the HTML creation process when building the page thus the CSS gets executed with the header (like the rest of the CSS for SharePoint).
Try adding your .css file to your main web "Style Library"
You need only to publish your css file
Go to your all document view
find your file
publish
The best and easiest way I found to add any form of html into the document when adding a webpart simply add a form then edit the html as you would normally and this will no longer give you the
Warning: The HTML source you entered might have been modified.
It will just leave the markup in there without sharepoint stripping or editing your markup
Just wanted to make people aware that this is possible and maybe an option if you don't have access to the other suggests.