htmlhed.gif - 11488 Bytes

Before you take off on these tutorials it is important to understand they are geared to the very new computer person. Not only will you learn HTML, some XHTML, DHTML, java, javascript and a lot of other fun web publishing stuff....you will learn to make your computer work for you....not you be a slave to it or be at its mercy because you do not know what the heck you are doing.

By some unexplained quirk of good fortune when I decided to learn HTML the programs available that wrote web pages were not well enough developed to write the pages for you properly, they still are not. They were advertised to be user friendly and I suppose they were for the time (5 years ago) . Today of course they are much improved but still write far to much redundant code into a document. So I was left to the task of actually learning HTML from scratch. I labored over books, and web pages like "Joe Burns HTML Goodies" for weeks (Joe's pages are much improved since the beginning also). I wrote code and played just to see what would happen when I changed things just a little bit. Since I am not one who wants to study a year before I see some kind of result I am going to assume you are not either.

These pages are designed to be fun and teach you some page techniques that look pretty simple but are rather complicated. It is my belief that everyone can do complicated stuff if they are given step by step instructions and told why they are doing what they are asked to do.

These pages of instruction are assuming you know little or nothing about your computer or how to write HTML. My friends who want to learn to make web pages have reminded me on more than one occasion that those of us who design pages forget to give very simple "how to" instructions because we supposedly know so much....I will try and keep that in mind. I clearly remember how frustrating I found learning HTML was without step by step instructions. Hopefully I can make life a little easier for you.

The reason I consider myself lucky to have been forced to learn HTML is because all of the quick HTML code programs like FrontPage etc. write tons of redundant code into your page document. Not only does this extra code make your page load slower but if you do not know HTML when a mistake occurs you probably can not find it much less fix it.

In truth HTML is actually very simple....it does however take a little time to learn...but as you will shortly see in a lesson or 2 you will be doing some pretty dynamic stuff so lets get started on some of the basics, get your feet wet and HAVE SOME FUN!

htmldot.gif - 56 Bytes

htmldot.gif - 56 Bytes

What is HTML? in lay terms it is the language that speaks to your browser. HTML (HyperText Markup Language) is pretty standard. The browsers are not. There are browser wars going on as we speak. Each company wants to one up the other so they do not always stick to the standard code. This makes the job of web designer difficult at best. Right now I design mainly for Internet Explorer 5.0 and above. Simply because the features are great and most of the public use that browser. That may change by tomorrow afternoon but for now that is what goes here.

A web page has a certain format or text document that will eventually be uploaded to your web domain (web host) that in turn serves your web page to the public.

Below is the very basic web document.
I will color code the document in hopes it will make things a bit more clear and easier to understand.

word5.jpg - 27979 Bytes

This page will look like this when you view it on a website. Notice that only the text between the body tags will be what is viewed by the public.

browser.jpg - 12288 Bytes

Notice the tags, flags or commands come in pairs
an opening tag (<HTML>)
and a closing tag(</HTML>)

We seldom deviate from this practice....most of the time there must be an opening tag and a closing tag. I stress this because if by chance you leave one of these tags out the browser being a stupid creature that can not think for itself will no doubt give your page a different look than what your original intent might be.

Every standard HTML document MUST HAVE a pair of:
HTML tags to designate it is a HTML document.
HEAD tags that contain hidden data that help register your pages in the search engines. These are the back stage production instructions for the server and browser so to speak.
TITLE Make sure each of your pages has a <title> tag that provides a concise, helpful description of the page's contents. Most search engines display the text of your <title> tag as the "headline" for your entry in the search results list. Most spiders also extract search keywords from your <title> tag, so your page will be more likely to reach its intended audience if it contains words that your audience is likely to use when searching for the information on your page
BODY tags that contain the page data. Everything you want to show on your page goes here.

Each of these pairs must be bracketed with
<......>opening
</......>closing

Example:

<BODY>opening
</BODY>closing

Okay we are ready to start.
You are going to create a html template...open wordpad...I say use wordpad rather than notepad because it will copy the code in the colors as shown above and if you work in these colors I think it will be a bit easier to understand what you are doing.
DO NOT use Microsoft word or any other processor as the code you write will likely be changed to something you can not fix.

Just in case you are new to the computer and you are saying where the heck is wordpad?
On your taskbar:

htmltask.jpg - 6125 Bytes

Usually located at the bottom of your screen....however on occasion you will find at either side or top.

go to start.....programs.....accessories....wordpad.....voile up pops your wordpad window ready to have something entered into it.

word1.jpg - 24463 Bytes

word2.jpg - 12646 Bytes

Learning to Copy and Paste:

~~~~~~~~~~~~~~~~~~~~~~~~~

<HTML>
<HEAD>

<TITLE> type_Document_Title_here </TITLE>
</HEAD>
<BODY>

Information goes here.

</BODY>
</HTML>

~~~~~~~~~~~~~~~~~~~~~~~~~

Now go up in the document (HTML code) above between the lines and highlight the whole thing from the HTML (opening tag) to the HTML (closing tag)....you do that by clicking on the HTML (open tag).....hold down the left mouse button drag it to the bottom of the HTML (close tag) and you will see all of that text turn a different color.

word10.jpg - 34186 Bytes

now right click on the highlighted area and a window will pop open and you will click copy....now click back to the body of your open wordpad document and you can either go up to the edit at the top of the wordpad window and when it opens click paste or simply hit ctrl -V on your keyboard and that should paste what you have highlighted into your wordpad document....it should look exactly like it does on this page above.

What you have just learned is to copy and paste....this technique is going to be your best friend in writing your HTML documents. Since HTML is a standard there are standard things you will always use in writing your pages. So keeping those things in tiny clips or macros will be a real time saver.

You might even want to consider making a wordpad document with these tiny clips of code, name it macros.rtf and store it in your newly created 0html folder (see below). You can add to this document things you especially like plus notes on why you like them or special things that you may have to do to make the code work/change.

Make a new folder:

It will make it much easier if you set your explorer setting the same as mine during your study with these tutorials. Follow instructions below to open explorer window.
Then at the top of the window click... view... a small pop up window will open and you will make sure there is a checkmark by Details....then go to folder options and the view tab....then make sure your checks are the same as the picture below...also scroll down and under "visual settings" make sure you have "smooth edges of screen fonts" checked:
I am working with Windows 98 so there may be some difference in settings with Windows 95.

list.jpg - 39511 Bytes

Open your windows explorer by going to start....programs....windows explorer.
A window will open that looks like this:

explorer3.jpg - 28730 Bytes

Double click your C:\ drive on the left pane.....then somewhere in the empty area on the right pane click with your right mouse key....then go to new and a little window will open and select folder.

explorer5.jpg - 24164 Bytes       explorer4.jpg - 14057 Bytes

now name that new folder... 0html...enter...the 0 is a zero not a Capitol O.

This will make your new html folder right at the top of the list under your C:\ drive. If you save all of your html documents here they will always be easy to find and view while you are following these lessons....of course if you already have some sort of very comfortable filing system in place continue to use it.

Saving your documents:

Now go back to your wordpad document.
From here on out for study purpose you are going to be saving 2 documents that are exactly the same except one will be saved in wordpad and will remain colored.
The other will be saved in notepad. They are exactly the same except one will be pretty colors and will be called a Rich Text File ".rtf" (because it is "Rich Text" pretty and colored) and the other will be a Plain Text File with a ".html" file extension......because your browser does not need pretty colors to read and display the document.

word6.jpg - 17645 Bytes

The reason I am having you go to the added trouble of saving 2 documents is very simple. If you write code with colors it is much easier to see what you are doing than if you write in a simple black and white document like notepad.
This will be more important when you have a whole page of code or perhaps a document that is a few pages long.
Remember the documents will be EXACTLY THE SAME except for the file extension and the program they are created in.....either Wordpad (NOT MICROSOFT WORD) or Notepad.

Just one more added note....when you are naming files you can use whatever name you want but after the "." the file name must be standard....in this case we are using ".rtf" and ".html" also the name before the "." is best of lower case and can not have breaks in it. For instance you CAN NOT use html 1.html....but you CAN use html1.html or html-1.html or html_1.html.
Avoid the urge to use capitol letters. Some server equipment is very picky about this and you may find your images not showing up....better to be safe than sorry.

word4.jpg - 25185 Bytes

you save your wordpad document by clicking the file on your document window and then..... save as....name your doc....html1.rtf....click the arrow on the "save as type"...select....rich text format (RTF)

Make sure you pay attention to the "Save In" section....in this case you will choose (0html) ...you click the down arrow and double click your C:\then look in the window below and fine your (0html) folder double click it until you see the contents of that folder...at this point it should be empty. It should look like the figures below.

word8.jpg - 21434 Bytes

word7.jpg - 17303 Bytes

When you click save and look into your (0html) folder it should now look like this.

word9.jpg - 18291 Bytes

Now open a notepad document and paste the same information (copy info from your saved wordpad document) into it and save as html1.html....click save.

note.jpg - 18871 Bytes

There is a reason for this....your browser will only read a text document (HTML is a text document). So when you want to see what you are doing in your browser you must look at the text document by opening your browser and going to file....open.....click browse and find your html1.html and click ok and it should open your browser showing the page that you have just saved....it will look like this....Example 1

Now I have to admit this is certainly not very exciting but hang in here it will be as we progress.

There is a more simple way to open a html document in your browser and that is simply click on it from your explorer window where it is now saved in your 0html folder.

explorer6.jpg - 23276 Bytes

Double click your html1.html in this new folder and it will open in your browser to the very dull page we have just created.

For practice change the text in the body of your document.
If you want your text to drop to the next line you add <br/> to the end of your sentence.
If you want to drop a line and add an empty line you will add <p/> to the end of your sentence.
Example below:

pract1.jpg - 30357 Bytes

Check it out in your browser HERE.

Save your documents with the added text and your line drops and line spaces. Then look at them in your browser. See what you can do with these simple changes.

These 2 tags of course are a couple of the exceptions to the rules and do not need an ending to the pair of tags they can stand alone.

Now what do you say we spice this page up a bit?
tutorialnext.gif - 3279 Bytes