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.
Related
I am currently coding up my own website (basically a personal blog) w/ HTML5 and CSS3. However, the growing number of .html files (blog posts and other stuff) quickly raised a problem: say if I want to change something in my page header / footer (which I want to keep the same across the entire site), I would have to edit every .html file to get this done. Is there anyway that this process can be simplified to a one-time action? Mostly, I write html files in Brackets. Thanks in advance!
Why not save the files as .php, create another file for the header and footer, and include the header and footer ( <?php include 'header.php'; ?> ) files from each of the main files?
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.
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 would like to be able to use something similar to a stylesheet but with HTML so that I only have to edit one set of code to edit the toolbar's HTML code across multiple pages. Is there a way to use a tag or something to import HTML code into the body section,
You can try to type out your navigation bar / header in a html page, save it has header.php and then in all of your other pages (for example index page), type in
<?php get_header(); ?>
at the beginning to grab the header. Make sure the header.php is in the same folder as your other files (for example index.php)..
Let me know if it does or doesn't work.
Your best bet is to make sure your server has PHP installed, then use include
<html>
<body>
<?php
include "toolbar.html";
?>
</body>
</html>
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.