HTML & CSS

Design and Build Websites

Jon Duckett

John Wiley & Sons, Inc.

HTML & CSS

Design and build Websites

Published by 00818-8
John Wiley & Sons, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 Manufactured in the United States of America Published simultaneously in
www.wiley.com Canada
©2011 by John Wiley & Sons, Inc., Indianapolis, Indiana ISBN: 978-1-118- 10 9 8 7 6 5 4 3 2 1

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic,
mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States
Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy
fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the
Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ
 07030, (201) 748- 6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect
to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation
warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice
and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is
not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a
competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom.
The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does
not mean that the author or the publisher endorses the information the organization or website may provide or recommendations it
may make. Further, readers should be aware that Internet websites listed in this work may have changed or disappeared between
when this work was written and when it is read.

For general information on our other products and services please contact our Customer Care Department within the United States at
(877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic

books. Library of Congress Control Number: 2011932082

Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its
affiliates, in the United States and other countries, and may not be used without written permission. All other
trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or
vendor mentioned in this book.

For John Wiley & Sons, Inc. Vice President and Author
Executive Publisher Jon Duckett
Executive Editor Barry Pruett
Carol Long Cover Designer
Associate Publisher Emme Stone
Marketing Manager Ashley Zurcher Jim Minatel
Design and Layout Jon Duckett
Production Manager Tim Tate Production Coordinator, Cover Emme Stone
Katie Crocker
PRODUCTION EDITOR Technical Editor Chris Mills
Daniel Scribner
TECHNICAL REVIEWERS Andy Stone
Vice President and Angela Shimell
Executive Group Publisher Richard Swadley Donna Watson
Martin Callanan
Rob Jacoby Photography flickr.com/photos/mindfire Jules Clancy
Tony Berry John Stewardson thestonesoup.com

Credits
johnstewardson.com Kylie Gusset
gusset.net
Additional Photography Hesperian Michael Stillwell
Joe Robertson beebo.org
Try out and download all of the code for this book
online at: http://www.htmlandcssbook.com/code/

Introduction 2
Chapter 1: Structure 12
Chapter 2: Text 40
Chapter 3: Lists 62
Chapter 4: Links 74
Chapter 5: Images 94
Chapter 6: Tables 126
Chapter 7: Forms 144
Chapter 8: Extra Markup Chapter 9: Flash, 176
Video & Audio Chapter 10: Introducing CSS 200
Chapter 11: Color 226
Chapter 12: Text 246
Chapter 13: Boxes 264

Contents 300

Chapter 14: Lists, Tables & Forms Chapter Chapter 17: HTML5 Layout Chapter 18:
15: Layout Process & Design Chapter 19: Practical
Chapter 16: Images Information Index
330 358 406 428 452 476 493

Introduction
 ⇪
About this book
⇪
How the web works
⇪
Learning from other pages
Firstly, thank you for picking up this
book. It has been written with two
very different types of people in
mind:
●
Those who want to learn how to design and build
websites from scratch
●
Anyone who has a website (that may be built using a
content management system, blogging software, or
an e-commerce platform) and wants more control
over the appearance of their pages

The only things you need in order to use this book are
a computer with a web browser and a text editor
(such as Notepad, which comes with Windows, or
TextEdit, which comes with Macs).

3 INTRODUCTION
Introduction pages come at the beginning of each chapter. The HTML code is shown in blue and CSS code is shown in
They introduce the key topics you will learn about. pink.
Reference pages introduce key pieces of HTML & CSS code.

Background pages appear on white; they explain the context of background. They provide a simple, visual reference to topics
the topics covered that are discussed in each chapter. discussed.
Diagram and infographics pages are shown on a dark

Example pages put together the topics you have learned and Summary pages come at the end of each chapter. They remind
demonstrate how they can be applied in each. you of the key topics that were covered in each chapter.

INTRODUCTION 4

Is it hard to Learn?
Many books that teach HTML and CSS redesigned this book from scratch.
resemble dull manuals. To make it easier I've focussed on the code you need to use 90% of the time and
omitted the code that you would rarely see even if writing websites
for you to learn, we threw away the is your full time job. By the end of the book, if you come across the
traditional template used by publishers and other 10% you will be able to Google it to find out what it means
quickly and easily.

At work, when people look at my screen Understanding HTML and CSS can help I have also added practical information
and see it full of code, it's not unusual to anyone who works with the web; on topics I am commonly asked about,
get a comment about it looking very designers can create more attractive such as how to prepare images, audio
complicated or how clever I must be to and usable sites, website editors can and video for the web, how to approach
understand it. The truth is, it's not that create better content, marketers can the design and build of a new site, how
hard to learn how to write web pages and communicate with their audience more to improve your rankings in search
read the code used to create them; you effectively, and managers can engines (SEO), and how to use Google
certainly don't have to be a commission better sites and get the best Analytics to learn about visitors to your
"programmer." out of their teams. site.

5 INTRODUCTION

The Structure of This

Book

In order to teach you about creating web

pages, this book is divided into three
sections:

where a paragraph begins and ends, I should warn you that the examples in
1: HTML and so on. the first nine chapters are not exciting to
We will spend the first chapter looking look at, yet they are the foundation of
at how HTML is used to create web The rest of this section every web page. The following chapters
pages. You will see that you start by introduces the tags you have at your on CSS will show you how to make your
writing down the words you want to disposal to create web pages, grouped pages look a lot more interesting.
appear on your page. You then add
tags or elements to the words so that
into chapters on: text, lists, links,
images, tables, forms, video audio and
2: CSS
the browser knows what is a heading, flash, and miscellaneous elements. We start this section with a chapter that
 explains how CSS uses rules to enable Layout: How to control where the development at the time of writing).
