Computers & Technology
Building a Website
Be master of your domain.
Whether you want to promote your business, create a forum for keeping in touch
with family and friends, or discuss your favorite band or hobby, you can do so by
creating and publishing your own website. Hone your skills by learning to:
Website Basics
The world wide web (www), often referred to simply as
the web, is an electronic network of websites, or sites for
short. A website is a collection of web pages (digital docu-
ments) stored on a computer. Other people can view web
pages from any computer that’s connected to the internet,
a vast worldwide network of millions of computers. The
world wide web is just one of many internet services.
Anyone can build and publish a website at a low cost and
without much technical know-how. Here’s how to get your
website started:
• Register a domain name for your site.
• Purchase a web hosting program on which to store
your files.
• Plan and organize your website.
• Learn to use HTML and CSS to create web pages.
• Add images to your web pages.
• Publish and promote your site.
How the Web Works
To understand how the web works, familiarize yourself with
some basic terminology:
• Browser: This software program is used to view web
pages. Popular browsers include Microsoft Internet
Explorer, Mozilla Firefox, and Safari.
• Domain name: The main name of a website. It usually
begins with www and ends in .com, .org, .net, or
another suffix. To access a site, users type its domain
name into a browser. For instance, in www.quamut.
com, “quamut.com” is the domain name.
• URL: An acronym for uniform resource locator, a URL
is the unique address of each page on the web. It can
refer to entire sites, such as www.quamut.com, or
specific pages, such as www.quamut.com/about.html.
URLs usually include the prefix http://.
• IP address: Each computer on the internet is assigned
a specific numerical address, called an IP address. Each
domain name is associated with at least one IP address.
• Client/server: Clients are computers used to view web
pages. Servers are computers that serve, or distribute,
web pages.
• Link: This is an electronic reference that connects one
web page, or site, to another. Web users move from
one site to another by clicking on links.
• Identify the main components of a website
• Read the language used to create online content
• Design and format a website that's appealing and easy to navigate
• Hypertext: This is electronic text that contains links.
• HTML: An acronym for hypertext markup language,
HTML is the computer code used to create web pages.
• CSS: An acronym for cascading style sheets, CSS
documents control the appearance and positioning of
web page content.
• FTP: An acronym for file transfer protocol, FTP is soft-
ware used to move files between computers. Website
builders use FTP to upload HTML files to servers.
How Web Pages Are Served
When you open up your browser and view a web page, an
exchange between your computer (the client) and a remote
computer (the server) has already taken place. Here’s a
quick breakdown of what happens:
1. You type a URL into your browser’s blank address bar.
2. Computers called name servers then point your
browser to other computers whose IP addresses are
associated with the domain name in the URL.
3. Your browser loads the page you requested and its
related components from the server where they reside.
4. The browser formats the page for viewing based on
the instructions in the CSS and HTML documents
associated with the web page you requested.
How to Register a Domain Name
The first step in building your own website is to register
your domain name through a domain name registrar. Once
you’ve registered and paid for a domain name, you own
it, which means you have the exclusive right to use that
domain name for a specified period of time and renew it
once that term expires. Domain name registration is usually
effective for a year at a time.
Selecting a Registrar
There are many registrars to choose from. The factors to
consider when choosing one are accreditation and cost:
• Accreditation: Only use a registrar listed on the
Internet Corporation for Assigned Names and
Numbers (ICANN) website located at www.icann.org/
registrars/accredited-list.html.
• Cost: Though some registrars charge up to $40,
avoid paying more than $10 per year to register your
domain name. Among the most reliable and cheapest
accredited registrars is Go Daddy (www.godaddy.com).
published by Barnes & Noble
Choosing a Domain Name
Before allowing you to register a domain name, registrars
will check to make sure it‘s not already registered. To find
out whether your domain is available, visit www.whois.net.
When selecting a name:
• Choose as brief a name as possible.
• Avoid using hyphens, which users can forget easily.
• If the names you prefer are all taken, try pluralizing the
name, adding “the” to the beginning of the name, or
coining an original term.
Domain Extensions
Domain extensions, or top-level domains (TLDs), are the
suffixes attached to domain names. You’re probably most
familiar with .com and .net, the most popular TLDs for per-
sonal sites, and .org, a TLD used mainly by organizations.
But many more exist, such as .info and .biz. View a complete
selection of TLDs at ICANN’s accredited registrars page.
How to Select a Web Host
Once you’ve registered your domain name, it’s time to
choose a web host. A web host is a business that rents out
the server space on which you store all of your website’s
files. Look for a web host that’s backed by a reliable cor-
poration with a good reputation for customer service. For
instance, it’s probably safer to use Yahoo! web hosting
(webhosting.yahoo.com) than a small host you don’t know.
Hosting Features
Before signing a contract, make sure you understand the
hosting features available to you:
• Shared vs. dedicated hosting: With a shared hosting
plan, your site shares space with other sites on a
server, whereas with a dedicated server plan, a server
is reserved exclusively for your website. Shared hosting
plans are less costly but may make your web pages
load more slowly. Unless your site attracts thousands
of users per day, though, shared hosting should suffice.
• Disk space: This is the amount of space your site can
take up on your rented server. Exactly how much disk
space you need depends on the number of pages you
expect your site to contain and what types of files you
plan to offer users. For instance, images and audio files
take up much more space than text files. Opt for a host
that offers at least 3 gigabytes (GB) of storage space.
 www.quamut.com
