Okay, my english is not the greatest so I apologize in advance. Question is really stupid and I dont know how that is called but I will try to explain it here better. So I am making a template for one restourant and menus are changing every week. So is it possible to write paragraphs somewhere else ( in separated place (external or internal)) and then "call them" somewhere in .html.
Example. making methods in C# and then calling them anywhere when we want to
In my opinion the simplest method will be to use php.
Then in place with menu you can only use something like this:
<?php inlcude('menus/file.php');
And on server create a folder menus where you wil put php files with html.
All files can be simple html. There is no need to learn php just in place you want to call a file use code i placed earlier.
HTML doesn't have a good way to achieve this (although iframe exists).
This sort of thing is generally handled by software that generates the HTML, either when the page is requested (via something like the very basic SSI support in some webservers to full on server side programming (which you could use C# for)) or at publication time (via a build tool such as Gulp).
You could use jQuery to achieve it (if it is a simple website and simple menu), read more the related function on http://api.jquery.com/load/
You may also read a simple here: HTML File including another HTML file
I may also include a very basic example for you
main.html
<body>
<header>Some header</header>
<content>
<main class="the-menu"></main>
</content>
<script>
$(".the-menu").load("menu.html");
</script>
</body>
Related
I'm trying to make my CSP without unsafe inline.
Since I have to manually check every file from every app, I may as well move the scripts to external files instead of creating a million word CSP entry in the web.config by adding hashes or nounces.
This seems easy enough for client side content, but many templates have razor code in then such as:
<script>
alert(#myVar);
</script>
How can I move this to external?
So in general if you JS needs some input parameters you must of course put them somewhere, and only the razor will know what they are.
The simplest way is still to just have the initial call use the variables - like in your example above. If you have security concerns, doing type-checking in razor should eliminate that for you.
For example, if you do #((int)thing.property) than it simply cannot inject any unexpected payload.
If for some reason you really, really don't want this you can use a attribute-json convention, like
<div class="myGallery" init='{"files": 17}'> gallery contents </div>
and pick it up from the js you created. but this is quite a bit of work, so I would recommend the simpler way.
Does HTML support splitting source over multiple files? I'm looking for some equivalent of C++'s #include; or maybe something like C#'s partial; an element that could take source path and inject the file contents at that place.
Apologies if this has been asked before. Google and SO searches didn't return much. I'm not a web guy, but the only solution I found was using an iframe, which many people do not like for various reasons.
It is just that my html source is becoming huge and I want to manage it by splitting into multiple files.
You can't, at least not in flat-HTML. What you can do is using Javascript to load and place the snippets. iframes are also non-ideal because contrary to what happens with directives like #include and partial, those snippets will never be compiled in one single page.
However, I think it's important here to understand how your pages will be served. Is this a static website? Because in this case I would write a simple script in your language of choice to compile the page. Let's say that you have a base like this:
<html>
<head>
<!-- ... -->
</head>
<body>
{{ parts/navigation.html }}
<!-- ... -->
</body>
</html>
You could write a script that runs through this file line by line and loads the content into a variable named, for example, compiled_html. When it finds {{ file }} it opens file, reads its content and append it to compiled_html. When it gets to the end, it writes the content of the variable into a HTML file. How you would implement it depends on the languages you know. I'm sure that it's pretty straightforward to do it in C#.
This way you'll be able to split the source of your HTML pages into multiple files (and reuse some parts if you need them), but you'll still end up with fully functional single files.
It is easily possible, if you are running PHP:
The PHP Language has the "include" command built in.
Therefore you can have your "index.php" (note you have to change the suffix, for the PHP parser to kick-in) and simply use following syntax.
<html>
<head>
[...] (header content you want to set or use)
</head>
<body>
<?php
include "relative/path/to/your/firstfile.html";
include "relative/path/to/your/secondfile.html";
include "relative/path/to/your/evenwithothersuffix/thirdfile.php";
include "relative/path/to/your/fourth/file/in/another/folder.html";
?>
[...] (other source code you whish to use in the HTML body part)
</body>
</html>
Basically making you main index.php file a container-file and the included html files the components, which you like to maintain seperately.
For further reading I recommend the PHP Manual and the W3Schools Include Page.
not possible with static html.
in general, this problem (lazy-fetching of content) is solved with a template processor.
two options:
template processor runs on the server side
any language
static website generators, server side rendering
template processor runs on the client side
javascript
web frameworks
i created a site, And added pages to my site, since page size exceeds i need to create pagination in html i have created this method
123
in this way i created
Problem is when i add new page i need to replace all code again like this
1234
ever time when i add new page i need to replace all code is ther a way to do this without PHP
Can sombody help me any idea to do this in html
Do not re-invent the wheel. Use datatables, they provide sorting, pagination (client side and server side), export and a number of additional features.
http://datatables.net/
Include the files and just add this.
$(document).ready(function() {
$('#example').dataTable();
} );
This is a very basic and good example, you should go for it.
http://datatables.net/examples/data_sources/dom.html
This cannot be done purely in HTML. You must use something like PHP, or you could use Javascript.
You can make just one HTML file called "Pagination.html" include all your links there and then include that Pagination on every page using one of the following methods.
You can use Javascript: javascript
Or you can use html5: html5
Or there are also, others solutions to solve your problem like this: other
You better use some Javascript oriented solution, html5 support for including files still very poor.
unfortunately, this won't be possible without using some other technology that is not HTML. You can dynamically generate pages using javascript (JS), PHP or other technology, but not just raw HTML.
You can name your pages something like:
page_1.html
page_2.html
and then whichever editor you are using probably has a search & replace function, so you could use that to speed up things. I hope this helps.
I have several HTML pages and some of the content is same for all the pages. Is there a way to put the content into a single file and include it in all the HTML Pages?
Lets say that the common data is in HTML format.
Yes you can use iframes for this purpose.
Design your master page in .html format and use it with iframe tag
<iframe src="MasterPage.html"></iframe>
Refer following link:
http://reference.sitepoint.com/html/iframe
I think what you are looking for is a templating solution.
You can do it in jsp as follows
by using two ways
<jsp:include page="reuse.html" />
or
<#include file="reuse.html">
Have a look at this question What is the difference between <jsp:include page = ... > and <%# include file = ... >?
You can do this in three places:
At build/publication time — you generate HTML documents from your data sources and then publish static files. This option works for everybody, but can make the build times rather long for very large sites. I use ttree for this.
At run time, on the server — this works in much the same way as the previous option, but is done on the server and on demand (i.e. when a page is requested). Template-toolkit is also an option here, but here are many many others, including Django templates and Smarty.
At run time, on the client — this involves pulling the content together using frames or JavaScript. It is unfriendly to search engines and will break bookmarking unless you are very careful. I don't recomment it.
One thing you can try is using PHP.
for example if all pages have a common header, create a new document with the name of header.php and place the contents of the header div inside. Every other page you want the header to appear just call it by using :
<?php include_once("header.php");?>
Hope this helps
The best way to do this is at run time.
This means using PHP, ASP, JSP or another server-side scripting solution to join your pages together on demand when sending them to the client.
In PHP, this can be achieved with the following:
<?php
include_once("head.php");
?>
<!-- some body content -->
<?php
include_once("foot.php");
?>
Managing your header, footer and content all separately makes it very easy to update your design without having to edit many files.
It is not recommended to do this client-side with frames/iframes, as this is very unfriendly to search engines and can slow down your server as several HTTP requests must be initiated.
I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)