Before all else, an aspiring web developer must learn how to work with HTML and CSS. Using the rational established in the article Overview of HTML and CSS it makes sense to select HTML 4.01 and CSS 2.1 as a starting point. All that is necessary to begin is a tool to facilitate learning in the least amount of time.
There are many options to choose from, including commercial product like Dreameaver. But since open source alternatives are available at no cost, why not pick one? One such WYSIWYG HTML editor is Mozilla’s Composer, that is part of the SeaMonkey All-In-One Internet Suite. Actually, this program been around since the early days of Netscape, which later became the basis for Mozilla- so naturally, that makes it a superb choice.
Download and Install Mozilla’s SeaMonkey
The first step is go to the SeaMonkey site, download and install it. Follow the wizard step by step, accept the Standard Installation option. Upon completion, click on the Finish button and launch SeaMonkey. There are two methods to invoke SeaMonkey Composer. One way is to navigate to the topmost menu, select Window, Composer from the browser window. The other is to modify the shortcut on the Desktop to the following :
“C:\Program Files\SeaMonkey\seamonkey.exe” -edit
That way, it will open to Composer straightaway.
Composer is an HTML editor that is referred to as WYSIWYG which stands for “What You See Is What You Get”. One can type in text or add images and it works virtually like any word processor. From the Composition toolbar, one can make links, insert images, or create tables. From the Formatting toolbar just below it, one can resize text, use bold or italics, make lists, indent, and justify left, center or right any html item or group of items. Options here are configurable via the Edit, Preferences > Composer, Toolbar dialog screen.
Making a Favorite Links Web Page to Demonstrate HTML and CSS in Action
To make a page of favorite links, type in some website names, like Google or Yahoo. Then select the text for one of them and click on the Link button. Enter the URL in the Link Location box and click OK. Repeat this process for each item listed.
From the Format menu at the top, navigate to Font and select Helvetica, Arial. Now click on the HTML Source button along the bottom to see the source code. Notice in the first line, the DOCTYPE, namely HTML 4.01, is specified. There are opening and closing tags for HTML, HEAD, TITLE, and BODY. Links are indicated by A HREF tags, which have the attribute style=”font-family: Helvetica,Arial,sans-serif;”. Because the style code is in the tag itself this is referred to as an inline style sheet.
Next, click on the Save button. For those who have setup a local web server such as Apache, go to that directory and save the file as index.html. Enter the url http://localhost/index.html in any web browser to view it. Otherwise, go to File, Open Web Location to open it directly. Now add a bookmark or make it the home page and customize as desired.
By studying the generated source code, it possible to learn the basics of HTML. Other online HTML tutorials exist like W3Schools and Tizag which are also helpful in learning the basics of HTML and CSS.