Thursday, February 09, 2006

Lesson 2: Choosing Tools

Internet Explorer & 'View Source'



The easiest way to begin experimenting with HTML, if you are working on a PC with Internet Explorer, is to use the 'View-Source' function.

To get started, in Windows File Explorer create a new file and call it something like lesson2.htm. In Internet Explorer, use 'File-Open' to open the new blank document called lesson2.htm and copy Phil's template in there, and Save.


<html>
<head>
<title>New Doc</title>
</head>

<body bgcolor=white text=black>
<h2>New Doc</h2>
by <a href="/">Philip Greenspun</a>, revised April 1, 2003
<hr>
introductory text
<h3>First Subhead</h3>

<p>
more text
yet more text
</p>

</body>
</html>



With the webpage now open in Internet Explorer you will see the end result of what the template HTML looks like. If you choose 'View Source', you will see the HTML itself.

This notepad editor automatically colours HTML tags so it is easy to see if you have forgotten to close a tag. This is one of the most useful features of an HTML editor for someone writing HTML by hand.

A useful way to work is to have the Internet Explorer screen showing the actual webpage on one screen, and the notepad view showing the HTML on another. When you make a change to the HTML you can quickly Save, and then switch over to Internet Explorer and Refresh, to immediately see the changes you have made.

Other Tools


Internet Explorer and its Notepad are perfectly adequate tools to get you started but you may want more from an editor, such as spell checking or a more WYSIWYG way of creating your webpage.

Here are a few thoughts on other tools:


  • Dreamweaver - A WYSIWYG tool with a long reputation of producing decent HTML. Later versions have extras like spell checkers and code validators, which can be useful. Dreamweaver seems to interpret CSS fairly well, so as you are working you can see what you're producing. Recommended for PC and Mac. This is the tool I use but I mainly write the HTML from scratch still.


  • BBEdit - A neat HTML editor for the Mac. One strong feature which I've found useful has been it's facility for doing a search and replace across multiple files. As a long time PC user I never have got used to the keyboard shortcuts in BBEdit, in fact some standard PC ones don't seem to exist.


  • Pagespinner - An award winning HTML editor for the Mac and one favoured by Zeldman at one time I believe. As with BBEdit I continue to be frustrated by the keystrokes available.


  • Microsoft Frontpage - A WYSIWYG tool but one which does all kinds of funny things with the HTML code it creates. For example, with web pages it is important to make good use of <h> tags for the sake of search engines like google. Frontpage seems to avoid using them by default. Not recommended.


  • Microsoft Word - Word can act like a WYSIWYG tool for creating HTML pages but it is even worse than Frontpage. Not recommended.

1 comment:

Anonymous said...

I found a better freeware editor than Frontpage, it's called Nvu. It's also a WYSIWYG editor, and although I'm not sure how well it codes certain HTML elements, it's a nice tool for those just starting, especially if you don't have any money. There are Mac OSX, Windows, and Linux versions at www.nvu.com