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.
Related
I would like to have a "Recent Activity" stream on the left side of my index.html file. I have the following code:
<div id="sidebar">
<div class="box1">
<div class="title">
<h2>Recent</h2>
</div>
<ul class="style2">
<li>27 Aug - Conference Meeting</li>
<li>26 Aug - Website Created</li>
</ul>
</div>
</div>
And basically I'd like to be able to store the contents (the activities) in a seperate file, so that I can import that file into the various pages across my website.
I'm very new to CSS and webdesign and I've tried to find the answer on google, but haven't run into any luck. I've been tasked with creating a website for my team's college project.
Thanks for the help in advance.
In order to do this, you can use CSS like this:
.box1{content: url(http://www.example.com/test.html)}
see more at Mozilla Dev
This being said, I highly advise NOT to do it this way. This is NOT what CSS is intended for. You better use some kind of include like Server Side or PHP. If you don't know coding, you can always use a CMS like WordPress which will make this kind of task a breeze
You can use Javascript (or some library of same) to read in the file w/ the activities (or, if represented using javascript, could just import that file) and then use javascript to insert the activities into the appropriate part of the DOM.
The solution is not stripping out html from an existing file but to build up your html files from different sources using a server sided script language like php.
With php you would have just one page (for example index.php) and include the content the user requests (like home, contact, guestbook, whatever).
The proper way would be to use a database for storing the information but this is far too difficult for begining with web development.
Save the html for the sidebar to a separate html file (sidebar.html). Rename your index.html to index.php.
Go to the location in index.php where your html code for the sidebar is and delete it and instead just insert this:
<?php include "sidebar.html"; ?>
This code includes your html file inside your index.php and your can reuse it on different pages by just including the same sidebar.html on every page where you need it.
The benefit is to be able to modify it in just one file if you need to make changes.
Now here is the disadvantage in this solution: You need php installed on the server your website will be hostet. Php is a program which interacts with the webserver and everytime a .php file is requested by a browser it will be handed over to php first for parsing the file and doing the includes, database access and many other cool things. So in order to use php-files and include html files within other html files you need php installed on your webserver. Also if you open your .html file by double clicking you won't be able to see the complete result unless you have a local webserver with php installed on your computer. That's all free software (apache2 and php) but for a beginner it's not so easy to install it. Maybe start with a prebuild package like xampp. (This contains the webserver and php with preconfigured settings to start quickly).
This topic is pretty basic for php so you will be able to find lots of tutorials on the internet about getting started with php. Good luck and have fun. ;)
In simple words, you can do it with <iframe> tag or with the css Content property but it won't give you possibilities as what JavaScript or PHP can give you.
To do it with JavaScript you can view this question .
Thank you everyone for your help and assistance. This has been a learning experience. For anyone who has the same issue, here is the solution that I've found using some help from the members who kindly responded to my question.
Here is my css:
<div id="sidebar">
<div class="box1">
<div class="title">
<h2>Recent</h2>
</div>
<script type="text/javascript" src="js/recent.js"> </script>
</div>
<div class="box2">
<div class="title">
<h2>Relevant Links</h2>
</div>
<script type="text/javascript" src="js/links.js"> </script>
</div>
</div>
And here are my two *.js files:
// recent.js - Create recent activity feed
document.write("<ul class=\"style2\">");
document.write("<li>29 Aug - 10 Photos Added</li>");
document.write("<li>28 Aug - Meeting Page Added</li>");
document.write("<li>27 Aug - Meeting</li>");
document.write("<li>26 Aug - Website Created</li>");
document.write("</ul>");
// links.js - Create list of links
document.write("<ul class=\"style2\">");
document.write("<li>Formula SAE®</li>");
document.write("<li>SAE International</li>");
document.write("</ul>");
It may not be the prettiest way to do it, but it seems to work. The problem with the iframes was that if I clicked on a link, it opened it within the iframe. Thanks again everyone! I knew nothing about javascript, css, and it's been a learning experience! :)
Alright, I don't know how exactly I'm going to phrase this, so bear with me here. Is there a way to set a default HTML page? Like is there a line of code that I can use on new html files to load a local .html file for almost a template?
Use any sever-side programming language to include header and footer parts of your default webpage.
Example on PHP:
<?php
echo file_get_contents("header.html")
?>
Your page contents
<?php
echo file_get_contents("footer.html")
?>
You can set default html page in your webserver. But that's just if someone hits http://server/ with no page name it tells what page to use like http://server/index.html versus http://server/default.apx, etc. Has nothing to do with templates.
If you want to be able to include html files inside other html files, you probably need a serverside language like ASP, PHP, JSP. HTML itself doesn't have that capability, although some webservers might offer a custom tag that is translated on server-side for includes.
The default web page on a server must have the name index.html, index.htm or sometimes default.htm. It is possible to change the server to accept other file names as default files, but those are the most commonly used ones. What is the index.html page?
If you're asking how to make your web browser open a default page when you open it, this is usually called the "Home Page" and any file or page that you can visit in your browser you can assign as the home page.
If you're trying to create a template for a web page, there are many ways to do it. The PHP example listed above is one way. You can also do it with JavaScript. Write your HTML in document.write() calls inside a file named navigation.js and then place this script where you want that code displayed:
<script type="text/javascript" src="navigation.js"> </script>
However, this is not unobtrusive and could cause problems. Another way to do it is with Server Side Includes. Write a file named navigation.ssi and then add the following SSI line to your HTML where you want the included file to display:
<!--#include virtual="/ssi/navigation.ssi" -->
You can also do it with ASP and other methods. I explain in more detail in my article How Do I Include One HTML File in Another?
I am learning Symfony2, and I am making small tests.
Well I have made a small html for to test the twig templates.
<html>
<head>
<title>test00</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test">
<img src="test.png" /><br />
test
</div>
</body>
And the files are in the same directory of html.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default
And rename the html to html.twig.
But fail when use this html as twig template, because the Symphony try to use "http://localhost/Symfony/web/test.png" as link the image.
And yes, I have read the documentation and know the "asset" and I can change the path to the files with some example
test.png')" /> and also copy all files to the web directory in the budle.
But I wonder "Is there any tool to convert html to twig?" because for example I can't say to my boss:
"The Symfony2 is great. But your designer must to learn Twig and when she finish the html with dreamweaver, she must change all of links to css and images for to make a template...and yes she can't see anything only can send to me to put in the web server to check if it is correct."
What do you hope that my boss will think about Symfony2? He will think this is crazy, this is twice of work.
I think the best it is a automatic tool to translate a html with relative paths to twig and something like that a package files to put in web dir. And the designer does'nt need to know anything only make pretty htmls with few weird things as put {{page_name}} instead the "Page name".
Regards.
From an html coders perspective, Twig is HTML. As long as templating language support is setup on your server, there is no difference between writing twig or HTML. The only difference would be the <h1>{{variables}}<\h1>. Your HTML coders should be aware of what variables they have access to. That being said, from a developers perspective, twig is a lot more so I'm not simplifying twig. But if someone knows HTML, they'll know what to do with twig.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default And rename the html to html.twig.
Nope. Your html.twig files need to end up somewhere under views so the template processor can get to them. However, your css and images need to be copied to your root web directory. Same place where app.php lives.
But fail when use this html as twig template, because the Symphony try to use
"http://localhost/Symfony/web/test.png" as link the image.
It's is not symfony generating this link but your web browser. Use Control-U to examine the generated html source from within your browser. You will find that your links such as href="test.css" have not been changed. Twig will not change anything unless it has has some curly brackets around it.
So your designer can continue to use her current workflow and deliver a set of files. You just need to deploy the files to the correct locations.
Of course symfony/twig can do a lot more that simple variable replacements so eventually you might want to change things. But you can get started just fine.
I'm trying to include an html file within another html file. the include acts as a menu and footer. i'm using the current include syntax but my html data is not displaying on the page. my include files sit at the root. i've tried:
<!--#include virtual="header.html" -->
<!--#include file="navigation.html"-->
<html>
<head>
<title>test</title>
</head>
<body>
<!--#include virtual="header.html" -->
<!--#include virtual="navigation.html"-->
<p>test<p>
<!--#include virtual="footer.html"-->
</body>
</html>
Check if your server has server-side includes (SSIs) enabled.
edit: Also, you should remove the first set of includes that come before the html tag - that's invalid.
Apache webserver? Do you have "mod_include" enabled? Do you have either in .htaccess or httpd.conf the setting "Options +Includes" set?
Includes are server side, you'll need to save the main file as an .asp file and work with it on a server (assuming your server is ASP enabled, your syntax certainly makes that look as if it's the case).
a lot of info lays here: http://www.boutell.com/newfaq/creating/include.html, if it runs in the server i would go for <?php include("filename.html"); ?> since most of the servers also have php, if not you can always use .js
P.S. i won't mentions html possible problems since other answers i think mentioned all i know...
The Netscape Navigator frames extension (cf. Wikipedia's Framing article) and its successors allow you to write HTML pages that reference other pages for inclusion. The browser then assembles the viewed page by making multiple HTTP requests. Note:
It's a horrible way to serve up webpages: there's no well-behaved document model for it. But it is fairly well supported by browsers. So this answer is for information's sake, not a recommendation; and
It creates viewed pages by juxtaposition, not inclusion, so it's not really what you were after, semantically speaking. But you can use it to solve your problem: the menu and footer bars are mini HTML pages that sit next to the page containing the main content.
I currently use Dreamweaver for my website. It allows me to create a template for all code that I want repeated in other pages. This allows me to make a change to the template and it'll update all the other pages that are linked to the template.
How do you do this without Dreamweaver? Do you link the pages to the original HTML/ CSS file?
If by repeated regions you mean areas such as the footer, which is generally the same in each web page, then you would normally create a file (e.g. footer.html) and then include that in each of your web pages.
For example as I use PHP, i would use the following wherever I wanted my footer to appear.
<?php include "footer.html"; ?>
This way, when you want to change the footer, you only have to do it in one place. Good practice is to identify the parts (or regions) of your site which will be the same in all your web pages and then use the process above to organise your code.
For more visual control, you should make sure that all your web pages link to the CSS file of your choice.
I hope I understood your question.
Professional web developers (generally) don't write flat HTML files. Instead they use server-side scripts such as PHP, Perl, and ASP.NET to create parts of a website.
This allows developers to separate the content from the structure from the styles etc.
Oftentimes content management systems are used. Two very popular open-source ones are Drupal and WordPress.
As a simple example, variables can be populated from a database, and placed into a template looking something like this:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
<?php echo $styles, $scripts; ?>
</head>
<body>
<?php echo $header, $content, $nav, $footer; ?>
</body>
</html>
Dreamweaver can write these for you too. If you create a separate text file somewhere in your site directory, say /includes/, you can select Insert > Server-Side Include and pick out your text file in the includes folder. Dreamweaver will insert the code for you.
I'll add that I use sever-side includes and template pages together and find that they compliment each other nicely, especially useful are optional and repeating regions.