2. HTML continues Reviewing what we did last class; Adding some new stuff

3. Create Your Own (you should be able to do for Assignment) DTD Four required tags Paragraph/Line break Images List Combination of above Tables Color Heading Fonts Mailto: Combination of above

4. HTML -- Let’s Review HTML’s basic four tags z

5. HTML – Let’s review Container vs empty tags z Container ; z Empty Attributes (modify HTML tags) z z Four attributes (src, height, width, alt)

6. HTML - Heading/Paragraph Heading Elements - varies font size z Levels 1 (largest) to 6 (smallest) z z Inserts a line break before and after Paragraph Tag z z Inserts a line break before and after

7. HTML -- Lists Lists z Ordered -- numbered z Unordered -- bulleted z Definition

8. HTML—Links (review) Link examples – File – Google http://www.google.com – Email – (Cont.)

9. HTML -- Tables Tags to remember z Table attributes to remember z Cellpadding, cellspacing, border, width, z summmary, heading Table data cell attributes to remember z Align, valign, colspan, rowspan

10. Document Type Definition DTD—tells browser which version HTML used – HTML 4.01 Transitional DTD – Include before opening HTML tag – http://www.w3.org/TR/html4/loose.dtd

11. Now for some extras Meta tags Special characters Comments Open in new window

12. HTML – Meta Tags Meta tags z

13. Meta Tags How are they used – Search engine indexing – Can we prevent indexing – Google example (similar info. on Yahoo help) http://www.google.com/remove.html

14. More Extras Special characters Examples – (nonbreaking space) St. Louis – & (ampersand) Milk & Cookies – " (quotation mark) "Go Cards"

15. More Extras Comment Begin <!--Nothing below will display End --> Check out source of bengal.missouri.edu/~knottsb

16. One more extra Opening webpage in a new browser window: Blackboard

17. Style Style is the term used to describe the presentation of text in a Web page …text formatting. As HTML continues to develop, Style is used to separate presentational from structural--to get away from the confusion created when tags affect how text is displayed rather than describing the text's structure.

18. Style -- Properties font-type : font-family (arial, tahoma) font-size : font-size (10pt) font-weight : font-weight (bold) font-style : font-style (italic) color / background color : color / background-color text alignment : text-align Margins, Word/Line Spacing, …

19. HTML -- Applying Style Style z Inline - (to one tag) z Embedded - ( --applies to document) z Linked - (separate.css file--can apply to multiple documents)

20. Style -- Inline Style Affected Text Now is the time…

21. Style -- Embedded Style h1 {color: #ff0000;} Affected Text Now is the time…

22. Style - Linked Barb’s Style Affected Text Now is the time…

23. Sample Cascading Stylesheet (css text file) body { background-color: white } h1 { font-size: 12pt; font-family: arial, helvetica, “sans serif”; color: black }

24. Stylesheet Advantages/Disadvantages  True separation of structure and presentation.  Style can be applied to all documents on a Web site with little effort, saving the page creator from redefining the same formatting over and over again for each page.  Not all properties associated with stylesheets are recognized by individual browsers.  Backward compatibility issues.  Steep learning curve.

25. Writing & Designing for your Website ‘If you start with a bang, you won’t end with a whimper’ ( T.S. Eliot )

26. Writing for the Web What stays the same – Who, What, Where, When, Why, How – The facts are correct – It flows and is clear – It is INTERESTING (most important)

27. Writing for the Web Consider what changes – How do YOU and others read on the Web? – YOU DON”T Well, Yes, you do -- – but Skim, Browse, Scan

28. Writing for the Web 4 C’s – Clear – Concise – Coherent – Credible

29. Writing for the Web Clear – Assume your audience ‘knows nothing about subject’--but could be interested – Begin with conclusion  most interesting info  end with background – Define terms/Minimize jargon – Use active voice – Use lots of white space

30. Writing for the Web Concise – Keep it short – users Scan/Browse/Skim – Use short words, sentences, paragraphs – One idea per paragraph -- state it in first sentence – Use of bulleted lists – Say ‘many’ not ‘large number of’’

31. Writing for the Web Coherent – Good connections between paragraphs, pages, ideas – Speak ‘with’ the reader, not ‘at’ – EDIT, EDIT, EDIT – spell and grammar check & then EDIT again

32. Writing for the Web Credible – Avoid exaggerations – Avoid being too chatty or cutesy – Take care with humor – Make it relevant and worth their time – Check your facts

33. Remember ‘Not that the story need be long, but it will take a long time to make it short’ ( Thoreau ) AND ‘The most valuable of all talents is never using two words when one will do’ ( Jefferson )

34. Sample 1 St. Louis is filled with internationally recognized attractions that draw large numbers of people every year without fail. In 2006 some of the most popular places were the Gateway Arch (over 2 million visitors), Scott Joplin’s home (about 350,000 visitors), and the St. Louis Zoo (over 3 million visitors).

35. Sample 1 – concise, scannable, & objective In 2006, three of St. Louis’ most visited attractions were: – Gateway Arch – Scott Joplin’s home – St. Louis Zoo – Other suggestions???

36. Designing for the Web Getting you started to think about issues – MU’s website design class provides you opportunity to explore in depth. Let’s look at presentation of content, navigation, and design itself

37. Designing for the Web – Content Pet Peeves Content (much of this is review) z Too long – too much scrolling z Not relevant or creditable z Lack of summaries z Inconsistency in language – style and tone z Punctuation and grammar errors

38. Designing for the Web – Content Solutions Content – some answers z Date each page (include reviewed date) z Use of logo and tag line z Customize it for each user

39. Designing for the Web – Navigation Pet Peeves Navigation – the concerns z Inability to find content z Too many clicks to get to links z Too many links (or too few) z Poorly labeled links OR icons that look like links but are not z Dead-end pages z Getting lost

40. Designing for the Web – Navigation Solutions Navigation – some answers z Keep navigation simple and repetitive (same place & function on each page) z Organize information in order your user will look for it

41. Designing for the Web – Design Pet Peeves Design itself – concerns z Too many fonts and colors z Clutter z Slow downloads due to graphics z Pop up windows z Plugins z Accessibility – (multiple browsers and special users)

42. Designing for the Web – Design Solutions Design itself – some answers z Use sans serif typefaces (Arial or Helvetica) z Avoid caps and overuse of bold/italics z Text flush left for optimum reading z Keep pages to 50KB (3-10 sec. download) z Don’t design for newest only z Contact Us!!! -- & meaningful URLs

43. Our successful website Conveys its own distinctive image (to help enhance your organization’s) Attractive & up-to-date Understands and meets its users needs (and changes as those needs change) Offers choices and customization

44. Evaluate these websites http://www.nypl.org http://www.plcmc.lib.nc.us/ http://www.lib.fsu.edu/ http://espn.go.com/ http://www.kidsclick.org/ http://www.sisseton.k12.sd.us/default.htm