1. Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition

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

3. Principles of Web Design, 4th Edition1-3 The Current State of HTML

4. Principles of Web Design, 4th Edition1-4 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language SGML Read about SGML http://www.isgmlug.org/sgmlhelp/g-sg.htm http://www.isgmlug.org/sgmlhelp/g-sg.htm Intended to represent simple document structure Uses hypertext to link related topics Designed for use over the Internet

5. Principles of Web Design, 4th Edition1-5 HTML and the World Wide Web Consortium(sets standards for new web technologies) The World Wide Web Consortium (W3C: www.w3.org) 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 like XHTML, XML, Style sheets.

6. Principles of Web Design, 4th Edition1-6 Using HTML for Structure HTML is a structured markup language that lets you identify common sections of a document (headings, paragraphs, lists) etc. 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

7. 1-7 Using HTML for Structure HTML is an open, nonproprietary, cross- platform compatible language. Open:freely available Nonproprietary: not protected by trademark or patent or copyright Cross-platform compatible: runs identically on different operating systems (windows, Mac)

8. WYSIWYG Principles of Web Design, 4th Edition1-8 An acronym for What You See Is What You Get. The term is used in computing to describe a system in which content displayed during editing appears very similar to the final output

9. Using HTML for Structure HTML is not a (WYSIWYG) layout tool HTML was intended only to express logical document structure, Principles of Web Design, 4th Edition1-9

10. Principles of Web Design, 4th Edition1-10 Here is an HTML Source code

11. Principles of Web Design, 4th Edition1-11 Here are HTML results in browser!! Do you see any tags?

12. Online Activity! Visit this webpage! www.w3schools.com/html www.w3schools.com/html Notice the given HTML code example. Try it yourself! Change the code and see the results Principles of Web Design, 4th Edition1-12

13. Online Activity! Visit this webpage! www.w3schools.com/html www.w3schools.com/html Learn about the following HTML elements 1-13 HTMLBodyHead HTML HeadingsParagraphLinks Line breakImageHorizontal rule TableListBold text

14. Hands-On Activity Create an HTML document that look like this! 1-14 My First Web Page Site Title Developer Focus About Myself (hyperlink) My email (Hyper link) Content My Second Web Page Name Sec Cluster ICT Subjects PHOTO

15. Principles of Web Design, 4th Edition1-15 Using Style Sheets for Presentation Style sheets let you separate display information from content Separating display information lets you prepare your content for multiple destinations The following two style sheet languages are currently available for use with XML or XHTML: –Cascading Style Sheets (CSS) –Extensible Style Language (XSL) Example?

16. Principles of Web Design, 4th Edition1-16

17. Principles of Web Design, 4th Edition1-17 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 Easily control the display characteristics of your Web site Newer browsers support CSS! Using Style Sheets for Presentation

18. Online Activity! Visit this webpage! www.w3schools.com/css/demo_default.htm www.w3schools.com/css/demo_default.htm Explore the various styles available to the basic HTML provided for that page. Explore the actual CSS coding! Practice CSS code. Principles of Web Design, 4th Edition1-18

19. Principles of Web Design, 4th Edition1-19 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

20. Principles of Web Design, 4th Edition1-20 Moving from HTML to XHTML

21. But..Wait! Lets XML first! Principles of Web Design, 4th Edition1-21

22. Principles of Web Design, 4th Edition1-22 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

23. 1-23

24. Principles of Web Design, 4th Edition1-24 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 Deprecated elements: the elements that W3C has identified as obsolete and consequently will not be included in the future release of HTML.

25. XHTML 1.0 Syntax Rules 1-25

26. Principles of Web Design, 4th Edition1-26 XHTML Syntax Rules 1.Documents must be well-formed 2.Elements must nest correctly 3.XML is case sensitive 4.End tags are required 5.Empty elements are signified by a closing slash 6.Attribute values must be quoted

27. Principles of Web Design, 4th Edition1-27 XHTML Syntax Rule 1 Documents must be well-formed A document must follow the coming rules to be accepted as XHTML document

