I am going to write a big website, it has hundreds of HTML pages. There are some parts of the file using the same HTML code, such as the banner, the bottom disclaimer, etc.
I want to update the common parts of the HTML in a batch when that parts are modified, I am seeking a way to efficiently do that.
Currently my solution is surround the tempates with HTML comments, and use Linux script(sed mainly) to update it when necessary. Like:
<!-- Template1 -->
<!-- Template1-end -->
Any better way?
Template Toolkit is your friend. If you are building using a shell script that spits out static files (and it sounds like you are), then you'll want the ttree utility. You'll probably find the tutorial useful and want to make use of the WRAPPER directive (which lets you have a complete page with "Insert content here" sections rather then having to stick "Include header", "Include nav", "Include footer" in every content page).
Going with TT gives you the flexibility to move to server side scripting in the future with a minimum of effort (so long as you are happy using Perl for the server side programming) as Template-Toolkit has Perl modules as well as ttree.
Use a content management system. Either build a lightweight one or rely on an existing one.
You could use javascript to include templates, or just go the server side way and use dynamic page include methods, found by default in most appropriate web scripting languages. There's no way to dynamically achieve this using HTML only, you would have to go via a third party software or application to update your source files in the end anyway (like you already are doing with your batch script).
Related
I started creating web pages in plain HTML. I have a header, main content and a footer. The main content is divided into two, left and right content. Everything is the same on all pages except for the right content. Now I have about 15 pages. This is very tiresome if I make some changes on the other static pages (header, footer and left side content) as I have to go through all pages.
How can I create one HTML file for each static area and how am I going to integrate it?
There are, essentially, three places you can do this:
At build time. Run a script that puts the pages together and outputs static HTML. Then upload the static HTML to the server. Back in 2013 I recommended ttree, but these days static site builders are common and more powerful. My projects tend towards Gatsby (for complex projects) and Metalsmith (for simpler ones). Jekyll is very popular (and Github provides documentation for using it with GH Pages).
At runtime on the server. This could be a simple SSI, a PHP include or a full template system (of which there are many, including Template Toolkit and mustache), possibly running inside an MVC framework (such as Catalyst or Django). This is the most common approach, it has less time between making a change and putting the result life then doing the templating at build time.
At runtime on the client. This adds a dependency on client-side JavaScript (which can be fragile and unfriendly to search engines), so I wouldn't recommend it unless you already had a server-side or build-time solution in place. Gatsby, for example, is a static site generator that builds a React frontend backed by static pages.
There are a couple of ways to do this.
If you are working purely with HTML, then you can use a 'server side include' -- this is a tag which allows you to load a file into the page (see http://en.wikipedia.org/wiki/Server_Side_Includes). Whoever is hosting your website has to support this.
<!--#include virtual="../quote.txt" -->
If youe web host happen to use PHP, you can do this using the include method (see http://php.net/manual/en/function.include.php):
<?php include('path_to_file/file.htm');?>
This will include the file at the point you place the tag. But again, whoever is hosting your site needs to support this.
There are other methods of doing this, bit these are the two I make use of.
Well... what you’re looking for is called "Master Page" and unfortunately it isn’t available in html however you can use the <iframe> tag but it would make your website look really ugly. i would suggest you to use a programming language such as PHP its much easier that way.
but if you want to use <iframe> then They’ll load remote pages into your website, so you could define a "Master Page" like this:
<body>
<div id="content">
<iframe src="content1.html"></iframe>
Now, inside of content1.html, you could just write the content without the main layout
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 I update the code on my CSS stylesheet, all pages that pull the code from that sheet will be updated with the adjustments made. Is there a way to do this with actual information that can be viewed a web page(s)? I want to make changes on one page and have all desired pages adjusted.
can anyone push me in the right direction or direct me to which tags I would use?
Thank you
There are several ways to do this, although none quite like CSS.
Server Side Code
This includes languages like ASP.NET, PHP, Ruby, and many others. Using server side code, you can create content areas that are usually controlled by a database (MySQL is a free database). When you store your content in a database, you can then pull that content out via server side code and place it on the page.
AJAX
AJAX is a relatively new method that also usually leverages the use of a database. Basically, when you need content, you send a call to your server (or database) via Javascript and it responds with the content you requested. You can then format the content how you wish. There are literally thousands of questions on StackOverflow about how to use AJAX. Most of them will reference jQuery.
Content Management Systems (CMS)
While this is similar to the first two methods I listed (in that they usually leverage one or both methods) CMSs are different because they abstract the need to actually do any of the work yourself. They are usually pre-built systems where you just plug in your content and make some tweaks and you're good to go. Some examples of CMSs are Wordpress, Joomla, and Drupal.
jQuery.load()
If you get into jQuery at all, there is an easy method you could use to kind of replicate what you're trying to accomplish (one file that controls all your content). While it is definitely not the most highly-recommended method, so long as your site is not too big, it could work nicely. Basically you would put all your content into an .html file and separate them into divs with ids. Then to pull content from that file, you would use jQuery.load() plus the page fragments option (scroll down a bit on the jQuery.load() page) to pull in the desired content. Again, this is not really how I would go about doing it, but it is an option for a small bit of content you want to quickly change on the fly without incurring the overhead of setting up and maintaining a database.
If I understand you correctly, you want to apply the ideas of CSS (provide some handy definitions, use them everywhere) to "the rest of the HTML code".
If you are on a web server, you can do that using one of these technologies:
Server Side Includes
PHP
JSP
and probably many more that allow external file inclusion.
Sounds like you need either server-side includes or JavaScript AJAX loading.
If it's just the tag that you only want to know, then there are only two available tags (or markup) to call JavaScript codes. It's either:
Inline: <script> ... code goes here ... </script>
External: <script src="filepath.js"></script>.
But if you are dealing with XHTML, then you have to include a CDATA between the <script> and </script>, e.g. <script><![CDATA[ ... inline code goes here ... ]]></script>.
However, if that doesn't answer your question, then a tag is not what you need, but JavaScript codes.
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 know that with a large site you would want to separate footers, menus, etc so that updating that file would push the update out to every page that contains the item.
Is the same recommended for a small site made purely in HTML/CSS, or is it simpler/easier/standard to code out the menu in each page and update each page when a change is needed?
I don't necessarily want to bring in PHP or etc onto this website, but the ease of updating menus would be nice. Any other suggestions? I've heard Server Side Includes might be one option... is that considered "pure html" or is more required to be set up on the server?
Thanks!
Unless you've got a site consisting of one page, do yourself a favor and have some separate files with your header/footer/other repeated elements.
That way you only have to make one change and its done. No matter how meticulous you think you are, you will inevitably forget a page somewhere on an update any other way. Its a human thing.
If its "just" HTML, and you're not using a server-side language, then you are correct in that you'll want to use server side includes. Check with your host to see if it will process SSI on regular *.htm/*.html files or if you need to use the *.shtm/*.shtml extension.
Server side includes isn't html, but it's not really coding either. It's probably your best option if you don't want to get PHP or some other coding solution involved.
It's mainly just a function of the webserver that you are using, and whether it's enabled for the site.
Here's a tutorial on them for Apache.
Here's documentation for IIS.
There are tons of different ways to approach this problem, but ultimately if you want to make changes on your side and have them reflected in lots of pages you're going to have to have either some kind of server side processing, which means PHP or JSP or something along those lines, or you're going to have to have some sort of process that generates your site statically updating lots of repeated items wherever they occur, but ultimately that would just be a compile time solution that's equivalent to some other server side approach.
If you're comfortable working in Java / JSP, then simple JSP includes might do everything you need. If they don't, then you could go for a full blown Portlets API application. I'm sure other languages have equally valid approaches, so ultimately its decideding what you're most comfortable with.
Server side includes would be "pure HTML" from the browser's standpoint, but then so would PHP.
If you didn't want to Server Side Includes, you could dynamically build them using JavaScript or a library such as jQuery, and just include a .js file in each of your pages.
If it's really small / mostly text-based content, you could just have one page with hidden DIVs that are switched in. Then it'll also be very snappy and self-contained if someone wants to view it offline.
It is very easy to do this with php. This is some sample index.php page i've built:
http://pastebay.com/51887
And for example in "includes/navigation.php" i have this:
http://pastebay.com/51888
So in everypage you have just put that from first link and when you want to edit navigation, just edit "includes/navigation.php". :)