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". :)
Related
A local nonprofit needs a new website. It's a very basic website that simply presents information, nothing past basic HTML/CSS is needed to make the actual site.
The marketing manager would like to be able to edit text sections (upcoming events, jobs) regularly. How would I go about creating the site in HTML/CSS and then allowing them to edit just the text in those sections in an easy way? is that even possible, or would this require more advanced knowledge of actual programming/database languages?
Thanks
No, you can't edit the site with just HTML and CSS. Even if you have JavaScript, you'll need server side code (ASP.NET, PHP, Ruby on Rails, Node.js etc) to store the changed text, since HTML, CSS, and JS run on the client (excluding server side JavaScript based frameworks).
The easy solution is to just use simple HTML and tell him to directly edit the HTML. If he's just a little bit technical, an hour or two of explanation of how HTML works might be enough to get you going.
A CMS solution that is prebuilt and has simple menus for editing things might work nicely. There's plenty of various options to suit your needs.
Otherwise, you can either build a custom site. A custom site that reads text from simple text files might be all it takes (Markdown might be preferable to plain text.) Of course, you can scale it up if you want until you've basically built your own CMS.
You can't do that.
HTML pages are stored on a server (which is just a computer accessible by other computers via an internet connection), when you type in an address in your browser's address bar it sends a request to a server to fetch the corresponding HTML page. Then this page is displayed in your browser.
Now, say you managed to change a text in your browser somehow using HTML/CSS, but you still need to find a way to send these changes back to the server so that these updated pages are accessible by other remote browsers, and the only way of doing this is to use server side languages. They are not really that difficult, you can quickly learn that.
You might like to take a look at this sourceforge project.
This is a file-based system that uses conventional HTML for the webpages, but allows online editing with CKEditor. Requirements are Apache 2 and php 5.3 or later.
There is a testdrive available.
Login with guest.
This is more a "best practice" question than it is a coding question. In regards to coding your header/navigation and footer sections in a website. Is it better to code it on each page or use the includes tag?
Coding it on each page seems very tedious and violates the golden rule of "never repeat yourself", so using the includes tag seems like the most obvious choice but I could be wrong.
I'm average at best when it comes to best standards in web design so I'm looking to get some input from the pro's so to speak.
Just as a side note, as far as I know you need some kind of "desktop server" in your development setup to use the includes tag, me working straight from my desktop then won't be able to test with the includes tag, is this correct?
Thanks in advance!
If your website is in PHP, then definitely use the include function for repeating content - not just the header/footer, but any repeating modules through the pages, too.
This means that any time you need to update your header, you don't need to do it separately on every page!
As for working locally - you can install PHP onto your computer, and have a local server environment to test with. If that seems daunting, then just upload to a test website before you upload to your live website, so you can use the PHP server there.
You shouldn't repeat code. Imagine that you have to change your header one day... you must need to make the change on all your pages! That's an absolute no-no.
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'm building a small-scale website (a personal one) in which each page would have the same set of header elements (I'm not talking about the <head> element). In other words, I want each page to have essentially the same title at the top of the page and the same navigation bar below that (with possibly minor differences in each page). It's kind of like how StackOverflow has that navigation bar (with the logo, and the Questions, Tags, etc. buttons) on the top of every page.
Is it possible create such a header for every web page without copying and pasting the HTML code to do so? I really don't want to run into a situation where if I want to make a single change, I would have to change all of my pages containing the header.
Real web sites use real web frameworks, which have a concept called a "layout" (at least that's what they're called in Rails; as mentioned in Uwe's answer, they're called master pages in ASP.NET). All the common "templatey" stuff goes into a layout.
How about include files in a server-side language like PHP or master pages in ASP.NET?
You need to use some kind of dynamic page processing, whether it's PHP, a server-side include, or a similar tool.
If you need to stick with straight HTML, you could try to rig something up with AJAX or JavaScript - but then you highly limiting your website's functionality, giving it serious performance issues, AND preventing users who have JavaScript disabled from using your website.
A third answer is to use some sort of pre-deployment tool. This used to be a bigger market, but I think it's mostly dried up now. Here's an example for using DreamWeaver to handle this.
If you have a PHP server that supports PHP,
<?php include 'header_inc.php'; ?>
If that's not available
<!--#include virtual="header_inc.html" -->
But whether this works or not is server dependent
If you have a server with PHP capabilities
include 'header.inc.php';
you must put the header code in a file named that and then put that include code in all pages that you want the header to show up on