Visit https://ebookfinal.

com to download the full version and

explore more ebook

Multimedia Web Design and Development Using

Languages to Build Dynamic Web Pages 1st Edition
Theodor Richardson

_____ Click the link below to download _____

https://ebookfinal.com/download/multimedia-web-design-
and-development-using-languages-to-build-dynamic-web-
pages-1st-edition-theodor-richardson/

Explore and download more ebook at ebookfinal.com

Here are some recommended products that might interest you.
You can download now and explore!

Web Development with JavaServer Pages 2nd Edition Duane K.

Fields

https://ebookfinal.com/download/web-development-with-javaserver-
pages-2nd-edition-duane-k-fields/

ebookfinal.com

Web Development with MongoDB and NodeJS 2nd Edition Build

an interactive and full featured web application from
scratch using Node js and MongoDB Mithun Satheesh
https://ebookfinal.com/download/web-development-with-mongodb-and-
nodejs-2nd-edition-build-an-interactive-and-full-featured-web-
application-from-scratch-using-node-js-and-mongodb-mithun-satheesh/
ebookfinal.com

Advanced Dom Scripting Dynamic Web Design Techniques 1st

Edition Jeffrey Sambells

https://ebookfinal.com/download/advanced-dom-scripting-dynamic-web-
design-techniques-1st-edition-jeffrey-sambells/

ebookfinal.com

SMIL Adding Multimedia to the Web 1st Edition Mary

Slowinski

https://ebookfinal.com/download/smil-adding-multimedia-to-the-web-1st-
edition-mary-slowinski/

ebookfinal.com
Creating Database Backed Library Web Pages Using Open
Source Tools 1st Edition Stephen R. Westman

https://ebookfinal.com/download/creating-database-backed-library-web-
pages-using-open-source-tools-1st-edition-stephen-r-westman/

ebookfinal.com

Writing for Multimedia and the Web Third Edition A

Practical Guide to Content Development for Interactive
Media Timothy Garrand
https://ebookfinal.com/download/writing-for-multimedia-and-the-web-
third-edition-a-practical-guide-to-content-development-for-
interactive-media-timothy-garrand/
ebookfinal.com

Learning JavaScript Add Sparkle and Life to Your Web Pages

3rd Edition Ethan Brown

https://ebookfinal.com/download/learning-javascript-add-sparkle-and-
life-to-your-web-pages-3rd-edition-ethan-brown/

ebookfinal.com

Build Your Own Database Driven Web Site Using PHP MySQL
4th Edition Kevin Yank

https://ebookfinal.com/download/build-your-own-database-driven-web-
site-using-php-mysql-4th-edition-kevin-yank/

ebookfinal.com

Learn Java for Web Development Modern Java Web Development

1st Edition Vishal Layka

https://ebookfinal.com/download/learn-java-for-web-development-modern-
java-web-development-1st-edition-vishal-layka/

ebookfinal.com
Multimedia Web Design and Development Using
Languages to Build Dynamic Web Pages 1st Edition
Theodor Richardson Digital Instant Download
Author(s): Theodor Richardson; Charles Thies
ISBN(s): 9781937585006, 193758500X
Edition: 1
File Details: PDF, 8.25 MB
Year: 2012
Language: english
MULTIMEDIA WEB DESIGN
AND DEVELOPMENT
LICENSE, DISCLAIMER OF LIABILITY, AND LIMITED WARRANTY

By purchasing or using this book (the “Work”), you agree that this license grants
permission to use the contents contained herein, but does not give you the right
of ownership to any of the textual content in the book or ownership to any of the
information or products contained in it. This license does not permit uploading of the
Work onto the Internet or on a network (of any kind) without the written consent of
the Publisher. Duplication or dissemination of any text, code, simulations, images,
etc. contained herein is limited to and subject to licensing terms for the respective
products, and permission must be obtained from the Publisher or the owner of the
content, etc., in order to reproduce or network any portion of the textual material (in
any media) that is contained in the Work.

MERCURY LEARNING AND INFORMATION (“MLI” or “the Publisher”) and anyone involved
in the creation, writing, or production of the companion disc, accompanying algo-
rithms, code, or computer programs (“the software”), and any accompanying Web
site or software of the Work, cannot and do not warrant the performance or results
that might be obtained by using the contents of the Work. The author, developers,
and the Publisher have used their best efforts to insure the accuracy and functional-
ity of the textual material and/or programs contained in this package; we, however,
make no warranty of any kind, express or implied, regarding the performance of
these contents or programs. The Work is sold “as is” without warranty (except for
defective materials used in manufacturing the book or due to faulty workmanship).

The author, developers, and the publisher of any accompanying content, and anyone
involved in the composition, production, and manufacturing of this work will not be
liable for damages of any kind arising out of the use of (or the inability to use) the
algorithms, source code, computer programs, or textual material contained in this
publication. This includes, but is not limited to, loss of revenue or profit, or other
incidental, physical, or consequential damages arising out of the use of this Work.

The sole remedy in the event of a claim of any kind is expressly limited to replace-
ment of the book, and only at the discretion of the Publisher. The use of “implied
warranty” and certain “exclusions” vary from state to state, and might not apply to
the purchaser of this product.
MULTIMEDIA WEB DESIGN
AND DEVELOPMENT
Using Languages to
Build Dynamic Web Pages

Theodor Richardson
Charles Thies

Mercury Learning and Information

Dulles, Virginia
Boston, Massachusetts
New Delhi
Copyright ©2013 by MERCURY LEARNING AND INFORMATION. All rights reserved.

This publication, portions of it, or any accompanying software may not be

reproduced in any way, stored in a retrieval system of any type, or
transmitted by any means, media, electronic display or mechanical display,
including, but not limited to, photocopy, recording, Internet postings, or
scanning, without prior permission in writing from the publisher.

Publisher: David Pallai

MERCURY LEARNING AND INFORMATION

22841 Quicksilver Drive
Dulles, VA 20166
[email protected]
www.merclearning.com
1-800-758-3756

This book is printed on acid-free paper.

Theodor Richardson and Charles Thies. Multimedia Web Design and Development.
ISBN: 978-1-936420-38-4

The publisher recognizes and respects all marks used by companies, manu-
facturers, and developers as a means to distinguish their products.
All brand names and product names mentioned in this book are
trademarks or service marks of their respective companies. Any omission
or misuse (of any kind) of service marks or trademarks, etc. is not an
attempt to infringe on the property of others.

Library of Congress Control Number: 2012952664

131415 321

Printed in the United States of America

Our titles are available for adoption, license, or bulk purchase by

institutions, corporations, etc. For additional information, please contact
the Customer Service Dept. at 1-800-758-3756 (toll free).

The sole obligation of MERCURY LEARNING AND INFORMATION to the purchaser

is to replace the disc, based on defective materials or faulty workmanship,
but not based on the operation or functionality of the product.
 I dedicate this book to Katherine; she is my muse and the love
of my life. I would be lost without you, and everything in my life
means more because you are in it.

— Theodor Richardson

To my sons, Matt and Will: Dream the impossible, learn from

your mistakes, and try again. Hard work and perseverance will
make all your dreams come true.

—Charles Thies
CONTENTS
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

Chapter 1
WEB DESIGN BASICS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 Introduction to the World Wide Web ......................................... 1

1.1.1 Web Pages and Web Browsers ..................................... 4
1.1.2 Hypertext Markup Language (HTML) ...................... 6
1.1.3 Uniform Resource Locator (URL)............................... 8
1.2 HTML Page Construction ......................................................... 10
1.2.1 The Doctype Declaration ...........................................12
1.2.2 Adding a Title .............................................................14
1.2.3 Adding Content ..........................................................15
1.2.4 Adding a Hyperlink....................................................15
1.2.5 Page Testing ...............................................................17
1.3 Principles of Web Design........................................................... 18
1.3.1 Page Layout and Real Estate ....................................19
1.3.2 Purpose and Audience Consideration .......................21
1.3.3 Typography and Font Selection ................................22
1.3.4 Color Choice................................................................25
1.3.5 Evaluating Existing Design for Tone ........................27
Chapter Summary .....................................................................28
Chapter Knowledge Check........................................................28
Chapter Projects ........................................................................30
Chapter Exercises .....................................................................31
Chapter Review Questions........................................................33

Chapter 2
SITE PLANNING AND PRODUCTION . . . . . . . . . . . . . . . . . 35

2.1 Web Site Planning ..................................................................... 36

2.1.1 The Design and Development Process ......................36
2.1.2 Initial Client Communication ...................................38
2.1.3 Establishing Audience and Purpose .........................40
2.1.4 Emphasizing and Showcasing Content ....................41
2.1.5 Creating a Design Set ................................................42
2.2 The Case Project......................................................................... 45

Contents — vii
 2.3Professional HTML Authoring Tools ....................................... 45
2.3.1 Adobe Dreamweaver ..................................................46
2.3.2 Microsoft Expression Web .........................................48
2.3.3 Notepad++ ..................................................................49
Chapter Summary .....................................................................51
Chapter Knowledge Check........................................................51
Chapter Projects ........................................................................53
Chapter Exercises .....................................................................54
Chapter Review Questions........................................................55

