Basics of HTML

Resources

Specifically Styles penguin

Cascading Style Sheets: latest news from W3.org

CSS Beauty: sample sites with good design, tips, a forum, etc.

CSS Layout Resources & Information: links to CSS references

CSS Play: Experiments with CSS: layouts and demos

CSS Zen Garden: submit or use creative commons designs

Dynamic Drive CSS Library: tutorials, examples, etc., including CSS3 effects

Hands On CSS: free layouts and resources

Learn CSS Layout: very clear and helpful layout hints

Mozilla Developers' CSS Reference: reference and links to tutorials

Accessibility & Validation

Accessibility Evaluation Resources: W3.org's overview

Anybrowser Pages: links to sites & information concerned with cross-browser compatibility

CSS Validation Service: tool provided by W3.org

usability.gov: advice on making websites user-friendly

Software

Nonags: free evaluated software

Tucows: free and inexpensive software

Colors & Graphics

ColorHexa: color information & a matching color generator

ColorBlender: tool for generating custom colors

ColorSchemer: easy way to get harmonized colors

line

abcteach.com: clip art for teachers

Boogiejack: graphics & tutorials

Classroom Clipart: large graphic archive for students & teachers

Clker.com: public domain clip art

Creative Commons: search collections of royalty-free images

Dynamicdrive: source of free galleries, generators, scripts, etc., plus demonstrations & tutorials

IconArchive: graphics archive searchable by subject

Morguefile.com: collection of freely-usable photos

Openclipart.com: free images

Photoeverywhere: Creative Commons collection of photos from around the world (especially UK)

Pics4Learning: free photo archive for teachers and students

Pixabay: very high-quality photos free to use through Creative Commons

Realm Graphics: one of my favorite graphic sites for icons

Soundtransit: creative commons gallery of sounds

Unsplash: quirky Creative Commons graphics

References, tutorials & toolsbooks

Boogiejack: articles, tutorials, and graphics

Color Schemer: easy way to get harmonized colors

Dynamicdrive: source of free generators, scripts, etc., plus demonstrations & tutorials

Experiments in Web Programming: scripts and tutorials

HTML Code Tutorial: tutorials and a forum

HTML Entities Reference: complete basic set of character entities

HTMLGoodies: articles & forums on a variety of subjects

mjdwebdesign: instructional videos channel

Quackit Tutorials: tutorials & references on a variety of subjects

St. Mary's Web Development links

Tizag Tutorials: tutorials and references

Uncle Jim's Web Designs & Tutorials: tutorials and useful tools such as generators for buttons, etc.

W3Schools: tutorials & references from the most official source

Web Development in the Classroom: Web Site Building for Kids: collection of links to tutorials and websites to help students and teachers with web page production

Web Developer's Handbook: voluminous tutorials, references and tools

Web Design Group: some articles are dated, but still has lots of good information

WebmasterWorld: forum on web design topics

Getting to HTML code

It can be very useful to view the code for a page on the web with features you like. In Firefox and Chrome, you can just type <CTRL> U and see the code.

NOTE: many complex web pages use Java, Javascript, and other programming languages that will look very intimidating in the code. Especially for beginners, only use the View Source options on the simplest of pages or you'll be overwhelmed, and for no reason. Because you don't really need all that programming to make web pages that still can convey complex messages!


Many Rich-Text Editors (like the one used to make LibGuides) have a toolbar with an HTML option like this one:

text editor bar

Even Blogger has an "Edit HTML" option that I use all the time when I want to get things just right in my blogs:

blogger screen shot


Grabbing Graphics

It's easy to download images from the web, although it's not always an ethical thing to do.

To copy an image from the web, simply right click when the cursor is on the graphic, and choose "Save image" or "Copy image," depending on your browser.

An image downloaded from the web is of course already in a browser-compatible format. Just be sure when you save this "borrowed" image that you keep the extension of the filename (probably .gif or.jpg) the same, even if you rename the file. It's also nice to give credit to the source of the graphic.

star

To avoid copyright issues, or other breaches of ethics, copy images from a clip art web site, Creative Commons site, or some other site where content is freely available, rather than from commercial sites.

Last updated:

Back to kathyamen.net