An Introduction to HTML 101. OK this is pretty basic. Many of you
probably know more HTML than I. If so, please feel free to skip this
topic.
A few of you know little or no HTML. Despite the convenience of
using Drag and Drop Editors, I can assure you that at some time you
will be confronted with the desire to use some HTML directly. It
may be that you want to add a nifty site counter that was supplied in
HTML form. Maybe you found a site that lets you create a Top 10
list but you must do it using HTML. Whenever the need, knowledge
of a little HTML will take you a long way.
The good news is that HTML is quite easy to learn and use. The
hardest part in fact is the name HTML (Hyper Text Markup
Language) which was probably coined by the same people that
brought you such cryptic fair as CSS (Cascading Style Sheets) and
URL (Universal Resource Locator) amongst many others.
Here is your first Web Page
<HTML>
<HEAD>
</HEAD>
<BODY>
I can add as much text as I want to here.
</BODY>
</HTML>
If you take this text and save it in a file with a ".htm" or ".html"
extension then post it to your web site, you will see a very valid Web
Page.
So how does this work? You will notice three word pairs surrounded
by less than "<" and greater than brackets ">" The brackets are an
instruction to the Browser to interpret the text inside as a command.
Most commands (referred to as "tags") have a start and stop
instruction. The stop instruction is the tag preceded with a backslash
"/". HTML tags are always "interpreted" by the browser and are
never displayed.
Every HTML document should start with the <HTML> tag and end
with the </HTML> end tag. This is only natural since it tells the
Browser that a HTML page is starting and when it is ending.
Everything in-between should consequently be interpreted as HTML
(unless instructed otherwise).
The two other commands that are basic to every HTML document
are the <HEAD></HEAD> and <BODY></BODY> tags. The
<HEAD> tag always comes first and tells the browser that document
"header" information is being entered. Header information can include
the title, author, copyright-notice and search engine Meta tags
amongst many others.
Following the </HEAD> terminating tag, the <BODY> tag tells the
browser that the following information is to be displayed. In the
figure 1 example, only the text "I can add as much text as I want to
here" is displayed on the page. There is no limit to how much text
you enter. If you want to enter the entire text of "War and Peace"
you can (provided you have permission). When finished, you use the
</BODY> tag.
Pretty simple. The browser will by default automatically format your
text so that it fits the width of each viewer's computer screen and
extend the vertical scroll bar so that the viewer can see the entire
page.
If you do enter "War and Peace" you will quickly notice that your
web page does not conform to good Page Layout conventions even
though you may have thought you entered them. This is because
your Browser will ignore your text document conventions such as
bolding, paragraph separators and text formatting. You are going to
have to enter HTML tags directly into the document to do this.
HTML provides many basic text and paragraph formatting tags.
These are usually entered directly into the body of your text and
interpreted where found. To bold a section of text you would use the
<B></B> tags.
Here is an example of a web page that includes heading information
we have discussed in past issues and some basic text and paragraph
formatting:
<HTML>
<HEAD>
<TITLE>My first Web Page</TITLE>
<META NAME="Description" CONTENT="An HTML example">
<META NAME="Keywords" CONTENT="HTML, example">
</HEAD>
<BODY>
This text will be displayed in the browser's default format. Tags are
available to display <B>bold text</B>, <I>italic text</I> and
<U>underline text</U> amongst many others. I can also use these
tags at the same time if I want to display <B><I><U>bold italicized
and underlined text at the same time</U></I></B>.
<P>
You must use a paragraph tag to separate paragraphs since blank
lines are ignored.
<BR>
A new line without a paragraph space can be started with the break
tag.
</BODY>
<HTML>
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on
creating, maintaining and promoting their web sites.
