Welcome to HTML...
This is Lesson 1 in a series of seven that will calmly introduce you to the very basics of Hyper Text Mark-up Language. I suggest you take the Lessons one at a time. By the end of this course, you'll easily know enough to create your own HTML web page.
I think you'll do a whole lot better at your graduation day party by handing out your home page address rather than laughing about how dumb you are about the Internet.
Let's Get Started
I am assuming at the beginning of this course that you know nothing about HTML. I am assuming, however, some computer knowledge. You wouldn't be looking at this page without having some knowledge. To continue with this course, you will need...
1. A computer
2. A browser like Netscape Navigator or Microsoft Internet Explorer. If you're looking at this page, you obviously have one.
3. A word processor. If you have access to Windows "Notepad" or "WordPad" programs or the MAC "Simple Text" program, use that to get started.
If you have those three things, you can write HTML with the best of them. Now here are some questions you may probably have:
Q. I have a MAC (or PC) -- will HTML work on my computer?
A. Yes. HTML does not use any specific platform. It works with simple
text. More on that in a moment...
Q. Must I be logged onto the Internet to do this?
A. Not necessarily. You will write HTML off-line.
Q. Do I need some sort of expensive program to help me write this?
A. No. You will write using just what I outlined above.
Q. Is this going to require a whole new computer language like Basic or
Fortran or some other cryptic, God-awful, silly-lookin', gothic extreme
languages?
A. "No" is the answer.
What is HTML?
H-T-M-L are initials that stand for Hyper Text Markup
Language. Let me break it down for you:
Hyper is the opposite of linear. It used to be that computer programs
had to move in a linear fashion. This before this, this before this, and so on.
HTML does not hold to that pattern and allows the person viewing the World Wide
Web page to go anywhere, any time they want.
Text is what you will use. Real, honest to goodness English letters.
Mark up is what you will do. You will write in plain English and then
mark up what you wrote. More to come on that in the next Lesson.
Language because they needed something that started with "L"
to finish HTML and Hypertext Markup LoMi doesn't sound correctly. Because
it's a language, really -- but the language is plain English.
Beginning to Write
You will actually begin to write HTML starting with Lesson #2.
Here, I want to tell you how you will go about the process.
You will write the HTML document on the word processor, or Notepad, WordPad,
or Simple Text. When you are finished creating the HTML document, you'll then
open the document in a browser, like Netscape Navigator. The browser will
interpret the HTML commands for you and display the Web page.
Now, some people who are already schooled in HTML are going to jump up and
down and yell that you should be using an HTML assistant program because it
makes it easier. That's true, but it also makes it harder to learn as the
program does half the work for you. Take my word for it, use the word processor
for a week, then go to the assistant if you still want to use one. You'll be far
better off for the effort. I have been writing web pages for two years and I'm
still using Notepad or HTML coding for the most of my work
Let's get into the programs you will use to write your HTML document. Keep
this in mind: HTML documents must be text only. When you save an HTML document,
you must save only the text, nothing else.
The reason I am pushing NotePad, WordPad, and Simple Text is that they save
in text-only format without your doing any additional work. They just do it.
But, if you want to start writing on a word processor, like MSWORD, or
WordPerfect, maybe you're just more comfortable on it, if so, read this next
part carefully.
The Word Processor
When you write to the word processor you will need to follow a few
steps:
1. Write the page as you would any other document.
2. When you go to save the document (Here's the trick), ALWAYS choose SAVE
AS.
3. When the SAVE AS box pops up, you will need to save the page in a
specific format. Look at the SAVE AS dialogue box when it pops up: Usually at
the bottom, you find where you will be able to change the file format.
4. If you have a PC, save your document as ASCII TEXT DOS or
just TEXT. Either one will work.
5. If you have a MAC, save your document as TEXT.
6. When I started writing HTML, I saved pages in a floppy disc to
organize. It just helped me keep it all straight, but if you want to save right
to your hard drive, do it. I only offer the floppy disc premise as a suggestion.
Please remember: It is very important to choose SAVE AS EVERY time you
save your document. If you don't, the program won't save as TEXT, but rather in
its default format. In layman's terms -- use SAVE AS or screw up your document.
You see, when you save your document in WORD, or some other word processor
format other than text, you are saving much more than just the letters on the
page. You're saving the margin settings, the tab settings, specific fonts, and a
whole lot of other settings the page needs to be displayed correctly. You don't
want all of that. You just want the text.
NotePad, WordPad, and SimpleText already save in text-only format so if you
use one of them as your word processor, you'll get the correct format simply by
saving your document.
How To Name Your Document
What you name your document is very important. You must first give
your document a name and then add a suffix to it. That's the way everything
works in HTML. You give a name and then a suffix.
Follow this format to name your document:
1. Choose a name. Anything. If you have a PC not running
Windows 95, you are limited to eight letters, however.
2. Add a suffix. For all HTML documents, you will add either ".htm"
or ".html".
(".htm" for PCs running Windows 3.x and ".html" for
MAC and Windows 95/98/2000 Machines)
Example: Hhmmmmmm.... Why Do I Do That?
Glad you asked. It's a thing called "association." It's how
computers tell different file types apart. ".html" tells the computer
that this file is an HTML document. When we get into graphics, you'll see a
different suffix. All files used on the Web will follow the format of "name.suffix."
Always.
Okay, why .htm for PCs running Windows 3.x and .html for MAC and Windows
95/98?
Because that's the way the operating systems are made (Windows 3.x, Windows
95/98/2000, and MAC OS are all technically called operating systems). Windows
3.x only allows three letters after the dot. MAC OS and Windows 95/98/2000 allow
four, or more. Your browser allows for both suffixes. It acts upon .html and .htm
in the same fashion.
Why do you keep harping on the fact that I must save in TEXT only?
You're just full of questions! You see, HTML browsers can only read
text. Look at your keyboard. See the letters and numbers and little signs like %
and @ and *? There are 128 in all (read upper- and lowercase letters as two).
That's text. That's what the browser reads. It simply doesn't understand
anything else.
If you'd like to test this theory, then go ahead and create an HTML document
and save it in WORD. Then try and open it in your browser. Nothing will happen.
Go ahead and try it. You won't hurt anything.
Remember that if you are using Notepad, WordPad, or Simple Text, the document
will be saved as text with no extra prompting. Just choose SAVE.
Opening the Document in the Browser
Once you have your HTML document on the floppy disc or your hard
drive, you'll need to open it up in the browser. It's easy enough. Since you're
using a browser to look at this Lesson, follow along.
1. Under the FILE menu at the very top left of this screen, you'll
find OPEN, OPEN FILE, OPEN DOCUMENT, or words to that effect.
2. Click on it. Some browsers give you the dialogue box that allows
you to find your document right away. Internet Explorer, and later versions of
Netscape Navigator, require you to click on a BROWSE button or OPEN FILE button
to get the dialogue box. When the dialogue box opens up, switch to the A:\ drive
(or the floppy disc for MAC users) and open your document. If you saved the file
to your hard drive, get it from there.
3. You might have to then click an OK button. The browser will do the
rest.
One More Thing
You easily have enough to keep you occupied for the first lesson.
Don't worry, the Lessons get less wordy after this.
If you are going to start writing HTML, I suggest you make a point of
learning to look at other authors' HTML pages. You say you're already doing
that, right? Maybe. What I mean is for you to look at the HTML document a person
wrote to present the page you are looking at. Don't look at the pretty page,
look behind it at the HTML document.
Why Would I Do That?
Because you can... but seriously, folks. Let's say you run into a page that
has a really neat layout, or a fancy text pattern, or a strange grouping of
pictures. You'd like to know how to do it.
Well, look, I'm not telling you to steal anything, but let's be honest, if
you see some landscaping you like, you're going to use the idea. If you see a
room layout you like, you will use the idea to help yourself. That's the point
of looking at another page's HTML document. I think it's also the best way to
learn HTML. In fact, I am self-taught in HTML simply by looking at others'
documents. It was the long way around, believe me. You're going to have a much
easier time of it with these Lessons.
Here's how you look at an HTML document (known as the "source
code"):
1. When you find a page you like, click on VIEW at the top of the
screen.
2. Choose DOCUMENT SOURCE from the menu. Sometimes it only reads
SOURCE.
3. The HTML document will appear on the screen.
4. Go ahead. Try it with this page. Click on VIEW and then choose the
SOURCE.
It's going to look like chicken-scratch right now, but by the end of this
course, it'll be readable and you'll be able to find exactly how a certain HTML
presentation was performed.
That's the Lesson for today. Print it out if you'd like and get ready to
delve in and write your first HTML document. See you next week.
EXERCISES: To be submitted next meeting. Write something about
yourself (or simply describe yourself just like what you've seen in any personal
website) using any word processor and follow the
instructions that you have learned in this lesson. (I would suggest you use
either Notepad or WordPad if you are using MS Windows 95/98/ME/2000). Save your
file in a floppy diskette with .htm or .html suffix (name it Exercise1) then
view it in your browser. Don't you worry how will it be displayed in your
browser as long as you can see what have you typed in your word processor. We
will discuss some formatting tags in our next lessons.
I am looking to name a document I just wrote on a PC running Windows 3.1. I want
to name the document "milo". Thus the document must be named "milo.htm".
If it was MAC or Windows 95/98 I would name it "milo.html". Please
notice the dot (period) before .htm and .html. And no quotation marks, I just
put them in here to set the name apart.
Note: All exercises are requirements of this course and will be graded accordingly. Also, keep your own copies of the exercises as you will be using those while creating your own website.
(BONUS) Advantages on using TEXT EDITORS
Most Web Experts will insist that the best way to create HTML documents is the simplest: by hand with text editors. There are many advantages to the pure text environment. First and foremost, text environments demand that you actually learn HTML! Text editors force you to become a knowledgeable coder - eventually you'll know every tag by heart. The other advantage is that you'll never be at the mercy of a software program. You'll know what you're doing and why you're doing it.
Another significant advantage is that troubleshooting is a breeze when you're familiar with what everything means. You can identify trouble spots with ease instead of muddling through fat code produced by a weighty interface.
The better you know HTML, the more creative you can be with it, too. Most software programs are confined to a specific method of doing things - and this method may not always be the most effective or flexible. Software programs are also limited by html version releases and can only keep up with so much information. Knowing code always gives you the edge in terms of what new tricks you choose to add to your HTML repertoire.
Finally, when you know HTML, you can take it anywhere. Whether you end up working within a software package or simply pull up that plain text editor, YOU are the versatile power tool!
Home page lesson 2 lesson 3
Courtesy of OWWA, Dubai
