HTML IN AN HOUR!
"HTML is rapidly becoming a must-have skill of the 21st century"
Discover how a breakthrough system can teach you the language of the web... in just one hour!

1. Plan what you want your website to convey. What is your site's main theme?

2. Any links you have on your site should be Maintained! Nothing is more frustrating than clicking a link only to be told the site no longer exists or the address is wrong. Double check them before you make your document public, then continue to monitor them periodically.

3. Make sure your images display properly. I'm sure you've seen sites with a small 'x' where the image SHOULD be? Nine times out of ten, it's because the link PATH has an error. Once in a while it will be because the Image Name has a spelling error (images are case sensitive), you've forgotten to transfer the image to your website host or in the transfer, you placed the image in the wrong folder. Results are the same - the 'x' syndrome! Also, for the viewer who surfs the web without images, use the 'alt' description. This way they'll understand what was SUPPOSED to be there.

4. Check your spelling and use of grammar. Grammar is very important if you want to make a favorable impression. Confuson are easy online for the vewer might not understand wat you is tryin to say, specal if ya doesn't say it right!

5. Keep your page simple. Nobody wants to wait for huge image files to load. Save those for your second page.

6. Place as much information as possible in the first 2-3 paragraphs of your text. Most people won't read past the top half of the page. And Bold ( <B>Your Text to be Bolded</B> ) or Highlight ( <span style="background-color: yellow;">Your Text</span> ) your important text for the person who Skims. Use the latter sparingly. A page full of highlighted text soon loses its' potency.

7. Keep your text "Visible". Too many colors, especially a demanding, colored background, can make your site difficult to read. A red background with blue text is very hard on the eyes, not to mention almost impossible to read.

8. Basically, just keep your Main page simple and to the point.

This page you are reading is an HTML document. It is very similar to word processor documents. You can have Larger Fonts and Smaller Fonts, Bolded Text that could look Typewritten or Italicized. This is what the above looks like in HTML:
You can have <font size=+2>Larger Fonts</font> and <font size=-2>Smaller Fonts</font>, <b>Bolded Text</b> that could look <tt>Typewritten</tt> or <i>Italicized</i>.

Following is a very simple guide to creating a web page that will contain links to other pages, images, text and e-mail link. Use your Notepad for this. (Windows 95/98, Start -> Programs -> Accessories -> Notepad) An html editor isn't necessary. In fact, you'll find it a pain to use.

Note: Extra spaces and line breaks (blank lines) will be ignored when the HTML is interpreted... so add them if you wish to do so. Just don't add them to URLs or JavaScripts. These are sensitive to line breaks or interruptions. URLs should always be on one line.
<a href="http://www.albertarose.org/">AlbertaRose.org</a> No Breaks.

Now, type the first line of your web page. <HTML>

Then type </HTML>

These can be typed in either lower or upper cased letters. I used upper case (when I remembered!) for readability. These tags told your browser (Internet Explorer, Netscape, WebTV, etc) that this is an HTML document. <HTML> begins the document and the last </HTML> tells the browsers the document is finished. You will place your content between these two tags. Most tags will have an opening <b> and closing </b> tag (<FONT>your text</FONT>) The closing tag is always in </.....> format.

Next, add the HEAD to your web page.

<HTML> <HEAD> <TITLE>Your First Web Page</TITLE> </HEAD> </HTML>

<TITLE> tells the browser what the title of your web page is "Your First Web Page". This is the sentence that appears at the very top of the browser. The title of this page is "HTML Tutorial For Beginners - Basics".

<HTML> <HEAD> <TITLE>Your First Web Page</TITLE> </HEAD> <BODY> <H1>WELCOME TO MY WEB SITE</H1> </BODY> </HTML>

<BODY> tells the browser that this is the beginning of the body of your document. <h1> refers to header 1, which is the largest sized text. The H command should only be used for your Title and Sub Titles. Different numbers will yield different sizes. Try them out.

<h1>Your Text</h1>

<h3>Your Text</h3>

<h5>Your Text</h5>

Within the Body of your document, the <font color="#FF0000" face="Arial">FONT command is used.</font> You can change your font's face, color and size.

Size 2 -- HTML: <font size="2" color="#FF0000" face="Arial">Size 2</font>
Size 3 -- HTML: <font size="3" color="#FF8000" face="Nadianne">Size 3</font>
Size 4 -- HTML: <font size="4" color="#0000FF" face="Swiss">Size 4</font>
Size 5 -- HTML: <font size="5" color="#006100" face="Georgia">Size 5</font>
Size 7 -- HTML: <font size="7" color="#00FFFF" face="Verdana">Size 7</font>

Your document now looks like this in the browser.

WELCOME TO MY WEB SITE

Save your work. Name it firstpage.html, or whatever you choose. Just don't forget it or where you saved it! The Desktop is probably the best place for now. Open your Browser. Click 'File' then choose 'Open'. Find your saved file and open it. Now you can preview what you've done. As you make changes, save your document then simply "refresh" your browser to view the changes. You should see a big "WELCOME TO MY WEB SITE" in your browser.

Now let's add some text to your document.

<HTML> <HEAD> <TITLE>Your First Web Page</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">WELCOME TO MY WEB SITE</H1> <P ALIGN="LEFT">This text is aligned "left"</P> <P ALIGN="RIGHT">This text is aligned "right"</P> <P ALIGN="CENTER">This text is aligned "center".</P> </BODY> </HTML>

