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
Week 1 Understanding the Web Design Environment 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 1-2 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 1-3 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 1-4 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 1-5 1-6 1-7 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 1-8 1-9 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 1-10 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 1-11 Moving from HTML to XHTML 1-12 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 1-13 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 1-14 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 1-15 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) 1-16 Migrating from HTML to XHTML • • • • • Evaluate existing code Evaluate existing display information Create coding conventions Start using CSS Test for backward compatibility 1-17 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 1-18 Using Good Coding Practices 1-19 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 1-20 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 1-21 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 1-22 1-23 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 1-24 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 1-25 Browser Compatibility Guidelines • • • • Follow W3C standards Validate your code Know your audience Test your work in multiple browsers 1-26 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 1-27 1-28 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 1-29 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 1-30 Fixed Design • As the screen resolution changes, the content remains aligned to the left side of the page 1-31 1-32 1-33 Flexible Design • As the screen resolution changes, the content expands to accommodate the varying screen width 1-34 1-35 1-36 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 1-37 1-38 1-39 Operating System Issues • Monitors and displays software • Browser versions • Font choices 1-40 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 1-41 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 1-42