Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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)