<P> refers to paragraph. You don't need the closing tag for <P>, but some people put the closing tag as a reminder.<P> tells the browser to begin a new line. ALIGN after the <P> is called an attribute. Some attributes require quotation marks, some don't. The rule is to place quotation marks in every attribute.

This is what your page looks like now.

WELCOME TO MY WEB SITE

This text is aligned "left"

This text is aligned "right"

This text is aligned "center".

Now you're ready to add an image to your new page. An image is inserted by using the tag
<IMG SRC=". For example:

<HTML> <HEAD> <TITLE>Your First Web Page</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">WELCOME TO MY WEB SITE</H1> <P ALIGN="LEFT">This text is aligned "left".</P> <P ALIGN="RIGHT">This text is aligned "right".</P> <P ALIGN="CENTER">This text is aligned "center".</P> <P ALIGN="CENTER"><IMG SRC="http://www.albertarose.org/Tutorial/pics/AlbertaroseBanner3a.gif" WIDTH="460" HEIGHT="55" BORDER="0" ALT="Work at Home!"></P> </BODY> </HTML>

WELCOME TO MY WEB SITE

This text is aligned "left".

This text is aligned "right".

This text is aligned "center".

ALT= attribute is a courtesy for those who cruise the net without using graphics. This option tells them what you want them to know. In this case, my banner links to my site, therefore I gave it the alternate text of "Work at Home!".

<IMG SRC="AlbertaroseBanner3a.gif"> gives the location of your image file. Usually it's the same as your web document. ie "http://www.albertarose.org/index.html" For others to see your images, you must store them in your ftp site or a WWW site on the web. You may have a folder at your ftp site titled "images". Then the url to your image would be <IMG SRC="http://Your Web Site/images/yourimage.gif"> . Be sure you have the correct path.

Now, let's add a link your image. This is possible by using what is called an Anchor tag <A> and </A>

<HTML> <HEAD> <TITLE>Your First Web Page</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">WELCOME TO MY WEB SITE</H1> <P ALIGN="LEFT">This text is aligned "left".</P> <P ALIGN="RIGHT">This text is aligned "right".</P> <P ALIGN="CENTER">This text is aligned "center".</P> <P ALIGN="CENTER"> <A HREF="http://www.albertarose.org"><IMG SRC="http://www.albertarose.org/Tutorial/pics/AlbertaroseBanner3a.gif" WIDTH="460" HEIGHT="55" ALT="Work at Home!"></A></P> <P ALIGN="CENTER"><A href="mailto:webmaster@workhome.info">webmaster@workhome.info</A> </BODY> </HTML>

WELCOME TO MY WEB SITE

This text is aligned "left".

This text is aligned "right".

This text is aligned "center".

webmaster@workhome.info

Let's add some text to the body of your page. This can be accomplished in different ways. You can use a Table <table><tr><td>your text</td></tr></table> (explained in the next segment), Textarea <textarea>your text</textarea> or Blockquote <blockquote>your text </blockquote>.

<HTML> <HEAD> <TITLE>Your First Web Page</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">WELCOME TO MY WEB SITE</H1><P> <center><table width="60%" border="1"> <tr> <td> This shows you how to use a table for the text of your document. I've added a border=1 so you can see the outline of the table. This has been centered. If you want, you can Blockquote the text inside your table or add a text area. <blockquote>This demonstrates a blockquote. Your text will be blocked. This is great if you want to bring attention to portions of your document.</blockquote> <center><textarea cols="40" rows="6">You may have to scroll to read what's contained in this box. This is your Textarea. You can make good use of textareas to save space on your pages. To adjust the width and height of a textarea, COLS and ROWS are used.</textarea></center> </td> </tr> </table></center> <P ALIGN="LEFT">This text is aligned "left".</P> <P ALIGN="RIGHT">This text is aligned "right".</P> <P ALIGN="CENTER">This text is aligned "center".</P> <P ALIGN="CENTER"> <A HREF="http://www.albertarose.org"><IMG SRC="http://www.albertarose.org/Tutorial/pics/AlbertaroseBanner3a.gif" WIDTH="460" HEIGHT="55" ALT="Work at Home!"></A></P> <P ALIGN="CENTER"><A href="mailto:webmaster@workhome.info">webmaster@workhome.info</A> </BODY> </HTML>

WELCOME TO MY WEB SITE

This shows you how to use a table for the text of your document. I've added a border=1 so you can see the outline of the table. (Learn more about tables below.) This has been centered. I use percentabes when defining the width of my tables simply because it's easier. Tables can also be definined by Pixels. If you want, you can Blockquote the text inside your table or add a text area.

This demonstrates a Blockquote. Your Text will be blocked. This is great if you want to bring attention to portions of your document.

This text is aligned "left".

This text is aligned "right".

This text is aligned "center".

webmaster@workhome.info

Play around with the above for a while, creating a few test pages (saving them with different names, of course), until you get to feel a bit more comfortable with HTML. When you're ready, move on to the next step - Creating Tables.

HTML IN AN HOUR!

Some Basics for the HTML Beginner

<h1>Your Text</h1>

<h3>Your Text</h3>

<h5>Your Text</h5>

WELCOME TO MY WEB SITE

WELCOME TO MY WEB SITE

WELCOME TO MY WEB SITE

WELCOME TO MY WEB SITE

WELCOME TO MY WEB SITE