HTML and Web Development

Colors and Backgrounds

216-Color Webmaster's Palette Laboratory by VisiBone Ghatten calls the Color Lab "the best 'color picker' on the web". All colors arranged symmetrically by hue to select swatches and see how they look together (up to 8 at once). See online Color Codes info. color code chart and Swatches for many graphics programs. Poster color reference is wonderful to have close by! (L-2)

Color Worqx Color Theory Tutorial Overview worqx.com Wow, thanks KOT for telling me about this wonderful color tutorial! Stay to the end to create a composition based on the information with her color picker (Fri Feb 3 2012 since Sun problem loading page message "connection was reset" so is probably temporarily unavailable. NOT getting there. Try again soon,)

About Color/Calla's Spot no longer online. Computer primary colors are red. blue and green rather than the traditional red, blue and yellow artist's color. Secondary or complimentary colors are cyan, magenta and yellow instead of purple, orange and green. Lead to explanation of artist pigment and scientific light frequencies and color wheels.

Color Wheel Pro - a program that allows you to see color theory in action: you can create harmonious color schemes and preview them on real-world examples. (PC) Articles related to color include Color Theory Basics and Visual versus Mixing Color Wheel (L-2)

BrowserSafeColors table by dotParagon to more accurately judge the color. My choice as one of the first to try for choosing as it is easy to see all of them. (L-2)

Causes of Colors - Why are things colored? three causes — beautifully designed and illustrated. one of several exhibits in the WebExhibits online museum, all of which promote discovery through multidisciplinary approaches that support all learning styles.

Color Blender Pick color format (RGC, HEX, %), two colors CSS safe, and blend/mix. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors.

Color Fidelity and Gamma from WPDFD taming the electronic page.

How Colors of a Room Influence Mood Students found this site and thought it would be a great link to add for my visitors. Think you will agree. Also has color of psychology references.

ColorMaker and JS version Try different color combos online with a sample page or for your web page or your background. (L-2)

6X6X6 Color Palette Clickable Map Netscape supported colors. Victor Engel's browser safe colors. (L-6)

Color Meaning from Color Wheel Pro

Colour Palettes from WPDFD on creating a harmonious palette using a nature photo. (L-6)

Computer Color Matters colormatters.com and Color Matters in general. Excellent information. (L-2)

dithering - a whatis definition search other technical terms as well (L-2)

HTML Hex Color Code Conversion Rob from 831 explains how to convert using Windows scientific calculator. (L-2)

HYPE's Color Specifier for Netscape v.3 Colors with name, RGB and #color code (L-2)

Monitor Gamma Robert Berger explains why images appear darker on some displays.

Netscape's 216 colors from Barta's web page tutorial describes computer displays and why you might not get color you want. added note that not as relevant today

Non-Dithering Colors in Browsers classic article, Browser-safe color palette with swatches and codes by Lynda Weinman. Save both and open them in your graphics program. (L-2)

RGB Color Charts for HEX and Decimal to save. Read Doug's Thinking Hexadecimally (L-2)

Color Definitions stay for Doug's easy to read reference - hue saturation, hue and more

Color Terms from Color Spot at HTML Station (John December). Shades

RGB-2-Hex Tool Univox's online conversion of RGB color values to hexadecimal triplets. (L-2)

valcasey.com . Color Theory Notes on Visual Interaction and Design discusses choosing colors to communicate messages and experience. (L-2)

A Quick Color Explanation nice discussion of primary and hex additive color mixing. (L-2)

Websafe Colorizer RichInStyle.com Click a web-safe background and see how it looks with all the web-safe colors as foregrounds with text

Website Tips for Designers - Color color charts, articles, tutorials, resources about color and color blindness. Color Psychology, Meanings, Color and Design. (L-6)

World of Color Dmitry's Design Lab April 1997 starting with color wheel

online tool Color Scheme Designer Not websafe colors, but fun to try and see results

Color Palette Generator Enter the URL of an image to get a color palette that matches the image.

Background Resources

Most clipart and graphic collections have background graphics

Backgrounds and Borders listed by about.com (L-2)

How Background and Border Graphics Tile A must read! (L-2)

Graphics and Web Tools

Use of ALT texts in IMG tips for meaningful use of alternative text with graphics. (L-5)

All Free Original Clipart also has links to helpful information. A-1 Icon Archive

BigNoseBird.Com's Graphics Usage Page the "skinny" on jpeg and gif. My favorite for explaining the differences with tips. (L-3)

Banner Generator Make one for your web page. (L-3)

Clip Art Searcher search forms optimized to find graphics files. Google Advanced Image Search is another.

Clipart.Com Subscription fee to use royal copyright collection. (Was called ArtToday)

Cool Archive Free Clip Art and Fonts - clipart, fonts, graphics, icons, animations, backgrounds, arrows, sounds. Logo generator and button maker also. (L-3)

