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 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 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)