HTML for Beginners

Sections

Getting Started
For the absolute novice.

Web Building software
The tools of the trade.

Design Tips
How to make your Web site look great

Web Building scripts
Things that make your Web site dazzle.

PPC> Web building> Getting Started

HTML for Beginners – Part 2

In Part 1 we looked at the basic structure of an HTML document. Now we will look at some of the ways to format the text on a page.

One thing that was apparent in our first listing in part 1 was that text in a body section doesn’t always work how you’d expect and if you hit return to start a new line in the HTML code, you’d find it stays as one long line in the web browser.

Before we actually make any changes, it is worth stopping for a moment to consider a few things. HTML wasn’t designed to give perfect layout of a document the way say Microsoft Word does. Because a web browser can be any height or width, the browser has to do some formatting on the fly if it is ever resized. You might design a page that looks great at 1024x768 with new lines where you want them. However, if a user has a screen running at 640x480 then your lovingly crafted new lines will pose a problem – they won’t fit. The user will need to scroll right and left to read anything. For that reason, text by default flows from left to right and only starts a new line when it runs out of room on the right hand side. This may actually be the best way to have your document behave so you should consider the layout's functionality on different systems before making too many enforced layout changes.

HTML actually stands for HyperText Markup Language. Because it is a markup language, the layout commands you give are merely layout advice and the browser can choose to ignore them if it feels so inclined. This lack of real control might be a bit scary but if you learn exactly how things work in the HTML world, you can base your page designs around the limitations and thus get far more predictable results.

If you are serious about web page design, it is worth getting several different web browsers on your PC such as Netscape Navigator, Internet Explorer and others to see how each renders a page. There will be surprising differences.

Can I have a <p> please Bob?

Now you understand the limitations, let’s look at how to do it anyway because we’re in that sort of a mood! The first thing we’ll consider is the paragraph marker tag. Paragraphs should begin with a <p> tag and end with a </p> tag. You can generally get away without the </p> as the browser can work out these for itself – if it sees another <p> it’s a safe bet the previous paragraph has finished and thus no need for a </p>. Each new paragraph causes a blank line to be generated plus an extra bit. Any text following the <p> then flows from left to right until it meets any other formatting instructions. Try it now.

<html>

<head>

<title>My first web page</title>

</head>

<body>

This is the main part of the web page and can contain

one or more lines.

<p>This is a second paragraph</p>

<p>This is a third paragraph

which continues on and on</p>

</html>

Type the listing in to Notepad and run it as you did before. Note how it now looks. Try resizing the browser until it is has a very narrow width and notice how each paragraph starts to word-wrap.

In HTML, tags can also have attributes which are extra information on how the tag should work. We will now introduce some for the <p> tag. Change the listing so the first <p> now says <p align=right>, and the second says <p align=center>. Save it and either refresh your browser if you still have it open or run the listing as before. You should now see the first paragraph aligned to the left, which is the default, the second to the right and the third in the middle. Resize the browser a few times again to see how the layout changes at different sizes.

To make some text look bigger, you have various options. Modern browsers support all kinds of wonderful tags to control the layout but we’ll look just look at the basic HTML codes here. To create a heading for a page, you use the heading tags which are called <h1> through to <h6> with <h1> being the biggest. Don’t forget to mark the end of the text you want to show in each heading with the corresponding end tag e.g. </h1>. Type the following in to a new file in Notepad to see how they work.

<html>

<head>

<title>My first web page</title>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</html>

Save the file and run it to see what happens. You should see six lines of text all at different sizes. Quite how headings are displayed is down to the browser so you may also see different colours, italics or other such features used to differentiate each line. As a rule you would use <h1> at the top of a page for the main title and perhaps <h6> within the body of the text to highlight copyright information or disclaimers. The others can be used throughout the rest of the document to highlight text as required.

Like the paragraph marker <p>, the heading can have attributes added so try inserting align statements to see how the results look e.g. <h1 align=center>

In part 3 we’ll look at how to change individual words or characters. In the meanwhile, try variations of the examples above and see how you can mix and match tags.

Part 1

Part 3

Iain Laskey