HTML Resources - Lisa L. Spangenberg

There are lots and lots of resources for HTML and CSS on the web. These are just a few. Probably the best “single site for everything” is this one at W3Schools.

Free HTML Editors

There are many commercial and shareware HTML editors on the market. They fall into two central types; WYSIWYG or What You See Is What You Get, with buttons you click to create pages and insert tags. These are often useful later, but you’re learning to click buttons rather than actually learning to create pages with HTML. The other sort of HTML editors are text editors; you actually see the tags, and usually even type them. You don’t really have to have a special piece of software to write HTML or to create very complicated pages; all you really need is something that you can save a plain text or ASCHII file in (be sure to name the file with “.html” or “.htm”). “SimpleText” or “TextEdit” on the Macintosh and NotePad on Windows will both do quite well. But the following are free applications that have some extra abilities in that they are designed to work with HTML, to some extent.

Arachnophilia for Windows and Mac OS X: This is really a nifty little piece of software. It’s got built in support for HTML—you can do an awful lot just by clicking and pointing, and it’s got some very good built in Help. It also has a simple to use but quite effective macro language so you can add HTML tags that it doesn’t already support. This is the editor I use on Windows. It’s “Care ware,” which means you have to stop complaining about things for a bit, and maybe even smile. The current cross platform version of Arachnophilia is a Java applet; you can still download the older Windows only version here. Some users prefer it.
BBEdit Lite for Macintosh: BBEdit Lite is a cousin of the more robust, and powerful text and HTML editor BBEdit. The Lite version doesn’t include the fancy HTML palette in the full version, so you have to type the tags, but it does have some very fancy search and replace features, and can covert “smart quotes” to typewriter quotes, and vice versa. It’s the editor I started with.
TextWrangler: TextWrangler is a very fine text editor, based on the excellent BBEdit Pro for Mac OS X, but lacking the sophisticated HTML tools and palettes. It’s a good choice when you’re starting to learn HTML.
Nvu: Nvu is a free HTML editor with a GUI; it’s an opensource Mozilla project, and it’s available for multiple platforms. As of April 2005, it’s still an advanced beta.

The Easiest HTML Guide for Beginners: This is a very simple, basic HTML tutorial. It’s a good “crash course.”
HTML Primer: This is a seven lesson introduction to HTML, starting from the basics, and introducing the essential tags, placing images, links, colors. It includes simple explanations of tables, and yes, even frames. The lessons are well organized. For the more adventurous, there is even a short introduction to Java script.
A Beginner’s Guide to HTML: This is a fairly good overview, but it is based on an older HTML, version 2.0, and there are some differences. It is still a useful guide of “low end” tags that even older browsers support.
Writing HTML: A Tutorial for Creating Web Pages: This particular tutorial, from the Maricopa Center for Learning and Instruction, at Maricopa Community College, is designed to be downloaded and worked on off line. It’s particularly useful for those who like to work off line. All the files and the instructions, are there. There are links at the bottom of the page to HTML tutorials in Spanish, Japanese, Icelandic, Italian, and Korean.

Lists of HTML Tags

WebMonkey HTML Cheat Sheet: I often use this short glossary of tags and what they do as my personal cheat sheet when I’ve forgotten the tag I need. Notice the handy links to other resources on the left margin of the page.
The World Wide Web Consortium: The W3 is the official standards organization. The current standard is HTML
4.0.1, though it’s probably best to keep
3.2 in mind
for the time being, since many people are using older browsers. XML, the next generation of HTML, is
here
too.

HTML Entities—Accented and other Special Characters

HTML Entites Table: This page shows the HTML entities for the most common accented characters in Western European languages, and the special typographic characters that you’re most likely to need. Notice that each tag begins with an ampersand and ends with a semicolon.
ISO Latin-1 Character Entities: This table shows the tags, in the form of an ampersand, an abbreviated description of the special character, and a semicolon, that you insert in your text so that browsers display the correct characters.

CSS

