2. More HTML Stuff Making your HTML more exciting

3. HTML -- Let’s Review zHTML’s basic four tags z

4. HTML – Let’s review zContainer vs empty tags zContainer ; zEmpty zAttributes (modify HTML tags) z zFour attributes (src, height, width, alt)

5. HTML - Heading/Paragraph zHeading Elements - varies font size zLevels 1 (largest) to 6 (smallest) z zInserts a line break before and after zParagraph Tag z zInserts a line break before and after

6. HTML -- Lists zLists zOrdered -- numbered zUnordered -- bulleted zDefinition

7. HTML—Links (review) zLink examples y File y Google http://www.google.com y Email y(Cont.)

8. HTML – Link (new) zLinking to a section within a document y http://slpl.org y x Return to top

9. HTML -- Tables zTags to remember z zTable attributes to remember zCellpadding, cellspacing, border, width, zsummmary, heading zTable data cell attributes to remember zAlign, valign, colspan, rowspan

10. Now for some extras zMeta tags zDTD zSpecial characters zComments

11. Meta Tags zHow are they used ySearch engine indexing yCan we prevent indexing z yGoogle example (similar info. on Yahoo help) xhttp://www.google.com/remove.htmlhttp://www.google.com/remove.html

12. HTML – Meta Tags zMeta tags z

13. Document Type Definition zDTD—tells browser which version HTML used yHTML 4.01 Transitional DTD yInclude before opening HTML tag y http://www.w3.org/TR/html4/loose.dtd

14. More Extras zSpecial charactersSpecial characters zExamples y (nonbreaking space) xSt.&npsp;Louis y& (ampersand) xMilk & Cookies y" (quotation mark) x"Go Cards"

15. More Extras zComment xBegin <!--Nothing below will display x End --> zCheck out source of bengal.missouri.edu/~knottsb

16. More Extras zComment xBegin <!--Nothing below will display x End --> zCheck out source of bengal.missouri.edu/~knottsb

17. Create Your Own (you should be able to do for Portfolio) zDTD zFour required tags zMeta zLink ybookmark zImage zList zCombination of above z Table z Color z Heading z Fonts z Paragraph/Line break z Mailto: z Styles z Combination

18. Writing & Designing for the Web

19. Writing for the Web z4 C’s yCreditable yClear yConcise yCoherent

20. Writing for the Web zCreditable yAvoid exaggerations yAvoid being too chatty or cutesy yTake care with humor yUnderstand the user – age, skill level, culture yLet them know who you are and why what you say is relevant and worth their time

21. Writing for the Web zClear yAssume your audience ‘knows nothing about subject’ yMake titles and headers meaningful yMake icons and links apparent yDefine terms/Minimize jargon (use links) yUse active voice yAllow searching & sitemap yUse lots of white space

22. Writing for the Web zConcise yKeep it short – users Scan/Browse/Skim yUse short words, sentences, paragraphs yOne idea per paragraph and state in first sentence yUse of bulleted lists

23. Writing for the Web zCoherent yIntuitive yGood menus – consistent & at top or bottom yLinks work yGood connections between paragraphs, pages, ideas yEDIT, EDIT, EDIT – spell and grammar check & then EDIT again – Tools can help

24. Sample 1 zSt. 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 3 million visitors), Scott Joplin’s home (about 350,000 visitors), and the St. Louis Zoo (over 5 million visitors).

25. Sample 1 – concise, scannable, & objective zIn 2006, three of St. Louis’ most visited attractions were: yGateway Arch yScott Joplin’s home ySt. Louis Zoo yOther suggestions???

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

27. Designing for the Web – Content Pet Peeves zContent (much of this is review) zToo long – too much scrolling zNot relevant or creditable zLack of summaries zInconsistency in language – style and tone zPunctuation and grammar errors

28. Designing for the Web – Content Solutions zContent – some answers zDate each page (include reviewed date) zUse of logo and tag line zIdeas from our discussion on Writing for the Web zCustomize it for each user

29. Designing for the Web – Navigation Pet Peeves zNavigation – the concerns zInability to find content zToo many clicks to get to links zToo many links (or too few) zPoorly labeled links OR icons that look like links but are not zDead-end pages zGetting lost

30. Designing for the Web – Navigation Solutions zNavigation – some answers zKeep navigation simple and repetitive (same place & function on each page) zOrganize information in order your user will look for it

31. Designing for the Web – Design Pet Peeves zDesign itself – concerns zToo many fonts and colors zClutter zSlow downloads due to graphics zPop up windows zPlugins zAccessibility – (multiple browsers and special users)

32. Designing for the Web – Design Solutions zDesign itself – some answers zUse sans serif typefaces (Arial or Helvetica) zUse large enough/not too large fonts—not too many zAvoid caps and overuse of bold/italics zText flush left for optimum reading zKeep pages to 50KB (3-10 sec. download) zDon’t design for newest only zContact Us!!! -- & meaningful URLs

33. Our successful website zConveys its own distinctive image (to help enhance your organization’s) zAttractive & up-to-date zUnderstands and meets its users needs (and changes as those needs change) zOffers choices and customization

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