enchantress.net - Offering multitudes of high quality, original site design tools, and much more!

enchantress.net Resources
The Basic HTML Tutorial

The best way to view this page is to be already online, as there are "hypertext links" (links to other online websites) that will not be accessible unless you are already online. The reason for the hypertext links? Simple. There is no use in re-inventing the wheel. Where the documentation for the point I'm trying to convey is already online, I have chosen to link you, rather than retype the entire subject matter.

The Basics of an HTML Page

There are so many different ways of getting yourself on the "world wide web" these days that the true simplicity of it has become a bit clouded. HTML is a "language" of sorts that requires no special computer program to write - you can open up a blank page in notepad, put some HTML "tags" on it, then save as "all files" and type in the extension .html or .htm (as opposed to .txt or .doc) and save it. Voila! You have an HTML page!

Briefly, HTML requires opening and closing statements - every time you open a command, you need to close it when you are through with it (such as bold facing a title). Your documents will always have a minimum of the following HTML commands, in the same order as listed here:

<HTML> This is the language that tells the page you are writing an HTML page
<HEAD> This places you in the "header" section of the page
<TITLE> The title is what appears in the uppermost left corner of the viewer's page, in the "title bar", and also as the title if someone "bookmarks" your page
</TITLE> This is the command that "closes" the title
</HEAD> This is the command that "closes" the "header" section of the page
<BODY> This places you in the "body" section of the page
</BODY> This is the command that "closes" the body
</HTML> This is the command that "closes" the HTML language

Two little notes here: ⁽¹⁾ The above tags are only used once within a document. All other tags are used as required; just remember to close them when you're through with them! ⁽²⁾ I am, in this document, showing you all the HTML tags (or commands) in upper case. HTML is not case sensitive - generally, I use lower case HTML when I'm typing for my own pages.

To be perfectly honest, that brief listing of HTML commands is all you need to place a basic page on the internet. In between the <TITLE> and </TITLE> commands, you would type the title of your page - in this case, I have typed in Land of Enchantment - Resources, Tips, Tricks Graphics and Html Tutorials. It is not necessary to place anything in the "header" section at all; generally, I place all of my "headers" directly in the "body" section. You can type everything you want in your page between the <BODY> and </BODY> commands; then you're all done and ready to save with the .html or .htm extension for uploading to a host!

A Bit More on HTML "tags"

I have said before that every HTML tag requires opening and closing; there are two exceptions to this, which are the line break and the paragraph break. When you are typing and you want to go to the next line, you hit return. In HTML, you would type in at the end of a line. When you are typing and you want to go to the next paragraph, you hit return twice. In HTML, you would type in at the end of the paragraph.

The following is a brief listing of some of the "special effects" for formatting in HTML (note that you enter the text you want to be affected after the opening tag but before the closing tag):

Opens and closes boldfaced typing
 Opens and closes italics
 Opens and closes underlining
<CENTER> </CENTER> Centers the line(s) on the page contained between the tags
<BLINK> </BLINK> Causes the words between the tags to "blink" on and off
 Opens and closes superscript
 Opens and closes subscript

Why do I need to know this if I have an HTML Editor?

Well, perhaps you don't, but if you don't know it, then you can't troubleshoot when your page is not performing as intended. There are many, many ways now to have HTML "written" for you, from very expensive WYSIWYG dedicated programs to the more recent releases of standard word processing programs to freeware. I personally use Lightning HTML Editor, a freeware program that allows me to type myself, but has a "preview page" feature, so I can look as I go to see how my work is coming along. I also prefer the use of this type program when inserting graphics, because it will automatically get the correct pixel height and width, which is almost critical if you don't happen to know them yourself! Another program that appears to be freeware, which I have never used myself, but it has good reviews from others, is Web Wizard, the Duke of URL. (Catchy name, huh???)

I really do suggest you take advantage of one of the excellent freeware programs, while at the same time, learning how to actually utilize HTML instead of just typing words and letting some *magic program* do what it wants to with what you've written. Personal opinion, of course, and we all have differing opinions...

What About Color?

