For this tutorial I’ve chosen Netscape Composer as my HTML editor, primarily because it’s WYSIWYG and it’s free. However there are many great HTML editors.
Other HTML Editors: WYSIWYG Editors Adobe Golive : GoLive and Dreamweaver seem locked in fierce competition for the best editor. Macromedia Dreamweaver : The most popular editor, according to a poll on Lynda.com Macromedia Dreamweaver 4 vs. FrontPage 2000: I know FrontPage 2000 is only for PCs, but wouldn’t you like to see Macromedia mop up the floor with FrontPage anyway? Mozilla Composer : Looking for a free WYSIWYG editor? Mozilla comes with it’s own, called Composer. Text-based Editors BBEdit : : Multi-file search and replace, GREP searching, and Open/Save to FTP server. Need I say more? BBedit could definitely take some lessons in user interface from PageSpinner, and lacks CSS and javascript tools, but it clearly beats out in sheer heavy lifting power. BBEdit Rules the Web: Don’t take my word for it, read what MacWorld has to say in their glowing review. MacWorld PageSpinner : The single best text based HTML editor for someone learning the code. Very user friendly interface, The HTML assistant rocks, and support for javascript, java, SSI and CSS make this an indispensible addition to your toolbox. And it’s shareware! PageMill Tips: Tips on the first WYSIWYG web design tool to hit it big. Tidy- HTML scrubber : If you’re looking for a way to clean up a bunch of poorly written HTML files, Tidy is a decent solution. It’s extremely configurable, which is a boon for doing bulk edits. It even comes as a BBEdit plugin. And if you’re ready to upgrade your 1000 HTML pages to XHTML, Tidy has plenty of horsepower to help you do it.
Launch Netscape Communicator, then from the File menu choose Open> Page in Composer. Navigate to the file in your project folder and open it. It may look a little different in Composer than it does on the web site. What you are seeing is Netscapes Composer’s WYSIWYG view, and WYS isn’t always WYG. For this reason you may want to perform a test edit to your page.
Netscape Composer’s ‘WYSIWYG’ view of my HTML-101 page. As you can see Netscape didn’t get it quite right.
Making a test edit Let’s say your file is named index.html. Once it’s open in Composer, make any edit to it. Maybe change some text. Then choose File> Save as… and name it index2.html. Upload this to your site (You may want to read ahead to Step 3: Uploading your changes to your site…) then check it in your web browser. Remember you’ll need to type in ‘index2.html’ at the end of your URL to see this test page. If you’re satisfied it made the edits correctly and didn’t harm any other part of the page (this can happen) go ahead and begin editing your original files. But until you get very familiar with the nuances of Composer, you should keep backup copies of all your files.
Editing your page Composer’s Toolbar Netscape has already created a very thorough manual on how to create web pages using Netscape Composer, so I won’t try to duplicate their efforts here. You can read their manual by going to the Help menu in Netscape and choosing the Help submenu. Once their Help index comes up, click on Creating Web Pages in the left column.