Web Design Resources

HTML Basics - HTML Standards & Browser Compatibility
HTML Validation Tools - Web Graphics - JavaScript Resources
Search Engines

While you can use most recent word processors and any number of Web page creation software titles to create your own Web site, you need to be aware of their limitations and be sure you're producing the sort of site that is usable to your intended audience.

There comes a time when you may need to know enough about the underlying layout used to build Websites to correct a problem with your page or incorporate some of the newer techniques you observe while surfing other sites.

HTML Basics

Definitions

In order to discuss this, you'll have to understand a few basic terms.

HTML (HyperText Markup Language) is the base markup used to display content on the Web.
CSS (Cascading Style Sheets) are used to alter the way various elements look on a site without having to redefine each and every paragraph. In more advanced sites, like this one, it separates the content from the layout by defining the layout in the CSS.
XML (Extensible Markup Language) is related to HTML, but XML was designed to carry data, not to display data, an important distinction.
DOM (Document Object Model) defines the way that a page is intended to be displayed, be it HTML 4 loose or HTML 3.2 (like much earlier browsers).
JavaScript can be used to generate dynamic content on Websites, like fly-out menus and roll-over images. It is not related to Java, in spite of its name. More here.

HTML Primer

HTML is a markup language. Perhaps the easiest way to understand this is to use an example from a standard word processing program. When you write something, you can choose to add bold or italics or underline to a selection of text. This doesn't alter the text, only how it is displayed.

In the same manner, HTML doesn't alter the text, only how the browser displays it. HTML is not an arcane code in the same manner as computer programming might be. If you look closely at the source (click on the View menu, then select Page Source—some browsers may use different terminology) of this page, you'll see that this is so.

For example, look at this section of HTML:

This is a sentence displayed in bold text.

is displayed as follows:

This is a sentence displayed in bold text.

and tell the browser to display the text in a paragraph.
and tell the browser to display "strong" (usually bold) text.

Cut 'N Paste HTML Editing

This site offers more of this very basic introduction to HTML. Cut 'N Paste HTML Editing is intended for those wishing to edit an existing hand-coded HTML document using cut and paste techniques. It is not an extensive education in HTML.

More Extensive HTML Instruction

For more extensive instruction in HTML check out these resources:

HTML Reference Links

SitePoint HTML Reference (beta) is "the most detailed and up-to-date reference on the subject available."

HTML Basics Links

An HTML primer is a beginner's guide to HTML.
The HTML Writers Guild has various HTML resources.
HTML Basics from HTML Goodies.
Bulletproof HTML: 37 Steps to Perfect Markup is both an introduction to HTML but also deals with making your HTML work correctly.

HTML Courses

The HTML Writers Guild offers on-line courses (with reduced fees for their members).
Spectrum Virtual University offers beginner courses on HTML.

CSS Basics

Simplifying Things

CSS (Cascading Style Sheets) can be defined at the top of a page or in a separate external CSS file. You can also redefine an element within a page, but that is nowhere nearly as useful.

By defining the way elements like headers and paragraphs display (e.g. the font, colour, indent, spacing and more) in an external CSS file, you can avoid repeatedly re-defining these elements if a simple change is needed site-wide.

For example, if you'd built a 30 page site to display everything in Arial brown, only to find out that the customer wanted Verdana and hated brown, the amount of work you had to do would depend on how the site was coded:

If you'd used the traditional method of defining every paragraph as you went along, you'd have a long night ahead of you—30 pages with dozens of paragraphs each.
If you'd used an external CSS file, you'd only need to redefine one file.

If you want to see this explained more graphically, have a look at Adding CSS.

CSS Example Sites

The following sites will give you an idea of the power and flexibility of CSS:

css Zen Garde: The Beauty in CSS Design dramatically illustrates how changing CSS can alter the look of the same content.
Complexspiral Demo demonstrates some spectacular results using CSS. This page may be a little technical, but the clever use of background images is worth the visit even for novices. Scroll near to the bottom of the page to load different views.

CSS Reference Links

SitePoint CSS Reference is "the most detailed and up-to-date reference on the subject available."

Return to top

HTML Standards & Browser Compatibility