There are two different ways to use color in HTML pages - the background color, and the font color. Each color recognized by HTML is defined with a six character (alpha-numeric)color specifier. If you don't know the six character color specifier for a color you want to use, an excellent resource is Hype's Color Specifier.

First, we will address placing color in the background of your page. This is done in the <BODY> statement, and is accomplished by adding the statement BGCOLOR="#000000" into the <BODY> statement. In other words, your statement now looks like this:

The 000000 specifier is the specifier for the color black, which is what I have used on this page. Note also that when you do your closing statement, </BODY>, it is not necessary to add anything else, as multiple statements opened in an initial statement are all closed with just the first word of the statement, with the "/" in front of it.

Now, changing the color of your font works the same way. If you want to specify a color different from black (which is the default), you do it inside a statement. A dark green is #006400, so we would change the text to dark green by typing in the statement and it will remain green until you close it with the statement.

Talk to me about Fonts

The font is the appearance of the writing on your page. Most Windows and Mac users these days are quite familiar with fonts, and how to use them. You can use them virtually the same way in HTML documents, except you have to use HTML tags to designate what you're doing. The "default" font for HTML is Times New Roman; many people use it and love it. This particular document uses the font Arial in one size smaller than the default. To accomplish this, I have inserted the following HTML tag at the beginning of the document, directly after the <BODY> command:

I had to specify a color number, since I chose NOT to use the default text color of black. If you want a different color to apply to all or most of your content, that would be the place to insert the color statement.

Now, I'm sure you've been to many websites that use some particular font that you find quite gorgeous, and you know it isn't a graphic, so you wonder just how they did it! I have a rather extensive online tutorial on that subject, so there is no need to repeat it here. Just follow that link to gain an understanding on the use of various fonts in HTML documents.

Moving on to Graphics

Everything you've read thus far will allow you to make a complete webpage, but it will be a little "lonely" with no background or other graphics. The graphics you use will depend not only on your own personal tastes, but also on the message you are trying to convey on the page that uses the graphics. An important note to remember: HTML loads quickly; graphics do not. The more graphics you place on your page, the longer it will take for the page to load. The key to a successful webpage is a combination of aesthetically pleasing, fast loading graphics and the content of the page itself. If your content is of high quality but your loading time is very long, you very well may lose many potential visitors that get tired of waiting for the graphics to load. Having said all that, let's see how to put graphics onto the page!

The image you are using MUST end with either .jpg or .gif - those are the only two file extensions that "work" with all the browsers, and you MUST remember, when publishing, to upload the HTML document and the image file. Now, for the purpose of illustration, let's assume we are going to put in an image with the filename image.jpg. The particular image is 100 pixels wide by 200 pixels high. It is a picture of your pride and joy. The HTML for that image would look like this:

It doesn't matter if you put the "height" before the "width" or vice versa - as long as they are there. Why? Because giving the image dimensions up front will allow the text on your page to load immediately, and the graphics afterward. If you don't use the dimensions, the page will still load, but the viewer will be sitting there facing NOTHING until everything loads, and you can count on losing a lot of visitors that way! Whatever you type inside the quotation marks after the ALT tag is what will show up on the page before the image loads and later, if the mouse is run over the image. For this particular image, the tag "BORDER=0" is not really necessary; however, if you link this image to another page, the "BORDER=0" statement is the one that will keep the icky blue box from surrounding your linked image.

If you simply use the above HTML for your image, the image will show up on the page where you've typed the HTML, but it will be to the far left. If you want the image centered on the page, just precede the above with <CENTER> and close the statement with </CENTER>. To keep your HTML "clean", you would place the closing command immediately after the IMG SRC statement and before the new paragraph tag. This is called "nesting" - you close all HTML tags in the reverse order in which they were opened.

Want to know how to put those little "picture frames" around the images you put on your page? I also have an extensive help page online covering that subject; this link will transport you there!

And the Background Graphics?

Ahhhhh, this one is really simple. For illustrative purposes, let's assume our background image has the filename back.jpg. The tag for the background goes directly into the <BODY> statement. Let's use the same statement we used previously, with the background color set to white, but adding the background image:

