Week02 - GEOCITIES.ws
Download
Report
Transcript Week02 - GEOCITIES.ws
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