add images making your html more exciting getting images zfind on the internet zmake ourselves...
Post on 21-Dec-2015
221 views
TRANSCRIPT
Add Images
Making your HTML more exciting
Getting Images
Find on the InternetMake ourselvesDigitize
Getting Images
Free or Fee -- be carefulhttp://webcom.missouri.edu/ilibrary/http://www.corbis.comhttp://www.barrysclipart.comhttp://www.hemera.comOthers you have used???
Getting Images
You create Software packages
Photoshop, PaintShop Pro, PrintShop
Check out products on Amazon.comBig Box of Art
Images for web pages
Consider format .tif – large, bitmap .jpg – smaller, photographs, many colors .gif – usually small, drawings/logos/icons,
–Animated gifs, fewer colors than jpgs
Others– example .png but some image formats don’t work with all browsers
HTML -- Color
ColorPredefined Color NamesRGB color values (lots of charts on
Web)
Let’s practice
Start with NotepadAdd required tagsLet’s add some new goodies
HTML Goodies
<body bgcolor=“#ffff99" body link="green" vlink="orange">
Link to <a href="file2.html"> another file in same directory with this name.</a>
<a href="http://www.missouri.edu"><img src="circle.gif" alt="Go Tigers" height="100" width="140" align="top" border="0"></a>
More HTML goodies
<!—Insert a comment. Note it does NOT show in the browser-->
<a href=http://www.missouri.edu/ target="_blank">Visit MU!</a>
<meta name=“robots” content=“noindex, nofollow”>
Bookmark – check out the practice file
Writing & Designing
for theWeb
“If you start with a bang, you won’t end in a whimper” (T.S. Eliot)
Writing for the Web
4 C’s Creditable Clear Concise Coherent
Writing for the Web
Creditable Understand the user – age, skill level,
culture Let them know who you are and why
what you say is relevant and worth their time
Avoid exaggerations Avoid being too chatty or cutesy Take care with humor
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
Use active voice Define terms/Minimize jargon
Use lots of white space
Writing for the Web
Concise Keep it short – users Scan/Browse/Skim Use short words, sentences,
paragraphs One idea per paragraph and state in
first sentence Use of bulleted lists Say ‘many’ not ‘large number of’
Writing for the Web
Coherent Intuitive—Speak ‘with’ not ‘at’ the
reader Good menus – consistent & at top or
bottom Good connections between
paragraphs, pages, ideas EDIT, EDIT, EDIT – spell and
grammar check & then EDIT again
Sample
St. 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
In 2005, three of St. Louis’ most visited attractions were: Gateway Arch Scott Joplin’s home St. Louis Zoo
Other suggestions???
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
Designing for the Web – Content Pet Peeves
Content (much of this is review)Too long – too much scrollingNot relevant or creditableInconsistency in language – style
and tonePunctuation and grammar errors
Designing for the Web – Content Solutions
Content – some answersDate each page (include reviewed
date)Use of logo and tag lineIdeas from our discussion on
Writing for the WebCustomize it for each user
Designing for the Web – Navigation Pet Peeves
Navigation – the concernsInability to find contentToo many clicks to get to linksToo many links (or too few)Poorly labeled links OR icons that
look like links but are notDead-end pages
Designing for the Web – Navigation Solutions
Navigation – some answersKeep navigation simple and
repetitive (same place & function on each page)
Organize information in order your user will look for it
Designing for the Web – Design Pet Peeves
Design itself – concernsToo many fonts and colorsClutterSlow downloads due to graphicsPop up windowsPlugins Accessibility – (multiple browsers and
special users)
Designing for the Web – Design Solutions
Design itself – some answersUse san serif typefaces (Arial)Avoid caps and overuse of bold/italicsText flush left for optimum readingKeep pages to 50-70KB (3-10 sec.
download)Don’t design for newest onlyContact Us!!! -- & meaningful URLs
Designing for the Web – Design Solutions
Designing it – more answersKeep backgrounds in the backgroundBackground should not interfere with
link colorProvide contrast between text and
backgroundMake sure image size balances on pageAdd text labels and use of ALT for
special users
Our successful website
Conveys its own distinctive image (to help enhance your organization’s)
Attractive & up-to-dateUnderstands and meets its users
needs (and changes as those needs change)
Offers choices and customization
Evaluate these websites
http://www.nypl.orghttp://www.plcmc.lib.nc.us/http://www.yale.edu
/academics/libraries.html http://www.lib.fsu.edu/http://www.law.cornell.edu/http://www.sisseton.k12.sd.us/default.
htm
Create Your Own
DTDFour required tagsMetaLink
bookmark
ImageListCombination of
above
TableColorHeadingFonts Paragraph/Line
breakMailto:Combination
HTML -- Let’s Review
HTML’s basic four tags<html></html><head></head><title></title><body></body>
Document Type Definition (long entry above <html> tag defining HTML version used)
HTML -- Let’s Review
Container vs empty tagsContainer <p></p>; <a></a>Empty <br>
Attributes (modify HTML tags)<img src=“my.jpg” height=“25”
width=“30” alt=“My Image”>Four attributes (src, height, width,
alt)
HTML -- Let’s Review
Heading Elements - varies font sizeLevels 1 (largest) to 6 (smallest)<h1></h1>Inserts a line break before and after
Paragraph Tag<p></p>Inserts a line break before and after
HTML -- Let’s Review
Line Break Tag<br>Manual line break
Text formatting<b></b> <em></em><i></i> <strong></strong><u></u> (would you use???)
HTML -- Let’s Review
TablesTags to remember
<table><tr><td><td></tr></table>Table attributes to remember
cellpadding, cellspacing, border, width, summary, heading
Table data cell attributes to rememberalign, valign, colspan, rowspan
HTML -- Meta tags
Meta tags<meta http-equiv=“Content-Type”
content=“text/html; charset=iso-8859-1”><meta name=“description” content=“A
short paragraph about the page.”><meta name=“keywords”
content=“library, libraries, MU libraries”><meta name=“author” content=“Barbara
Knotts”>
Meta Tags
How are they used Search engine indexing Can we prevent indexing
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
Google example (similar info. on Yahoo help)http://www.google.com/remove.html