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
XP Week 2 Developing a Basic Web Page New Perspectives on HTML and XHTML, Comprehensive 1 XP Objectives • Create boldfaced and italicized text. • Describe logical and physical elements. • Define empty elements. • Insert an inline image into a Web page. • Insert a horizontal line into a Web page. New Perspectives on HTML and XHTML, Comprehensive 2 XP Objectives • Store meta information in a Web document. • Display special characters and symbols. • Web Site Design Basics New Perspectives on HTML and XHTML, Comprehensive 3 XP Working with Inline Elements • Character formatting elements are one of HTML’s set of inline elements. This element allows you to format text characters. <strong></strong> • Strongly emphasized content (appears in bold) Welcome to our Chemistry Classes. HTML: <p>Welcome to our <strong>Chemistry Classes.</strong></p> • Check out page 32 for a list of inline elements New Perspectives on HTML and XHTML, Comprehensive 4 XP Welcome to our Chemistry Classes. HTML Result <p>Welcome to our <em>Chemistry Welcome to our Chemistry Classes.</em></p> Classes. <p>Welcome to our <em><strong>Chemistry Classes.</strong></em></p> Welcome to our Chemistry Classes. * Notice the order in which the tags are closed! New Perspectives on HTML and XHTML, Comprehensive 5 Understanding Logical and Physical Elements XP • A logical element describes the nature of the enclosed content, but not necessarily how that content should appear. • A physical element describes how content should appear, but doesn’t indicate the content’s nature. • You should use a logical element that accurately describes the enclosed content whenever possible, and use physical elements only for general content. New Perspectives on HTML and XHTML, Comprehensive 6 XP Working with Empty Elements • To display a graphic, you insert an inline image into the page. An inline image displays a graphic image located in a separate file within the contents of a block-level element. <img src = “filename” alt = “alternative text” /> • You can insert a horizontal line by using the one-sided tag <hr />. With Styles <hr style = “color: blue; width: 50%” /> <hr style = “color: blue; width: 300” /> <hr style = “color: blue; width: 300; height: 10” /> <hr style = “color: blue; width: 300; height: 10; background-color: green” /> • A pixel is a dot on your computer screen that measures about 1/72” square. New Perspectives on HTML and XHTML, Comprehensive 7 XP Working with Empty Elements • Other empty elements you may wish to use in your Web page include line breaks and meta elements. <br /> • Meta elements are placed in the document’s head and contain information about the document that may be of use to programs that run on Web servers. New Perspectives on HTML and XHTML, Comprehensive 8 XP Working with Special Characters • Occasionally you will want to include special characters in your Web page that do not appear on your keyboard. ₤ ® • HTML supports the use of character symbols that are identified by a code number or name. &code New Perspectives on HTML and XHTML, Comprehensive 9 XP Working with Special Characters New Perspectives on HTML and XHTML, Comprehensive 10 Summary: Tips for Good HTML Code XP • Make sure that nested elements do not cross. • Use styles in place of presentational elements whenever possible. • Use logical elements to describe an element’s content. • Use physical elements to describe the element’s appearance. New Perspectives on HTML and XHTML, Comprehensive 11 XP Summary: Tips for Good HTML Code • Include the alt attribute for any inline image to specify alternative text for non-graphical browsers. • Know your market and the types of browsers that your audience will use to view your Web page. • Test your Web page on all relevant browsers. New Perspectives on HTML and XHTML, Comprehensive 12 XP Designing a Web Site The good news is that anyone can create a web page or web site. The bad news is that anyone can create a web page or web site. New Perspectives on HTML and XHTML, Comprehensive 13 XP Steps to Designing 1. Define the site’s purpose What’s the message? What is the purpose? 2. Consider the audience Who’s the audience? 3. Gather ideas and information How should the site be organized? What is the content? 4. Determine navigation (more on this later) 5. Sketch Pages New Perspectives on HTML and XHTML, Comprehensive 14 XP Design Principles • • • Need to guide us throughout design process Need to avoid Viewers have expectations New Perspectives on HTML and XHTML, Comprehensive 15 XP What are these expectations? • As Jakob Nielsen wrote back in November 1999, “If you are thinking about how to design a certain page element, all you have to do is to look at the twenty most-visited sites on the Internet and see how they do it.” This still applies today. • “If 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.” Source: http://www.useit.com/alertbox/991114.html New Perspectives on HTML and XHTML, Comprehensive 16 XP Getting Ideas • • Look to popular sites for inspiration Locating popular sites http://www.clickz.com/stats/ Example: • http://www.clickz.com/stats/markets/retailing/article.php/ 6061_3299531 New Perspectives on HTML and XHTML, Comprehensive 17 XP Fundamental Principles of Design • Four principles to keep in mind: Contrast • Proximity • If objects on a page relate, put them close together Alignment • Use changes in font, color, and shape to make things stand out Align items on a page Repetition • Repeat visual elements throughout a site New Perspectives on HTML and XHTML, Comprehensive 18 XP Contrast • • Elements are visually different from each other If two elements are not the same, make them very different New Perspectives on HTML and XHTML, Comprehensive 19 XP New Perspectives on HTML and XHTML, Comprehensive 20 XP Repetition • • Certain elements should be repeated in multiple pages on a site These elements should be repeated throughout site to unify disparate parts New Perspectives on HTML and XHTML, Comprehensive 21 Branding XP New Perspectives on HTML and XHTML, Comprehensive 22 XP New Perspectives on HTML and XHTML, Comprehensive 23 XP Alignment • • Items on a page should be lined up with each other Goal is to choose alignment and use it throughout the site New Perspectives on HTML and XHTML, Comprehensive 24 XP New Perspectives on HTML and XHTML, Comprehensive 25 XP Proximity • • Items that are close together appear to have a relationship Items that belong together should be grouped together New Perspectives on HTML and XHTML, Comprehensive 26 XP New Perspectives on HTML and XHTML, Comprehensive 27 XP Design Principles at Work How Design Principles Improve Web Sites New Perspectives on HTML and XHTML, Comprehensive 28 XP Before & After • • Alignment Contrast New Perspectives on HTML and XHTML, Comprehensive 29 XP Before & After • Contrast New Perspectives on HTML and XHTML, Comprehensive 30 XP Before & After • Proximity New Perspectives on HTML and XHTML, Comprehensive 31 XP Good & Bad • Repetition New Perspectives on HTML and XHTML, Comprehensive 32 Picture Source: Allison McMorris - http://coe.sdsu.edu/eet/articles/designprin2/start.htm XP Design Principles Examples Repetition Before Repetition After Contrast Before Contrast After New Perspectives on HTML and XHTML, Comprehensive 33 Picture Source: Allison McMorris - http://coe.sdsu.edu/eet/articles/designprin2/start.htm XP Design Principles Examples Alignment Before Alignment After Proximity Before Proximity After New Perspectives on HTML and XHTML, Comprehensive 34 XP Beware of… • Common mistakes Jakob Nelson • “King of usability” • His Site: http://www.useit.com/alertbox – The Ten Most Violated Homepage Design Guidelines – Top Ten Guidelines for Homepage Usability – Top Ten Web Design Mistakes “A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.” - Jakob Nielsen http://www.useit.com/alertbox/20021223.html New Perspectives on HTML and XHTML, Comprehensive 35 XP Questions New Perspectives on HTML and XHTML, Comprehensive 36