Learning Web Design Third Edition- P7 pot

Part I: Getting Started
46
Monitor Color
What is worth noting, however, is that 16-bit monitors use a completely
different color spectrum than 24-bit monitors; i.e., it is not a subset of
the 24-bit color space. For that reason, when you specify a color numeri-
cally in a style sheet or use it in an image, the 16-bit monitor always
needs to shift it slightly to a color in its spectrum. Whether it gets shift-
ed lighter or darker depends on whether the color is in an image or
specified in a style sheet, whether it is in the foreground or the back-
ground, which browser and platform is used. In other words, it’s com-
pletely unpredictable. The same color may shift different directions in
the foreground and background of the same document.
What this means is that it is difficult to match a foreground color and
background color seamlessly for users with 16-bit monitors (Figure 3-11).
This may be problematic if you want an image to blend seamlessly with a
background image or color, even if they have identical RGB values. While
it will be seamless for the majority of users with 24-bit color monitors,
16-bit users will see the rectangular edges of the image in front of the
background and the seamless effect will be ruined. This issue is easily
remedied by using a transparent graphic format that permits the back-
ground color to show through. Transparency is discussed in Chapter 18,
Web Graphics Basics.
Coping with monitor color variation
Here are some tips and tricks for dealing with color variations from monitor
to monitor.
Let go of precise color control. Yes, once again, the best practice is to
acknowledge that the colors you pick won’t look the same to everyone,
and live with it. Precise color is not a priority in this medium where the
colors you see can change based on the plaform, monitor bit-depth, or
even the angle of the laptop screen.

Simulate alternative Gamma settings while you design. Since the major-
ity of the web audience today uses Windows machines, designers using
Macintosh computers need to be more diligent in testing designs for
clarity on Windows. You can simulate what your graphics will look
like on Windows using Adobe Photoshop by selecting View→ Proof
Setup → Windows RGB (or Macintosh RGB if you are designing on
Windows). If it is too light or too dark, make manual adjustments as
necessary to the image itself to fix it. To see how the entire page will
look with Windows gamma, you can set the brightness of your monitor
darker using the Display settings in the System Preferences, or try the
inexpensive GammaToggle software that lets you switch back and forth
between gamma settings (GammaToggle is available for US$15 from
ThankYouWare, www.thankyouware.com).
Figure 3-11. On 16-bit monitors, RGB
colors get shifted around. In this figure,
although the graphic in the foreground
uses the identical RGB values as the color
in the background, you can still see the
outline of the image on the page (top). The
only way to fix this is to make the image
transparent and allow the background to
show through (bottom).
Figure 3-11. On 16-bit monitors, RGB
colors get shifted around. In this figure,
although the graphic in the foreground
uses the identical RGB values as the color
in the background, you can still see the
outline of the image on the page (top). The
only way to fix this is to make the image
transparent and allow the background to

show through (bottom).
Know Your Audience
Chapter 3, The Nature of Web Design
47
Use transparent images for smooth transitions to the background. There is
no way to prevent a noticeable mismatch of foreground and background
colors on 16-bit monitors. If you want to be absolutely sure that there is
no rectangle around your image for over 99% of users, use a transparent
GIF or PNG instead (Figure 3-11).
Know Your Audience
We’ve established that there are many unknown factors to consider when
designing a web page. But there’s one thing that you hopefully do know
something about when you begin the design process: your target audience.
In professional web development companies, researching the characteristics
and needs of the target audience is one of the most important parts of the
design process.
A good understanding of your audience can help you make better design
decisions. Let’s take a look at a few examples:
Scenario 1: A site that sells educational toys. If your site is aimed at a con-
sumer audience, you should assume that a significant portion of your
audience will be using your site from home computers. They may not
keep up with the very latest browser versions, or they may be using an
AOL browser, or even surfing the Web with their TVs, so don’t rely too
heavily on cutting-edge web technologies. They may also be connecting to
the Internet through modem connections, so keep your files extra small
to prevent long download times. When your bread and butter depends
on sales from ordinary consumers, it’s best to play it safe with your page
design. You can’t afford to alienate anyone.
Scenario 2: A site with resources for professional graphic designers.
Because graphic designers tend to have larger computer monitors, this is

