html continues reviewing what we did last class; adding some new stuff
Post on 21-Dec-2015
222 views
TRANSCRIPT
HTML continues
Reviewing what we did last class;
Adding some new stuff
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
HTML -- Let’s Review
HTML’s basic four tags <html></html> <head></head> <title></title> <body></body>
HTML – Let’s review
Container vs empty tags Container <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 size Levels 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 -- Lists
Lists Ordered <ol></ol> -- numbered Unordered <ul></ul> -- bulleted Definition <dl></dl>
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 -- Tables
Tags to remember<table><tr><td></td></tr></table>
Table attributes to rememberCellpadding, cellspacing, border, width, summmary, heading
Table data cell attributes to remember Align, valign, colspan, rowspan
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>
Now for some extras
Meta tags Special characters Comments Open in new window
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
More Extras
Special characters Examples
– (nonbreaking space)St. 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
One more extra Opening webpage in a new browser
window:
<a href="http://blackboard.missouri.edu"target="_blank">Blackboard</a>
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.
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, …
HTML -- Applying Style
Style Inline - (to one tag) Embedded - (<style></style>--applies to
document) Linked - (separate .css file--can apply to
multiple documents)
Style -- Inline<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Style</title>
</head>
<body>
<h1 style="color: #ff0000;">Affected Text</h1>
<p>Now is the time…</p>
</body>
</html>
Style -- Embedded<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Style</title>
<style type="text/css">
h1 {color: #ff0000;}
</style>
</head>
<body>
<h1>Affected Text</h1>
<p>Now is the time…</p>
</body></html>
Style - Linked<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Barb’s Style</title>
<link type="text/css“ rel=“stylesheet” href=“mystyle.css” />
</head>
<body>
<h1>Affected Text</h1>
<p>Now is the time…</p>
</body></html>
Sample Cascading Stylesheet (css text file)
body{background-color: white}h1{font-size: 12pt;font-family: arial, helvetica, “sans serif”;color: black}
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.
Writing & Designing for your Website
‘If you start with a bang, you won’t end with a whimper’ (T.S. Eliot)
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)
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
Writing for the Web
4 C’s– Clear– Concise– Coherent– Credible
Writing for the Web
Clear– Assume your audience ‘knows nothing about
subject’--but could be interested– Begin with conclusionmost interesting infoend
with background– Define terms/Minimize jargon– Use active voice– 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 -- state it in first sentence– Use of bulleted lists– Say ‘many’ not ‘large number of’’
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
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
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)
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).
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 scrolling Not relevant or creditable Lack of summaries Inconsistency in language – style and tone Punctuation and grammar errors
Designing for the Web – Content Solutions
Content – some answers Date each page (include reviewed date) Use of logo and tag line Customize it for each user
Designing for the Web – Navigation Pet Peeves
Navigation – the concerns Inability to find content Too many clicks to get to links Too many links (or too few) Poorly labeled links OR icons that look like links but
are not Dead-end pages Getting lost
Designing for the Web – Navigation Solutions
Navigation – some answers Keep 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 – concerns Too many fonts and colors Clutter Slow downloads due to graphics Pop up windows Plugins Accessibility – (multiple browsers and special users)
Designing for the Web – Design Solutions
Design itself – some answers Use sans serif typefaces (Arial or Helvetica) Avoid caps and overuse of bold/italics Text flush left for optimum reading Keep pages to 50KB (3-10 sec. download) Don’t design for newest only Contact Us!!! -- & meaningful URLs
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
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