Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
HTML #4 - Advanced Page Layout
You are here: irt.org | Articles | HTML | An Introduction to HTML [ previous next ]
Published on: Sunday 21st June 1998 By: Michael Bednarek
HTML stands for HyperText Markup Language. It is the special code which is used to create pages for the World Wide Web. The HyperText part comes from the clickable hyperlinks which are a feature of almost every Web page, and which allow you to jump from one location to another in an instant.
This article will introduce you to HTML slowly, so that you can get started on creating your own simple Web pages. The next few articles in the series will cover the more advanced areas of HTML, such as formatting text, inserting images, and using tables and frames.
It all started in 1974 when Charles F. Goldfarb invented SGML, or Standard Generalised Markup Language. This was later approved by the International Standards Organisation and has been the parent for all markup languages to date including HTML and XML.
In 1989 Tim Berners-Lee and Robert Cailliau, at the European Laboratory for Particle Physics (CERN) developed a system that they called the World Wide Web. A man called Dan Conolly joined the project soon afterwards and developed the HyperText Markup Language. The first public browser to use HTML was produced by CERN in 1991, but was text only. The first browser to use images was NCSA Mosaic in 1993.
In 1994, CERN and the Massachussetts Institute of Technology (MIT) formed the World Wide Web Consortium (W3C), which is now made up of numerous companies and has been in control of the HTML standard ever since.
HTML 2.0 was released, followed by HTML 3.0 (though this was cancelled soon afterwards because it was too awkward) and HTML 3.2, which is the standard supported by Netscape 3+ and Internet Explorer 3+. We are now up to version 4, which will be fully supported by the fifth generation browsers. However, it is wise to stick to the HTML 3.2 standard for a while because a lot of people are still using version 3 browsers.
Web pages may look like all-singing, all dancing multimedia documents from the outside, but in reality they are simply text files. As a result, all you need to create Web pages is a text editor such as Notepad (the standard Windows editor). There are however some specialist software packages which allow you to create Web pages in a WYSIWYG form - examples include MS FrontPage and Macromedia Dreamweaver. For more information, take a look at Web Page Creation - HTML Editors.
HTML files are saved with the extension .htm or .html - it's best to use the three letter extension for maximum compatibility with all systems. The text contains special commands, called tags, which instruct the browser to display a certain thing on the screen. Images, sounds and other such files are completely separate, but must be present in order for the Web page to work properly.
The basic form of most HTML tags is as follows:
<TAGNAME ATTRIB1="value" ATTRIB2="value2"></TAGNAME>
The TAGNAME is the name of the tag, and identifies the command. It is also known as an element. Some elements also have certain attributes, which affect the behaviour of the element. These attributes can be given values which make them do different things. The example tag above has two attributes, called ATTRIB1 and ATTRIB2. Note that there may be other attributes available for this element, but because they are not mentioned then they remain with default values.
The tag is enclosed with the < and > symbols. This tells the browser that it is reading an HTML tag and it shouldn't display this on the screen. After the initial tag, there is another, smaller tag, which looks similar but has a forward slash before the tag name. This is called the closing tag. Basically, any information which is located between the opening tag (the one with the attributes) and the closing tag, will be affected by that tag. For example, if that tag was an instruction to change the font to Arial, then any text in between the opening and closing tag would be in Arial font. Some HTML elements don't need closing tags; but the majority do.
Now that you have hopefully grasped the basic concept of tags, let's take a look at the tags which are essential for every Web page that you create. These tags
First of all comes the <HTML> tag. Ordinarily (unless you are validating your document) this will be the very first tag in your HTML file, and the closing tag should be the very last one. This tells the browser that everything in between those tags should be treated as an HTML page.
First inside the <HTML> tag comes the <HEAD> tag. Anything inside the <HEAD> tags will not be displayed on the actual Web page - it contains header information. At this point, the only HEAD element we are interested in is the <TITLE> tag, which defines what will be displayed in the browser's title bar.
Next comes the <BODY> tag, which should be placed outside the HEAD tag but inside the HTML tag. The BODY represents what will be displayed in the main browser window. Most of the rest of your HTML code will be put inside this tag.
Once you've done all this and closed all the tags, you will have your first skeleton Web page. To make it a bit more interesting, put some text in between the TITLE tags, and some more in between the BODY tags, so your page looks a bit like this:
<HTML> <HEAD> <TITLE>My First Page</TITLE> </HEAD> <BODY> Welcome to my very first Web page. </BODY> </HTML>
Save this file with the .htm extension and load it up in your Web browser to have a look at your creation. Admittedly, it's looking a bit bare at the moment, but it will soon improve if you stick around. Before you go, however, we'll do a couple of small tweaks to the page.
The sentence that appears on your page will be shown in your browser's default font and font size. To add more text, you just keep writing. However, HTML does not pay any attention to line breaks in your text file, so if you press Enter in Notepad and start a new paragraph, you'll still get a continuous flow of text when viewed through a Web browser. To remedy this, you need to add the line breaks yourself, using the <BR> tag. The <BR> tag is one of the few which does not need to be closed, so you just need to insert it once. Here's an example:
This is line 1.<BR> This is line 2.<BR> This is line 3.<BR>
Now we'll fiddle around with our first element attributes. Unless you're using one of the latest browsers, you will have noticed that the background to your page is an unsightly grey colour. This can be fixed by giving a value to the BGCOLOR attribute of the BODY tag. The BGCOLOR attribute can take two types of values: a colour name, such as "red", "magenta", or "lime"; and a hexadecimal triplet value. The latter is used for precise definition of a colour shade; it is a six digit hexadecimal number made up of the value for red, green and blue (each between 0 and 255 in decimal, or between 0 and FF in hex) and preceded by the # symbol.
This may be a bit confusing, so let's take a look at some examples. Black is made up of no red, no green, and no blue, so it has 0 values for all three: its hex triplet would be #000000. White, on the other hand, is made up of full shades of all three primary colours, so it is #FFFFFF. Red is made up of full red, but 0 values for the other two colours: #FF0000. Similarly, green is #00FF00 and blue is #0000FF.
Okay - so to change your background colour to red, for example, modify your opening BODY tag so that it now looks like this:
<BODY BGCOLOR="red">
or like this:
<BODY BGCOLOR="#FF0000">
This may make your black text look a bit out of place, so you can change it by giving a value to the TEXT attribute of the BODY tag. It has exactly the same characteristics as BGCOLOR. For example, to have white text on a black background, you would use:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
That's your lot for now - in the next article I'll be explaining how to format your text and how to create hyperlinks on your page.
Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
HTML #4 - Advanced Page Layout
HTML #3 - Making your Web pages more exciting