you to control the styling and layout of different elements are positioned on the Before learning about these elements,
web pages. We then go on to look at screen. You will also learn several you need a good grasp of how CSS is
the wide variety of CSS properties you techniques that professionals use to used to control the design of web pages.
can use in your CSS rules. These make their pages more attractive. There is a chapter that talks you through
properties generally fall into one of two a design process that you might like to
categories:
3: Practical follow when creating a new website.
We end up with some helpful information
Presentation: How to control things that will assist you in building better Finally, we end up looking at topics
like the color of text, the fonts you want websites. that will help you once you have built
to use and the size of those fonts, how your site, such
to add background colors to pages (or We look at some new tags that will be as putting it on the web, search engine
parts of a page), and how to add introduced in HTML5 to help describe optimisation (SEO) and using analytics
background images. the structure of your pages. HTML5 is software to track who comes to your site
the latest version of HTML (still under and what they are looking at.

INTRODUCTION 6

How People
Access the Web

Before we look at the code used to build

websites it is important to consider the
different ways in which people access the
web and clarify some terminology.

Browsers functionality offered in all browsers. use the services of a web hosting
company who charge a fee to host
People access websites using software You will learn how to tell which your site.
called a web browser. Popular browsers visitors use to access your
examples include Firefox, Internet website in Chapter 19.
Explorer, Safari, Chrome, and Opera. Devices
Web Servers
People are accessing websites on an
In order to view a web page, users When you ask your browser for a web increasing range of devices including
might type a web address into their page, the request is sent across the desktop computers, laptops, tablets, and
browser, follow a link from another site, Internet to a special mobile phones. It is important to
or use a bookmark. computer known as a web server remember that various devices have
which hosts the website. different screen sizes and some have
Software manufacturers regularly faster connections to the web than
release new versions of browsers with Web servers are special others.
new features and supporting new computers that are constantly connected Screen readers
additions to languages. It is important, to the Internet, and are optimized to
however, to remember that many send web pages out to people who Screen readers are programs that read
computer owners will not be running request them. out the contents of a computer screen
the latest versions of these browsers. to a user. They are commonly used by
Therefore you cannot rely on all visitors Some big companies run their own people with visual impairments.
to your site being able to use the latest web servers, but it is more common to
 In the same way that many countries Throughout this book you will see It is interesting to note that technologies
have legislations that require public several references to screen readers. similar to those employed by screen
buildings to be accessible to those with These notes will help ensure that the readers are also being used in other
disabilities, many laws have also been sites you create are accessible to people areas where people are unable read a
passed that require websites be who use such software. screen, such as when they are driving
accessible to those with disabilities. or jogging.

7 INTRODUCTION

How Websites
Are Created

All websites use HTML and CSS, but

content management systems, blogging
software, and e-commerce platforms often
add a few more technologies into the mix.

What you see How it is Created book should be enough to help you on
that road.
When you are looking at a website, it Small websites are often written just
HTML5 & CSS3
is most likely that your browser will be using HTML and CSS.
receiving HTML and CSS from the Since the web was first created there
web server that hosts the site. The Larger websites — in particular those have been several versions of HTML
web browser interprets the HTML and that are updated regularly and use a and CSS — each intended to be an
CSS code to create the page that you content management improvement on the previous version.
see. system (CMS), blogging tools, or e-
commerce software — often make use At the time of writing this book, HTML5
Most web pages also include extra of more complex technologies on the & CSS3 were still being developed.
content such as images, audio, video, or web server, but these technologies are Although they had not been finalized,
animations and this book will teach you actually used to produce HTML and many browsers were already
how to prepare them for use on the web CSS that is then sent to the browser. So, supporting some features of these
and then how to insert them into your if your site uses these technologies, you languages and a lot of people were
web pages. will be able to use your new HTML and using the latest code on their websites.
CSS knowledge to take more control I have therefore chosen to teach you
Some sites also send JavaScript or over how your site looks. these latest versions.
Flash to your browser, and you will see
how to add JavaScript and Flash in your Larger, more complex sites like these Because HTML5 and CSS3 build on
web pages. Both of these technologies may use a database to store data, and previous versions of these languages,
are advanced topics that you can go on programming languages such as PHP, learning these means you will also be
to learn more about once you have ASP.Net, Java, or Ruby on the web able to understand the earlier versions
mastered HTML and CSS, if you want server, but you do not need to know of them. I have added clear notes when
to. these technologies to improve what the the code is new and also when it might
user sees. The skills you'll learn in this not work in older browsers.

INTRODUCTION 8
 How the Web Works

When you visit a website, the web server

hosting that site could be anywhere in the
world. In order for you to find the location of
the web server, your browser will first connect
to a Domain Name System (DNS) server.

On this page you can see examples that ● when a web user in England wants to
A user in New York visits google.com
demonstrate how the web server that in San Francisco view the website of the Louvre art
hosts the website you are visiting can gallery in France which is located at
●
be anywhere in the world. It is the DNS A user in Stockholm visits www.louvre.fr. Firstly, the browser in
servers that tell your browser how to find qantas.com.au in Sydney Cambridge contacts a DNS server in
the website. London. The DNS server then tells the
●
●
A user in Barcelona visits sony.jp in A user in Vancouver visits airindia.in browser the location of the web server
Tokyo in Bangalore hosting the site in Paris.
On the right you can see what happens

9 INTRODUCTION

1 The unique number that the DNS server returns to your computer
allows your browser to contact the web server that hosts the
When you connect to the web, you do so via an Internet Service website you requested. A web server is a computer that is
Provider (ISP). You type a domain name or web address into your constantly connected to the web, and is set up especially to send
browser to visit a site; for example: google.com, bbc.co.uk, web pages to users.
microsoft.com. 2

Your computer contacts a

network of servers called
Domain Name System (DNS)
servers. These act like phone
books; they tell your computer
the IP address associated with
the requested domain name.
An IP address is a number
of up to 12 digits separated
by periods / full stops. Every
device connected to the web
has a unique IP address; it is
like the phone number for that
3 computer.
Cambridge PARIS
LONDON
4

The web server then sends the

page you requested back to your
web browser.

Structure
1
⇪
Understanding structure
⇪
Learning about markup
⇪
Tags and elements
We come across all kinds of
documents every day of our lives.
Newspapers, insurance forms, shop
catalogues... the list goes on.
Many web pages act like electronic versions of these
documents. For example, newspapers show the same
stories in print as they do on websites; you can apply for
insurance over the web; and stores have online catalogs
and e-commerce facilities.
 In all kinds of documents, structure is very important in
helping readers to understand the messages you are trying
to convey and to navigate around the document. So, in
order to learn how to write web pages, it is very important
to understand how to structure documents. In this chapter
you will:
●
See how HTML describes the structure of a web page
●
Learn how tags or elements are added to your

document ● Write your first web page

13 STRUCTURE

STRUCTURE 14

How Pages Use

Structure
Think about the stories you read in a the newspaper. Now think about a very different type of
newspaper: for each story, there will be The structure is very similar when a document — an
a headline, some text, and possibly news story is viewed online insurance form. Insurance forms often
some images. If the article is a long (although it may also have headings for different sections, and
piece, there may be subheadings that feature audio or video). This is each section contains a list of questions
split the story into separate sections or illustrated on the right with a copy of a with areas for you to fill in details or
quotes from those involved. Structure newspaper alongside the checkboxes to tick. Again, the structure
helps readers understand the stories in corresponding article on its website. is very similar online.

15 STRUCTURE
STRUCTURE 16

Structuring Word
Documents

The use of headings and subheadings This might be expanded upon under have a heading to describe what it
in any document often reflects a subheadings lower down on the page. covers.
hierarchy of information. For example, When using a word processor to create On the right, you can see a simple
a document might start with a large a document, we separate out the text to document in Microsoft Word. The
heading, followed by an introduction give it structure. Each topic might have different styles for the document, such
or the most important information. a new paragraph, and each section can as different levels of heading, are
shown in the drop down box. If you used the formatting toolbar or palette to
regularly use Word, you might have also do this.

17 STRUCTURE
STRUCTURE 18
On the previous page you saw
how structure was added to a
Word document to make it
easier to understand. We use
structure in the same way
when writing web pages.
19 STRUCTURE

HTML Describes the

Structure of Pages
In the browser window you can see a web page that features exactly
the same content as the Word document you met on the page 18.
To describe the structure of a web page, we add code to the words
we want to appear on the page.

You can see the HTML code for this page below. Don't worry about
what the code means yet. We start to look at it in more detail on the
next page. Note that the HTML code is in blue, and the text you see
on screen is in black.

<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of the page. And if the
page is a long one it might be split up into several sub-headings.<p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help you follow the structure
of what is being written. There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p> </body>
</html>

The HTML code (in blue) is made up of characters that live inside
angled brackets — these are called HTML elements. Elements are
usually made up of two tags: an opening tag and a closing tag. (The
closing tag has an extra forward slash in it.) Each HTML element
tells the browser something about the information that sits between
its opening and closing tags.

STRUCTURE 20

HTML Uses Elements to

Describe the Structure of
Pages
 Let's look closer at the code from the last
page. There are several different elements.
Each
element has an opening tag and a closing tag.

Code

<html>

<body>

<h1>This is the Main Heading</h1>

<p>This text might be an introduction to the rest of the page. And if

the page is a long one it might
be split up into several sub-headings.<p>

<h2>This is a Sub-Heading</h2>

<p>Many long articles have sub-headings so to help

you follow the structure of what is being written. There may even be
sub-sub-headings (or lower-level headings).</p>

<h2>Another Sub-Heading</h2>

<p>Here you can see another sub-heading.</p>

</body>

</html>

21 STRUCTURE
Tags act like containers. They tell you
something about the information that lies
between their opening and closing tags.

Description
The opening <html> tag indicates that anything between it and a closing </html> tag is HTML code.

The <body> tag indicates that anything between it and the closing
</body> tag should be shown inside the main browser window.

Words between <h1> and </h1> are a main heading.

 A paragraph of text appears between these <p> and </p> tags.

Words between <h2> and </h2> form a sub-heading.

Here is another paragraph between opening <p> and closing </p> tags.

Another sub-heading inside <h2> and </h2> tags.

Another paragraph inside <p> and </p> tags.

The closing </body> tag indicates the end of what should appear in the main browser

window. The closing </html> tag indicates that it is the end of the HTML code.

STRUCTURE 22

A Closer Look at Tags

<p>
 Character

RIGHT-angle bracket
left-angle bracket Opening Tag
(less-than sign) (MORE-than sign)

The characters in the brackets indicate For example, in the tags above the p The closing tag has a forward slash
the tag's purpose. stands for paragraph. after the the < symbol.

23 STRUCTURE
 </p>left-angle bracket
Character
RIGHT-angle bracket
(MORE-than sign)

(less-than sign)

Forward Slash

Closing Tag

The terms "tag" and "element" are often Strictly speaking, however, an element tag and the closing tag and any content
used interchangeably. comprises the opening that lies between them.

STRUCTURE 24

Attributes Tell Us More

About Elements

Attributes provide additional information

about the contents of an element. They appear
 on the opening tag of the element and are
made up of two parts: a name and a value,
separated by an equals sign.

Attribute
Name

<p lang="en-us">Paragraph in English</p>

Attribute
Value

The attribute name indicates what kind The value is the information or setting Here an attribute called lang is used to
of extra information you are supplying for the attribute. It should be placed in indicate the language used in this
about the element's content. It should double quotes. Different attributes can element. The value of this attribute on
be written in lowercase. have different values. this page specifies it is in US English.

25 STRUCTURE
HTML5 allows you to use
uppercase attribute names and
omit the quotemarks, but this is
not recommended.

Attribute
Name

<p lang="fr">Paragraphe en Français</p>

 Attribute
Value

The majority of attributes can only be Most attribute values are either pre- The value of the lang attribute is an
used on certain elements, although a defined or follow a stipulated format. abbreviated way of specifying which
few attributes (such as lang) can We will look at the permitted values as language is used inside the element
appear on any element. we introduce each new attribute. that all browsers understand.

STRUCTURE 26

Body, Head & Title

<head>
<body> <title>This is the Title of the Page</title> </head>
<body>
You met the <body> element in the first example we created. <h1>This is the Body of the Page</h1>
Everything inside this element is shown inside the main browser <p>Anything within the body of a web page is displayed in the main
window. browser window.</p> </body>
</html>

<head>
Before the <body> element you will often see a <head> element.
This contains information about the page (rather than information
that is shown within the main part of the browser window that is
highlighted in blue on the opposite page). You will usually find a
<title> element inside the <head> element.

<title>
The contents of the <title> element are either shown in the top of
the browser, above where you usually type in the URL of the page
you want to visit, or on the tab for that page (if your browser uses Result
tabs to allow you to view multiple pages at the same time).
/chapter-01/body-head-title.html HTML

<html>
 27 STRUCTURE
Anything written between the
<title> tags will appear in the
title bar (or tabs) at the top of
the browser window, highlighted
in orange here.

Anything written between

the <body> tags will appear
in the main browser window,
highlighted in blue here.

You may know that HTML stands for page to another quickly and easily. A page, we add code around the original
HyperText Markup Language. The markup language allows you to annotate text we want to display and the browser
HyperText part refers to the fact that text, and these annotations provide then uses the code to display the page
HTML allows you to create links that additional meaning to the contents of a correctly. So the tags we add are the
allow visitors to move from one document. If you think of a web markup.

STRUCTURE 28

Creating a Web Page on a

PC
To create your first web page on
a PC, start up Notepad. You can Start
1 All Programs (or Programs)
1 Accessories
find this by going to: Notepad
You might also like to download 29 STRUCTURE
a free editor called Notepad++
from notepad-plus-plus.org.

Type the code shown on the

right.
2
2

Article

Go to the File menu and

select Save as... You will need to
save 3
3
the file somewhere you can
remember. If you like, you
could create a folder for any
examples that you try out
from this book.

Save this file as first-test.

html. Make sure that the Save
as type drop down has All Files
selected.

Start your web browser. Go to

the File menu and select
Open. 4
4
Browse to the file that you just
created, select it and click on
 the Open button. The result
should look something like the
screen shot to the left.

If it doesn't look like this, find

the file you just created on
your computer and make
sure that it has the file
extension .html (if it is .txt
then you need to go
back to Notepad and save the
file again, but this time put
quote marks around the name
"first test.html").

STRUCTURE 30

Creating a Web Page on a

Mac
To create your first web page on
a Mac, start up TextEdit. This 31 STRUCTURE
1
1
should be in your Applications
folder.

You might also like to download

a free text editor for creating
web pages called TextWrangler
which is available from
barebones.com.

Type the code shown on the

right.
2
2
 Article

Now go to the File menu and

select Save as... You will need
to 3
3
save the file somewhere you
can remember.

If you like, you could create a

folder for any examples that
you try out from this book.
Save this file as first-test.html.
You
will probably see a window
like the screen shot to the
left.

You want to select the

Use .html button.

Next, start your web browser,

go to the File menu, and
select 4
4
Open. You should browse to
the file that you just created,
select it and click on the
Open button.
The result should look like
the screen shot to the left.

If it doesn't look like this, you

might need to change one of
the settings in TextEdit. Go to
the TextEdit menu and select
 Preferences. Then on the
preferences for Open and
Save, tick the box that says
Ignore rich text commands
in HTML files.
Now try to save the file again.

STRUCTURE 32

Code in a Content
Management System

If you are working with a content management system on the opposite That is because they use a single
management system, blogging platform, page, you have a box 'template' to control all of the pages for a
or e-commerce application, you will that allows you to enter a title for the section of the site. (For example, an e-
probably log into a special administration page, another box for the main article, a commerce
section of the website to control it. The way to enter a publication date, and system might use the same template
tools provided in the administration something to indicate which section of to show all of their products.) The
sections of these sites usually allow you the site this page belongs in. information you supply is placed into
to edit parts of the page rather than the the templates.
entire page, which means you will rarely For an e-commerce store, you might
see the <html>, <head>, or <body> have boxes that allow you to enter a title The advantage of this approach is that
elements. for the product, a description of the people who do not know how to write
product, its price, and the quantity web pages can add information to a
Looking at the content available. website and it is also possible to change
 the presentation of something in the every page that uses that template. If 1,000 items for sale, just
template, and it will automatically update you imagine an e-commerce store with

33 STRUCTURE

altering one template is a lot easier than Some content management systems
changing the page for each individual offer tools that also allow you to edit
product. In systems like this, when you the template files. If you do try to edit
have a large block of text that you can template files you need to check the
edit, such as a news article, blog entry or documentation for your CMS as they all
the description of a product in an e- differ from each other.
commerce store, you will often see a text You need to be careful when editing
editor displayed. template files because if you delete the
wrong piece of code or add something
Text editors usually have controls a in the wrong place the site may stop
little like those on your word processor, working entirely.
giving you different options to style
text, add links or insert images. Behind
the scenes these editors
are adding HTML code to your text, just
like the code you have seen earlier in
this chapter. Many of these editors will
have an option that allows you to see
(and edit) the code that they produce.

Once you know how to read and edit this

code, you can take more control over
these sections of your website.

In the example above, you can see that

the text editor has a tab for Visual /
HTML views of what the user enters.
Other systems
might have a button (which often
shows angle brackets) to indicate how
to access the code.
 STRUCTURE 34

Looking at How Other sites

are Built

When the web was first taking off, one of Once you have opened this page, you code is below.
the most common ways to learn about can look for the View menu in your At first this code might look
HTML and discover new tips and browser, and select the option that says complicated but don't be discouraged.
techniques was to look at the source Source or View source. (The title By the time you have finished the next
code that made up web pages. changes depending on what browser you chapter of this book, you will be able to
are using.) understand it.
These days there are many more books
and online tutorials that teach HTML, but You should see a new window All of the examples for this book are on
you can still look at the code that a web appear, and it will contain the source the website, and you can use this simple
server sends to you. To try this out for code that was used to create this technique on any of the example pages
yourself, simply go to the sample code page. to see how they work.
for this chapter, at
www.htmlandcssbook.com/ code/ and click You can see this result in the You can also download all of the code
on the link called "View Source." photograph on the right. The page for this book from the same website by
you see is the window at the top; the clicking on the "Download" link.

35 STRUCTURE
 STRUCTURE 36

Summary
STRUCTURE

⇪ HTML pages are text documents.

⇪ HTML uses tags (characters that sit inside angled

brackets) to give the information they surround
special meaning.
⇪ Tags are often referred to as elements.

⇪ Tags usually come in pairs. The opening tag

denotes the start of a piece of content; the
closing tag denotes the end.
⇪ Opening tags can carry attributes, which tell us
more about the content of that element.
⇪ Attributes require a name and a value.

⇪ To learn HTML you need to know what tags are

available for you to use, what they do, and where
they can go.

2
Text

⇪
Headings and paragraphs
⇪
Bold, italic, emphasis
⇪
Structural and semantic markup
When creating a web page, you add
tags (known as markup) to the
contents of the page. These tags
provide extra meaning and allow
browsers to show users the
appropriate structure for the page.
In this chapter we focus on how to add markup to the text
that appears on your pages. You will learn about:
 ●
Structural markup: the elements that you can use
to describe both headings and paragraphs
●
Semantic markup: which provides extra information;
such as where emphasis is placed in a sentence, that
something you have written is a quotation (and who
said it), the meaning of acronyms, and so on

41 TEXT

TEXT 42

Headings

<h1> <h3>
<h2> <h4>
 <h2>This is a Level 2 Heading</h2>
<h5> <h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>

<h6> <h5>This is a Level 5 Heading</h5>

<h6>This is a Level 6 Heading</h6>

HTML has six "levels" of

headings:

<h1> is used for main headings <h2> is used for subheadings

If there are further sections under the subheadings then the <h3>
element is used, and so on...

Browsers display the contents of headings at different sizes. The

contents of an <h1> element is the largest, and the contents of an
<h6> element is the smallest. The exact size at which each
browser shows the headings can vary slightly. Users can also
adjust the size of text in their browser. You will see how to control
the size of text, its color, and the fonts used when we come to look
at CSS.
chapter-02/headings.html HTML

<h1>This is a Main Heading</h1> R esult

43 TEXT

Paragraphs
Article

HTML
chapter-02/paragraphs.html
<p>
HTML
<html>
<p>A paragraph consists of one or more sentences
that form a self-contained unit of discourse. The start of a paragraph is <p>Text is easier to understand when it is split up into units of text. For
indicated by a new line.</p> example, a book may have chapters. Chapters can have subheadings.
Under each heading there will be one or more TEXT 44
paragraphs.</p>

R esult

To create a paragraph, surround the words that make up the

paragraph with an opening <p> tag and closing </p> tag.

By default, a browser will show each paragraph on a new line with

some space between it and any subsequent paragraphs.

Bold & Italic

<p>Inside a product description you might see some <b>key features</b>

<b> in bold.</p>

By enclosing words in the tags <b> and </b> we can make

characters appear bold.

The <b> element also represents a section of text that would be

presented in a visually different way (for example key words in a
paragraph) although the use of the <b> element does not imply any
additional meaning.
R esult

chapter-02/italic.html HTML

<i> <p>This is how we make a word appear <i>italic</i>. </p>

<p>It's a potato <i>Solanum teberosum</i>.</p> <p>Captain Cook sailed to
By enclosing words in the tags <i> and </i> we can make Australia on the <i>Endeavour</i>.</p>
characters appear italic.

The <i> element also represents a section of text that would be

said in a different way from surrounding content — such as
technical terms, names of ships, foreign words, thoughts, or other
terms that would usually be italicized.
chapter-02/bold.html HTML

<p>This is how we make a word appear <b>bold.</b> </p>

 esult

45 TEXT

Superscript &
Article
Subscript

HTML
chapter-02/superscript-and-subscript.html
<sup> <p>On the 4^th of September
you will learn
about E=MC².</p> The <sup> element is used to contain characters that should be
<p>The amount of CO₂ in the atmosphere grew by 2ppm in superscript such as the suffixes of dates or mathematical concepts
2009₁.</p> like raising a number to a power such as 22.

<sub>
The <sub> element is used to contain characters that should be
R esult subscript. It is commonly used with foot notes or chemical formulas
such as H20.
 TEXT 46

White Space

In order to make code easier to read, web page authors often add <p>The moon is drifting away from Earth.</p> <p>The moon is drifting away
extra spaces or start some elements on new lines. from Earth.</p> <p>The moon is drifting away from

When the browser comes across two or more spaces next to each Earth.</p>
other, it only displays one space. Similarly if it comes across a line
break, it treats that as a single space too. This is known as white
space collapsing.

You will often see that web page authors take advantage of white
space collapsing to indent their code in order to make it easier to
follow.
chapter-02/white-space.html HTML
R esult

47 TEXT

Line Breaks &

Article
Horizontal Rules
HTML chapter-02/line-breaks.html
<p>The Earth<br />gets one hundred tons heavier every day<br />due to
falling space dust.</p>

<br />
As you have already seen, the browser will automatically show
each new paragraph or heading on a new line. But if you wanted to
add a line break inside the middle of a paragraph you can use the
R esult line break tag <br />.

<hr />
To create a break between themes — such as a change of topic in
HTML chapter-02/horizontal-rules.html
a book or a new scene in a play — you can add a horizontal rule
<p>Venus is the only planet that rotates between sections using the <hr /> tag.
clockwise.</p>
<hr /> There are a few elements that do not have any words between an
<p>Jupiter is bigger than all the other planets combined.</p> opening and closing tag. They are known as empty elements and
they are written differently.

An empty element usually has only one tag. Before the closing
angled bracket of an empty element there will often be a space
R esult and a forward slash character. Some web page authors miss this
out but it is a good habit to get into.

TEXT 48

Visual Editors &

Their Code views

Content management systems and HTML editors such as

Dreamweaver usually have two views of the page you are
creating: a visual editor and a code view.

Visual editors often resemble word allow you to control the presentation ●
Headings are created by highlighting
processors. Although each editor will of text. text then using a drop-down box to
differ slightly, there are some features select a heading.
that are common to most editors that ●
Bold and italic text are created by
 highlighting some text and pressing on a Mac) and then copy it from that
