Russ Harvey Consulting - Computer and Internet Services

Web Design Resources

Standards | Validation | HTML Basics | Graphics | JavaScript | SEO

Design resources like HTML basics, standards and validation.

While you can use most recent word processors and any number of web page creation programs to create your own website, 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.

In addition, there are several content management systems (CMSs) like WordPress, Joomla and Drupal. These may allow people to edit content without knowing HTML, but there are strict limitations. I find using WordPress frustrating because of limitations inherent in any design program aimed at amateurs.

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

HTML Basics


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 using CSS rather that with HTML.
  • XML (Extensible Markup Language) was designed to store and transport data, not to display content like HTML does.
  • XHTML (Extensible HyperText Markup Language) is an application of XML resulting in a much stricter implementation of HTML.
  • DOCTYPE tells the browser what version of HTML the page is written in (HTML5 excludes the version) and is the first element on a page.
  • JavaScript can be used to generate dynamic content on websites, like fly-out menus and roll-over images.
  • PHP is a server-side scripting language that can be embedded into HTML for managing the output of forms and similar tasks.

HTML Primer

HTML is not code, it is a markup language forming the base of most websites. Other elements modify how that HTML is displayed, but cannot exist on their own.

Perhaps the easiest way to understand the term “markup” is to think of what a word processing program does. When you write something the text is automatically formatted in the default fonts and colours in use on the page you're writing on. You can then choose to add bold or italics or underline to a selection of text but that doesn't alter the text itself, only how it is displayed (or marked up).

Likewise, HTML doesn't alter the text, only how it is marked up.

If you look closely at this page's source, you'll see that this is so. Windows users running Firefox can right-click on the page and select View Page Source. Other browsers and operating systems can use different methods to display the page source (some require you enable developer tools).

A Simple HTML Example

Have a look at this section of simple HTML:

<p>This is a sentence <strong>with some bold text<strong>.</p>

is displayed as follows:

This is a sentence with some bold text.

  • <p> and </p> tell the browser to display the text in a paragraph.
  • <strong> and </strong> tell the browser to display "strong" (usually bold) text.

Basic 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

HTML Basics Links

HTML Courses

CSS Basics

Simplifying Things

CSS (Cascading Style Sheets) can be defined at the top of a page or in a linked external CSS file. You can also redefine an element within a page, but that is not as useful because it only affects that one element in one location.

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 legacy 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 embedded CSS file, you'd need to redefine the CSS on all 30 pages.
  • 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

Return to top

Web Graphics

Web Graphics & Stock Photography | Colour & Backgrounds

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

Respect Copyright

Respect the copyrights and requirements stated on the site where you obtain images. Ensure you can meet the conditions of use before using images on your site.

  • 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.

Royalty-free is Not the Same as Free

Royalty-free, or RF, refers to the right to use copyrighted material or intellectual property without the need to pay royalties or license fees for each use or per volume sold, or some time period of use or sales. — Wikipedia (emphasis mine)

Link Back Required

Most sources of free images require 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.

I recommend creating a folder specifically for the site where you obtained the images and including a note about the conditions of use to remind yourself of any obligations.

Personal Use Only

Most sites will NOT allow you to use free images commercially. 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 use).

Link-back Graphics

Many companies and individuals create various graphics to put on your page that are intended only to link back to their site. An example is the “Get Adobe Reader” button.

Images on This Site Copyrighted

