Article
Beginners' HTML - Part 1
Page: 1 2
Fonts and Text Formatting
Now that you can create a basic Web page, it's time to make it look a little nicer. This could involve using your own fonts, colors and text sizes to make the page more attractive to the reader.
All font changes are done with the <font> tag. There are a number of attributes you can use with the <font> tag to control the appearance of the text. An attribute is contained within the tag itself (e.g. <font color="red">). The tag is "font", the attribute is "color" and its value is "red." Attributes are used in many different tags, not just fonts.
There are a number of different tags you can use to specify various aspects of the font:
<font face="Verdana">This lets you specify the actual font that will be used. However, the font will only be displayed if it exists on the user's computer, so choose a popular font that most visitors will have.<font color="red">This allows you to specify the color of the text. Most standard color names (eg red, blue etc) will work, though there are special codes that provide a wider range of colors. We'll go into more detail on those later!<font size="4">This attribute lets you specify the size of the text. They are not the sizes you would use with your word processor, but special sizes - so you might have to experiment a little to get the size you want.
You can also use combinations of the attributes, for example:
<font face="Times New Roman" color="yellow" size="4">So now let's add some formatting into our page. Here’s the page as it is now, without any formatting:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
Welcome to my first Web page!
</p>
<p>
The purpose of this Web page is to learn some HTML
so that perhaps I can make a really fantastic Web
page later on.
</p>
<p>
Please come back and visit soon,
<br>
James
</p>
</body>
</html>
And with fonts and colors:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
<font size="4" face="Verdana, Arial" color="red">
Welcome to my first Web page!
</font>
</p>
<p>
<font face="Arial">
The purpose of this Web page is to learn some
HTML so that perhaps I can make a really
fantastic Web page later on.
</font>
</p>
<p>
<font face="Arial">
Please come back and visit soon,
</font>
<br>
<font color="blue" size="+1">
James
</font>
</p>
</body>
</html>
Now you may notice a couple of unfamiliar things in that block of code. Firstly, the 7th line contains an unusual value for the font face:
<font face="Verdana, Arial">This tells the browser to use Verdana as its first font option, but if Verdana is not installed on the viewer's computer, then to try and use Arial instead. If neither Verdana nor Arial are on the user’s computer, then the browser's default font will be used (often something like Times New Roman).
The second trick used is in the final font tag. I have used: <font size="+1">. This tells the browser to make the font size one bigger than the normal font size. The default font size can vary across different browsers and computers, so it is best to use this technique (called relative size) to ensure that everyone gets the right size of text. You can specify +1 to make it bigger and -1 to make it smaller.
Our page is beginning to take shape now. However there are still a few things missing, such as bold and italics. You can set text to be bolded or italicized, with - you guessed it - more HTML tags!
<b> text </b>Bold<i> text </i>Italics<u> text </u>Underline
So here is the final page with everything added in:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
<font size="4" face="Verdana, Arial" color="red">
<u>
Welcome to my first Web page!
</u>
</font>
</p>
<p>
<font face="Arial">
The purpose of this Web page is to learn some
HTML so that perhaps I can make a really
fantastic Web page later on.
</font>
</p>
<p>
<font face="Arial">
Please come back and visit soon,
</font>
<br>
<font color="blue" size="+1">
<u><i>James</i></u>
</font>
</p>
</body>
</html>
There is one other technique for changing the appearance of your pages that you should know about: Cascading Style Sheets, or CSS for short. CSS is an extremely powerful but fairly complex way of specifying all types of formatting. It is too in-depth to go into here in this tutorial, so I am going to point you in the direction of this tutorial to learn CSS.
The article is CSS is easy!, and is written by Kevin Yank. It should help you to grasp a basic understanding of CSS and hopefully use it in some of your pages. I have used the alternative to it (i.e. <font> tags) in this tutorial because CSS is not compatible with some older browsers (versions 3.0 and previous).
In the next part of this series, we'll learn how to create links to other Web pages, and to other parts of our own pages.