a b or i program and paste it into the visual
button. editor.
●
New paragraphs are created using
the return or the enter key.
●
Line breaks are created by pressing
the shift key and the return key at the
same time.
Code views show you the code
●
Horizontal rules are created using a created by the visual editor so you can
button with a straight line on it. manually edit it, or so you can just
If you copy and paste text from a enter new code yourself. It is often
program that allows you to format text activated using a button with an icon
(such as Word) into a visual editor, it that says HTML or has angled
may add extra markup. To prevent this brackets. White space may be added
copy the text into a plain text editor first to the code by the editor to make the
(such as Notepad on a PC or TextEdit code easier to read.

49 TEXT

Semantic Markup

There are some text elements that are not intended to affect the
structure of your web pages, but they do add extra information
to the pages — they are known as semantic markup.
In the rest of the chapter you will meet Browsers often display the contents The reason for using these elements is
some more elements that will help you of these elements in a different way. that other programs, such as screen
when you are adding text to web For example, the content of the <em> readers or search engines, can use this
pages. For example, you are going to element is shown in italics, and a extra information. For example, the
meet the <em> element that allows you <blockquote> is usually indented. But voice of a screen reader may add
to indicate where emphasis should be you should not use them to change the emphasis to the words inside the <em>
placed on selected words and the way that your text looks; their purpose is element, or a search engine might
<blockquote> element which indicates to describe the content of your web register that your page features a quote
that a block of text is a quotation. pages more accurately. if you use the <blockquote> element.

50TEXT

Strong & Emphasis

<strong> <em>
The use of the <strong> element indicates that its content has The <em> element indicates emphasis that subtly changes the
strong importance. For example, the words meaning of a sentence.
contained in this element might be said with strong emphasis.
By default browsers will show the contents of an <em> element in
By default, browsers will show the contents of a <strong> element in italic.
bold. chapter-02/strong.html HTML

<p><strong>Beware:</strong> Pickpockets operate in this area.</p>

<p>This toy has many small pieces and is <strong>not suitable for
children under five years old. </strong></p>
 chapter-02/emphasis.html HTML

<p>I <em>think</em> Ivy was the first.</p>

<p>I think <em>Ivy</em> was the first.</p>
R esult <p>I think Ivy was the <em>first</em>.</p>

51 TEXT R esult

Quotations
Article

HTML chapter-02/quotations.htmlThere are two elements commonly used for marking up

<blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh">
<p>Did you ever stop to think, and forget to start again?</p> <blockquote>
</blockquote>
<p>As A.A. Milne said, <q>Some people talk to animals. Not many listen The <blockquote> element is used for longer quotes that take up an
though. That's the problem.</q></p> entire paragraph. Note how the <p> element is still used inside the
<blockquote> element.

Browsers tend to indent the contents of the <blockquote> element,

however you should not use this element just to indent a piece of
text — rather you should achieve this effect using CSS.
R esult

<q>
The <q> element is used for shorter quotes that sit within a
paragraph. Browsers are supposed to put quotes around the <q>
quotations: element, however Internet Explorer does not — therefore many
people avoid using the <q> element. Both elements may use the cite attribute to indicate where the quote
is from. Its value should be a URL that will have more information
about the source of the quotation.

TEXT 52

Abbreviations &
Acronyms

<abbr> chapter-02/abbreviations.html HTML

<p><abbr title="Professor">Prof</abbr> Stephen
If you use an abbreviation or an acronym, then the <abbr> element
can be used. A title
attribute on the opening tag is used to specify the full term.

In HTML 4 there was a separate <acronym> element for

acronyms. To spell out the full form of the acronym, the title R
attribute was used (as with the esult
<abbr> element above). HTML5 just uses the <abbr> element for
both abbreviations and acronyms.
Hawking is a theoretical physicist and
cosmologist.</p>
<p><acronym title="National Aeronautics and Space
Administration">NASA</acronym> do some crazy space stuff.</p>

53 TEXT

Citations &
Article
 Definitions

HTML chapter-02/citations.html R esult

<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold
over ten million copies
worldwide.</p>

<cite>
When you are referencing a piece of work such as a book, film or
research paper, the <cite> element can be used to indicate where
the citation is from.
R esult
In HTML5, <cite> should not really be used for a person's name —
but it was allowed in HTML 4, so most people are likely to continue
to use it.

Browsers will render the content of a <cite> element in italics.

<dfn>
HTML chapter-02/definitions.html
The first time you explain some new terminology (perhaps an
<p>A <dfn>black hole</dfn> is a region of space from which nothing, not
academic concept or some jargon) in a document, it is known as
even light, can escape.</p>
the defining instance of it.

The <dfn> element is used to indicate the defining instance of a

new term.

Some browsers show the content of the <dfn> element in italics.

Safari and Chrome do not change its appearance.

TEXT 54

Author Details

<address> chapter-02/address.html HTML

<address>
The <address> element has quite a specific use: to contain contact Browsers often display the content of the <address> element in
details for the author of the page. italics.

It can contain a physical address, but it does not have to. For You may also be interested in something called the hCard
example, it may also contain a phone number or email address. microformat for adding physical address information to your
markup.

Online extra: R esult

You can find out more about hCards on the website
accompanying this book.
<p><a href="mailto:homer@example.org">
homer@example.org</a></p>
<p>742 Evergreen Terrace, Springfield.</p> </address>

55 TEXT

Changes to ContentArticle

HTML chapter-02/insert-and-delete.html HTML chapter-02/strikethrough.html

<p>It was the <del>worst</del> <ins>best</ins> idea she had ever <p>Laptop computer:</p>
had.</p> <p><s>Was $995</s></p>
<p>Now only $375</p>

R esult R esult
 content of a <del> element usually has a line through it.

<ins> <s>
<del> The <s> element indicates something that is no longer accurate or
relevant (but that should not be deleted).
The <ins> element can be used to show content that has been
Visually the content of an <s> element will usually be displayed with
inserted into a document, while the <del> element can show text
a line through the center.
that has been deleted from it.

Older versions of HTML had a <u> element for content that was
The content of a <ins> element is usually underlined, while the
underlined, but this is being phased out.

TEXT 56
57 TEXT

Example
TEXT

This is a very simple HTML page

that demonstrates text markup.
Structural markup includes elements such as <h1>, <h2>, and
<p>. Semantic information is carried in elements such as <cite>
and <em>.

<html>
<head>
<title>Text</title>
</head>
<body>
<h1>The Story in the Book</h1>
<h2>Chapter 1</h2>
<p>Molly had been staring out of her window for about an hour now. On her
desk, lying between the copies of <i>Nature</i>, <i>New Scientist</i>, and
all the other scientific journals her work had appeared in, was a well
thumbed copy of <cite>On The Road</cite>. It had been Molly's favorite
book since college, and the longer she spent in these four walls the more
she felt she needed to be free.</p>
<p>She had spent the last ten years in this room, sitting under a poster with
an Oscar Wilde quote proclaiming that <q>Work is the refuge of people who
 have nothing better to do</q>. Although many considered her pioneering
work, unraveling the secrets of the llama <abbr
title="Deoxyribonucleic acid">DNA</abbr>, to be an outstanding
achievement, Molly <em>did</em> think she had something better to
do.</p>
</body>
</html>

TEXT 58

Summary
TEXT

⇪HTML elements are used to describe the

structure of the page (e.g. headings, subheadings,
paragraphs).
⇪They also provide semantic information (e.g.
where emphasis should be placed, the definition
of any acronyms used, when given text is a
quotation).
⇪ ⇪

3
Numbered lists Bullet lists
⇪
Definition lists

Lists
There are lots of occasions when we
need to use lists. HTML provides us
with three different types:
●
Ordered lists are lists where each item in the list is
numbered. For example, the list might be a set of steps
for a recipe that must be performed in order, or a legal
contract where each point needs to be identified by a
section number.
●
Unordered lists are lists that begin with a bullet
point (rather than characters that indicate order).
●
Definition lists are made up of a set of terms along with
the definitions for each of those terms.

63 LISTS
 LISTS 64

Ordered Lists

numerals and so on). It is better to use the CSS list style-type

