Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter

Advanced HTML
Frames & Tables
Rounded Table Corners
Flash 5
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics


Related Links
More HTML - The Basics Sites

Sitemap | Contact | Link To Us | Advertise
Report A Problem

HTML - The Basics Tutorial
Part 2 - Adding Text


In part 1 I explained how to declare an HTML document and I explained how HTML was built up using <tag>text</tag>. Below is the HTML you added in the last part.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">




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 Personal Homepage

To do this change the tag:



<title>My Personal 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 SizeStandard Font Size
18 pt
210 pt
312 pt
414 pt
518 pt
624 pt
736 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>


<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 <cente
r> tags like this:

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

Which would display text like this:

Welcome To My Homepage


You have now learnt how to display text on your web page and how to format the color, size and font of it. You have also learnt how to center things on the page. This is the code you should now have for your website.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


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

Part 3

In the next part I will show you more about formatting your text - positioning it on the page and making paragraphs. I will also show you some other tags which you can learn to help with your page design including how to make lists.

© 1999 - 2019