CoolText.com - Where YOU make the image!! Create graphics, logos and text in a variety of styles, fonts and colors online. (L-3)

Creating Effective Web Sites for AOL Users Why you need to uncheck "Use Compressed Graphics" for Web Graphics in AOL Preferences. (L-3)

The DepARTment Store Graphics from Ann-S-Thesia's GIFShop requires a link for using the graphics (old L-3)

FlamingText: Free online tool for generating custom webpage graphics and animations (L-3)

Foto Search Stock Photography Features over two and a half million images and royalty free photos from more than 150 top publishers.

GIF, PNG, JPG. Which One To Use? web graphic file formats with examples

Graphics 101 basic image and file format concepts with examples, hands-on how-to guides to six of the most common tasks involving images.

Graphics Formats for the World Wide Web (L-3) PNG JPEG

GIFBot NetMechanic Image Size Reduction and Optimization free gif (includes animated) and jpeg shrinking online. (L-3)

Online Image Converter supports many file types and targets, GIF and JPG

Online Image Editor Free to convert image formats, create special effects with any GIF or JPG including resize, crop, colorize, optimize, and more. Use Help to guide you.

Gif Transparency Creating in Paint Shop Pro from Laurie McCanna's Tips and Tutorials

Graphics Ring - For all your free graphics needs! nice variety

htmlhelp.com WDG FAQ: Images tip to prevent that little "tic" mark (extra underscore) when using linked images (L-3)

HTML Image Tips techniques to minimize image transfer time. (L-3)

IconBazaar images displayed by categories. Subscription to access.

Icon Browser Lots are there with a search engine to find them.

K-12 Clipart & Graphics Sites Gina annotated

Media Link's Free Graphics! original graphics, GIF animations and AVI animations.

Windweaver Best Image Sites Free Clip Art, Web Graphics, Image and Stock Photography Web Sites—"Not just a list of links -- but the BEST!"

So You Want a Thumbnail Image, Huh? Joe Burns htmlgoodies.com prior (L-3)

So You Want To Align Text, Huh? to wrap around images

A ShortCourse in Sensors, Pixels, and Displaying Images how PIXELS relate to image sizes when displaying, printing, and scanning digital images. A must use Pixels and Image Caculator, and Scanning Calculator to download in excel spreadsheet format, pixelcalc.xls scancalc.xls

Thumbnail Images As Hyperlinks Otter gives information and examples for resizing, reducing and reformatting graphics, including animated gifs. (L-3)

Web Page Thumbnails - how to keep them crisp Reduce images by exact integral amounts - a half, a quarter, an eighth, etc. for less distortion. (L-3)

Transparent Gifs making them in PSP 5 is different from earlier versions. Thanks to Joe Cilinceon for allowing me to host his tutorial. (L-3)

How to create a good favicon that image that appears at the left of the web address bar of internet browsers. Use getfavicon.org search engine to learn more and find tips.

Transparent Gifs using Mac with GraphicConverter. (L-3)

TransWeb Transparent-GIF Service Give the URL of the image and the value of the color you'd like to transparentize online. (L-3)

"WebFX" - The Web Graphics Tool Online graphics manipulation tool to apply effects to any image. (L-3)

The Wizard of Draws' Graphic Treasury! Jeff designed original cartoon graphics for sal.

Xara Online free to create graphical text, headings, buttons online. Free trial or join for other features. (L-3)

Graphics and Image Manipulation Software

Completely Free Software - Windows 9x Graphics Programs.

GIF Construction Set PC shareware to make animated gifs. (L-3)

GifBuilder Mac software for making animated gifs, Yves Piquet (L-3)

GIFConverter shareware for Mac (L-3)

Graphic Workshop for Windows Shareware (L-3)

GraphicConverter shareware for Macintosh. (L-3)

Graphic and Image Tools - Group 42, Inc.Group Windows image viewing and graphic software, shareware (L-3)

LView Pro Home Page Download shareware version image processing program. (L-3)

MacShare.com || Graphic'ware (L-3)

Paint Shop Pro at Corel was JASC Great program for editing and creating graphics. PSP also comes with a gif animation program. (L-3)

IrfanView Free image viewer and converter for Windows. Can convert to .ico (L-3)

ShoeString's PictureDicer Windows freeware tool chops image into smaller images and generates code to display so they appear as uncut original, nice for "fake" imagemaps. (H2 1)

Picasa Free automated Image organizer from Google. Edit, crop, enhance, create slideshows. PC and MAC (L-3)

ThumbsPlus for PC makes it easy to create thumbnails of your images.

Photo Resizer - software from Show Your Photos Resize photos, especially useful for creating thumbnail images. Free trial pro or donation free version (L-3)

