Writing HTML Code and JavaScript
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, Netscape 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!
Do You Really Need an HTML Editing Tool?
If you are not convinced that you should acquire an HTML tool, let
me give you one example of how helpful they can be. A
TABLE is a very
common and often used HTML element. Here is an example.
This table and the information inside of it was created in just a few
minutes using FrontPage 2003.
| Weeks |
January |
February |
March |
| First Week |
$60 |
$400 |
$1000 |
| Second Week |
$80 |
$500 |
$1200 |
| Third Week |
$100 |
$700 |
$1800 |
| Fourth Week |
$250 |
$900 |
$200 |
And here is the HTML code that created this table:
<center>
<table border="2" width="400 height=" cellpadding="5" bgcolor="#CCCCFF"
height="132" bordercolordark="#C0C0C0">
<tr>
<td width="108"><b>Weeks</b></td>
<td width="91"><b>January</b></td>
<td width="91"><b>February</b></td>
<td><b>March</b></td>
</tr>
<tr>
<td width="108">First Week</td>
<td width="91">$60</td>
<td width="91">$400</td>
<td>$1000</td>
</tr>
<tr>
<td width="108">Second Week</td>
<td width="91">$80</td>
<td width="91">$500</td>
<td>$1200</td>
</tr>
<tr>
<td width="108">Third Week</td>
<td width="91">$100</td>
<td width="91">$700</td>
<td>$1800</td>
</tr>
<tr>
<td width="108">Fourth Week</td>
<td width="91">$250</td>
<td width="91">$900</td>
<td>$200</td>
</tr>
</table>
</center>
As you can see, it would have been a real job to write all of this
code by hand, plus there would have been time spent trying to find and
fix any code errors, re-testing and making changes until the final result
was obtained. Unless you really
like to write and debug code and are very good
at it, getting a good HTML Tool should be a priority.
I'll talk more about HTML editors in the section on
"Web Design Tools".
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.Here is the
W3C official List of Elements and also their
official list of Attributes that relate to the elements.
Learning HTML and HTML Editing Tools
There are numerous Websites that can help help you
learn HTML. Here's a few:
http://www.htmlgoodies.com/
http://www.htmlcodetutorial.com/
http://www.w3.org/2002/03/tutorials
www.webdesign.org
To help you start learning and working with HTML at a low price (like
for FREE), here are some basic HTML editors
available on the Web:
There are even a couple of Basic Website Design
programs available for FREE.
About JavaScript
JavaScript is a scripting language
that is used extensively in HTML and allows dynamic behavior to be specified
within HTML documents. It was developed by Netscape Communications
and first appeared in Netscape Navigator.
JavaScript allows you to do things like:
- Detecting the Browser or Operating System being used by a visitor.
- Change an image when the mouse pointer rolls over it.
- Automatically close a Popup window.
- Add buttons that perform various tasks, like print your Web
page or capture specific information and take you to another Web
page.
- Create a box with scrolling text.
- Valid form boxes
Here's a Website that has lots of FREE JavaScript code snippets that
you can cut and paste into your Website pages:
The JavaScript
Source
If you're interested in learning JavaScript here are the Web addresses
of a few tutorials.
http://www.w3schools.com/js/default.asp
http://javascript.internet.com/
http://www.javascriptkit.com/javatutors/index.shtml

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.
Back To Top
|