<ol> property covered on pages 333-335.
chapter-03/ordered-lists.html HTML

<ol>
The ordered list is created with the <ol> element.
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20

<li> minutes until tender</li>

<li>Heat milk, butter and nutmeg</li>
<li>Drain potatoes and mash</li>
<li>Mix in the milk mixture</li>
Each item in the list is placed between an opening <li> tag and a
</ol>
closing </li> tag. (The li stands for list item.)

Browsers indent lists by default.

Sometimes you may see a type attribute used with the <ol> element
to specify the type of numbering (numbers, letters, roman
Result

65 LISTS

Unordered Lists
Article

HTML chapter-03/unordered-lists.html
<ul>
<li>1kg King Edward potatoes</li>
<li>100ml milk</li>

<ul>
<li>50g salted butter</li>
<li>Freshly grated nutmeg</li>
<li>Salt and pepper to taste</li>
</ul>
The unordered list is created with the <ul> element.

<li>
Result Each item in the list is placed between an opening <li> tag and a
closing </li> tag. (The li stands for list item.)

Browsers indent lists by default.

Sometimes you may see a type attribute used with the <ul> element so on). It is better to use the CSS list-style type property covered on
to specify the type of bullet point (circles, squares, diamonds and pages 333-335.

LISTS 66

Definition Lists

<dd>A device used to accurately measure the weight of ingredients</dd>

<dl> <dd>A technique by which the scales are removed from the skin of a
fish</dd>
<dt>Scamorze</dt>
The definition list is created with the <dl> element and usually
consists of a series of terms and their definitions. <dt>Scamorzo</dt>
<dd>An Italian cheese usually made from whole cow's milk (although it was
traditionally made from buffalo milk)</dd>
Inside the <dl> element you will usually see pairs of <dt> and <dd>
elements. </dl>

