When learned to make JSP pages, I was taught to use a common menu page separate from all other pages and then import the menu page to each page using <jsp:directive.include file="menu.jspx" />.
Is there a similar way to do this in HTML5? Or is there a better way to include a common menu/masthead on every page using HTML5?
No, html5 doesn't do this.
What you were doing in JSP was a server-side include.
What you are asking for is a client-side include, those don't exist in html5.
I you had a good reason for loading something client-side, you could use javascript.
Look into AJAX. A lot of .js libraries have good support, to make it easier.
jQuery for example has a load() function which takes some of the pain away.
I don't recommend using something like that for a navigation menu though.
Server-side includes would be better.
If you're simply working on a small project, maybe you're doing it locally, and you just want to make it so you don't have to copy-paste chunks of the page everywhere, php is an easy way to do it.
Use something like XAMPP to run php on your machine in an easy-to-follow way.
Then use php's include function, as demonstrated here: PHP Include to do what you want.
The standard way to do this is to use Server Side Includes. Most servers support this.
Further reading here
Related
I'm trying to figure out how to program a website that looks very similar to http://www.renthop.com/.
I'm new to web coding, so I'm not really sure where to start. For example, is it Java or HTML? Or both? I really like how its setup, the responsiveness and smoothness of it. I just want to make sure I start off in the right direction in terms of choosing the right language etc.
If anyone has any idea of what this is based on it would be greatly appreciated!
Thanks - KC
The server-side code is PHP, the front-end is built off of the jQuery and jQuery-UI javascript libraries and a series of third-party plugins. The final product is a dynamic HTML application.
Do you want to launch your website? If so, creating a website from HTML would only make a website on your local hard drive, not public. You're going to need a domain name and hosting to make it public.
HTML is a markup language for formatting websites, but you can still create a website out of it. Not public, as I said above.
CSS is rulesets for telling the browser how to display the HTML formatted content. It is also not a programming language in the same way HTML is, although it can be a lot more powerful.
Javascript is a programming language. You use it to make the website interactive. Get Firebug or a similar add-on for Firefox, or just right click and 'Inspect Element' in Chrome to see the javascript for more detail on what javascript does.
AJAX is an extension of javascript to get data from the web server and update the page with it, without having to refresh the page.
PHP is code commonly used server side to interact with the filesystem and databases and output HTML. You can also use python, perl, .NET and a handful of other languages/frameworks to do this.
MySQL is a database.
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>
What are the most common options for templating HTML files for static pages, to minimize maintenance and redundancy? An example of my question would be Adobe Dreamweaver.
Consider using a server-side scripting language such as PHP or ASP.NET. These produce dynamically built web-pages meaning that you can code it in such a way that headers/footers etc are separate from the main content, meaning you change that link once rather than 30 times.
If server-side scripting is not an option, I'd suggest having a look at Dreamweaver. This will enable you to create templates, and then create pages based on those templates. When you modify that link in the template, all pages that use that template will be updated. This will give you what you want without the server-side scripting.
why dont you use iframe inside ? ( which will contain a single navigation html page...)?
If you're using a server-side language like PHP, you can start to use the include function. So you'll include in a different file your navigation bar and then include it in every file of your website. Thus, every change to the navigation bar file will affect all the others files.
If you are writing only static pages, it isn't possible. Maybe you can try SSI.
Typically you need either a fancy program (like Dreamweaver and its templates functionality) or some sort of server-side scripting. Languages like php, asp, etc might be a bit much if the only thing you are looking to do is as you describe, so I might look into seeing if your server support server side includes (SSI).
If you are building a simple website using just simple HTML/CSS/Javascript that has say 5 pages, is it possible to build a template so that the headers and navigation can be called in each page?
The JavaScript and CSS, yes, the HTML, without something like server side includes or a dynamic language doing its own inclusion, no.
The only option without using the above is if you use frames, or an iframe, but they have their own issues you have to content with.
Otherwise, you will need to just bite the bullet and have duplicate code across all your pages.
You can create a header.html, a footer.html and then regular content, and fetch the header/footer with AJAX every time, placing it before and after the content. A server side scripting language would be easier, but this is possible.
I am not very sure about this but can it not be done with XSLT and XML?
While you could use JavaScript to generate content, this is a bad idea (for all the usual reasons that having JavaScript that isn't unobtrusive isn't a good idea).
You should use either a proper template system or an include system.
I would suggest looking at the ttree utility that is part of Template-Toolkit. It generates static files, so you don't need any particular server side support to use it.
use a scripting language such as asp or php is best option.
option 2 is to use iframes and option 3 is if you don't have access to a scripting language such as ASP or PHP, and don't want to use iframes you could use jQuery and use $.get() to load header and footer files into named DIV's after the page load. that would require javascript and would be FAR from optimal.
Is there a way of including HTML pages without needing any javascript or server-side code, only HTML.
Basically I can't be sure if the server supports server side includes. I don't want to use javascript and I don't want to use any PHP or other server side functionality.
Is there any way to do this. At the moment I suspect not, but would be very interested if it were possible.
Use some frames in your page
HTML frames allow authors to present
documents in multiple views, which may
be independent windows or subwindows.
<iframe></iframe> is the tag you need to include inline floating frames.
Quick tip with iframes: Be sure you open and close the tag explicitly, if not some browsers will complain
You can use framesets.
HTML imports, part of HTML Components, aims to do exactly this.
HTML5rocks offers a great tutorial to get started with HTML imports.
According to can I use, only Chrome is supporting HTML imports today.