Journalists' Toolkit

Icon

A training site for multimedia and online journalists

HTML and CSS Resources

By Mindy McAdams Updated 20 Jan 2011

HTML Dog is a great site for finding answers to your questions about HTML and CSS. It provides tutorials for every level, from beginner to advanced. If you patiently work through the HTML tutorials in order, you will learn the proper way to code Web pages.

> HTML Basics (here at Journalists’ Toolkit)

W3schools has a very nice CSS reference. Note that there is serious disagreement with that statement. So you may want to go to HTML Dog for CSS too.

> CSS Basics (here at Journalists’ Toolkit)

Do you understand the doctype and how to use it? You should! Are you specifying the correct character set for use on your Web pages? See: Top Lines in HTML and CSS (here at Journalists’ Toolkit).

What about HTML5?

HTML5 is the next big thing in Web design and content markup. We need to get ready for it. I wrote a series of blog posts about it — Tips for HTML5 — in May 2010:

  1. Tips for HTML5, part 1
  2. Tips for HTML5, part 2
  3. HTML5: Tags we won’t see anymore
  4. HTML5: New tags
  5. HTML5: A closer look at selected tags
  6. A look at CSS3

Here are three simple HTML5 examples where you can view the code.

Web page editing programs

The nicest professional editor, in my opinion, is Dreamweaver. I have been using it for many years. (Most journalists have no need to use a Web editor, however. They will be working in a content management system.)

Alternatively, there are a number of free and open-source Web editing programs today:

  • Nvu (pronounced N view): Windows, Mac or Linux
  • Amaya: Windows, Mac or Unix
  • KompoZer: “KompoZer is based on Gecko, the layout engine inside Mozilla; it’s a super-fast, very reliable, standards conformant engine maintained on a daily basis by a wide community of developers.” Windows, Mac or Linux

If you do not know how to upload files to a Web server, see this FTP tutorial.

How to use a Web page editing program

  1. Do not rely on the WYSIWYG (“design view”) mode of any editing program. This makes you stupid, not smart.
  2. Always write your HTML and CSS by hand so you know exactly what you are putting in there.
  3. To test your code, open the page in at least two different Web browsers. Only a current Web browser will show you what the code is really doing.
  4. Use the built-in file and site management of your editing program to keep your local files in perfect sync with the live site on your Web server.

Firefox and add-ons

Among the many things that make Firefox far superior to Microsoft’s Internet Explorer is the ability to enhance it with free add-ons. These little programs download and install painlessly from the Firefox site itself.

These are my favorite Firefox add-ons for Web work:

  1. Web Developer toolbar: Adds almost everything a Web designer or programmer needs to inspect pages: See the CSS, the HTML, the Javascript; turn images on and off; outline CSS elements to figure out how pages were built; validate in two clicks.
  2. Firebug: The few tasks that the Web Developer toolbar can’t do are handled admirably by Firebug, which allows you not only to view code but also to edit it.
  3. FireFTP: The easiest way to upload and download files between your computer and your host Web server.
  4. Pearl Crescent Page Saver Basic: An easy way to get a screenshot of a Web page; you can choose to grab the entire page, including what is not visible outside the viewport.
  5. MeasureIt: A quick way to determine the width, in pixels, of anything on a Web page in the browser. Great for design troubleshooting.
  6. ColorZilla: Use an eyedropper tool to instantly get the hexadecimal code for any color on a Web page.

Intermediate/advanced resources

After you are comfortable with HTML and CSS, it’s time to think about learning some JavaScript. A good place to start is Google’s Introduction to JavaScript video, on YouTube. It explains what JavaScript is and what it’s used for on Web pages.

Big list of helpful sites

Tutorials Round-Up: Ajax, CSS, PHP and More, from Smashing Magazine (Jan. 26, 2007)