Chapter 3
INTRODUCTION TO HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3.1 Creating an Initial Site Layout ................................................ 57

3.1.1 Decomposing a Design ...............................................58
3.1.2 Structuring a Page .....................................................60
3.1.3 Creating Layouts in HTML .......................................60
3.2 Images ......................................................................................... 63
3.2.1 Image Formats ...........................................................63
3.2.2 Image Creation Software ...........................................65
3.2.3 Creating Site Images .................................................67
3.2.4 Inserting Images ........................................................70
Chapter Summary .....................................................................73
Chapter Knowledge Check........................................................73
Chapter Projects ........................................................................75
Chapter Exercises .....................................................................75
Chapter Review Questions........................................................77

Chapter 4
CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
4.1 Introduction to Cascading Style Sheets ............................79
4.1.1 Invoking Styles in HTML ..........................................80
4.1.2 CSS Classes and Tags ................................................81
4.1.3 CSS IDs.......................................................................82
4.1.4 Pseudo-classes ............................................................83
4.1.5 Inheritance .................................................................84
4.2 Positioning and Layering ...................................................84
4.2.1 Element Position ........................................................85
4.2.2 Layers .........................................................................89
4.2.3 Height and Width.......................................................91
4.2.4 Margins and Padding.................................................94
4.3 Display Properties...................................................................... 97
4.3.1 Background Images ...................................................97

viii — Contents
 Colors ..........................................................................99
4.3.2
Borders ..................................................................... 103
4.3.3
Shadows .................................................................... 104
4.3.4
Content Alignment................................................... 105
4.3.5
Text Modification ..................................................... 106
4.3.6
4.4 Reusing CSS Styles.................................................................. 108
Chapter Summary ................................................................... 110
Chapter Knowledge Check ..................................................... 116
Chapter Projects ..................................................................... 118
Chapter Exercises ................................................................... 118
Chapter Review Questions...................................................... 120
Chapter 5
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
5.1 Branding a Site ................................................................. 124
5.1.1 Planning for Content ............................................... 124
5.1.2 Creating a Site Map ................................................. 125
5.1.3 Hyperlinks ................................................................ 126
5.1.4 Image Links/Hotspots .............................................. 127
5.1.5 Meta Tags ................................................................. 130
5.1.6 Cloning Pages ........................................................... 131
5.1.7 Adding a Site Icon .................................................... 133
5.2 Adding Content ................................................................. 135
5.2.1 Using Paragraphs and Line Breaks ........................ 135
5.2.2 Ampersand Commands ............................................ 136
5.2.3 Adding Tables........................................................... 137
5.2.4 Adding Forms ........................................................... 141
5.2.5 Audio and Video ....................................................... 145
5.2.6 Embedded Code ........................................................ 146
Chapter Summary ................................................................... 148
Chapter Knowledge Check ..................................................... 148
Chapter Projects ...................................................................... 150
Chapter Exercises ................................................................... 151
Chapter Review Questions...................................................... 152

Chapter 6
JAVASCRIPT AND JQUERY. . . . . . . . . . . . . . . . . . . . . . . . . 155
6.1 JavaScript Basics ........................................................................ 155
6.1.1 Variable Declarations .............................................. 158
6.1.2 Assigning Values ...................................................... 159
6.1.3 Function Calls .......................................................... 161
6.1.4 Defining Functions................................................... 163
6.1.5 Conditional Statements ........................................... 165

Contents — ix
 Looping ..................................................................... 168
6.1.6
6.2 Using JavaScript ...................................................................... 170
6.2.1 Using the alert() Function ....................................... 171
6.2.2 String Parsing and Form Validation ...................... 171
6.2.3 Dynamic Content ..................................................... 179
6.2.4 Events ....................................................................... 182
6.2.5 External JavaScript ................................................. 184
6.3 jQuery ........................................................................................ 185
6.3.1 Installing jQuery ...................................................... 186
6.3.2 jQuery Code and Use ............................................... 187
Chapter Summary .................................................................. 190
Chapter Knowledge Check...................................................... 190
Chapter Projects ...................................................................... 192
Chapter Exercises ................................................................... 193
Chapter Review Questions...................................................... 194

Chapter 7
PHP AND PERL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
7.1 Hosting a Web Site .................................................................. 197
7.2 PHP............................................................................................ 201
7.2.1 PHP Basics ............................................................... 202
7.2.2 Form Processing ....................................................... 204
7.2.3 Emailing with PHP .................................................. 208
7.3 Perl .................................................................................... 210
7.3.1 Perl Basics .................................................................. 211
7.3.2 Form Processing ......................................................... 212
7.3.3 Emailing with Perl ..................................................... 216
Chapter Summary ................................................................... 219
Chapter Knowledge Check...................................................... 219
Chapter Projects ...................................................................... 221
Chapter Exercises ................................................................... 222
Chapter Review Questions...................................................... 223

Chapter 8
MYSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
8.1 MySQL ...................................................................................... 227
8.1.1 MySQL Data Types .................................................. 228
8.1.2 Creating a MySQL Database .................................. 230
8.2 Structured Query Language (SQL)........................................ 234
8.2.1 Select Queries........................................................... 234

x — Contents
 Update Queries ........................................................ 235
8.2.2
Insert Queries .......................................................... 236
8.2.3
8.3 Using MySQL with PHP ......................................................... 236
8.3.1 Accessing a MySQL Database with PHP................ 237
8.3.2 Storing Data in a MySQL Database ....................... 239
8.3.3 Retrieving Data from a MySQL Database.............. 240
Chapter Summary ................................................................... 243
Chapter Knowledge Check...................................................... 243
Chapter Projects ...................................................................... 245
Chapter Exercises ................................................................... 246
Chapter Review Questions...................................................... 247

Appendix
SELECTED ANSWERS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

Contents — xi
Introduction
This book is a complete guide to the concepts and practices of Web
design and development. It includes hands-on activities and profes-
sional advice for best practices in learning the procedures and prac-
tices of both design and development, allowing you to practice the
entire life cycle of a Web project. The material herein captures all of
the stages, from initial designs to back-end programming, of creating
complex Web applications. After completing this text, you will have
the ability to create dynamic, engaging Web sites with interactive
components and persistent styles. Each topic provides all of the neces-
sary instruction for getting started in that particular area.
The first five chapters of the book focus on the front-end design of a
Web site. This includes the use of HTML5 and CSS3 to create profes-
sional Web pages. This also includes guidelines for graphic design to
make the most of your pages using color, font, and style. The profes-
sional tools Adobe Dreamweaver and Microsoft Expression Web are
also introduced, with guidelines for their use in creating the case proj-
ect that continues throughout the text.
Chapter 6 focuses on the use of JavaScript for creating dynamic
elements and enabling interactions with the user. This also serves
as an introduction to the common syntax for conditional statements,
variable declarations, looping, and branching. This chapter completes
the front-end development of the Web site and transitions into con-
siderations for back-end Web application development. The jQuery
library of functions for creating complex JavaScript effects across
browsers is also introduced in this chapter, including instructions on
installing the library to a site, linking it to a page, and implementing
its functionality.
Chapter 7 introduces both PHP and Perl for developing back-end
code for Web applications. It gives an overview of both programming
languages, with the goal of focusing on common tasks needed for inter-
activity and processing user input through forms or JavaScript sub-
 missions. This chapter includes instructions for emailing from both of
these server-side languages. In order to complete the activities for this
chapter, you will need Web hosting that supports one or both of them.
Ideally, the hosting solution you choose will also support MySQL for
completing the case project in its entirety. GoDaddy.com basic hosting
is recommended for this project, as it meets all of these criteria at a
relatively low cost.
Chapter 8 introduces MySQL, the most commonly used open
source database software, for data management and storage. This
includes an introduction to databases and the SQL database language.
The PHP toolkit is used for accessing, storing, and modifying data for
use in a Web application. The case project is completed in this chapter
with the storage and retrieval of information from the interactive form
developed for the site.

Chapter Structure
Each chapter is structured so as to provide you with an overview
and best practices for one component of creating a complete Web site
from the front-end design to the back-end programming. The chapters
contain hands-on activities both in the text and as standalone chal-
lenges to help you master the material. A case project is given as an
example for you to follow and expand on. Two additional projects are
presented to reinforce the material and allow you to practice it with
different objectives. A knowledge check is provided to allow you to test
your comprehension of the chapter. Answers to select odd-numbered
questions are provided at the back of the book. Additional exercises
and discussion questions are presented to help you further explore the
concepts in each chapter.

Code Notation
Some lines of code are longer than the lines of text in this book.
Whenever you see a  symbol in the code, the line immediately follow-
ing it is a continuation that should be on the same line in your actual
code. In HTML this is not important but in formal languages it is

x i v — Introduction
necessary to keep all of the code on the same line. The code snippets
on the companion DVD contain the code in the correct lines for use.
Student Resource DVD
The textbook provides a DVD inside the back cover that includes
resources and sample video tutorials for the student. This DVD
includes all of the files needed to complete the chapter exercises within
the text. You will also find a repository of high-resolution images from
the chapters and companion Excel template documents for using com-
mon functions effectively. There are also student resources with addi-
tional project samples and videos for each chapter, as well as video
tutorials, on the companion Web site for the book(authorcloudware.
com).

