I heard about HTML5 Boilerplate by Paul Irish. I watched couple of tutorials about it. I even watched the video by Paul Irish himself about the HTML5 Boilerplate. I just understood that HTML5 boilerplate is a template to create a better, quick and cross browser supported User Interface for your web apps.
I just have a little confusion about all the stuff.
Where to put your PHP files when working with boilerplate?
I'm just a beginner and I've always worked with PHP working on a localhost embedded with HTML and CSS, so this stuff is kinda new to me.
I mean where to put your php code in that template.
I don't know if its a stupid question, just think of a novice asking you stupid things :)
You are talking about two separate things - confusing the front-end client-side stuff with the serverside.
If you are used to working with PHP to produce HTML then not much will change. All you need to address is that each page served from the server (i.e. pages generated by the PHP) will need to include the reference to all the CSS and JS required in the HTML5 Boilerplate.
An easy way to achieve this would be to have a php include file containing the header and footer components. For example, in the source for the HTML5 Boilerplate you have a file called index.html, and that contains a line of code:
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
Everything above that include in a file called header.php (for example) and then everything below it include in a file called footer.php
Now every time you serve a PHP page, with whatever content you'd generated serverside, remember to include both these files. This is a standard PHP include technique. All you'd need to ensure was that the paths to each of the JS and CSS sources we handled correctly.
(Alternatively you could use a PHP templating system and have that handle these includes more elegantly. If you have a favourite templating engine use that.)
Edit:
Some very basic pseudo code. Example page "index.php"
<?php
include "header.inc.php";
include "html5boilerplate_components.inc.php";
include "my_css.inc.php";
include "my_js.inc.php";
include "homepage_content.inc.php";
include "footer.inc.php";
?>
Then you'd swap out the homepage_content.inc.php for a different file for a different page. (You'd probably have your CSS/JS etc included in the header include if you wanted it to be tidier. Do what works best for your project that allows more most reusable code.)
Related
I am using HTML5, and would like to speed up the creation and editing of my standard HTML template by splitting it into three separate HTML files.
header.html
content.html (this will be edited and will have other names e.g. home)
footer.html
I have looked at the following resources, but I am not sure if this is possible or how to go about it.
http://www.w3schools.com/html/html_head.asp
http://www.w3schools.com/tags/tag_link.asp
In PHP I would just include the files in the right order. Is there an equivelant in just a plain HTML site?
I have googled this, but I don't think Im searching for the right term. I would appreciate any information, or resources available!
Thanks for your time!
For just a static HTML site, there is no html-only way to include files the way you are trying to. You may be able to use server-side includes depending on your server, but by that point, you might as well just use PHP.
Another option would be to make extensive use of Javascript to load the page pieces after the main part of the page is already loaded.
In all cases, though, you will have a major reduction in performance, since a server request is slow. If you need to use templates, just use a dynamic language like PHP.
You can't do it cleanly with HTML. You could use iFrames, but that's far from clean. The optimal solution would be to use PHP. It will also save you the requests from the browser.
You can do it via include files in SHTML or through some server-side processing which can combine the files into one HTML output stream when a user requests the URL. Standard HTML isn't processed on the server so you'll need to use some server-side technology such as .NET, ASP, PHP, CGI, etc.
There is no way to do this with plain HTML. You could do it using JavaScript to load the different pages into their place after loading the main page. But that seems somewhat stange and unnecessary.
The easiest way that I know how to do this is to use a Model-View-Controller (MVC) style framework of some sort. I would use CodeIgniter, which is created with PHP. It's light (2.1 is VERY fast), has incredible documentation, is super easy to understand (even if you don't know much about PHP), creates clean URIs, and will allow you to build dynamic websites (which is what you're wanting to do) with great ease. Your separate pages (called "views" in MVC terminology) will be able to load in the order you choose; in as many controller methods as you need. It's fantastic!
The following are some resources that will help explain what I'm talking about:
CodeIgniter User Guide - Model-View-Controller:
http://codeigniter.com/user_guide/overview/mvc.html
CodeIgniter User Guide - Views
http://codeigniter.com/user_guide/general/views.html
Here are some resources to help you get started with CodeIgniter:
CodeIgniter User Guide:
http://www.codeigniter.com/user_guide
CodeIgniter From Scratch Series by Nettuts+:
http://net.tutsplus.com/sessions/codeigniter-from-scratch/
Here are some resources that you may want if you need to learn more about PHP to start:
http://www.php.net
http://net.tutsplus.com/tutorials/php/the-best-way-to-learn-php/
I hope this helps, and let me know if you need any more help or a clearer explanation. Good luck!
The question is what kind result are you expect? Your question looks like you don't have experience but you feel that is something wrong with your architecture. Do you need it for any bigger webpage or for something smaller? Try to find any CMS and it will have solution to make your work more clear:) If you want to make any experiments, start from begin. You can have one layout and more content files. If your website is simple try with
<body><div>header</div><div><?php include('content'.addslashes($_GET['id']).'.php') ?></div>
<div>footer</div></body>
Don't use iframe, this is deprecated solution:)
In HTML5, you can embed (but not include) HTML documents with the object element, with the iframe element, and with the embed element.
<object data="include-me.html" type="text/html"><!-- fallback content --></object>
<iframe seamless src="include-me.html"></iframe>
<embed src="include-me.html" type="text/html"></embed>
embed
Using embed might be a bit shaky, not least because it’s intended "for an external (typically non-HTML) application or interactive content". When it doesn’t render the HTML document, try to remove the type attribute (at least it then worked in Chromium).
iframe
Using iframe might work for you in combination with the seamless attribute (beware of browser support). The HTML5 (CR) spec has an example:
An HTML inclusion is effected using this attribute as in the following example. In this case, the inclusion is of a site-wide navigation bar.
<!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
<h1>Mirror Mirror</h1>
<p>Part of the MovieInfo™ Database</p>
<nav>
<iframe seamless src="nav.inc"></iframe>
</nav>
</header>
...
object
The HTML5 (CR) spec has an example:
In this example, an HTML page is embedded in another using the object element.
<figure>
<object data="clock.html"></object>
<figcaption>My HTML Clock</figcaption>
</figure>
Can we include an HTML file / snippet from another HTML file?
My use case is related to how a website is built; in a simple form, a site typically has the same header and footer across the board. It is pretty straightforward if the site is equipped with e.g. PHP so you can do something like the include statement; we can contain the header and footer in separate files and include them later. But, what if the site is purely static i.e. no "back-end" support?
One thing that I had done in the past is to utilize templates in Dreamweaver. This worked but I'd prefer something that is more product-independent.
Thanks.
What you're looking for is Server Side Includes. It used to be available on most hostings, no idea what the situation is today.
Actually, a simple system based on a makefile and, why not, php's command line version, might also be helpful: a simple makefile that visits all php files in a directory, feeds it to php (eg, processes page decoration and stuff) and redirects the output to a corresponding html file should be enough to generate a set of uploadable, 100% static html files.
SSI is a great option if it is available to you as already suggested, I have always used PHP personally but as PHP is not available and if SSI isn't available then there is a JavaScript option as well.
The great thing with the JS option is the server doesn't need to have support for it due to the include scripts being client side. The bad thing is if the client doesn't have JS enabled in the browser the includes won't work. In saying that the vast majority of website users have JS enabled and this is displayed by most websites in the world who employ JS in 1 way or another.
Examples, the first one I found with a 2 second Google uses jQuery, have a look at the info here
There are also some AJAX plugins that could potentially be used for this at the jQuery website if it is a path you're interested in going down.
I hope this helps you :-)
I still don't feel comfortable repeating HTML for things like menu code, header, footer and most importantly a quick links/news panel on each page. Also it seems a little inefficient to keep sending the same repeated html for each page.
For the moment I have written a small program which reads these sections from my index.htm and replaces the relevant sections within all other pages in that directory. However things have started to get considerably more awkward now that I have extra pages like a Message Forum and Image Gallery, both of which require their own index.htm in their respective sub directories.
So the question is should I be using object, iframe or SSI?
Has anyone successfully used the object tag to embed a separate HTML file within a page? SSI would do the job except that the repeated HTML is still being sent across the web on every page change and different include lines would have to be used on the PHP pages. What about using IFrames, I know they are not strict XHTML1.0 compliant but I seem to recall rumors that they are going to br supported in HTML5 again, does that make them a good bet for the future?
The easiest way to solve this problem is by using a scripting language (PHP, Python, ASP) and templates. You can create the basic structure for your site in a master template, then use the scripts to pull in only the content that changes.
For a particularly good example, see Django's template system.
Each of your pages could call a JavaScript function in an external boilerplate.js file. That function could add boilerplate elements to the page, using the DOM.
That said, you might not want to do this, nor use IFrames, for SEO reasons! (Also, your pages would not fail gracefully if the client disabled JavaScript.)
To me it seems better to have a more search-engine-friendly page and put up with the transmission of duplicate markup. Server Side Includes (or any server-side scripting language) would give these qualities while also making it easy for you to change the boilerplate on all pages at once.
Let say you are working on a website template that has many pages (index.html, blog.html, contact.html...). You start by designing the home page and then move on to other pages. While you are on other pages, you think of some improvements and these improvements must affect the whole website.
So I return to each page and make the change. This is quite unproductive especially when you have 6 or more pages and sometimes you forget to update the change.
If it were PHP, I would do
require ('header.php');
This worked for me well. But right now, I'm working on HTML and don't really like to transform to PHP and then again to HTML.
So do you have a specific method/way of doing this?
You can use server-side includes to get the effect you want, if your server supports them.
You can use PHP to include a number of smaller HTML files. The PHP script is minimal. No "transform" is required. Just something like require('header.html'); require('body.html'); require('footer.html'); or some such.
If what you're worried about is having to write a lot of PHP, you can use a templating engine such as Smarty TPL to clearly separate the code from the pages and minimize the amount of coding you have to do. This has the added advantage of having HTML "generators" that will automatically do things like producing radio buttons for you or obfuscating email addresses.
You can use CSS to centralize styles for your page so you can make site-wide appearance, layout, and design changes by modifying the stylesheet.
If you're working with HTML pages, (e.g. including extensions .htm and .html), consider using Server Side Includes. This approach works with basic HTML parsing, and is supported by most/all major web servers, including Apache and IIS.
Simply include this text in your .html file:
<!--#include virtual="header.html" -->
The web server will then fetch the markup in that file, and will insert it inline in the page it's currently serving.
You could use PHP as a pre-processor, a code generator. Run the PHP on your local computer, then save the static HTML pages it produces and post them to production. You could write a little script to visit each of your PHP pages and save the corresponding HTML. Then you could have the convenience of PHP at design time and the simplicity of HTML in production.
Can HTML code be attached to HTML page like CSS file ?
So that if part of HTML code is replicated in all pages , I can put it in one file and then easly modify it .
Thanks,
Ahmed.
Yes it can, using frames. Not recommended though.
Example:
<frameset cols="10%,90%">
<frame src="navigation.html">
<frame src="content.html">
</frameset>
This code would allow you to reuse the content of file navigation.html. All links clicked on page content.html would change the content of that frame, and the navigation would stay as it is.
Using frames has many disadvantages (search engine problems, usability, linking, scrolling etc.) and shouldn't be considered in modern web sites (except on very rare occasions).
Not in plain HTML, no. (Sadly)
As Gregory says, you could look into Server Side Includes - they are parsed by the Web Server.
Alternatively, if you have PHP, you can do an include():
<?php include "header.html"; ?>
You may want to have a look at SSI (Server Side Includes):
Server Side Includes (SSI) is a simple interpreted server-side scripting language used almost exclusively for the web.
The most frequent use of SSI is to include the contents of one or more files into a web page on a web server.
Also, consider:
However, while HTML allows the direct inclusion of CSS, JavaScript and Image files into a web page it has never allowed direct inclusion of HTML. There are several tricks to achieve this, each with their own problems. These include:
Using an IFrame, which includes content in a clearly separate, fixed size area.
Converting the HTML code into a JavaScript program that inserts the HTML into the DOM.
Using JavaScript with Ajax to load the Html. Internet Explorer will generally not allow this to work directly from the file system due to security concerns.
Not possible with pure html, if you are using a server-side language however, usually there is such function available, for example in PHP, there is include or require functions to include files.
PHP Example:
include ('file.html');
I would recommend you to go with the first (server-side) approach if you are using a server-side language.
I don't think it's possible with just HTML, you might be able to get away with it if you use a bit of JavaScript... of course if JavaScript is disabled your site wouldn't work.
That said have you considered using a scripting language such as PHP? You could include your html page in whenever you desire, you then only have to modify / maintain one file.