Add Images Making your HTML more exciting

Getting Images zFind on the Internet zMake ourselves zDigitize

Getting Images zFree or Fee -- be careful zhttp://webcom.missouri.edu/ilibrary/ zhttp:// zhttp:// zhttp:// zOthers you have used???

Getting Images zYou create ySoftware packages xPhotoshop, PaintShop Pro, PrintShop yCheck out products on Amazon.com xBig Box of Art

Images for web pages zConsider format y.tif – large, bitmap y.jpg – smaller, photographs, many colors y.gif – usually small, drawings/logos/icons, –Animated gifs, fewer colors than jpgs yOthers– example.png but some image formats don’t work with all browsers

zHTML -- Color zColor zPredefined Color Names zRGB color values (lots of charts on Web)charts

Let’s practice zStart with Notepad zAdd required tags zLet’s add some new goodies

HTML Goodies z zLink to another file in same directory with this name. z

More HTML goodies z z Visit MU! z zBookmark – check out the practice file

Writing & Designing for the Web “If you start with a bang, you won’t end in a whimper” (T.S. Eliot)

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

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

Writing for the Web zClear yAssume your audience ‘knows nothing about subject’—but could be interested yBegin with conclusion—most interesting info.—end with background yUse active voice Define terms/Minimize jargon yUse lots of white space

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 ySay ‘many’ not ‘large number of’

Writing for the Web zCoherent yIntuitive—Speak ‘with’ not ‘at’ the reader yGood menus – consistent & at top or bottom yGood connections between paragraphs, pages, ideas yEDIT, EDIT, EDIT – spell and grammar check & then EDIT again

Sample zSt. Louis is filled with internationally recognized attractions that draw large numbers of people every year without fail. In 2005 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).

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

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

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

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

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

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

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)

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

Designing for the Web – Design Solutions zDesigning it – more answers zKeep backgrounds in the background zBackground should not interfere with link color zProvide contrast between text and background zMake sure image size balances on page zAdd text labels and use of ALT for special users

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

Evaluate these websites zhttp:// zhttp:// zhttp:// z zhttp:// zhttp://

Create Your Own 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 Combination

HTML -- Let’s Review zHTML’s basic four tags z zDocument Type Definition (long entry above tag defining HTML version used)

HTML -- Let’s Review zContainer vs empty tags zContainer ; zEmpty zAttributes (modify HTML tags) z zFour attributes (src, height, width, alt)

HTML -- Let’s Review 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

HTML -- Let’s Review zLine Break Tag z zManual line break zText formatting z z (would you use???)

HTML -- Let’s Review zTables zTags to remember z zTable attributes to remember zcellpadding, cellspacing, border, width, summary, heading zTable data cell attributes to remember zalign, valign, colspan, rowspan

HTML -- Meta tags zMeta tags z

Meta Tags zHow are they used ySearch engine indexing yCan we prevent indexing z yGoogle example (similar info. on Yahoo help) xhttp://