Step 3 – Code Your Website

free HTML To create HTML code for your Website you can use a HTML template, HTML editor, manually create your code or a combination of these methods.
code HTML Outputs from this step will be: an HTML document for each of your web pages, which includes: your text; links; and images.
Redball In a hurry, want a Website now, visit this page.

How to create HTML code for your Website

redcheck Create your Website. As mentioned above, there are three ways you can create a Webpage: 1) Use a pre-made HTML template; 2) Use an HTML editor; 3) Use a text editor such as Notepad and write your own HTML code.

redcheck Website Templates. If you don’t have the time to learn HTML. Why not use HTML templates? Visit one or more of the sites at my templates page – download, unzip, and add your own text. The cost? They are free – just link back to their site.

redcheck HTML Editors. To assist the novice, as well as the expert with creating a Website, HTML editors are available. Many of these editors provide tool bars, buttons and icons that insert the necessary tags for you. Warning. Most HTML editors are more complicated than learning HTML from scratch and often produce invalid HTML code! OK, you have been warned, if you still want to use an HTML editor. You can download one or more of these editors freeware editors.

redcheck Manual HTML. To create HTML manually you will need to use a text editor such as Notepad. If you own a PC and use Windows 3.x, 95, 98, Me or XP chances you already have Notepad installed. To locate Notepad on your PC, click on Find, select Files or Folders, enter Notepad.exe, then click on Find Now. Mac users can use SimpleText.

redcheck Basic Webpage page. Every Webpage must contain the following code to begin and end a Webpage.

<HTML>
<HEAD>
<TITLE>Your Title Goes Here</TITLE>
</HEAD>
<BODY>
All text, image files, sound files for your page are placed between the start <BODY> and end </BODY> tags.
</BODY>
</HTML>
Each one of those is called a tag.

redcheck HTML Tags. In HTML, a tag tells the browser what to do. When you create an html page, you use tags for many reasons – to change the appearance of text, to display a graphic, or to create a link to another page. The tags you write are not visible on the browser, but their effects are noticeable.

  • Tags begin with the symbol < > and end with </ >. Tags usually come in pairs, one to start an action and one that ends it.
  • This tag: <B>causes your text to be bold. This tag: </B> stops the effect of the previous <B> tag.
  • To underline a word or phrase, you simply put <U> before the phrase, and </U> where you want the underline to end.
  • Here is a tag you won’t see very often. <STRIKE> So, what’s it for? Guess – Misssippi. Mississippi.
  • All tags work in a similar manner, you have to tell a browser by code when to start and stop an action. There are a few exceptions, like <P> the paragraph tag. You don’t have to use an stop tag </P>. But, you can and a lot of folks do.
  • To control the background color of your Webpage, your text and your links color you must add this code to your BODY TAG. For example, the BODY Tag for this page is:
  • <BODY BGCOLOR="#FFFFFF" text="#000000" link="blue" vlink="#999999">
    Each of these BODY TAGS is discussed below:

    BGCOLOR
    Specifies the background color for your page.

    TEXT
    Specifies the color for the text on a page.

    LINK
    Specifies the hyperlink color for non-visited links.

    VLINK
    Specifies the color for visited links.

  • Hyperlinks:
    Internal Link. To create a link to another page on your Website use a tag like this:
    <A HREF="internal.htm">Internal Link</A>
    It should look like this on your page:
    Internal Link. This is called a relative link.

    External Link. To create a link to another page on another Website use a tag like this:
    <A HREF="http://www.google.com/">External Link</A>
    It should look like this on your page:
    External Link. This is also called an absolute link.

  • Image: To display an image file (gif or jpeg) use a Tag like this:
    <IMG SRC="gerbils.gif">
    It should look like this on your page:
    gerbils.gif

  • Star Certain characters have special meaning in HTML documents and are reserved. These characters include <, >, & and ". Also, your keyboard does not provide a key for some characters, such © , ® and European characters. But, you can use the numeric characters to create them. See special characters.

  • Sound: To add sound to your Web page pick one:

    1. Use the <EMBED> tag as discussed on this page.
    2. Add a script to your page and play a random midi file check out this page.

  • StarUpdated Color: To use color on your Webpage make sure you use a browser safe color and use a tag like this:
    <FONT COLOR="#008000">COLOR</FONT>
    It should look like this on your page:
    COLOR – where #008000 is the hexadecimal value for Green. Convert your hexadecimal color values to RGB Added.

    You can also use one of the 16 color names discussed on this page.

  • E-mail: To make a link that sends e-mail use a tag like this:
    Please send any comments or suggestions to
    <A HREF = "mailto:billgreen@1stsitefree.com">Me</A>.

    It should look like this on your page:

redcheck HTML Tutorial Links. If you want to learn more about HTML, try one or more of these HTML tutorials.

redcheck Double Check Everything. After you have created .html (.htm) files for each of your pages:

  • If your Website is hosted on a UNIX/LINUX system, check the case of your file names. UNIX/LINUX host are case-sensitive (the file index.html is different from one named Index.html). In addition, html files on a UNIX/LINUX host must end with an .html extension, not .htm.
  • Click on your home page, navigate through your site and ensure that all internal links and navigation buttons work.
  • Spell check your web pages using an automated spell checker. If you don’t have a spell check capability, wait and perform this check during Testing.
  • Printout and carefully proof read your pages. Although you may have checked your pages using a spell checker, watch out for mistyped birds (words) – see what I mean. Also, have someone else proof read a copy of your pages.

redcheck Correct your errors. Make all the required changes on your hard drive.

redcheckStar Top 10 FAQ. Have an HTML question? Take a look at the top 10 I’ve received.

redcheck OK, let’s go to the next step. Upload your web files.