If you’re keen on making sure your website code is perfect, then make sure you give the W3C’s HTML and CSS validator’s a try. These free web-based tools allow you to check whether your HTML and CSS files conform to the W3C specifications.
The W3C HTML validator allows you to check any online web page or upload an offline HTML page, and will return a detailed list of where your page does not conform to standards.
The W3C CSS validator can check that you have written valid CSS in external CSS stylesheets.
Finally, the W3C Broken Links report will check for any broken links.
If you’re HTML is in a mess (!!!), check out HTMLTidy, which is available both as a web based service and as a Firefox extension. HTMLTidy will remove any empty tags, correct simple errors and indent code nicely to make it more readable.
You can make one web page look and feel differently over many different media types by using the media attribute inside the link element when referring to an external stylesheet.
For example, we are used to linking to a stylesheet using the following syntax:
<link rel="stylesheet" type="text/css" href="/library/css/style.css" />
By including a media attribute, we can limit this stylesheet to a particular media type. For example:
<link rel="stylesheet" type="text/css" href="/library/css/style.css" media="screen" />
Potentially, this allows us to format our site differently depending on how the user is viewing the page.
While web developers could once rely on the safety of tables for their web designs, more and more recently table layouts have been frowned upon in the design community in favour of DIV based layouts. Tables should be for tabular data, after all.
The only problem is DIV based layouts from the outset can seem much more daunting and complicated, especially for people new to web development - mainly due to each layout requiring a different coding strategy to get the columns laid out nicely, the code being split between HTML and CSS, and the requirement to test the layout in at least two browsers for compatibility issues.
Enter the Layout Gala - a handy website I recently stumbled upon - which contains 40 of the most popular layouts all made using cross-browser friendly DIV code. Now whenever you need a new look, just visit this site find the layout you want and download the skeleton HTML for stress free DIV based websites. Woohoo!
Click here to visit the Layout Gala
On a side note, if you find yourself needing a DIV layout with equal length columns, check out these articles:
- Faux Columns - A simple background image trick which should be suitable for most solutions.
- Project 7 Equal Height Columns - A simple javascript which extends the columns to the length of the largest column. It can either be fully extended on load or visibly extend in front of your eyes.
Cascading StyleSheets (CSS) are a powerful tool for designing websites, but everyone has different authoring styles and writes CSS differently. In this week’s tip, I will show you how I tend to write my own CSS, in a way that keeps it tidy and easy for others to reference. This article assumes you already have a basic knowledge of how CSS works.
Loading ...
Recent Comments