Web-safe colors

Modern PCs and Macs come with some reasonable graphics clout, but this wasn’t always
the case. In fact, many computers still in common use cannot display millions of colors.
Back in the 1990s, palette restrictions were even more ferocious, with many computers
limited to a paltry 256 colors (8-bit). Microsoft and Apple couldn’t agree on which colors
to use, hence the creation of the web-safe palette, which comprises just 216 colors that
are supposed to work accurately on both platforms without dithering. (For more information
about dithering, see the “GIF” section later in this chapter.) Applications such as
Photoshop have built-in web-safe palettes, and variations on the palette can be seen at
www.visibone.com.
Colors in the web-safe palette are made up of combinations of RGB in 20% increments,
and as you might expect, the palette is limited. Also discouraging, in the article “Death of
the Websafe Color Palette?” on Webmonkey (www.webmonkey.com/00/37/index2a.html;
posted September 6, 2000), David Lehn and Hadley Stern reported that all but 22 of these
colors were incorrectly shifted in some way when tested on a variety of platforms and
color displays—in other words, only 22 of the web-safe colors are actually totally
web-safe.
While the rise of PDAs means that the web-safe palette may make a comeback in specialist
circles (although PDAs and even cell phones are increasingly powerful when it comes to
graphics), most designers these days ignore it. The majority of people using the Web have
displays capable of millions of colors, and almost everyone else can view at leastthousands of colors. Unless you’re designing for a very specific audience with known
restricted hardware, stick with sRGB (the default color space of the Web—see
www.w3.org/Graphics/Color/sRGB) and design in millions of colors. And consider yourself
lucky that it’s not 1995.

Styling text using CSS

HTML is intended as a structural markup language, but the Web’s increasing popularity
meant it got “polluted” with tags designed for presentation. This made HTML more complex
than it needed to be, and such tags soon became a headache for web designers trying
to style page elements, such as text. In the bad ol’ days (the end of the 1990s), you’d
often see source code like this:
<font face="Helvetica" size="3" color="#333333"> This markup is
-> <font size="+3"><small>really </small></font>bad, but it was sort of the norm in the 1990s.</font>
WYSIWYG tools would insert new tags to override previous ones, adding to the page
weight and making it tough to ensure visual consistency site-wide. By and large, CSS eradicates
these problems and enables far more control over text, as you’ll see in the following
sections.
This is a boon for graphic designers who used to loathe HTML’s lack of typographical control.
However, the level of freedom evident in print design still isn’t quite so on the Web.
Restrictions imposed by browsers and the screen must be taken into account, such as it
being harder to read type onscreen than in print. This is largely related to resolution. Even
magazines with fairly low-quality print tend to be printed at around 200 dpi or more—
more than twice the resolution of a typical monitor. This means that very small text
(favored by many designers, who think such small text looks neat) becomes tricky to read
onscreen, because there aren’t enough pixels to create a coherent image.
I’ll note restrictions such as this at appropriate times during this section on styling text with
CSS, thereby providing advice on striking a balance between the visual appearance and
practicality of web-based text.

An introduction to typography

Words are important—not just what they say, but how they look. To quote Ellen Lupton,
from her book Thinking with Type, “Typography is what language looks like.” Language has
always been symbolic, although the origins of such symbols (of certain letterforms relating
to, for example, animals) has largely been lost in written English; instead, we now have
rather more abstract symbols designed for repetition on the page or screen.
However, from the early calligraphy that was created by hand, through the movable type
(invented in Germany by Johannes Gutenberg during the 15th century) that enabled massproduction
printing via molded letterform casts, to the most advanced desktop-publishing
software available today, the ultimate aim of type has been one of record and information
provision. In other words, type itself is important from a design standpoint because it
needs to record whatever information is being written about, and that information needs
to be easily retrievable by anyone who wants to understand it.
Like all aspects of design, typography has massively evolved over the years, particularly
over the past couple of decades, where computers have enabled designers to more rapidly
experiment with lettering. Despite this, many conventions formed much earlier still have a
part to play:
Myriad fonts exist, and each one has a different look, and therefore a different
“feel;” you need to choose the most appropriate one for your purpose. (This is further
complicated by there being only a certain number of web-safe fonts, as you’ll
see later.)
Headings, strap-lines/stand-firsts (the introductory line that introduces a piece of
text, commonly used in editorial articles), and crossheads (short subheadings that
break up areas of body copy) should stand out, and the prominence of each piece
of text should be related to its level of importance (in other words, a crosshead
shouldn’t be more prominent than a main heading).
Footnotes often use text smaller than the main body copy text to signify their
lesser significance to the main text, but nonetheless provide useful supplementary
information.Decorative elements can be used to draw the reader’s attention to
specific parts of the text. Drop caps and initials—large initial letters,
flamboyant in classical typography, but typically more
restrained in modern work (see right)—enable a reader to rapidly
navigate to the beginning of a piece of text. Pull quotes—quotes
from the main body of the text, displayed in large lettering outside
of context—are often used in magazine articles to draw a reader’s
attention to a particular article, highlighting particularly interesting
quotes or information.
Spacing is just as important as content. Kerning—the spacing between letter
pairs—can be increased to add prominence to a heading. Leading—the amount of
added vertical spacing between lines of text—can also be adjusted. Increasing leading
from its default can make text more legible. In books, a baseline grid is often
employed, ensuring that text always appears in the same place on each page. This
means that the text on the opposite side of the paper doesn’t appear in the gaps
between the lines on the page you’re reading. Baseline grids often make for
extremely pleasing vertical rhythm, and are regularly used in print publications;
they’re infrequently used online, but can nonetheless be of use, making a page of
text easier to read and navigate.
Columns can be used to make a page easier to read. This is common in newspapers
and magazines; online, the low resolution of monitors, and the (current) lack of
being able to auto-flow columns of text makes de facto text columns impractical,
but the reasoning behind columns is still handy to bear in mind. Generally, it’s considered
easier to read text that has fairly narrow columns (although not too
narrow—if there are too few characters, reading and comprehension slow down)—
text that, for example, spans the entire width of a 23-inch monitor rapidly becomes
tiring to read. There are no hard-and-fast rules when it comes to line length,
although some go by the “alphabet-and-a-half” rule (39 characters per line), some
advocate the “points-times-two” rule (double the point size and use the number
for the number of characters), and others recommend a dozen or so words, or
about 60 characters.
A few highly useful online resources for web typography can be found at the following
locations:
The Elements of Typographic Style Applied to the Web: www.webtypography.net/
Five Simple Steps to Better Typography: www.markboulton.co.uk/articles/detail/
five_simple_steps_to_better_typography/
Five Simple Steps to Designing Grid Systems: www.markboulton.co.uk/articles/
detail/five_simple_steps_to_designing_grid_systems/
When it comes to web design, some conventions are used, and others are ignored. In fact,
while web designers take the utmost care to get layouts right, scant few give the same
thought to text, merely choosing a font and arbitrarily setting other values, if they set
them at all. Once, this could be excused, but CSS has enabled web type to come a long
way, and although the same degree of control as print-based type isn’t possible, you can
do a lot more than just choose your preferred font for headings and body copy.

Types of CSS selectors

Class selectors
In some cases, you may wish to modify an element or a group of elements. For instance,
you may wish for your general website text to be blue, as in the examples so far, but some
portions of it to be red. The simplest way of doing this is by using a class selector.
In CSS, a class selector’s name is prefixed by a period (.), like this:
.warningText {
color: red;
}
This style is applied to HTML elements in any web page the style sheet is attached to using
the class attribute, as follows:
<h2 class="warningText">This heading is red.</h2>
<p class="warningText">This text is red.</p>
<p>This is a paragraph, <span class="warningText">and this text is
å red</span>.</p>
You don’t have to lay out CSS rules as done in this section; rather, you can add rules
as one long string. However, the formatting shown here is more readable in print.
Note that in the files available for download, the formatting is changed slightly again:
the property/value pairs and closing curly bracket are both tabbed inward, enabling
rapid vertical scanning of a CSS document’s selectors.