a case for which you may safely design for an 1024 × 768 pixel screen size.
In addition, if they are accessing your pages from work, they are likely to
have a connection to the Internet that is faster than the standard modem
connection, so you can be a little more lax with the number of size of
graphics you put on the page (plus, a good-looking site will be part of the
draw for your audience).
Scenario 3: A site used to share company information for in-house use
only (also known as an intranet). This is the ideal situation for a web
designer because many of the “unknowns” become easily known. Often,
a company’s system administrator will install the same browser on all
machines and keep them up-to-date. Or you might know that everyone
will be working on Windows machines with standard 1024 × 768 moni-
tors. Bandwidth becomes less of an issue when documents are served
internally. You should be able to take advantage of some features that
would be risky in the standard web environment.
Part I: Getting Started
48
Keeping the Big Picture in Mind
Keeping the Big Picture in Mind
This chapter should help you to set expectations when starting to design
your first web pages. It’s not as precise a medium as print, and you shouldn’t
try to force it to be so. Let go of the details and go with the flow. Focus your
time and attention on making sure that your content is available for all users,
regardless of their browsing devices.
As we dive into the details of (X)HTML and CSS in the following chapters, it
will be useful to keep the nature of the Web in mind.
Test Yourself
This chapter covers a number of the quirks of the Web that every new web
designer will need to become accustomed to. Describe how each of these
factors affect your role as a web designer. Be specific. Answers appear in

Appendix A.
The variety of browsers in use
Macs, PCs, and Unix/Linux systems
Each user’s browser preferences
Resizable browser windows
Modem connections
Users with assistive devices
1.
2.
3.
4.
5.
6.
IN THIS PART
Chapter 4
Creating a Simple Page
(HTML Overview)
Chapter 5
Marking Up Text
Chapter 6
Adding Links
Chapter 7
Adding Images
Chapter 8
Basic Table Markup
Chapter 9
Forms
Chapter 10
Understanding the
Standards

HTML MARKUP
FOR STRUCTURE
PART
II

51
IN THIS CHAPTER
An introduction to (X)HTML
elements and attributes
A step-by-step
demonstration
of marking up a
simple web page
The elements that provide
document structure
Basic text and
image elements
A simple style sheet
Troubleshooting
broken web pages
Part I provided a general overview of the web design environment. Now that
we’ve covered the big concepts, it’s time to roll up our sleeves and start creat-
ing a real web page. It will be a simple page, but even the most complicated
pages are based on the principles described here.
In this chapter, we’ll create a simple web page step by step so you can get a feel
for what it’s like to mark up a document with (X)HTML tags. The exercises
allow you to work along.
This is what I want you to get out of this chapter:
Get a feel for how (X)HTML markup works, including an understanding
of elements and attributes.

See how browsers interpret (X)HTML documents.
Learn the basic structure of an (X)HTML document.
Get a first glimpse of a style sheet in action.
Don’t worry about learning the specific text elements or style sheet rules
at this point; we’ll get to those in the following chapters. For now, just pay
attention to the process, the overall structure of the document, and the new
terminology.
A Web Page, Step by Step
You got a look at an (X)HTML document in Chapter 2, How the Web Works,
but now you’ll get to create one yourself and play around with it in the
browser. The demonstration in this chapter has five steps that cover the basics
of page production.
Step 1: Start with content. As a starting point, we’ll add raw text content and
see what browsers do with it.
Step 2: Give the document structure. You’ll learn about (X) HTML elements
and the elements that give a document its structure.
•
•
•
•
CREATING A
SIMPLE PAGE
(HTML Overview)
CHAPTER
4
Part II: HTML Markup for Structure
52
Before We Begin, Launch a Text Editor
Step 3: Identify text elements. You’ll describe the content using the appropri-
ate text elements and learn about the proper way to use (X)HTML.

Step 4: Add an image. By adding an image to the page, you’ll learn about
attributes and empty elements.
Step 5: Change the look with a style sheet. This exercise gives you a taste of
formatting content with Cascading Style Sheets.
By the time we’re finished, you will have written the source document for
the page shown in Figure 4-1. It’s not very fancy, but you have to start some-
where.
We’ll be checking our work in a browser frequently throughout this demon-
stration—probably more than you would in real life—but because this is an
introduction to (X)HTML, it is helpful to see the cause and effect of each
small change to the source file along the way.
Before We Begin, Launch a Text
Editor
In this chapter and throughout the book, we’ll be writing out (X)HTML
documents by hand, so the first thing we need to do is launch a text editor.
The text editor that is provided with your operating system, such as Notepad
(Windows) or TextEdit (Macintosh), will do for these purposes. Other text
editors are fine as long as you can save plain text (ASCII) files with the .html
extension. If you have a WYSIWYG web authoring tool such as Dreamweaver
or FrontPage, set it aside for now. I want you to get a feel for marking up a
document manually (see the sidebar, (X)HTML the Hard Way).
Figure 4-1. In this chapter, we’ll write the source document for this web page step by step.Figure 4-1. In this chapter, we’ll write the source document for this web page step by step.
HTML the Hard Way
With all the wonderful web-
authoring tools out there today,
chances are you will be using one to
create your pages.
You may be asking, “If the tools are
so great, do I need to learn HTML at
all?” The answer is yes, you do. You

