Bookmarks for IT 320

Web Technologies

Course Syllabus

Last Updated 9/21/06

© Margaret Menzin

 

I am particularly grateful to my IT 320 students for their contributions to these links

 

Please note that many elementary bookmarks may also be found at http://web.simmons.edu/~menzin/CS101_Site/bookmarks.html
Some of these bookmarks are old, but they include many links on web-safe colors, free graphics, site design issues, JavaScript tutorials, etc.

Please be sure to check the General Tools section, in addition to the sections for specific topics.

Table of Contents

IT 320 Bookmarks

General Tools

Tools for Many IT320 Topics

Webmonkey:The Web Developer's Resource

Large and useful site on site design for professionals - from beginner to master- many links; Includes info on PERL etc

DevEdge Netscape Sidebar Tabs

Sidebars for HTML, CSS, JavaScript etc. you may install in Netscape 6+ for heavy duty developers.
DevEdge was a wonderful site, now archived here.
The sidebar tabs, which work in later Netscapes and in Firefox, are professional tools for developers. For example, there are sidebars for JavaScript, CSS, DOM and XSLT.aaaaaaaa,/dd>

WebDeveloper.com ®: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript and More!

Links on Html, XHTML, JavaScript, Perl, CGI etc.

HotScripts

Articles on scripts for many languages and technologies - Perl, PHP, Python, JavaScript, XML

Web Developer's Virtual Library

Tutorials on authoring, including intermediate level ones; JavaScript, CSS, XML, etc.

w3schools

On-line tutorials for many subjects - including CSS, XML, etc. 
Usually a very clear survey of the issues, features, syntax.
Read before you get into the grubby details for an excellent overview.

ASPN

Resource for programmers in PERL,PHP, Python, etc. Major site.

Kira's Web Toolbox

Builder.com - Beyond the code

Web services, Java, Database,UNIX, XHTML etc.
Some articles more obscure than useful.
Newsletters

The Digital Divas - A Network of Digitally Gifted Women

Links to sites for HTML, CGI, Perl, etc.

Survey of browser usage

But beware that Netscape and Mozilla may be confounded; See also description of Mozilla

Many scripts in many languages

Includes HTML, RSS, Perl

The Experts

Links to Dmitry’s Design lab (a favorite), articles on XML, DHTML

w3.org

All the specs on all the web standards and some (difficult) primers

Goodies To Go! Newsletter Archive

Index of useful articles on many topics - from technical issue to optimizing for search engines

Web Monkey

Tutorials on a variety of topics

Mozilla’s Developer Center

Links to articles and reference material on every topic in the course and then some.

A List Apart (calls itself ALA)

Mainly articles on CSS code, but also some on JavaScript, XML, layout and web site design
I particularly like the article on lists in CSS.

to Table of Contents

IT in general - not course specific

FTP Utilities

CoreFTPLite

This is my favorite free FTP client;
It supports SFTP/SSH.
It is easy to use and robust.
Please note that on some LINUX machines (e.g. those requiring SFTP, such as Anita) you must use SFTP; on others you may not be able to upload files if you use SFTP.

SSH Communications Security : Home

Site for another secure FTP utility.

FTP server

Another secure FTP utility - 30 day free trial

Choosing an FTP utility

FTP for various OS's.

Download WS_FTP LE

License for current edition of Ipswitch FTP Home Edition (low cost)

FTPplanet.com - A community site for users of FTP

Ipswitch's site, including guide on their FTP utility

Setting up your FTP utility

SmartFTP

A free FTP utility; I find CoreFTP easier to use.

Filezilla

Free FTP and SFTP (Secure FTP) utility (from Source Forge)

CyberDuck

Another free FTP and SFTP utility- this one for Macs

Fugu

SFTP for Macs with a graphical front-end

to Table of Contents

UNIX/LINUX

While you are on a UNIX/LINUX machine:

man commandName  gives the manual’s sections on that command.

A tutorial which starts with the basic but goes to more topics –

great resource

UNIX Systems Admin

Very detailed course

There are many LINUX (and UNIX) groups on Google

The following tutorials are all very, very basic:

BigNoseBird Introduction and tutorials

Quick, barely large enough to be useful introduction to LINUX and file permissions with link to good vi tutorial and cgi scripts

Linux Primer from Clark University

Good introductory primer

Another basic intro –

from Bridgewater College

A tutorial which starts with the basic but goes to more topics –

Great resource

Linux Links

Includes a place for newbies, but most of the searches link to books at Amazon

To edit all scripts with one line of Perl

LinuxPlanet

has a lot of info – perhaps more than you want

There are elementary tutorials on shell programming etc – starting basic

Shell programming

Part 1 talks about basics – copying, moving files etc.;
Part 2 talks about pipes, redirection and I/O.

vi and vim documentation and tutorials

There is a tutorial on most UNIX/LINUX machines.
Type vimtutorial  (Vim is an update of vi.)

BigNoseBird Tutorial

Very useful cheat sheet of editing commands

UNIX/LINUX guide from Web Monkey

Two dozen of the most frequently used commands

to Table of Contents

Search Engines and Getting Found

SearchEngines.com - search engine rankings and search engine optimization tips.

Largest site on search engines; newsletters etc. How to get found and where you want to be found

Search Engines: What's the Difference?

Google vs. Yahoo vs. Ask Jeeves / Teoma

Goodies to Go! Newsletter #281

Search engines- met-tags and general intro

Goodies to Go! Newsletter #282

Which search engine do you wish to optimize your site for?

Goodies to Go! Newsletter #286

On getting found - belongs in Search Engines

How Search Engines Work

Several pages, including good information you’ll want to know on how they rank pages

Major Search Engines and Directories

Major search engines and how to get listed

Before You Write Meta Tags

Uses for meta-tags, including general and internal search engines

The impact of links and link text on search engine placement

Getting found

to Table of Contents

Other IT Tools

Builder.com - Beyond the code

Web services, Java, Database, Unix, XHTML etc.

Reviews and free downloads at Download.com

Free FTP utility from Ipswitch - may be older version, in case can't find current version from Ipswitch

https://techrepublic-secure.com.com/5106-6242-24-15872.html?part=tr&subj=15872

CD on how to manage a small office network

PDFConverterX, PDF to Text Component for Conversion

