A simple 5 page site built for music composition, sound design and music searches company 'little bits of mischief'. The site is built in php / XHTML and features Flash audio and video players. It's always a pleasure for me to build simple, classic designed sites. I particularly like the red, white, blue colour scheme in this design.
Check it out: www.littlebitsofmischief.com
When starting a fresh HTML site it is very useful to have a basic HTML template to use. This template should include:
Having an empty template document will save you time, and will ensure that you don't forget to include any of the most important features of the html page structure. This template should serve as a 'blank canvas' as it were, rather than starting with a completely blank document every time. Here is an example of my template for XHTML 1.0, which can also be downloaded from the link at the bottom of this article:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css"> @import url(style.css ); </style> </head> <body> </body> </html>
DOCTYPE:
The doctype declaration (DTD) is important as it tells the browser what type of HTML you are using, and therefore which conventions you will need to follow when coding the site's content. For more information on this check out this Recommended list of DTDs to use in your Web document.
TITLE:
This is the title that appears at the top of the browser window, it is also the title that appears in the google listing for your page. It is good practice to have a different title for each page of your site. The title can be split into two parts:
resulting in something like: UK Diving - The worlds largest internet resource for divers (Site name - Site description) or: UK Diving - Contact Us (Site name - Page description).
STYLE-SHEET:
The stylesheet provides all the colour, layout and text-formatting styles for your html page, it is written in CSS (Cascading Style Sheet). Please refer to this document on Cascading Style Sheets for more info about CSS. The style-sheet can actually be written entirely between the two style tags, but I prefer to include it as a separate document, as this can be easily included in every page of the site, and once it is stored in the users cache it will also save on page loading time. The style-sheet in my example template is called 'style.css'.
META TAGS:
I use three basic meta tags in my HTML template:
ABOUT WRITING XHTML 1.0:
Here are some of the rules of XHTML 1.0.
All nested tags must be closed in the reverse order in which they are opened:
<div><span>Hello</span></div> = Correct
<div><span>Hello</div></span> = Incorrect
All tags that don't have a closing tag must be treated as self-closing with a backslash:
<img src="test.jpg" /> = Correct
<img src="test.jpg"> = Incorrect
<br /> = Correct
<br> = Incorrect
All special characters must be encoded correctly:
& = incorrect
& = correct
Please feel free to use my template as a basis for your HTML pages. You can also test your HTML markup for errors using the online W3 markup validator, or the Web Developer Toolbar for Firefox.
DOWNLOAD TEMPLATE:
This WordPress plugin adds the Lightbox feature to image links and to the new WordPress 2.5 gallery feature too. It uses the jQuery Lightbox Plugin by Benjamin Arthur Lupton to create the lightbox effect, and adds rel="lightbox" to image links in posts, pages and galleries as demonstrated in the example below:
Updates:
25/4/2008 - Minor update to version 1.1
- updated jquery version to 1.2.3 to fix IE7 bug.
28/4/2008 - Minor update to version 1.2
- added priority of 12 to add_filter to bring in line with 2.5.1 shortcode priority.
- moved style elements to the head of the page so that the gallery XHTML code validates! (<style> tags are not allowed in the body of the page)
29/4/2008 - No version update
- minor bug fix - changed the modifier of the first preg_replace statement to U (ungreedy)
2/5/2008
Minor update to version 1.3
- css bugfix for safari 3.1.1
Installation:
