I'm front-end developer and in work I use Twig with Symfony2 on Apache server. But now I have to make mockups in HTML, CSS on my interaction computer-human course on university. I need some application to able to including other html file in html file, extending html file with other html file - something similar like in Twig include and extend features. Does something like that exist?
I'd rather don't use html frame.
You could use server side includes - but this requires a server (hence the name !!)
Then you could, for example add a header to each page:
<!--#include virtual="header.html" -->
Apache, nginx, lighttpd and IIS are the four major web servers that support this language.
Your other option would be to use JavaScript and AJAX to pull in other content post load.
Related
I'm trying to use server side includes for both my header and navigation, as they will be constant across every page, and I'd like the ability to make frequent changes in one place and have them populate across all pages. I have tried a "file" and "virtual" include, and have tired placing the include files in the same directory. The include files have no duplicate code (doctype indicator, html tag, etc). I've also tried both .html and .shtml file extensions. I use the file explorer in DW to select the files, so I'm assuming the path is correct.
The SSI's preview fine in Dreamweaver, but will not populate in the browser. Any suggestions would be greatly appreciated.
<!--#include virtual="/lpapp/includes/influencer_header.shtml" -->
<!--#include virtual="/lpapp/includes/influencer_sidebar.shtml" -->
Dreamweaver probably support SSI. If you run your html from a random folder on your local PC, SSI won't work. As soon as you upload the project to a Apache webserver or a virtual server like Wamp/Mamp. It is possible to get SSI working using the right SSI syntax and .htaccess.
Every time I decide to change something in my header/navigationbar/footer/etc. I need to apply those changes to 16 other html files so my changes are consistent across my entire website.
My question is: is there a way i can make my website's template be automatically applied to every page?
An example of any page on my website and what i have in mind would look like this:
<html>
<head>injected code</head>
<body>
<header>injected code<header>
<section>NOT INJECTED CODE</section>
<footer>injected code</footer>
</body>
</html>
I know repeating code like this is bad practice, so how do i reuse (localize) code for these areas of my html since they will always be the same?
I am not really interested in content management systems.
What i do with the elements that are the same on every page, like the header, nav, footer is create those elements in a file apart and then include via php. Then if you have to change one thing in the header you only have to do it one time.
Your example will be like:
<body>
<header><?php include_once('header.html'); ?><header>
<section>NOT INJECTED CODE</section>
<footer><?php include_once('footer.html'); ?></footer>
</body>
Hope it helps.
You can use php to solve this. Name your file "index.php" (or anything else with .php as the extension)
<html>
<?php include('header.php'); ?>
<body>
<header>injected code<header>
<section>NOT INJECTED CODE</section>
<footer>injected code</footer>
</body>
<?php include('footer.php'); ?>
Then make header.php and footer.php in the same folder. These common files can then be included in all your pages.
Tip: You will need to run these on a local server. See xampp
The best way that I can think of would be to use a server side language, such as php or asp , to generate the html.
You can use <iframe> tag to include external file however I have not properly tried this and am not sure of the security or results.
You can also use javascript/jquery to write to the document, however using scripts just to write would not be best practice, a better use for client-side language would be to use ajax to load external files however some of the header may need to be defined before the ajax is complete although I haven't tested it.
In short I would recommend using a server side language probably php as it is easy to learn, free to use and you can install it on your local machine. If you already have a server running you can see what languages are already installed as most languages can include external files.
I got a realtive big project for what I have many plain HTML pages. All the pages have the same template, but when I change one value in the template I have to change all the other pages manually.
Is there a way to do it like less for CSS or CoffeeScript for JS?
Lg Knerd
If all you have are plain HTML pages you could use SSI although it is a bit dated and youll need to be running this on a web server like Apache.
http://en.wikipedia.org/wiki/Server_Side_Includes
Personally I would use php so I could just include the files with the php include function
I am a newbie webdeveloper. Though, I understand what html5 boiler-plate brings to the table, I would like to know how can I extend/customize it to use it in all my html files?
As of now, it provides an index.html.
So, what is the convention/method to create a new html file?
Should I create a separate html folder?
How do I inherit the properties of the index.html file?(Copy-paste?) Can't there be something like Django where I can inherit the baseurl?
Though, I have some understanding of dealing with javascript and css, anything else I should take care of while dealing with html5 boiler plate and cross browser compatibility?
In the beginning there is no real rhyme or reason to where you store your html files, because usually its just that plus some css file, or whatever.
However, when you get into real development, as in with a framework for front end + back end code, you will find that there is a need to separate things out as server side and public for the benefit of file access control and naming conventions.
When that is the case, you end up with an "Assets" folder, or "public" or something like that. Boilerplate tends to follow that convention.
In order to make boilerplate be automatically extended to all of your html files, you must develop your view files to be modular.
Main template file
|
----header (contains all the references / includes to boilerplate)
----content
----footer
Also, please note that at that point, your html will no longer be stored as .html file type; you must use a language that is capable of combining files as chunks. PHP does this nicely, and as you know, django can handle that as well. Ruby on rails, etc. you're gonna need to decide what language you want to work in for that. OTHERWISE, the old method of combining html chunks is server side includes (aka SSI or .shtml)
The issue of a base url is solved by having your server side language of choice work with the directives of your web server. For apache, you use mod_rewrite, and then you can pass an arg in the url that targets some classes / models / views, etc. MVC frameworks actually have already solved that problem for you, if you dont mind using one.
"You can override what folders and files you want to operate on in project.properties. All the default configuration is in default.properties." http://html5boilerplate.com/docs/Build-script/
default.properties is in /build/config
You need to add the pages to the line that starts with "file.pages", like this:
file.pages = new-page.html"
The core of HTML5 Boilerplate
HTML — A guide to the default HTML.
CSS — A guide to the default CSS.
JavaScript — A guide to the default JavaScript.
.htaccess — All about the Apache web server config (also see our alternative server configs).
crossdomain.xml — An introduction to making use of crossdomain requests.
Everything else.
How can I import an HTML file within my HTML file? I will prepare header.html and footer.html files separately and every file that I want to include them I want to import them into my HTML file.,
EDIT: I see that solution based on SSI technique. I use Ubuntu and Tomcat 7.0.11. How can I enable SSI at tomcat?
There are many solutions to this problem. You can write simple JavaScript code to include parts of your page on load, you can enable SSI on your web-server, and finally you can use any server-side language to dynamically include chunks of any page for output. Your choice depends on how dynamic your web-site is.
You can include html files using frames or iframes. If you're using a server side language such as PHP or ASP you can do this without frames using includes.
If you wanted to strictly use HTML (and assuming you are using JS too) I would do the following:
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.