Basic HTML Tags and Coding

Basic HTML Tags and Coding (a work in progress)

So, you want to create a web page, but don't understand all of that weird code? No problem! HTML really isn't that difficult to learn. While generating really fancy web pages is beyond the scope of this document, it really isn't hard to learn to make simple pages. Once you've learned the basics, pick up a book on web design, and start playing with some of the more advanced topics.

Getting Started: First, all instructions to the web browser will be enclosed in "angle brackets" like this: <>. These instructions are called "tags", and are not displayed to the user. Usually, tags are matched pairs--for example, the tag <b> is used to display bold face text, and the tag </b> is placed at the end of the boldface text like this:

    Sample <b>boldface text</b> with plain text after it.

displays like so:

Sample boldface text with plain text after it.

Some tags are required, while others are optional. For example, all web pages must start and stop with the <html> </html> pair. In fact, the simplest web page, with absolutely no text and only required tags looks like this:

    <html>
      <body>
      </body>
    </html>

although, it's pretty boring, and not terribly useful.

If you want the web browser to display a title for the web page in the browser menubar, include text between the <title> and </title> tags like this:

    <html>
      <head>
        <title>
          This is the page title
        </title>
      </head>
      <body>
      </body>
    </html>

That's great, but still not terribly useful. The next step is adding meaningful content to the web page. Basically, anything between the <body> and </body> tags are the web page content.
Note:For simple pages, the only thing between the <html> and <body> tags that you need to edit is the web page title. While there are tags, such as <meta> or <script>, that will change the way your web page operates, they are beyond the scope of this document.

So, to recreate the classic "Hello, World!" programming example in HTML, you create an HTML file like this:

    <html>
      <head>
        <title>
          This is the page title
        </title>
      </head>
      <body>
        Hello, World!
      </body>
    </html>

Congratulations! You've just created your first web page! Upload it to a web server to see the fruits of your hard work.

Hmmmm.....Your page now has content, but it's still pretty boring. Wouldn't it be great if we could change the background color to something more exciting? Maybe something like....navy blue! This is really easy to do. You see, the HTML tags I have shown you so far have a feature called "attributes". Attributes change the default settings for the tags that you are using. If you want to change the background color of a web page, you give the <body> tag the "bgcolor" attribute, like this:

    <body bgcolor="navy">

Looks pretty simple, right? It is but there is one catch. If you wish to use human-readable names for the colors (black, white, red, green, blue, yellow, magenta, cyan, purple, gray, lime, maroon, navy, olive, silver and teal), you can write the name of the color in the bgcolor attributes. However, you can also use "hexadecimal RGB values" to create customer colors. A full discussion of RGB color is beyond the scope of this Howto, but in short, a hex RGB color consists of a pound sign (to designate a hex number) and six characters consisting of the number 0-9 and the letters a-f, like "#01ad5f". The first two numbers identify the intensity of red (0 is dark, f is bright), the second two are the intensity of green, and the last two are the intensity of blue. So, to make a purple color, you would use "#4A0050", "#000000" is black, and "#CCCCCC" would make a light grey. Once you get the hang of it, it's really not that hard :)

Much better! But, Times New Roman is not the most exciting font (although it is very readable). And, wouldn't it be nice to be able to make larger and smaller font for headings and body text? This is where the <font> tag enters the picture. There are three attributes I almost always use with <font>: face, color and size. For example, the text on this web page is made with the Helvetica font, in Navy Blue, size 3. So, my <font> tag looks like this:

    <font face="helvetica" size="3" color="navy">

