Introduction
to HTML
By Virtual Mechanics |
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>
is8fig1
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>
Is8fig2
You can look at the HTML of any page using the "View Source"
command in your browser to see how the page was constructed.
Source: "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.
To subscribe send an email to join.imswebtips@list.imswebtips.com
or visit www.IMSWebTips.com
for subscription information and a list of past articles.
More Articles
|
.
|
|
[an error occurred while processing this directive]
|
|
|
|
|
