HTML Tutorial

Codes, tags and colors to customize Web layout and optimize ads and search engine traffic.

Jul 14, 2006

Whether it's customizing a MySpace layout, or adding AdSense to a blog, HTML is the language of the web that enables us to build our online presence.

With the popularity of open access web publishing tools such as MySpace, Blogger, and various WordPress hosts, it has become necessary to learn a little HTML in order to make a blog stand out from the crowd. Even simple MySpace HTML code samples can look daunting if the reader is not familiar with the HTML language.

To give a little HTML help, this HTML tutorial concentrates on understanding a core set of concepts and tags. It will not provide a complete description of all HTML codes in existence, but is designed to allow the reader an insight into HTML Programming that will help them customize HTML templates to give a different look and feel to their MySpace profile, or Blogspot blog.

The HTML Document

An HTML document can be seen as a descriptive container. It provides three levels of description - the overall document type, some information about the contents, and the contents itself. A simple HTML skeleton might look like:

If this is cut and pasted into a document with an .HTML extension, and opened in a web browser, the page will be blank. Nonetheless it is a perfectly valid HTML container and illustrates the simplest example possible.

The reader will note that special instructions to the web browser are enclosed in . These are known as tags, and the HTML, HEAD and BODY tags provide structure to the HTML container.

In the HTML HEAD section, we will usually find the TITLE tag, which gives the title that appears in the web browsers' title bar. We might also have some scripting and style information too, as well as the so-called META tags. While these are all useful to know about, most customizations can be done without understanding them, and so the reader can skip to the BODY of the HTML container.

Basic HTML Tag Set

The BODY of the HTML code is where we place the actual document. The layout of the text, is dictated by more HTML tags. The simplest tags control the appearance of text in a very simple manner:

If we wish to link to another document, which is common in adding affiliate links (for example) to Blogs or MySpace profiles, we use the A HREF HTML tag:

Usually, we should add some attributes to tell the browser what size the image is, and provide text so that text only browsers have something logical to display. It is important to provide the dimensions for another reason : the browser might take some time to download the image, and having the dimensions to hand will allow it to lay out the page whilst waiting for the actual images to be displayed.

Note also that this tag has no closing tag, and so we need to include the '/' character at the end of the tag. This is good practice, but not yet required by the HTML standard.

HTML Color Code

When customizing a template, one of the first things that usually needs to be customized is the color scheme. HTML has two color schemes to choose from. The first is a list of names such as Black, White, Magenta, Aqua, Yellow, and so on, whilst the second is a slightly peculiar looking number. Red, for example can be represented as #FF0000.

We can use the color code to change the color of almost any piece of HTML - text, borders, backgrounds and so on, but not pre-rendered elements such as images. So, to change the text color to red, we might use:

It is worth pointing out at this point that the color code consists of three numbers, the red, green and blue components of the desired color. The number can range (in hexadecimal) from 00 to FF, and FF represents the full intensity of that color.

So, red is #FF0000, green is #00FF00 and blue is #0000FF. White (all three at full intensity) is #FFFFFF and black (all three off) is #000000. Grey would be somewhere in between, either #404040 or #808080 depending on taste.

The HTML Editor

Finally, it is worth noting that HTML is designed to be edited by a simple text editor. However, many good Open Source solutions exist for editing plain HTML; a simple web search will yield a goodly list.

For those who want to go one step further, we explore the world of HTML STYLE in a later tutorial. For now though, this should be enough to get started editing the HTML code in your MySpace profile, adding AdSense to your blog, or just creating a site using pure HTML code.

The copyright of the article HTML Tutorial in Computer Programming is owned by Guy Lecky-Thompson. Permission to republish HTML Tutorial in print or online must be granted by the author in writing.