Learn HTML and CSS: An Absolute Beginner’s Guide
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
/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.htmlicon 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
- Rename the other one as
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):
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> tags that enclose the body content.
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).
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
titleelement 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
h1is preferable to an
contact.html in your text editor and make the following changes:
- Amend the contents of the
titleelement to read, “Contact Us at Bubble Under.”
- Change the level three heading to a level two heading, as you did for
If everything has gone to plan, you should have three files named
The markup for each should be as follows:
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>
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.
aelement contains the link text that will be clicked (which, by default, appears on the screen as blue, underlined text).
hrefattribute 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,
hrefis 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 firstname.lastname@example.org). 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:
We’ll place all of this inside a
div, so we can quickly and easily see what this block of XHTML represents.
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:
You should now be looking at a page like the one shown below.
Add the block of links to
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.
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:
Or is it? Who’s doing the talking? Well, it’s our dear (fictional) Club Secretary, Bob Dobalina:
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.
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.
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:
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:
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.
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
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.
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> 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:
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 is an empty element, just like
img, so in XHTML it’s written as
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.