That's all there is to the background. A bit too simple, huh??? As I said before, there is nothing difficult about HTML - it has just recently become clouded and mysterious with the onset of so many different HTML editors.

How do I link to another page?

Again, this is simple. Let assume you want to link to my base website, "Land of Enchantment", which is located at www.enchantress.net. And, for the first example, we will say you are linking only by means of text, so that you get the same effect as the link above. Your HTML tag would appear as follows:

<A HREF="http://www.enchantress.net">Land of Enchantment</A>

If you had an image that you wanted to link to an address, you would do it in the same manner, except rather than using the words "Land of Enchantment", you would put in the IMG SRC tag as instructed in this document.

What about making it so people can e-Mail me?

Basically, it is the same as linking to another page, EXCEPT with e-Mail you add "MAILTO:" to the "A HREF" statement. Let's say your address is myaddy@mailcom. Your HTML would look like this:

Or, of course, you could insert an e-Mail graphic in place of the words "e-Mail me" in the example above.

A word about Structure

If you're planning on a massive website, you should give a little up-front thought to the structure of your website. You know how your hard drive is set up - with directories and sub-directories and so forth? You can set up your website the same way on your host, which often makes it much easier to make changes as time goes on. It certainly is not necessary to subdivide out your website, but most find it much more practical in keeping the various categories "categorized".

This brings us to "absolute" and "relative" addresses. By "address", we are talking URL (universal resource locator), the thing you type in after http:// that sends the command out requesting a page or image and returns that page or image to your screen. In all the examples listed above, we have used "relative" addresses, meaning by pointing to no specific location with "back.jpg" and "image.jpg", the browser will assume the files are in the same directory at the same URL as the HTML document.

Let's assume you want all your graphics in one subdirectory (we'll name it "graphics"), and all your files in the main directory. The background command would then read as follows:

It gets more complicated depending on the depth of directories you use, but we'll skip that part, as as this is meant to be a "beginner" tutorial. A word of caution: Let's assume your website is at www.yourplace.com/~mine and you're doing a page with absolute addresses but no subdirectories. Your background command would read as follows:

This is fine, but only if you are the "owner" of the absolute address. Placing images on your website using the absolute address of a graphic on someone else's website is considered "bandwidth theft," and while there is not, at this writing, and actual law against it, it is highly unethical and many website host providers will discontinue service to the user if they find the user is engaged in "bandwidth theft."

So how do I "publish" my page?

I'm using the term "publish" loosely, to define taking the page you've created and magically placing it on the internet for others to view. The first thing you will need is your own URL. If you are using a local company as your ISP (Internet Service Provider), you may already have space available through them for a website - call and ask! If you do not have space through your ISP, you can get "free" space from a number of "host servers", including Geocities, Angelfire, Tripod, and Xoom. The benefit of a "free" space host server is (duh) it doesn't cost you anything, plus, the listed free host servers have their own FTP (file transfer protocol) utility built in to the online screen, so you don't have to get an additional program or worry about how to use your browser's FTP function. The drawbacks? Your space is limited, you will be required to have advertising banners (and/or pop-up advertising screens), loading time is generally slower (because so many people use the free services), and you will be somewhat limited in the structure and layout of your pages, depending on the host server.

If you want complete flexibility, plus a heck of a lot more space, you'll have to find a host that offers a good amount of space for your files plus a generous monthly bandwidth limit (read the fine print - there is no such thing as "unlimited" traffic!!!) for the least amount of money. I am not going to give a listing here, as there are SO many different hosts, and quoting their current price in this document would be detrimental in the event of rate changes. I will, however, point you to the service I have used for over two years, Springweb, and their lower rate sister company, 2u.to. This will give you an idea of what is available in the for fee arena.

If you opt for an account that does not have an online FTP utility, you will need a method of transferring your files from your hard drive to your host server's hard drive. This is done via an FTP program, and is called "uploading" to your server. There are a few good standalone FTP programs, which are modestly priced (a few years ago, they were free); the PBS FTP Guide contains a listing of the most recent FTP software programs for PC and Mac platforms. I personally use WS-FTP, which is listed among others with PBS.

[Resources Index]