• Data transfer: Also known as bandwidth, this is the
amount of data you can transfer from your site to other
computers in a given month. Be sure to choose a plan
with data transfer limits of at least 100 GB per month.
• POP/SMTP access: This type of email protocol allows
you to use email addresses with your site’s domain
(you@yoursite.com). Most hosts let you use a web-
based version of your site’s email for free. If you’d like
to download and manage your email on your local
desktop PC, though, be sure your web host offers
POP/SMTP access.
Other Hosting Features to Consider
• Customer service: Some hosting companies offer
customer service via email only. Sign up for hosting
only with a company that offers telephone support.
• Control panel: This is an interface that allows you to
manage email addresses, configure your account, and
monitor site statistics, such as number of visitors.
• E-commerce: Some plans offer built-in or easy-to-
configure storefront applications. If you’re planning to
sell on the web, consider buying a plan with this option.
Configuring Your Domain Name
Once you’ve registered a domain and bought a web hosting
plan, you’ll need to configure your domain. This way, other
computers know where to look for your files when someone
enters one of your site’s URLs into a browser. To make sure
your domain is correctly configured, you must change your
domain’s DNS (domain name server) settings. Here’s how:
1. When you sign up for hosting, your web host provides
you with the DNS info you need. The DNS info will look
something like this: ns1.yoursite.com.
2. Enter the DNS info into the DNS settings configuration
page on your registrar’s site. This option is usually
located under My Account or Settings.
3. After about 24 hours, your domain becomes associated
with the servers on which your files reside, and your
site can be found by any browser into which someone
types your URL.
How to Plan Your Website
Before you begin building the web pages that will make up
your site, do some preliminary planning and organization:
• Draft a site plan.
• Draw a site map.
• Organize files into folders and directories.
• Assemble your content.
Draft a Site Plan
Your site plan outlines the purpose and goals of your web-
site. It should address the following issues:
• Purpose: Clarify your reasons for building the site and
list the site’s goals, ranked by importance.
• Audience: Define the types of users you expect your
site to attract.
The information contained in this and every Quamut guide is intended only for the general interest of
its readers and should not be used as a basis for making medical, investment, legal or other important
decisions. Though Quamut makes efforts to create accurate guides, editorial and research mistakes can
occur. Quamut cannot, therefore, guarantee the accuracy of its guides. We disclaim all warranties, including
warranties of merchantability or fitness for a particular purpose, and must advise you to use our guides at
your own risk. Quamut and its employees are not liable for loss of any nature resulting from the use of or
reliance upon our charts and the information found therein.
Photo credit: Page 1: Good Shoot/Corbis. Illustrations copyright © 2007 by Quamut.
• User acquisition: Explain how you intend to attract
your audience—through advertising, word of mouth,
special promotions, and so on.
• Content: Detail what types of text and images you
want your site to contain.
• Look and feel: Describe the site’s aesthetics, such as
the color palette you’d like to use and the overall tone
or attitude you intend to convey.
• Layout: Consider how you’ll organize each page to
allow users to navigate easily among pages on the site.
• Schedule: Determine deadlines for creating drafts of
the site and launching the final product.
Draw a Site Map
Once you have your site plan in place, you’re ready to
create a site map, or a visual depiction of your site’s basic
architecture. Use the site map as a blueprint when creating
the pages that make up your website. Your site map should
include each of the site’s main pages and show how they
link together to form the overall hierarchy of the website.
You can draw a site map on paper or with image editing
software, such as Adobe Illustrator or Photoshop. A site
map for a book-review site might look like this:
home page
about us book FAQ contact
reviews information
international
bestsellers
new
releases
forthcoming
titles
Organize Files into Folders and Directories
Websites are essentially collections of files located on a
server and organized in a particular structure, called a di-
rectory structure. Note that what you probably call folders
on your computer are called directories on the web. Folders
and directories serve the same purpose: to organize related
files into groups and subgroups.
When you make your website, you’ll create the files on
your computer and then upload them to the proper direc-
tories on your web host’s server (see How to Publish Your
Website). To streamline the process of uploading your site’s
files from your hard drive to your server, create a group of
folders on your hard drive that mirrors the directories you
plan to use on your site. These folders should derive from
the components of your site map. For example, to build
the book-review site in the site map example above, you’d
follow these steps:
1. Make a main folder for your site on your hard drive and
name it appropriately—in this case, “book-review site.”
Building a Website
2. Create a folder called “home page” in which you’ll
place files that you’ll use only on the site’s home page,
or front page.
3. Create separate folders for each of the site’s main
components, such as “contact” and “FAQ.”
4. Create subfolders for any of the site’s main
components that require them. In this case, the “book
reviews” folder requires three subfolders: “international
bestsellers,” “new releases,” and “forthcoming titles.”
5. Store the files you plan to use for each section of the
site within the appropriate folders.
Each folder you create on your hard drive should eventually
have a directory on your site with the same name, preceded
by a forward slash (/). For example, the files you store in your
“contact” folder will eventually reside in an online directory
located at http://www.yoursite.com/contact.
But note one exception: the files in your “home page”
folder won’t go in a directory called “home page.” Instead,
those files will likely reside in the root directory, your site’s
topmost directory in which all of your other folders will be
stored. You don’t have to match your folder names exactly
to your site’s directory names, but doing so may help you
keep your files organized.
Create a Separate Folder for Images
It’s a good idea to create one folder in which you store all
of your image files and keep only text documents in your
main folders. That way, specific image files are easy to find
search because they all reside in one place. People typically name
their image folder “images” or “img.”
Assemble Your Content
Before you can begin to create your web pages, you need to
gather all the content you expect your site to contain when
you launch, or first publish, the site. The core content of
most sites is text and images.
• Text: This includes introductory material, biographical
information about you and/or your organization, main
content, and any other information that will appear on
your site. You can create this content with standard word
processing software and import it into your web page
documents later.
• Images: These are the photos, illustrations, logos, and
other visual material you plan to include on your site
(see How to Add Images to Your Web Pages).
As you gather and create your content, make sure to store
it within the proper folders. For example, once you’ve as-
sembled the text for your contact information page, store
the files that contain that text in your “contact” folder.
As you assemble image files, store all of the files in your
image folder.
How to Design Your Website
The primary goal of website design is to combine
usability, or ease of use, with a pleasant and appropriate
look and feel, or overall appearance.
www.quamut.com
Copyright © 2007 Quamut
All rights reserved.
Quamut is a registered trademark of
Barnes & Noble, Inc.
10 9 8 7 6 5 4 3 2 1
Printed in the United States
Writer: Frances Duncan
 www.quamut.com
