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
Related
On almost every website, they have various pages, each having the same HTML code. I strongly doubt that the creators of the websites edit the HTML code of each page, especially when users can make their own pages (like redditors making their own subreddits). These two pages from wikipedia: https://en.wikipedia.org/wiki/Synthesizer https://en.wikipedia.org/wiki/Drum_machine are different pages but they have very similar html code
And I don't even need to have users create their own pages, I just need to have multiple pages that reuse html code. https://www.apple.com/mac/ https://www.apple.com/ipad/ are clearly different pages that have different html code, but I don't think the developers would copy and paste HTML code, change it, then change the code of the headers in each page to include the new page when they have a new product.
https://getbootstrap.com/docs/4.3/getting-started/introduction/ and https://getbootstrap.com/docs/4.3/examples/ are different pages that use the same html code. What do they use? Should I learn bootstrap? I've seen websites do this way before bootstrap was made, though. What's something like this called? Do they even write in HTML or do they write in something that compiles into HTML? How am I supposed to do this very simple task that every webdev knows how to do yet I am unable to find any information on it?
I've tried searching for "Reusing HTML code" but I found nothing that answers my question. All I've seen are special cases
I'm hoping with this, I'll be able to have a website that can have multiple pages that use the same basic HTML code. If I wanted a new tab, I won't have to edit the HTML code of each page.
What you described is achieved by HTML templates and server-side scripting. The server script injects data in your HTML template, thus reusing one template for any number of pages. A template may consist of multiple parts that can be combined to achieve similarly looking yet different pages. It is called dynamic HTML.
Here is a very basic tutorial on how it works: https://www.php.net/manual/en/tutorial.php
To create a modern website you need to use a dozen different technologies together. Here is an infographic to give get idea: https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
They are many ways to do it!
If you are using asp.net you can use master page.
For more info : Master page demo
or else you can use php "include" statement. Suppose you created one page as header.php(header.html) and other one as footer.php(footer.html), then you just have to include those pages.
eg
<?php include 'header.php';?>
<html>your web page</html>
<?php include 'header.php';?>
Well this question is so extremely general it's hard to answer without knowing what your goal is. I highly doubt there are any web developers that develop a website from scratch anymore. Most use a content management system (CMS) which uses server side scripting to serve HTML pieces to form a website. For example header, footer, content-body I don't mean the HTML tags header and footer, although they will be part of the pieces the CMS serves. The most popular content management system is Wordpress, which is built in php. The pages don't even need to be specifically designated, they can be a list of blog posts, a picture gallery ...etc . There are many different CMS packages that serve different purposes and depend on your requirements. Wordpress is in my opinion the simplest with the lowest learning curve and is quite powerful, especially with all of the templates and plugins available. Wordpress itself is free and there are many free templates to start from. However, there are paid templates and plugins that offer additional features. The only thing that you need is php support and a hosting site.
All you need to know can be found here - https://codex.wordpress.org/Getting_Started_with_WordPress
Other content management systems include Joomla, Drupal, Magento, PrestaShop, TYPO3. Each have their advantages and disadvantages, as well as varying support for plugins and templates. Some are designed to support eCommerce sites, such as PrestaShop and TYPO3 but most CMS libraries provide support for eCommerce through plugins and templates.
Bootstrap is a framework, which is a little different from a CMS, but it offers a similar functionality. It serves different pieces or containers you design to form a website or page.
I recommend starting with Wordpress and if you have more specialized needs, check out the other options. I don't recommend you start writing php code to serve pages unless you are a very experienced php coder and even in that case why would you want to if there are so many free open source tools that have already done this for you.
I have a small static website and every page of this site has a menu and a footer.
What is the best way to make sure changes in the menu and the footer only need to be done in one place and enable me to easily update all my pages which consist of them.
I am looking for some kind of simple template system that enables me to combine files together.
I have looked a bit into ruby .erb files but they seem too complicated for what I want to achieve as I would have to install rails and enable my webserver to use that.
For a simple site, there's nothing wrong with doing server side includes. Simply create the HTML snippets (they don't even have to be fully formed HTML) for your menu and footer. Then on each page, add the appropriate
<!-- #include virtual="/footer.html" -->
statement in the proper location. Since you're on a Debian server, I'm pretty sure Apache wil already have this enabled by default.
It may seem antiquated, but my wife works for a company that does a lot of maintenance for small websites and they still take this approach and it works just fine.
If your site goes above 10 pages, then I'd say look into some of the templating systems, just to alleviate the need to remember to add your SSI on each new page you create.
you could have a look at some Web Templating Systems and decide based on the language/platform you are familiar with
I use Octopress. It's a static site generator built on top of Jekyll which uses markdown for content markup and specific template language for constructing pages. So if you only need a site with a few pages you should try jekyll.
It requires for your system to have ruby since all site generation is done on client side and afterwards the site is deployed via rsync.
Try searching the internet for static site generator. It gives dozen of solutions in all sort of languages: Python, Ruby, PHP, Haskell, Sh, Bash…
Do you need to combine those on the server side?
For a small static site I simply created a little local script (I used PowerShell, but feel free to use whatever you want or have at your disposal) that does deployment from the local source files which represent the templates. While maybe not as flexible on the template side as full-blown templating engines it's easy, fast and works well for quite a while. Also it runs locally and doesn't need anything except a simple web server on the server side, cutting down on potential vulnerabilities.
I've used WML ("Website Meta Language"; NB nothing to do with the WML associated with mobile and WAP!) on Debian for years to maintain consistent templated header/sidebar/footer boilerplate for pages on my ISP's static page hosting.
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.
If you use dynamic pages like JSP or asp.net, you can have your page template included, and then content added. But what if you have no server-side component and all pages are just HTML/JS? You can of course create a template then copy it for each page, but then if you want to change something you risk having to modify every page, even if you put most styling in CSS properly.
Are there any non-awful ways to do this? I could see that an iframe could be used to load the content into the central page but that sounds nasty. Does HTML provide any way to include a base file and add to it?
You can use Server Side Includes to include other files on the server. It's similar to scripting languages like ASP or php, but SSI is usually supported by the server directly, so it's available on many servers, even if there is scripting language available.
The answer is still templates. Just process them offline instead of on the server. I like to use ttree for this.
You can create the pages offline and render into HTML, and deploy those to the site.
One option might be: https://github.com/thewml but it does feel ... "too much". I also saw asciidoc for creating sites ( https://asciidoc.org/ ) and I also used several times doxygen for that ( http://www.doxygen.nl/ ).
I also saw CMS that create static HTML files, but hey are no longer maintained.