: This is a simple but good introduction to creating both your first HTML page, and using CSS for the first time.
Bare Bones, No Crap, CSS Text Control Primer: Wendy Peck’s very straight forward introduction to the basic things to know in terms of actually using CSS with text. One of the virtues of this tutorialis it’s just dealing with text— the stuff you generally need to know right at the start.
Westciv’s Complete CSS Guide: This is a very thorough but very well guide to CSS. The site is a bit intimidating at first so you might want to start with the tutorial. Westciv sells an HTML/CSS editor but you can use a text editor with the tutorial just fine. There’s a tutorial index for all their tutorials here.

Web Style Guides and Accessibility

UCLA’s Disabilities and Computing Program Web Accessibility Guidelines: This site has a number of useful links about what “accessible” means. Patrick Burke of DCP is willing to evaluate web sites for accessibility.
The Web Style Guide: Although this guide from Lynch and Horton covers basic principles and “Common Sense” guides, don’t underestimate its applicability. There’s a lot of good advice here about designing a web site, including suggestions about the design process and advice about navigation. It provides some useful pointers.
W3C Style Guide: This is a the “official” style guide from the organization that governs the standards underlying the web. Parts of it are a bit outdated, but it’s a good concise starting place in terms of what style means on the web, and the issues to think about.
Zen and the Art of Web Sites: This site is one person’s guide to good style and useability on the web. It’s worth taking a look at, even if you don’t always agree with the author.

HTML Tables

When HTML was younger, tables were used not only for presenting tabular data, but as a way of controlling the layout of the page; this was not the original intent of the HTML table tags, and, once CSS became a viable tool, a sort of religious war broke out. Tables are not bad; they’re perfect for presenting tabular data, but there are better ways of controlling page layout and design in CSS, particularly div and span tags. Here’s a good discussion about CSS and Tables.

HTML Tables: This is the first part of a five part series on Tables. The second lesson is Tables 2: Alignment, Colors and more, the third lesson is on Tables Within a Table, and the fourth exposes the dark magic of The 1×1 Pixel Image Table Trick. Some of the later material is outdated, given the abilities of CSS.
Table Basics: This is a concise overview of the possibilities of Tables, but it covers just about everything.

HTML Colors

Web Monkey Guide to Colors: A convenient chart showing color swatches with numeric tags. You can find the swatch you like, then just copy the number.
Guide to Using Colors in HTML: This page from the University of Texas shows color swatches for the various hex coded HTML colors.
216 Web Safe Colors: This color swatch page has two special qualities; it only shows the 216 “browser safe” colors, and you can switch from displaying the HTML code for a color you click on to the “decimal” or RGB notation for a clicked on color.
Visibone Color Chart: This page is in part an advertisement for various charts showing HTML tags, including color tags. But there’s a nice chart of the “web safe” colors, arranged by hue, showing the hex codes, and there’s even one you can download and print. You might also take time to glance at the information about color blindness and using colors.
ColorCombos.com: This site offers help with choosing colors that will combine well. You can choose colors, then see how they’ll look on a page, and even generate a template with the hex codes for the background, header, sidebar, content and footer sections.

How to use Background Art and Images

Local background images: These are small images on the Humnet server for use as “tiled” backgrounds. Don’t download the image if you’re using a server at UCLA, just locate the one you want to use, then copy its URL into the BODY tag, using BACKGROUND=”your url here”. Look at the source of this page for an example. If you’re not using BOL or Humnet, then save/download the image to your drive, in the same folder or directory as your web pages. Often if you’re creating a site, it’s best to have a media or images directory where you put all image files. Make sure you have the correct “path” or URL to the image by checking to see if the background shows when you go to the page on the web.
GIF or JPEG for the Web?: This is a short tutorial with simple examples and explanations about when and why to use GIF or JPEG file formats for web images.
Make your own Favicon: This site will generate the small icon that appears to the immediate left of the URL in the Web browser’s address bar, deriving the favicon from an image file you submit.

HTML Frames

Using Frames: This is the first part of a part series on frames. It’s followed by Frames Two: Linking and Attributes, then Invisible Frames and a tutorial on Using Inline Frames, and ends with a short tutorial on Changing Two Frames at Once.