more html stuff making your html more exciting html -- let’s review zhtml’s basic four tags z
Post on 21-Dec-2015
232 views
TRANSCRIPT
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 - Heading/Paragraph
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—Links (review)
Link examples <a href=“file2.html”>File</a> <a href=“class/file2.html”>File</a> <a href=“http://www.google.com
”>Google</a> <a
href=“mailto:[email protected]”>Email</a> (Cont.)
HTML – Link (new)
Linking to a section within a document
<a href=“http://slpl.org”><img src=“bookworm.gif” alt=“Bookworm”></a>
<a name=“top”></a><a href=“barb1.html#top”>Return to
top</a>
HTML -- Tables
Tags to remember<table><tr><td></td></tr></table>
Table attributes to rememberCellpadding, cellspacing, border, width, summmary, heading
Table data cell attributes to rememberAlign, valign, colspan, rowspan
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
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”>
Document Type Definition
DTD—tells browser which version HTML used HTML 4.01 Transitional DTD Include before opening HTML tag <!DOCTYPE HTML PUBLIC “-//W3C//DTD
HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd>
More Extras
Special charactersExamples
(nonbreaking space)St.&npsp;Louis
& (ampersand)Milk & Cookies
" (quotation mark)"Go Cards"
More Extras
Comment
Begin <!--Nothing below will display
End -->Check out source of
bengal.missouri.edu/~knottsb
More Extras
Comment
Begin <!--Nothing below will display
End -->Check out source of
bengal.missouri.edu/~knottsb
Create Your Own (you should be able to do for Portfolio)
DTDFour required tagsMetaLink
bookmark
ImageListCombination of
above
TableColorHeadingFonts Paragraph/Line
breakMailto:StylesCombination
Writing for the Web
Creditable Avoid exaggerations Avoid being too chatty or cutesy Take care with humor Understand the user – age, skill level,
culture Let them know who you are and why
what you say is relevant and worth their time
Writing for the Web
Clear Assume your audience ‘knows nothing about
subject’ Make titles and headers meaningful Make icons and links apparent Define terms/Minimize jargon (use links) Use active voice Allow searching & sitemap 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
Writing for the Web
Coherent Intuitive Good menus – consistent & at top or
bottom Links work Good connections between paragraphs,
pages, ideas EDIT, EDIT, EDIT – spell and grammar
check & then EDIT again – Tools can help
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 3 million visitors), Scott Joplin’s home (about 350,000 visitors), and the St. Louis Zoo (over 5 million visitors).
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???
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 creditableLack of summariesInconsistency 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 pagesGetting lost
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 sans serif typefaces (Arial or Helvetica)Use large enough/not too large fonts—not too
manyAvoid caps and overuse of bold/italicsText flush left for optimum readingKeep pages to 50KB (3-10 sec. download)Don’t design for newest onlyContact Us!!! -- & meaningful URLs
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.lib.fsu.edu/http://espn.go.com/http://www.kidsclick.org/http://www.sisseton.k12.sd.us/default.
htm