Welcoming New Visitors
Now, let's expand upon our tag line a little. We'll add a welcoming subheading "a second level heading" to the page, along with an introductory paragraph:
Example 2.8. index.html (excerpt)
<body>
<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>
</body>
Apologies to anyone who doesn't get my hilarious puns on diving terminology. Come to think of it, apologies to those who do -- they're truly cringe-worthy!
Hey! Where'd it All Go?
You'll notice that we didn't repeat the markup for the entire page in the above example. Why? Because paper costs money, trees are beautiful, and you didn't buy this book for weight-training purposes. In short, we won't repeat all the markup all the time; instead, we'll focus on the parts that have changed, or have been added to. And remember: if you think you've missed something, don't worry. You can find all of the examples in the book's code archive.
Once you've added the subheading and the paragraph that follows it, save your page once more, then take another look at it in your browser (either hit the refresh/reload button in your browser, or double-click on the file icon in the location at which you saved it). You should be looking at something like the display shown in Figure 2.14.
Figure 2.14. The homepage taking shape
So, the homepage reads a lot like many other homepages at this stage: it has some basic introductory text to welcome visitors, but not much more. But what exactly is the site about? Or, to be more precise, what will it be about once it's built?
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?).
Note: Save yourself Some Trouble
If you don't feel like typing out all this content, you can paraphrase, or copy it from the code archive. I've deliberately chosen to put a realistic amount of content on the page, so that you can see the effect of several paragraphs on our display.
- 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 like the markup below in the body of your document:
Example 2.9. index.html (excerpt)
<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>
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.
Figure 2.15. Viewing index.html
Share and Enjoy:
