Learn HTML and CSS: An Absolute Beginner's Guide Article

Splitting Up the Page

We’ve been making good progress on our fictitious site … but is a web site really a web site when it contains only one page? Just as the question, “Can you have a sentence with just one word?” can be answered with a one-word sentence (“Yes”), so too can the question about our one-page web site. But you didn’t buy this book to learn how to create a one-page web site, did you?

Let’s take a look at how we can split the page we’ve been working on into separate entities, and how these pages relate to each other.

First, let’s just ensure that your page is in good shape before we go forward. The page should reflect the markup shown in the last large block presented in the previous section (after we added the <div> tags). If not, go to the code archive and grab the version that contains the divs (/chapter2/website_files/06_adding_structure_with_divs/index.html). Save it as index.html in your web site’s folder (if you see a prompt that asks whether you want to overwrite the existing file, click Yes).

Got that file ready? Let’s break it into three pages. First, make two copies of the file:

Click on the index.html icon in Windows Explorer or Finder.
To copy the file, select Edit > Copy.
To paste a copy in the same location, select Edit > Paste.
Repeat the process once more.

You should now have three HTML files in the folder that holds your web site files. The index.html file should stay as it is for the time being, but take a moment to rename the other two in lowercase only. Select each file in turn, choosing File > Rename, if you’re using Windows; Mac users, simply select the file by clicking on it, then hit Return to edit the filename.

Rename one file as contact.html.
Rename the other one as about.html.

Tip: Where’s My File Extension?

If your filename appears as just index in Windows Explorer, your system is currently set up to hide extensions for files that Windows recognizes. To make the extensions visible, follow these simple steps:

Launch Windows Explorer.
Vista users, select Organize > Folder and Search Options…; Windows XP users, select Tools > Folder Options…
Select the View tab.
In the Advanced Settings group, make sure that Hide extensions for known file types does not have a tick next to it.

We have three identical copies of our XHTML page. Now, we need to edit the content of these pages so that each page includes only the content that’s relevant to that page.

To open an existing file in Notepad, select File > Open…, and in the window that appears, change Files of type to All Files. Now, when you go to your Web folder, you’ll see that all the files in that folder are available for opening.

Opening a file in TextEdit is a similar process. Select File > Open… to open a file, but make sure that Ignore rich text commands is checked.

In your text editor, open each page in turn and edit them as follows (remembering to save your changes to each before you open the next file):

index.html

Delete the “About Us” and “Contact Us” sections (both the headings and the paragraphs that follow them), ensuring that the rest of the markup remains untouched. Be careful not to delete the <div> and </div> tags that enclose the body content.

about.html

Delete the introductory spiel (the level two heading and associated paragraphs, including the image) and remove the “Contact Us” section (including the heading and paragraphs).

contact.html

You should be getting the hang of this now. This time, we’re removing the introductory spiel and the “About Us” section. (If you’re not sure you’ve got it right, keep reading: we’ll show the altered markup in a moment.)

Now, each of the three files contains the content that suits its respective filename, but a further change is required for the two newly created files. Open about.html in your text editor and make the following amendments:

Change the contents of the title element to read “About BubbleUnder.com: who we are; what this site is for.”
Change the level three heading <h3>About Us</h3> to a level two heading. In the process of editing our original homepage, we’ve lost one of our heading levels. Previously, the “About Us” and “Contact Us” headings were marked up as level three headings that sat under the level two “Welcome” heading. It’s not good practice to skip heading levels — an h2 following h1 is preferable to an h3 following an h1.

Next, open contact.html in your text editor and make the following changes:

Amend the contents of the title element to read, “Contact Us at Bubble Under.”
Change the level three heading to a level two heading, as you did for about.html.

If everything has gone to plan, you should have three files named index.html, about.html, and contact.html.

The markup for each should be as follows:

index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<title>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a
splash!</p>
</div>
</div> <!– end of header div –>
<div id=”bodycontent”>
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src=”divers-circle.jpg”
alt=”A circle of divers practice their skills”
width=”200″ height=”162″/></p>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and
successfully found your way to the start point – or in
this case, our home page.</p>
</div> <!– end of bodycontent div –>
</body>
</html>

about.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<title>About Bubble Under: who we are, what this site is
for</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a
splash!</p>
</div>
</div> <!– end of header div –>
<div id=”bodycontent”>
<h2>About Us</h2>
<p>Bubble Under is a group of diving enthusiasts based in
the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon
rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive
buddy.</p>
<p>Although we’re based in the south-west, we don’t stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta’s
numerous wreck sites.</p>
<p>When we’re not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,
eh?).</p>
</div> <!– end of bodycontent div –>
</body>
</html>

contact.html

Linking Between Our New Pages

We’ve successfully created a three-page web site, but there’s a small problem: there are no links between the pages. Try for yourself: open index.html in a web browser and take a look at the display. How will you get from one page to another?

To enable site visitors to move around, we need to add navigation. Navigation relies on anchors, which are more commonly referred to as links. The XHTML for an anchor, or link, is as follows:
<a href="filename.html">Link text here</a>

The a element might not be intuitive (it stands for “anchor”), but you’ll get to know this one very quickly: it’s what the Web is built on.

The a element contains the link text that will be clicked (which, by default, appears on the screen as blue, underlined text).
The href attribute refers to the URL to which you’re linking (be that a file stored locally on your computer, or a page on a live web site). Unfortunately, again, href is not immediately memorable (it stands for “hypertext reference”), but you’ll use it so often that you’ll soon remember it.

Note: Don’t Click Here!

The link text — the words inside the anchor element, which appear underlined on the screen — should be a neat summary of that link’s purpose (for example, email bob@bubbleunder.com). All too often, you’ll see people asking you to “Click here to submit an image,” or “Click here to notify us of your change of address” when “Submit an image,” or “Notify us of your change of address” more than suffices. Never use “Click here” links — it really is bad linking practice and is discouraged for usability and accessibility reasons.