All right! The web page is now looking much better. The Purple background and Lime Green text in size 5 was an especially nice touch :) (I didn't say I could teach taste--only the mechanics of web design! :P ) There are many, many ways of aligning (centering, left alignment, right alignment or justifying) web content. Generally speaking, I prefer to use the <div> tag with the align attribute. Here is how it is done:

Centered:

    <div align="center">

Left Alignment:

    <div align="left">

Right Alignment:

    <div align="right">

Right Justified (won't show unless you have a complete line of text, and not always even then, as it isn't supported by all Web browsers):

    <div align="justify">

Next, it would be cool if we could add images to the web page. After all, web documents are usually supposed to be graphical in nature, right? The <img> tag handles loading web graphics, such as JPGs, GIFs and PNGs. The <img> attribute "src=" references the image. For example, on my web server, I have an images directory that includes an image called "geckosmall.gif". To load this image, I use the tag

    <img src="/images/geckosmall.gif">

Some other useful attributes of the <img> tag are height, width, and alt. Height and Width define the size of the image. This is useful if you need to scale an image to fit a certain sized space on the web page. Keep in mind that these attributes will have absolutely no effect on the load times of the image--the larger the original image, the slower it will load, no matter how you set the height and width attributes on the web page. Conversely, if you have a really small image and you try to use the Height and Width attributes to scale the image to a larger size, the image quality will suffer. When you change the height and width attributes, the web browser will shrink or expand the image to fit in the allocated space, but you are still loading the same actual image size.

The Alt attribute prints a description of the image on the web page while it is loading, or if you are using a text only browser like Lynx. It's usually a good idea to include an Alt attribute (no, sometimes I'm lazy so I don't always follow this advice, either).

One last complication to consider is how to reference your images. Suppose you are putting your web page in a home directory on a Unix server. All of your documents are located in /usr/home/janedoe/public_html/. Inside this directory you have a directory called Vacation, and you wish to include an image titled Beach.jpg in this directory in a web page called index.html. There are two ways to reference this image on a Unix server. The first is called "relative referencing", where the server will look up files relative to the current web page. In this case, your <img> tag looks like this:

    <img src="Beach.jpg" width="320" height="240" alt="On the Beach">

If you move your web page to another directory, however, your link will break, and you can no longer see your image (unless you also move your image to the same directory as the web page). Because you did not specify the full path to the image, your web server looks for the image in the same directory as the web page.

The second way to reference an image is by "absolute referencing". In this case, you give the full path to the image file. Since all web documents are located in Jane's public_html directory, and the web server can't (or at least, shouldn't) be able to look above this directory, Beach.jpg is referenced like this:

    <img src="/Vacation/Beach.jpg" width="320" height="240" alt="On the Beach">

While it requires more typing, absolute referencing is less ambiguous and leads to clearer code. Usually, I'll create an images directory on my servers where I can locate global images (such as backgrounds, logos and such). Then, I can reference "/images/whatever.gif" to load the image from any of my web pages. With relative referencing, you have to copy your images to every directory where they are used.

So, now your web page contains a *grin* lovely color scheme, pretty fonts and a gecko image. Your code listing now looks like this:

    <html>
      <head>
        <title>
          This is the page title
        </title>
      </head>
      <body>
        <div align="center">
          <img src="/images/geckosmall.gif" width="100" height="100" alt="small gecko">
        </div>
        <div align="left">
          <font face="helvetica" size="5" color="lime">
            Hello, World!
          </font>
        </div>
      </body>
    </html>

Now that you've got images working, how do you create links to other pages? This is also pretty easy to do. The <a></a> (anchor) tag pair creates links to other documents with the "href=" attribute. So, if you've created a web page, but want to link to this page, you would insert the code

    <a href="http://www.gecko-ak.org/HTML/BasicHTML.shtml">
      HTML Reference Page
    </a>

in your document. If you don't want the page you currently have open to be replaced with the new web page, you include the "target=" attribute like this:

    <a href="http://www.gecko-ak.org/HTML/BasicHTML.shtml" target="Mike's awesome HTML reference page">
      HTML Reference Page
    </a>

When anyone clicks on the link now, a new browser window will open linking to my web page. A word of advice: in general, you should probably avoid opening new windows if the user isn't expecting it. It seems cool at first, but it can be a pain for the user to constantly have to close all of the new windows.

If you do not want to link to a separate web server, such as when you have several web pages on your web server, you do not need to include the "http://server.name" in the "href=" attribute. For example, if I want to link to the home page on my server from this page, I would create a link like this:

    <a href="/index.html">

or if it's within your current directory, like this:

    <a href="page2.html">

At this point, you should be able to create some basic web pages. I'll add another page describing more advanced topics later, such as creating tables, lists and image maps. Until then, have fun with your web pages!

© Michael Wallette/gecko-ak.org 2004
All weg pages, documentation, etc. on the gecko-ak.org web site, except where otherwise notated, may be copied, reproduced, etc. for any non-commercial purposes without any additional permission from the author. Please feel free to link to my site, but please do not include my web pages on your site without giving credit to the original source (a readable URL is sufficient), and please do not claim my work as your own. Come on, how lame is it to steal someone else's content, anway? :)