Transcript Principles of Web Design Chapter 1

Chapter 1
Variables in the Web Design
Environment
Chapter 1
Principles of Web Design
Objectives
• Describe the current state of HTML
• Understand XML, an open standard for
structuring data
• Understand XHTML, the future of HTML
• Describe how Web browsers display your
work
• Code for multiple screen resolutions
• Understand bandwidth concerns
Principles of Web Design 2nd Ed.
Chapter 1
2
Chapter 1
Principles of Web Design
HTML: Then and Now
• HTML is an application of the Standard
Generalized Markup Language
• Intended to represent simple document
structure
• Uses hypertext to link related topics
• Designed for use over the Internet
• The Web has outgrown the capabilities of
HTML
Principles of Web Design 2nd Ed.
Chapter 1
3
Chapter 1
Principles of Web Design
HTML as a Markup Language
• A markup language is a structured language
that lets you identify common sections of a
document such as headings, paragraphs, and
lists
• An HTML file includes text and HTML markup
elements
• The browser interprets the HTML markup
elements and displays the results, hiding the
actual markup tags from the user
Principles of Web Design 2nd Ed.
Chapter 1
4
Chapter 1
Principles of Web Design
HTML as a Markup Language
• HTML is an open, non-proprietary, crossplatform compatible language
• HTML is not a What You See Is What You Get
(WYSIWYG) layout tool
• HTML was intended only to express logical
document structure, not display
characteristics
Principles of Web Design 2nd Ed.
Chapter 1
5
Chapter 1
Principles of Web Design
The Need for Style Sheets
• Style sheets let you separate display
information from content
• Separating display information lets you
repurpose your content for multiple
destinations
Principles of Web Design 2nd Ed.
Chapter 1
6
Chapter 1
Principles of Web Design
• Figure 1-1
Principles of Web Design 2nd Ed.
Chapter 1
7
Chapter 1
Principles of Web Design
Cascading Style Sheets
• Cascading Style Sheets (CSS) is a powerful
display language for HTML
• CSS lets you state style rules in an external
style sheet that is linked to every page on a
Web site
• CSS lets you easily control the display
characteristics of your Web site
• Newer browsers offer more complete CSS
support
Principles of Web Design 2nd Ed.
Chapter 1
8
Chapter 1
Principles of Web Design
XML: An Open Standard
• XML is the Extensible Markup Language
• XML is a meta-language; not a language
itself, but a language that lets you describe
other languages
• XML describes data, not presentation
• XML allows better access to data
• XML lends itself to customized information
Principles of Web Design 2nd Ed.
Chapter 1
9
Chapter 1
Principles of Web Design
XML Syntax Rules
•
•
•
•
•
Documents must be well-formed
Elements must nest correctly
XML is case-sensitive
End tags are required
Empty elements are signified by a closing
slash
• Attribute values must be quoted
Principles of Web Design 2nd Ed.
Chapter 1
10
Chapter 1
Principles of Web Design
XHTML: The Future of HTML
• XHTML is a reformulation of HTML 4.01 in
XML
• Brings data-handling benefits of XML to
HTML
• Style sheets are required
• Stricter syntax rules
Principles of Web Design 2nd Ed.
Chapter 1
11
Chapter 1
Principles of Web Design
Deprecated Elements
• Deprecated elements are elements that the
W3C has identified as obsolete. They will not
be included in future releases of HTML.
• Some examples of these elements are <font>
and <center>
Principles of Web Design 2nd Ed.
Chapter 1
12
Chapter 1
Principles of Web Design
How Browsers Affect Your Work
• One of the greatest challenges facing HTML
authors is designing pages that display
properly in multiple browsers
• Every browser contains a program called a
parser that interprets the markup tags in an
HTML file and displays the results in the
canvas area of the browser interface
Principles of Web Design 2nd Ed.
Chapter 1
13
Chapter 1
Principles of Web Design
Principles of Web Design 2nd Ed.
Chapter 1
14
Chapter 1
Principles of Web Design
How Browsers Affect Your Work
• The logic for interpreting the HTML tags is
different in every browser, resulting in varying
interpretations of the way the HTML file is
displayed
• Although it’s a good idea to test with the latest
browsers, it’s also prudent to test your work in
older browsers as well
Principles of Web Design 2nd Ed.
Chapter 1
15
Chapter 1
Principles of Web Design
Creating Compatible Pages
• Lowest common denominator coding - use an
older version of HTML to ensure portability
• Cutting-edge coding - push the medium
forward by coding to the latest standard and
using the latest enhancements
• Browser-specific coding - specify a particular
brand and version of browser to access the
site
Principles of Web Design 2nd Ed.
Chapter 1
16
Chapter 1
Principles of Web Design
Solving the Browser Dilemma
• You must test your work in as many browsers
as possible during and at the end of the
development process to make sure that your
pages will render properly
Principles of Web Design 2nd Ed.
Chapter 1
17
Chapter 1
Principles of Web Design
Coding for Multiple Resolutions
• A computer monitor’s screen resolution is
the horizontal and vertical width and height of
the computer screen in pixels
• The three most common screen resolutions
(traditionally expressed as width x height) are
640 x 480, 800 x 600, 1024 x 768
• User screen resolution is a factor over which
you have no control
Principles of Web Design 2nd Ed.
Chapter 1
18
Chapter 1
Principles of Web Design
Fixed Resolution Design
• As the screen resolution changes, the content
remains aligned to the left side of the page
Principles of Web Design 2nd Ed.
Chapter 1
19
Chapter 1
Principles of Web Design
• Figure 1-3
• Figure 1-4
• Figure 1-5
Principles of Web Design 2nd Ed.
Chapter 1
20
Chapter 1
Principles of Web Design
Flexible Resolution Design
• As the screen resolution changes, the content
expands to accommodate the varying screen
width
Principles of Web Design 2nd Ed.
Chapter 1
21
• Figure 1-6
• Figure 1-7
• Figure 1-8
Principles of Web Design 2nd Ed.
Chapter 1
22
Chapter 1
Principles of Web Design
Bandwidth Concerns
• It will still be awhile before most computer
users have fast access to the Web
• Less than 20% of American households have
access to cable modems
• Only 5-10% of all households have access to
Digital Subscriber Line (DSL)
Principles of Web Design 2nd Ed.
Chapter 1
23
Chapter 1
Principles of Web Design
Figure 1-9
Principles of Web Design 2nd Ed.
Chapter 1
24
Chapter 1
Principles of Web Design
Bandwidth Concerns
• If your pages download slowly, your users will
probably click to go to another site before
they see your content
• Most users will simply not wait longer than 20
seconds for a page to load
• The size and number of graphics on your
Web pages influence the speed at which your
pages display
Principles of Web Design 2nd Ed.
Chapter 1
25
Chapter 1
Principles of Web Design
Testing for Download Times
• Test your site at different connection speeds
• Test your site as if you were a user visiting for
the first time. This is when users experience
the greatest download times.
• Clear your cache of the files and images that
the browser has stored
Principles of Web Design 2nd Ed.
Chapter 1
26
Chapter 1
Principles of Web Design
Working with the Cache
• The cache is the temporary storage area for
Web pages and images
• The browser always tries to load images and
files from the cache
• Make use of the cache by reusing images as
much as possible
Principles of Web Design 2nd Ed.
Chapter 1
27
Chapter 1
Principles of Web Design
Should You Use an HTML Editor?
• You can create or generate HTML code to
build Web pages in many ways
• Many sites on the Web are coded using
simple text editing tools such as Notepad
• Many different HTML editing programs are
now available
Principles of Web Design 2nd Ed.
Chapter 1
28
Chapter 1
Principles of Web Design
Should You Use an HTML Editor?
• As with the browsers, authoring packages
interpret tags based on their own built-in
logic. Therefore, a page that you create in an
editing package may look quite different in the
editing interface than it does in a browser.
• You’ll probably end up working with a
combination of tools to create your finished
pages
Principles of Web Design 2nd Ed.
Chapter 1
29
Chapter 1
Principles of Web Design
Summary
• Decide which version of HTML you’ll use to
code your pages
• Decide whether to use Cascading Style
Sheets
• Choose the suite of browsers you will use to
test your site
• Decide how browser-specific your site will
be. Your goal is to create a site that is widely
accessible to multiple browsers.
Principles of Web Design 2nd Ed.
Chapter 1
30
Chapter 1
Principles of Web Design
Summary
• Choose the type of editing tool you will use
to create your HTML code
• Resolve to continually test your work as you
build your site
• Test with multiple browsers, at different
screen resolutions, and at different
connection speeds
• If you can, try to view your site on multiple
platforms such as PC and Macintosh as well
Principles of Web Design 2nd Ed.
Chapter 1
31