may not need to have every element
memorized, but some familiarity is
essential for everyone who wants to
make web pages. If you apply for a
“web designer” position, employers
will expect that you know your way
around an (X)HTML document.
I stand by my method of teaching
(X)HTML the old-fashioned way—by
hand. There’s no better way to truly
understand how markup works than
typing it out, one tag at a time, then
opening your page in a browser. It
doesn’t take long to develop a feel
for marking up documents properly.
Understanding (X)HTML will make
using your authoring tools easier
and more efficient. In addition, you
will be glad that you can look at a
source file and understand what
you’re seeing. It is also crucial for
troubleshooting broken pages or
fine-tuning the default formatting
that web tools produce.
(X)HTML
(X)HTML is a shorthand way to
refer to both HTML and its latest
version, XHTML. Authors may
write documents in either version.
For a detailed explanation of

the differences, see Chapter 10,
Understanding the Standards.
t e R m I n O l O G y
Before We Begin, Launch a Text Editor
Chapter 4, Creating A Simple Page (HTML Overview)
53
This section shows how to open new documents in Notepad and TextEdit.
Even if you’ve used these programs before, skim through for some special set-
tings that will make the exercises go more smoothly. We’ll start with Notepad;
Mac users can jump ahead.
Creating a new document in Notepad
(Windows users)
These are the steps to creating a new document in Notepad on Windows XP
(Figure 4-2).
Open the Start menu and navigate to Notepad (in Accessories).
1
Clicking on Notepad will open a new document window, and you’re
ready to start typing.
2
Next, we’ll make the extensions visible. This step is not required to make
(X)HTML documents, but it will help make the file types more clear at a
glance. In any Explorer window, select “Folder Options ” from the Tools
menu
3
and select the “View” tab.
4
Find “Hide extensions for known
file types” and uncheck that option.
5
Click OK to save the preference

and the file extensions will now be visible.
1.
2.
3.
Figure 4-2. Creating a new document in Notepad.
1
Open the Start menu and navigate to Notepad (All Programs > Accessories > Notepad)
2
Clicking on Notepad will
open a new document.
3
To make the extensions visible go to My Computer > Tools > Folder Options
4
Select the View tab.
5
Find “Hide extensions
for known file types”
and uncheck. Then click
OK to save preference.
Figure 4-2. Creating a new document in Notepad.
1
Open the Start menu and navigate to Notepad (All Programs > Accessories > Notepad)
2
Clicking on Notepad will
open a new document.
3
To make the extensions visible go to My Computer > Tools > Folder Options
4
Select the View tab.
5

Find “Hide extensions
for known file types”
and uncheck. Then click
OK to save preference.
Part II: HTML Markup for Structure
54
Before We Begin, Launch a Text Editor
Creating a new document in TextEdit
(Macintosh users)
By default, TextEdit creates “rich text” documents, that is, documents that
have hidden style formatting instructions for making text bold, setting font
size, and so on. (X)HTML documents need to be plain text documents, so
we’ll need to change the Format, as shown in this example (Figure 4-3).
Use the Finder to look in the Applications folder for TextEdit. When
you’ve found it, double-click the name or icon to launch the application.
TextEdit opens a new document. You can tell from the text formatting menu
at the top that you are in Rich Text mode
1
. Here’s how you change it.
Open the Preferences dialog box from the TextEdit menu.
There are three settings you need to adjust:
Select “Plain text”.
2
Select “Ignore rich text commands in HTML files”.
3
Turn off “Append ‘.txt’ extensions to plain text files”.
4
When you are done, click the red button in the top-left corner.
5
Quit TextEdit and restart it to open a new document with the new Plain

Text settings. The formatting menu will no longer be on the new
document.
6
1.
2.
3.
4.
5.
6.
1
The formatting menu indicates the
document is in Rich Text Format
2
This makes TextEdit
open new documents
in Plain Text Format
3
Check this so TextEdit
will display the HTML
source document.
Otherwise, it displays
HTML elements as
they would appear in
a browser.
4
Turn off the .txt extension so that you
can name your files with .html
5
Close the window
when you’re done

