MaggsWeb:7 » HTML

prevent caching of files

admin — Wed, 01 Jun 2011 09:59:28 +0000

Version them in their with their timestamp. This way, when they change, the link will change and the browser will reload the sitemap… Otherwise it will be fine to be cached as it wont have changed.

^?View Code HTML

HTML to XHTML

chris — Mon, 04 Jan 2010 11:35:42 +0000

Here’s a quick check list of the important requirements of XHTML and the differences between HTML and XHTML.

This is NOT a comprehensive XHTML language reference.

All tags, attributes and values must be written in lowercase.

Right:
Wrong:

All attribute values must be within quotes

Right:
Wrong:

All tags must be properly nested

Right: this emphasis just keeps getting stronger and stronger
Wrong: this emphasis just keeps getting stronger and stronger

All XHTML documents must carry a DOCTYPE definition

The DOCTYPE is an intimidating looking piece of code that must appear at the start of every XHTML document, it tells the browser how to render the document.

Rules for the DOCTYPE tag:

* It must be the first tag in the document
* The DOCTYPE is not actually part of the XHTML document so don’t add a closing slash
* It should point to a valid definition file called a DTD that tells the browser how to read the document
* You must write the DOCTYPE tag correctly otherwise your document will explode (into little pieces of HTML called “tag soup”) and be unvalidatable.

There are three types of valid XHTML 1.0 document: Strict, Transitional, and Frameset. If you can get your document to validate with “Strict” then do so, however some legacy tags and attributes aren’t allowed in Strict so you can use “Transitional” instead.

Note also that using a Transitional DTD takes most browsers out of “Standards” mode. It is much trickier to get your web pages to look consistent across different browsers when the browsers are not in Standards mode. I’m not going to explain the minutae of the DOCTYPE tag as it gets deeper and more complicated, just know that for best results you should use one of the following, preferably the first one (Strict):

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

The HTML tag must contain an XMLNS attribute

You don’t need to understand the “XML namespace” attribute, except to know that it is required in all XHTML documents. Here is an example of how to write it:

Documents must be properly formed with HTML, HEAD, TITLE and BODY tags

In HTML it is possible to write a webpage that contains none of the above tags; in XHTML it is not. The above tags must be included and they must be nested and ordered correctly, as follows (the DOCTYPE has been omitted):

See how the TITLE must be placed in the document HEAD – the TITLE is considered
to be a “required child” element of the HEAD.
Notice that the HEAD must also appear before the document BODY.
Notice also how both the HEAD and the BODY must be contained
within the HTML tag. Again, HEAD and BODY are “required child”
elements of the HTML tag. Finally, notice that this text is
written within a

paragraph

tag; in XHTML you may
not write text directly in the BODY tag without using a suitable
container tag, such as

All tags must be closed, even single tags

Wrong:

Mary had a little lamb

It’s fleece was white as snow

Right:

Mary had a little lamb

It’s fleece was white as snow

In XHTML even single tags have to be closed – absolutely NO tag may be left open.

Wrong:

Mary had a little lamb
It’s fleece was white as snow

Right:

Mary had a little lamb
It’s fleece was white as snow

Attribute minimisation isn’t allowed

In HTML, attributes can be strung together almost like they were keywords, ie.

, this is called attribute minimisation. In XHTML that is not allowed, attributes and values must be excplicit, ie.

ID and NAME attributes

In HTML it was legal to use ID and NAME attributes interchangeably. In XHTML the NAME attribute is formally deprecated and cannot be used. In all cases where you would think to use a NAME attribute you must now use ID instead. e.g.

Correct HTML:

Correct XHTML:

STYLE is all in your HEAD

XHTML does not allow STYLE or SCRIPT declarations within the body of a document they must be placed in the document HEAD instead.

URL rewriting – WordPress style

chris — Mon, 07 Dec 2009 13:17:40 +0000

Add this into your .htaccess file…

?View Code APACHE

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1

The first RewriteCond checks if the requested URL exists as a file on the filesystem. In mod_rewrite, -f refers to a file, while the bang is the “not” operator. Therefore, !-f means “if the request script filename does not exist as a file”.

If the first rewrite_cond succeeds (that is, the requested file wasn’t found), then Apache moves on to the next condition. The !-d directive means it the condition succeeds if the requested script does correspond to an existing directory on the server.

Finally, if both conditions succeed, the request is forwarded to the index.php file, as specified in the RewriteRule directive.

You can now access request POST data.

Catching a keyPress..

chris — Tue, 04 Aug 2009 10:51:33 +0000

…like ‘Enter’ for instance.

^?View Code JAVASCRIPT

function handleEnter (field, event) {
  var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
  if (keyCode == 13) { 
        //do something, eg:
	submitForm();
  } else {
   return true;
  }
}

Print a Page, or Print a Section

chris — Sun, 26 Jul 2009 10:08:31 +0000

This is another functionality that I have been looking or for a while. I haven’t tried it yet, but intend to add this to my default toolbox! I am sticking it here for now – and will update this when I have used it.

^?View Code JAVASCRIPT

 
function printPageComponent() {
  html  = '';
  html += '  \n";
  html += "Print this page";
  html += "";
  return html;
}

Cross-browser bookmark link

chris — Sun, 26 Jul 2009 09:56:56 +0000

‘Bookmark Me’ is a sort of IE thing and doesn’t usually work in FireFox, Safari, Chrome, etc.. so as a FireFox user I’ve never bothered with a bookmark links before.
FireFox users know that Ctrl+D is the shortcut for these browsers, and that most ‘Bookmark Me’ links just aren’t work clicking – as they won’t work.

And then I found this…

^?View Code JAVASCRIPT

 
function bookmarkIt(){
if(document.all){
   window.external.AddFavorite(location.href,document.title);
   }
else if(window.sidebar){
   window.sidebar.addPanel(document.title,location.href,'');
   }
}

…although I haven’t actually used it yet.

Flickering images inside ’s

chris — Fri, 24 Jul 2009 15:18:48 +0000

In IE6 and sometimes in IE7 the background images flicker if they’re also an . A small edition to .htaccess overrides the browsers default to load the backgrounds every time.

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

Reqires mod_expire on an Apache server (most have it).

Custom Error redirects with .htaccess

chris — Thu, 07 May 2009 12:37:55 +0000

Cold hard website errors are horrible and unnecessary. All you need is a few nice looking .html files in your directory somewhere, then use .htaccess to reditrect to these when there is an error. Obviously, no errors at all would be better….

The format for the .htaccess is :

ErrorDocument errornumber /file.html

For example, if the file notfound.html was in the root directory of my site and I wanted to use it for a 404 error I would use:

ErrorDocument 404 /notfound.html

If the file is not in the root directory of your site, you just need to put the path to it:

ErrorDocument 500 /errorpages/500.html

These are some of the most common errors:

?View Code APACHE

401 - Authorization Required
400 - Bad request
403 - Forbidden
500 - Internal Server Error
404 - Wrong page

and they can all be redirected to the same page, different pages, or even a dynamic page….

Shortcut Icon (favicon.ico)

chris — Wed, 11 Feb 2009 17:45:55 +0000

In short, a 16x16px bitmap, renamed, in the web root. Or is it?

This minimal approach does actually work, but done properly, they should have a few different size versions in the same file, so that not only do they show in the URL bar, and now more recently in the tabs as well (IE8+, FF3+), but also display a different (clearer) version when dragged to the desktop.

I have been using an online tool for a few years to make mine and it’s great.
http://tools.dynamicdrive.com/favicon/
Try and use the best format that you have, but MAKE IT SQUARE first, otherwise it will get squashed.

Use this code to in the section to add it..

^?View Code HTML

Search, with no click

chris — Tue, 14 Oct 2008 08:17:12 +0000

How do you style a search button? They all look crap to me, and the default browser ones are all different. So, my solution is to get rid of it. Gone. No button. Heres how…