Tool to convert PDF documents to text or HTML. Maybe old

Choosing a CMS - What you Need to Know

Choosing a CMS (Content Management System)

TIOBE Community Bulletin Board

Lists frequency of queries about various languages

DDJ

Dr. Dobbs Journal has links on many programming languages and platforms

to Table of Contents

Tech News Sources

ACM

Current news; you should also get their newsletter with weekly updates.
If you are a student, you should join; student memberships are a bargain.

 IEEE

This site has more news about the IEEE than about technology.
Local societies and local computer societies also frequently have newsletters

Zdnet

Reviews of software, hardware and tech toys; good place to find free utilities (e.g. for FTP)
as well as to comparison shop for new computers, digital cameras, etc.

 CNET Tech News

 TechWeb – catering to IT folk

 Tech News World

 SlashDot

Slashdot likes to describe itself as ‘news for nerds’

 Wired.com

 And, of course, all the general news outlets from the
N Y Times to
Yahoo!

to Table of Contents

Tools for Accessibility - e.g. for color-blind and low-vision users

Web Accessibility Initiative

W3c's links to everything you could need to know about accessibility problems
on-line and how to address them.
This site links to EVERYTHING.

Color Deficient Vision

See how your site looks to someone who
is color-blind with links (at bottom) to transforming tools.

Rules so your site will be accessible for the color-blind

CSS for aural style sheets

For pages which are read aloud

Web documentation for aural style sheets

From w3.org

Web Standards

Webstandards.org is devoted to affordable accessibility for all.
Through their site you may obtain the British guide to accessible sites

Creating accessible tables from the w3c.org

How to create tables (for tabular information, not for layout) which work for Braille readers, cell phones, etc.

Accessibility and the Web - Designing Web Pages that are Color-Blind Friendly

Rules so your site will be accessible for the color-blind

Web Exact

This is a free service which validates for conformance to accessibility rules.

Lynx Viewer

Lynx is a text-only browser.

to Table of Contents

Other IT Tools and Resources

Client and server

Introduction to terms

Newsletters on CSS, XHTML, JavaScript etc.

Builder.com : Architect : Web Services

Newsletters on web services

Goodies To Go! Newsletter Archive

Index of useful articles on many topics - from technical issue to optimizing for search engines.
Some are dated.

The Digital Divas - A Network of Digitally Gifted Women

Links to sites for HTML, CGI, Perl, etc.

Sun Microsystems

Sun's developer site - information on Java, Web Services, etc.

WebDeveloper.com ®: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript and More!

Links on Html, XHTML, JavaScript, Perl, CGI etc.

Amaya Home Page

Editor which includes extensions to MathML;
Amaya is a w3c.org tool for editing on the web

Webmonkey | Reference: Special Characters

Another list of all the special codes.

Note: You may need to type the URL into your browser and then use the back button if the browser quickly goes to another page. The URL is http://www.webmonkey.com/webmonkey/reference/special_characters/

Apache

A very large, major open source organization with many projects.
Apache is a web server; there are links to Xerces, Apache’s XML editing tool, other XML projects, and many other projects and products.

Source Forge

Another large source for open source projects

to Table of Contents

Miscellaneous Tools- not IT  related

VisiBone Touch-Typing Tutor

Typing tutor - in case you need it or know someone who does

WinSite: Graph paper printer

Print your own graph paper

to Table of Contents

HTML and XHTML, including CSS

XHTML/HTML
Please note that a large number of resources, including information
about web page and web site design may be found at www.simmons.edu/~menzin/CS101_Site/bookmarks.html
the bookmarks for CS101, my introductory web design class. Most of these links are not duplicated on this page, and you should be sure to visit the CS101 bookmarks.

Documentation for HTML and XHTML

HTML Codes - Special Characters - ASCII Table from About.com

Codes for < , accented letters and other special characters

HTML Special Entities from w3schools

Another easy to use list

Webmonkey | Reference: Special Characters

Another list of all the special codes

Note: You may need to type the URL into your browser and then use the back button if the browser quickly goes to another page.

The URL is http://www.webmonkey.com/webmonkey/reference/special_characters/

Special Characters for HTML from w3c.org

Includes mathematical characters

XHTML Elements Library - HTML Tag Libraryfrom About.com

Links to summary of tags for HTML/XHTML by function (at bottom) and alphabetically (to right of sponsored links box) and links to summary of modules (major chunks by function) for XHTML

HTML elements from w3c.org

HTML attributes from w3c.org

Includes information on what is deprecated

Quick reference on all XHTML tags from DevGuru.com

Very easy to use and helpful, but doesn't warn you about usage dropped in going from transitional to strict Doctype.

Modularization of XHTML from About.com

Good intro to modularization of XHTML

Modularization of XHTML1.1 from w3c

Includes information on changes from XHTML1.0

You Already Write for Cell Phones - XHTML Basic

Modules and tags included in XHTML Basic, so you can write for PDA’s, cell phones, etc. Also see link above this.

XHTML Basic description and documentation

XHTML Basic is a minimal subset for ‘small user agents’ (cell phones, smart watches, TVs)

VisiBone HTML and CSS Products

Cards summarizing HTML, CSS, JavaScript syntax (to buy)

XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

Turning HTML into XHTML from w3.org

HTML Working Group Roadmap

What modules and versions will be coming your way and when

The DOM model

Also check out the Tutorials and Articles section directly below and the information on the DOM in the JavaScript section.

This reference is from the JavaScript Kit.

HTML 4.01 Specification

Of course, by now you are writing XHTML.

You can also find the Forms specifications here.

IDocs References on HTML

This is from 2003 - before the days when XHTML was a must.

Still, it has useful basic information and some tutorials.

Setting the character set encoding

More information on character set encodings is in the Tutorials section.

to Table of Contents

Tutorials and Articles for HTML and XHTML

Tutorials and Elementary Articles

Introduction to HTML

From w3.org; but by now you should be writing XHTML

Why switch to XHTML?

The Transition from HTML to XHTML

From About.com

Making the switch to XHTML

Why you should switch from HTML to XHTML - from Builder.com

XHTML 101 - Free XHTML Course

Good but basic introduction to XHTML.

There is also a free HTML class here (see links at the left.)

XHTML Tutorial from w3schools.com

w3schools tutorials are always a good place to begin.

Dave Ragett's Tutorials on HTML