Instructor Resource DVD

The instructor DVD contains the solutions for all of the exercises
and knowledge checks, along with PowerPoint presentations for each
chapter (authorcloudware.com).

Introduction — x v
Acknowledgments
Theodor Richardson:
I am very proud of the book that you now hold in your hands, and
I want to thank you for choosing it over others. Web design has been
a passion of mine and a profession for decades now, and I am pleased
to share what I have learned with you. This book is the result of the
combined creative forces of everyone who has worked to make it pos-
sible, and I want to offer my sincere thanks to them all, whether we
have met or not. I want to thank Katie Kennedy for her continued sup-
port, patience, and understanding as well as for her unprecedented
ability to make café lattes instantly as needed. I also want to thank
my grandparents, Leonard and Sylvia Ullom, and my parents, Dan
and Deborah Richardson, for giving me such a wonderful upbringing
and perpetual support and for helping me to capitalize on the oppor-
tunities that have led to my lifelong dream of seeing a book of my own
creation in print. I would like to thank my publisher, David Pallai,
and my co-author and friend, Charles Thies, for seeing another project
through to completion. Last, and certainly not least, I want to thank
you, dear reader, for your support.

Charles Thies:
I certainly have many people to thank who have made this project
possible. We have been writing now for a couple of years, and I would
like to thank my beautiful wife, Lea, and my sons, Matt and Will, for
their patience and support throughout. I would like to extend a special
thank you to my friend and co-author, Ted, for all of his guidance and
support throughout the project. A very special thank you to all of the
people we know worked to make this textbook possible but we never
met. Finally, a very special thank you to the students and professors
who have adopted this book; you are the reason we are always think-
ing about new ways to present material in the best format so that you
will be prepared in your field of study.
 CHAPTER

1
Web Design Basics
I N T HI S CHAP T E R

This chapter presents an introduction to the basic concepts

of Web design. This includes an introduction to the World
Wide Web (WWW), including a brief history and an overview
of how resources can be interlinked via a Uniform Resource
Locator (URL). You will also start to practice creating and
opening HTML files, the basis of the interconnectivity of
the World Wide Web, and explore some preliminary designs
for the two core projects of the text, as well as principles
that you can use for your own projects later. Once you have
completed this chapter, you should be able to:
● D iscuss the history of the World Wide Web
● I dentify the components of a URL and
understand interlinking of Web documents
● C onstruct a new HTML document and open it
in a Web browser
● C reate a preliminary design for your Web site

1.1 INTRODUCTION TO THE

WORLD WIDE WEB
The Internet is a vast interconnection of networks that spans the
world and allows computers to communicate from any point on the
 globe to any other point on the globe that shares a connection to this
vast complex network. The Internet of today grew from an initial inter-
connection of United States government servers under a project called
ARPANET and has expanded across the globe. From the user perspec-
tive, the Internet is most recognizable from the services that it offers;
these services prominently include e-mail and the World Wide Web.

The Internet is a global interconnection of networks made up of

hardware devices, such as personal computers and servers, which supports
communication between different computing devices using an addressing
DEFINITION
scheme known as Internet Protocol (IP).
The World Wide Web (or Web) is a service that runs on the Internet to
provide access to documents, audio, and video and allows the interconnection
of these documents through the use of hyperlinks.

The World Wide Web (commonly abbreviated as “the Web”) is

a service that runs on the Internet to allow users with an Internet
connection to access publicly available documents that are shared by
organizations and individuals. It is the most common application on
the Internet and is most likely what people have in mind when they
think of the Internet.
In the 1980s and 1990s, Tim Berners-Lee, a physicist working as
a contractor at CERN (Conseil Européen pour la Recherche Nuclé-
aire, which translated from French means European Organization for
Nuclear Research), developed what is now known as the World Wide
Web through a variety of projects. Berners-Lee had a grand vision for
a system that could link information through a “web” of interconnec-
tions between documents across different computers.
These interconnections between resources were called hyperlinks
and acted as a way of managing and sharing information among
individual nodes, documents, and machines. The hyperlinked docu-

2 — Multimedia Web Design

ments contained text and hyperlinks and became known as hypertext
documents; this is the same as a Web page today, though they have
become much more sophisticated and have integrated a number of
other scripting and programming languages and technologies.
Tim Berners-Lee developed the Hypertext Transfer Protocol (HTTP),
which would essentially allow a user to click on one of these hyperlinks
to easily move from one hypertext document (or later, Web page) to
another using an interpreter program that is called a Web browser; the
early Web browser that he wrote was called WorldWideWeb.
This system allowed resources to be accessed by remote machines
that were interconnected via shared network protocols. Using the back-
bone of the Internet, HTTP and the resource access and hyperlinking it
enables have allowed the Web to expand into daily use on desktop com-
puters, servers, laptops, and mobile devices. Web pages are individual
documents that are stored on Web-enabled servers (or Web servers),
which contain hyperlinks to other Web pages, documents, and applica-
tions. A set of interrelated Web pages is called a Web site.
As the power of computers has grown, Web browsers have
expanded in capability from simple document retrieval and display to
media-rich interfaces that can act as robustly as a standalone appli-
cation installed on a computer. However, the core principles of this
system remain and will be the focus of this first chapter.

A Web site is a collection of Web pages, documents, audio, and video that
is stored in a location such as a Web server and can be accessed by a unique
address determined by a Uniform Resource Locator (URL) value. DEFINITION

A Web server is a repository that contains all of the files and folders for
a Web site and provides remote access to them via various protocols such as
HTTP and File Transfer Protocol (FTP), over the Internet.
A Web browser is a software application used to search, navigate, and
retrieve information and data from the Web.

C h a pt e r 1 — We b D e s i g n B a s i c s — 3
 1.1.1 Web Pages and Web Browsers
A Web page is a document designed for interpretation in a spe-
cialized application called a Web browser. Modern Web pages have
evolved from the simple concept of linking text documents to each
other via hyperlinks to an interrelated set of scripting and program-
ming languages that operate to provide a complex display capable of
providing rich, media-driven experiences for a user. Web pages use
a base language called Hypertext Markup Language (HTML), which
provides a means of complex media display and delivery along with
simple text inclusion. The file type of a Web page is .htm or .html.
A Web browser is a user application that retrieves Web pages and
interprets them for display on a user’s machine. The Web browser dis-
play is known as a WYSIWYG display, for “What You See Is What
You Get”; each Web browser will interpret the HTML code differently,
so content may not display the same way on different browsers. There
are a variety of Web browsers available for use.

Because of the differences in display, the World Wide Web Consortium (W3C)
has set standards of behavior and display for Web-based languages such as HTML
and Cascading Style Sheets (CSS). You should bookmark www.w3c.org
on your most commonly used Web browser as a reference for usage whenever
you are in doubt about the behavior and application of a Web-based language
NOTE component.

The most common Web browsers in use today are Microsoft Inter-
net Explorer, Mozilla Firefox, Google Chrome, and Apple Safari. The
global statistics on browser use (as determined by statowl.com) can be
seen in Figure 1.1. The use of the different browsers varies by region.
Internet Explorer is the primary browser used in North America,
whereas Google Chrome has the largest use in Asia. Mozilla Firefox
is the most used browser in Europe. Apple Safari has seen increased
usage in recent years because of its integration with the Apple iPad.

4 — Multimedia Web Design

At this point, it is safe
to assume that support-
ing Internet Explorer,
Mozilla Firefox, Google
Chrome, and Apple
Safari will allow your
site to reach nearly any
audience set you desire.
The four most com-
mon browsers can be
downloaded for free. It
is recommended that FIGURE 1.1 Global Browser Usage Statistics
you have at least three of
them installed on your computer for testing purposes as you begin to
design and develop more complex Web pages and applications. The
most common Web browsers can be downloaded from the following
sites:

ACTIVITY 1.1 – WEB BROWSER INSTALLATION AND

UPDATING
As you go further in the chapter, you will start to plan two course projects. ACTIVITY
You will need to test these on multiple Web browsers to ensure compatibility.
To prepare for this, you should make sure you have at least Internet Explorer
(www.microsoft.com) and Firefox (www.firefox.com) on a Win-
dows machine and Safari (www.apple.com/safari) and Firefox
(www.firefox.com) on a Mac OS machine. You can use the indicated
homepages for each of these software tools to download the respective software
or update the Web browsers you already have installed to the latest version.

• Microsoft Internet Explorer (IE): This browser is a Win-

dows OS–exclusive browser designed to integrate more fully
with the Windows desktop environment. IE contains ActiveX
technology, which can allow it to function in a more robust
manner and provide greater depth of content on Windows
machines; scripting for ActiveX requires separate consider-
ations from those of normal Web design and development for

C h a pt e r 1 — We b D e s i g n B a s i c s — 5
 general use. IE can be downloaded from the Microsoft
