1. Chapter 1 Variables in the Web Design Environment

2. Principles of Web Design 2nd Ed. Chapter 1
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

3. Principles of Web Design 2nd Ed. Chapter 1
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

4. HTML as a Markup Language
Principles of Web Design
Chapter 1
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

5. HTML as a Markup Language
Principles of Web Design
Chapter 1
HTML as a Markup Language
HTML is an open, non-proprietary, cross-platform 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

6. The Need for Style Sheets
Principles of Web Design
Chapter 1
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

7. Principles of Web Design 2nd Ed. Chapter 1
Figure 1-1
Principles of Web Design 2nd Ed. Chapter 1

8. Cascading Style Sheets
Principles of Web Design
Chapter 1
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

9. Principles of Web Design 2nd Ed. Chapter 1
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

10. Principles of Web Design 2nd Ed. Chapter 1
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

11. XHTML: The Future of HTML
Principles of Web Design
Chapter 1
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

12. Principles of Web Design 2nd Ed. Chapter 1
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

13. How Browsers Affect Your Work
Principles of Web Design
Chapter 1
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

14. Principles of Web Design 2nd Ed. Chapter 1

15. How Browsers Affect Your Work
Principles of Web Design
Chapter 1
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

16. Creating Compatible Pages
Principles of Web Design
Chapter 1
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

17. Solving the Browser Dilemma
Principles of Web Design
Chapter 1
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

18. Coding for Multiple Resolutions
Principles of Web Design
Chapter 1
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

19. Fixed Resolution Design
Principles of Web Design
Chapter 1
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

20. Principles of Web Design 2nd Ed. Chapter 1
Figure 1-3
Figure 1-4
Figure 1-5
Principles of Web Design 2nd Ed. Chapter 1

21. Flexible Resolution Design
Principles of Web Design
Chapter 1
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

22. Principles of Web Design 2nd Ed. Chapter 1
Figure 1-6
Figure 1-7
Figure 1-8
Principles of Web Design 2nd Ed. Chapter 1

23. Principles of Web Design 2nd Ed. Chapter 1
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

24. Principles of Web Design 2nd Ed. Chapter 1
Figure 1-9
Principles of Web Design 2nd Ed. Chapter 1

25. Principles of Web Design 2nd Ed. Chapter 1
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

26. Testing for Download Times
Principles of Web Design
Chapter 1
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

27. Principles of Web Design 2nd Ed. Chapter 1
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

28. Should You Use an HTML Editor?
Principles of Web Design
Chapter 1
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

29. Should You Use an HTML Editor?
Principles of Web Design
Chapter 1
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

30. Principles of Web Design 2nd Ed. Chapter 1
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

31. Principles of Web Design 2nd Ed. Chapter 1
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