Free Stuff - CoffeeCup Software free PC Image Viewer, others are free trial downloads and new programs MAC and PC (L-3) (H2 2)

The Plugin Site - Free Graphic Tools Adobe Photoshop plugins and plug-ins, filters and effects for Paint Shop Pro, Corel Photo-Paint, Adobe Premiere for MAC and PC (L-3)

Microangelo trial version create/edit icons for favicons

Graphics and Multimedia Reviews freedownloadscenter.com reviews freeware and shareware

SnagIt - Printer Capture PC and Mac trial Rollie's favorite

Download Free Graphic Tools at SnapFiles (L-3)

Graphics Tutorials and more graphics resources

Tutorials for Paint Shop Pro and Photoshop and resources and tips for choosing the best format, jpeg or gif, preparing graphics for the web and fonts. Information about animated gifs (the tutorials tell how to make them transparent also), image maps and scanning

Editors

Basic Text Editor

For learning HTML, use a basic text editor like Notepad (Windows) or SimpleText or TextEdit (MAC) to actually type in the HTML tags and contents for your HTML document. Save your file as text only with the name followed by .html or .htm extension instead of .txt and open the file in your browser to view it. To upload the page to your ISP, use the name like index.html or .htm required by your ISP for your first page or front door. BigNoseBird.com's First Impressions Page: Why your main page matters most. This process of obtaining a working knowledge of HTML should make it easier to choose and use an editor in the future. WYSIWYG vs. Hand Coding, the Great Debate presents reasons for using both. Webdesign.about.com article HTML Editors how to choose and evaluates best and worst software for PC, Macintosh, Linux/UNIX. Mainly I use one like a text editor with the advantage of color-coded tags and line numbers to make it easier to view my code and test. TextWrangler free for Mac. CSE HTML Validator Lite for Windows - FREE HTML Editor and Syntax Checker for Windows

Extras

whatis.com Online Computer Dictionary and IT Encyclopedia common internet/web/tech terms. (L-1)

Webopedia: Online Computer Dictionary for Computer and Internet Terms and Definitions (L-1)

Hyperlinking: linking from one page to another (L-2)

Naming Files & Understanding URLs (L-2)

Internet Research - Understanding URLs (L-2)

HTML Basics: Style and Structure File Directory Guidelines has tips to organize your files using subdirectories. Create an index.html for each one. (L-2)

The Web Diner Tutorial for Understanding Paths, URLs, and Links Nice explanation of "absolute vs. relative URLs" and how to code links in your HTML documents. With relative links ../ in the HTML tag tells the browser to go up one directory level.(L-2)

Public Domain Images photographs and images safe to use on your site, when to ask for permission, legalities, resources to find them.

10 Big Myths about copyright explained (L-3)

FindLaw Legal Subjects: Intellectual Property and Copyright (L-3)

What is Copyright Protection? (L-3)

Copyright Clearance Center Online helps organizations comply with U.S. copyright law

Copyright Website - Websites Ownership of Text, Graphics, Script, Data and Code as well as other considerations with lots of information to explore on this site.

The HTML Writers Guild organization to join with resources and mailing lists. (L-3)

A List Apart: 10 Tips for Writing the Living Web article by Mark Bernstein

Writing for the web another take by Dave Riches

The Trouble With EM ’n EN (and Other Shady Characters) Hyphens are not dashes. Sheerin's online typography tips on A List Apart (ALA)

HTML Symbol Entities see section Other Entities Supported by HTML.

NONAGS Lots of editors and other free or shareware to download too.

WinPlanet Windows Software Reviews and Downloads used to be Stroud's Consummate Winsock Apps List

timeanddate.com excellent online World Clock - Time Zones to get current local times around the world, customize for your needs, search for time by city or region. Fixed times calculator and meeting planner. Calendars. (L-1)

Tucows shareware site. HTML accessories, graphics programs, etc. for pc and mac. (L-3)

Download.com - Free downloads, shareware, and more CNET for MAC and PC

Webgrammar's free tips Common mistakes, grammar basics and online resources in the Writing Center.

Common Errors in English Use the errors list when you are not sure of the correct word to use. (H2 5)

Virtual University VU offers inexpensive online classes on a wide variety of topics. (L-1)

Checking Your Pages

Dr. Watson online HTML analysis to easily check your pages. Catch little mistakes like extra or missing closing tags, typos in tags, verify code, links and spelling. (L-6)

SiteReportCard: Web Site Optimization and Promotion Tools Easy to use code check, even finds missing quotes, characters needing special character code, link checks, search and meta tag suggestions

WebSter's Dictionary 2.0 is really gone Goldendome site. I am sorry because you could spell check your web pages online, ignoring your html tags.

NetMechanic HTML code help - check tags and links. Be sure to recheck any links not found as sometimes they are not available because of server problems or the author is changing things. Even a week or more later they might reappear or do a search to find a new location. You will still want to periodically check links by hand. (L-6)