Even though you should start with XHTML, this is such a clear, concise tutorial it's a classic.

There are also links to his advanced tutorial

And to his tutorial on CSS

And to his invaluable HTMLTidy

XHTML tutorials

You can also change the 1-1 in the URL to 2-1, 3-1, etc. to step thru the tutorials

This is from About.com

WDVL: Introduction to XHTML, with eXamples

XHTML tutorial from WDVL

HTML Tutorial from EchoEcho.com

Another clear HTML tutorial - but, of course, you'll write XHTML

This tutorial does haesome more advanced features - e.g. meta tags refresh, etc.

The navigation is so clear that you can quickly zoom to any details you need.

HTML Tutorial from HTML.net

Although this is an HTML tutorial it looks towards XHTML - e.g. close all tags, put tags in lower case, etc.

Wilbur is an older HTML tutorial

It has a useful alphabetical idex of tags.

Excellent at it's time, the author, Eric Meyer, has since become the guru of CSS

Attributes and XML

Introduction to attributes and values

Tutorials from w3c,org

This includes links to some advanced tutorials.

The span and div Tags

Clear summary of the similarities and differences

And how to use div appropriately

What's in a Title

What the title tag does for you and how to find it.

Writing HTML Code that is Human-Readable

Why you should do this, and how to do it

The trouble with using ems and percents for font sizing

Pitfalls of relative sizing for fonts

Are keywords the answer for font sizing?

Keywords work better than absolute or relative sizes for fonts

Properly using CSS and Scripts with XHTML - please also see section below on CSS

From Mozilla; with examples

Using an HTML Validator

Please also see section below on HTMLTidy

Quirks Mode - Using the DOCTYPE Tag

Why you need the DOCTYPE

Rise of the Underdog Browser

Why you need to design for all browsers

Please also refer to the sections on Site Design and Browsers

Font Families: How to Decide Which Font Family to Use -- Serif, Sans-Serif, Monospace, Script, Fantasy

Links to many code warriors and sites on dynamic HTML

More information on dynamic HTML and DOM may be found in the section on DOM - advanced articles on JavaScript

Guidelines for formatting lists

Attributes for the Image tag

Checklist for your web page

Good checklist oneverything from correct spelling to making sure your image files are small enough to download rapidly (12Kb)

Unordered lists - how to change the shape of the bullets or get none

Beginning with XHTML1.0 strict this must be done through styling.

This also works on mobile devices

Ordered lists - how to change the enumeration (e.g. Roman, Arabic numerals, letters, etc.)

Beginning with XHTML1.0 strict this must be done through styling.

This also works on mobile devices

The starting point of the numbering/lettering may also be specified

Forms, Post and Get - see also section on CGI

A Useability checklist for forms

Excellent article

WDVL: Server-side Scripting

Excellent introduction to what CGI is and why it's needed.

WDVL: The GET Method

How GET assembles a request, so the HTTP request can be isolated and CGI can isolate the search parameters and their values

WDVL: Problems With the GET Method

WDVL: Request Headers

What's in an http header

WDVL: The POST Method

How POST assembles a request etc.

WDVL: The <Form> Tag

Specifying POST and to what CGI script

Focus on forms

The focus() and blur() methods

Checkboxes vs Radio Buttons

From Jakob Nielsen, the great guru on useability

The Disabled attribute in forms

This allows you to fill in a field and prevent the suer from changing it

HTML Forms from w3c.org

Includes some advanced methods - e.g. fieldset for grouping related elements and control elements

Additions to forms in XHTML are also available.

XForms for HTML Authors

The w3c.org explains how to convert Forms to Xforms

Emailing Forms Data

Scripts to send form data by email, if you don't want to use the preferred CGI script

More Advanced Articles

Using Web Pages with Excel

How to set up your web page so that it may be downloaded into Excel

Coming eventually: XHTML2.0

What to expect

Modularization of XHTML

Good introduction to modularization of XHTML for XHTML

Also discusses the Transitional, Strict, and Frameset subsets of XHTML

Description of all the modules in XHTML 1.1

And the changes from the modularization of XHTML 1.0

Also links to the description of moularization in XHTML1.0

If you scroll down to the FULL table of contents you will find

which elements are part of which modules in XHTML 2.0

The description for XHTML 1.1 makes it easier to see where the w3c is heading, before

you go to the more complicated XHTML 2.0

The List Module in XHTML 2.0

A new type of list is added for navigation lists.

Open and recently resolved issues are at the bottom of the page.

You Already Write for Cell Phones - XHTML Basic

Modules and tags included in XHTML Basic, so you can write for PDA's, cell phones, etc. Also see links about modularization.

Tutorial on writing for mobile devices

Should you abandon table-based layouts in favor of CSS?

Yes- almost always! And this articles explains why

The document character set (Unicode)

What are chasets all about?

How do I use them - a tutorial

toTable of Contents

Links and Resources for HTML and XHTML

Validators, HTML Tidy and the connections between HTML and XHTML

HTML Tidy is the standard for XHTML validation.
Originally developed at the w3c, it is now under the aegis of Source Forge, the huge open source organization.

HTML tidy service - this is the place I recommend going!!

HTML Tidy on-line (interactive). Fast and easy to use.

You don't need to learn all the details of HTML Tidy to use this page.

General information about HTMLTidy and its capabilities

Clean up your Web pages with HTML TIDY

Link to HTMLTidy - turns your HTML into XHTML.

Although this page describes itself as ?somewhat dated, it has a lot of excellent information as well as a Link to Source Forge and current versions of HTML Tidy.

HTML Tidy Project Page

The actual HTML Tidy programs

You may download the programs if you wish to "Tidy" your pages off-line.

HTML Tidy - Frequently Asked Questions

HTML Tidy Configuration Options Quick Reference

Options you may set for HTML Tidy at SourceForge.

This is a huge site, with a library of Tidy that you can call in various languages, and tools for version management.

Explains how to download your own copy of HTML Tidy and set the options

XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

How to write HTML which is XHTML compatible so there is less to 'Tidy' up

Tidy Online

Another place to check your HTML and VALIDATE it!

This is another version of HTML Tidy

W3c Validator

W3C Markup Validation Service: Upload Files

Validate your XHTML

There are other validators

CSE HTML Validator Online Check

On-line HTML Validator

