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)
> 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:
- Tips for HTML5, part 1
- Tips for HTML5, part 2
- HTML5: Tags we won’t see anymore
- HTML5: New tags
- HTML5: A closer look at selected tags
- 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
- Do not rely on the WYSIWYG (“design view”) mode of any editing program. This makes you stupid, not smart.
- Always write your HTML and CSS by hand so you know exactly what you are putting in there.
- 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.
- 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:
- 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.
- FireFTP: The easiest way to upload and download files between your computer and your host Web server.
- 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.
- MeasureIt: A quick way to determine the width, in pixels, of anything on a Web page in the browser. Great for design troubleshooting.
- ColorZilla: Use an eyedropper tool to instantly get the hexadecimal code for any color on a Web page.
- 50 Useful New jQuery Techniques and Tutorials (Smashing Magazine, 2009)
- jQuery Tutorials
- jQuery Tutorials for Designers
- Ajax: A New Approach to Web Applications, by Jesse James Garrett (Feb 18, 2005)
Big list of helpful sites
Tutorials Round-Up: Ajax, CSS, PHP and More, from Smashing Magazine (Jan. 26, 2007)