1. Week 1 Understanding the Web Design Environment

2. 1-2 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

3. 1-3 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

4. 1-4 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

5. 1-5 Using HTML for Structure (continued) HTML is an open, nonproprietary, 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

6. 1-6

7. 1-7

8. 1-8 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

9. 1-9

10. 1-10 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 Using Style Sheets for Presentation (continued)

11. 1-11 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

12. 1-12 Moving from HTML to XHTML

13. 1-13 A Brief Introduction to XML XML has no predefined elements such as or 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

14. 1-14 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

15. 1-15 XHTML Syntax Rules Documents must be well-formed Elements must nest correctly XHTML is case sensitive End tags are required Empty elements are signified by a closing slash Attribute values must be quoted

16. 1-16 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)

17. 1-17 Migrating from HTML to XHTML Evaluate existing code Evaluate existing display information Create coding conventions Start using CSS Test for backward compatibility

18. 1-18 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 Choosing an HTML Editor (continued)

19. 1-19 Using Good Coding Practices

20. 1-20 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

21. 1-21 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 signifies a paragraph, a is for a lengthy quotation, and so on

22. 1-22 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

23. 1-23

24. 1-24 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

25. 1-25 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 elements –Incorrect tag nesting –Unquoted attributes

26. 1-26 Browser Compatibility Guidelines Follow W3C standards Validate your code Know your audience Test your work in multiple browsers

27. 1-27 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

28. 1-28

29. 1-29 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

30. 1-30 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

31. 1-31 Fixed Design As the screen resolution changes, the content remains aligned to the left side of the page

32. 1-32

33. 1-33

34. 1-34 Flexible Design As the screen resolution changes, the content expands to accommodate the varying screen width

35. 1-35

36. 1-36

37. 1-37 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

38. 1-38

39. 1-39

40. 1-40 Operating System Issues Monitors and displays software Browser versions Font choices

41. 1-41 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

42. 1-42 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