How to Write and Run HTML
By Stephen Bucaro
There are many powerful WYSIWYG (What You See Is What You Get) web design applications
available, like Adobe (formerly Macromedia) Dreamweaver or Microsoft Expression
(successor to Frontpage). The problem with these applications is that you really do
Get What You See (not what you want). Is "WYSIWYG" a disclaimer? And when you can't
make your fancy WYSIWYG application do what you want, you have to break into the code
that it generated and fix it yourself.
Unfortunately, these applications generate voluminous amounts of code, most of it
doesn’t do anything (except cause problems) and is unnecessary. Not only do they generate
a lot of extra unnecessary code, but they don't format the code in human readable form.
In the fact, the main reason you're reading this eBook might be to learn how to break
into the code created by your fancy WYSIWYG application and make it do what you want.
For the examples in this eBook, you're going to use a text editor, and not your big
fancy WYSIWYG word processor application, just a basic ASCII text editor. You see,
similar to how HTML adds formatting tags, word processor applications add their own
formatting tags (usually RTF or XML tags). These tags will cause your HTML examples
to not work. An example of the type of text editor you should use is Windows Notepad.
You'll find Windows Notepad in the Start menu Accessories group. make sure
you choose Notepad, not WordPad. In fact, you may want to drag a Notepad shortcut to
your desktop for the purpose of doing the exercises in this eBook. Now open Notepad
and type in some text, any text. Next save the file with any name, except it must have
the .htm file extension . Congratulations, you have just created your first webpage.
Too easy? You don't believe me? Just double-click on the file name and it will open
in your default web browser and display the text you typed. (Assuming that you have
your file associations configured correctly). If you don't have your file associations
configured correctly you'll need to drag and drop your file on your web browser's
desktop shortcut, or use the File | Open menu in your web browser.
You see, a web browser is not too picky, but technically a web page has a few more
parts. Actually a webpage has two main parts, a HEAD section and a BODY section.
Lets create another example, except this time type in the HTML tags as shown below.
Not that the webpage document is enclosed between an opening <html> tag and
closing </html> tag, and that the head section is enclosed between an opening
<head> tag and closing </head> tag, and that the body section (containing
your text) is enclosed between an opening <body> tag and closing </body> tag.
When you double click on the file name to open it in your web browser, you will not
see the additional html tags. Remember html tags control the layout, they are not visible
in the browser themselves.
You placed your text within the body section. The head section is for code that must
be read by the browser before the body section is displayed. You might place CSS code
But there is one thing you might want to put in the head section, and that's a title for
the webpage. The webpage title goes within title opening and closing tags which are nested
within the head opening and closing tags as shown below.
When you double-click on the file name to open it in your web browser, you'll see your
title text in the web browser's title bar.
This is how we'll do every example in this eBook. So you might want to create a folder
on your desktop to hold all your example files. For each example, you'll open Notepad,
type in the example html code, save the file with the .htm file extension, and then
double-click on the file name to open it in your web browser.
When you've completed the examples in this eBook, you may wonder why the heck you ever
used a fancy WYSIWYG web design application in the first place, when creating even
complex page designs is so easy to do by just typing in Notepad. One thing is for sure,
next time you have to break into that WYSIWYG application generated code, it will no
longer be a blur. You'll have a better understanding of what you're looking at, and some
possibility of making a fix.
More HTML Code:
• Text Input Box Basics
• HTML5 role Attribute
• HTML Image Basics
• The Font Tag
• What is HTML?
• How to Troubleshoot an HTML Table
• Checkbox Basics
• HTML5 Input Type - Email
• The Heading Tags
• Webpage DOCTYPE Declarations Explained