Transcript document

Create Your Own (you should be able to do for Assignment)
 DTD/Meta tags
 Tables
 Four required tags
 Color
 Paragraph/Line break
 Heading
 Images
 Fonts
 List
 Mailto:
 Links
 Comment
 Special characters
 Open in new window
 Combination of above
Adding ‘your’ Style
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
z Inline - (to one tag)
z Embedded - (<style></style>--applies to
document)
z 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: #00ffff”>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: #00ffff}
</style>
</head>
<body>
<h1>Affected Text</h1>
<p>Now is the time…</p>
<h1>Affected Text</h1>
</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: #00ffff
}
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.
‘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 conclusionmost interesting infoend 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 2012 some of the most popular
places were Forest Park (over 12 million) the Gateway
Arch (over 4 million visitors), the Botanical Garden
(about 900,000 visitors), and the St. Louis Zoo (over 3
million visitors).
Sample 1 – concise, scannable, & objective
 In 2012, 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 – the concerns
z Too long – too much scrolling
z Not relevant or creditable
z Lack of summaries
z Inconsistency in language – style and tone
z Punctuation and grammar errors
Designing for the Web – Content
Solutions
 Content – some answers
z Date each page (include reviewed date)
z Use of logo and tag line
z Customize it for each user
Designing for the Web – Navigation
Pet Peeves
 Navigation – the concerns
z Inability to find content
z Too many clicks to get to content
z Too many links (or too few)
z Poorly labeled links OR icons that look like links but are
not
z Dead-end pages
z Getting lost
Designing for the Web – Navigation
Solutions
 Navigation – some answers
z Keep navigation simple and repetitive (same
place & function on each page)
z Organize information in order your user will
look for it
z Touch screen
z Static navigation bar
Designing for the Web – Design Pet
Peeves
 Design itself – concerns
z Too many fonts and colors
z Clutter
z Slow downloads due to graphics
z Plugins
z Accessibility – (multiple browsers and special users)
z Website (responsive), Native app, Web app???
Designing for the Web – Design
Solutions
 Design itself – some answers
z Use sans serif typefaces (Arial) – large photos
z Avoid caps and overuse of bold/italics
z Text flush left for optimum reading
z Don’t design for newest only
z Contact Us!!!
z HTML5 and CSS3
z Native app, web app or one website that auto-
scales to mobile screen sizes will be optimal
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.lib.fsu.edu/
 http://mit.edu/
 http://www.lapl.org/ya/index.html
 http://sisseton.k12.sd.us/default.aspx
http://www.rockwood.k12.mo.us/Pages/default.aspx
 http://winners.webbyawards.com/2013/
 http://www.webpagesthatsuck.com and another

One we can all agree on (I hope)