Writing HTML
Pointers on Learning to Write HTML Code
One of the best ways to learn HTML is by using a
simple word processor like Microsoft
Windows WordPad. You can open it by clicking your Start
Button, clicking on Programs, and then selecting Accessories.
It will be listed, along with Notepad.
Notepad is strictly a text editing tool and will also work, but as
you type in Notepad, it will not automatically wrap your text within
your viewing screen. You will have to manually hit the "return"
or "enter" key in order to keep your text inside the viewing area.
But, you don't want all of these line returns embedded in your text
anyway, because you want the formatting of your text to take place in
your web page.
You don't have to use WordPad if you have another plain text editor,
but you want an editor that doesn't insert special
formatting characters into the document and that will allow you
to save your documents as simple text without any formatting.
You can usually find plain text editors on most Shareware / Freeware
Websites.
The big word processors, like Microsoft Word and WordPerfect allow you
to save your documents as Web pages (HTML) but they will give you much
more than you bargained for. They add all
kinds of extra code and special characters and this not only
makes it very difficult to edit your HTML, but many time, all of this
extra code will cause your HTML to not display the way you thought it
would, so then you have to spend extra time trying to make changes to
get things to look the way you want.
You will need one other tool, a browser
to view your web pages. The most widely used
is Microsoft's Internet Explorer. Other popular ones are Safari,
Firefox, Chrome and Opera. Some Internet Service Providers,
like AOL, SBC and MSN will provide a browser when you subscribe to their
internet services, although you don't have to use theirs, you can use
any browser with any ISP service.
Here's how you get started:
-
Open your word processor and begin entering your HTML code.
After you have written the code for a simple page (start very small
and very simple to begin with) save your page with the file extension
name of .htm.
-
Next, open up your browser and click "File", then "Open" and
you should be given a window that will allow you to specify the
location of the web page that you just saved. Hopefully you
will have the option to select folders until you find the file without
having to manually type in the location.
-
Once you find the file, select it. You might have to click
on an "OK" or "Open" button and your browser should open the page
as a web document.
-
Now
that you've seen your work, you'll probably want to make some changes
so you'll need to switch back to you word processor. When
you're done, save you work again. If you are using Windows,
this time hold down the "Alt" key and tap the "Tab" key and you'll
see an icon list of all of the programs that you started on your
computer. Your browser should be the first one highlighted,
if not, continue holding the "Alt" key and as you tap the "Tab"
key you can cycle through the programs. When Windows highlights
your browser, let up on the "Alt" key and it will become the active
window.
-
Now just click on the "Refresh" or "Reload" button in your browser
and the changes to your web page should magically appear.
Wal-la!
Some of the More Common HTML Tags and Elements:
- Heading: <H1> and </H1>
The number "1" can also be a "2,3,4,5 or 6" which defines the size
of a text Heading. 1 is the largest size and 6 is the smallest.
- Division: <DIV> and </DIV>
The DIV element can be used to group and position other elements
and to assign them attributes.
- Block Quote: <BLOCKQUOTE> and
</BLOCKQUOTE>
Used to create an area of indentation from the page edges.
- Bold: <B> and </B>
The Bold tag is used to make text appear in Bold type.
- Italic: <I> and </I>
The Italic tag is used to make text appear in Italics
- Underline: <U> and </U>
The Underline tag is for underlining text.
- Paragraph: <P> and </P>
The Paragraph tags will set text or an element apart from other
elements or text that are above and below them by adding blank spaces.
- Align: <P ALIGN=LEFT> and
</P>
The value LEFT could also be CENTER or RIGHT. The Align attribute
is generally used for text.
- Display an Image or Picture: <IMG
SRC="URL">
This tag will display an image (graphic or photo) that is stored
at the specified URL address, such as "images/my_photo.jpg"
- Line Break or Line Return: <BR>
This is a single carriage return and starts a new line.
- Horizontal Rule: <HR>
This tag inserts a Horizontal Rule line into your document.
- Non-Breaking Space:
This is the HTML representation of a blank space without a line
break.
- Unordered List: <UL> <LI> </LI>
</UL>
This is how you create and unordered list, which is a list of items
without numbers, but with bullets. The <UL> and </UL> tags
go at the beginning and end of the list and the <LI> and </LI> tags
enclose each item in the list. The </LI> tag is optional.
- Ordered List: <OL> <LI> </OL>
<LI>
This is how you create and ordered list, which is a list of items
with numbers. The <OL> and </OL> tags go at the beginning and end
of the list and the <LI> and </LI> tags enclose each item in the
list. The </LI> tag is optional.
- Define a Table: <TABLE> and </TABLE>
These are the tags that define a table.
- Define a Table Row: <TR> and </TR>
These are the tags that define a single row in a table. For
every row defined, there will be one set of <TR> and </TR> tags.
- Define a Table Cell: <TD> and
</TD>
These are the tags that define a single cell (Table Data) in a Table
Row. For every Cell defined, there will be one set of <TD>
and </TD> tags.
- Cell Color: <TD BGCOLOR ="#hhhhhh">
BGCOLOR is the attribute that defines the color inside a single
table cell where the hhhhhh would be a hex representation of a color
like 003399.
- Comment: <!-- Text -->
The Comment tag is used to insert a comment in your HTML code, but
it will not be displayed by the browser that is displaying the web
page. The word "Text" would be replaced by whatever the comment
is.
This list is only a small example.
There are several hundred tags and elements, so again, I urge you to
get a book and do some experimenting and learning.

In the next topic on Types of Software,
I'll talk about what kinds of Software programs and Tools are available:
Open Source Programs, Proprietary Programs, and
Shareware and where you can get some free programs.

|