homepage at www.microsoft.com.
• Mozilla Firefox: This browser is compatible with the Win-
dows, Mac OS, and Linux operating systems, as well as some
mobile devices (as an app). It can be downloaded from the
homepage www.firefox.com.
• Google Chrome: Chrome is a browser that has recently
gained market share. It is compatible with multiple
operating systems and integrates with Google’s other online
services, such as Google Docs. It can be downloaded from
www.google.com/chrome.
• Apple Safari: Safari is the default browser for Mac OS and is
directly integrated with Apple iOS devices, including the iPad.
A version of Safari is also available for Windows. You can
download Safari from www.apple.com/safari.

One of the browsers you should seriously consider having on your computer for
testing is Mozilla Firefox. It includes a Web Developer tool (accessible directly
from the Firefox main menu), which will assist you in evaluating your HTML
PROFESSIONAL
TIP code, CSS commands, and JavaScript execution. If you are unsure why your
page is not working or displaying properly, opening it in Firefox and using the
Web Developer tools Web Console and Error Console can save you a significant
amount of time debugging your page or application.

1.1.2 Hypertext Markup Language (HTML)

A Web page is written in the language of the Web, Hypertext
Markup Language (HTML). HTML files are made up of text and
formatting commands called tags. The tags of HTML can be used to
format the text in the page and to establish page structure. Without
any tags, HTML pages act like continuous lines of text, breaking at
the boundaries of the Web browser window. (This is similar to their
behavior in text editors like Microsoft Word when no formatting is
applied). The HTML tags allow this flow to be changed and formatted
to create complex pages with clearly delineated visual elements.

6 — Multimedia Web Design

HTML 5 has deviated from strict adherence to SGML, but the tags and rules that
have carried over from prior versions of HTML (such as HTML 4.01) still operate
under SGML rules and constraints. This deviation in structure will be covered in
NOTE
later chapters, but you should concentrate on structured HTML to help you learn
good habits as you begin using the language.

HTML is a highly structured

language. Its rules and form are
defined by the structure of its par-
ent language, Standard Generalized
Markup Language (SGML). HTML
is a sister language to eXtensible
Markup Language (XML), which
is used for data transmission and
interoperability. This is the reason
for the commonality in tag format FIGURE 1.2 Hierarchy of Markup
Languages
between HTML and XML. You can
see this hierarchy visually in Figure 1.2.
The tags in HTML are signified by angle brackets (the less than and
greater than symbols) wrapping the name of the tag, such as <title> to
signify the title tag. You can view tags in HTML as on and off switches.
Anything that is turned on must be turned off. To turn off a tag, you
would use a slash before the name of the tag between the less than and
greater than symbols, such as </title> to signify the end of the title.
Any text included between the initialization tag and the end tag will be
formatted according to the behavior of the tag. For example, the HTML
code <title>My Page</title> would make the page title “My Page” in
the Web browser in which it is displayed. HTML is interpreted by the
browser, and the application of the tags for formatting the document
depends upon their placement in the page. You will discover the rules
and specifics of HTML tags as you continue through the text.

C h a pt e r 1 — We b D e s i g n B a s i c s — 7
 HTML is case insensitive, so the tag <TiTLE> and the tag <title> will behave
in the same manner. But according to W3C, the HTML tag names should always
be in lowercase letters, so that is the convention you should adopt.
NOTE

1.1.3 Uniform Resource Locator (URL)

Web resources are identified by a Uniform Resource Locator
(URL). This is a pathway that establishes the server and file that the
Web browser is attempting to access on behalf of the user. You can see
a sample breakdown of the pieces of a URL in Figure 1.3. The URL
is entered into the address bar of the Web browser to establish a con-
nection to the specified resource. URLs cannot include blank spaces
(Whenever you see “%20” in a URL, it is the browser attempting to
reconcile a blank space in the path.)

FIGURE 1.3 Example Breakdown of a URL

The individual pieces of the URL

http://www.example.com/files/mypage.html are as follows:
• First, http is the protocol. A protocol is a set of messages
coupled together to transmit information in a way that both
the sender and receiver can understand. The common proto-
cols you may see for Web use are http (used for connecting to
a Web resource), https (the secure version of HTTP), ftp (File
Transfer Protocol, used for uploading and downloading files),
and mailto (used to invoke the default e-mail program).
• Next, the colon (:) separates the protocol from the input com-
mand. The input command is the rest of the URL information
after the colon.

8 — Multimedia Web Design

