Introduction
HTML is the language that makes the web work. It is the usual programming language used for most web sites you will visit. It is understood by nearly every computer in the world and is one of the most universal ways of creating documents. HTML may not have the best formatting tools and you cannot guarantee that your pages will look the same in every single browser but without it there would be no internet.
You can, of course, use a WYSIWYG (What You See Is What You Get) HTML editor to make websites but they have 3 main disadvantages:
- They sometimes use excess code to create a look on a page which slows down loading times
- They do not always create fully compatible code
- Some WYSIWYG editors change any HTML code you enter by hand
Because of these you can create much better pages by writing HTML by hand. I must admit that I don't do this much because it is much slower than using a WYSIWYG editor but I still know HTML as it is always good to have a background knowledge. I assure you that if you learn HTML you will create better web pages.
This tutorial will show you the basics of writing HTML.
What Software?
You do not actually need any specialist software to write HTML code and many web designers argue that the best web sites are created in Notepad! For this tutorial, though, I will be using one of my favorite web design programs, FirstPage 2000. It is free and you can download it here.
Some of the advantages of using an HTML editor is that it will color code your HTML code so that it is easier to read, 'clean up' your code when you have finished, and you can use buttons in the software to insert repetitive code.
It doesn't matter if you are using Notepad, FirstPage 2000 or another HTML editor, this tutorial will actually be teaching you the language.
Understanding HTML
The actual HTML language is very easy to learn once you know the basics. HTML is made up of a tag. A tag is a piece of text contained in <> and looks something like this:
<tag>
There are two types of tag. Opening and closing tags. Closing tags are only different as they have a / before them:
</tag>
Tags appear in pairs like this:
<tag></tag>
You are probably not really understanding this so I will explain further. Anything between two tags will have those tags applied to them. A good example of this is using the <center> tag to center align text:
<center>Text in here is centered</center>
Nearly all tags have a closing tag but a few do not. What you must remember is:
<Tag>Text</Tag>
Declaring HTML
Open the program you are using to write HTML. If you are using an HTML editor you will have some code already entered. If you do not have it already, enter the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
I will explain what all this means below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
This tells the browser what language is being used for the page. It is not entirely necessary but it is good to add it in.
<html>
Tells the browser that this is the beginning of an HTML document.
<head>
This is the beginning of the header section. The header section contains the configuration options for the page (like title).
<title>Untitled</title>
This tells the browser what to display as the title of the page. This appears in the title bar at the top of the browser. Enter the name of your page between the <title> tags.
</head>
End of the header section.
<body>
</body>
Everything between these is in the body of the page. This is where all text, images etc. are. This is the most important part of the page.
</html>
Shows the end of the HTML document.
Summary
This concludes this week's tutorial. You have learned how HTML is structured using <tag>text</tag>. You must always remember that whatever is between a starting tag <tag> and an ending tag </tag> will have the tag applied to it. You have also learned how to set the page's title and declare an HTML document |