Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 SGML • Read about SGML 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 Principles of Web Design, 4th Edition 1-4 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. 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 (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 Principles of Web Design, 4th Edition 1-6 Using HTML for Structure • HTML is an open, nonproprietary, crossplatform 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) 1-7 WYSIWYG • 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 Principles of Web Design, 4th Edition 1-8 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 Edition 1-9 Here is an HTML Source code Principles of Web Design, 4th Edition 1-10 Here are HTML results in browser!! Do you see any tags? Principles of Web Design, 4th Edition 1-11 Online Activity! • Visit this webpage! 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 Edition 1-12 Online Activity! • Visit this webpage! www.w3schools.com/html • Learn about the following HTML elements HTML Body Head HTML Headings Paragraph Links Line break Image Horizontal rule Table List Bold text 1-13 Hands-On Activity • Create an HTML document that look like this! My First Web Page My Second Web Page Site Title Developer Focus About Myself (hyperlink) Name My email (Hyper link) ICT Subjects PHOTO Sec Cluster Content 1-14 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) Principles of Web Design, 4th Edition Example? 1-15 Principles of Web Design, 4th Edition 1-16 Using Style Sheets for Presentation • 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! Principles of Web Design, 4th Edition 1-17 Online Activity! • Visit this webpage! 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 Edition 1-18 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 Principles of Web Design, 4th Edition 1-19 Moving from HTML to XHTML Principles of Web Design, 4th Edition 1-20 But .. Wait! Lets XML first! Principles of Web Design, 4th Edition 1-21 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-22 1-23 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. Principles of Web Design, 4th Edition 1-24 XHTML Syntax Rules 1. 2. 3. 4. 5. 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 6. Attribute values must be quoted Principles of Web Design, 4th Edition 1-26 XHTML Syntax Rule 1 • Documents must be well-formed • A document must follow the coming rules to be accepted as XHTML document Principles of Web Design, 4th Edition 1-27 XHTML Syntax Rule 2 • Elements must nest correctly Principles of Web Design, 4th Edition 1-28 XHTML Syntax Rule 3 • XML is case sensitive Principles of Web Design, 4th Edition 1-29 XHTML Syntax Rule 4 • End tags are required Principles of Web Design, 4th Edition 1-30 XHTML Syntax Rule 5 • Empty elements are signified by a closing slash Principles of Web Design, 4th Edition 1-31 XHTML Syntax Rule 6 • Attribute values must be quoted Principles of Web Design, 4th Edition 1-32 Online Activity! • Visit this page! www.w3schools.com/xhtml/xhtml_syntax.asp • Review the rules that was discussed! 1-33 Textbook Activity! • Hands-On exercise 2 on page 25 • Can you convert HTML to XHTML? • Correct syntax errors that you may find! 1-34 More Textbook Activities! • Project Proposal page 29 • Create a one or two-page HTML • Use Notepad! 1-35 Using Good Coding Practices Principles of Web Design, 4th Edition 1-36 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 Principles of Web Design, 4th Edition 1-37 Use Semantic Markup • Semantic markup • 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-38 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 Principles of Web Design, 4th Edition 1-39 Principles of Web Design, 4th Edition 1-40 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 Principles of Web Design, 4th Edition 1-41 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-42 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-43 Considering Connection Speed Differences Principles of Web Design, 4th Edition 1-44 Principles of Web Design, 4th Edition 1-45 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-46 Designing for Multiple Screen Resolutions Principles of Web Design, 4th Edition 1-47 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 Principles of Web Design, 4th Edition 1-48 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-49 Principles of Web Design, 4th Edition 1-50 Principles of Web Design, 4th Edition 1-51 Flexible Design • As the screen resolution changes, the content expands to accommodate the varying screen width Principles of Web Design, 4th Edition 1-52 Principles of Web Design, 4th Edition 1-53 Principles of Web Design, 4th Edition 1-54 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-55 Principles of Web Design, 4th Edition 1-56 Principles of Web Design, 4th Edition 1-57 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-58 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-59 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 • 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 • 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