(t:HTML Basics:t)

In this tutorial we'll cover some of the basics of HTML.

HTML is an acronym for Hyper-Text-Markup-Language. It's a language developed in 1990 for sharing documents over the internet. For an in-depth look at it's history and development you can check out the Wikipedia entry for HTML.

You'll need a good text editor for editing HTML code, something like NOTEPAD should work fine for now:

Open your text editor and enter this code below:

<html> <head> <title>My first web page</title> </head> <body> Hello World! </body> </html>

You can type the previous example in your text editor. Then save it as "test.html".

Most web browsers (i.e. Firefox and Internet Explorer) have a function under the "File" menu entry to open files. For example, in Firefox:

From here you should be able to select the file you just created in your text editor and open it. Once open you should see the following in your browser:

Hello World!

Let's go over this little bit of code:

As you can see, much of this document contains "tags" inside brackets:
<html>, <body> and their closing counterparts </body> and </html>.

Line #1 contains the opening tag for the document. The first tag "HTML" tells the browser this is an HTML document.
The second tag "HEAD" defines the header for this document. The header contains elements which define properties of the document, but not any elements that are actually rendered on the web page.
Within the header tags is a "TITLE" element. This defines a title of the web page which you usually see at the top of the browser window.
After the closing header tag is a "BODY" tag which tells the browser where the beginning of the page content is.
Below the "BODY" tag is the actual content that gets rendered for the web page, i.e. "Hello World!".
Lines #7 and #8 contain the closing tags for the body and the html document. Similar to the first "HTML" and "BODY" tags but with a slash ("/") included.
Almost all HTML elements have closing tags, and ALL closing tags have a slash ("/") preceeding the command.

Now that you understand the concept of "tags" we can get a little more creative by implementing another set of tags and using tag "properties" to modify how text is rendered on the web page.

Try this bit of code in your text editor:

<html> <head> <title>My first web page</title> </head> <body> Hello grandma. My, what big eyes you have! </body> </html>

Save it to "test.html" and open it in your browser.

Incidently you should know that you don't have to "open" the file everytime in your browser. Most browsers have a "Refresh" or "Reload" function as a toolbar button or menu item. You can use this to reload the file after making changes. Some browsers may require you hold the "shift" key down while refreshing the page lest they load a "cached" version of the page and you never see the changes you made.

If all goes well, you should see something like the following:

Hello grandma.
My, what big eyes you have!

Let's go over what was done here, line-by-line...

Lines #1 and #16 are the opening and closing HTML tags for the page.
Lines #2 through #4 contain the header section defined by the "HEAD" tags.
Lines #5 and #15 indicate the "BODY" of the page and the actual rendered content.
Line #6 is the "font" tag. We use the "color" property to change the color of the text. In this case we use the value "blue".
Line #7 is the text we want to display and line #8 is the closing "font" tag for this section of text.
Line #9 uses the "break" tag. This is a simple tag to indicate we want to move to the next line. HTML doesn't recognize regular line-feeds like most documents and text files do. So you have to explicitly indicate them with tags such as this. Notice there is NO closing counterpart for this tag.
Line #10 uses the "font" tag again. But this time the color property is indicated with a "hexadecimal" value "#ff0000".
- This is an "RGB" value.
- RGB is an acronym for Red, Green and Blue.
- It's composed of three values, "ff" for red, "00" for green and "00" for blue. Together the value is "ff0000".
- Each value seperately indicates how much intensity each color should have. The range being 0 to 255 (or 00 to ff in hexadecimal). For example "000000" would be black and "ffffff" would be white.
- In this case RED has the maximum intensity ("ff") while green and blue have no intensity (or "00").
- RGB values of this type are always preceeded with the "#" symbol.
Lines #11 and #13 use the "" and "" tags. This implies a bold, thicker font. The bold tag should always include a closing counterpart around the desired section of text.
Line #14 is the closing counterpart for line #10.
Lines #15 and #16 contain the closing counterparts for lines #1 and #5.

Now add the tags in lines #6 and #16 to modify the above code like so:

<html> <head> <title>My first web page</title> </head> <body> <center> Hello grandma. My, what big eyes you have! </center> </body> </html>

Save the file and refresh it in your browser. You should see something like the following:

Hello grandma.
My, what big eyes you have!

We've encapsulated the font tags and text elements with the "<center>" and "</center>" tags so all the elements within these tags are centered on the page.

Now there's one more popular element we should cover. The "<img>" tag. This allows you to add images to your documents.

Add the tags in lines #16 and #17 to modify the code like so:

Save the file and refresh it in your browser. You should see the following:

Hello grandma.
My, what big eyes you have!

Line #16 adds a line break so the image is displayed underneath the text, rather than to the right of it.
Line #17 implements the "<img>" tag. The image property "src" is set to the location of the image on the internet.
Lines #16 and #17 fall inside the "<center>" and "</center>" tags so the image is centered on the page along with the rest of the content.

This covers some basic concepts of HTML. There a quite a large number of tags and properties you can use to add and modify content. A complete list of tags and their properties is beyond the scope of this tutorial. You can find a more comprehensive reference on the W3C website or by searching the internet for references.