28. Principles of Web Design, 4th Edition1-28 XHTML Syntax Rule 2 Elements must nest correctly

29. Principles of Web Design, 4th Edition1-29 XHTML Syntax Rule 3 XML is case sensitive

30. Principles of Web Design, 4th Edition1-30 XHTML Syntax Rule 4 End tags are required

31. Principles of Web Design, 4th Edition1-31 XHTML Syntax Rule 5 Empty elements are signified by a closing slash

32. Principles of Web Design, 4th Edition1-32 XHTML Syntax Rule 6 Attribute values must be quoted

33. Online Activity! Visit this page! www.w3schools.com/xhtml/xhtml_syntax.asp www.w3schools.com/xhtml/xhtml_syntax.asp Review the rules that was discussed! 1-33

34. Textbook Activity! Hands-On exercise 2 on page 25 Can you convert HTML to XHTML? Correct syntax errors that you may find! 1-34

35. More Textbook Activities! Project Proposal page 29 Create a one or two-page HTML Use Notepad! 1-35

36. Principles of Web Design, 4th Edition1-36 Using Good Coding Practices

37. Principles of Web Design, 4th Edition1-37 Stick to the Standards Follow the standards set by the World Wide Web Consortium Content that is designed to standards displays more consistently in multiple browsers

38. Principles of Web Design, 4th Edition1-38 Use Semantic Markup Semantic markup Semantic markup accurately describes each piece of content – a signifies a paragraph, a is for a lengthy quotation, and so on

39. Principles of Web Design, 4th Edition1-39 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- does not allow deprecated elements. –Transitional- most commonly used. allows obsolete elements from older versions and style sheets. –Frameset- required when frames are used to partition browser window. Choose: HTML transitional for older code, standard use of HTML X HTML transitional for latest standards, using CSS

40. Principles of Web Design, 4th Edition1-40

41. Principles of Web Design, 4th Edition1-41 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 http://validator.w3.org

42. Principles of Web Design, 4th Edition1-42 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

43. Principles of Web Design, 4th Edition1-43 Browser Compatibility Guidelines Follow W3C standards Validate your code Know your audience Test your work in multiple browsers

44. Principles of Web Design, 4th Edition1-44 Considering Connection Speed Differences

45. Principles of Web Design, 4th Edition1-45

46. Principles of Web Design, 4th Edition1-46 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

47. Principles of Web Design, 4th Edition1-47 Designing for Multiple Screen Resolutions

48. Principles of Web Design, 4th Edition1-48 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

49. Principles of Web Design, 4th Edition1-49 Fixed Design As the screen resolution changes, the content remains aligned to the left side of the page

50. Principles of Web Design, 4th Edition1-50

51. Principles of Web Design, 4th Edition1-51

52. Principles of Web Design, 4th Edition1-52 Flexible Design As the screen resolution changes, the content expands to accommodate the varying screen width

53. Principles of Web Design, 4th Edition1-53

54. Principles of Web Design, 4th Edition1-54

55. Principles of Web Design, 4th Edition1-55 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

56. Principles of Web Design, 4th Edition1-56

57. Principles of Web Design, 4th Edition1-57

58. Principles of Web Design, 4th Edition1-58 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

59. Principles of Web Design, 4th Edition1-59 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

60. Key Terms Cascading Style (CSS) is a powerful style / display language for HTML. XHTML: Extensible markup language XHTML is a reformulation of HTML 4.01 in XML HTML: Hyper text Markup language is a structured markup language that lets you identify common sections of a document. 1-60

61. Hypertext Markup language: structured language uses tags. Lets identify sections. Metalanguage: Ex XML, allowing to create new elements. Rendering engine: Every browser contains this that interprets tags in HTML files and displays it. Deprecated element: the elements that W3C has identified as obsolete and consequently will not be included in the future release of HTML. 1-61

62. W3c World Wide Web Consortium(sets standards for new web technologies) Semantic language: identifies different document sections. Style sheets: CSS creates style rules and express them externally in a separate document known as style sheet. 1-62