Usability
A site with usability lets visitors get the information they
need quickly and easily. Your website’s usability is deter-
mined by the layout that you use throughout the site.
Website Layout
Layout is the arrangement of the core elements that appear
on each page of a website. These elements include:
• Header: An area at the top of the page that typically
contains the page title and graphic. It may also contain
navigation elements (see below).
• Navigation: This refers to the tools that visitors use
to move among the pages of the site. Navigation can
appear in a horizontal header at the top of the page,
drop-down menus (called pull-downs), or vertical
sidebars (columns along either side of the main
content area that often contain advertising as well).
• Core content: This is the page’s main text or images,
which the user has come to the site to read or see.
• Footer: The footer is an area at the bottom of the page
that typically contains links to legal information as well
as navigation to the site’s main pages.
header
navigation
(sidebar) core content
footer
How to Design Your Layout
Follow the three C’s to give your site a user-friendly layout.
• Clean: Avoid clutter by including only crucial page
elements and arranging them simply and neatly.
• Clear: Allow ample space between page elements to
make your content legible and inviting to the user.
• Consistent: Maintain the same basic layout and
navigational elements throughout the site.
Look and Feel
The look and feel of your site should appeal to the type
of users you expect to attract. It should also complement
your site’s core content. To ensure that your site’s look and
feel meets both of those goals, choose appropriate colors,
fonts, and images.
Colors
Your site should incorporate a color palette, or a set of col-
ors that complement one another. To get ideas for palettes
that might suit your site, search online for a color palette
generator, an online application that creates sample pal-
ettes. The guidelines below will also help you use color to
enhance your site’s look and feel.
• Consider your audience: Your color palette should
vary depending on the demographics of your expected
audience. For instance, a fan site for a folk musician
would likely feature soft, welcoming colors, whereas a
site geared toward hard rock fans might include a lot of
black and other dark hues.
• Use background colors wisely: Whatever background
color you choose, be sure to select a text color that’s
readable against that color. Black text on a white
background is the most legible option.
• Style your text and links: Unless you specify text
and link colors in your style sheet (see Cascading Style
Sheets), your browser will default to a combination of
black, blue, and purple text.
How Color Works on the Web
You have a choice of 216 web-safe colors to use on your web
pages. These colors are “safe” because they appear consis-
tently on all browsers and platforms (Mac, PC, and so on).
Each web-safe color has a unique hex code, a six-digit com-
bination of letters and numbers preceded by a pound sign
(for example: #336699). To see a complete list of web-safe
colors with hex codes, search online for “web-safe colors.”
Fonts
The fonts, or type styles, you can use on your site are lim-
ited by the number of fonts installed on a typical computer.
To keep your website clean and readable by all users, use
just one font. The most common fonts are: Verdana, Arial,
Times New Roman, and Courier.
The text on your site can also be customized according to
font size and style, such as bold or italic (for details on cus-
tomizing text, see Cascading Style Sheets).
Images
Images on the web usually appear in one of three ways:
• Background images: These repeat, or tile, in the
background of a web page. In general, you should avoid
using these, as they tend to make text illegible.
• Inline images: These usually appear next to a portion
of text that wraps around the image and are ideal
for smaller images that complement the text, as on
news sites.
• Block-level images: These appear on their own line
above or below text and are best for use with large
photos or illustrations.
How you use images should depend on the look and feel you
prefer for your site. Some text-heavy sites, such as blogs
and news sites, use images merely as accents to break up
text. Others, such as online photo galleries, make images
the main component of the site’s look and feel (see Adding
Images to Your Web Pages).
How to Build Web Pages with HTML
HTML stands for hypertext markup language: it uses
special tags to “mark up” text and images. These tags tell
browsers how to organize and display the text and images
as a web page, though the tags themselves aren’t displayed
to the viewer. HTML is also used to encode web pages with
hypertext links that connect web pages both within a site
and between different sites.
HTML Tags
All HTML tags share the following components:
• A less-than sign (<)
• A name written as a word or letter(s)
• A greater-than sign (>)
An example of an HTML tag is <b>, which bolds text.
Open Tags, Close Tags, and Self-Closing Tags
Nearly all HTML tags work as enclosures: each tag is actu-
ally made up of an open tag and a close tag that surround,
or enclose, text. The open tag identifies where in the text a
particular formatting instruction begins, whereas the close
tag marks where that instruction ends.
Building a Website
• Open tags: An open tag, such as <b> , follows the
basic HTML format.
• Close tags: A close tag adds a forward slash (/) to an
open tag. For instance, </b> is the close tag for <b>.
Unless it’s otherwise specified, assume that every open
tag has a corresponding close tag.
• Self-closing tags: Some HTML tags, such as <br> (for
line breaks) and <img> (for images), include a forward
slash at the end of the open tag to indicate that the tag
should be opened and closed at once. You don’t need
to use a close tag with these tags.
To bold a selection of text and create a line break, you
would write:
<b>This text will be bold.</b> <br />
Nesting Tags
HTML tags are often nested, meaning that tags that appear
first are closed last, and they can contain other open and
close tags within their own tags. For instance, you can nest
the bold (<b>) and italic (<i>) tags so that:
<b>This text will be just bold. <i>This text will be
italic and bold.</i> This text will be just bold.</b>
HTML Tag Attributes
Some HTML tags can also contain attributes, which modify
a tag or provide it with extra information. Attributes appear
in the tag a space apart from the tag name and are followed
by an equal sign (=) and a value that’s written in quotes. For
example, take the following tag:
<img src = "logo.jpg">
The name of this tag is img, the attribute is src, and the
value of the attribute is logo.jpg. The value logo.jpg tells the
browser to insert an image. (For more on inserting images,
see How to Add Images to Your Web Pages.)
HTML Tagging Syntax
When writing HTML tags, it’s important to follow four funda-
mental rules of HTML syntax:
• Write all tags in lowercase.
• Surround all attribute values with quotes.
• Close all open tags.
• Open and close nested tags in the proper sequence.
How to Structure HTML Documents
Every web page uses four required HTML tags. These tags
organize the page and define its separate parts.
• The <html> </html> tag: These tags surround all the
text and all the other tags in the document and tell the
browser that the document is written in HTML.
• The <head> </head> tag: Defines the page’s heading.
The heading includes information about the page, such
as the required <title> </title> tag and meta data,
which search engines read to determine what type of
content your site contains.
• The <title> </title> tag: Indicates the page’s title (“A
simple HTML document”). The web page title appears
on the browser, often near the middle or the top left.
• The <body> </body> tag: Defines the body of the
web page, which contains the text and/or images that
make up the meat of the page and appears in the main
browser window.
 www.quamut.com Building a Website

The Simplest Possible Web Page • Each table must contain at least one row. The value of href (in quotes after the equal sign) tells the
The simplest web page that browsers can read uses just the • Each row must contain at least one cell. browser which URL it should link to (in this case, http://
four required tags, as in the following example: • Tables can have visible borders, which show the www.quamut.com). The text between the opening and
boundaries of rows and cells, or invisible borders. closing of the anchor tag (in this case, the word Quamut) will
<html> appear as an underlined link in your browser.
<head> A typical table with visible borders might look like this:
<title> The HTML Image Tag
A simple HTML document To include images on your web pages, use HTML’s image
</title> tag, which looks like this:
</head>
<body> <img src = "../img/flowers.jpg" alt="flowers" />
This text will appear in the main browser window.
</body> The HTML code to create tables includes these tags: The image you reference in your image tag will appear in
</html> your browser wherever you place it within your HTML code.
Code Function For instance, images can appear within text paragraphs,
How to Create HTML Documents between paragraphs, in table cells, and so on. The parts of
<table> Creates a table.
You can create HTML documents in any text editor, including the image tag, as in the example tag above, are:
standard word processing software. It’s best, though, to use <tr> Creates a horizontal table row within the
software designed especially for HTML authoring. The two table. • img: This is the name of the tag itself.
main types of authoring software are WYSIWYG editors • src: This attribute stands for “source,” or the location
<td> Creates a cell within the table row.
and text editors. on the server of the actual image file.
• /img/flowers.jpg: This line instructs the browser
• WYSIWYG editors: WYSIWYG stands for “what you see The most common attributes used to control the size, to look in the img directory to find an image called
is what you get.” These programs, such as Microsoft orientation, and appearance of tables, rows, and cells are: flowers.jpg. The two dots mean that the directory “img”
FrontPage and Adobe Dreamweaver, don’t so much is located up one level from the default directory, or
help you write HTML as write it for you. They let you Attribute Function the directory in which the HTML file that calls for this
arrange the elements of your web pages visually, then image resides.
they generate the HTML code for you. <width> Sets width tables or table cells. • alt: This represents a text description of the image that
Example: <td width="200">
• Text editors: These programs make creating your own will appear if the image itself fails to load.
HTML code by hand easier with features such as auto- <align> Determines whether either table
correct and different colors for each type of tag. Text or table cell content aligns to left, A Sample Web Page Created with HTML
editors also make it easy to preview your results in a center, or right. Example: <table The sample web page below uses the HTML tags defined
browser. The most popular text editors are CuteHTML align="left"> in this section. To make this web page yourself, open your
(for PCs) or BBEdit (for Macs). <valign> HTML text editor and type in the following example exactly
Determines whether content
aligns with top, middle, or as it appears:
While WYSIWYG software can make web construction easy, bottom of table cells only.
it isn’t very precise and won’t help you understand HTML Example: <td valign="top"> <html>
or improve. The best way to learn—and the only way to get <head>
<border> Determines width in pixels of
precise control over your web design—is to learn to code <title>A New Web Page</title>
all table’s borders. Applies only
HTML by hand using text editors. to <table> tag. Example: <table </head>
border="1"> <body>
The Five Main Types of HTML Tags <font face="verdana" size="5" color="#FF0000">
There are five basic types of tags you need to know in <cellpadding> Sets distance in pixels between A <u>New</u> Web Page</font>
cell contents and boundaries.
order to create simple text-based web pages (to add photos <p>
Applies to <table> tag only. Ex-
and illustrations to web pages, see How to Add Images to ample: <cellpadding="5"> A sample <b>HTML</b> document created by <i>me</i>.
Web Pages). The five main types of tags are those used to: <br>
<cellspacing> Sets distance in pixels between (And some help from <a href="http://www.quamut.
• Style text cells. Applies only to <table> tag. com">Quamut</a>.)
Example: <cellspacing="5">
• Organize page elements </p>
• Separate page elements <p>
• Create links Tags Used to Separate Page Elements <table width="300" border="1" cellpadding="5"
• Insert images These tags are used to group or divide text. Each cellspacing="5">
creates a new line on your web page. <tr>
Tags Used to Style Text <td>
These tags are used to alter the appearance of text. The Code Function Cell 1.
effects of these tags, including fonts, sizes, colors, and </td>
<br /> Use this self-closing tag to create a
spacing, can be modified with more precision and variation line break. <td>
using CSS (see Cascading Style Sheets.) Cell 2.
<hr /> Use this self-closing tag to create a horizon- </td>
Code Function tal line that can be used to separate page <td>
elements. It can be modified with attributes
<b> Bolds text. <img src="../img/flowers.jpg" alt="flowers" />
such as “width,” “color,” and “align.”
</td>
<i> Italicizes text.
<p> Place <p> before and </p> after text to </tr>
<u> Underlines text. format the text into paragraphs. </table>
<font> Sets text’s typeface, size, and color. Sizes <hr width="300" align="left">
range in ascending order from 1–7. Colors Tags Used to Create Links </p>
are specified with hex codes. To add links to your web pages: </body>
Example: <font face="arial" size="2" </html>
color="#FF0000">)
• Know the URL of the page to which you’d like to link.
• Create an anchor tag that contains that URL. Save the file as sample.html. Then launch your web browser
Tags Used to Organize Page Elements and open sample.html from the File menu. The web page
HTML uses tables to organize text and images. A table Anchor Tags you just created should look like this:
is a framework that places content into horizontal rows An anchor tag uses the <a> tag along with the attribute
that contain cells. There are a few rules to remember href (which stands for hypertext reference). For instance:
about tables:
<a href = "http://www.quamut.com">Quamut</a>
 www.quamut.com
Adding a DTD to Your HTML Documents
All web pages must include at the very beginning of the
HTML code a few lines called a document type definition,
or DTD. A DTD ensures that a browser knows what version
of HTML your document contains, and therefore how to
interpret and display your web pages. A standard DTD that
you can use for all your web pages looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi-
tional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Place this DTD at the very top of all of your HTML docu-
ments, just before the first <html> tag. The contents of the
DTD will not display in the browser.
Cascading Style Sheets (CSS)
Cascading style sheets (CSS) work with HTML to stream-
line and enhance the process of creating web pages.
Rather than styling and organizing your content with many
small bits of HTML code, CSS allows you to centralize into
one document—called a style sheet—the instructions for
where to place your content and how to present it.
Why Use CSS?
The many reasons to learn and use CSS include:
• Flexibility and richness: CSS gives you more control
over the structure and appearance of your documents
than HTML alone.
• Efficiency: CSS lets you control the appearance of text
throughout your website when you make changes to
one central style sheet document.
• File size: CSS documents are small. Using CSS strips
your HTML of dozens of tags, making your HTML
documents smaller as well.
• Page loading speed: Since CSS makes HTML files
smaller, web pages load faster.
• No more tables: CSS allows you to place page
elements with much more precision and fewer
constraints than you can by using HTML tables.
• Compatibility: CSS ensures that your pages appear
the same on all platforms and in all browsers.
How CSS Works
CSS does not replace HTML. Rather, it works with HTML by
letting you customize existing HTML tags according to the
specifications you prefer. Here’s how the process works:
1. You create a style sheet document in which you specify
your preferences for how to position and display each
element included on your web page(s). Each entry in
your style sheet is called a rule.
2. You reference the rule each time the elements to which
you’d like to apply the rule appear in your HTML code.
The browser then knows to apply the specs in your rule
to the element in your web page.
Think of CSS as a means of customizing HTML default
settings to the settings of your choice.
An Example of a Real-World Application of CSS
Let’s say you’re publishing a long article on your website
that contains dozens of pages.
• With HTML: Each time you start a new page, you
would have to define how to display every element on
the page. For instance, you would have to specify the
size, color, and typeface of the article’s main font.
• With CSS: You can instead create a custom rule that
specifies the main font’s traits and then reference that
rule when you use the main font on each page.
The crucial difference between these approaches is that
with CSS, if you decide to change the main font’s appear-
ance, you need only change the rule in your style sheet. The
change would then take effect on all of the article’s pages.
If you use just HTML, you have to change the HTML on each
individual web page.
The Contents of a Typical Style Sheet
A style sheet is a list of rules saved as plain text in a file with
the extension .css (for instance, sample.css). Here are three
examples of different types of style sheet rules:
• #titlefont {font-size: 10px; color: #BEBEBE;}
• .mainfont {font-size: 7px; color: #FF0000;}
• p {font-size: 5px; color: #000000;}
Note that the most important difference among these three
rules is the symbol that begins each rule.
• Rules that you intend to use just once in your
document: These are preceded by a pound sign (#).
The rule that you would apply to the title font of your
article is an example of a rule that you would use just
once per page.
• Rules that you intend to use more than once in
your document: These are preceded by a period. The
rule you apply to the main font of your article is an
example of a rule that you might use more than once
per page. For instance, when an image breaks up the
main text of the article in your HTML code, you’ll need
to use your rule to specify the font at the beginning of
the paragraph that immediately follows the image.
• Rules that apply to standard HTML tags: These
are preceded by neither a period nor a pound sign.
The rule’s name matches the name of the HTML tag
you wish to style. For instance, a rule named “p”
would style the contents of all paragraphs (<p> tags)
throughout your document.
Note that you can choose any name you’d like when making
your own CSS rules, but it’s always a good idea to choose
relevant names. If you’re styling all instances of an existing
HTML tag, such as <p>, don’t give your rule a new name.
What the Rules Above Mean and Do
The first two CSS rules above control the appearance of the
main font and title font used in an HTML document, hence
the selectors (names) “mainfont” and “titlefont.” Each rule’s
declaration, the text contained in braces ( { } ), contains
properties, such as font size, that specify how to display the
page elements associated with the selector.
• For mainfont: The rule is to make the font seven pixels
high and color it #FF0000 (the hex code for red).
• For titlefont: The rule is to make the font 10 pixels
high and color it #BEBEBE (the hex code for gray).
The values of properties within a declaration are preceded
by colons. Each property is followed by a semicolon.
Building a Website
Where to Find All the Available CSS Properties
There are dozens of CSS properties that allow you to control
everything from fonts to border styles to the precise place-
ment of onscreen page elements. You can research all the
CSS properties online at www.w3.org.
How to Use CSS Rules in Your HTML Files
To use CSS rules in HTML files, you must include a link tag.
The link tag associates your HTML file with your style sheet.
Below is the first portion of sample.html, the example HTML
document you created earlier in this guide, with a link tag
added in the proper location within the <head> of the file.
<html>
<head>
<title>A New Web Page</title>
<link rel="stylesheet" type="text/css" href="sample.
css"/>
</head>...
The link tag tells your browser to look in sample.css to find
the rules it should use to display your content.
How to Apply CSS Rules to Page Elements in HTML
You can call, or apply, CSS rules to page elements in your
HTML documents in two ways:
• For rules preceded by a period: Use the word class
as an attribute in your HTML tags, followed by a value
equal to the name of the selector. For example, to
apply the mainfont rule to the font of the main text in
an article, you would include the following code in your
HTML document: <font class="mainfont">This text
will now be seven pixels high and red.</font>
• For rules preceded by a pound sign: Use the word
id as an attribute in your HTML tags, followed by a
value equal to the name of the selector. For example,
to apply the titlefont rule to the font of the title text in
an article, you would include the following code in your
HTML document: <font id="titlefont">This text
will now be ten pixels high and gray.</font>
• For rules not preceded by a period or pound sign:
Use the HTML tags as you normally would, without
any further modification. For example, all paragraphs
surrounded by <p> and </p> tags would be styled
according to the specs for “p” in your style sheet.
Positioning Page Elements with CSS
Positioning page elements with HTML tables is difficult and
imprecise since you can’t specify exactly where on the
screen you’d like each element to appear. CSS solves this
problem by allowing you to specify precisely where to posi-
tion elements down to the actual pixels, or dots, that make
up computer screens.
For instance, if you wanted a light gray box behind all the
content in sample.html, you would add a rule to your css file
called “textbox” (or whatever you wish to call it), as in the
following example:
#textbox {position: absolute; left: 0px; top: 0px; height:
200px; width: 300px; background-color: #BEBEBE;}
The properties and values in this rule’s declaration,
explained in the following table, specify exactly where to
place the gray box:
Property Value Function
position absolute This indicates that the box
should be placed exactly
where specified.
left 0px This represents the pixel
along the horizontal plane
at which the text box should
start. 0px means the left-
most pixel on the screen.
 www.quamut.com
top 0px This represents the pixel
along the vertical plane at
which the text box should
begin. 0px means the top-
most pixel on the screen.
height 200px This represents the height of
the text box.
width 300px This represents the width of
the text box.
background #BEBEBE This represents the back-
color ground color of the text box
(in this case, gray).
Using <div> to Implement CSS Positioning Rules
The <div> tag (short for “division”) is an HTML tag used most
often to position screen elements according to the instruc-
tions in CSS rules. For instance, if you wanted to place the
gray text box used in the example above around all the
content in sample.html, you would place <div> tags that call
a CSS rule with positioning instructions for the text box just
inside your existing open and close <body> tags:
<body>
<div id="textbox">
...[leave the intervening content here as is]...
</div>
</body>
</html>
Your open <div> tag calls the “textbox” rule, which you
would have had to add to your style sheet. Since you intend
to use textbox just once, the open <div> tag contains the
“id” property rather than the “class” property.
You can now use this method to position all of the
elements in your web pages, such as images, paragraphs,
titles, and so on. Here’s a quick recap of the approach:
1. Surround elements you’d like to control with open and
close <div> tags.
2. Be sure your open <div> tag references the name of
a CSS rule in your style sheet that specifies where to
place your elements. These rules can also specify how
to style the elements that you intend to place.
How to Add Images to Your
Web Pages
Most web pages contain a mix of text and images, such as
photos, illustrations, or artwork. To include images on your
pages, you need to:
• Obtain or create your images
• Format your images for publication on the web
• Add images to your web pages using HTML and CSS
How to Obtain Images for Your Web Pages
If you’d like to use a specific image on your web page, you’ll
need to use a clip art or stock photography resource or cre-
ate the image yourself.
Clip Art Resources
Clip art refers to decorative illustrations and graphics
typically used to highlight text on a web page, in a print
newsletter, or in another similar medium. If you’re starting
a website on birdwatching, for example, you can easily find
dozens of clip art images of birds and related imagery for
use in decorating your pages. To find clip art on the web,
search for “clip art” or refer to www.clipart.com or www.
clipartconnection.com.
Stock Photography Resources
Stock photography refers to photographs available for
public use, either for a licensing fee or for free. Stock photo
sites on the web typically have tens of thousands of images
you can browse and then buy. To find stock photography on
the web, search for “stock photography” or refer to www.
veer.com or www.gettyimages.com. Both sites offer some
free images.
Creating Your Own Images
Any image that can be converted to a digital format can be
published online. To create web-ready digital images, you
need a digital camera, which creates digital images on the
spot, or a scanner, which digitizes existing print materials
such as old photos, newspaper articles, or art.
How to Format Images for Your Web Pages
You’ll need to edit and format any image before publishing
it online. The three criteria you’ll need to consider when
editing images are:
• Dimension: The height and width of the image are
measured in pixels. The maximum dimensions of any
image should be 640 × 480 pixels.
• Resolution: The number of dots, or pixels, per inch
(dpi) in your image. Use 72 dpi, the resolution at which
most monitors will display your image.
• File size: The amount of data in your file, measured
in kilobytes (k) or megabytes (megs). Keep your image
files under 200k to make your pages load faster. Note
that if you’re using a dialup modem to access your site,
every 5k of file size you use adds about one second of
downloading time.
The most popular digital image editing software is Adobe
Photoshop, though you can find less expensive programs
by searching for “image editor” at www.download.com.
Once you’ve obtained image editing software, you’ll need to
resize and save images for optimal online viewing.
Optimize Images for Your Web Pages
You can optimize the dpi, dimensions, and file size of your
images by following the instructions below. Though these
instructions apply to Photoshop, most other image editing
software is similar.
1. In the Image menu, select Image Size.
2. A dialog box will appear where you can enter new
values for the width, height, and resolution (dpi).
3. You should also be able to preview what file size your
image will have after you’ve saved it.
4. Click OK.
Saving Images in the Correct File Format
When you save your image files, you need to choose one of
the following formats:
• GIF: Best used for logos or simple graphics with little
color variation or shading (pronounced jiff )
• JPEG (or JPG): Best for photographs and other detailed
images (pronounced jay-peg)
How to Publish Your Website
Once you’ve created a few web pages on your hard drive,
you’ll need to move those files onto the server where your
website will reside. Moving files to a server is done with
software called FTP, or file transfer protocol (see Website
Basics). FTP enables you to log in to your web server, cre-
ate or modify directories, and upload (send) or download
(retrieve) files. Uploading your files to your web server is the
equivalent of publishing your work: your pages will be view-
able immediately by anyone with an internet connection.
Plenty of FTP software is available online for free or for a
small cost.
• WS-FTP: The standard FTP software for PCs, it’s
available at www.ipswitch.com/products/ws_ftp/
home/index.asp.
Building a Website
• Fetch: The standard FTP software for Macs, it’s
available at www.fetchsoftworks.com.
Logging In to Your Web Server with FTP
To log in to your server with FTP, you need the following
information, all of which your web host will provide via email
when you sign up for web hosting services:
• Server: The name of your web server; for instance,
http://www.quamut.com
• User name: The name provided by your web host
• Password: Your FTP login password, as provided by
your web host
Once you get all of this information confirmed by your
web host, start up your FTP software, enter the information,
and click Connect.
The Typical FTP User Interface
Most FTP software contains a main window split into two
vertical panes (the Mac program Fetch is one exception).
• Left side: Lists the folders on your local hard drive
• Right side: Lists the directories on your web server
You can browse through the directories on your hard drive
or server by clicking on the files.
Creating a Directory Structure with FTP
Before you can upload any files to the server, you first have
to have directories into which you can upload them. Most
FTP programs allow you to create directories on your server
in two ways:
• Manually: Use the same method you’d use to create
folders on your local hard drive, such as right-clicking
your mouse and selecting New > Folder. This method
gives you more control.
• Automatically: Your FTP program will create directories
on the fly if you upload entire folders to your web server.
This method is best if the directory structure you intend
to use for your site matches the hierarchy of file folders
you’ve created for your site on your hard drive. The new
directories will have the same names as the folders you
upload, and you’ll upload your folders and the files they
contain all at once.
Uploading Your Website’s Files with FTP
FTP software programs allow you to upload your folder or
files in several ways:
• Drag and drop: Drag entire folders or specific files
from either location (local or remote) to the other.
• Double-click: Double-click on the specific file you
want to move. The file will automatically move to the
opposite location (that being the server if it’s located
on your local hard drive, or vice versa).
• Click on buttons: Highlight folders, directories, or files,
and click on the Upload or Download buttons provided
by the program. These buttons are typically shaped like
arrows or contain arrow icons.
FTP Transfer Modes
There are two transfer modes for uploading files: ASCII and
binary. The best mode to use depends on the type of files
you’re uploading:
• ASCII: Use ASCII for HTML documents.
• Binary: Use binary for images and anything else that
isn’t an HTML document.
Most FTP programs will offer an auto-detect mode that will
switch from ASCII to binary when needed. Use auto-detect
mode if it’s available.