|
Learn
HTML - Lesson 1
Hello. I'm Manu and going to give you a
few simple lessons on how to make a Web
Page. You'll be happy to learn that it's
really pretty simple. The basic idea is
this... A web page is nothing more than
a file, a HTML file to be exact. It's called
HTML because web page documents have the
file extension .html or .htm. HTML stands
for Hyper Text Mark-up Language.
HTML Tags
HTML is very easy to learn ! You will enjoy
it !
Let's start ! You need a simple word processor
such as NotePad or WordPad. These simple
word processors are also called text editors
and are ideal for creating web pages.
Start --> Programs --> Accessories
--> NotePad --> Now type...
<html>
</html>
Each one of those is called a tag. There
is a starting tag and a closing tag. To
make a closing tag just add a</> to
the starting tag. Most, but not all tags
have a closing tag.The first tag in your
HTML document is <html>. This tag
tells your browser that this is the start
of an HTML document. The last tag in your
document is </html>. This tag tells
your browser that this is the end of the
HTML document. Different tags are interpreted
different ways by the browser. Let's proceed...
Every HTML document needs a pair of head
tags. The text between the <head>
tag and the </head> tag is header
information. Header information is not displayed
in the browser window.
<html>
<head>
</head>
</html>
The text between the <title> tags
is the title of your document. The title
is displayed in your browser's caption.
<html>
<head>
<title></title>
</head>
</html>
And the bulk of the page is going to be
within the body tags. The text between the
<body> tags is the text that will
be displayed in your browser.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Give your web page a title, and put some
lines in the bodytag.
<html>
<head>
<title>My first
web page ever !</title>
</head>
<body>
I wanna learn HTML
!
</body>
</html>
Now save it as an HTML file, you can use
either the .htm
or the .html
extension in a new folder. The suffix is
an extension to the name and declares the
kind of document that it is. In HTML, the
suffix is either ".htm" or ".html".
"Htm" or "html" tells
the browser you are working with HTML files
- that is, an HTML document.
You must use ".htm" if you are
not running Windows 95 or higher. Again,
this is no longer an issue and so you can
use either .htm or .html for the file extension.
So if "homepage" is the name of
the HTML document (your web page), you can
have either
Homepage.htm
or Homepage.html
In your Notepad window click File then
Save As. You will be presented with the
Save As dialog box. Save it as Homepage1.htm
on desktop or in some other folder. It is
good to make a seperate folder for all your
webpages.
Congratulations ! You have created a fully
functional Web Page !
CORRECT USE OF
TAGS
We have "beginning" or "opening"
tags (such as <HTML>) and we have
"ending" or "closing"
tags (such as </HTML>). Many elements
consist of an opening tag and a closing
tag. An element that has an opening and
closing tag is referred to as a container
element because anything contained between
these tags are affected by the element.
Closing Tags cannot be placed just anywhere.
Use the "Last In = First Out"
principle or "LIFO". That is,
the "Last" tag "In"
must be the "First" tag "Out".
Another way of stating this is that the
last tag activated must be the first tag
terminated. An example of a correct sequence
of tags is:
<tag1><tag2>
statements </tag2></tag1>
In this example, <tag1> is activated
first, and then <tag2>. Thus <tag2>
must be terminated first with </tag2>
followed by the termination of <tag1>
(</tag1>). In other words, tags are
closed in reverse order to the way they
are opened. Thus the first tag opened must
be the last tag closed. An example of an
incorrect placement of tags is:
<tag1><tag2>
statements </tag1></tag2>
In this example, the last tag opened (<tag2>)
is not the first tag closed. That is, these
tags overlap. </tag2> must come before
</tag1>. Therefore this example does
not satisfy the LIFO principle. Container
tags cannot overlap each other. If you do
not place tags properly, your web page simply
won't work. The following is another example
of a correct use of tags:
<tagA><tagC><tagB><tagD>
statements </tagD></tagB></tagC></tagA>
Note: If you made a mistake typing
in the coding for the web page, switch back
to NotePad and make the correction. Once
the correction is made, all you need to
do is to click on NotePad's Save button
to save the changes. Then switch to your
browser and click on the Reload or Refresh
button to reload the current page.
|