Linkrot (Alertbox June 1998) (L-6)

Validation resources from the HTML Writers Guild. (L-6)

W3C HTML Validation Service checks for a variety HTML standards. Remember to check the box Show source input. (L-6)

W3C CSS Validation Service (H2 5)

ANYBrowser Web Site Viewer to see your site as others might by selecting the HTML Compatibility level.

The WDG's Links to Validators (L-6)

OnlineWebCheck.com - FREE Online Web Page Checking Service a little stricter

Lynx Viewer and html2txt was lynx-me, approximate how your page looks in text-mode web browser. Gerald Oskoboiny

Web Page Backward Compatibility Viewer (L-6)

AnyBrowser.COM - Screen Size Tester Test MAC and PC views for most browsers as well as defaults. (L-6)

Web Page Monitor Tester see your page at different screen resolutions for MAC and PC, Steve Younis. (L-6)

Web Page Purifier shows what your site looks like using various standards of HTML and also in webtv. (L-6)

Google Thanks to Susanna for the tip to use it when searching for sites that are down. The latest cached version might contain information that will help you track down what has happened to a link.

CSE HTML Validator Lite - FREE HTML Editor and Syntax Checker Customize options, be sure to close optional tags. (L-5)

Internet Archive Way Back Machine archive.org Lost your favorite web page? Look to see if it is archived here.

Web Hosting Pages and Uploading Information

TopCities.com Free 500 MB, Allow FTP as well as online EasyUpload utility. Will delete site if no activity for 90 days. (L-1)

Tripod free 20 MB web site, 1 GB bandwidth, ad supported(L-1)

BigNoseBird.Com's Homesteading Page- Where to stick your site for free! Bruce's recommendations review free hosting services that also support cgi scripts, some allow business sites. (L-1) (H2 2)

Yahoo! GeoCities - unfortunately no longer hosts free Home Pages. Many learned and created sites there

Netfirms web hosting small business no longer free

HostIndex.com Web Hosting Directory Lists places with info about the services. (L-1)

Web Hosting Directory - HostSearch.com (L-1)

hostcompare.com's Search for Free Web Hosts (L-1)

http://www.thefreesite.com/Free_Web_Space/ (L-1)

Understanding Bandwidth, Transfer Usage and Hosting Dave's Website Design Tips and Tutorials

Web Page Design With AOL Tips to upload your page from VU class members. (L-1)

Whois search at InternNiC WHOIS search for registered domain name information

Better Whois: The WHOIS domain search that works with all registrars Tips and information also (H 3)

InterNIC | FAQs on the Domain Names, Registrars, and Registration Check back for updates. ICANN

Domain Registration > International TLD Registry Operators listed by Yahoo Directory (H 3)

NameSecure: domain name registrar .com. net .org .biz .info. Register/renew domain names, manage account information online. Can also transfer and manage domain

GoDaddy.com another place to register/transfer existing domains and manage your domains, inexpensive and rated as reliable

Nominet registry database .uk domains

The benefits of domain consolidation (H 3)

DNS Stuff: DNS tools, WHOIS, tracert, ping, and other network tools (H 3)

Accessibility:

Web Content Accessibility Guidelines 1.0 W3C proposal. (L-6)

Web Content Accessibility Guidelines 2.0 (L-6)

Comparison WCAG and Section 508 Web summary (L-6)

Designing from the user perspective challenges and solutions for visual, hearing, motor, cognitive

Web Accessibility Toolbar for browsers and other helpful tools bt WAT-C

UI Access | Accessibility Resource Links Government Laws, Regulations, Policies, Standards, and Support (L-6)

Web Site Development Information, Good Site Design Practices extensive listing of resources and tips to create pages "accessible to the widest possible Web browsing audience." (L-6)

Viewable with Any Browser: Accessible Site Design Guide (L-6)

More Accessibility Resources are listed in this section of my pages.

Evaluation of Free Accessibility Evaluation Tools

A-Prompt (Accessibility Prompt) Web Accessibility Verifier - software tool designed to help Web authors improve the usability of Web pages created in HTML format. Windows 98/98SE/2000/Me/XP (L-6)

Accessible Information Solutions - Web Accessibility Toolbar IE Developed for Internet Explorer to help developers assess many aspects of a Web Page that impact on accessibility. Also WAT [For Opera] (L-6)

HTML5: Techniques for providing useful text alternatives draft W3C

Sound and Multimedia

JavaScript and Java Resources

MORE Web Page Resources

Find more resources for mailing lists, magazines, newsgroups, web page design and style, DHTML, Style Sheets, CGI, Forms, free counters, forms and guestbooks without CGI access, promoting your page, metatags, more accessibility links, advanced topics and more tips.