If you want a make a class specific to a certain element, place the relevant HTML tag
before the period in the CSS rule:
p.warningText {
color: red;
}
If you used this CSS rule with the HTML elements shown previously, the paragraph’s text
would remain red, but not the heading or span, due to the warningText class now being
exclusively tied to the paragraph selector only.
Usefully, it’s possible to style an element by using multiple class values. This is done by
listing multiple values in the class attribute, separated by spaces:
<p class="warningText hugeText">
The previous example’s content would be styled as per the rules .warningText and
.hugeText.

ID selectors

ID selectors can be used only once on each web page. In HTML, you apply a unique identifier
to an HTML element with the id attribute:
<p id="footer">&copy; 200X The Company. All rights reserved.</p>
To style this element in CSS, precede the ID name with a hash mark (#):
p#footer {
padding: 20px;
}
In this case, the footer div would have 20 pixels of padding on all sides.
Essentially, then, classes can be used multiple times on a web page, but IDs cannot.
Typically, IDs are used to define one-off page elements, such as structural divisions,
whereas classes are used to define the style for multiple items.

Grouped selectors

Should you wish to set a property value for a number of different selectors, you can use
grouped selectors, which take the form of a comma-separated list:
h1, h2, h3, h4, h5, h6 {
color: green;
}
In the preceding example, all the website’s headings have been set to be green. Note that
you’re not restricted to a single rule for each element—you can use grouped selectors for
common definitions and separate ones for specific property values, as follows:
h1, h2, h3, h4, h5, h6 {
color: green;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
Contextual selectors
This selector type is handy when working with advanced CSS. As the name suggests,
contextual selectors define property values for HTML elements depending on context.
Take, for instance, the following example:
<p>I am a paragraph.</p>
<p>So am I.</p>
<div id="navigation">
<p>I am a paragraph within the navigation div.</p>
<p>Another paragraph within the navigation div.</p>
</div>
You can style the page’s paragraphs as a whole and then define some specific values for
those within the navigation div by using a standard element selector for the former and a
contextual selector for the latter:
p {
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
}
As shown, syntax for contextual selectors (#navigation p) is simple—you just separate the
individual selectors with some whitespace. The two rules shown previously have the following
result:
If you define a property value twice, browsers render your web element depending on
each rule’s position in the cascade. See the section “The cascade” later in the chapter
for more information.

The p rule colors the web page’s paragraphs black.
The #navigation p rule overrides the p rule for paragraphs within the navigation
div, coloring them blue and making them bold.
By working with contextual selectors, it’s possible to get very specific with regard to styling
things on your website; we’ll be using these selectors regularly.

The rules of CSS

Style sheets consist of a number of rules that define how various web page elements
should be displayed. Although sometimes bewildering to newcomers, CSS rules are simple
to break down. Each rule consists of a selector and a declaration. The selector begins a CSS
rule and specifies which part of the HTML document the rule will be applied to. The declaration
consists of a number of property/value pairs that set specific properties and
determine how the relevant element will look. In the following example, p is the selector
and everything thereafter is the declaration:
p {
color: blue;
}
As you probably know, p is the HTML tag for a paragraph. Therefore, if we attach this rule
to a web page (see the section “Adding styles to a web page” later on in this chapter for
how to do so), the declaration will be applied to any HTML marked up as a paragraph,
thereby setting the color of said paragraphs to blue.
CSS property names are not case sensitive, but it’s good to be consistent in web
design—it’s highly recommended to always use lowercase. Note, though, that
XML is case sensitive, so when using CSS with XHTML documents served with
the proper XHTML MIME type, everything must be consistent. Also, the W3
specifications recommend that CSS style sheets for XHTML should use lowercase
element and attribute names.
AN INTRODUCTION TO WEB DESIGN
11

Separating content from design

Do you ever do any of the following?
Use tables for website layout
Use invisible GIFs to “push” elements around your web page
Hack Photoshop documents to bits and stitch them back together in a web page to
create navigation elements and more
Get frustrated when any combination of the previous leads to unwieldy web pages
that are a pain to edit
If so, the idea of separating content from design should appeal to you. On one hand, you
have your HTML documents, which house content marked up in a logical and semantic
manner. On the other hand, you have your CSS documents, giving you site-wide control ofthe presentation of your web page elements from a single source. Instead of messing
around with stretching transparent GIFs, and combining and splitting table cells, you can
edit CSS rules to amend the look of your site, which is great for not only those times when
things just need subtle tweaking, but also when you decide everything needs a visual overhaul.
After all, if presentation is taken care of externally, you can often just replace the CSS
to provide your site with a totally new design.
Designers (and clients paying for their time) aren’t the only ones to benefit from CSS.
Visitors will, too, in terms of faster download times, but also with regard to accessibility.
For instance, people with poor vision often use screen readers to surf the Web. If a site’s
layout is composed of complex nested tables, it might visually make sense; however, the
underlying structure may not be logical. View the source of a document and look at the
order of the content. A screen reader reads from the top to the bottom of the code and
doesn’t care what the page looks like in a visual web browser. Therefore, if the code compromises
the logical order of the content (as complex tables often do), the site is
compromised for all those using screen readers.
Accessibility is now very important in the field of web design. Legislation is regularly
passed to strongly encourage designers to make sites accessible for web users with disabilities.
It’s likely that this trend will continue, encompassing just about everything except
personal web pages. (However, even personal websites shouldn’t be inaccessible.)

Semantic markup

In the previous few subsections, you may have noticed specific elements being used for
specific things. This is referred to as semantic markup and is a very important aspect of
modern web design. Plenty of (X)HTML elements exist, and each one has a clearly defined
purpose (although some have more than one use). Because of the flexibility of markup
languages, it’s often possible to “wrongly” use elements, bashing your page into shape by
using elements for design tasks they’re not strictly suited for and certainly weren’t originally
designed for.
During the course of this book, we’ll talk about semantics a fair amount. Ultimately, good
semantic design enables you to simplify your markup and also provides the greatest scope
for being able to style it with CSS (see the following section). By thinking a little before you
code and defining your content with the correct markup, you’ll end up with cleaner code
and make it much easier for yourself in the long run when it comes to adding presentation
to your content.
AN INTRODUCTION TO WEB DESIGN

Introducing the concept of HTML tags and elements

You might be used to using the bold element to make text bold, but it is a physical
element that only amends the look of text rather than also conveying semantic meaning.
Logical elements, such as strong, convey meaning and add styling to text and are
therefore preferred. These will be covered in Chapter 3.Note that the strong tags are nested within the paragraph tags (<p></p>), not the other
way around. That’s because the paragraph is the parent element to which formatting is
being applied. The paragraph could be made bold and italic by adding another element,
emphasis (<em></em>), as follows:
<p><strong><em>Here is a paragraph.</em></strong></p>
In this case, the strong and em tags could be in the opposite order, as they’re at the same
level in the hierarchy. However, you must always close nested tags in the reverse order to
that in which they’re opened, as shown in the previous code block, otherwise some
browsers may not display your work as intended. For instance, the following should be
avoided:
<p><strong><em>Here is a paragraph.</strong></em></p>
As previously mentioned, it’s good practice to close tags in HTML—even though it’s not a
requirement for all elements, being sloppy in this area can lead to errors. Take a look at
the following:
<p><strong><em>Here is a paragraph.</strong></p>
Here, the emphasis element isn’t closed, meaning subsequent text-based content on the
page is likely to be displayed in italics—so take care to close all your tags.HTML documents are text files that contain tags, which are used to mark up HTML elements.

These documents are usually saved with the .html file extension, although some

prefer .htm, which is a holdover from DOS file name limitations, which restricted you to

eight characters for the file name and three for the extension.

The aforementioned tags are what web browsers use to display pages, and assuming the

browser is well behaved (most modern ones are), the display should conform to standards

as laid out by the World Wide Web Consortium (W3C), the organization that develops

guidelines and specifications for many web technologies.

HTML tags are surrounded by angle brackets—for instance, <p> is a paragraph start tag. It’s

good practice to close tags once the element content or intended display effect concludes,

and this is done with an end tag. End tags are identical to the opening start tags,

but with an added forward slash: /. A complete HTML element looks like this:

<p>Here is a paragraph.</p>

This element consists of the following:

Start tag: <p>

Content: Here is a paragraph.

End tag: </p>

Nesting tags

There are many occasions when tags must be placed inside each other; this process is

called nesting. One reason for nesting is to apply basic styles to text-based elements.

Earlier, you saw the code for a paragraph element. We can now make the text bold by surrounding

the element content with a strong element:

<p><strong>Here is a paragraph.</strong></p>

HTML doesn’t have a hard-and-fast rule regarding the case of tags, unlike XHTML,

which we’ll shortly be talking about and which will be used throughout the book. If

you look at the source code of HTML pages on the Web, you may see lowercase tags,

uppercase tags or, in the case of pages put together over a period of time, a mixture

of the two. That said, it’s still good practice with any markup language to be consistent,

regardless of whether the rules are more flexible.

The W3C website is found at www.w3.org. The site offers numerous useful tools,

including validation services against which you can check your web pages.

Introducing HTML and XHTML

The foundation of the majority of web pages is HyperText Markup Language, commonly

known by its initials, HTML. A curious facet of the language is that it’s easy to pick up the

basics—anyone who’s computer literate should be able to piece together a basic page

after learning some tags—but it has enough flexibility and scope to keep designers interested

and experimenting, especially when HTML is combined with Cascading Style Sheets

(CSS), which we’ll discuss later in this chapter. This section presents an overview of HTML

tags and elements, and how HTML and XHTML relate to web standards.

Web design overview

Web design has evolved rapidly over the years. Initially, browsers were basic, and early versions

of HTML were fairly limited in what they enabled designers to do. Therefore, many

older sites on the Web are plain in appearance. Additionally, the Web was originally largely

a technical repository, hence the boring layouts of many sites in the mid 1990s—after all,

statistics, documentation, and papers rarely need to be jazzed up, and the audience didn’t

demand such things anyway.

As with any medium finding its feet, things soon changed, especially once the general public

flocked to the Web. It was no longer enough for websites to be text-based information

repositories. Users craved—demanded, even—color! Images! Excitement! Animation!

Interaction! Even video and audio managed to get a foothold as compression techniques

improved and connection speeds increased.

The danger of eye candy became all too apparent as the turn of the century approached:

every site, it seemed, had a Flash intro, and the phrase “skip intro” became so common

that it eventually spawned a parody website.

These days, site design has tended toward being more restrained, as designers have

become more comfortable with using specific types of technologies for relevant and

appropriate purposes. Therefore, you’ll find beautifully designed XHTML- and CSS-based

sites sitting alongside highly animated Flash efforts.

Of late, special emphasis is being placed on usability and accessibility, and, in the majority

of cases, designers have cottoned to the fact that content must take precedence. However,just because web standards, usability, and accessibility are key, that doesn’t mean design
should be thrown out the window. As we’ll see in later chapters, web standards do not
have to come at the expense of good design—far from it. In fact, a strong understanding
of web standards helps to improve websites, making it easier for you to create cuttingedge
layouts that work across platforms and are easy to update. It also provides you with
a method of catering for obsolete devices.
Why WYSIWYG tools aren’t used in this book
With lots of software available and this book being design-oriented, you might wonder
why I’m not using WYSIWYG web design tools. This isn’t because I shun such tools—it’s
more that in order to best learn how to do something, you need to start from scratch, with
the foundations. Many web design applications make it tempting to “hide” the underlying
code from you, and most users end up relying on the graphical interface. This is fine until
something goes wrong and you don’t know how to fix it.
Removing software from the equation also means we concentrate on the underlying technology
that drives web pages, without the distraction of working out which button does
what. It also ensures that the book will be relevant to you, regardless of what software you
use or your current skill level. Therefore, I suggest you install a quality text editor to work
through the exercises, or set your web design application to use its code view. Once you’re
familiar with the concepts outlined in this book, you can apply them to your work, whatever
your chosen application for web design. This level of flexibility is important, because
you never know when you might have to switch applications—something that’s relatively
painless if you know how to design for the Web and understand technologies like CSS
and HTML.
Introducing HTML and XHTML
The foundation of the majority of web pages is HyperText Markup Language, commonly
known by its initials, HTML. A curious facet of the language is that it’s easy to pick up the
basics—anyone who’s computer literate should be able to piece together a basic page
after learning some tags—but it has enough flexibility and scope to keep designers interested
and experimenting, especially when HTML is combined with Cascading Style Sheets
(CSS), which we’ll discuss later in this chapter. This section presents an overview of HTML
tags and elements, and how HTML and XHTML relate to web standards.
If you’re relatively new to web design, you may be wondering about the best platform
and software for creating websites. Ultimately, it matters little which platform you
choose, as long as you have access to the most popular browsers for testing purposes
(a list that I’d now include Apple’s Safari in, alongside Internet Explorer, Firefox, and
Opera). Regarding software, there’s an overview in Appendix E (“Browsers Guide”), but
this isn’t an exhaustive guide, so do your own research and find software to your liking.

A brief history of the Internet

Even in the wildest dreams of science fiction and fantasy writers, few envisioned anything
that offers the level of potential that the Internet now provides for sharing information on
a worldwide basis. For both businesses and individuals, the Internet is now the medium of
choice, largely because it enables you to present your wares to the entire world on a 24/7
basis. But the technology’s origins were more ominous than and very different from the
ever-growing, sprawling free-for-all that exists today.
In the 1960s, the American military was experimenting with methods by which the US
authorities might be able to communicate in the aftermath of a nuclear attack. The suggested
solution was to replace point-to-point communication networks with one that was
more akin to a net. This meant information could find its way from place to place even if
certain sections of the network were destroyed. Despite the project eventually being
shelved by the Pentagon, the concept itself lived on, eventually influencing a network that
connected several American universities.
During the following decade, this fledgling network went international and began opening
itself up to the general public. The term Internet was coined in the 1980s, which also heralded
the invention of Transmission Control Protocol/Internet Protocol (TCP/IP), the networking
software that makes possible communication between computers running on
different systems. During the 1980s, Tim Berners-Lee was also busy working on HTML, his
effort to weld hypertext to a markup language in an attempt to make communication of
research between himself and his colleagues simpler.
Despite the technology’s healthy level of expansion, the general public remained largely
unaware of the Internet until well into the 1990s. By this time, HTML had evolved from a
fairly loose set of rules—browsers having to make assumptions regarding coder intent and
rendering output—to a somewhat stricter set of specifications and recommendations.
This, along with a combination of inexpensive hardware, the advent of highly usable web
browsers such as Mosaic (see the following image), and improved communications technology,
saw an explosion of growth that continues to this day.
Initially, only the largest brands dipped their toes into these new waters, but soon thousands
of companies were on the Web, enabling customers all over the globe to access
information, and later to shop online. Home users soon got in on the act, once it became
clear that the basics of web design weren’t rocket science, and that, in a sense, everyonecould do it—all you needed was a text editor, an FTP client, and some web space.
Designers soon got in on the act, increasingly catered for by new elements within HTML;
Cascading Style Sheets (CSS), which took a while to be adopted by browsers, but eventually
provided a means of creating highly advanced layouts for the Web; and faster web
connections, which made media-rich sites accessible to the general public without forcing
them to wait ages for content to download.
Therefore, unlike most media, the Web is truly a tool for everyone, and in many countries,
the Internet has become ubiquitous. For those working in a related industry, it’s hard to
conceive that as recently as the mid-1990s relatively few people were even aware of the
Internet’s existence!

 

 So, from obscure roots as a concept for military communications, the Internet has evolved
into an essential tool for millions of people, enabling them to communicate with each
other, research and gather information, telecommute, shop, play games, and become
involved in countless other activities on a worldwide basis.

From : An essential guide to Html and Css