I am making a website that is styled using CSS, in two DIVs. One 'Header' DIV which is always the same, and a 'Content' DIV that changes.
In my CSS file, is it possible to write the HTML with all the links that stay in the header, so I just need to call (or similar) on every page, instead of having to write out my header content every time? Would also help in editing only one source, as I often leave out pages by mistake.
I don't want to use frames, so looking for an alternative.
Thanks,
Brett
Depending on the server and server side languages supported, this can be done.
Some servers will let you use Server Side Includes, for example. With others you could specify "block" of HTML for a header (for instance) that will be part of a site wide template.
What is not possible it to achieve this with purely CSS and HTML.
This is why you usually have some server side code running, which will insert the common header e.g. php include, SSI or other templating framework. If that's not an option, you could write JavaScript which writes out your header each time to a specific DIV. Although I don't think that's great from an SEO perspective.
The usual options for doing this client-side are an iframe, or some javascript that does DOM to add content (perhaps loaded from an external file). Or some javascript that creates an iframe. Or an iframe that creates some javascript. Some permutation of those odious techniques.
CSS does have the content property, but i think it's limited to plain text. I don't know if you can use it to pull in HTML, either using a string or URI.
As others have mentioned, the most common approach is to do it server-side. You can do this bottom-up with includes, or top-down with things like Tiles and SiteMesh.
CSS can't help you to do this.
You can make ajax loading of content. You can make one index.html and lot of 'content' files (about.html, contacts.html, etc). And in index.html you can load another .html in content-div (for example with jQuery method .load())
Another way - you can make little templating engine in php (or another server-side language)
It isn't possible to achieve that using CSS, because CSS can't handle any events, it's simply a "refrence" for the browser to know how to style your web-page, it's done, however, using AJAX.
I suggest you to take a look on jQuery lib, it'll speed up the process tremendously, however - the main disadvantage is that the search crawlers won't be able to index your page correctly, so it'll be bad by an SEO perspective.
It's possible, if you have the time, to make an index-able version and an AJAX one, that's what we did for a mobile project here.
jQuery AJAX API
Related
I am using AJAX to update content in my website. My index page has only a menu bar and a '#content' div where the dynamic HTML is appended.
The server I am using has no PHP or database features so no JSON is used.
I am downloading HTML pages straight from the server and populating the index. I am unsure what the best way to style the dynamic pages with CSS. Should I link the style sheets to the index page or to each of the content page(s)?
Also is there a need to put tags in the content pages?
Depends on how much CSS you have.
But most likely best solution is to just combine all CSS into one file and then link to it from the index page, the benefit of this is that the browser can cache it, which means it keeps a copy and doesn't have to download it multiple times.
As far as tags in the content page goes, if you need them use them, if you don't need them don't use them.
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.
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.
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.
I am creating some static html pages outside a .net and outside a ruby-on-rails environment.
I created a menu I want to share between several pages, but I'm wondering how this is done using regular html constructs (i.e. without .net's master pages and without rail's layouts)
Is there a way to do this without cutting and pasting?
What web server are you using? It's likely you'll have to enable Server Side Includes in order to use:
Save the HTML for the common elements of your site as separate files. For example, your navigation section might be saved as navigation.html or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
Reference: http://webdesign.about.com/od/ssi/a/aa052002a.htm
To share common HTML snippets between pages, you'll need some sort of server-side "code".
The simplest thing you could do that I know if would be Server Side Includes, "SSI"
see: http://httpd.apache.org/docs/1.3/howto/ssi.html#includingastandardfooter
There are basically two options: frames (or iframes) or javascript. Frames come with a whole host of problems and I really don't recommend you go down this route. Have a look at PURE javascript library for clean and simple client-side templating.