6
Plain Text documents have no menu
Rich Text to Plain text
Figure 4-3. Launching TextEdit and choosing Plain Text settings in the Preferences.
1
The formatting menu indicates the
document is in Rich Text Format
2
This makes TextEdit
open new documents
in Plain Text Format
3
Check this so TextEdit
will display the HTML
source document.
Otherwise, it displays
HTML elements as
they would appear in
a browser.
4
Turn off the .txt extension so that you
can name your files with .html
5
Close the window
when you’re done
6
Plain Text documents have no menu
Rich Text to Plain text
Figure 4-3. Launching TextEdit and choosing Plain Text settings in the Preferences.
To make it easy to get to TextEdit

later, follow these instructions to save
it in the Dock. With TextEdit running,
click and hold on its icon in the Dock,
then select “Keep in Dock” from the
pop-up menu. The next time you
need it, you can double-click its icon
in the Dock, launch the program,
and alleviate to the need to navigate
to the Applications folder.
t I P
Step 1: Start with Content
Chapter 4, Creating A Simple Page (HTML Overview)
55
Step 1: Start with Content
Now that we’ve got our new document, it’s time to get typing. A web page
always starts with content, so that’s where we begin our demonstration.
Exercise 4-1 walks you through entering the raw text content and saving the
document in a new folder.
exercise 4-1
|
Entering content
Type the content for the home page into the new document in your text editor.
Just copy it as you see it here. Keep the line breaks the same for the sake of
playing along.
Black Goose Bistro
The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a
hip atmosphere.
Catering
You have fun we’ll handle the cooking. Black Goose Catering can

handle events from snacks for bridge club to elegant corporate
fundraisers.
Location and Hours
Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to
midnight
Select “Save” or “Save as” from the File menu to get the Save As dialog box (Figure
4-4). The first thing you need to do is create a new folder that will contain all of
the files for the site (in other words, it’s the local root folder).
Windows: Click the folder icon at the top to create the new folder. ➊
Mac: Click the “New Folder” button. ➋
1.
2.
Figure 4-4. Saving index.html in a new folder called “bistro”.
Windows XP Mac OS X
1
2
Figure 4-4. Saving index.html in a new folder called “bistro”.
Windows XP Mac OS X
1
2
exercise 4-1
|
Entering content
Type the content for the home page into the new document in your text editor.
Just copy it as you see it here. Keep the line breaks the same for the sake of
playing along.
Black Goose Bistro
The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a

hip atmosphere.
Catering
You have fun we’ll handle the cooking. Black Goose Catering can
handle events from snacks for bridge club to elegant corporate
fundraisers.
Location and Hours
Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to
midnight
Select “Save” or “Save as” from the File menu to get the Save As dialog box (Figure
4-4). The first thing you need to do is create a new folder that will contain all of
the files for the site (in other words, it’s the local root folder).
Windows: Click the folder icon at the top to create the new folder. ➊
Mac: Click the “New Folder” button. ➋
1.
2.
Figure 4-4. Saving index.html in a new folder called “bistro”.
Windows XP Mac OS X
1
2
Figure 4-4. Saving index.html in a new folder called “bistro”.
Windows XP Mac OS X
1
2
Naming Conventions
It is important that you follow these
rules and conventions when naming
your files:
Use proper suffixes for your files.
(X)HTML files must end with

.html (some servers allow .htm).
Web graphics must be labeled
according to their file format: .gif
or .jpg (.jpeg is also acceptable).
Never use character spaces within
filenames. It is common to use
an underline character or dash
to visually separate words within
filenames, such as robbins_bio.
html or robbins-bio.html.
Avoid special characters such as ?,
%, #, /, :, ;, •, etc. Limit filenames
to letters, numbers, underscores,
hyphens, and periods.
Filenames may be case-sensitive,
depending on your server
configuration. Consistently using
all lowercase letters in filenames,
while not necessary, makes your
filenames easier to manage.
Keep filenames short. Short
names keep the character count
and file size of your (X)HTML
file in check. If you really must
give the file a long, multiword
name, you can separate words
with capital letters, such as
ALongDocumentTitle.html,
or with underscores, such as
a_long_document_title.html, to

improve readability.
Self-imposed conventions. It is
helpful to develop a consistent
naming scheme for huge sites.
For instance, always using
lowercase with underscores
between words. This takes
some of the guesswork out of
remembering what you named
a file when you go to link to it
later.