What’s It All About?
Notice that, despite our inclusion of a couple of headings and a couple of paragraphs, there is little to suggest what this site is about. All visitors know so far is that the site’s about diving. Let’s add some more explanatory text to the page, along with some contact information:
- Beneath the content you already have on the page, add another heading: this time, make it a level three heading that reads, “About Us” (remember to include both the opening and closing tags for the heading element).
- Next, add the following text. Note that there is more than one paragraph.
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.
Although we’re based in the south-west, we don’t stay on our own turf: past diving weekends have included trips up to Scapa Flow in Scotland and to Malta’s numerous wreck sites.
When we’re not diving, we often meet up in a local pub to talk about our recent adventures (any excuse, eh?).
- Next, add a Contact Us section, again, signified by a level three heading.
- Finally, add some simple contact details as follows:
To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email bob@bubbleunder.com.
So, just to recap, we suggested using different heading levels to signify the importance of the different sections and paragraphs within the document. With that in mind, you should have something much like the following markup in the body of your document:
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK – let’s make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<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>
<h3>About Us</h3>
<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>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or email bob@bubbleunder.com.</p>
You can see how our home page is shaping up below.
It’s still not very exciting, is it? Trust me, we’ll get there. The important thing to focus on at this stage is what the content of your site should comprise, and how it might be structured. We haven’t gone into great detail about document structure yet, other than to discuss the use of different levels of headings, but we’ll be looking at this in more detail later in this chapter. In the next chapter, we’ll see how you can begin to style your document — that is, change the font, color, letter spacing and more — but for now, let’s concentrate on the content and structure.
Note: Clickable Email Links
It’s all well and good to put an email address on the page, but it’s hardly perfect. To use this address, a site visitor would need to copy and paste the address into an email message. Surely there’s a simpler way? There certainly is:
<p>To find out more, contact Club Secretary Bob Dobalina
on 01793 641207 or <a href=”mailto:bob@bubbleunder.com”>email bob@bubbleunder.com</a>.</p>
This clickable email link uses the a element, which is used to create links on web pages (this will be explained later in this chapter). The mailto: prefix tells the browser that the link needs to be treated as an email address (that is, the email program should be opened for this link). The content that follows the mailto: section should be a valid email address in the format username@domain
Add this to the web page now, save it, then refresh the view in your browser. Try clicking on the underlined text: it should open your email program automatically, and display an email form in which the To: address is already completed.
The page so far seems a little boring, doesn’t it? Let’s sharpen it up a little. We can only keep looking at a page of black and white for so long — let’s insert an image into the document. Here’s how the img element is applied within the context of the page’s markup:
<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>
The img element is used to insert an image into our web page, and the attributes src, alt, width, and height describe the image that we’re inserting. src is just the name of the image file. In this case, it’s divers-circle.jpg, which you can grab from the code archive. alt is some alternative text that can be displayed in place of the image if, for some reason, it can’t be displayed. This is useful for blind visitors to your site, search engines, and users of slow Internet connections. width and height should be pretty obvious: they give the width and height of the image, measured in pixels. We’ll cover pixels when we look into images in more detail a bit later.
Go and grab divers-circle.jpg from the code archive, and put it into your web site’s folder. The image is shown below.
Open index.html in your text editor and add the following markup just after the level two heading (h2):
<p><img src=”divers-circle.jpg” width=”200″ height=”162″
alt=”A circle of divers practice their skills”/></p>
Save the changes, then view the homepage in your browser. It should look like the display shown below.
Ian Lloyd
