Register for Product Donations
New here? If you'd like to participate, join us. If you're already a member, log in.
javascript disabled
Close this Window
New tech articles, discussions, offers. Weekly.
Get our latest product info. Bi-weekly.
Sharpen Your Website! Throughout the month of May, TechSoup is sharing a variety of resources on web design and development for nonprofits and public libraries.
One of my first summer jobs as a teenager was helping a local business with some edits to its website. On my first day, my new boss explained the basics of HTML (Hypertext Markup Language), writing HTML tags on a legal pad as he went along. Even in the early 1990s, the idea of teaching a computer language on paper seemed funny to me, but I kept that page all summer, adding new tags to it as I went along.
If you don't have technical background, editing your organization's website — even to make a spelling correction — can be a daunting task. You might not be able to develop a new website by yourself, but once you teach yourself the basics of HTML code, you can edit and update content without having to get help every time from your technical staff member or volunteer.
I've lost my old reference sheet, unfortunately, but here's one created by Leslie Franke that covers the basics just as well as mine did (site seems to be down; see alternate link in the comments). The sheet explains basic page formatting, links, fonts, tables, and other concepts. It doesn't cover more advanced web development, but it's a good start. For more information, check out this video tutorial on HTML by Google:
It's possible that you're asking, "Why do I need to know all of this? I use Expression Web and Dreamweaver to build my website." Those HTML editors are great (and both of them are available through TechSoup!), but sometimes pages don't show up in-browser the way you intended them and you need to refer back to the code. If you're bored sometime and want to see hundreds of examples of people relying too heavily on an HTML editor, try Googling "untitled document."
It's also possible that you're asking, "Why do I need to know all of this? My website is built in Drupal." Web content management systems (CMSes) are also great, but as anyone who's used one for very long knows, there's no such thing as a perfect what-you-see-is-what-you-get (WYSIWYG) editor. If you've ever finished editing a page only to have an entire paragraph appear in italics or unnecessary spaces between paragraphs, the mistake was probably hiding in the HTML code, undetectable from within the WYSIWYG editor.
In my chapter on web design for Nonprofit Management 101, I recommended W3Schools as a resource for HTML and CSS tutorials. I still use W3Schools from time to time, but since writing the chapter, I've learned about some other resources that are just as thorough and arguably more user-friendly. For starters:
Photo: Ming Xia, CC license
Elliot Harmon Staff Writer, TechSoup
Thanks for this great blog. Don't laugh but our existing website was created in Frontpage. We waste so much time trying to fix pages so a page in a browser is identical to the page we've edited. We have no one who understands html and have been searching for a new program to build our website. Most people recommend Wordpress but we enjoy having the option to use different formats and structures. Although no one has recommended Dreamweaver, it sounds like it may be an option for us if we can learn html. From this blog post, it doesn't sound like this will be too time consuming; however, I wanted to ask you directly if you feel Dreamweaver is something a non-technical person can handle with a little bit of education.
Hi fortheloveofpits,
First and foremost, I would actually join the chorus suggesting that you consider using Wordpress or another CMS. Looking at your site (I assume fortheloveofpits.org is your site?), I think that with a little bit of work upfront, you could actually make the site much easier to update in the long run. For example, the dog profiles listed on the front page that link to bios. That could be a page template in Wordpress or Drupal, and you could have previews of the 10 most recently added dogs automatically appear on the homepage. As I said, that would require some work upfront, but it would make the day-to-day much easier.
In answer to your question about Dreamweaver, it's certainly a much more complicated program than Frontpage, but I suspect you'd pick it up relatively quickly (at least for the basics of keeping your current site up-to-date). In Dreamweaver, it's easy to switch back and forth between HTML view and WYSIWYG view, which is nice. In HTML view, it also color-codes the HTML, which makes it easy to notice when you've made a mistake.
But again, my first piece of advice would really be to consider migrating to a CMS. This guide from Idealware is a great place to start: www.idealware.org/comparing_os_cms
This link did not work for me.
old reference sheet, unfortunately, but here's one created by Leslie Franke that covers the basics just as well as mine did.
I would appreciate having this reference sheet.
Hi kstrauss,
Hmm, looks like that website has gone down. Not sure it it's a temporary hiccup or permanent. But I see that archive.org has a copy of the sheet:
liveweb.archive.org/.../htmlcheatsheet-1.pdf
Perhaps TechSoup should whip up our own cheat sheet. Could be good link bait. :)
In addition to the tutorial sites mentioned in Elliot's blog, I also recommend the excellent video training site of Lynda.com. There, you'll be guided step-by-step by knowledgeable instructors as they teach you HTML and CSS at your own pace. These instructor-led video trainings are interactive and user-friendly. The site caters to every level, no matter if your a beginner or an expert.
For beginners interested in using Lynda.com, I recommend starting with the courses that contain the words "Essential Training" in their title. These tutorials will start you off on the right track by introducing you to the fundamentals and more.
Lynda.com is not a free training resource. But the price is affordable, and what I also like is that you always have unlimited access to all the trainings that exist on the site.
Especially for visual learners like me, it's definitely worth checking out.