create your own (you should be able to do for assignment) dtd/meta tags four required tags...
TRANSCRIPT
![Page 1: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/1.jpg)
![Page 2: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/2.jpg)
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
![Page 3: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/3.jpg)
Adding ‘your’ Style
![Page 4: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/4.jpg)
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.
![Page 5: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/5.jpg)
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, …
![Page 6: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/6.jpg)
HTML -- Applying StyleStyle
Inline - (to one tag)Embedded - (<style></style>--applies
to document)Linked - (separate .css file--can apply to
multiple documents)
![Page 7: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/7.jpg)
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>
![Page 8: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/8.jpg)
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>
![Page 9: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/9.jpg)
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>
![Page 10: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/10.jpg)
body{background-color:white;}h1{font-size:12pt;font-family:arial, helvetica, “sans serif”;color: #00ffff}
![Page 11: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/11.jpg)
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.
![Page 12: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/12.jpg)
‘If you start with a bang, you won’t end
with a whimper’ (T.S. Eliot)
![Page 13: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/13.jpg)
Writing for the WebWhat stays the same
Who, What, Where, When, Why, HowThe facts are correctIt flows and is clearIt is INTERESTING (most important)
![Page 14: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/14.jpg)
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
![Page 15: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/15.jpg)
Writing for the Web4 C’s
ClearConciseCoherentCredible
![Page 16: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/16.jpg)
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
![Page 17: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/17.jpg)
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’’
![Page 18: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/18.jpg)
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
![Page 19: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/19.jpg)
Writing for the WebCredible
Avoid exaggerationsAvoid being too chatty or cutesy Take care with humorMake it relevant and worth their time Check your facts
![Page 20: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/20.jpg)
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)
![Page 21: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/21.jpg)
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).
![Page 22: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/22.jpg)
Sample 1 – concise, scannable, & objective
In 2012, three of St. Louis’ most visited attractions were:Gateway ArchScott Joplin’s homeSt. Louis Zoo
Other suggestions???
![Page 23: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/23.jpg)
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
![Page 24: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/24.jpg)
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
![Page 25: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/25.jpg)
Designing for the Web – Content SolutionsContent – some answers
Date each page (include reviewed date)Use of logo and tag lineCustomize it for each user
![Page 26: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/26.jpg)
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
![Page 27: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/27.jpg)
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
![Page 28: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/28.jpg)
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???
![Page 29: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/29.jpg)
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
![Page 30: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/30.jpg)
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
![Page 31: Create Your Own (you should be able to do for Assignment) DTD/Meta tags Four required tags Paragraph/Line break Images List Links Special characters Tables](https://reader038.vdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f4/html5/thumbnails/31.jpg)
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)