Suppose I have 3 html files , A.html , B.html and C.html
I want the HTML code from C.html to act as the footer of A.html and B.html .
Currently what I do is write the total contents of C.html in A & B to have my footer.
Is it possible to use just a single code or css-stlye to load the contents of C.html
Suppose C.html looks like --
<a href=k.com>K</a><br>
<a href=b.com>b</a><br>
<a href=d.com>d</a><br>
<b>This page made by me</b>
How to have this code inserted to other files just by using a single code.
Please note that I have seen this Include another HTML file in a HTML file page but the codes seem to not work for me. I can use <iframe> but then it doesn't look pretty.
If your server supports any server side language (as most web servers does)
then you can easily marge files.
// Example in php.
<?php
include "a.html";
include "b.html";
include "c.html";
?>
In pure HTML it is not possible. Why not use an iFrame? You can then style it as you choose.
Or you can use jQuery's load method to pull content into your page.
Or use a language like PHP to include html parts
Related
I've been having issues with this but I think is simple.
asp.net core 2.0 Razor Pages
I have a Users/index page and I added a link to take me to the child records under Entries Folder.
Structure is like
Pages
/Users
/Entries
Under /Pages/Users/index.cshtml
<a asp-page="./Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-page="./Details" asp-route-id="#item.Id">Details</a>|
<a asp-page="~/Pages/Entries/" asp-route-id="#item.Id">Enter Child Records</a>
However, on the browser, looks like is not rendering the correct link. It staying under the default page.
I tried asp-page="../Entries/" and other combinations with no luck.
Can't believe this but this works.
<a asp-page="../Entries/Index" asp-route-id="#item.Id">test</a>
I think your own answer might add confusions to others. First of all, you're talking about LINKs to another page, not redirect to another page. Razor Pages have a designated function for page redirections.
About the asp-page tag helper, it's interpreted by the code-behind engine (e.g. C# syntax) and so the "~" doesn't work. Basically, asp-page is expecting a name. In your own examples:
<a asp-page="./Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-page="./Details" asp-route-id="#item.Id">Details</a>|
will work, but they should be shortened as:
<a asp-page="Edit" ...>Edit</a> |
<a asp-page="Details" ...>Details</a>|
because they are in the same folder as your /Users/Index page. As you know the "./" part just means going up one level to your parent folder and so it's redundant. You don't want to instruct your engine to go up one level and then come down again to the same folder immediately.
When you need to switch to another containing folder, going up two levels and specify the new folder name. So, the "../NewFolder" works.
If it is at the web site root level, you can use the root syntax directly for faster routing. So both of these work the same if AnotherFolder is under root:
<a asp-page="../AnotherFolder/Index" ...>test</a>
<a asp-page="/AnotherFolder/Index" ...>test</a>
The asp-page tag helper is expecting a real page name at the last part and hence the quoted text must be ended with a page name. You cannot use asp-page="/Entries/" as in HTML URLs and expect the engine to default to Index page for you.
Lastly, to cover redirecting pages, code-behind has a function called return RedirectToPage(string pageName, ...), and its first parameter uses the same page routing syntax as the asp-page tag helper described above.
There is also a Redirect() function that works with pages outside your Razor Pages system, which can take any URLs as your browser or HTML code do. That's another story.
I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.
I am learning to program in HTML. I have multiple pages on my dummy website, all of them with the same sidebar. Now, the sidebar is hard-coded into each file; that means that if a small change has to occur, I have to change every file manually.
I believe this is not the best practice, but is there a better way to do it without using PHP or JavaScript?
Copy your sidebar HTML code to sidebar.php and include it with PHP include or require command:
require("sidebar.php");
Read more at http://php.net/manual/en/function.include.php and http://php.net/manual/en/function.require.php
How about an <iframe> this is the only way I can think of using just HTML
I am currently working on HTML I want to ask a question about website development.I am developing a website in which the basic layout remains same like menu, side menu etc but only the content changes.Currently I have make separate .html file for all web pages.
Can any one tell me is there a way through which I can make a separate file having etc common to all and call it in my html file.I have heard about CSS but it will only change the style and layout.
thanks
If your HTTP (apache 2 and IIS do) server supports Server Side Includes then you can just include another HTML file :
<!--#include file="header.html"-->
your content
<!--#include file="footer.html"-->
no need for a server side language then - just plain HTML
This is very big topic to include in just one answer. SO I will give only the logical part.
Separate your template into multiple chunks like:
1. header.php
2. leftSidebar.php
4. rightsidebar.php
5. footer.php
Now, include these common part on your every page.
For example: index.php
<?php
include "header.php";
include "leftSidebar.php";
echo "<div>".$thedifferentpart."</div>"; //Change only this part on every other page you will create.
include "footer.php";
?>
NOTE: This is only a logical part, applying the concept on your code
Yes, your best bet is a server side language, as Adam said. Absolutely avoid using the old style html frames: they're deprecated, and cause a certain number of problems, both on the programming side and on google optimization.
By using a server side language, you'll still have entire pages, but they will be partially generated by php (or asp) by printing more files into one. For example:
http://www.php.net/manual/en/function.include.php
Bye!
Your best bet in the long term is to use a server side language like ASP.net or PHP
I don't believe that is possible, strictly through HTML. However, you could use server side scripting like PHP to get it done. What you're talking about is a template, and is used quite often. What you would want, is to have your menu items (and CSS) and your header/footer code in separate pages. This way, if you make changes to the menu, or header/footer, it would be reflected in all the pages (written with PHP) you have scripted with the template method.
You would need the menu.html, header.html and footer.html in a place accessible by your main page code. That is, you would use the template method to write the content of your pages.
A psuedo code example in PHP would be like such:
<?php
include('header.html');
include('menu.html');
echo "Your main content items here";
include('footer.html');
?>
I'm new to creating html pages etc - but am using VS 2008 just for the editing/intellisense capabilities.
My problem is I have a pure HTML only website (no ASP.NET) and have a fairly extensive header that has to be used in every page. It's frustrating to change the header parts of the HTML across all pages every single time it changes in one. Is there someway I can sort of 'include' the header part HTML in other HTML pages without having to manually cut-paste all-over?
Please note - I'm not using ASP.NET, so I CANNOT and WILL NOT be able to use Master Pages. Is there some other technique is what I want to know - so that when I change the header template in 1 place, it gets reflected in all other. I thought of inline frames, but not sure if that's a crappy way to do that and if it affects SEO
Take a look at Server Side Includes
They'll allow you to edit your header in the one file, which will appear instantly on all pages that include the header file.
Yes, take a look at SSI. Server side includes are a simple way to tell your web server to insert various things at various points in your HTML page.
Example:
<html>
<head>
<!--#include FILE="head.html" -->
</head>
<body>
</body>
</html>
If server side includes don't appear to work as expected, try renaming the page with a .shtml file extension.
Some web servers require that you name your file ".shtml" rather than ".html" in order to enable the parsing of your file.