TwoPointFour Beginner's Guide to HTML
So, we have created a very basic web page, what's next?
We'll look at formatting of the text. There are several ways to change the look of your page/text and we will be concentrating on paragraphs, header text (not to be confused with the page header) and fonts.
If you look at the text on this page you will see there are four paragraphs including this one so far. To create a new paragraph we use the <p></p> tags. You can put your text inside the tags in the same way we added the title. If your Notepad window is still open, go to File and New to start with a new file otherwise open Notepad again. Copy the following and paste it into your Notepad window:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p>
This is a basic web page!</p>
<p> This is a new paragraph!</p>
</body>
</html>
|
Once you have pasted it in, save the file as you did before not forgetting to change the 'Save as type' dropdown to All files. This time, save the file as test2.html. Go back to your Internet Browser window and open the new file as before. You should see the text in two paragraphs now.
There are some pre-formatted text options built into HTML, they are headers. The tags are:
<h1></h1>
<h2></h2>
<h3></h3>
etc...
up to
<h6></h6>
The important thing to remember is that the higher the number, the smaller the text will be. So, to test this, copy and paste the following code below your second paragraph (just above the </body> tag) in the test2.html file.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> |
Hopefully, you can see the difference between the header styles.
You will remember we said on page one that it is important to get the tags in the correct order. See if you can spot the mistake in the following:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p>
This is a basic web page!</p>
<p> This is a new paragraph!
</body>
</p>
</html> |
You probably noticed that the second </p> tag is outside the </body> tag. This isn't going to cause a big problem here as there is nothing left to output anyway but on many other tags it will cause a problem and may even produce some strange looking effects in your Internet Browser! It is very important to keep an eye on your closing tags to make sure they don't overlap.
The default font is normally Times New Roman which doesn't output very nicely in our opinion. We like to use Verdana or Geneva in the pages we design so to change the font we use... that's right, the <font></font> tags. To change the font we need to use an Attribute within the tag, in this case the attribute will be 'face' as in font face.
You can use the <font> tag in several places but it is good practice to be consistent throughout your web pages so we will be using it within the <p></p> tags. We are going to change the font to Verdana as this is a font that should be installed on most computers.
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p>
This is a basic web page!</p>
<p><font face="verdana">This is a new paragraph!</font></p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html> |
Copy and paste the <font face="verdana"> and </font> tags into the same place in your Notepad window as show above, save the file and refresh your Internet Browser - did you see the second paragraph change to the Verdana font? You can use any font you like but bear in mind not all computers will have the same fonts installed on them as you have. In a case where a font is not installed it will normally be substituted with Times New Roman.
Continue to next page >>
Return to Tutorials homepage
