Learn HTML and CSS: An Absolute Beginner’s Guide

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 &gt; — 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 &gt; entity is displayed as > in the browser”.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      
 <html xmlns="http://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 &gt;      
     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:

  • &gt; >
  • &lt; <
  • &amp; &
  • &pound; £
  • &copy; ©
  • &trade; â„¢

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      
 <html xmlns="http://www.w3.org/1999/xhtml">      
   <head>      
     <title></title>      
     <meta http-equiv="Content-Type"      
         content="text/html; charset=utf-8"/>      
   </head>      
   <body>      
   </body>      
 </html>

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"      
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      
 <html xmlns="http://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.

Displaying our work on the homepage

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.

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?

Go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • TS

    Hi Ian,
    It’s a great tutorial, very easy to follow and I really appreciate it.
    But :) (There is always a “but”) – Your examples are nightmares – all those “” tags which I have to remove, examples for comments without any comments, things that suppose to be bold, but are not an so on.
    Please review all your examples and change them – the only way I know they are wrong is as I know some HTML.
    If I didn’t I would got crazy not understanding “why it does not work on my machine”.
    Again, great tutorial, but fix the examples.

    • http://www.onsman.com Ricky Onsman

      Thanks, TS. Those problems should be fixed now.