Monday, February 18, 2008

Tutorial Back Tutorial Next

Link to Us

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:

  1. 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.

  2. 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.

  3. 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.

  4. Typing code into a simple word processor is a good way to learn HTML.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.

  5. 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:  &nbsp;
    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.

  • Nvu from Linspire (they do ask you to make a cash donation for the program)

  • First Page 2006 by Evrsoft

 

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

Official PayPal Seal

Home  |   Link Partners  |  Link to Us  |  Our Link Exchange Policy
Glossary of Terms  |  Privacy Policy  |  Site Map  |  About Us   |  Contact Us

Copyright © 2007-2008   Donald Dean Websites - All Rights Reserved