There is a free version.

Mozilla's DevEdge has links to several validators.

HTML Kit

Customizable HTL editor with HTML Tidy and beyond for validation; free for personal use.

HTML Validator

From the Web Design Group at www.htmlhelp.com - much of this is dated.

Note that this HTML site validates HTML, not XHTML!

They also offer a CSS checker (again for CSS1, not CSS2)

And a very useful Link Valet, to check all the links on your page

Validator advice and common 'gotchas'

From AListApart

Advice on validation and links to validators

Many useful links, but some links do not work in Netscape Navigator

to Table of Contents

XHTML Editors

Links to 14 free XHTML editors

Brief description of each editor

Large parts of this were composed on Evrsoft's excellent 1st page

NoteTab Lite is also popular.

Amaya is the w3c's browser/editor and it is designed to work with mathematical expressions and Math ML.

WYSISYG Editors - a few of which are free

The list includes the usual commercial products - Dreamweaver, Adobe, etc. and links to them

More links on editorsfrom About.com

HTML-Kit - free, standards-compliant editor and validator

ZD Net's Download site is another source of editors.

Some reviews. Editors range from free to expensive.

Many have a free trial - or a free less fancy version

Check ZD Net's general download site for site management and design tools.

SourceForge, the huge open source software foundation

Also maintains a list of editor projects.

This includes editors for other languages too

Of course, everything is free.

HyperText Builder 2006

Earlier versions of this freeware editor were highly reviewed.

Includes tools for developing server-side PHP scripts

to Table of Contents

Link Checkers

Link Valet

Free and easy to use. Color coded report makes it easy to find broken links, although some fancy 'error pages' don't get picked up as broken.

w3c link checker

ZDNet also has a list of link checkers.

List is updated and includes prices, release date, and some reviews.

to Table of Contents

Browsers including issues on standards compliance

Why standards are important

Rise of the Underdog Browser

Why you need to design for all browsers

Survey of browser usage

But beware that Netscape and Mozilla may be confounded; See also description of Mozilla

Most recent version of Firefox

With acess to other Mozilla products including Firefox for all browsers

Archive of old broswers so you can test your site

This is really a one-stop place and is the eaasiest way to find old versions of Firefox.

Also has Bobby (for low vision viewers), Safari for Macs, Flock (social broswer).

Of course, all version of IE, including for handhelds are here.

SillyDog

Archive of old (and curent)Netscape browsers for pc's, Macs, Linux, etc.

Current Opera browser

Mobile version of browser also available here

Netscape archive of its browsers

Doctype switch and the difference between Quirks and Standard mode

Also has useful table on how older browsers handle various doctypes and articles on same.

Quirks mode for Mozilla browsers

Clear description of why Quirks mode is needed and how it works

How your page looks in Lynx, a text-only broswer

Major browsers with brief decriptions

and their bugs. Useful.

PNG and cross-broswer problems

PNG is a graphics format which is not supported in all browsers. This article tells you how to work around that

AListApart articles on browsers

Many of these articles are on CSS and site design issues.

Design for Firefox first and then IE

to make pages look good in both browsers.

Don't tell them what browser to use

And use the standards!

to Table of Contents

Other XHTML Links and Resources

Please also check the section on accessibility rules and tools.

The more general resources come before the specific ones.

In general, www.w3c.org

has all the detailed documentation, and the sites below have easier introductions

Still,it's hard to undersestimate the importance of the w3c site for documentation, status reports, and even some tutorials.

About.com covers many, many topics

http://webdesign.about.com/

You know w3schools for their excellent introductory to intermediate tutorials

www.w3schools.com

This is always a great place to startwhen you arae learning something new.

Web Developer�s Virtual Library has excellent introductory to intermediate tutorials

http://www.wdvl.com/Authoring/Scripting/

Webmonkey�s material, once cutting edge, looks more dated now

http://www.webmonkey.com/

WebReference tends to be more for experienced developers

http://www.webreference.com/tools/

Their Experts page has many good links, including Dmitry�s labs, with great design advice.

The Mozilla Development Center has a variety of HTML tools

http://developer.mozilla.org/en/docs/Category:HTML:Tools

Older Dev Edge tools, including those for JavaScript, are available.

So are the useful DevEdge Netscape Sidebar Tabs

These are sidebars for HTML, CSS, JavaScript, DOM, etc. you may install in Netscape 6+ for heavy duty developers.

Other sidebars are add-ins for Firefox

Web Developer Extension has a toolbar for Firefox, Flock, etc.

Zvon also has sidebars for Opera and IE

Also tutorials, including on XML and CSS

CSS & XHTML Bookmarks

is an enormous list of galleries of CSS styles, CSS tutorials (including 10 favorites), and articles. Mostly on CSS, but some on AJAX and other topics.

HTML Help

Various tools and references, some dated

The New York Public Library Style Guide

Written for people writing in the branch libraries. Good, basic information.

HTML Writers' Guild links

Site is not updated frequently. Formerly free tutorials are now tuition-base e-classes

About.com: http://watson.addy.com/

Tool to verify syntax, links, download speed etc for HTML pages

XHTML Frequently Answered Questions

DevEdge Netscape Sidebar Tabs

Sidebars for HTML, CSS, JavaScript, DOM, etc. you may install in Netscape 6+ for heavy duty developers.

Sidebars are available at this archived site.

HTML Editors and Software for Web Development

Editors, image map tools, etc.

Open Source Web Development - Dev Shed

Articles on XHTML,CSS, XML, Perl, etc

Tend to be more advanced and often looking for less main-stream effects.

The impact of links and link text on search engine placement

Getting found

DHTML Code Samples

and get free DHTML Scripts and DHTML Tutorials

Links to many code warriors and sites on dynamic HTML

DevEdge Tune-Up Wizard

Tests pages in Netscape and Firefox

to Table of Contents

Issue in Site and Page Design

Information on Color and Graphics

Color and Graphics

Good explanation of everything you might want to know about graphics - including bit depth, dithering, anti-aliasing etc.

The RGB Monitors

WDVL explains how colors are specified in XHTML and why

The 6x6x6 Color Cube

What colors you can specify using that cube

Browser safe, or non-dithering, colors

This is the most famous site for browser safe colors.

You should always use browser safe colors to avoid dithering

You may view the colors arranged by hue or by value.

