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!
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.
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.
Notice the tags, flags or commands come in pairs
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:
Each of these pairs must be bracketed with
Okay we are ready to start.
Just in case you are new to the computer and you are saying where the heck is wordpad?
go to start.....programs.....accessories....wordpad.....voile up pops your wordpad window ready to have something entered into it.
Learning to Copy and Paste:
<TITLE> type_Document_Title_here </TITLE>
Information goes here.
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.
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.
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.
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.
Now go back to your wordpad document.
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.
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.
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.
When you click save and look into your (0html) folder it should now look like this.
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.
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.
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.
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.