HTML and CSS Reference
In-Depth Information
What Are We Making?
4
techniques explored in this tutorial:
•
A progress bar that indicates how long until the end of all humanity in the event of a
zombie plague;
•
A graph indicating the decline in safe outdoor activities during a zombie plague;
•
A frighteningly similar graph indicating the decline in manners during a zombie plague;
•
The increase of people who were unaware of the zombie plague because they were
Or you could create a graph or quota bar that simply illustrates something useful and less full
of dread and zombies. So, let's get on with it.
WHAT YOU'LL NEED
•
A text or HTML editor.
Take your pick
;
many are out there.
6
•
7
that you can look up the documentation as you go.
•
8
Possibly an image editor, such as
Paint
, to mock up what your graph might look like.
•
A modern and decent Web browser to preview changes.
That should do it. Please note that this tutorial is not designed as an introduction to either
HTML, CSS, jQuery or zombies. Some intermediate knowledge of these three technologies
and the undead is assumed.
The Mark-Up
You can create the underlying HTML for a graph in a number of ways. In this tutorial, we'll start
with a
table
, because it will make the most sense visually if JavaScript or CSS is not applied.
That's a big checkmark in the column for accessibility.
Quick! You've just been given some alarming figures. The population of tanned zombies is
projected to spiral out of control in the next few years. The carbon tigers and blue monkeys
