XP New Perspectives on HTML and XHTML, Comprehensive 1 Developing a Basic Web Page Week 2 XP New Perspectives on HTML and XHTML, Comprehensive 2 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. XP New Perspectives on HTML and XHTML, Comprehensive 3 Objectives Store meta information in a Web document. Display special characters and symbols. Web Site Design Basics XP New Perspectives on HTML and XHTML, Comprehensive 4 Working with Inline Elements Character formatting elements are one of HTMLs set of inline elements. This element allows you to format text characters. Strongly emphasized content (appears in bold) Welcome to our Chemistry Classes. HTML: Welcome to our Chemistry Classes. Check out page 32 for a list of inline elements XP New Perspectives on HTML and XHTML, Comprehensive 5 Welcome to our Chemistry Classes. HTMLResult Welcome to our Chemistry Classes. * Notice the order in which the tags are closed! XP New Perspectives on HTML and XHTML, Comprehensive 6 Understanding Logical and Physical Elements 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 doesnt indicate the contents nature. You should use a logical element that accurately describes the enclosed content whenever possible, and use physical elements only for general content. XP New Perspectives on HTML and XHTML, Comprehensive 7 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. You can insert a horizontal line by using the one-sided tag. With Styles A pixel is a dot on your computer screen that measures about 1/72 square. XP New Perspectives on HTML and XHTML, Comprehensive 8 Working with Empty Elements Other empty elements you may wish to use in your Web page include line breaks and meta elements. Meta elements are placed in the documents head and contain information about the document that may be of use to programs that run on Web servers. XP New Perspectives on HTML and XHTML, Comprehensive 9 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. Working with Special Characters &code XP New Perspectives on HTML and XHTML, Comprehensive 10 Working with Special Characters XP New Perspectives on HTML and XHTML, Comprehensive 11 Summary: Tips for Good HTML Code Make sure that nested elements do not cross. Use styles in place of presentational elements whenever possible. Use logical elements to describe an elements content. Use physical elements to describe the elements appearance. XP New Perspectives on HTML and XHTML, Comprehensive 12 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. XP New Perspectives on HTML and XHTML, Comprehensive 13 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. XP New Perspectives on HTML and XHTML, Comprehensive 14 Steps to Designing 1.Define the sites purpose Whats the message? What is the purpose? 2.Consider the audience Whos 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 XP New Perspectives on HTML and XHTML, Comprehensive 15 Design Principles Need to guide us throughout design process Need to avoid Viewers have expectations XP New Perspectives on HTML and XHTML, Comprehensive 16 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: XP New Perspectives on HTML and XHTML, Comprehensive 17 Getting Ideas Look to popular sites for inspiration Locating popular sites Example:6061_ http://www.clickz.com/stats/markets/retailing/article.php/ 6061_ XP New Perspectives on HTML and XHTML, Comprehensive 18 Fundamental Principles of Design Four principles to keep in mind: Contrast Use changes in font, color, and shape to make things stand out Proximity If objects on a page relate, put them close together Alignment Align items on a page Repetition Repeat visual elements throughout a site XP New Perspectives on HTML and XHTML, Comprehensive 19 Contrast Elements are visually different from each other If two elements are not the same, make them very different XP New Perspectives on HTML and XHTML, Comprehensive 20 XP New Perspectives on HTML and XHTML, Comprehensive 21 Repetition Certain elements should be repeated in multiple pages on a site These elements should be repeated throughout site to unify disparate parts XP New Perspectives on HTML and XHTML, Comprehensive 22 Branding XP New Perspectives on HTML and XHTML, Comprehensive 23 XP New Perspectives on HTML and XHTML, Comprehensive 24 Alignment Items on a page should be lined up with each other Goal is to choose alignment and use it throughout the site XP New Perspectives on HTML and XHTML, Comprehensive 25 XP New Perspectives on HTML and XHTML, Comprehensive 26 Proximity Items that are close together appear to have a relationship Items that belong together should be grouped together XP New Perspectives on HTML and XHTML, Comprehensive 27 XP New Perspectives on HTML and XHTML, Comprehensive 28 Design Principles at Work How Design Principles Improve Web Sites XP New Perspectives on HTML and XHTML, Comprehensive 29 Before & After Alignment Contrast XP New Perspectives on HTML and XHTML, Comprehensive 30 Before & After Contrast XP New Perspectives on HTML and XHTML, Comprehensive 31 Before & After Proximity XP New Perspectives on HTML and XHTML, Comprehensive 32 Good & Bad Repetition XP New Perspectives on HTML and XHTML, Comprehensive 33 Design Principles Examples Repetition Before Repetition After Contrast Before Contrast After Picture Source: Allison McMorris - XP New Perspectives on HTML and XHTML, Comprehensive 34 Design Principles Examples Alignment Before Alignment After Proximity Before Proximity After Picture Source: Allison McMorris - XP New Perspectives on HTML and XHTML, Comprehensive 35 Beware of Common mistakes Jakob Nelson King of usability His Site: 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 XP New Perspectives on HTML and XHTML, Comprehensive 36 Questions