HTML & CSS
Design and Build Websites
Jon Duckett
John Wiley & Sons, Inc.
HTML & CSS
Design and build Websites
Published by
John Wiley & Sons, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
www.wiley.com
©2011 by John Wiley & Sons, Inc., Indianapolis, Indiana
ISBN: 978-1-118-00818-8
Manufactured in the United States of America
Published simultaneously in Canada
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) 7486011, 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.
Credits
For John Wiley & Sons, Inc.
Executive Editor
Carol Long
Author
Jon Duckett
Marketing Manager
Ashley Zurcher
Cover Designer
Emme Stone
Production Manager
Tim Tate
Design and Layout
Jon Duckett
Emme Stone
Photography
John Stewardson
johnstewardson.com
PRODUCTION EDITOR
Daniel Scribner
Vice President and
Executive Group Publisher
Richard Swadley
Vice President and
Executive Publisher
Barry Pruett
Associate Publisher
Jim Minatel
Production Coordinator,
Cover
Katie Crocker
Additional Photography
Hesperian
Joe Robertson
flickr.com/photos/mindfire
Jules Clancy
thestonesoup.com
Technical Editor
Chris Mills
Kylie Gusset
gusset.net
Michael Stillwell
TECHNICAL REVIEWERS
Andy Stone
Angela Shimell
Donna Watson
Martin Callanan
Rob Jacoby
Tony Berry
beebo.org
Try out and download all of the code for this book online at:
http://www.htmlandcssbook.com/code/
Contents
Introduction
Chapter 1: Structure
Chapter 2: Text
Chapter 3: Lists
Chapter 4: Links
Chapter 5: Images
Chapter 6: Tables
Chapter 7: Forms
Chapter 8: Extra Markup
Chapter 9: Flash, Video & Audio
Chapter 10: Introducing CSS
Chapter 11: Color
Chapter 12: Text
Chapter 13: Boxes
Chapter 14: Lists, Tables & Forms
Chapter 15: Layout
Chapter 16: Images
Chapter 17: HTML5 Layout
Chapter 18: Process & Design
Chapter 19: Practical Information
Index
2
12
40
62
74
94
126
144
176
200
226
246
264
300
330
358
406
428
452
476
493
Introduction
XX
XX
XX
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. They introduce the key topics you will learn
about.
Reference pages introduce key pieces of HTML &
CSS code. The HTML code is shown in blue and CSS
code is shown in pink.
Background pages appear on white; they explain the
context of the topics covered that are discussed in
each chapter.
Diagram and infographics pages are shown on a
dark background. They provide a simple, visual
reference to topics discussed.
Example pages put together the topics you have
learned and demonstrate how they can be applied
in each.
Summary pages come at the end of each chapter.
They remind 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
resemble dull manuals. To make it easier for
you to learn, we threw away the traditional
template used by publishers and redesigned
this book from scratch.
At work, when people look
at my screen and see it full of
code, it's not unusual to get a
comment about it looking very
complicated or how clever I must
be to understand it. The truth
is, it's not that hard to learn how
to write web pages and read
the code used to create them;
you certainly don't have to be a
"programmer."
5
INTRODUCTION
Understanding HTML and CSS
can help anyone who works
with the web; designers can
create more attractive and
usable sites, website editors can
create better content, marketers
can communicate with their
audience more effectively, and
managers can commission
better sites and get the best out
of their teams.
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 is your full time job. By
the end of the book, if you come
across the other 10% you will be
able to Google it to find out what
it means quickly and easily.
I have also added practical
information on topics I am
commonly asked about, such as
how to prepare images, audio
and video for the web, how to
approach the design and build
of a new site, how to improve
your rankings in search engines
(SEO), and how to use Google
Analytics to learn about visitors
to your site.
The Structure of
This Book
In order to teach you about creating web pages,
this book is divided into three sections:
1: HTML
2: CSS
3: Practical
We will spend the first chapter
looking at how HTML is used to
create web pages. You will see
that you start by writing down
the words you want to appear
on your page. You then add tags
or elements to the words so
that the browser knows what is
a heading, where a paragraph
begins and ends, and so on.
We start this section with a
chapter that explains how CSS
uses rules to enable you to
control the styling and layout
of web pages. We then go on to
look at the wide variety of CSS
properties you can use in your
CSS rules. These properties
generally fall into one of two
categories:
We end up with some helpful
information that will assist you in
building better websites.
The rest of this section
introduces the tags you have
at your disposal to create web
pages, grouped into chapters on:
text, lists, links, images, tables,
forms, video audio and flash, and
miscellaneous elements.
Presentation: How to control
things like the color of text, the
fonts you want to use and the
size of those fonts, how to add
background colors to pages (or
parts of a page), and how to add
background images.
I should warn you that the
examples in the first nine
chapters are not exciting to look
at, yet they are the foundation of
every web page. The following
chapters on CSS will show you
how to make your pages look a
lot more interesting.
Layout: How to control where
the different elements are
positioned on the screen. You
will also learn several techniques
that professionals use to make
their pages more attractive.
We look at some new tags that
will be introduced in HTML5 to
help describe the structure of
your pages. HTML5 is the latest
version of HTML (still under
development at the time of
writing). Before learning about
these elements, you need a good
grasp of how CSS is used to
control the design of web pages.
There is a chapter that talks you
through a design process that
you might like to follow when
creating a new website.
Finally, we end up looking at
topics that will help you once
you have built your site, such
as putting it on the web, search
engine optimisation (SEO) and
using analytics software to track
who comes to your site 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
Web Servers
Screen readers
People access websites using
software called a web browser.
Popular examples include
Firefox, Internet Explorer, Safari,
Chrome, and Opera.
When you ask your browser for
a web page, the request is sent
across the Internet to a special
computer known as a web
server which hosts the website.
Screen readers are programs
that read out the contents of a
computer screen to a user. They
are commonly used by people
with visual impairments.
In order to view a web page,
users might type a web address
into their browser, follow a
link from another site, or use a
bookmark.
Web servers are special
computers that are constantly
connected to the Internet, and
are optimized to send web pages
out to people who request them.
Software manufacturers
regularly release new versions
of browsers with new features
and supporting new additions
to languages. It is important,
however, to remember that
many computer owners will not
be running the latest versions
of these browsers. Therefore
you cannot rely on all visitors to
your site being able to use the
latest functionality offered in all
browsers.
Some big companies run their
own web servers, but it is more
common to use the services of
a web hosting company who
charge a fee to host your site.
In the same way that many
countries have legislations
that require public buildings
to be accessible to those with
disabilities, many laws have
also been passed that require
websites be accessible to those
with disabilities.
You will learn how to tell which
browsers visitors use to access
your website in Chapter 19.
7
INTRODUCTION
Devices
People are accessing websites
on an increasing range of devices
including desktop computers,
laptops, tablets, and mobile
phones. It is important to
remember that various devices
have different screen sizes and
some have faster connections to
the web than others.
Throughout this book you will
see several references to screen
readers. These notes will help
ensure that the sites you create
are accessible to people who use
such software.
It is interesting to note that
technologies similar to those
employed by screen readers are
also being used in other areas
where people are unable read a
screen, such as when they are
driving or jogging.
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
HTML5 & CSS3
When you are looking at a
website, it is most likely that
your browser will be receiving
HTML and CSS from the web
server that hosts the site. The
web browser interprets the
HTML and CSS code to create
the page that you see.
Small websites are often written
just using HTML and CSS.
Since the web was first created
there have been several versions
of HTML and CSS — each
intended to be an improvement
on the previous version.
Most web pages also include
extra content such as images,
audio, video, or animations and
this book will teach you how to
prepare them for use on the web
and then how to insert them into
your web pages.
Some sites also send JavaScript
or Flash to your browser, and you
will see how to add JavaScript
and Flash in your web pages.
Both of these technologies are
advanced topics that you can go
on to learn more about once you
have mastered HTML and CSS, if
you want to.
Larger websites — in particular
those that are updated regularly
and use a content management
system (CMS), blogging tools, or
e-commerce software — often
make use of more complex
technologies on the web server,
but these technologies are
actually used to produce HTML
and CSS that is then sent to the
browser. So, if your site uses
these technologies, you will be
able to use your new HTML and
CSS knowledge to take more
control over how your site looks.
Larger, more complex sites like
these may use a database to
store data, and programming
languages such as PHP, ASP.Net,
Java, or Ruby on the web server,
but you do not need to know
these technologies to improve
what the user sees. The skills
you'll learn in this book should be
enough to help you on that road.
At the time of writing this
book, HTML5 & CSS3 were
still being developed. Although
they had not been finalized,
many browsers were already
supporting some features of
these languages and a lot of
people were using the latest
code on their websites. I have
therefore chosen to teach you
these latest versions.
Because HTML5 and CSS3
build on previous versions of
these languages, learning these
means you will also be able to
understand the earlier versions
of them. I have added clear notes
when the code is new and also
when it might 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 demonstrate
how the web server that hosts
the website you are visiting can
be anywhere in the world. It is
the DNS servers that tell your
browser how to find the website.
●●
A user in Barcelona visits
sony.jp in Tokyo
●●
A user in New York visits
google.com in San Francisco
●●
A user in Stockholm visits
qantas.com.au in Sydney
●●
A user in Vancouver visits
airindia.in in Bangalore
9
INTRODUCTION
On the right you can see what
happens when a web user in
England wants to view the
website of the Louvre art gallery
in France which is located at
www.louvre.fr. Firstly, the
browser in Cambridge contacts
a DNS server in London. The
DNS server then tells the
browser the location of the web
server hosting the site in Paris.
2
1
When you connect to the web,
you do so via an Internet Service
Provider (ISP). You type a
domain name or web address
into your browser to visit a site;
for example: google.com,
bbc.co.uk, microsoft.com .
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
computer.
Cambridge
3
The unique number that the
DNS server returns to your
computer allows your browser
to contact the web server
that hosts the website you
requested. A web server is a
computer that is constantly
connected to the web, and is set
up especially to send web pages
to users.
LONDON
PARIS
4
The web server then sends the
page you requested back to your
web browser.
1
Structure
XX
XX
XX
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:
13
●●
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
STRUCTURE
STRUCTURE
14
How Pages Use
Structure
Think about the stories you
read in a newspaper: for each
story, there will be a headline,
some text, and possibly some
images. If the article is a long
piece, there may be subheadings
that split the story into separate
sections or quotes from those
involved. Structure helps readers
understand the stories in the
newspaper.
15
STRUCTURE
The structure is very similar
when a news story is viewed
online (although it may also
feature audio or video). This is
illustrated on the right with a
copy of a newspaper alongside
the corresponding article on its
website.
Now think about a very different
type of document — an
insurance form. Insurance forms
often have headings for different
sections, and each section
contains a list of questions with
areas for you to fill in details or
checkboxes to tick. Again, the
structure is very similar online.
STRUCTURE
16
Structuring Word
Documents
The use of headings and
subheadings in any document
often reflects a hierarchy of
information. For example, a
document might start with
a large heading, followed by
an introduction or the most
important information.
17
STRUCTURE
This might be expanded upon
under subheadings lower down
on the page. When using a word
processor to create a document,
we separate out the text to give
it structure. Each topic might
have a new paragraph, and each
section can have a heading to
describe what it covers.
On the right, you can see a
simple document in Microsoft
Word. The different styles for
the document, such as different
levels of heading, are shown
in the drop down box. If you
regularly use Word, you might
have also used the formatting
toolbar or palette to do this.
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.
This is the Main Heading
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.
This is a Sub-Heading
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).
Another Sub-Heading
Here you can see another sub-heading.
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
This is the Main Heading
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.
This is a Sub-Heading
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).
Another Sub-Heading
Here you can see another sub-heading.
21
STRUCTURE
Tags act like containers. They tell you
something about the information that lies
between their opening and closing tags.
Description
The opening tag indicates that anything between it and a closing tag is HTML code.
The tag indicates that anything between it and the closing
tag should be shown inside the main browser window.
Words between and are a main heading.
A paragraph of text appears between these and tags.
Words between and form a sub-heading.
Here is another paragraph between opening and closing tags.
Another sub-heading inside and tags.
Another paragraph inside and tags.
The closing tag indicates the end of what should appear in the main browser window.
The closing tag indicates that it is the end of the HTML code.
STRUCTURE
22
A Closer Look at Tags
Character
left-angle bracket
(less-than sign)
RIGHT-angle bracket
(MORE-than sign)
Opening Tag
The characters in the brackets
indicate the tag's purpose.
23
STRUCTURE
For example, in the tags above
the p stands for paragraph.
The closing tag has a forward
slash after the the < symbol.
Character
RIGHT-angle bracket
(MORE-than sign)
left-angle bracket
(less-than sign)
Forward Slash
Closing Tag
The terms "tag" and "element"
are often used interchangeably.
Strictly speaking, however, an
element comprises the opening
tag and the closing tag and any
content 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
Paragraph in English
Attribute
Value
The attribute name indicates
what kind of extra information
you are supplying about the
element's content. It should be
written in lowercase.
25
STRUCTURE
The value is the information
or setting for the attribute. It
should be placed in double
quotes. Different attributes can
have different values.
Here an attribute called lang is
used to indicate the language
used in this element. The value
of this attribute on this page
specifies it is in US English.
HTML5 allows you to use
uppercase attribute names and
omit the quotemarks, but this is
not recommended.
Attribute
Name
Paragraphe en Français
Attribute
Value
The majority of attributes can
only be used on certain
elements, although a few
attributes (such as lang)
can appear on any element.
Most attribute values are
either pre-defined or follow a
stipulated format. We will look
at the permitted values as we
introduce each new attribute.
The value of the lang attribute
is an abbreviated way of
specifying which language is
used inside the element that
all browsers understand.
STRUCTURE
26
Body, Head & Title
You met the element
in the first example we created.
Everything inside this element is
shown inside the main browser
window.
Before the element you
will often see a 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
element inside the
element.
The contents of the
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 tabs to allow you
to view multiple pages at the
same time).
27
STRUCTURE
HTML
/chapter-01/body-head-title.html
This is the Title of the Page
This is the Body of the Page
Anything within the body of a web page is
displayed in the main browser window.
R e s u lt
Anything written between the
tags will appear in the
title bar (or tabs) at the top of
the browser window, highlighted
in orange here.
Anything written between
the tags will appear
in the main browser window,
highlighted in blue here.
You may know that HTML
stands for HyperText Markup
Language. The HyperText part
refers to the fact that HTML
allows you to create links that
allow visitors to move from one
page to another quickly and
easily. A markup language allows
you to annotate text, and these
annotations provide additional
meaning to the contents of a
document. If you think of a web
page, we add code around the
original text we want to display
and the browser then uses
the code to display the page
correctly. So the tags we add are
the markup.
STRUCTURE
28
Creating a Web Page
on a PC
To create your first web page on
a PC, start up Notepad. You can
find this by going to:
1
Start
All Programs (or Programs)
Accessories
Notepad
You might also like to download
a free editor called Notepad++
from notepad-plus-plus.org.
Type the code shown on the
right.
29
STRUCTURE
2
Article
3
Go to the File menu and select
Save as... You will need to 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. Make sure that the Save
as type drop down has All Files
selected.
4
Start your web browser. Go to
the File menu and select Open.
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 "firsttest.html").
STRUCTURE
30
Creating a Web Page
on a Mac
To create your first web page on
a Mac, start up TextEdit. This
should be in your Applications
folder.
1
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.
31
STRUCTURE
2
Article
3
Now go to the File menu and
select Save as... You will need to
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.
4
Next, start your web browser,
go to the File menu, and select
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, blogging
platform, or e-commerce
application, you will probably
log into a special administration
section of the website to control
it. The tools provided in the
administration sections of these
sites usually allow you to edit
parts of the page rather than
the entire page, which means
you will rarely see the ,
, or elements.
Looking at the content
management system on the
opposite page, you have a box
33
STRUCTURE
that allows you to enter a title
for the page, another box for the
main article, a way to enter a
publication date, and something
to indicate which section of the
site this page belongs in.
For an e-commerce store, you
might have boxes that allow you
to enter a title for the product,
a description of the product, its
price, and the quantity available.
That is because they use a single
'template' to control all of the
pages for a section of the site.
(For example, an e-commerce
system might use the same
template to show all of their
products.) The information
you supply is placed into the
templates.
The advantage of this approach
is that people who do not know
how to write web pages can
add information to a website
and it is also possible to change
the presentation of something
in the template, and it will
automatically update every page
that uses that template. If you
imagine an e-commerce store
with 1,000 items for sale, just
altering one template is a lot
easier than changing the page
for each individual product.
In systems like this, when
you have a large block of text
that you can edit, such as a
news article, blog entry or the
description of a product in an
e-commerce store, you will often
see a text editor displayed.
Text editors usually have
controls a little like those on
your word processor, 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.
Some content management
systems offer tools that also
allow you to edit the template
files. If you do try to edit
template files you need to check
the documentation for your CMS
as they all differ from each other.
You need to be careful when
editing template files because
if you delete the wrong piece of
code or add something in the
wrong place the site may stop
working entirely.
STRUCTURE
34
Looking at How Other
sites are Built
When the web was first taking
off, one of the most common
ways to learn about HTML and
discover new tips and techniques
was to look at the source code
that made up web pages.
These days there are many
more books and online tutorials
that teach HTML, but you can
still look at the code that a web
server sends to you. To try this
out for yourself, simply go to the
sample code for this chapter, at
www.htmlandcssbook.com/
code/ and click on the link called
"View Source."
35
STRUCTURE
Once you have opened this
page, you can look for the View
menu in your browser, and select
the option that says Source or
View source. (The title changes
depending on what browser you
are using.)
At first this code might look
complicated but don't be
discouraged. By the time you
have finished the next chapter
of this book, you will be able to
understand it.
You should see a new window
appear, and it will contain the
source code that was used to
create this page.
All of the examples for this book
are on the website, and you can
use this simple technique on any
of the example pages to see how
they work.
You can see this result in the
photograph on the right. The
page you see is the window at
the top; the code is below.
You can also download all of
the code for this book from the
same website by clicking on the
"Download" link.
STRUCTURE
36
Summary
STRUCTURE
XX
HTML pages are text documents.
XX
HTML uses tags (characters that sit inside angled
brackets) to give the information they surround special
meaning.
XX
Tags are often referred to as elements.
XX
Tags usually come in pairs. The opening tag denotes
the start of a piece of content; the closing tag denotes
the end.
XX
Opening tags can carry attributes, which tell us more
about the content of that element.
XX
Attributes require a name and a value.
XX
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
XX
XX
XX
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:
41
TEXT
●●
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
TEXT
42
Headings
HTML has six "levels" of
headings:
is used for main headings
is used for subheadings
If there are further sections
under the subheadings then the
element is used, and so
on...
Browsers display the contents of
headings at different sizes. The
contents of an element is
the largest, and the contents of
an 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.
43
TEXT
chapter-02/headings.html
This
This
This
This
This
This
is
is
is
is
is
is
a
a
a
a
a
a
HTML
Main Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading
R e s u lt
Paragraphs
Article
HTML
chapter-02/paragraphs.html
A paragraph consists of one or more sentences
that form a self-contained unit of discourse. The
start of a paragraph is indicated by a new
line.
Text is easier to understand when it is split up
into units of text. For example, a book may have
chapters. Chapters can have subheadings. Under
each heading there will be one or more
paragraphs.
To create a paragraph, surround
the words that make up the
paragraph with an opening
tag and closing tag.
By default, a browser will show
each paragraph on a new line
with some space between it and
any subsequent paragraphs.
R e s u lt
TEXT
44
Bold & Italic
By enclosing words in the tags
and we can make
characters appear bold.
chapter-02/bold.html
This is how we make a word appear bold.
Inside a product description you might see some
key features in bold.
The 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 element does not imply
any additional meaning.
By enclosing words in the tags
and we can make
characters appear italic.
The 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.
45
TEXT
HTML
R e s u lt
chapter-02/italic.html
HTML
This is how we make a word appear italic.
It's a potato Solanum teberosum.
Captain Cook sailed to Australia on the
Endeavour.
R e s u lt
Superscript
Article
&
Subscript
HTML
chapter-02/superscript-and-subscript.html
On the 4th of September you will learn
about E=MC2.
The amount of CO2 in the atmosphere
grew by 2ppm in 20091.
R e s u lt
The element is used
to contain characters that
should be superscript such
as the suffixes of dates or
mathematical concepts like
raising a number to a power such
as 22.
The element is used to
contain characters that should
be 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 extra spaces or start some
elements on new lines.
When the browser comes across
two or more spaces next to each
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.
47
TEXT
chapter-02/white-space.html
HTML
The moon is drifting away from Earth.
The moon
is drifting away from Earth.
The moon is drifting away from
Earth.
R e s u lt
Line Breaks
Article
&
Horizontal Rules
HTML
chapter-02/line-breaks.html
The Earthgets one hundred tons heavier
every daydue to falling space dust.
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 line break tag .
R e s u lt
HTML
chapter-02/horizontal-rules.html
Venus is the only planet that rotates
clockwise.
Jupiter is bigger than all the other planets
combined.
R e s u lt
To create a break between
themes — such as a change of
topic in a book or a new scene
in a play — you can add a
horizontal rule between sections
using the tag.
There are a few elements that
do not have any words between
an 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 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 processors. Although
each editor will differ slightly,
there are some features that
are common to most editors
that allow you to control the
presentation of text.
49
●●
Headings are created by
highlighting text then using
a drop-down box to select a
heading.
●●
Bold and italic text are
created by highlighting some
text and pressing a b or i
button.
●●
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.
●●
Horizontal rules are created
using a button with a straight
line on it.
TEXT
If you copy and paste text from
a program that allows you to
format text (such as Word) into
a visual editor, it may add extra
markup. To prevent this copy
the text into a plain text editor
first (such as Notepad on a PC
or TextEdit on a Mac) and then
copy it from that program and
paste it into the visual editor.
Code views show you the code
created by the visual editor so
you can manually edit it, or so
you can just enter new code
yourself. It is often activated
using a button with an icon
that says HTML or has angled
brackets. White space may be
added to the code by the editor
to make the code easier to read.
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 some more elements
that will help you when you are
adding text to web pages. For
example, you are going to meet
the element that allows
you to indicate where emphasis
should be placed on selected
words and the
element which indicates that a
block of text is a quotation.
Browsers often display the
contents of these elements in
a different way. For example,
the content of the
element is shown in italics,
and a is usually
indented. But you should not
use them to change the way that
your text looks; their purpose is
to describe the content of your
web pages more accurately.
The reason for using these
elements is that other programs,
such as screen readers or search
engines, can use this extra
information. For example, the
voice of a screen reader may add
emphasis to the words inside
the element, or a search
engine might register that your
page features a quote if you use
the element.
TEXT
50
Strong & Emphasis
The use of the
element indicates that its
content has strong importance.
For example, the words
contained in this element might
be said with strong emphasis.
chapter-02/strong.html
Beware: Pickpockets operate in
this area.
This toy has many small pieces and is not
suitable for children under five years old.
By default, browsers will show
the contents of a
element in bold.
The element indicates
emphasis that subtly changes
the meaning of a sentence.
HTML
R e s u lt
chapter-02/emphasis.html
HTML
I think Ivy was the first.
I think Ivy was the first.
I think Ivy was the first.
By default browsers will show
the contents of an element
in italic.
R e s u lt
51
TEXT
Quotations
Article
HTML
chapter-02/quotations.html
Did you ever stop to think, and forget to start
again?
As A.A. Milne said, Some people talk to
animals. Not many listen though. That's the
problem.
R e s u lt
There are two elements
commonly used for marking up
quotations:
The element is
used for longer quotes that take
up an entire paragraph. Note
how the element is still
used inside the
element.
Browsers tend to indent the
contents of the
element, however you should not
use this element just to indent a
piece of text — rather you should
achieve this effect using CSS.
The element is used for
shorter quotes that sit within
a paragraph. Browsers are
supposed to put quotes around
the element, however
Internet Explorer does not —
therefore many people avoid
using the 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
If you use an abbreviation or
an acronym, then the
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
element for
acronyms. To spell out the full
form of the acronym, the title
attribute was used (as with the
element above). HTML5
just uses the element
for both abbreviations and
acronyms.
53
TEXT
chapter-02/abbreviations.html
HTML
Prof Stephen
Hawking is a theoretical physicist and
cosmologist.
NASA do some crazy
space stuff.
R e s u lt
Citations
Article
&
Definitions
HTML
chapter-02/citations.html
A Brief History of Time by Stephen
Hawking has sold over ten million copies
worldwide.
When you are referencing a
piece of work such as a book,
film or research paper, the
element can be used
to indicate where the citation is
from.
In HTML5, 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.
R e s u lt
Browsers will render the content
of a element in italics.
HTML
chapter-02/definitions.html
A black hole is a region of space from
which nothing, not even light, can escape.
R e s u lt
The first time you explain some
new terminology (perhaps an
academic concept or some
jargon) in a document, it is
known as the defining instance
of it.
The element is used to
indicate the defining instance of
a new term.
Some browsers show the
content of the element in
italics. Safari and Chrome do not
change its appearance.
TEXT
54
Author Details
The element has
quite a specific use: to contain
contact details for the author of
the page.
chapter-02/address.html
HTML
homer@example.org
742 Evergreen Terrace, Springfield.
It can contain a physical address,
but it does not have to. For
example, it may also contain a
phone number or email address.
Browsers often display the
content of the
element in italics.
You may also be interested in
something called the hCard
microformat for adding physical
address information to your
markup.
Online extra:
You can find out more about
hCards on the website
accompanying this book.
55
TEXT
R e s u lt
Changes to Content
Article
HTML
chapter-02/insert-and-delete.html
It was the worst best idea
she had ever had.
The element can be used
to show content that has been
inserted into a document, while
the element can show text
that has been deleted from it.
R e s u lt
The content of a element
is usually underlined, while the
content of a element
usually has a line through it.
HTML
Laptop computer:
Was $995
Now only $375
R e s u lt
chapter-02/strikethrough.html
The element indicates
something that is no longer
accurate or relevant (but that
should not be deleted).
Visually the content of an
element will usually be displayed
with a line through the center.
Older versions of HTML had a
element for content that
was 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 , , and .
Semantic information is carried in elements such as and .
Text
The Story in the Book
Chapter 1
Molly had been staring out of her window for about
an hour now. On her desk, lying between the copies
of Nature, New Scientist, and all
the other scientific journals her work had
appeared in, was a well thumbed copy of On
The Road. 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.
She had spent the last ten years in this room,
sitting under a poster with an Oscar Wilde quote
proclaiming that Work is the refuge of
people who have nothing better to do. Although
many considered her pioneering work, unraveling
the secrets of the llama DNA, to be an
outstanding achievement, Molly did think
she had something better to do.
TEXT
58
Summary
TEXT
XX
HTML elements are used to describe the structure of
the page (e.g. headings, subheadings, paragraphs).
XX
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
Lists
XX
XX
XX
Numbered lists
Bullet lists
Definition lists
There are lots of occasions when we
need to use lists. HTML provides us with
three different types:
63
LISTS
●●
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.
LISTS
64
Ordered Lists
The ordered list is created with
the element.
chapter-03/ordered-lists.html
HTML
Chop potatoes into quarters
Simmer in salted water for 15-20
minutes until tender
Heat milk, butter and nutmeg
Drain potatoes and mash
Mix in the milk mixture
Each item in the list is placed
between an opening tag
and a closing tag. (The li
stands for list item.)
R e s u lt
Browsers indent lists by default.
Sometimes you may see a type
attribute used with the
element to specify the type of
numbering (numbers, letters,
roman numerals and so on). It
is better to use the CSS liststyle-type property covered
on pages 333-335.
65
LISTS
Unordered
Article
Lists
HTML
chapter-03/unordered-lists.html
1kg King Edward potatoes
100ml milk
50g salted butter
Freshly grated nutmeg
Salt and pepper to taste
The unordered list is created
with the element.
Each item in the list is placed
between an opening tag
and a closing tag. (The li
stands for list item.)
R e s u lt
Browsers indent lists by default.
Sometimes you may see a type
attribute used with the
element to specify the type of
bullet point (circles, squares,
diamonds and so on). It is better
to use the CSS list-styletype property covered on pages
333-335.
LISTS
66
Definition Lists
The definition list is created with
the element and usually
consists of a series of terms and
their definitions.
Inside the element you will
usually see pairs of and
elements.
This is used to contain the term
being defined (the definition
term).
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.
67
LISTS
chapter-03/definition-lists.html
HTML
Sashimi
Sliced raw fish that is served with
condiments such as shredded daikon radish or
ginger root, wasabi and soy sauce
Scale
A device used to accurately measure the
weight of ingredients
A technique by which the scales are removed
from the skin of a fish
Scamorze
Scamorzo
An Italian cheese usually made from whole
cow's milk (although it was traditionally made
from buffalo milk)
R e s u lt
Nested
Article
Lists
HTML
chapter-03/nested-lists.html
Mousses
Pastries
Croissant
Mille-feuille
Palmier
Profiterole
Tarts
You can put a second list inside
an element to create a sublist or nested list.
Browsers display nested lists
indented further than the parent
list. In nested unordered lists,
the browser will usually change
the style of the bullet point too.
R e s u lt
LISTS
68
69
LISTS
Example
LISTS
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.
Lists
Scrambled Eggs
Eggs are one of my favourite foods. Here is a
recipe for deliciously rich scrambled eggs.
Ingredients
2 eggs
1tbs butter
2tbs cream
Method
Melt butter in a frying pan over a medium
heat
Gently mix the eggs and cream in a bowl
Once butter has melted add cream and eggs
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)
When the eggs are still moist remove from the
heat (it will continue to cook on the plate
until served)
LISTS
70
Summary
LISTS
XX
There are three types of HTML lists: ordered,
unordered, and definition.
XX
Ordered lists use numbers.
XX
Unordered lists use bullets.
XX
Definition lists are used to define terminology.
XX
Lists can be nested inside one another.
4
Links
XX
XX
XX
Creating links between pages
Linking to other sites
Email links
Links are the defining feature of the web
because they allow you to move from
one web page to another — enabling the
very idea of browsing or surfing.
You will commonly come across the following types of links:
75
LINKS
●●
Links from one website to another
●●
Links from one page to another on the same website
●●
Links from one part of a web page to another part of the
same page
●●
Links that open in a new browser window
●●
Links that start up your email program and address a new
email to someone
LINKS
76
Writing Links
Links are created using the element. Users can click on anything
between the opening tag and the closing tag. You specify
which page you want to link to using the href attribute.
This is the page the
link takes you to
This is the text the
user clicks on
IMDB
Opening link tag
77
LINKS
Closing
link tag
The text between the opening
tag and closing tag
is known as link text. Where
possible, your link text should
explain where visitors will be
taken if they click on it (rather
than just saying "click here").
Below you can see the link to
IMDB that was created on the
previous page.
Many people navigate websites
by scanning the text for links.
Clear link text can help visitors
find what they want. This
will give them a more positive
impression of your site and may
encourage them to visit it for
longer. (It also helps people
using screen reader software.)
To write good link text, you can
think of words people might
use when searching for the
page that you are linking to.
(For example, rather than write
"places to stay" you could use
something more specific such as
"hotels in New York.")
LINKS
78
Linking to Other Sites
Links are created using the
element which has an attribute
called href. The value of the
href attribute is the page that
you want people to go to when
they click on the link.
Users can click on anything that
appears between the opening
tag and the closing
tag and will be taken to the page
specified in the href attribute.
HTML
chapter-04/linking-to-other-sites.html
Movie Reviews:
Empire
Metacritic
Rotten Tomatoes
Variety
When you link to a different
website, the value of the href
attribute will be the full web
address for the site, which is
known as an absolute URL.
R e s u lt
Browsers show links in blue with
an underline by default.
Absolute URLs
URL stands for Uniform
Resource Locator. Every web
page has its own URL. This is the
web address that you would type
into a browser if you wanted to
visit that specific page.
79
LINKS
An absolute URL starts with
the domain name for that site,
and can be followed by the path
to a specific page. If no page is
specified, the site will display the
homepage.
Linking to Other
Article
Pages
on the Same Site
HTML
Contact
When you are linking to other
pages within the same site,
you do not need to specify the
domain name in the URL. You
can use a shorthand known as a
relative URL.
If all the pages of the site are in
the same folder, then the value
of the href attribute is just the
name of the file.
If you have different pages of a
site in different folders, then you
can use a slightly more complex
syntax to indicate where the
page is in relation to the current
page. You will learn more about
these on the pages 81-84.
R e s u lt
If you look at the download
code for each chapter, you will
see that the index.html file
contains links that use relative
URLs.
Relative URLs
When linking to other pages
within the same site, you can
use relative URLs. These are like
a shorthand version of absolute
URLs because you do not need
to specify the domain name.
We will take a closer look at
relative URLs on pages 83-84
as there are several helpful
shortcuts you can use to write
links to other pages on your own
website.
Relative URLs help when building
a site on your computer because
you can create links between
pages without having to set up
your domain name or hosting.
LINKS
80
Directory Structure
On larger websites it's a good idea to organize your code by placing the
pages for each different section of the site into a new folder. Folders on a
website are sometimes referred to as directories.
Structure
Relationships
Homepages
The diagram on the right shows
the directory structure for a
fictional entertainment listings
website called ExampleArts.
The relationship between
files and folders on a website
is described using the same
terminology as a family tree.
The main homepage of a site
written in HTML (and the
homepages of each section in a
child folder) is called index.html.
The top-level folder is known
as the root folder. (In this
example, the root folder is called
examplearts.) The root folder
contains all of the other files and
folders for a website.
In the diagram on the right, you
can see some relationships have
been drawn in.
Web servers are usually set up
to return the index.html file if no
file name is specified.
The examplearts folder is a
parent of the movies, music
and theater folders. And the
the movies, music and theater
folders are children of the
examplearts folder.
Therefore, if you enter
examplearts.com it will return
examplearts.com/index
.html, and examplearts.com/
music will return examplearts
.com/music/index.html.
Instead, these systems often
use one template file for each
different type of page (such as
news articles, blog posts, or
products).
Editing the template file would
change all of the pages that use
that template. Do not change
any code that is not HTML or
you may break the page.
Each section of the site is placed
in a separate folder; this helps
organize the files.
If you are working with a content
management system, blogging
software, or an e-commerce
system, you might not have
individual files for each page of
the website.
81
LINKS
Parent
The examplearts folder is a
parent of the music folder.
Child
The music folder is a child
of the examplearts folder.
examplearts
index.html
images
logo.gif
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
reviews.html
index.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
Grandparent
The examplearts folder is a
grandparent of the dvd folder.
Grandchild
The dvd folder is a grandchild
of the examplearts folder.
Every page and every image on
a website has a URL (or Uniform
Resource Locator). The URL is
made up of the domain name
followed by the path to that page
or image.
The path to the homepage of this
site is www.examplearts
.com/index.html. The path
to the logo for the site is
examplearts.com/images/
logo.gif.
You use URLs when linking
to other web pages and when
including images in your own
site. On the next page, you will
meet a shorthand way to link to
files on your own site.
The root folder contains:
Each sub-directory contains:
The movies section contains:
●●
●●
A file called index.html which
is the homepage for the
entire site
●●
Individual folders for the
movies, music and theatre
sections of the site
●●
A reviews page called reviews
.html
●●
A listings page called listings
.html (except for the DVD
section)
A file called index.html which
is the homepage for that
section
●●
A folder called cinema
●●
A folder called DVD.
LINKS
82
Relative URLs
Relative URLs can be used when linking to pages within your own
website. They provide a shorthand way of telling the browser where to
find your files.
When you are linking to a page
on your own website, you do
not need to specify the domain
name. You can use relative URLs
which are a shorthand way to tell
the browser where a page is in
relation to the current page.
This is especially helpful when
creating a new website or
learning about HTML because
you can create links between
pages when they are only on
your personal computer (before
you have got a domain name and
uploaded them to the web).
Because you do not need to
repeat the domain name in each
link, they are also quicker to
write.
83
LINKS
If all of the files in your site are
in one folder, you simply use the
file name for that page.
If your site is organized into
separate folders (or directories),
you need to tell the browser
how to get from the page it is
currently on to the page that you
are linking to.
If you link to the same page from
two different pages you might,
therefore, need to write two
different relative URLs.
These links make use of the
same terminology (borrowed
from that of family trees) you
met on the previous page which
introduces directory structure.
Relative Link Type
example
Same Folder
To link to a file in the same folder, just use the file
name. (Nothing else is needed.)
To link to music reviews from the music homepage:
Reviews
Child Folder
For a child folder, use the name of the child folder,
followed by a forward slash, then the file name.
To link to music listings from the homepage:
Listings
Grandchild Folder
Use the name of the child folder, followed by a
forward slash, then the name of the grandchild
folder, followed by another forward slash, then the
file name.
Parent Folder
Use ../ to indicate the folder above the current one,
then follow it with the file name.
GrandParent Folder
Repeat the ../ to indicate that you want to go up
two folders (rather than one), then follow it with the
file name.
When a website is live (that
is, uploaded to a web server)
you may see a couple of other
techniques used that do not
work when the files are on your
local computer.
(from diagram on previous page)
To link to DVD reviews from the homepage:
Reviews
To link to the homepage from the music reviews:
Home
To link to the homepage from the DVD reviews:
Home
For example, you may see the
name of a child folder without
the name of a file. In this case
the web server will usually try
to show the homepage for that
section.
A forward slash will return the
homepage for the entire site,
and a forward slash followed
by a file name will return that
file providing it is in the root
directory.
LINKS
84
Email Links
mailto:
To create a link that starts up
the user's email program and
addresses an email to a specified
email address, you use the
element. However, this time the
value of the href attribute starts
with mailto: and is followed by
the email address you want the
email to be sent to.
On the right you can see that
an email link looks just like any
other link but, when it is clicked
on, the user's email program
will open a new email message
and address it to the person
specified in the link.
85
LINKS
chapter-04/email-links.html
HTML
Email Jon
R e s u lt
Opening Article
Links in
a New Window
HTML
chapter-04/opening-links-in-a-new-window.html
Internet Movie Database (opens in new window)
R e s u lt
target
If you want a link to open in a
new window, you can use the
target attribute on the opening
tag. The value of this
attribute should be _blank.
One of the most common
reasons a web page author
might want a link to be opened
in a new window is if it points to
another website. In such cases,
they hope the user will return
to the window containing their
site after finishing looking at the
other one.
Generally you should avoid
opening links in a new window,
but if you do, it is considered
good practice to inform users
that the link will open a new
window before they click on it.
LINKS
86
Linking to a Specific
Part of the Same Page
At the top of a long page
you might want to add a list
of contents that links to the
corresponding sections lower
down. Or you might want to add
a link from part way down the
page back to the top of it to save
users from having to scroll back
to the top.
Before you can link to a specific
part of a page, you need to
identify the points in the page
that the link will go to. You do
this using the id attribute (which
can be used on every HTML
element). You can see that the
and elements in this
example have been given id
attributes that identify those
sections of the page.
The value of the id attribute
should start with a letter or an
underscore (not a number or
any other character) and, on a
single page, no two id attributes
should have the same value.
To link to an element that uses
an id attribute you use the
element again, but the value of
the href attribute starts with
the # symbol, followed by the
value of the id attribute of the
element you want to link to. In
this example,
links to the element at
the top of the page whose id
attribute has a value of top.
87
LINKS
chapter-05/linking-to-a-specific-part.html
HTML
Film-Making Terms
Arc Shot
Interlude
Prologue
Arc Shot
A shot in which the subject is photographed by an
encircling or moving camera
Interlude
A brief, intervening film scene or sequence, not
specifically tied to the plot, that appears
within a film
Prologue
A speech, preface, introduction, or brief scene
preceding the the main action or plot of a film;
contrast to epilogue
Top
Linking to a Specific
Article
Part of Another Page
R e s u lt
If you want to link to a specific
part of a different page (whether
on your own site or a different
website) you can use a similar
technique.
As long as the page you are
linking to has id attributes that
identify specific parts of the
page, you can simply add the
same syntax to the end of the
link for that page.
Therefore, the href attribute
will contain the address for the
page (either an absolute URL or
a relative URL), followed by the
# symbol, followed by the value
of the id attribute that is used on
the element you are linking to.
For example, to link to the
bottom of the homepage of the
website that accompanies this
book, you would write:
LINKS
88
89
LINKS
Example
LINKS
This example is of a web page about film.
The element is used with an id attribute at the top of the page so
that a link can be added to take readers from the bottom of the page to
the top. There is an email link to allow readers to contact the author of
the web page. There are also a number of links to qualified URLs. These
link to various film festivals. Below this list is a link to a relative URL
which is an "about" page that lives in the same directory.
Links
Film Folk
Festival Diary
Here are some of the film festivals we
will be attending this year.Please
contact us if you would like more
information.
January
Sundance Film Festival
Park City, Utah, USA
20 - 30 January 2011
February
Tropfest
Sydney, Australia
20 February 2011
About Film Folk
Top of page
LINKS
90
Summary
LINKS
XX
Links are created using the element.
XX
The element uses the href attribute to indicate
the page you are linking to.
XX
If you are linking to a page within your own site, it is
best to use relative links rather than qualified URLs.
XX
You can create links to open email programs with an
email address in the "to" field.
XX
You can use the id attribute to target elements within
a page that can be linked to.
5
Images
XX
XX
XX
How to add images to pages
Choosing the right format
Optimizing images for the web
There are many reasons why you might
want to add an image to a web page: you
might want to include a logo, photograph,
illustration, diagram, or chart.
There are several things to consider when selecting and
preparing images for your site, but taking time to get them
right will make it look more attractive and professional.
In this chapter you will learn how to:
●●
Include an image in your web pages using HTML
●●
Pick which image format to use
●●
Show an image at the right size
●●
Optimize an image for use on the web to make pages
load faster
You can also use CSS to include images in your pages using the
background-image property, which you will meet on pages
413-420.
95
IMAGES
IMAGES
96
Choosing Images for
Your Site
A picture can say a thousand words, and great
images help make the difference between an
average-looking site and a really engaging one.
Images can be used to set the
tone for a site in less time than
it takes to read a description. If
you do not have photographs
to use on your website, there
are companies who sell stock
images; these are images you
pay to use (there is a list of stock
photography websites below).
Remember that all images are
subject to copyright, and you
can get in trouble for simply
taking photographs from
another website.
If you have a page that shows
several images (such as product
photographs or members of a
team) then putting them on a
simple, consistent background
helps them look better as
a group.
Images should...
Stock photos
Online extra
www.istockphoto.com
www.gettyimages.com
www.veer.com
www.sxc.hu
www.fotolia.com
We have provided an online
gallery that helps you choose the
right image for your website. You
can find it in the tools section of
the site accompanying this book.
Be relevant
Convey information
Convey the right mood
Be instantly recognisable
Fit the color palette
97
IMAGES
Storing Images on
Your Site
If you are building a site from scratch, it is good
practice to create a folder for all of the images
the site uses.
As a website grows, keeping
images in a separate folder
helps you understand how the
site is organized. Here you can
see an example of the files for
a website; all of the images are
stored in a folder called images.
On a big site you might like to
add subfolders inside the images
folder. For example, images such
as logos and buttons might sit in
a folder called interface, product
photographs might sit in a page
called products, and images
related to news might live in a
folder called news.
If you are using a content
management system or blogging
platform, there are usually tools
built into the admin site that
allow you to upload images,
and the program will probably
already have a separate folder
for image files and any
other uploads.
IMAGES
98
Adding Images
To add an image into the page
you need to use an
element. This is an empty
element (which means there is
no closing tag). It must carry the
following two attributes:
HTML
chapter-05/adding-images.html
R e s u lt
src
This tells the browser where
it can find the image file. This
will usually be a relative URL
pointing to an image on your
own site. (Here you can see that
the images are in a child folder
called images — relative URLs
were covered on pages 83-84).
alt
This provides a text description
of the image which describes the
image if you cannot see it.
title
You can also use the title
attribute with the element
to provide additional information
about the image. Most browsers
will display the content of this
attribute in a tootip when the
user hovers over the image.
99
IMAGES
The text used in the alt attribute
is often referred to as alt text.
It should give an accurate
description of the image content
so it can be understood by
screen reader software (used by
people with visual impairments)
and search engines.
If the image is just to make a
page look more attractive (and
it has no meaning, such as a
graphic dividing line), then the
alt attribute should still be used
but the quotes should be left
empty.
Height &
Article
Width
of Images
HTML
chapter-05/height-and-width-of-images.html
You will also often see an
element use two other attributes
that specify its size:
height
This specifies the height of the
image in pixels.
R e s u lt
width
This specifies the width of the
image in pixels.
Images often take longer to
load than the HTML code that
makes up the rest of the page.
It is, therefore, a good idea to
specify the size of the image
so that the browser can render
the rest of the text on the page
while leaving the right amount of
space for the image that is still
loading.
The size of images is increasingly
being specified using CSS rather
than HTML — see pages 409410 for more information about
this.
IMAGES
100
Where to Place Images
in Your Code
Where an image is placed
in the code will affect how it
is displayed. Here are three
examples of image placement
that produce different results:
1: before a paragraph
The paragraph starts on a new
line after the image.
2: inside the start of a
paragraph
The first row of text aligns with
the bottom of the image.
3: in the middle of a
paragraph
The image is placed between the
words of the paragraph that it
appears in.
101
IMAGES
chapter-05/where-to-place-images.html
HTML
There are around 10,000 living species of birds
that inhabit different ecosystems from the
Arctic to the Antarctic. Many species undertake
long distance annual migrations, and many more
perform shorter irregular journeys.
There are around 10,000 living
species of birds that inhabit different
ecosystems from the Arctic to the Antarctic. Many
species undertake long distance annual
migrations, and many more perform shorter
irregular journeys.
There are around 10,000 living species of birds
that inhabit different ecosystems from the
Arctic to the Antarctic.Many species undertake long
distance annual migrations, and many more perform
shorter irregular journeys.
Article
R e s u lt
Where you place the image in
the code is important because
browsers show HTML elements
in one of two ways:
Block elements always appear
on a new line. Examples of block
elements include the and
elements.
If the is followed by a
block level element (such as a
paragraph) then the block level
element will sit on a new line
after the imageas shown in the
first example on this page.
Inline elements sit within a
block level element and do not
start on a new line. Examples of
inline elements include the ,
, and elements.
If the element is inside a
block level element, any text or
other inline elements will flow
around the image as shown in
the second and third examples
on this page.
Block and inline elements are
discussed in greater depth on
pages 185-186.
IMAGES
102
Old Code: Aligning
Images Horizontally
align
The align attribute was
commonly used to indicate how
the other parts of a page should
flow around an image. It has
been removed from HTML5
and new websites should use
CSS to control the alignment of
images (as you will see on pages
411-412).
I have discussed it here because
you are likely to come across
it if you look at older code, and
because some visual editors still
insert this attribute when you
indicate how an image should be
aligned.
The align attribute can take
these horizontal values:
left
This aligns the image to the left
(allowing text to flow around its
right-hand side).
right
This aligns the image to the right
(allowing text to flow around its
left-hand side).
103
IMAGES
chapter-05/aligning-images-horizontally.html
HTML
There are around
10,000 living species of birds that inhabit
different ecosystems from the Arctic to the
Antarctic. Many species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.
There are around
10,000 living species of birds that inhabit
different ecosystems from the Arctic to the
Antarctic. Many species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.
Article
R e s u lt
This looks a lot neater than
having one line of text next to
the image (as shown on the
previous example).
When you give the align
attribute a value of left, the
image is placed on the left and
text flows around it.
When you give the align
attribute a value of right, the
image is placed on the right and
the text flows around it.
When text flows right up to the
edge of an image it can make
it harder to read. You will learn
how to add a gap between text
and images on pages 313-314
using the CSS padding and
margin properties.
IMAGES
104
Old Code: Aligning
Images Vertically
As you saw on the last page, the
align attribute is no longer used
in HTML5, but it is covered here
because you may see it used in
older websites and it is still used
in the code created by some
visual editors.
You can see how to use CSS
to achieve the same effects on
pages 285-286.
There are three values that the
align attribute can take that
control how the image should
align vertically with the text that
surrounds it:
top
This aligns the first line of the
surrounding text with the top of
the image.
middle
This aligns the first line of the
surrounding text with the middle
of the image.
bottom
This aligns the first line of the
surrounding text with the bottom
of the image.
105
IMAGES
chapter-05/aligning-images-vertically.html
HTML
There are around
10,000 living species of birds that inhabit
different ecosystems from the Arctic to the
Antarctic. Many species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.
There are around
10,000 living species of birds that inhabit
different ecosystems from the Arctic to the
Antarctic. Many species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.
There are around
10,000 living species of birds that inhabit
different ecosystems from the Arctic to the
Antarctic. Many species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.
Article
R e s u lt
The value of top places the first
line of text near the top of the
image and subsequent lines of
text appear under the image.
The value of middle places
the first line of text near the
vertical middle of the image and
subsequent lines of text appear
under the image.
The value of bottom places the
first line of text near the bottom
of the image and subsequent
lines of text under the image.
When text flows right up to the
edge of an image it can make
it harder to read. You will learn
how to add a gap between text
and images on pages 313-314
using the CSS padding and
margin properties.
If you would like all of the text
to wrap arond the image (rather
than just one line of text), you
should use the CSS float
property discussed on pages
370-372.
In older code, you may see the
align attribute used with the
values left or right to achieve
the same effect (as described on
the previous page), although its
use is no longer recommended.
IMAGES
106
Three Rules for
Creating Images
There are three rules to remember when you
are creating images for your website which are
summarized below. We go into greater detail
on each topic over the next nine pages.
1
107
2
3
Save images in
the right format
Save images at
the right size
Use the correct
resolution
Websites mainly use images in
jpeg, gif, or png format. If you
choose the wrong image
format then your image might
not look as sharp as it should
and can make the web page
slower to load.
You should save the image at
the same width and height it will
appear on the website. If
the image is smaller than the
width or height that you have
specified, the image can be
distorted and stretched. If the
image is larger than the width
and height if you have specified,
the image will take longer to
display on the page.
Computer screens are made up
of dots known as pixels. Images
used on the web are also made
up of tiny dots. Resolution refers
to the number of dots per inch,
and most computer screens only
show web pages at 72 pixels
per inch. So saving images at
a higher resolution results in
images that are larger than
necessary and take longer to
download.
IMAGES
Tools to Edit
& Save Images
There are several tools you can use to edit and
save images to ensure that they are the right
size, format, and resolution.
The most popular tool amongst
web professionals is Adobe
Photoshop. (In fact, professional
web designers often use this
software to design entire sites.)
The full version of Photoshop is
expensive, but there is a cheaper
version called Photoshop
Elements which would suit the
needs of most beginners.
Other Software
Adobe Fireworks
Pixelmator
PaintShop Pro
Paint.net
Online Editors
www.photoshop.com
www.pixlr.com
www.splashup.com
www.ipiccy.com
Online extra
Watch videos that demonstrate
how to resize images and save
them in the correct format using
both of these applications.
IMAGES
108
Image Formats: JPEG
Whenever you have many different
colors in a picture you should use a JPEG.
A photograph that features snow or an
overcast sky might look like it has large
areas that are just white or gray, but the
picture is usually made up of many different
colors that are subtly different.
Image Formats: GIF
H
B UI
LD
TE
ST
RESEA
RC
CO
N
CE
PT
DES
IGN
Use GIF or PNG format
when saving images
with few colors or large
areas of the same color.
When a picture has an area that is filled
with exactly the same color, it is known as
flat color. Logos, illustrations, and diagrams
often use flat colors. (Note that photographs
of snow, sky, or grass are not flat colors,
they are made up of many subtly different
shades of the same color and are not as
suited to GIF or PNG format.)
Image Dimensions
The images you use on your website should be
saved at the same width and height that you
want them to appear on the page.
113
For example, if you have
designed a page to include an
image that is 300 pixels wide by
150 pixels tall, the image you use
should be 300 x 150 pixels. You
may need to use image editing
tools to resize and crop the
image. When sourcing images, it
is important to understand how
you can alter the dimensions of
an image; imagine that you had
designed a web page to include
an image that is 300 pixels wide
by 150 pixels tall:
Online extra
Visit the tools section of the
website accompanying this
book to watch a video guide to
resizing images in Photoshop
and GIMP.
REDUCING IMAGE SIZE
You can reduce the size of
images to create a smaller
version of the image.
INCREASING IMAGE SIZE
You can't increase the size of
photos significantly without
affecting the image quality.
CHANGING SHAPE
Only some images can be
cropped without losing valuable
information (see next page).
Example: If your image is 600
pixels wide and 300 pixels tall,
you can reduce the size of the
image by 50%.
Example: If your image is only
100 pixels wide by 50 pixels tall,
increasing the size by 300%
would result in poor quality.
Example: If your image is 300
pixels square, you can remove
parts of it, but in doing so you
might lose valuable information.
Result: This will create an image
that is quicker to download.
Result: The image will look
blurry or blocky.
Result: Only some images can
be cropped and still make sense.
IMAGES
Cropping Images
When cropping images it is important not to
lose valuable information. It is best to source
images that are the correct shape if possible.
PORTRAIT
Here you can see an illustration
of a giraffe that is best suited to
appearing in portrait.
LANDSCAPE
If we crop this illustration to
make it landscape we lose the
head and feet.
LANDSCAPE
PORTRAIT
Here you can see an illustration
of an elephant that is best suited
to appearing in landscape.
If we crop this illustration to
make it portrait we lose the trunk
and the hindquarters.
If we add extra space to the left
and right of the illustration the
background is not continued.
If we add extra space to the top
and bottom of the illustration the
background is not continued.
IMAGES
114
Image Resolution
Images created for the web should be saved at
a resolution of 72 ppi. The higher the resolution
of the image, the larger the size of the file.
JPGs, GIFs, and PNGs belong to
a type of image format known
as bitmap. They are made up of
lots of miniature squares. The
resolution of an image is the
number of squares that fit within
a 1 inch x 1 inch square area.
Images appearing on computer
screens are made of tiny squares
called pixels. A small segment
of this photograph has been
magnified to show how it is
made up of pixels. The web
browsers on most desktop
computers display images at a
resolution of 72 pixels per inch
(ppi). Images in print materials
(such as books and magazines)
are made up of tiny circles called
dots. These images are usually
printed at a resolution of 300
dots per inch (dpi).
For this image:
JPEG at 300 dpi = 1,526kb
JPEG at 72 ppi = 368kb
Due to the fact that computer
displays are capped at a
resolution of 72 ppi, using
images on the web with a higher
resolution will not result in better
image quality — only in larger
file sizes, which will increase the
time needed to load them and
therefore slow down viewing of
your web pages.
115
IMAGES
Vector Images
Vector images differ from bitmap images and
are resolution-independent. Vector images are
commonly created in programs such as Adobe
Illustrator.
When an image is a line drawing
(such as a logo, illustration, or
diagram), designers will often
create it in vector format.
Vector formatted images are
very different to bitmap images.
Vector images are created by
placing points on a grid, and
drawing lines between those
points. A color can then be
added to "fill in" the lines that
have been created.
The advantage of creating line
drawings in vector format is that
you can increase the dimensions
of the image without affecting
the quality of it.
The current method of using
vector images for display on
websites involves saving a
bitmap version of the original
vector image and using that.
Scalable Vector Graphics (SVG)
are a relatively new format used
to display vector images directly
on the web (eliminating the need
to create bitmap versions of
them), however its use is not yet
widespread.
IMAGES
116
Animated GIFs
Animated GIFs show several frames of an
image in sequence and therefore can be used to
create simple animations.
Below you can see the individual
frames that make up an
animated GIF that shows an
orange dot revolving around
a circle — like the kind of
animation you might see when a
web page is loading.
Each extra frame of the image
increases the size of the file, and
can therefore add to the time it
takes for an image to download
(and web users do not like
waiting a long time for images to
download).
Some image editing applications
such as Adobe Photoshop allow
you to create animated GIFs.
There are several tutorials about
how to do this on the web. There
are also several websites that
allow you to upload the graphics
for the individual frames and
create the animated GIF for you.
1
117
IMAGES
2
Some designers frown on
animated GIFs because they
remember a lot of amateur web
designers overusing them in the
1990's.
It is important to
remember:
Because GIFs are not an
ideal format for displaying
photographs, animated GIFs are
really only suitable for simple
illustrations.
3
4
5
6
7
8
Transparency
Creating an image that is partially transparent
(or "see-through") for the web involves
selecting one of two formats:
Transparent GIF
PNG
If the transparent part of the
image has straight edges and
it is 100% transparent (that is,
not semi-opaque), you can save
the image as a GIF (with the
transparency option selected).
If the transparent part of the
image has diagonal or rounded
edges or if you want a semiopaque transparency or a dropshadow, then you will need to
save it as a PNG.
Straight
Diagonal
Round
Transparent PNGs are not fully
supported in older browsers,
most notably Internet Explorer 6
(IE6). There is some JavaScript
you can use to get around this
issue. The details of this script
can be found in the tools section
of the website accompanying
this book.
Semi-Opaque
Drop-Shadow
IMAGES
118
Examining Images
on the Web
Checking the Size of Images
If you are updating a website, you might need to check the size of an
existing image before creating a new one to replace it. This can be
achieved by right-clicking on the image and making a selection from
the pop-up menu that appears. (Mac users will need to hold down the
control key and click rather than right-click.)
On the left you can see how to
check the size of images and
how to download them using
Safari. Below is a brief overview
of what to select in the pop-up
menu to perform these functions
in various browsers.
CHROME
Size: Open Image in New Tab
Size appears in new tab
Download: Save Image As
FIREFOX
Size: View Image Info
Size appears in pop-up window
Download: Save Image As
Downloading Images
If you want to download images from a website, you can do so by
accessing the same pop-up menu. (Please remember however that all
images online are subject to copyright and require explicit permission to
reuse.)
119
IMAGES
Internet Explorer
Size: Properties
Size appears in pop-up window
Download: Save Image
SAFARI
Size: Open Image in New Tab
Size appears in title bar
Download: Save Image As
HTML5: Figure
Article
and
Figure Caption
HTML
chapter-05/figure-and-figure-caption.html
Sea otters hold hands when they
sleep so they don't drift away from each
other.
Images often come with
captions. HTML5 has introduced
a new element to
contain images and their caption
so that the two are associated.
You can have more than one
image inside the
element as long as they all share
the same caption.
R e s u lt
The element has
been added to HTML5 in order
to allow web page authors to add
a caption to an image.
Before these elements were
created there was no way to
associate an element with
its caption.
Older browsers that do not
understand HTML5 elements
simply ignore the new elements
and display the content of them.
IMAGES
120
In this example, the logo is a GIF
because it uses flat colors, while
the photographs are JPEGs. The
main photo is placed inside the
HTML5 element and
has its own caption.
121
IMAGES
The alt attribute on each
image provides a description
for those using screen readers
and the title attribute provides
additional information. (This is
shown in the tooltip.)
This example does not
use the height, width, or
align attributes as these are
being phased out and you
are encouraged to use CSS
properties instead.
Example
IMAGES
Images
This recipe for individual chocolate
cakes is so simple and so delectable!
More Recipes:
IMAGES
122
Summary
IMAGES
XX
The element is used to add images to a
web page.
XX
You must always specify a src attribute to indicate the
source of an image and an alt attribute to describe the
content of an image.
XX
You should save images at the size you will be using
them on the web page and in the appropriate format.
XX
Photographs are best saved as JPEGs; illustrations or
logos that use flat colors are better saved as GIFs.
6
Tables
XX
XX
XX
How to create tables
What information suits tables
How to represent complex data in tables
There are several types of information
that need to be displayed in a grid or
table. For example: sports results, stock
reports, train timetables.
When representing information in a table, you need to think
in terms of a grid made up of rows and columns (a bit like a
spreadsheet). In this chapter you will learn how to:
127
TABLES
●●
Use the four key elements for creating tables
●●
Represent complex data using tables
●●
Add captions to tables
TABLES
128
129
TABLES
What's a Table?
A table represents information in a grid format.
Examples of tables include financial reports, TV
schedules, and sports results.
Grids allow us to understand
complex data by referencing
information on two axes.
Each block in the grid is referred
to as a table cell. In HTML a
table is written out row by row.
TABLES
130
Basic Table Structure
The element is used
to create a table. The contents
of the table are written out row
by row.
You indicate the start of each
row using the opening tag.
(The tr stands for table row.)
It is followed by one or more
elements (one for each cell
in that row).
chapter-06/basic-table-structure.html
HTML
15
15
30
45
60
45
60
90
90
At the end of the row you use a
closing tag.
R e s u lt
Each cell of a table is
represented using a
element. (The td stands for
table data.)
At the end of each cell you use a
closing tag.
Some browsers automatically
draw lines around the table
and/or the individual cells. You
will learn how to control the
borders of tables using CSS on
pages 309-312 and 337-340.
131
TABLES
Table Headings
Article
HTML
chapter-06/table-headings.html
Saturday
Sunday
Tickets sold:
120
135
Total sales:
$600
$675
R e s u lt
The element is used just
like the element but its
purpose is to represent the
heading for either a column or
a row. (The th stands for table
heading.)
Even if a cell has no content,
you should still use a or
element to represent
the presence of an empty cell
otherwise the table will not
render correctly. (The first cell
in the first row of this example
shows an empty cell.)
Using elements for
headings helps people who
use screen readers, improves
the ability for search engines
to index your pages, and also
enables you to control the
appearance of tables better
when you start to use CSS.
You can use the scope attribute
on the element to indicate
whether it is a heading for a
column or a row. It can take the
values: row to indicate a heading
for a row or col to indicate a
heading for a column.
Browsers usually display the
content of a element in
bold and in the middle of the cell.
TABLES
132
Spanning ColumnS
Sometimes you may need the
entries in a table to stretch
across more than one column.
The colspan attribute can be
used on a or element
and indicates how many columns
that cell should run across.
In the example on the right
you can see a timetable with
five columns; the first column
contains the heading for that
row (the day), the remaining four
represent one hour time slots.
If you look at the table cell that
contains the words 'Geography'
you will see that the value of the
colspan attribute is 2, which
indicates that the cell should run
across two columns. In the third
row, 'Gym' runs across three
columns.
You can see that the second
and third rows have fewer
elements than there are
columns. This is because, when
a cell extends across more than
one column, the or
cells that would have been in the
place of the wider cells are not
included in the code.
I added some CSS styles to this
example so that you can see how
the cells span more than one
column. You will learn how to do
this on pages 250, 337-340.
133
TABLES
chapter-06/spanning...
Purchase answer to see full
attachment