Colors of similar value have similar intensity or impact.

Other pages with browser-safe colors may be found at

Primeline - nifty interactive tool

The Visual QuickStart Guide on XHTML and CSS

WDVL has a site on graphics

    Links to free graphics, tools, resources etc. near the bottom of the page

    Also some more advancedarticles on graphics

About.com

Cloford.com - Charts on colors, special characters, country codes

Dmitry's Color Lab

Excellent advice and information about color and design

Several pages

Optimizing Web Graphics

A bit dated, but many wonderful tools and links, and no one minds a fast download

Understanding Color and Accessibility

From evolt.org

Color Wheel and color theory

Many useful links to tools and other resources

Production Graphics

For the Graphics Professional

Tools for re-sizing images

Sources of free images and icons

HTML Writers' Guild -Links to several libraries of buttons,rules, etc.

Realm Graphics - 150 icons by type; Good source

Clip-art.com- Enormous collection of free clip art

Graphic Element samples - Large collection of basic but useful icons

Yahoo 's list of icon collections- Always a good place to start

ShockZone Animated GIFs - Use sparingly, but if you must, this is an easy place to find what you want; Also has non-animated clip art

Laura McCanna's Free Art Page- - Images with a similar feel

Icon Bazaar - Icons by category, so easier to find wht you want

Index of bullets - Useful site for colored bullets

Free Stuff Center - Leads to several collections

Webshots Photos - Enormous collection of photos, very well categorized; has several of everything you can think of; may also use it them as screen savers

GraphixKingdom - Large collection of clip art by category

Icon Browser - Large collection of icons, but not categorized, so time-consuming to use

Barry's Clip Art - Another huge, categorized source

Search for more free clipart

Search for more free photos

Page Design - Including Usability

The Basics of Page Layout

Basic - which is a good place to strt. Links at the bottom to other information

Useability checklist for forms

Good advice!

Useable forms for an international audienece

From evolt.org

Checkboxes vs. Radio Button

Article by Jakob Nielsen, the great guru of usability.

His web site has many articles on useability, including

The Top 10 mistakes of web design and

the all-important Usability 101.

Also annual lists of best and worst web sites.

Articles on writing for the web

From AListApart

On-line writing style

From Lynch and Horton's book

Tips for fast-loading pages

Useful for large pages/sites.

From Mozilla

Slash - getting URLS right

The F-shaped pattern for reading on the web

From Jakob Nielsen

Checklist for creating web pages

The all important back button

Links near the bottom lead to more articles about navigation

Writing Effective Links

Screen resolution and page layout

Usability.gov

Many articles, templates and lots of good advice about usability.

Includes information about the process of developing a site

as well as on planning, writing, programming and usability testing.

A treasure trove of information.

There are many tools and pages on acessibility issues in the general IT Tools section.

The w3c.org also has a Content Accessiblity Curriculum

Site Design

Art and the Zen of Web Sites

Humorous but very on-target advice.

Dmitry's Design Lab

Great advice on site design, navigation, etc. Great place to start

Web Style Guide

On-line version of Horton and Lynch's classic book

Good advice on everything from typography to navigation and on to site design

A complete course!

Further references may be found here.

Navigation advice

From evolt.org

Where Am I?

Good advice on naviagation

What makes for a good site?

How to drive your readers away

Articles on site design, layout and graphic design

From AListApart

to Table of Contents

CSS or Cascading Style Sheets 

Documentation for CSS etc.

Please note that many sites are a combination of tutorials, articles, doumentation, examples and information about tools. All these are found in the Links and Resouces for CSS section, so be sure to check out tht section too.

W3C HTML Home Page

I find myself also using these w3c pages:

w3c on the Cascade

w3c on assigning color values

w3c on Selectors

Style Activity Statement

     Status of various projects on style sheets - including CSS and XSL

CSS Validator from w3c.org

     So you know your code is valid

Cascading Style Sheets, Level 2

     Includes what values may be assigned to what attributes, etc.

Fonts

     w3c's definitions of the characteristics of fonts which you may specify, and how to do it.

Property index

     Chart with all possible properties, possible value and default values.

Media types

The @import rule

Descriptor index

     Highly technical reference on CSS descriptors, mostly related to fonts. Advanced and not normally useful.

XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

     Guidelines so your XHTML will work in existing HTML browsers

VisiBone HTML and CSS Products

Cards summarizing HTML, CSS, JavaScript syntax (to buy)

CSS Reference Table

Very useful table of attributes and values; from Bulder.com

CSS Reference table

Only CSS1, but a good clear place for a beginner to start, as is the guide to

CSS structure and rules

From htmlhelp.com

Other links from that site are available, including CSSCheckup, to check/validate for CSS (1),

A short tutorial on how to link style designations to your html page and

other web authoring tools (some dated – e.g. validate HTML but not XHTML).

Learning CSS

Books and articles on learning CSS (from w3c.org)

Web Style Sheets

w3c on style sheets - CSS and XSL

CSS for aural style sheets

For pages which are read aloud

Web documentation for aural style sheets

From w3.org

CSS Documentation and articles

Many topics and useful resources.

Covers CSS1 and CSS2.

CSS2 Reference from w3schools

Their tutorials are very useful, and so are their references.

CSS: The Definitive Guide - 1st editition by Eric Meyer

This is indeed the definitive guide.

The on-line version, which has less explanatory material than the print version, is also available through Safari Books at the ACM

Discusses CSS1 thoroughly and looks ahead to CSS2

HTML Goodies' Reference

May cover only CSS1, but easy to use and fine until all common browsers implement CSS2 or you use CSS2's features

Older (2001) documentation

Avaliable in other languages

toTable of Contents

Tutorials & Articles for CSS

Learning CSS

Books,tutorials, etc. on CSS from w3c.org

Starting with HTML + CSS

First look at CSS from w3c.org.

Good place to start.

CSS Tutorial

From w3schools.com

Another excellent introduction.

Dave Raggett's Introduction to CSS

from Dave Raggett at w3c.org

RichInStyle.com CSS2 tutorial

CSS How to

Usual excellent introduction from w3schools.com

Linking your style sheets to your html page

Cascading Style Sheets (CSS) By Example: CSS Resources

Fine set of tutorials and links

Webmonkey’s Guide to CSS