• The two slashes (//) signify that contact to a server should be
established.
• The next section is the Web server identification (which is also
called the hostname); in this case it is www.example.com. This
specifies a unique Web server to which the Web browser will
submit a resource request. Alternatively, you may see a set of
numbers separated by period characters, such as 128.163.1.1;
this also uniquely identifies a server by its Internet Protocol
(IP) address. The humanly readable text is a convenience for
users that connects to a numerical server address.
• Within the Web server identification, the www signifies the
server that should be listening for a request from the protocol.
The www can be omitted in almost all cases because it will be
assumed by default. Other text may precede the domain name,
representing subdomains (such as videos.example.com, in
which videos is the subdomain).
• The text example.com is the domain name. This is uniquely
bound to a preset folder on a Web server by whoever owns the
domain.
• The text com is the Top-Level Domain (TLD), the top level in
the domain hierarchy; it assists in uniquely identifying server
names. There are only a limited number of these in existence,
though more are being created as the old ones are exhausted.
Common TLD names include com (for commercial use), org
(typically for non-profit organizations), edu (for educational
use), and gov (for government Web sites).
• The rest of the address is used to locate local resources on
the specified Web server. The files portion of the address
represents the file structure (called the file path) beyond the
main folder of the location within the Web server. Multiple
subfolders can be identified as part of the file path (such as
media/videos, in which videos is a subfolder of media and
the media folder resides in the main folder identified for the
Web server identification).
• The final portion of the URL is the filename. In this case, it is
mypage.html. This identifies the specific resource that the
Web browser is requesting from the Web server. Most of these
filenames will be HTML files with an extension of .htm or
.html.

C h a pt e r 1 — We b D e s i g n B a s i c s — 9
 When there is no filename specified, the server will look for either
index.htm or index.html. For this reason, you should always name the
homepage of your site either index.htm or index.html so the server can
NOTE
find it immediately with a reference to the containing folder. This will be reiter-
ated throughout the project planning, but you should make note of it now.

1.2 HTML PAGE CONSTRUCTION

HTML pages are written in text, and they act the same way no
matter which program is used to write them. You will experience
some of the different design tool options in the next chapter, but no
matter which one you choose, the code that results will be the same
format and can be opened in any Web authoring or text processing
program. The simplest program to use when writing HTML is a plain
text editor, like Notepad on Windows or TextEdit for Mac OS. Any
program that saves plain text files (as .txt) can be used to create an
HTML document.

More complex word processing programs, like Microsoft Word, can create
HTML, but their use is not recommended. You must be careful with how you
save your files on these programs to avoid formatting code in your document
NOTE
in a language other than HTML and extraneous code added by the editor. You
should make sure that the Type field of the Save As dialog box says either
“Text” or “Plain Text” before you complete the save operation.

Every HTML page has the same basic structure. It includes an

initial <html> tag to signify that HTML formatting rules should be
applied by the browser; this must be turned off at the end of the page
with an </html> tag to close the document content. Inside the HTML
page are two main parts, the head and the body.

10 — Multimedia Web Design

The recommended text editor to use for HTML creation is Notepad++; it runs on
any operating system and can be downloaded (for free) either as an executable
file or as source files that can be compiled for your specific machine. The benefit
PROFESSIONAL
of this program is that it identifies tags in your document with highlighting after TIP
you have saved the page with an HTML extension (either .htm or .html). It can
also identify code in other programming languages, such as JavaScript and PHP,
which you will use as you start to develop more complex Web pages and Web
sites. Even when you start using design tools for your HTML pages, Notepad++
is a beneficial tool for editing and error-checking HTML and embedded code.
Notepad++ is available from the Web site notepad-plus-plus.org.

The head is signified by the <head> tag and closed by the </head>
tag. This section is used for configuration information and non-dis-
playing elements. The only portion of the head that displays in the
browser is the title. This is where you will place your CSS styles and
interlink external resources as you add complexity to your pages.
The body is signified by the <body> tag, which should be placed after
the closing </head> tag. The body is where all of the content should be
placed that you want to display in the browser window. The body must
also be closed with </body> before you close the HTML tag with </html>.

ACTIVITY 1.2 – CREATING A TEMPLATE PAGE AND

PROJECT FOLDER
For this activity, you will create a folder to house your projects for this textbook ACTIVITY

and create a template file for your HTML pages. First, choose a location on your
computer and create a new folder called “WebProjects” (with no spaces in the
name; you should not include spaces in any folder or filenames used for the Web).
You will create new folders inside of this folder for the activities and projects
throughout this text. Housing everything in the same folder structure will help you
when linking documents together and invoking resources within your pages.
Using the page outline given below, open a text editor and type the page struc-
ture into it, from the <html> tag to the </html> tag. You should save this file as
template.html inside the WebProjects folder. This will allow you to
create a new page by opening this file without the need to retype this structure.
You should follow along with the remaining parts of this chapter to expand your
template file to include the additional elements needed.

C h a pt e r 1 — We b D e s i g n B a s i c s — 11
 The complete structure for an HTML page with the head and body
elements included is as follows:
<html>
<head>

</head>
<body>

</body>
</html>

You can use this as a guide for placing your content and resources.
There are additional elements that are common to all HTML pages
that you will explore in the next few sections. These include the docu-
ment type (doctype) declaration and page title.
1.2.1 The Doctype Declaration
A Doctype Declaration (DTD) is an instruction to the browser spec-
ifying the type of content the browser will encounter in the page. The
need for a DTD is based on the different versions of HTML that can
be used in a page and the widespread inclusion of XML documents on
the Web. A DTD tells the browser how to interpret what follows in the
page.

Some Web browsers are more forgiving of errors than others. For example, Firefox
allows you to open a page that does not include a DTD, but you should never
depend on this forgiveness, as it can cause compatibility issues in other browsers.
NOTE

There are a variety of DTD values that you may encounter, but
the two DTDs you will likely need to use most often are for HTML 5
and HTML 4.01. Eventually, you should construct all of your pages in
HTML 5. The command for a DTD is <!DOCTYPE>; this is in upper
case because it is a browser instruction, not an HTML tag.

12 — Multimedia Web Design

 The DTD you should use for HTML 4.01 is:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transi-
tional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
There are different DTDs for HTML 4.01, but the “loose” specifi-
cation from the example is more forgiving and allows the use of pre-
sentational content and deprecated tags (tags that were once part
of the standard but have been retired). Ideally, you would use the
strict DTD, but it is more difficult to determine errors as a begin-
ner, since the errors may simply be omitted from the browser con-
tent. The words and strings (denoted by quotation marks) following
the word DOCTYPE inside the tag are called attributes; you will
encounter attributes frequently as you expand your understanding
of HTML. Attributes are always separated from the tag name by a
blank space.
The DTD for HTML 5 is simpler, because it is not a derivative of
SGML. The DTD for HTML 5 is as follows:
<!DOCTYPE html>
The DTD tag for a page does not have an end tag like most
HTML tags and does not have to be closed. These tags are also case
insensitive, like other HTML tags, but convention dictates that they
should be capitalized. The page structure with an HTML 5 DTD is
as follows:
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

C h a pt e r 1 — We b D e s i g n B a s i c s — 13
 ACTIVITY 1.3 – ADDING DTDS TO THE TEMPLATE PAGE
For this activity, you should open template.html in the text editor of your
ACTIVITY choice and add a DTD declaration before the <html> tag. Be sure to save your
file when you are finished.

1.2.2 Adding a Title

The next element that should always be included in an HTML
page is a title. A title is added inside the head using the <title> and
</title> tags. Whatever text is typed between the opening and closing
tags will be treated as the page title by the browser. For instance, to
call a page “My Page Title,” you would use the following code inside
the head of the file:
<title>My Page Title</title>
The complete code for the page with a title included is:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
</head>
<body>

</body>
</html>

ACTIVITY 1.4 – ADDING A TITLE

For this activity, you will add a placeholder for your page title in your tem-
ACTIVITY plate.html file. Make sure you place the <title> and </title> tags within the
head of the HTML document. You can use “My Page Title” as your placeholder
value, but you will need to change this for each page you create. Be sure to
save your file when you are finished.

14 — Multimedia Web Design

1.2.3 Adding Content
The content of your page that you want to display in the main win-
dow of the Web browser is placed inside of the body (between the <body>
and </body> tags). You can type plain text in this area and it will dis-
play in the Web browser window using the default font and format for
the browser. Without any formatting, the text may appear differently
on different browsers. Almost all of your page development will be for
the body of the document, since this is what your audience will see. Only
the title, meta information about the page, JavaScript code and CSS
formatting will be placed inside the head of the document.

ACTIVITY 1.5 – HELLO, WORLD!

One of the first programming activities in any language is to create a program
to print the text “Hello, World!” on the screen. This has become a computing ACTIVITY
tradition that you will continue in this activity. Fortunately, displaying text is very
simple once you have the HTML page structure complete. For this activity, you
should open the template.html file in a text editor and save the file as
hello.html inside the WebProjects folder. Change the title of your
HTML page (the content between <title> and </title>) to the text “Hello, World!”
and add the text “Hello, World!” to the page inside the body of the document
(between the <body> and </body> tags).

1.2.4 Adding a Hyperlink

One of the key features of using hypertext is the ability to link a
document to other resources and documents. To do this, you can cre-
ate a hyperlink (or link) inside your HTML document. The tag that
you will use to create this link is the anchor tag, denoted <a> in HTML.
Link text will (by default) be colored blue and underlined. You can see
an example of linked text compared to regular text in Figure 1.4.
The text between the opening <a> tag and the closing </a> tag
will be the highlighted text that appears in the browser window. For
example, in Figure 1.4, the text between the <a> and </a> tags is
“This is a link.”

C h a pt e r 1 — We b D e s i g n B a s i c s — 15
 FIGURE 1.4 Linked Text

In order to set a destination for the link (the resource to which

the Web browser will connect when the link is clicked by the user),
you must use an attribute inside of the <a> tag. This attribute is
the hyper-reference attribute, abbreviated href. The attribute href
requires a value; this creates what is called an attribute/value pair.
The code for this is:
<a href=”destination”>This is a link.</a>
The text “This is a link.” can be changed to any text. Similarly,
the text “destination” should be replaced with the actual URL of the
resource that is to be accessed. There are two types of URL referencing
that are accepted by the href attribute:
• Global Referencing: This type of reference specifies the com-
plete URL for a resource. For example, you could link to the
Google homepage with the following code:
<a href=”http://www.google.com”>Google HomePage</a>

• Relative Referencing: This type of reference specifies a

resource based on its location relative to the current page. For
example, if you had two pages in the same folder named page1.
html and page2.html, then you could link to page2.html inside
page1.html with the following code:
<a href=”page2.html”>Page 2</a>
You do not have to add any attributes to a closing tag; all of the
attribute/value pairs should be contained in the opening tag.

16 — Multimedia Web Design

 ACTIVITY 1.6 – CREATING A LINK
For this activity, you will enhance the hello.html file to add a link from the word
“World” to the homepage of Google Earth. To hyperlink the word “World” in the ACTIVITY
body of the document, you should first wrap it in the <a> and </a> tags. The
href attribute of the <a> tag should point to the URL www.google.com/
earth using the http protocol. The content of your body should be as follows:
Hello, <a href=”http://www.google.com/earth”>World</a>!
Make sure to save your work when you are finished.

1.2.5 Page Testing

Once you have made changes to an HTML page or created a new
one, it is always a good idea to test it in a Web browser. If you have a
default Web browser set for your computer, the easiest way to test the
document is to double-click the icon inside of the WebProjects folder.
Since the document type is HTML, it will open in a Web browser
instead of a text editor. If you do not have a default Web browser set
for your computer or you wish to test the file in a different browser, you
can right-click the icon and select Open with and choose the browser
you want to use to open the file.

In Firefox, you can select the Firefox menu, choose New Tab, and then
choose Open File to select an HTML file you want to open on your local
computer.
NOTE

The browser will interpret the page content for display and show
it in the browser window. You can see an example of this in Figure 1.5
for the hello.html page you have created through the activities in this
chapter. You should open this file in your own Web browser of choice
to see how the results of your work are interpreted.

C h a pt e r 1 — We b D e s i g n B a s i c s — 17
 FIGURE 1.5 Testing an HTML Page

From the figure, you can see where the different elements of the
page translate in the browser. The title of the page will be located in
the top part of the browser interface. The main browser window is
where the body of the page is displayed. The address bar will display
the URL of the file. In this case, it will begin with file://C:, because
it is using local file access on the C drive of your machine. (A differ-
ent letter may display if you have selected a different default storage
drive.)

1.3 PRINCIPLES OF WEB DESIGN

Now that you have an understanding of the basic mechanics of
constructing and testing a page, you should pause to consider how
you will design and structure your HTML pages individually or for an
entire Web site. When you create pages for the Web, you are creating
a complete visual interface that is more dynamic than print and more
interactive than slides or videos. You need to keep this interactivity in
mind and consider the flow of information through your page. There
are basic principles you should consider for even small projects and

18 — Multimedia Web Design

 individual pages of content. Applying these will ensure that you con-
struct an appealing presentation for your viewers, which is one of the
most critical aspects of creating effective Web pages.
1.3.1 Page Layout and Real Estate
By default, the content of a Web page will display from left to right
in a continuous line until it hits the end of the browser window, at
which point it will continue in the next line down back at the left mar-
gin. There are techniques for dividing up the page into more man-
ageable sections (such as using tables and using positioning style
commands). When you consider where elements should be placed on
your page, you should consider the importance of the location on the
page (commonly called “real estate”) where you will place them.
The upper left-hand corner is considered your most valuable real
estate. This is the portion of the page that the viewer will see first,
which is why it is considered the most valuable. This is also the rea-
son most logos are placed in the upper left-hand corner of a Web page.
Above all, you want your viewer to be able to identify the site and its
ownership on sight. There is no set demarcation for the primary real
estate of a page, but you should not assume it extends further than
25% of the horizontal or vertical space of the page.

According to W3C, the common browser display size is now 1024 pixels by
768 pixels. This means you can plan a site for this size and assume that 98%
of your viewing audience will be able to see the site in a single window without NOTE
scrolling.

The secondary real estate of a page extends in two directions. Any-

thing to the right of the primary real estate is considered secondary
real estate. This is because most viewers will be able to see this space
without scrolling, which makes it second only to the upper left-hand
corner for visibility and accessibility.

C h a pt e r 1 — We b D e s i g n B a s i c s — 19
 The other area of secondary real estate is from the bottom left-
hand corner of the browser window up to the primary real estate.
The entire left-hand side is not considered secondary real estate,
because part of it may not be visible without scrolling. When you
plan your site, you want to make sure any left-hand menu content
does not require the user to scroll down on the page, or they will
likely not see those menu items.

Users will not scroll a page unless they are vested in it by interest in something
it contains. There is almost no possibility of their finding content hidden past
the standard browser size of the page unless it is related directly to content
PROFESSIONAL
TIP presented on the visible part of the page that prompts them to explore further.
You always want to make sure your menu and branding information fit within the
standard browser size, so you do not have to rely on user scrolling and explora-
tion for them to be able to navigate through your site.

The space beyond these two areas is what is typically desig-

nated for the content of the page. This is the tertiary real estate.
In a complete Web site, this is the only area that should be altered
from page to page, in order to establish consistency. Additionally,
you should not require a user to scroll down on the page more than
once (if at all). Users are unlikely to scroll more than once on a
page and remain on the page. You can see a complete breakdown
of these regions of a Web page in Figure 1.6.

FIGURE 1.6 Real Estate of a Web Page

2 0 — Multimedia Web Design

1.3.2 Considering Purpose and Audience
The two most important aspects to consider when creating either a
single page or a complete Web site are the purpose of the site and the
intended audience. These two elements will vary drastically by project,
but establishing them early will prevent you from having to redesign
the site later.
The purpose of your site is something you should be able to sum-
marize in one sentence at most. This should be your key idea behind
every decision later in constructing the site. For a personal site that
advertises your skills and history, the purpose may be “to showcase
your skills and accomplishments in a visually interesting way.” You
can then ask design questions against this core goal. For instance, if
there is an element you are not sure you should include, you can ask,
“Does this element showcase my skills and accomplishments in a visu-
ally interesting way?” If the answer is yes, then it should be kept. If
not, you need to rethink how to integrate that information or whether
to include it at all.
The audience is another essential consideration. You should deter-
mine who will be viewing the site and what impression you want to
give them. For instance, a military site filled with cartoon characters
and bright colors will likely not be taken very seriously. Similarly, a
site intended for children that contains nothing but black text on a
white background will not grab the attention of your audience and
will likely never be viewed again. You have to consider the tone of your
site when deciding how to present your content. Knowing the audi-
ence you wish to address should help to set that tone. The question
you can use to test your design ideas against your audience is “Will
my audience react well to this design element?” According to research
done by the Stanford Web Credibility Project, the professionalism and
coherence of a site are among the most influential factors in a user’s
believing in the credibility of the site and its content.

C h a pt e r 1 — We b D e s i g n B a s i c s — 21
 According to a study by CBS News (cbsnews.com), users spend an average
of 33 seconds on a single Web page. They also form an opinion of the page within
approximately 8 seconds. That means you have approximately 8 seconds to entice
PROFESSIONAL
TIP
them to stay and 33 seconds to interest them in your content. Your design should
be what gives them a favorable impression within the first 8 seconds, and your
content should be what retains them past 33 seconds.

1.3.3 Typography and Font Selection

Typography is the process of arranging letters in a specific
arrangement to make language readable. This was once a specialized
occupation, but with the advent of personal computing, typography is
something in which everyone who types a document participates. The
typeface, size, and spacing of the letters are all contributing factors
in typography; these are all choices that are made in composing any
visual document, including Web pages.
A typeface is a collection of symbols that form an alphabet; each
typeface has its own unique style of display, such as the typefaces
Times New Roman and Arial, two common typefaces installed on most
machines. It is very likely that you will see typeface confused with the
term font (as in the case of CSS), since they are almost synonymous.
A font is actually a combination of a typeface and a size, so 10-point
Arial is a font. With the advent of digital typography, the selection of
a font is typically separate from the sizing, making the choice of type-
face and that of the font virtually indistinguishable.

Typography is the process of arranging letters and punctuation to create

a readable outcome in any document. Most typography is done for artistic
reasons, but readability and clarity should be primary concerns in any
DEFINITION
typography effort.
A typeface is a complete set of keyboard characters in one particular style.
(The style is the name of the typeface.) Most typefaces support standard sizes,
as well as bold and italic variants.

2 2 — Multimedia Web Design

Exploring the Variety of Random
Documents with Different Content
 Frank could not very well understand it, as it was a dialect of the
Spanish tongue.
But the ranchero seized Frank’s arm now, and drew him toward
the adobe building. The young inventor could not refuse.
 CHAPTER III.
THE TREACHEROUS RANCHERO.

“You are my guest, senor,” declared the ranchero. “I shall bewitch

you with my wine. There is not better in the Laredo vineyards.”
“Indeed, I am in your debt very deeply, senor,” replied Frank, “but
pardon me, but is not that good water in yonder spring?”
“It is; but first the wine.“
“Very well; yet will you allow us to take some of it aboard the
Steam Man?”
“Si, senor, with pleasure,” replied the polite ranchero; “take all that
you would care to of it.”
Frank turned and motioned to Barney and Pomp.
They took the hint at once and moved the Man up to the spring.
In a few moments they had the hose out and were pumping the
water with all haste into the Steam Man’s boilers.
Frank with this followed the ranchero into the adobe building.
In the interior it was scarcely more inviting than outside, but the
hospitable ranchero offered Frank a seat.
The young inventor accepted it.
It was a small chair near a window, through which Frank could
easily see what was going on in the yard.
“Pardon, senor!” said the ranchero, affably, “but may we not
exchange names? I am Don Juan de Casnova.”
 “And I am Frank Reade, Jr.”
Frank was sure that the other gave a queer start and changed
color a bit. But if so he was quickly recovered.
For smilingly he said:
“Senor Reade, I shall drink to your health.”
Then from a closet near the ranchero produced a quaint old flagon
and some silver drinking mugs.
Into this he poured some of the richest wine that Frank had ever
seen.
“This is better than pulque, senor,” declared Don Casnova with a
smile. “Drink to success.”
“Amen!” said Frank.
He took a draught of the wine. It was rich and gratifying to his
taste.
He drained the glass.
“Another, senor,” insisted Casnova.
Frank could not refuse. The wine warmed him and made him feel
invigorating.
De Casnova seated himself opposite Frank and opened a
conversation.
“Pardon my curiosity, senor,” he said, politely, “but it is a natural
question to ask the mission of one traveling across the country as
you are. Is it a secret?”
Frank hesitated a moment.
His better sense told him the danger of making a confidant in this
wild region.
Acting on impulse, he replied:
 “I am out here in quest of a gold claim, near Los Pueblos.”
“Caramba!” exclaimed the ranchero, with a start. “Is it a rich one?”
“It is so reported.”
“I have heard of gold about Los Pueblos, but I have heretofore
regarded it as a myth.”
“It has been established a certain fact, I believe.”
“Indeed! I should like to see that claim.”
Frank was silent a moment.
There was a question uppermost in his mind which he desired
strongly to ask the other.
But he was in doubt as to the safety of doing it.
Finally, after the conversation had turned upon different topics, he
ventured to say:
“Pardon me, senor, but is there in these parts a man named
Miguel Costello?”
The ranchero gave a start.
An odd, startled light came into his eyes. But he evinced
trepidation only a moment.
“Si, senor,” he replied; “I have heard of him.”
“What sort of a man is he?”
It was a direct question, but Frank believed it the best under the
circumstances. The ranchero idly pulled at his cheroot, and gazing at
Frank languidly through half-shut eyes, replied:
“Well, senor, I think it not good taste to speak disparagingly of a
man’s character. Yet Miguel is so well known that it cannot hurt to tell
the truth that he is a bad man.”
 “Indeed!”
“In fact, he is an outlaw, and if he had his just deserts would be
hung for many a dark crime.”
“Ah!” said Frank, quietly; “perhaps then you can tell me of the
unfortunate American, Harvey Montaine, who it is said has fallen into
his clutches?”
The ranchero smiled in a peculiar way as he replied slowly:
“Yes, I can tell you all about this affair, for I know Harvey
Montaine.”
“Indeed!” exclaimed Frank, unguardedly, “then he is a friend of
yours?”
“Well, perhaps so. You know him yourself, I take it?”
“Yes,” replied Frank, “he is a man of honor and of courage. Then
the report is true that he was robbed of his claim by Costello?”
“I believe that he and Costello had an argument about a
claim,”replied Casnova, quietly; “to which it properly belonged I am
not able to say.”
“It belonged to Montaine,” said Frank, decidedly.
“Ah, you know that then, do you?” asked the ranchero, quickly.
Frank’s face flushed. He had spoken too quickly.
“I know that Montaine claimed to own a rich gold claim
hereabouts,” he declared, positively. “I have no reason to doubt his
words.”
“By no means, senor,” replied Casnova, politely, “but you neglect
the wine.”
“I thank you,” replied Frank. “I can drink no more.”
“Allow me to insist, senor. It is a very fine quality.”
 “As fine as I ever tasted,” declared Frank; “but I will not drink
again.”
De Casnova sat the mug down quietly. There was a queer gleam
in his dark eyes as he said:
“Perhaps, senor, I can help you to rescue this Montaine from the
villain, Costello. In fact, I have no doubt that I can.”
“I have not intimated such to be my purpose,” said Frank, steadily.
“Ah!” exclaimed the Mexican, lifting his eyebrows. “I see you will
not trust me. But rest assured, Senor Reade, that Juan de Casnova
is an honorable man.”
“I know nothing to the contrary,” replied Frank.
He was studying a way out of the difficulty.
He felt in some vague way that he was in a complicated position
and wished to extricate himself.
He saw through the windows that Pomp and Barney had filled the
Steam Man’s boilers and were getting up steam.
Frank at that moment heartily wished himself aboard the Steam
Man.
For some reason he felt a strong distrust of Casnova. He realized
that he had committed an error in speaking of Montaine or of the
Mexican bandit.
Frank knew enough of Mexicans to be aware of the fact that they
were exceedingly treacherous and hung together famously.
For aught he knew Casnova was hand in glove with the bandit,
and feeling that this was possible Frank’s sensations can well be
imagined.
He wished himself far from the spot at that moment.
 Indeed, he had already begun to count the chances of reaching
the Steam Man alive in case he should make a break.
Casnova’s eyes were upon him intently all the while.
The villain seemed to read his purpose like a printed book.
“You will stop some days with us, Senor Reade,” said the
ranchero, smoothly. “You will find that a Mexican knows something of
the art of entertaining.”
“I am well aware of that now,” replied Frank. “I will consult with my
companions, and if they-—-”
But Casnova made a gesture of impatience.
“Senor need not do that,” he exclaimed; “they are but peons. The
senor is assuredly his own master.”
“Yes,” replied Frank, truthfully. “Yet I always confer with my two
servitors. I will give you an answer.”
Frank arose, but Casnova did the same and seemed loath to let
his guest depart.
“Ah, too much haste,” he declared, in his oily way. “Senor Reade,
you know not the ways of these parts.”
“I shall learn, perhaps,” said Frank, dryly, taking a stride toward the
door.
But before he could cross it the ranchero had seized a small
whistle from his girdle and blew it.
Several sharp notes upon it he blew.
In the flash of a second Frank realized his peril. He made action in
that same brief bit of time.
Quick as lightning he cleared the threshold and started across the
yard for the Steam Man.
 “Stop him!” yelled Casnova, in the Mexican tongue.
In the same moment six of the greasers sprang toward Frank.
The young inventor saw his peril and knew that he must act
quickly.
He drew his revolver and cried:
“Stand back, every one of you! I’ll kill the first man in my path.”
But the greasers were upon him and the pistol was knocked from
his grasp.
Only one thing favored Frank at that moment.
The greasers were all light men, and they had not reached Frank
until he was within ten yards of the Steam Man.
Barney and Pomp in the cage saw the situation at a glance.
They realized the deadly peril and were quick to make action.
Barney seized a club and rushed from the cage.
It was but a couple of leaps he needed to take to bring him to
Frank’s side.
The young inventor himself had knocked over two of the greasers
with his fists.
Barney now with his improvised shillelagh descended upon the
Mexicans like a thunderbolt.
They were utterly unable to stand up before such an attack.
Right and left the Celt dealt blows.
“Take that, an’ that, ye murtherin’ crew!” yelled Barney, excitedly;
“bejabers, if it’s a ruction yez want, here’s one fer yez.”
The greasers went down before the Irishman’s blows like logs.
 There were others coming to their assistance. But before they
could come up the struggle was over.
Barney and Frank had sprung into the cage. There they were safe
from bullets.
And these now began to fly.
Casnova furiously rushed out into the ranch yard, urging his men
on. A swarm of the greasers came for the Steam Man.
But Frank was not anxious to meet them in close combat.
He opened the throttle and let the Steam Man out.
Out of the ranch yard the Man sped, but the greasers all sprang
upon their horses and gave pursuit.
Out upon the plain went the Steam Man, pursued by the yelling
horde of greasers.
For half a mile the race was nip and tuck.
Ordinarily the Man would have distanced them, but there was but
little steam up, and progress was slow.
As it was, the greasers gained a trifle, and one of them sent his
lasso coiling like a serpent through the air.
It settled down over the Steam Man’s head and shoulders.
 CHAPTER IV.
THE PROSPECTORS.

The Mexican who had the temerity to attempt lassooing the Steam
Man had little idea of the enormity of his task.
The lariat, thrown with great precision, settled down accurately
over the Man’s head.
It reached his shoulders and there tightened.
At the moment, the Steam Man was going a thirty miles per hour
gait. The effect was thrilling.
The greaser fancied that he could bring the Steam Man’s career to
an end, even as he would that of a wild steer.
But he had reckoned without his host this time.
The Steam Man kept straight on. The Mexican threw his horse
upon its haunches, and the next moment expected to see the Steam
Man topple over.
But an astonished cowboy was the order of the hour.
The lariat tightened like a whip-cord. The little mustang’s forefeet
were braced in the soft soil of the prairie.
For ten feet the mustang slid along as if on skates.
Then over on its side it went, the cowboy falling underneath.
The dead weight of the horse was pulled twenty-five feet, when
the lariat snapped like a bit of thread.
The other greasers saw the act and were dismayed.
 Not one of them ventured to throw a lariat after that.
Pomp and Barney nearly split their sides with laughter.
“Golly, but dat was jus’ too funny fo’ anyfing!” cried Pomp,
hilariously. “Jes’ fink ob dat fool ob a greaser who ’spected he could
pull de Steam Man over.”
Steam was now got up rapidly and the Man speedily left his
pursuers far behind.
Across the plain at race-horse speed he went.
Soon the greasers were left out of sight in the rear.
It was certainly a narrow escape, and all had very good reasons to
congratulate themselves on it.
The Steam Man kept on for a couple of hours at a fair rate of
speed.
Then some high mountains began to loom up in front.
“I believe those are the Los Pueblos Mountains!” declared Frank,
positively.
“Golly! dat am good!” cried Pomp.
“Bejabers, thin we ought to be nigh the inemies’ camp,” remarked
Barney.
“Yes,” agreed Frank. “It is well for us to be on the lookout.”
The region about them was of the most bare and arid sort.
To the southward there extended a literal desert, seemingly as wild
as the famed Steppes of Tartary.
Every few steps the bones of some dead animal and occasionally
a man were encountered.
It was in fact a plain of death. No living thing adorned it, and it was
probably in time of great drought that many travelers had lost their
lives here.
The Steam Man picked its way across the plain.
Soon broad mesas of some fertility were encountered.
Then a river was encountered, which was fortunately not so deep
but that it could be easily waded.
Once on the other side the Steam Man made its way through a
rocky pass and then a surprise was accorded the travelers.
Down through the pass there came the rumble of wheels and the
heavy cracking of a whip.
Then around a curve shot a heavy mountain stage with six horses
attached.
The driver, a burly fellow, with his belt filled with pistols, pulled up
the horses with a volley of oaths.
“Thunder an’ blazes!” he yelled. “Who in perdition are ye? What
kind of a rig d’yer call that?” The Jehu sat on his box staring at the
Steam Man like one out of his senses.
Upon the box was a miner in red shirt and top boots, and upon the
top of the coach were half a dozen more.
Within the coach were a number of Mexicans, a flashily dressed
sport and a type of the genus gambler.
“A stage line!” exclaimed Frank, in amazement. “And in this out of
the way place. Who’d have dreamed it?” “Bejabers, we must be
comin’ to some koind of a settlemint,” cried Barney.
The pass was barely wide enough at this point to let the coach and
the Steam Man pass.
But the coach did not offer to move, and Frank saw the
passengers pulling their revolvers.
He comprehended the situation at a glance, and cried:
 “Hold on, friends! there’s no need of that. We are not road agents!”
“Oh, ye ain’t, eh?” thundered the burly Jehu. “Well, we’re powerful
glad to hear that. But whar in thunder did ye git that bullgine,
anyhow?”
The passengers now all crowded out of the coach.
They were consumed with curiosity to inspect this new wonder.
“Instead of a steam ingine!” cried one of the sports, “ye see,
gentlemen, we now have a Steam Man.”
“A Steam Man!” gasped several. “Well, if that don’t beat me.”
With much wonderment they proceeded to examine the Steam
Man.
Frank politely showed them the workings of the invention, and
then, with some surprise, said:
“But how do we happen to find an American stage and American
miners this side of the line?”
One of the sports gave a knowing wink and said:
“That’s all right—there’s a nice little claim over here that we’ve
been up to see. We are from Saint’s Repose, jest over the line into
the States. In course this is Mexican land, but if ther greasers don’t
get onto us, we’ll git some of that Mexican gold over into the United
States afore many days, you bet!”
Frank was astonished.
“Are we then very near the line?” he asked.
“Not more than fifty miles.”
This was most astounding information to Frank Reade, Jr.
He had already traveled a distance of full five hundred miles from
Laredo.
 “Pshaw!” he exclaimed. “If I had known that I would have traveled
all the way on United States territory.”
“Cert, stranger,” was the reply, when Frank informed them of his
course, “but then, for all that, ye came direct enough. The line bends
in here, ye know, and ye’ve come along a north-westerly course.”
“So it seems!” agreed Frank, “but are not these the Los Pueblos
Mountains?”
“Cert.” “Well, how is it that you do not run across Miguel Costello
and his gang?”
“Well, we have heerd tell of that chap a good deal. He hain’t ever
attacked us, though we’ve been lookin’ for a scrimmage with him off
an’ on.”
“Indeed!” exclaimed Frank, in amazement. “I think it very singular
then, for I understand that he is the terror of this region.”
“An’ so he is, stranger. But we ain’t goin’ to be bluffed out of our
claim for a stack of greasers as high as Shasta.”
“That’s good pluck.”
“In course, but now ye’ve axed questions, stranger, s’posin’ we
take our turn. I’m Sam Sharp, or better known as Silver Sam. Who in
thunder are you?”
Frank was not a little amused at being addressed in this bluff
manner, but he quietly responded:
“I am Frank Reade, Jr., and I am from the East.”
The sport turned around and indicated three of the others.
“That’s Bill Guernsey, our driver,” he said, referring to the Jehu;
“this gent hyar,” indicating a bloated gambler-looking man with a
prodigious diamond on his shirt front, “is Mister Jake Bolton; we call
him Diamond Jake fer short. This gent,” indicating a tall, slender
youth with a sleepy air, “is Mister Chris Blume, an’ he’s our civil an’
minin’ engineer. We’re goin’ to drive a shaft up there a mile or more
an’ he’s goin’ to do the biz for us.”
“Gentlemen, I’m all very glad to meet you,” said Frank, politely.
“The same, stranger,” said Diamond Jake, advancing and shaking
Frank’s hand.
The others all advanced and did the same.
Silver Sam, as the sport was called, did not trouble to introduce
the laborers, as the red-shirted men might have been called.
They were a conglomeration of Mexicans, half breeds and toughs.
“Well, friend,” said Silver Sam, after the introduction was over,
“what’s yer biz in these parts, might I ax?”
“Certainly,” replied Frank, “and perhaps you can give me some
information to aid me?”
“Mebbe we can, stranger. We’ll be glad to do it if we can.” “Did you
ever hear of a man about here called Harvey Montaine?”
Sharp exclamations went up and glances were exchanged.
“You can bet we have, stranger, and he’s a white man, too.”
“Harvey is a gentleman,” said Frank.
“You bet he is. He was well liked in Saint’s Repose.” “Where is he
now?”
Silver Sam cleared his throat and came nearer.
“Look here, stranger,” he said, earnestly, “are you lookin’ for
Harvey?”
“I am.”
“Wall, I’m afraid ye’ll never be able to rescue him. He’s in the grip
of that devil Costello.”
“Ah!” said Frank, grimly. “That is what I heard.”
 “It’s true enough. You see, Costello pounced down on him when
he was opening up his claim and massacred all his men. They may
have killed Harvey, too, but Costello keeps advertisin’ for a ransom.”
“The scoundrel!” exclaimed Frank.
“I’m thinking he ain’ after that,” said Silver Sam, with conviction,
“no more nor you an’ I are. It’s my ’pinyun he’s got sick of being road
agent and thinks there’s a princely fortune in that mine.”
“Well, is there not?”
“There ain’t any doubt of it.”
“Well,” said Frank, slowly and with great determination, “I don’t
mind telling you, friends, that I am in this region to spoil his game
and to rescue Harvey Montaine. I mean to do it—or die!”
“We glory in your pluck, stranger,” cried Silver Sam, warmly. “We
hope ye’ll succeed an’ we’ll help ye all we can.”
“I thank you.”
“One thing is sure. If Miguel Costello troubles us, we’ll make it
warm for him. We don’t mean to give up our claim. But as he is
twenty miles from here on another spur of the mountain-—-” Silver
Sam did not finish his speech. A thrilling thing happened at that
moment.
There was a wild, blood-curdling laugh far up the gorge, and the
next moment the crack of rifles smote upon the air.
Two of the red-shirted miners upon the top of the coach fell dead.
 CHAPTER V.
BEATING A RETREAT.

Down into the defile there came a perfect swarm of armed men.
Rough looking wretches they were, all greasers and armed to the
teeth.
It needed but a glance for any in the party to realize who and what
they were.
“All aboard!” yelled Bill Guernsey, the stage driver. “Run fer yer
lives, lads. There’s no show fer us agin that pack of imps.” There
was no doubt of this.
Costello’s gang, for such they were, fairly swarmed in the defile.
There seemed a legion of them, and the numbers were too great
for the party of miners.
Frank saw this at a glance and he turned the Steam Man about.
Barney and Pomp were instantly at the loopholes and giving the
wretches a shower of bullets.
The party on the coach were firing, and a small sized battle was in
progress.
But all clambered aboard the coach, and just in time Bill Guernsey
cracked his long whip and sent his eight horses flying down the
pass.
The Steam Man was far ahead making rapid time.
But Costello was determined not to be cheated so easily of his
prey.
 His murderous gang came thundering in pursuit. The greasers
rode like fiends and kept up a constant fire.
Down through the pass went the Steam Man.
After it came the stage-coach, and the passengers were yelling
and firing with full force.
A short while later the Steam Man shot out upon the mesas.
The coach came after and across the plain the race went.
Of course the fleet ponies of the greasers could out-foot the stage
horses.
The greasers came swarming up around the stage and it was
possible that they would have annihilated the mining party but for an
intervention.
Frank Reade, Jr., saw the danger and at once made action to
prevent it.
He turned the Steam Man making a wide circle.
Then he started out to strike the foe on the flank.
The Man rushed with full force for the party of outlaws.
They did not swerve, and the next moment the Man was among
them. The wheels of the wagon overturned horses, split the party up
and raised havoc.
Men were trampled beneath the Man’s iron feet. Horses were sent
riderless over the plain and confusion ensued.
The Steam Man followed up his advantage closely.
Right and left the outlaws were scattered. Several times Barney
drew a bead on a leader of the gang whom he fancied to be
Costello, but each time missed.
The man seemed to bear a charmed life. The Celt was disgusted.
 “Bejabers, I think I’ll have to learn how to shoot,” he muttered,
disconsolately. “It’s three times shure that I thried it an’ each toime
missed me mark.”
The stage-coach meanwhile under Bill Guernsey’s able guidance
had gained a tremendous lead.
It seemed, indeed, well out of the race.
The greasers were completely scattered. The Steam Man went
flying about the prairie picking them off by twos and threes.
Every shot fired from the cage was deadly.
In face of such a withering fire the greasers could not stand their
ground.
They broke in wild confusion for the cover of the hills.
In the open the Steam Man was too much for them.
It could have whipped an army on a plain of good size, for it could
easily keep out of the way while a most deadly fire was kept up.
In short, the Steam Man put to rout the entire party of greasers.
They fled in the wildest confusion to the cover of the hills.
But the Steam Man was all the while pounding at their heels.
In a very short time the plain was cleared.
The stage-coach was a speck upon the horizon line.
It was on its way to Saint’s Repose, which Frank reckoned was a
small mining town, of which there were many in the Rocky
Mountains.
It was now a question as to what it was best to do.
Darkness was coming on and it would be necessary to find a
camp somewhere.
 Frank had thought of keeping on to Saint’s Repose with the stage.
There he believed it would not be difficult to pick up a respectable
force of men with which to attack the greasers in the hills.
Of course the Steam Man could whip them in the open.
But the greasers could stick to the hills and no efforts would serve
to dislodge them.
It required no little thought and consideration upon Frank’s part to
decide what to do.
“Bejabers, av it was me,” declared Barney, sententiously, “I’d jist
go an up there mesilf alone and lave the naygur aboard the Steam
Man.”
“Golly! it am jes’ as easy fo’ yo’ to stay dar as fo’ me,” spluttered
Pomp. “You’se a no count I’ishman, anyway.”
“Don’t yez say that to me, naygur, or I’ll spile the face av
yez,“retorted Barney, with mock earnestness.
“Huh! jes’ yo’ try it, I’ish. Yo’ll hab yo’ han’s full in jes’ a minnit.”
“Begorra, I will thry it.”
“Jes’ cum right along.”
Barney began to roll up his sleeves.
It was likely that the two rascals would have indulged in a friendly
rough-and-tumble but for Frank.
“Come, this won’t do,” he said, sharply. “If you want to have any
skylarking, you must wait for a better time.”
Pomp made a grimace to Barney behind Frank’s back, and Barney
shook his fist at the darky.
This ended the discussion.
Frank decided not to go to Saint’s Repose.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookfinal.com