Learn HTML and CSS: An Absolute Beginner’s Guide
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 firstname.lastname@example.org.
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:
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:
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
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:
img element is used to insert an image into our web page, and the attributes
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.
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.
index.html in your text editor and add the following markup just after the level two heading (
Save the changes, then view the homepage in your browser. It should look like the display shown below.