More an overview than a tutorial

Tutorial from EchoEcho.com

Basic, clear.Many links on site.

Tutorial from HTML Goodies

Starts basic, but goes far enough;

Links to tools and other tutorials at the bottom

Primer on CSS from HTML Goodies

Beginner’s tutorial from html.net

Useful index on the left side.

May be dated, as also has tutorial from HTML, rather than XHTML.

MaxDesign’s tutorials

On lists, floats, etc.

Start with the SelectTutorial

These tutorials are intermediate level.

Quick Tutorial on CSS –

From WDG and htmlhelp.com.

May not include CSS2, but a fast start

Article on how to link, classes vs id etc basic but very clear

WestCiv’s tutorials

From beginning to advanced.

Another tutorial; this one is from CommunityMX

All sections are indexed in part 6

This site also has tutorials on Flash, Dreamweaver, etc.

 

The next block of tutorials is from About.com.They are good introductions:

Cascading Style Sheets (CSS) Tutorial

     About.com 's CSS tutorials,including table of contents to various lessons.

CSS Lesson 1: What are Cascading Style Sheets &# [ ]

     Intro to CSS with links to many tutorials

CSS Lesson 2: Inline Styles &# [ ]

     Where to put your styling - inline, external, etc.

CSS Lesson 3: <font> CSS &# [ ]

     Text and font attributes

CSS Lesson 4: CSS Backgrounds &# [ ]

     Backgrounds, boxes (can we live without tables?) and positioning

CSS Lesson 5: Tips and Tricks with CSS &# [ ]

     DHTML and other tricks

CSS2 Generated Content

     How to get CSS2 to manage your bullets, numbering etc.

     Unfortunately IE has not yet implemented the :before and :after pseudo-elements

CSS Selectors

CSS Positioning

CSS Boxes

     and dressing up your borders

CSS Specificity

     What rules take precedence over which

CSS3 – what’s coming and also How It’s Implemented

Advanced articles on CSS

Media types (printer friendly pages)

What browsers support in CSS and how to Display Stylesheets Dynamically

     What browsers support what features and links on work-arounds for older browsers

Tutorial from Zvon.com

Also has links to tutorials on XML etc

The next set of articles is from peachpit, publishers of books for graphic designers

Styling forms attarctively

Print versions of web pages, paginations etc.

10 Favorite CSS tutorials, with brief descriptions.

None is elementary.

Tutorial on internationalization and CSS3

From w3c.org

CSS Structure and rules

Tutorial from htmlhelp.com

Includes rules for cascading

HTML Goodies - Explorer Tutorials

