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

Symbols

Occasionally, you may need to include the greater-than (>) or less-than (<) symbols in the text of your web pages. The problem is that these symbols are also used to denote tags in XHTML. So, what can we do? Thankfully, we can use special little codes called entities in our text instead of these symbols. The entity for the greater-than symbol is > — we can substitute it for the greater-than symbol in our text, as shown in the following simple example. The result of this markup is shown in the figure below, “The > entity is displayed as > in the browser”.

<!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>Stock Note</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<p>Our current stock of craft knives >
OUT OF STOCK (more due in 3 days)</p>
</body>
</html>

in the browser” />

Many different entities are available for a wide range of symbols, most of which don’t appear on your keyboard. They all start with an ampersand (&) and end with a semicolon. Some of the most common are shown below:

> >
< <
& &
£ Â£
© Â©
™ â„¢

Diving into Our Web Site

So far, we’ve looked at some very basic web pages as a way to ease you into the process of writing your own XHTML markup. Perhaps you’ve typed them up and tried them out, or maybe you’ve pulled the pages from the code archive and run them in your browser. Perhaps you’ve even tried experimenting for yourself — it’s good to have a play around. None of the examples shown so far are worth keeping, though. You won’t need to use any of these pages, but you will be using the ideas that we’ve introduced in them as you start to develop the fictitious project we’ll complete in the course of this book: a web site for a local diving club.

The diving club comprises a group of local enthusiasts, and the web site will provide a way for club members to:

share photos from previous dive trips
stay informed about upcoming dive trips
provide information about ad-hoc meet-ups
read other members’ dive reports and write-ups
announce club news

The site also has the following goals:

to help attract new members
to provide links to other diving-related web sites
to provide a convenient way to search for general diving-related information

The site’s audience may not be enormous, but the regular visitors and club members are very keen to be involved. It’s a fun site that people will want to come back to again and again, and it’s a good project to work on. But it doesn’t exist yet. You’re going to start building it right now. Let’s start with our first page: the site’s home page.

The Homepage: the Starting Point for All Web Sites

At the very beginning of this chapter, we looked at a basic web page with nothing on it (the car chassis with no bodywork or interior). You saved the file as basic.html. Open that file in your text editor now, and strip out the following:

the text contained within the opening <title> and closing </title> tags
all the content between the opening <body> and closing </body> tags

Save the file as index.html.

Here’s the markup you should have in front of you now:

Let’s start building this web site, shall we?

Setting a Title

Remembering what we’ve learned so far, let’s make a few changes to this document. Have a go at the following:

Change the title of the page to read “Bubble Under — The diving club for the south-west UK.”
Add a heading to the page — a level one heading — that reads “BubbleUnder.com.”
Immediately after the heading, add a paragraph that reads, “Diving club for the south-west UK — let’s make a splash!” (This is your basic, marketing-type tag line, folks.)

Once you make these changes, your markup should look something like this (the changes are shown in bold):

<!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>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK — let’s make a
splash!</p>
</body>
</html>

Save the page, then double-click on the file to open it in your chosen browser. The figure below shows what it should look like.

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:

<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 for the diving terminology puns, they’re truly cringe-worthy!

Important: 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 below.

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?