Skip Navigation

Everything tagged with "html"

The second version of the CSS Cheat Sheet, a quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.

Read the rest of this post »

HTML is the language of the web. It is the semantic support on which websites depend. This A4 reference lists the various tags available to the web designer, as well as a selection of useful character entities, attributes and events.

Read the rest of this post »

Microformats allow us to add more information to our documents on the web, embedding semantic data in web pages that can then be parsed and used in other applications. This reference sheet contains an overview of the most often used microformats.

Read the rest of this post »

I'm forever looking up character codes, so this cheat sheet was a no-brainer. This contains a list of the assigned character codes in HTML, with an example of how they are displayed, and description.

Read the rest of this post »

The problem that led to this snippet of code was that when posting from a form to a PHP script, you may sometimes want to have several fields with the same name and different values. For example, you might want people to be able to tick boxes to indicate which cities they have been to from a list. You would normally add "[]" to the name of the field inputs, like so:

<input type="checkbox" name="cities[]" value="London"> London
<input type="checkbox" name="cities[]" value="Paris"> Paris
<input type="checkbox" name="cities[]" value="Berlin"> Berlin
<input type="checkbox" name="cities[]" value="Madrid"> Madrid
<input type="checkbox" name="cities[]" value="Rome"> Rome

When the form is received by PHP, whichever items are ticked in the cities list above are accessible in the array $_POST['cities']. This is very handy.

Unfortunately, the addition of square brackets causes trouble with JavaScript, especially with a "Select All" function - which allows you to check all boxes at once by clicking a single one. This script works around that using regular expressions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Checkbox Fun</title>
<script type="text/javascript"><!--
 
var formblock;
var forminputs;
 
function prepare() {
  formblock= document.getElementById('form_id');
  forminputs = formblock.getElementsByTagName('input');
}
 
function select_all(name, value) {
  for (i = 0; i < forminputs.length; i++) {
    // regex here to check name attribute
    var regex = new RegExp(name, "i");
    if (regex.test(forminputs[i].getAttribute('name'))) {
      if (value == '1') {
        forminputs[i].checked = true;
      } else {
        forminputs[i].checked = false;
  }
    }
  }
}
 
if (window.addEventListener) {
  window.addEventListener("load", prepare, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", prepare)
} else if (document.getElementById) {
  window.onload = prepare;
}
 
//--></script>
</head>
 
<body>
 
<form id="form_id" name="myform" method="get" action="search.php">
 
  <a href="#" onClick="select_all('area', '1');">Check All Fruit</a> | <a href="#" onClick="select_all('area', '0');">Uncheck All 
Fruit</a><br><br>
 
  <input type="checkbox" name="area[]" value="1" />Apples<br />
  <input type="checkbox" name="area[]" value="2" />Bananas<br />
  <input type="checkbox" name="area[]" value="3" />Chickens<br />
  <input type="checkbox" name="area[]" value="4" />Stoats
 
  <br><br><a href="#" onClick="select_all('location', '1');">Check All Locations</a> | <a href="#" onClick="select_all('location', 
'0');">Uncheck All Locations</a><br><br>
 
  <input type="checkbox" name="location[]" value="1" />Brighton<br />
  <input type="checkbox" name="location[]" value="2" />Hove<br />
 
</form>
 
</body>
</html>

A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.

Read the rest of this post »

Learn how and why you should add a robots.txt file to your website.

Read the rest of this post »

An explanation of what the box model is and how it is treated by different user agents.

Read the rest of this post »

On-The-Fly Validation


1 July 2004   |   Comments   |   regexp, xhtml, html, php, validation

A tool to help automatically fix most common (X)HTML errors before outputting a page to the user.

Read the rest of this post »

Using CSS for layouts can be a problem when using backgrounds for two columns that are not of equal length. This article expands on the solution to this problem from AListApart.

Read the rest of this post »

DTDs for Beginners


29 April 2004   |   Comments   |   html, dtds, for beginners

DTDs, Document Type Definitions, are rarely used by web designers, but they are absolutely essential in HTML code.

Read the rest of this post »

Accesskeys enable a user to navigate a site using keyboard shortcuts, improving both the usability and accessibility of your site.

Read the rest of this post »

A populated select list (input box) with the states of the USA as options.

Read the rest of this post »

META Tags


3 November 2003   |   Comments   |   article, meta, html, seo, meta-tag, online marketing

META tags are rarely used well, but can be a boost to your search engine placement. This guide explains which tags to use and how to use them effectively.

Read the rest of this post »

HTML for Beginners


1 November 2003   |   Comments   |   html, for beginners

If you are thinking about taking your first steps into web design, this article might be a good place to start.

Read the rest of this post »

A populated select list (input box) with the countries of the World as options.

Read the rest of this post »

A free, printer-friendly RGB Hex colour chart for web designers.

Read the rest of this post »