Well written tutorials, very clear, but maybe dated (e.g. CSS1 instead of CSS2, and doesn't appear to know that Navigator supports CSS too)

There are other tutorials on CSS here too – with useful links to tools and more tutorials at the bottom

The next set of articles is from WDVL:

WDVL.com/Authoring/Style/Sheets/Tutorial.html

     Link from About.com, but part of WDVL

WDVL: Introduction to Style Sheets

     Same tutorial on WDVL’s site.

     Tutorial on CSS - good top-dow approach;

     Be sure to also look at their pages on Designing CSS Web Pages in the

     "Links and Resources for CSS" section below.

     Layers in CSS

WDVL: Linking Styles to Documents

     How to link a style sheet to your page

The Brain Jar on Positioning with CSS

There are other tutorials here too – e.g. on DOM

There is also a tutorial on using CSS

Dealing with differences in CSS floats in IE and Netscape

Advanced article; also relevant to next article.

Rearrange page code to raise text relevance

How to move the important terms nearer the top of the page so your page gets found by search engines.

Change rollover effects by changing the order of CSS styles

Rollovers and the order of CSS styles

Why CSS styling is for tables too

Using CSS for tables

Integrated Web Design: Strategies for Long-Term CSS Hack Management

How to keep your solutions to the CSS foibles of different browsers under control over time

Add clickable icons to your links

Use CSS to get pretty pictures as bullets in you lists

Top 10 CSS Tips for Creating and Using Cascading Style Sheets

WebDeveloper.com's Guide to Cascading Style Sheets (CSS)

CSS2 Generated Content

:before and :after; does not work in IE

Positioning with CSS , Centering with CSS – fixed width , Centering with CSS – liquid width

Beginning CSS – from About

CSS and XSL: When to use which

The w3c says “Use CSS when you can, use XSL when you must.”

Should you abandon tables for layout?

Almost always and here's why

Why you shouldn’t use in-line CSS with a strict DOCTYPE

Friendlybit.com also has many articles on CSS, HTML and JavaScript,

Including a Beginner’s Guide to CSS, and some simple templates.

CSS, PDFs, LaTeX and PrinceXML

Advanced.

Tutorials and FAQs from AlsaCreations

Good place to start - e.g. sections on tabless layout and on menus

In-line styling in CSS2

By Eric Meyer. Advanced

Case study of how Mozilla used CSS to redesign its DevEdge site

Case study of using CSS and JavaScript to design a menu bar

to Table of Contents

Links and Resources for CSS - Including Sample Layout Sources and Browser-Specific Hacks

W3C HTML Home Page

w3c.org - can't link to it too often

W3C home page on CSS

Links to articles, tutorials, documentation, roadmaps of what’s coming, news, etc.

Another version of this, styled differently, is here.

Learning CSS

Books and articles on learning CSS

W3C Core Styles

8 style sheets on w3c's server which you can link to from your pages.

Many references on CSS

From Web design Group a htmlhelp.com

There is also a link to further references

U. of Minnesota - Duluth organizes everything

This well-organized site has tutorials on CSS, information on (literally) everything from headers to footers and everything in between

They also have links to their sites on JavaScript, XML etc.

CSS & XHTML Bookmarks

An enormous list of galleries of CSS styles, CSS tutorials

(including 10 favorites) and articles.

EchoEcho.com

Many links, including to tutorials, articles and FAQs.

This is another huge list of resources and tools.

While most of this site includes CSS1 and CSS2, some of the links are dated

(e.g. tools developed before Windows XP).

Open Directory - Computers: Data Formats: Style Sheets: CSS

Many links for HTML, XHTML and CSS

WestCiv's links

Links to many articles, tutorials, tools etc.

CSS Pointers

Another large compendium of articles, FAQs, tools, etc. For the Pros.

VisiBone Style Sheet Examples

Examples of style sheets; they all sell crib sheets for codes etc.

More Eric Meyer on CSS

More books and articles by Eric Meyer on CSS

He also has a cutting edge site

Beginning CSS Articles

Links to many CSS tutorials and articles

WDVL: Designing CSS Web Pages

Interesting series of pages on knowing who your audience is etc. and how to design for them. Recommended

WDVL: House Style Sheet

Style sheet for all the WDVL pages

WDVL: Cascading Style Sheets Resources

Various on-line resources

WDVL: Cascading Style Sheets

Links to tutorials, design articles, and resources

CSS links from About.com

Large collection of links to articles (beginning and advanced), validators, tutorials, etc

Worth browsing!

Includes link to CSS2 properties.

Sidebars on CSS etc. for developers

These tools disappeared from Netscape's DevEdge site, and Mozilla has brought them back into its archi.ves

The archives also have their CSS Central

CSS Validator

From w3c

SelectOracle

Tells you what a complex selector does

Site for Eric Meyer, the great guru of CSS

He wrote the books on CSS (or at least two of the best).

You can also subscribe to the CSS-discuss mailing list. (Click on the ‘Subscribe’ tag.)

CSS Zen Garden

This is the most amazing site of examples of what you can do with CSS.

One page is transformed by over 900 style sheets. (Check the archives.)

These are all done by professional graphic artists – but we can all admire them.

They also have an excellent list of resources.

Daily Fun is similar to Zen Garden – i.e. many stylesheets for one page,

but I like the ZenGarden better.

Another amazing list of CSS resources is at Holy CSS Zeldman!

In addition to many CSS links, there are also links on JavaScript and AJAX.

It seems to be that you can find everything here – tutorials, books, sites,

Galleries at other sites (e.g. CSS Zen Garden, hints, etc.

CSS Princess

Sites about or designed by women.Some are less than fascinating.

CSS Reference table from www.htmlhelp.com

Only CSS1, but a good clear place for a beginner to start

From htmlhelp.com

Other links from that site are available, including CSSCheckup, to check four CSS (1),

A short tutorial on how to link style designations to your html page and

other web authoring tools (some dated – e.g. validate HTML but not XHTML),

and links to specs and FAQs.

www.friendlybit.com

has many articles on CSS, HTML and JavaScript,

including a Beginner’s Guide to CSS, and some simple templates .

Advanced CSS Resources

Lots of good information, including properties, a clear explanation of the cascade, and tables on browser support.

You made need toclick thru lots of pages to get to what you want.

CSS Vista

Tool to edit your CSS in IE and Firefox at the same time.

Demo tool is free.

CSS Tools

Links to a variety of CSS tools and galleries

Since 6/06 this has been put on a wiki, with many CSS items tagged.

CSS Documentation and articles

Many topics and useful resources. Covers CSS1 and CSS2.

A trick/tool for debugging CSS

Examples of well-designed sites and CSS Resources

Many classic resources are here - e.g. CSS Zen Garden, w3c, etc. and many template galleries

New York Public Library Style Guide

CSS Pointers Authoring Tools

Also has information about browsers and XSL tools.

Codestyle.org

A site for developers.

Be sure to check out their XHTML page too, as its FAQs include CSS questions.

Sample layouts:

Layouts for 1, 2, 3, or 4 columns using CSS

Over 50 layouts. Choose the number of columns you want, then the partcular layout, and then download the code.

Templates for lists from Max Designs

Builds the layouts step-bt-step, tutorial style

Layouts from Eric Costello at glish.com

A half dozen classic layouts with code, and links to articles

Layout Gala

40 different layouts you can dowload individually or all zipped together.

Also links to articles on using negative margins and other techniques.

Free templates

A dozen elegant designs you can dowload

Simple templates from Friendlybit

Well, maybe not so simple

CSS Layouts

On-going blog about types of layouts, problems and hacks. Not elementary.

A few basic layouts with explanations

From the always elegant CSS Play

Searchable repository of layouts

Fill in form on number of columns you want, if you want a header or not etc. and template is returned.

Very useful

pMachines templates

Half a dozen basic templates. Display un-styled in older browsers

CSS Showcase

Gallery of very professional looking menus, tabs and layouts; also articles

CSS Drive

Reviewed and unreviewed designs. You need to work a bit to ge to the code.

CSS in Different Browsers:

Table showing which browser support which CSS features

Very useful

What browsers support in CSS and how to Displaying Stylesheets Dynamically

What browsers support what features and links on work-arounds for older browsers

Hacks for various browsers and CSS

This enormous list of hacks also has (near the top of the page) links to sites which summarize hacks.

It also lists various specific (recent) hacks with their effects and the browsers they target.

�This wiki is maintained by CSS-discuss.

The Box Model Hack

One of the oldest and most famous hacks.

Links to Brain Jar's clear explanation, and others.

IE7 and CSS2

Of course, Microsoft didn’t go with the standard immediately.

CSS in Differet Browsers

Long article (current as of 2006) discussing the issue.

No tabular summary, but links to those for current browsers at Webdevout and for 2003 and older browsers at Blooberry

Devout.net

Browser support for CSS and CSS hacks

Fonts commonly found in various browser

Useful chart - so your choices are more likely to nto defualt to the browser's choices

Survey of font usage by broswer

Another useful source

See also their summary.

Equivalent fonts for PCs and Macs

Nice chart makes it easy to choose

to Table of Contents

JavaScript

JavaScript

Documentation for JavaScript

Mozilla�s resources for JavaScript

Not for beginners.

Mozilla�s Core JavaScript 1.5 Guide

Description of the language(if you already know it.)

Mozilla� Core JavaScript 1.5 Reference

Contains information about what is implemented in various versions.

Also contains information about LiveConnect, the way to link Java and JavaScript code.

Changes from JavaScript 1.5 to 1.6

Access page for all Mozilla�s documentation, forums and articles on JavaScript

The w3c documentation for the DOM

The DOM model

From JavaScript Kit

Reference on JavaScript

From JavaScript Kit

w3c on DOM

Documentation for ECMA (basis for JavaScript)

For older versions of JavaScript

Documentation (Guides and References for 1.3, 1.4 and 1.5)

Documentation for JavaScript 1.3 � 1.5 with info on changes from earlier versions.

Links to both the Guide and the Reference Manual

Date object

Documentation on the date object, including constructors and methods.

From here you may actually reach all the documentation on JS

to Table of Contents

Tutorials and Articles for JavaScript

General Tutorials:

HTML Goodies� series of tutorials on JavaScript

First the �Primers� and then the �Basics� (which go thru AJAX)

Mozilla�s �Reintroduction to JavaScript

Friendlier than Mozilla�s documentation

Articles on JavaScript

From Mozilla�s forums

Tutorials and articles from WebReference

Many tutorials from �JavaScript for non-programmers� to AJAX.(Columns 12-15 inclusive)

Excellent resource; includes links to Mozilla pages just above and other collections.

Be sure to check out the collections and the archives.

Some tutorials older � e.g. JavaScript for Programmers from WDVL

Short Description of JavaScript for students who have programmed in C++ or Java

Older, but very useful and to the point

Tutorials and scripts from JavaScript Weenie;

Intermediate level and useful

Tutorial on Functions and Classes

Other tutorials on this site too.

Builder's JavaScript QuickStart Tool

Tutorial

Programmer How-To's

Short introductory tutorials from TUCOWs

Articles on Specific Topics (not advanced)

Focus on forms

The focus() and blur() methods

Local vs. Global Variables

Clearly described; from mredkj.com

Other interesting examples

e.g. to change tables, validate forms, etc.; also from mredjk.com

Special characters, escaping them and Unicode

From Mozilla�s Core JavaScript 1.5 Guide

JavaScript Variable Passing

Passing variables between pages in JavaScript

Beginning HTML at HTML Goodies

Tutorial and code (next URL) for creating a ticker tape in JavaScript

Global and Local

Global and local variables - from Tucows; elementary but reliable

JavaScript Source: Free JavaScripts, Tutorials, Example Code, Reference, Resources,

This site has tutorials, public scripts, book reviews, etc.

JavaScript.com - The Definitive JavaScript Resource: JavaScript Tutorials and Free Java Scripts

Tutorials and fancy scripts. Pretty good.

Programmer: JavaScript Intermediate Tutorial: Image Swapping

Tutorial on image swapping with links to related (and less related) topics.

JavaScriptWeenie

An older site with many articles, tutorials, most of which are relevant for older browsers.

toTable of Contents

Articles on Specific Topics (Advanced)
DOM, DHTML, the Event Model, Cookies, etc.

The JavaScript Event Model - advanced

From WebMonkey. Tells you all you could ever want to know (and maybe more) about event handler models.

Although the article is from Jan 2005, there is a lot of time devoted to Netscape Navigator 4 and IE 4 � hopefully for only a little while longer.

Exception Handling in JavaScript

Advanced. Includes information about browser incompatibilities

The w3c documentation for the DOM

Fetching Remote Data (in XML) from a Server with DOM � advanced

Preloading Images with DOM � advanced

Articles on JavaScript from Builder.com � many advanced

Properly using CSS and Scripts with XHTML

With ex amples

The DOM

Dynamic Drive DHTML Scripts- Preload Image (with progress bar) Script

Pre-loading images for swapping

Dynamic Drive DHTML(dynamic html) & JavaScript code library!

Huge site with DHTML scripts for dazzling effects

Dynamic Drive DHTML(dynamic html) & JavaScript code library!

DHTML Code Samples, www.getElementById.com, get free DHTML Scripts and DHTML Tutorials

Links to many code warriors and sites on dynamic HTML. Searchable but not organized.

Dynamic HTML...Are You Ready to Step Up to the Plate? Part I

Cookies: What they are and how to set them

From the Department of Energy

What Cookies are and how they work

From HowStuffWorks; Be sure to see next page too.

toTable of Contents

Links and Resources for JavaScript

Debugging

Description of JavaScript debugging tools

For all browsers

Mozilla�s tools

Including:

Mozilla site to get Venkman add-on

News and further information

Also, updates on the Venkman project are available.

Using the JavaScript Console

Good introduction from WebMonkey.

Tutorial on Venkman from WebReference

Tutorial on Venkman and list of resources on it

Looks very valuable.

Another tutorial on Venkman

A freeware debugger from Hot Scripts

The Freshmeat debugger

Microsoft�s Script Debugger

JavaScript Trace Window (uses GreaseMonkey in Firefox)

JSLint

Looks for problems in JavaScript pages

Check out the documentation first. This is from 2002.

Other � especially sources of scriptsDebugging
These sites have many useful tools and scripts

SiteExperts.com - Your Community of Site Experts

Another community of web developers

Experts Exchange � another community

Code Library of JavaScript functions from WebMonkey

Dev articles on JavaScript

Enormous compendium of articles, many advanced

Scripts may be found here too, by category.

How to Embed a JavaScript Engine in Your Applications

This is SpiderMonkey and it is available from Mozilla

JavaScript.com

Free scripts � some a bit cutesy; free newsletter

Mozilla�s tools

Mozilla has a large amount of information and tools, including the debuggers, etc.

BrainJar

This is the site that brought you the DOM viewer; tutorials and tools

DynamicDrive

Tools and scripts and links; focus on DHTML

JavaScriptKit

Tools, tutorials, scripts; quite up-to-date, including material on AJAX etc.

DHTMLShock

scripts with a focus on DHTML

Cross-browser

Scripts and articles on cross-broswer JS and DHTML using the DOM

Moo.fx for special effects in JavaScript

Graph-it from raw data in JavaScript

Protoype library of JS, including AJAX functions

The overview is a good place to start.

The latest version is also open source

An introduction is also helpful

Protoype Documentation is also available at script.aculo.us

The site for the Moncur JavaScript text.

WebStandards.org

A self-described grass-roots organization trying to advocate for Web standards which ensure accessibility

WebDeveloper

Hosts many forums, including one on JavaScript

Sitepoint has a forum with many useful links, as do the publishers WROX (programmer 2programmer)

and APress,

CodingForum,

and Tek-Tips.

Evolt

Also maintains a list.

Yahoo maintains links to similar sites

and a Developer Network.

My experience is that similar Yahoo lists have a goodly part of the top resources.

The FAQts on JavaScript

Huge site with answers to many JS questions, by subject.

Site does not work in Netscape, but does in Firefox and IE

 

to Table of Contents

Web Services