What is HTML?
HTML is the acronym for "Hyper Text Markup Language".
In a nutshell, HTML is a set of commands (or tags) that tell a browser
how to display the information you wish to present. Text, Colors, Images,
Links, CGI Scripts and Forms, are all controlled by the proper placement
of these commands. Basic HTML files are saved in .htm and .html file extensions.
HTML files can be viewed in any text editor like notepad or wordpad (to
see the actual commands), as well as by your browser (to see the visual
output of the commands).
Basic HTML
The tags are placed in brackets...<
>...anything else in an HTML document not in a bracket represents text.
Many tags require opening and closing commands, such as the three required
elements of any HTML document...
<HTML></HTML>
Informs the browser that this is an HTML document.
<HEAD></HEAD>
This area contains the <TITLE></TITLE>
tag, as well as <META> tags
containing information about the document.
<BODY></BODY>
The body tag contains
information about how to present the text, links and background image.
Hexadecimal (6) number or letter codes are used most commonly to determine
the colors to be used for display. All or none of these elements may be
present. If the elements are not present the browsers default selections
are displayed.
BGCOLOR="FFFFFF"
would display a white background.
TEXT="000000"
would display Black text.
LINK="0000FF"
would display all links in a blue color.
ALINK="800000"
would display Active Links red. An Active Link is one that is in the process
of being clicked on.
VLINK="800080"
would display Visited Links in purple.
BACKGROUND="red.jpg"
would tile the graphic "red.jpg" as the background, replacing the BGCOLOR
with a Background image. Note that the graphic "red.jpg"
is only as an example, and must be replaced with your own graphic.
The required elements make up what can be described
as a basic HTML template. A Template is a set of base tags to make an HTML
document appear a certain way. Below is a Template containing just the
required HTML elements.
Note the Title appears in the upper part of your
browser screen.
Note the placement of the text, and where it appears
on the example page. This is an example of the default placement of text
on a webpage.
Let's Spice it up a liitle...Stage 1
Once a basic structure has been laid out,
we are ready to spice up the pages a little bit with the most common HTML
tags. These tags control the placement of text, images and links.
HTML TAG
Purpose/Results
Usage
Attributes
<P></P>
Paragraph
-creates a new line before and
after a paragraph.
<P>Blah,blah,blah</P>
ALIGN
<H1></H1>
Heading
<H1>Heading</H1>
<BLOCKQUOTE>
</BLOCKQUOTE>
Indents
-Works like a TAB function
<BLOCKQUOTE>Text
</BLOCKQUOTE>
<BR>
Line Break
<BR>
<I></I>
Italics
<I>Text</I>
<B></B>
Bold Text
<B>Text</B>
<U></U>
Underline
<U>Text</U>
<SUB></SUB>
Subscript
<SUB>Text</SUB>
<HR>
Horizontal Rule
<HR>
<CENTER></CENTER>
You got it...centering!
-This is a Netscape originated
tag, which does not always work on all browsers. The correct way to center
is to use Center as an attribute with <P>.
<CENTER>Text
or Image</CENTER>
<FONT></FONT>
Determines Text Characteristics
<FONT ATTRIBUTE>Text</FONT>
COLOR
SIZE
FACE
<A></A>
Anchor or Link
-Specifically, Anchors define a
target on a page (moving to a specific part of a page)
-Links point to another page or
URL and may also include a target.
Mailto:
-The basic EMAIL Box
<A href="Http://etc">Link</A>
<A Href="Http://..#target">Link
w/Target</A>
<A NAME="target">
-placing this tag at a specific
point in a page creates a target allowing a link to point to a specific
spot in a page. Target is replaced by the name of the target.
<A HREF="mailto:carville@easyaccess.net">EMail
Me</A>
Format for a mailbox to me.
<IMG>
Display Image
-the Attributes described below
are very important when placing images on a page, for they offer much greater
control of the appearance of the image.
<IMG SRC="filname.extension" ATTRIBUTE(S)>
ALT
ALIGN
HEIGHT
WIDTH
HSPACE
VSPACE
LOW SRC
Attributes
Attribute
Purpose
Usage
Options
ALIGN
Set alignment of paragraphs, tables, and images.
Used with other attributes as definitions.
<P ALIGN= "center">Text</P>
with an image...
<IMG SRC="red.jpg" ALIGN="center">
LEFT
RIGHT
CENTER
WIDTH
Set width of <HR>,
tables, and images. Defines a number of Pixels or a Percentage of the Window
<HR Width=100> or
<TABLE WIDTH=500>
FONT Attributes
COLOR, SIZE, FACE
Variables to customize the appearance of text.
-Color and size are obvious, but
FACE allows you to choose which Font style you would like your text to
appear in. The only catch is that the viewer must have that Font available
on their own system.
Defines a name to be displayed while the image is loading OR for text
only browsers.
<IMG SRC="red.jpg"
ALT="Red Graphic" ALIGN="center" WIDTH="100" HEIGHT="100" BORDER="5" VSPACE="10"
HSPACE="10"
LOW SRC="red2.jpg" >
-Using these attributes is very important
since it allows the browser to set aside the space required for an image,
and allows for the rest of the page to continue loading.
HEIGHT/WIDTH
Defines in a number of Pixels, the height and
width of an image.
HSPACE
Sets Horizontal Margins around an Image
VSPACE
Sets Vertical Margins around an Image
LOW SRC
This Attribute can be used to load a smaller, therefore faster image,
while the regular images loads. Especially useful for use with animations.
Now let's see the tags we have defined in stage 1 in action.
First we take the Basic HTML Template we made
above and add the new items to the page.
</BLOCKQUOTE>
Regular Text, <B>Bold Text</B>,
<I>Italics
Text</I>,
<U>Underlined
Text</U>Line
Break
<BR>Subscript<SUB>Text</SUB><BR>
<FONT FACE="ARIAL"><FONT COLOR="#800000"><FONT SIZE=+2>Bigger
Maroon Text in Arial</FONT></FONT></FONT><BR>
<FONT FACE="ARIAL"><FONT COLOR="#800000">Maroon
Text in Arial</FONT></FONT><BR> <FONT
SIZE=+2>Bigger Text </FONT><BR><A HREF="htmlhelp.html">Link
Back To the HTML Help Page</A><BR>
<BR><A HREF="htmlhelp.html#anchor">Link
to the anchor on the HTML Help Page</A><BR>
<A HREF="mailto:carville@easyaccess.net">Email
Link</A>
<BR> How about a Horizontal
rule...
<HR>
How about a Horizontal rule, but smaller... <BR>
<HR width=300>
<BR>How about a Horizontal rule, but
thicker...
<HR size="7">
<BR>Same Thing, but properly centered...
<BR>
<P ALIGN="center"><HR size="7"></P>
<BR>
<BR>In The Center...<BR>
<BR><P ALIGN="center"><IMG SRC="red.jpg"
ALT="Red Graphic" HSPACE=10 VSPACE=10 BORDER=5 HEIGHT=100 WIDTH=100></P>
<BR><P><P><P>
<BR>To the right of some text...
<BR><IMG SRC="red.jpg" ALT="Red Graphic"
HSPACE=10 VSPACE=10 BORDER=5 HEIGHT=100 WIDTH=100 ALIGN=RIGHT>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTexTextTextTextTextTextTextT
<BR><P><P><P>
<BR>To the left of some text...
<BR><IMG SRC="red.jpg" ALT="Red Graphic"
HSPACE=10 VSPACE=10 BORDER=5 HEIGHT=100 WIDTH=100 ALIGN=LEFT>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTexTextTextTextTextTextTextT
<BR><P><P><P><P>
</BODY>
</HTML>
<A NAME="anchor">This
the HTML for the target used by link in the example page. The tag is in
this page, embedded here.
The tags above contain all of the basic tags to
make a basic webpage. The next step to take after reviewing this information
and becoming familiar with it is to practice writing your own HTML.
How to write your fist HTML Page...
Read and gather information.
Surf the Web for information such as this.
Go to the Library and get a book. Most libraries
have stocks of computer related books in the Non-Fiction section..usually
.004 in the Dewey Decimal system
Surf the Web for ideas.
Be a critic. Decide what you don't like and what
you do. When you see something that you like use this important tip...
Most Browsers allow you to "View the Source" of the HTML used to create
the page you are looking at. Once the page is fully loaded there is generally
an option on the top menu bar for this. Both Netscape Navigator and Internet
Explorer have a "view" menu third from the left on their menu. When you
select "Source" the HTML of the page will appear on a separate screen.
By viewing the source you are able to see how it's done! You can copy and
paste parts of the code for use in your own page. Watch out for copyrighted
material, but generally web pages are like templates, and available free
for the taking.
One more tip on this important subject...Do not feel overwhelmed if you
cannot understand everything you see! The page will most certainly be more
advanced than you are. Look for things you recognize...notice what they
do. The more you do it, you will suddenly realize you understand more and
more.
Get Some Software
Don't learn on a visual editor like Netscape. Do we give our kids calculators
to learn the multiplication tables? Of course not. They must learn the
process of multiplication, as you must learn the process of making a web
page. Later on when you are accomplished, you will be able to tell what
is wrong when the visual editor makes a change to your page that doesn't
work. It will happen...and you will be able to look at the HTML, and fix
the problem in 1 or 2 minutes, instead of waiting for an email to be answered
from your webmaster.
Practice,Practice,Practice...
Begin by making simple pages. Use the basic template
and have 1 paragraph as text. Save the page and see what it looks like
in your browser(you can open any webpage that is on your system with your
browser). Add an image, save it and check it out. Try this with different
types of tags. Continue doing this until you know that when you type this
it does that.
Once you have an understanding of the basic tags,
start making other pages and linking them together. Use links and anchors
to make navigating the pages easier.
And finally as you feel comfortable, begin to use
more advanced HTML. Incorporate Tables and Forms into your pages. Maybe
weave in a cgi script.
You will know when you are ready, because the
ideas will start popping in your head. If you are unsure of how to do it...look
for someone else's page who has done something similiar. The answers are
out there all around us!
Web pages should be continually evolving. When they
stop evolving, the viewers will stop coming. Keep your pages fresh! The
worst Title for a page right now might be something like..."Will
Clinton win a second term?"...would you go
to that page?
And keep it simple! Unless your goal is to be
the hottest techno site around, practice style and grace with simplicity.
You will get and keep more viewers...or if you are a business...more CUSTOMERS!
Use your graphics wisely, remembering that they take time to load.
Troubleshooting...Common problems we
all face...
Many things can go wrong in the process of making
webpages. Browsers cannot think, so they will not be able to figure out
what you meant to do. They are going to display the webpage exactly as
you tell it to, and not question why. Here are a few of the most common
problems and some solutions.
Everything is is in italics, or a link, or centered,
or the wrong size etc...
You probably did not close a tag...</a>
to end a Link...</i>
to end Italics etc.
A first step in troubleshooting a problem is
to View the Source. Look for these problems...from the point in the page
that the problem begins. Netscape does a helpful thing as well. When viewing
the source, improper HTML will blink from the point of the problem. Once
I forgot to put the closing bracket on the <TITLE> tag. The browser
thought everything was a title and displayed the whole page in one line...going
off to the right. One little bracket can do all that.