Learn More About Responsible Design

Web sites are created and will be viewed using different Web browsers and operating systems which means you don't have the absolute control that you would have with a hardcopy project.

To complicate this, your page will be viewed using various screen resolutions. It is important that you understand the effects these variables will have on how your site is seen to minimize the problems your site viewers may encounter.

You can learn more about screen resolution and how you might select an appropriate width for your site display.

Web Standards

The W3C site's content may be a bit intimidating since it is aimed at those designing and building browsers more than the average Web designer, but it is the place where the standards are created. Unfortunately, the implementation of those standards is less than perfect.

W3C World Wide Web Consortium is the body working to set the standards for HTML, CSS, XML, DOM and others.

Issues with Internet Explorer

Internet Explorer (IE) has a different way of dealing with certain elements that can create unexpected results. Many designers code for compliance then add hacks to deal with the quirks of the IE 5.5 and IE 6 browsers (one of the most famous being the Holy Hack). IE 7 has helped to remedy this by adhering closer to the standards, but creating a dilemma for those with IE hacks in their site markup.

Accessibility

A newer area of compliance is accessibility for those that use screen readers and other tools to "view" Web content. This is an area that is relatively unknown to many, yet is important both to provide for access to those individuals and to comply with existing or pending legislation in many jurisdictions.

Cynthia Says provides an on-line service to validate your Website pages for compliance of various standards.
Understanding Accessibility is one book on the subject, provided by HiSoftware—providers of the Cynthia Says validation service. In addition to purchasing the book, there are options to view an on-line version of the book or you can register to download a PDF copy.

Layout Solutions

Unfortunately, the implementation of those standards is less than perfect. These sites provide you with access to ways to minimize the impact those differences will have on visitors to your site.

QuirksMode.org is an interesting site to compare the various support levels for JavaScript, DOM, CSS and other standards. He documents even unusual and ancient browsers.
SitePoint has excellent design content and forums. Their books are strongly recommended, if you are serious about your coding.
W3 Schools provides tutorials as well as various references and examples to demonstrate how various Web technologies are employed and what effects they can have.

Cascading Style Sheets

Cascading style sheets (CSS) is moving from merely altering HTML to replacing much of the layout and design functions that HTML has been used for in the last few years. These sites will give you an idea of the possibilities and provide you with some tools to work with:

Box Lessons examines the creation of CSS layout (boxes) and has wonderful links to other sites.
Layout-o-Matic provides a quick way to set up a typical one- two- or full-page layout using CSS.

Browser Resources

Web Browser Features

There are a number of sites that provide information about how the various Web browsers work with what features.

Browser Statistics tracks browser usage by type. It is always a good idea to test your page on multiple browsers.
Webmonkey's Browser Chart tracks which browsers support what features.
evolt.org Browser Archive has an incredible number of archived browsers including earlier versions of Internet Explorer and Netscape.
BrowserCam is a commercial service that will allow you to view your site as it appears in dozens of browsers in various operating systems.

User Groups

Sometimes it just helps to talk to someone that has faced the same challenges and can provide a working solution.

Return to top

HTML Validation Tools

These tools will help you to avoid HTML errors, spelling mistakes and code that stops users with different or older browsers from viewing your Web pages. Most of the spelling checkers will not recognize British or Canadian spellings of words such as colour and flavour, and will not recognize most proper names. Some offer more complete services for a fee.

HTML Validation Sites

W3 Validator is an excellent free resource that will help your pages display correctly.
Doctor HTML is a Web page analysis tool which retrieves an HTML page and reports on any problems that it finds.
Bobby allows you to type in the URL of any site and choose the browser you'd like to have Bobby display the page through. The resulting problem report is based on the results you'd get when actually using that browser.
Accessible Web Authoring Resources and Education (AWARE) Center is a Web designer reference for creating sites that can be used by anyone regardless of computer setup or disability.

Firefox Addons for Web Developers

Firefox has a number of addons that make validating your pages much easier:

Web Developer extension adds a menu and a toolbar to the browser with various web developer tools, including the W3C Validators.
HTML Validator based on Tidy adds HTML validation inside Firefox and Mozilla, displaying errors and warnings in an icon. You can then view the page source with the errors and warnings highlighted.
Firebug allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
IE View allows you to launch the current Firefox page displayed in Internet Explorer (Windows only).
LinkChecker validates links on a page.
CSSViewer is a simple CSS property viewer.

Return to top

Web Graphics

Free Web Graphics and Stock Photography

If you aren't adept at creating your own graphics for your page you can find some on the sites below.

Respect Copyright

Respect the copyrights and requirements stated on the site where you obtain images. If you aren't sure if you are permitted your planned use of an image or graphic you should e-mail the site owner for permission. Some graphics are so widely used on the Net that they are considered "public domain," but make sure before you use them. Some sites also post material sent to them by their users, so even the site host cannot be 100% certain about the copyright. The fact that their site stated the images were free will not release you from legal repercussions if they are wrong.

Linking Required

Several of the pages below allow you to use the images provided that you link back to their site. Read the conditions of use to be sure you can comply with all the requirements before downloading images.

You might want to create a folder specifically for the site where you get the images from and to include the conditions of use in that folder in some form to remind yourself of any obligations.

Personal Use Only

Most sites will not allow you to use free images commercially (although some will). That generally means that you can use them on personal Websites, but not on company Websites or on projects for commercial use. Some make an exception for non-profit uses.

Graphics for Specific Links

Many companies and individuals create various graphics to put on your page that are intended only to link back to their site. An example on this site is the "W3C" graphic displayed on my contents listing in the left column of this page.

My Images Not Available

I've created most of the graphics on this site and I retain full copyright. Please do not copy these images without obtaining my direct written permission.

Web Graphics

Absolute Web Graphics Archive.
All Free Backgrounds has backgrounds for Websites and some HTML hints.
Laurie McCanna's Free Art requires a link back to her site in exchange for using the graphics on this site. Her Creating Great Web Graphics is a great graphics design book for beginners.
OTC's Virtually Free Web Graphics Library are "linkware" (you need to link back to their site if you use the free graphics on your site).

Stock Photography

iStockphoto Royalty Free Stock Photography. Free membership required.
Stock.XCHNG free stock photography. Free membership is required.
Wikipedia:Public Domain Image Resources.

Return to top

JavaScript Resources

JavaScript is not Java. Java uses applets or programs to do its work while JavaScript is primarily used in creating rollovers and other effects on Websites.

Not all browsers are created equal when it comes to the implementation of JavaScripts. Choose your use of JavaScripts carefully so as not to disappoint your viewers.

Here are some JavaScript sites that may be useful to you:

QuirksMode deals with a number of DHTML tools, including JavaScript.
Dynamic Drive has various JavaScripts that you can use. Read the guidelines first.
JavaScript Source is another JavaScript resource.
Doc JavaScript is a more advanced JavaScript site.

Java and JavaScript are registered trademarks of Sun Microsystems, Inc.

Return to top

Search Engines

Search engine provide one of the best ways to locate information from the millions of Websites on the Internet. The designer's challenge is to get their site listed within the first page of listings for the relevant search terms for their business or topic.

Search Engine Optimization

Search engine optimization (SEO) is the term used for the methods used to obtain the best ranking possible. It is important for you to understand that most search engines will determine your ranking based upon the relevance of the information on your site.

SEO Pitfalls

Many rankings are determined by how many sites link back to you, which has spawned the "link exchange" trend. Unless the link is relevant to the content on your site, a link to your site could actually decrease your rank!

If you hire a SEO company, be aware that many have only short-term success. If your site gets banned from a major search engine because of unethical SEO tactics, you will have a much greater problem than not being on the top-ten list.

Adding Your Site

To get your Website linked, click on the Help menu for the search engine you wish to list your site with.

Return to top

More About Related Issues

Secure Net Commerce

The following related pages offer more information about providing online services in an ethical and safe manner:

Protecting Your Online Identity

The following related pages offer more information about protecting your online identity:

Securing Your Computer

The following related pages offer more information about securing your computer:

Return to top

www.RussHarvey.bc.ca/resources/web.html
Updated: July 23, 2010