Do not copy any images on this site without obtaining my direct written permission. Some images are licensed for my own use and which cannot be relicensed by me (you need to contact the image's owner).

Web Graphics and Stock Photography

Registration or membership required to download or purchase images on most sites.

Free Images

Be sure to read the conditions of use for the images on these sites. Unless specifically permitted, images cannot be used on commercial sites or projects; most others require a link back to the site hosting the image.

Stock Photography

While free is attractive, stock photos provide better quality and selection. No link backs are required, providing a better experience for your site visitors.

You can purchase a license for a specific image for one site or project. Other options may be available.

  • Can Stock Photo affordable royalty-free stock photography.
  • Dreamstime provides a wide range of stock photography and high quality digital images at affordable prices.
  • Fotolia royalty-free stock photography (purchased by Adobe Stock).
  • Fotosearch royalty free and rights managed stock photography, illustrations, maps, video, and audio.
  • GoGraph inexpensive royalty-free stock photography, illustrations and footage.
  • iStockphoto royalty-free stock photography.
  • Freeimages is an alternative to expensive stock photography.

Boycott Getty Images

I do NOT recommend using Getty Images. They are not only extremely expensive, but have engaged in practices that are unethical if not illegal.

Upon information and belief, Getty has been carelessly and recklessly acquiring content, not doing due diligence and not taking adequate measures to prevent infringement as well as falsifying/removing proper copyright management information. In fact, its aggressive acquisition schedule is possible only at the expense of others' rights. — Richard Liebowitz.

After sending Carol Highsmith a letter demanding payment for the use of her own images which she'd donated to the public domain, Getty claimed to have the right to charge for images on the same basis as publishers of public domain books.

A publisher of public domain stories would not get away with “billing” anyone else that used the same works and neither should Getty Images. Billing the original author? Right!

Colour and Backgrounds

Be careful when using backgrounds and colour schemes while developing your site. Some colours may have unexpected emotional or cultural impacts as well as creating issues for those that have various forms of colour-blindness.

The following pages cover this in greater detail:

Other Resources

There are many other resources on the Web that don't necessarily fit within any category. They'll be listed below.

Return to top


What is JavaScript?

JavaScript is a scripting language was developed by Netscape and is primarily used to make websites more interactive. This use of JavaScript is sometimes referred to as Dynamic HTML (or DHTML).

JavaScript is Not Java

While both Java and JavaScript are registered trademarks of Sun Microsystems, Inc. (now owned by Oracle), JavaScript is not Java.

  • Java uses applets or programs which need to be compiled in order for them to work.
  • JavaScript is a scripting language which uses text scripts to alter behaviour of text, images and links such as rollovers and other effects (sometimes referred to as DHTML or dynamic HTML).

For example, this site uses JavaScript to open links pointing to external sites in a new window (or tab) while retaining compliance with HTML standards.

The following pages have more detailed information about JavaScript and how it differs from Java:

JavaScript Support Varies

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

As well, JavaScript can be disabled within a browser, degrading the user's experience on a JavaScript-enhanced site. This is often done to avoid security problems as well as to remove the JavaScript support used to display the annoying popups and tracking on some sites.

More JavaScript Information

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

Return to top


Search engines provide one of the best ways to locate information on the Internet but the user and website owner have different purposes.

  • A search engine's job is to correctly interpret the search terms so that the most useful results appear at the top.
  • The designer's challenge is to get their site listed within the first page 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 to understand that most search engines will determine your ranking based upon the relevance of the information on your site.

When you do a search on Google — doesn't matter what you're searching for — which would you rather find? A website that used every single SEO trick in the book to game their way to the top? Or would you rather find a website that has exactly what you're looking for — backed by authoritative and reliable content? — Kyle Reyes

SEO Pitfalls

Site rankings are at least partly determined by how many sites link back to you. Authority sites are more likely to have top ranking.

Users have tried to use “link exchange” and other techniques to improve their site's ranking. Unless your links are relevant to the content on your site, they could decrease your rank!

If you hire a SEO company, short-term success may result but if your site gets banned from a major search engine because of unethical SEO tactics, you will have a much bigger problem than not being included in 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. Each search engine has a different method for submitting new sites for inclusion and there are no guarantees.

Remember, the site will require a reason to list your site in their search results. Provide quality, original material that others will find useful or entertaining.

Search Tools For Your Site

If your site contains more than just a few pages, you might wish to consider adding a search facility for your site. While the major search engines can do an excellent job of providing a listing of relevant pages on your site, you might wish to keep visitors on your site as they search for something there rather than sending them off to compare your pages with your competitor's site.


Design Standards

Probably the hardest lesson for many people to learn is that web designers don't have the control that print designers take for granted.

Different Browser = Different Experience

Web sites are created and will be viewed using different web browsers and operating systems.

This means web developers don't have the absolute control that you would have with a print project.

To further complicate this, your page will be viewed using various screen resolutions on multiple platforms (computers, cell phones, tablets, etc.).

Web Standards

Following official web standards minimize the problems your site visitors may encounter and can help your site to display optimally on all devices.


W3C is the body working to set the standards for HTML, CSS, XML, DOM and other aspects of the Web.

The W3C site's content may be a bit intimidating since it is aimed at those designing and building browsers rather 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.

Issues with Internet Explorer

Internet Explorer (IE) has interpreted web standards differently for each version and has done so deliberately to use their operating system dominance to make the other guys look bad. To further complicate this, each version of IE has its own quirks.

Until recently, many designers coded for compliance then added hacks to deal with the quirks of the IE browsers (one of the most famous being the “Holy Hack”).

Over time, IE has become less relevant as developers forcussed more on the needs of other browsers. Microsoft moved to Microsoft Edge with Windows 10 and even though IE is still present, it is not intended to be your primary browser:

Is Internet Explorer (IE) a browser? According to Microsoft, no. Today, it's a 'compatibility solution' for enterprise customers to deal with legacy sites that should be updated for modern browsers. — ZDNet


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.

Imperfect Standards

Unfortunately, the implementation of web standards is less than perfect.

These sites will help you to recognize and minimize the impact browser shortcomings will have on visitors to your site:

  • 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) has moved from merely altering HTML to replacing much of the layout and design functions that HTML performed in earlier versions.

