Web Design Resources
While you can use most recent word processors and any number of web page creation software titles 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.
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.
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.
- XHTML (Extensible HyperText Markup Language) is an application of XML resulting in a much stricter implementation of HTML 4.
- DOM (Document Object Model) defines the way that a page is intended to be displayed, including which version of HTML it uses and how strict the interpretation should be.
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:
<p><strong>This is a sentence displayed in bold text.<strong></p>
is displayed as follows:
This is a sentence displayed in 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
- SitePoint HTML Reference 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.
- The HTML Writers Guild offers on-line courses (with reduced fees for their members).
- Virtual University offers beginner courses on HTML.
- IWA-HWG eClasses.org.
- Sitepoint's Learnable.
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.
- The CSS Color Chart lists colours in rainbow order by name, HEX and RGB.
If you aren't adept at creating your own graphics for your page you can find some on the Web.
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).
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. See the site copyright, legal and privacy statements for more information.
Web Graphics and Stock Photography
Free membership required to download or purchase images on most sites.
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.
- Dreamstime free photos section (subject to their RF-LL terms and requires a credit line next to the photo in your design).
- Wikipedia:Public Domain Image Resources. Check the requirements.
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.
- Stock.XCHNG free stock photography.
There are many other resources on the Web that don't necessarily fit within any category. They'll be listed below.
- Apps, Tools, and Resources — for everything they never taught you in art school.
- Mighty Deals offers time-limited specials, including royalty-free images at a discount for use on commercial projects.
- Java uses applets or programs which need to be compiled in order for them to work.
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 likely results appear at the top.
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 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
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, you may 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 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.
- SearchTools.com lists and ranks search tools for websites and intranets.
Permission to duplicate this resource by Jovana Milutinovich from Webhostinggeeks.com has been revoked.
Updated: March 11, 2017