Download Chapter 1

Chapter 1
Understanding the Web
Design Environment
Principles of Web Design, 4th Edition
Objectives
•
•
•
•
•
•
•
Describe the current state of HTML
Move from HTML to XHTML
Use good coding practices
Describe browser compatibility issues
Consider connection speed differences
Code for multiple screen resolutions
Address operating system issues
Principles of Web Design, 4th Edition
1-2
The Current State of HTML
Principles of Web Design, 4th Edition
1-3
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, 4th Edition
1-4
HTML and the World Wide Web
Consortium
• The World Wide Web Consortium (W3C) is
the standards organization for the Web
• Founded in 1994 at MIT
• The W3C looks to expand and set standards
for the many new Web technologies
Principles of Web Design, 4th Edition
1-5
Using HTML for Structure
• HTML is a structured markup language that
lets you identify common sections of a
document
• The HTML markup tags indicate how the
document sections appear in a browser
• The browser interprets the HTML markup
elements and displays the results, hiding the
actual markup tags from the user
Principles of Web Design, 4th Edition
1-6
Using HTML for Structure
(continued)
• HTML is an open, nonproprietary, 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, 4th Edition
1-7
Principles of Web Design, 4th Edition
1-8
Principles of Web Design, 4th Edition
1-9
Using Style Sheets for
Presentation
• Style sheets let you separate display
information from content
• Separating display information lets you
repurpose your content for multiple
destinations
Principles of Web Design, 4th Edition
1-10
Principles of Web Design, 4th Edition
1-11
Using Style Sheets for
Presentation (continued)
• 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, 4th Edition
1-12
Organizing Information with
Hypertext
• Information is linked on the Web using
hypertext, a nonlinear way of organizing
information
• Web users can quickly jump from one related
topic to another
• As a hypertext author, you determine which
terms to create as hypertext links
Principles of Web Design, 4th Edition
1-13
Moving from HTML to XHTML
Principles of Web Design, 4th Edition
1-14
A Brief Introduction to XML
• XML has no predefined elements such as
<h1> or <p>
• XML is a metalanguage – a language that
lets you create your own markup elements to
meet your information needs
• XML code looks very similar to HTML code
Principles of Web Design, 4th Edition
1-15
Benefits of Moving to XHTML
• 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
• 3 “flavors”: Strict, Transitional, Frameset
Principles of Web Design, 4th Edition
1-16
XHTML 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, 4th Edition
1-17
Style Sheets are Required
• Because XHTML is an application of XML,
you must use style sheets to render
presentation information in XHTML
• The following two style sheet languages are
currently available for use with XML or
XHTML:
– Cascading Style Sheets (CSS)
– Extensible Style Language (XSL)
Principles of Web Design, 4th Edition
1-18
Migrating from HTML to
XHTML
•
•
•
•
•
Evaluate existing code
Evaluate existing display information
Create coding conventions
Start using CSS
Test for backward compatibility
Principles of Web Design, 4th Edition
1-19
Choosing an HTML Editor
• HTML editors interpret tags based on their
own built-in logic
• You’ll probably end up working with a
combination of tools to create your finished
pages
Principles of Web Design, 4th Edition
1-20
Choosing an HTML Editor
(continued)
• 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
available
Principles of Web Design, 4th Edition
1-21
Using Good Coding Practices
Principles of Web Design, 4th Edition
1-22
Stick to the Standards
• Follow the standards set by the World Wide
Web Consortium
• Separate content structure from presentation
information
• Content that is designed to standards
displays more consistently in multiple
browsers
Principles of Web Design, 4th Edition
1-23
Use Semantic Markup
• Semantic markup is descriptive markup that
identifies the intended use of different
document sections
• Semantic markup accurately describes each
piece of content – a <p> signifies a
paragraph, a <blockquote> is for a lengthy
quotation, and so on
Principles of Web Design, 4th Edition
1-24
Choose the Correct Document
Type
• When you choose a document type, you are
pointing to a set of rules called Document
Type Definition (DTD)
• DTDs contain all the elements, attributes, and
usage rules for the markup language you are
using
• Three document types, or “flavors,” of both
HTML and XHTML are available:
– Strict
– Transitional
– Frameset
Principles of Web Design, 4th Edition
1-25
Principles of Web Design, 4th Edition
1-26
Validate Your Code
• Valid code conforms to the rules of the W3C
• Valid code enhances browser compatibility,
accessibility, and exchange of data
• Use a software program called a validator to
read your code and compare it to the rules in
the DTD
Principles of Web Design, 4th Edition
1-27
Validate Your Code
(continued)
• The most common mistakes that make
your code invalid include:
– No doctype declaration
– Missing closing tags, most commonly on
paragraphs
– Missing alt attributes in <img> elements
– Incorrect tag nesting
– Unquoted attributes
Principles of Web Design, 4th Edition
1-28
Browser Compatibility Issues
Principles of Web Design, 4th Edition
1-29
Browser Compatibility
Guidelines
•
•
•
•
Follow W3C standards
Validate your code
Know your audience
Test your work in multiple browsers
Principles of Web Design, 4th Edition
1-30
Considering Connection Speed
Differences
Principles of Web Design, 4th Edition
1-31
Considering Connection Speed
Differences
• A majority of U.S. computer users now have
high-speed access to the Web
• Approximately one-quarter still access the
Web with a dial-up modem
• Strive to keep page designs simple enough
for the pages to load quickly
• The number of graphics on your Web pages
is the single biggest factor influencing the
speed at which pages are rendered
Principles of Web Design, 4th Edition
1-32
Principles of Web Design, 4th Edition
1-33
Working with the Cache to
Improve Download Time
• 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, 4th Edition
1-34
Designing for Multiple Screen
Resolutions
Principles of Web Design, 4th Edition
1-35
Coding for Multiple Screen
Resolutions
• A computer monitor’s screen resolution is
the horizontal and vertical width and height of
the computer screen in pixels
• The most common screen resolution
(traditionally expressed as width x height) is
1024 x 768
• User screen resolution is a factor over which
you have no control
Principles of Web Design, 4th Edition
1-36
Fixed Design
• As the screen resolution changes, the content
remains aligned to the left side of the page
Principles of Web Design, 4th Edition
1-37
Principles of Web Design, 4th Edition
1-38
Principles of Web Design, 4th Edition
1-39
Flexible Design
• As the screen resolution changes, the content
expands to accommodate the varying screen
width
Principles of Web Design, 4th Edition
1-40
Principles of Web Design, 4th Edition
1-41
Principles of Web Design, 4th Edition
1-42
Centered Design
• As the screen resolution changes, the Web
page stays centered in the browser window,
splitting the remaining space into equal
amounts on the left and right side of the
browser window
Principles of Web Design, 4th Edition
1-43
Principles of Web Design, 4th Edition
1-44
Principles of Web Design, 4th Edition
1-45
Operating System Issues
• Monitors and displays software
• Browser versions
• Font choices
Principles of Web Design, 4th Edition
1-46
Summary
• Use Cascading Style Sheets
• Decide whether to code to the XHTML
standard
• Use good coding practices
• Choose the type of editing tool you will use
to create your code
• Choose the suite of browsers you will use to
test your site
Principles of Web Design, 4th Edition
1-47
Summary (continued)
• Decide how browser-specific your site will be
• 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, 4th Edition
1-48