<dt>
This is used to contain the term being defined (the definition term).

<dd>
This is used to contain the definition.

Sometimes you might see a list where there are two terms used for
the same definition or two different definitions for the same term.
chapter-03/definition-lists.html HTML

<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with
condiments such as shredded daikon radish or ginger root, wasabi and soy
sauce</dd> <dt>Scale</dt>
Result

67 LISTS

Nested
ListsArticl
e

HTML chapter-03/nested-lists.html Result

<ul>
<li>Mousses</li>
<li>Pastries
<ul>
<li>Croissant</li>
<li>Mille-feuille</li>
<li>Palmier</li>
<li>Profiterole</li>
</ul>
You can put a second list inside an <li> element to create a sub list
or nested list.
</li>
<li>Tarts</li>
Browsers display nested lists indented further than the parent list.
</ul>
In nested unordered lists, the browser will usually change the style
of the bullet point too.
LISTS 68
69 LISTS

Example
LIST
S

Here you can see a main heading followed

by an introductory paragraph. An
unordered list is used to outline the
ingredients and an ordered list is used to
describe the steps.
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>Scrambled Eggs</h1>
<p>Eggs are one of my favourite foods. Here is a recipe for deliciously
rich scrambled eggs.</p> <h2>Ingredients</h2>
<ul>
<li>2 eggs</li>
<li>1tbs butter</li>
<li>2tbs cream</li>
</ul>
<h2>Method</h2>
<ol>
<li>Melt butter in a frying pan over a medium heat</li>
<li>Gently mix the eggs and cream in a bowl</li> <li>Once butter has
melted add cream and eggs</li> <li>Using a spatula fold the eggs from the
edge of the pan to the center every 20 seconds (as if you are making an
omelette)</li>
<li>When the eggs are still moist remove from the heat (it will continue to
cook on the plate until served)</li>
</ol>
</body>
</html>

LISTS 70

Summary
LISTS
⇪ There are three types of HTML lists:
ordered, unordered, and definition.
⇪ Ordered lists use numbers.

⇪ Unordered lists use bullets.

⇪ Definition lists are used to define

terminology. ⇪ Lists can be nested inside

one another.