create your own (you should be able to do for assignment) dtd/meta tags four required tags...
TRANSCRIPT
Create Your Own (you should be able to do for Assignment)
DTD/Meta tagsFour required tagsParagraph/Line breakImagesListLinksSpecial characters
TablesColorHeadingFonts Mailto:CommentOpen in new windowCombination of above
Adding ‘your’ Style
StyleStyle 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 -- Propertiesfont-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-alignMargins, Word/Line Spacing, …
HTML -- Applying StyleStyle
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: #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>
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 WebWhat stays the same
Who, What, Where, When, Why, HowThe facts are correctIt flows and is clearIt is INTERESTING (most important)
Writing for the WebConsider 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 Web4 C’s
ClearConciseCoherentCredible
Writing for the WebClear
Assume your audience ‘knows nothing about subject’--but could be interested
Begin with conclusionmost interesting infoend with background
Define terms/Minimize jargonUse active voiceUse lots of white space
Writing for the WebConcise
Keep it short – users Scan/Browse/SkimUse short words, sentences, paragraphsOne idea per paragraph -- state it in first
sentenceUse of bulleted listsSay ‘many’ not ‘large number of’’
Writing for the WebCoherent
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 WebCredible
Avoid exaggerationsAvoid being too chatty or cutesy Take care with humorMake 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 1St. 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 ArchScott Joplin’s homeSt. Louis Zoo
Other suggestions???
Designing for the WebGetting 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 PeevesContent – the concerns
Too long – too much scrollingNot relevant or creditableLack of summariesInconsistency in language – style and
tonePunctuation and grammar errors
Designing for the Web – Content SolutionsContent – some answers
Date each page (include reviewed date)Use of logo and tag lineCustomize it for each user
Designing for the Web – Navigation Pet PeevesNavigation – the concerns
Inability to find contentToo many clicks to get to contentToo 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 SolutionsNavigation – some answers
Keep navigation simple and repetitive (same place & function on each page)
Organize information in order your user will look for it
Touch screen Static navigation bar
Designing for the Web – Design Pet PeevesDesign itself – concerns
Too many fonts and colorsClutterSlow downloads due to graphicsPlugins Accessibility – (multiple browsers and special
users)Website (responsive), Native app, Web app???
Designing for the Web – Design SolutionsDesign itself – some answers
Use sans serif typefaces (Arial) – large photosAvoid caps and overuse of bold/italicsText flush left for optimum readingDon’t design for newest onlyContact Us!!! HTML5 and CSS3Native app, web app or one website that
auto-scales to mobile screen sizes will be optimal
Our successful websiteConveys 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 websiteshttp://www.nypl.orghttp://www.lib.fsu.edu/http://mit.edu/http://www.lapl.org/ya/index.htmlhttp://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)