<CENTER>
A Basic HTML Page
<H1> A Basic HTML Page</H1>
(The actual code to call it)
(The large text above is a header, called with the <H1> tag. The text has also been centered with the
<CENTER> tag. Remember, to close any tag function, you use the </> in front of the text call
like this </CENTER> or for the header </H1>. You notice how the "normal" text size is displayed
without having to tell the document to be that size? By default, an HTML page will display any text that is not
"tagged" to be a different size or style to be the default size of whatever someone may have their browser
set to. Example, say you use Internet Explorer, by default it will have a setting of a font size of 12cpi
(Characters per inch) thus your browser will display this text as such, easy huh? You can change the font size
on your browser by clicking on the "A" button on the toolbar.
</CENTER>
(we just closed the CENTER tag and all text will now default to Left of Page Alignment)
Remember to keep in mind the basic structure of any HTML page and the order it should be listed in:
<HTML>
<TITLE>Page Name</TITLE>
<HEAD>Can Contain Document Info Like Search Tags</HEAD>
<BODY>Below this tag is where you do the actual page work
*Note: Within the BODY tag you can put document information, this is explained below.
You only use the </BODY> and the </HTML> closing tags at the end of your document.
For our <BODY> attributes in this document we have used the following calls to load a default
color and a graphics image with this:
<BODY background="sandol.gif">
You see above we are telling the document to load the
graphic image "sandol.gif" on it for the actual page background.
You can also use a plain color background instead of a graphic image like
this <BODY BGCOLOR="#FFFFFF"> this will load an HTML page with a plain
white background, refer to the HTML page included in this course that has a
wide variety of colors that can be used. Some editors and other forms of
instruction use commands for color calls in HTML by simply saying
<BODY BGCOLOR="white"> these will work, but we have found if you stick to
the color coding as opposed to the "text" calls, it will work on any browser that
loads your page(s). The two commands, both BGCOLOR and BACKGROUND can be used
together in your BODY command as well, like this:
<BODY BGCOLOR="#FFFFFF" BACKGROUND="sandol.gif">
This will load a white background and lay the "sandol.gif" on top of it, this
can be useful to shade graphic images.
</BODY> - This closes the BODY of your page.
</HTML> - And this closes the HTML page itself.
You see the little "spaces between these lines? This is done in this part of the document with the
<BR> tag, it simply creates a "break" in the text line where needed. This command does
not require a </> closing command.
There is another form of seperating lines and text for proper format on your pages too, it's called
the paragraph seperator or <P> tag. You can use it to start a new paragragh just as you would in a
word processor, be sure to close the block of text you mark to start it with </P> like this.
You will also note the "line" above that seperates the header from the rest of your document, this is
done *very* easily with a simple <HR> command by itself wherever you want one to go on your page.
You do not have to use a </> to close a horizontal line like this, it defaults to the page size. Also, note the
"very" above being bold? This is done with the <B> tag, it needs to be closed like most HTML tags with the
</> tag, a lot of neat little features in a short time huh?
Now, let's see how to put a "graphic image" on your page. Look below at our "home" icon, see how it is
just nicely displayed all by itself?
This is the command to load a graphic image above: <IMG SRC="image.gif">
Graphics can be centered just like text and also be resized if desired, although it's usually not a good idea
to try and make a small image a lot bigger or a large image real small as the graphic will loose it's quality.
Try to stay as close to the original size of the graphic as possible, this will give it the best quality. Note also
that we used a "GIF" image for this example, you can use JPG (or JPEG) images as well. These images will
all be named "image.jpg" instead of "image.gif" (note image is an example name, the extensions are what we
are concerned with).
Here's an example of a command to make this graphic a bit bigger:
<IMG SRC="homeicon.gif" WIDTH=85 HEIGHT=45> This is the command to make it:
Look like this, just a little bit bigger.
See how we used the HEIGHT and WIDTH commands? This is how you
can control an image size. This works for some images, but, note how
the image is destorted a bit now? If you want to increase the size (or reduce it)
a lot, the cleanest way to go about it is use a graphic editor and not try
to control it with HTML tags.
Now let's look at how to make a "link" on your page. Links are by far another widely used item on your HTML
document. They are what tie your page to other pages and resources on the Internet. A link is a URL
(Universal Resouce Language) that searches the Internet for a location and/or paticular page or file.
Here is the command to make a link:
<A HREF="http://www.myweb.net/mypage.html"> My Homepage</A>
Above you see where we are telling the document to look for a page called "mypage.html" located at
"www.myweb.net". If the URL can be found, it will load this page. Also, at the end of our line here we see
it closes the address search line and we have a block of text that says My Homepage followed
by a </A>. What this does, is allow you to make a linked piece of text with whatever name you choose
it to be. Keep in mind, you must remember to use the </A> "link closer" right after the text you want to
be linked, don't try and make a big line of text a link if possible, simplicity is the key.
This is the "clickable" part you see on all Web Pages like this:
My Homepage
Of course the link above is an example, it will not take you anywhere special! This is one part of HTML design
to make sure you have current and acurate for many obvious reasons, mainly, if people click on your "link" and
it takes them to nowhere and the get they screen URL NOT FOUND all the time, it won't look real good!
This should give you a good start to make your first page, remember, keep the first page you make simple
and get it all correct before you try any of the extra features that HTML has to offer. Getting a firm grasp on the
in's and out's of the basics first will only make the advanced parts that much easier!
Back to the HTML Tutorial Index
I stuck these in down here as a reminder to not forget to close your document with these lines!
</BODY>
</HTML>