Tagged with "html"
Cheat Sheets
CSS (V2)
174 comments
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.
HTML
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.
Microformats
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.
HTML Character Entities
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.
CSS (V1)
A quick reference guide for CSS, listing selector syntax, properties, units and other useful bits of information.
RGB Hex Colour Chart
A free, printer-friendly RGB Hex colour chart for web designers.
Articles
robots.txt File
Learn how and why you should add a robots.txt file to your website.
The Box Model For Beginners
An explanation of what the box model is and how it is treated by different user agents.
On-The-Fly Validation
A tool to help automatically fix most common (X)HTML errors before outputting a page to the user.
Faux Columns for Liquid Layouts
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.
HTTP Status Codes Explained
All valid HTTP 1.1 Status Codes simply explained.
DTDs for Beginners
DTDs, Document Type Definitions, are rarely used by web designers, but they are absolutely essential in HTML code.
Accesskeys for Beginners
Accesskeys enable a user to navigate a site using keyboard shortcuts, improving both the usability and accessibility of your site.
META Tags
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.
Blog Posts
"Select All" JavaScript for Forms Posting to an Array
This may be useful to someone - a question on the BNM list led to this small piece of JavaScript.
The original problem was that when posting to a PHP script, in order to have the result as an array (when using a set of checkboxes for example), the quickest way to do this is to add "[]" to the item name (eg 'name="area[]"). Then, PHP can access $_POST['area'] as an array in the receiving script.
Unfortunately, the addition of square brackets causes trouble with JavaScript, especially with a "Select All" function. This script works around that using regular expressions, and might prove useful to someone experiencing the same problem later.
<!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>