Let’s create a simple navigation menu that you can drop into your pages. Our navigation is just a list of three links. Here’s the markup:

<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>

We’ll place all of this inside a div, so we can quickly and easily see what this block of XHTML represents.

<div id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
</div> <!– end of navigation div –>

Now, we just need to paste this markup into an appropriate place on each of our pages. A good position would be just after the header has finished, before the main body content starts.

In the code below, the navigation block appears in position on the homepage:

index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<title>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a
splash!</p>
</div>
</div> <!– end of header div –>
<div id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
</div> <!– end of navigation div –>
<div id=”bodycontent”>
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src=”divers-circle.jpg” width=”200″ height=”162″
alt=”A circle of divers practice their skills”/></p>
<p>Glad you could drop in and share some air with us!
You’ve passed your underwater navigation skills and
successfully found your way to the start point – or in
this case, our home page.</p>
</div> <!– end of bodycontent div –>
</body>
</html>

You should now be looking at a page like the one shown below.

Add the block of links to contact.html and about.html, then try clicking on the links that you’ve just added. It should be possible to flick between all three pages. This is a landmark: you’re now the creator of a working, navigable web site. Let’s now discuss a few more XHTML elements that you can add to your pages.

The `blockquote` (Who Said That?)

We’re going to add a sound bite — well, a written quote, to be precise — to the About Us page. Here are the lines:

Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that!

We’ll add the quote after the final paragraph in about.html using a blockquote element; here’s the markup you’ll need:

about.html (excerpt)

<blockquote>
<p>”Happiness is a dip in the ocean followed by a pint or two of
Old Speckled Hen. You can quote me on that!”</p>
</blockquote>

Or is it? Who’s doing the talking? Well, it’s our dear (fictional) Club Secretary, Bob Dobalina:

<p>Or as our man Bob Dobalina would put it:</p>
<blockquote>
<p>”Happiness is a dip in the ocean followed by a pint or two of
Old Speckled Hen. You can quote me on that!”</p>
</blockquote>

The quotation can contain as many paragraphs as you like, as long as each one starts and ends correctly, and the opening <blockquote> tag is closed off properly.

Note: Displaying `blockquote`s

In most browsers, your use of blockquote will see the quoted text indented in the page display. This effect can be overridden if it’s not to your taste, but that’s something we’ll cover in a later chapter. On the flip side, you should never use the blockquote element for the purposes of indenting text. This is very poor form. Only use blockquote for its intended purpose: to present a quotation. There are other, better ways to create visual indentations, namely CSS.

The `cite` Element

If the quote to which you’ve referred is written elsewhere — in a magazine, for instance, or a book, or even your own web site — you can add some information to communicate the quote’s source. One way is to use the cite element. A citation, by default, will style the text in italics. Here’s how the markup would look for a citation:

<p>I remember reading <cite>Salem’s Lot</cite> by Stephen King as
a child, and being very scared of the dark for days after.</p>

So what do we do if something is both a quotation and a citation? The blockquote element has a cite attribute for this very purpose:

<blockquote cite=”http://www.petermoore.net/sftb/chapter1.htm”>
<p>It didn’t take long for a daily routine to form: when they
left for work in the morning I’d still be in bed. And when
they came home they’d find me sitting on the sofa, drinking
beer and watching TV soaps.</p>
</blockquote>

We’re not using the cite element (or the cite attribute) in the diving web site, but you may find them useful in your own web site projects.

`strong` and `em`

We mentioned the em element earlier in this chapter. It’s a fairly straightforward element to remember. If you can imagine yourself adding some kind of inflection as you say a word, then emphasis is probably what you need. If you’re looking to strike a slightly more forceful tone, then you should consider “going in strong“.

By default, adding em will style text in italics, while using strong makes the text bold. You can combine the two if you want, but usually, one or the other will suffice. The examples below should help you understand what these elements are used for. The figure below shows how they appear in the browser.

<p>Although Jimmy was told to <strong>never</strong> put his hands
on the exhaust pipe, he <em>still</em> couldn’t help
himself.</p>

Taking a Break

The chapter’s almost at an end, so why take a break? Well, this is just an excuse for a headline pun. We have one more element to look at: the break element.

The break element (br) basically replicates what happens when you hit the carriage return on an old typewriter. To create a paragraph on an old typewriter, you’d hit Enter twice to give the necessary spacing. In XHTML, the fact that you’re marking up a paragraph with <p> and </p> tags means the spacing is worked out for you automatically. However, if you just want to signify the start of a new line, rather than a new paragraph, the element you need is br, as demonstrated in this limerick:

<p>The limerick packs laughs anatomical,<br/>
Into space that is quite economical.<br/>
But the good ones I’ve seen,<br/>
So seldom are clean,<br/>
And the clean ones so seldom are comical.</p>

Important: Avoid Multiple Breaks

It’s all too easy to resort to using multiple breaks in a web page to achieve a visual effect. If you find yourself doing this, something’s wrong: you almost certainly need to look for a more suitable technique (we’ll look at how this visual effect should be achieved later). Be careful in your use of br.

Note that br is an empty element, just like meta and img, so in XHTML it’s written as <br/>.

Summary

Wow — what a great start we’ve made. In this chapter, you’ve built a single web page gradually into three linked pages. You’ve become familiar with the most commonly used XHTML tags, as well as some of the less common ones that you can apply to your web pages. But, somehow, despite all your efforts, the web pages are still looking a little on the bland side. We’re going to fix that very soon: in the next chapter, we’ll start to add some splashes of color, and make the site look a little more like a fun diving site and less like a boring old Word document.