HTML Lesson

Well, here goes, my first article in HTML Lessons!! The anticipation is unbearable so I will just get right into the good stuff. For the next however long it takes, I will be writing a monthly article about HTML. Each article will cover something new about HTML and those of you who choose to read them all will gain a good knowledge of HTML.

A good start would be to know what HTML is. Someone recently asked me, “where can I get HTML?” Those of you who know what it is will appreciate the slight humour in that quote but others might be asking the same thing to themselves.

HTML Lesson
HTML stands for HyperText Mark-up Language and is used to create web pages. It is not a program, it is not a piece of hardware, it is a very simple computer language. It is used to “mark-up” a whole load of text and therefore make it look better. It allows for images or sound to be used in web pages, for text to be presented and formatted effectively and more!

Although originally planned to do nothing but add structure to a document – for example, tell where paragraphs begin and end, it now has grown and incorporated design techniques and so on. The possibilities of what can be done with HTML are endless. (OK, maybe not endless, but you can do a lot of stuff!!!)

I will start with the absolute basics, but before we get into actually marking up some text I will tell you a bit about writing and saving your file. Many of you may have heard of programs that can be used to write HTML. I will discuss those in another article but for now all you need is a plain text editor – for example, Notepad for Windows or Simpletext for Mac, but not MS Word or other word processors. It needs to be a “plain text” editor and fancy word processors with features like font change save in their own format.

After, when you are finished typing, save your file, but not as a normal text files (*.txt – for windows) but instead as an html file with either an htm or html file extension – for example, index.htm or index.html. You can then open this file for editing in your text editor or in your browser to view the output.

Now let’s get started.

As I said, HTML is about marking up text. This is done using “HTML tags.” Note that it is not necessary to have text. Some pages are made up of nothing but tags. A tag starts with the ‘<‘ sign and ends with a ‘>’ sign. Between these you place text which identifies which tag you are using and customises that tag for your needs. An example of a tag would be <html>, which marks the beginning of the html document. The html tag is a container. A container is made up of a start tag and an end tag. And whatever appears in between the two tags, which can be affected, is affected in whatever way the tag is designed to affect it (that is a lot of effects!!). For example, all the text between the tags may be turned green but images will stay the same colour as they always were because you cannot use html to recolor images. An end tag is identical to the start tag it corresponds to except that between the ‘<‘ and the first letter of the tag name appears a ‘/’. For example, I told you that <html> marks the beginning of a html document and the corresponding end tag is </html>. Whatever is contained between the tags is part of the html document.

An HTML document is made up of two parts, a head and a body. The head should be positioned at the top of the document and is contained within <head> and </head>. The body should appear below the head and is contained within <body> and </body>. The body is the place where you place the page content while the head contains stuff like the title of the page or JavaScript for the page – basically, stuff that doesn’t appear on the page but is still important.

So, the basic structure of a HTML document is:

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

If you want to write some text on the page, then insert it between the <body> & </body> tags as follows:

<html>
  <head>
   
  </head>
  <body>
  This text will appear on the page
  </body>
  </html>

The title of a page generally appears in the title-bar of most browsers. To set a title for your page you use the title container, which uses the tags <title> & </title>. This container is then placed in the head of the page:

  <html>
  <head>
  <title>Welcome to my home-page</title>
  </head>
  <body>
  This text will appear on the page
  </body>
  </html>

That’s all, folks! For this month anyway. Bookmark this page and come back to learn about formatting text, using colour and anything else I decide to add in!!

One thought on “Let’s Get Started in HTML

Leave a Reply

Your email address will not be published.