HTML - The Basics

Part 1 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:

  1. They sometimes use excess code to create a look on a page which slows down loading times
  2. They do not always create fully compatible code
  3. Some WYSIWYG editors change any HTML code you enter by hand

Because of these disadvantages you can create much better pages by writing HTML by hand. 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!

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, Adobe Dreamweaver 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 tags. 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.


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 (such as its 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.


Part 2 - Adding Text

For this section of the tutorial I will show you how to create a simple homepage. The first thing you will want to do is change the title of the page from Untitled to: My Homepage

To do this change the tag:

<title>Untitled</title>

to:

<title>My Homepage</title>

The <font> Tag

The <font></font> tag set are the most common and one of the most versatile tags found in HTML. Using the tags in the basic form they will show text on the page (but they can be changed). To start off we will just display the text:

Welcome To My Homepage

on the screen. To do this you need to add:

<font>Welcome To My Homepage</font>

between the <body> and the </body> tags. This will display the text in a standard font size, black, in Times New Roman. Not the most interesting thing for your homepage.

Size, Color and Face

These are the three things you can set for a piece of text. These are the first tag attributes you have come across. We will start with the Face attribute. Instead of having a new tag for font face (the font it will be displayed in) you add it to the font tag like this:

<font face="Arial">Welcome To My Homepage</font>

As you can see you enclose the name of the font in quotation marks "" after an equals sign. You do not need to include this in the end tag.

More than one attribute can be added to a tag so it is easy to display this in a different size. The only thing you must remember is that sizes in HTML are not the same as normal font sizes (measured in point sizes (pt). They are a single number which relate to a standard font size in the following way:

HTML Font Size Standard Font Size
1 8 pt
2 10 pt
3 12 pt
4 14 pt
5 18 pt
6 24 pt
7 36 pt

You can make a nice large title by changing the tag to the following:

<font face="Arial" size="7">Welcome To My Homepage</font>

As you can see, once you know a tag it is easy to add extra options to it. The final one you will learn is the color tag. You must make sure that you must use the American spelling for this. Color is a little different to the other attributes. It can be changed using an HTML Color Word (a standard color name) but only some color names work with this (you can see a list of them here). You can also use HEX codes. HEX codes are in the format #000000 (# followed by six numbers). The first 2 numbers are the amount of Red, the second 2 are Green and the last 2 are blue. To made this text red you could either use:

<font face="Arial" size="7" color="red">Welcome To My Homepage</font>

or:

<font face="Arial" size="7" color="#FF0000">Welcome To My Homepage</font>

Centering The Text

Finally you will want to center the text so that it looks like a real title. To do this you can use the <center> tag. To do this simply enclose everything you want centered in the <center> tags like this:

<center>
<font face="Arial" size="7" color="red">Welcome To My Homepage</font>
</center>

Which would display text like this:

Welcome To My Homepage

  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

.htaccess tutorial

Part 1 - Introduction In this guide you will find out about the .htaccess file and the power it...

What is Ioncube?

IonCube is a PHP loader designed to prevent unauthorized use of your PHP scripts. IonCube is...

What is PHP?

Short for PHP: Hypertext Preprocessor, an open source, server-side, HTML embedded scripting...

Connecting to MySQL through PHP

Use the following outline to connect and begin querying the MySQL server from within your PHP...

What is the path to sendmail?

When you need the path to sendmail for your scripts, use the following: /usr/sbin/sendmail