These sites will give you an idea of the possibilities and provide you with some tools to work with:

  • The CSS Zen Garden demonstrates the power of using CSS for layout (see the "select a design" menu).
  • Box Lessons examines the creation of CSS layout (boxes) and has wonderful links to other sites.

HTML5 Browser Support

HTML5test: how well does your browser support HTML5?

There are a number of sites that provide information about which web browsers work with which features.

Older Browsers

Need to support an older browser? Browser Archive has an incredible number of archived browsers including earlier versions of Internet Explorer and Netscape.

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

Validation 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.

Spell Checkers

Most of the spelling checkers will not recognize Canadian spellings of words such as colour or flavour nor most proper names.

HTML/CSS Validation

  • W3 Validator is an excellent free resource that will help correct issues with your pages so they will display correctly.
  • W3C CSS Validator is an excellent free resource that will help correct issues with your CSS.

Addons for Web Developers

Firefox has a number of addons that make validating your pages much easier. Most have now been replaced with Firefox Developer Tools.

  • Firefox Developer Tools examines, edits, and debugs HTML, CSS, and JavaScript. Firebug was merged into Firefox Developer Tools.
  • Free Backlink Checker by LRT tests your page for working, unverified and broken links. It also tests your page's internal links (e.g. index.html#internal).

Unsigned Addons

Firefox now treats unsigned addons with suspicion and many older ones now carry a permissions warning.

This affects the following addons:

  • Web Developer (Chris Pederick) 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, displaying errors and warnings with an icon. Online HTML5 validation requires a newer version.

Google Chrome Alternatives

There are alternatives available for Google Chrome. Note: Chrome cannot stop these extensions from tracking your browsing history.

Chrome is commonly used by many developers, replacing Internet Explorer as their primary test browser.


Chrome's dominance in the browser market allows Google to manipulate web design in much the same way as Microsoft did for years with Internet Explorer.

Combined with the dominance of search and advertising markets, they effectively dominate the Web.

Google has changed the way it measures the placement of a site. PageRank no longer works (nor do the addons that displayed it).

Related Resources

Related resources on this site:

or check the resources index.

If these pages helped you,
buy me a coffee!


Permission to duplicate this resource by Jovana Milutinovich from
has been revoked due to failure to maintain his translation as agreed when permission was granted.

Return to top
Updated: March 13, 2020