Web Publishing IIIWeb Publishing III06 May 200306 May 2003
Colleen BellColleen [email protected]@uoregon.edu
UO Libraries, IT CurriculumUO Libraries, IT Curriculum
ObjectivesObjectives
understand the role of web standards understand the role of web standards
increase familiarity with style sheets increase familiarity with style sheets
understand the use of tables on the web understand the use of tables on the web
know how to troubleshoot HTML errors know how to troubleshoot HTML errors and create valid HTML code and create valid HTML code
reinforce good web publishing practices reinforce good web publishing practices
HTML is a Web StandardHTML is a Web Standard
World Wide Web ConsortiumWorld Wide Web Consortium (W3C): speaking a (W3C): speaking a common language common language Evolved over time:Evolved over time: HTMLHTML (1992) (1992) HTML+HTML+ (1993) (1993) HTML 2.0HTML 2.0 (1995) (1995) HTML 3.2HTML 3.2 (1997) (1997) HTML 4.01HTML 4.01 (1999) (1999) XHTML 1.0 (2000)XHTML 1.0 (2000) XHTML 1.1 (2001)XHTML 1.1 (2001) XHTML 2.0 (2003) XHTML 2.0 (2003)
HTML is a Web Standard (cont’d)HTML is a Web Standard (cont’d)
Other markup languages:Other markup languages: XMLXML MathMLMathML SGML SGML
Other web standards:Other web standards: Web Accessibility InitiativeWeb Accessibility Initiative CSSCSS Hypertext Transfer Protocol (http) Hypertext Transfer Protocol (http)
Standards & Web BrowsersStandards & Web Browsers
Past: browser vendors developed own Past: browser vendors developed own HTML to keep market share HTML to keep market share fragmentationfragmentation
Browser WarsBrowser Wars
Now: browser vendors work with Now: browser vendors work with standards standards common ground, accessibility common ground, accessibility
Web Standards ProjectWeb Standards Project Viewable with Any Browser CampaignViewable with Any Browser Campaign
Standards-Compliant BrowsersStandards-Compliant Browsers
Internet Explorer: Windows v5.5 and Internet Explorer: Windows v5.5 and higher; Mac v5.0 and higherhigher; Mac v5.0 and higher
Netscape Navigator: v6.1 and higherNetscape Navigator: v6.1 and higher
Opera: v5.0 and higherOpera: v5.0 and higher
Mozilla: v0.9 and higherMozilla: v0.9 and higher
OthersOthers
Is Your HTML Up To Code?Is Your HTML Up To Code?
Exercise 1Exercise 1
15 minutes15 minutes
CSS RefresherCSS Refresher
separate presentation from contentseparate presentation from content
style sheet rulesstyle sheet rulesEnglishEnglish CSSCSS
Every level 1 heading Every level 1 heading (<h1>) should be (<h1>) should be green text on a yellow green text on a yellow background and background and centered on the pagecentered on the page
<<head>head><style type=“text/css”><!--<style type=“text/css”><!-- h1 { h1 { color: #009900;color: #009900; background-color: #cccc00;background-color: #cccc00; text-align: center;text-align: center; }}--></style>--></style> . . . . . . </head></head><body> . . .<body> . . .
Four Ways to Include StylesFour Ways to Include Styles
linkedlinked
embeddedembedded
importedimported
inlineinline
Linked Style SheetLinked Style Sheet
apply same style sheet to multiple pages apply same style sheet to multiple pages or entire siteor entire site
change the style sheet once - changes are change the style sheet once - changes are reflected on every pagereflected on every page
example:example:
<html><html><head><head><link rel=“stylesheet” type=“text/css” href=“linked-<link rel=“stylesheet” type=“text/css” href=“linked-styles.css”>styles.css”>......</head></head><body>...<body>...
Embedded Style SheetEmbedded Style Sheet
apply style sheet to single web page apply style sheet to single web page (WPII)(WPII)
example:example:<head><head><style type=“text/css”><!--<style type=“text/css”><!-- body {body { background-color: #000000;background-color: #000000; color: #ffffff;color: #ffffff; font-family: Verdana,Tahoma,Arial,Helvetica,sans-font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;serif; }}--></style>--></style>......</head></head><body>...<body>...
Imported Style SheetImported Style Sheet
useful for modularityuseful for modularity
code must appear on first line of code must appear on first line of embedded style sheetembedded style sheet
example:example:
<head><head><style type=“text/css”><!--<style type=“text/css”><!-- @import url(imported-styles.css);@import url(imported-styles.css); ......--></style>--></style></head></head><body>...<body>...
Inline StyleInline Styleapply a style in a single instance within apply a style in a single instance within a web pagea web page
least efficient way to apply style – every least efficient way to apply style – every instance must be edited to make global instance must be edited to make global changeschanges
example:example:<body><body><blockquote style=“text-align: justify; font-style: <blockquote style=“text-align: justify; font-style: italic”>This block quotation is aligned on both the italic”>This block quotation is aligned on both the right and left sides and italicized.</blockquote>right and left sides and italicized.</blockquote></body></body></html></html>
Class SelectorsClass Selectors
creates a style class that can be applied to creates a style class that can be applied to any element one or more timesany element one or more times
example:example:
<head><head><style type=“text/css”><!--<style type=“text/css”><!-- .punk { color: #66ff00; background-color: .punk { color: #66ff00; background-color: #ff3399; }#ff3399; }--></style>--></style></head></head><body><body><blockquote class=“punk”>This block quotation will <blockquote class=“punk”>This block quotation will have lime green text on an electric pink have lime green text on an electric pink background.</blockquote>background.</blockquote>......
ID SelectorsID Selectorsdefines a unique style for an element, can be applied defines a unique style for an element, can be applied only once in a documentonly once in a document
often used in conjunction with <div>often used in conjunction with <div>
example:example:
<head><head><style type=“text/css”><!--<style type=“text/css”><!-- #punk {#punk { border: 2px solid #66ff00;border: 2px solid #66ff00; text-align: justify; }text-align: justify; }--></style>--></style></head></head><body><body><div id=“punk”><div id=“punk”><p>This whole section of the page will have a lime <p>This whole section of the page will have a lime green border around it, and the text inside will be green border around it, and the text inside will be justified.</p>justified.</p>...</div>...</div>
InheritanceInheritancestyle rules are inherited: rule(s) for outer style rules are inherited: rule(s) for outer boxes also apply to boxes inside the boxesboxes also apply to boxes inside the boxes
example:example:
““Use black text on white background, with Use black text on white background, with the Arial, Helvetica, or sans-serif font for the Arial, Helvetica, or sans-serif font for everything in the body”everything in the body”<head><head><style type=“text/css”><!--<style type=“text/css”><!--body {body { color: #000000;color: #000000; background-color: #ffffff;background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; }font-family: Arial, Helvetica, sans-serif; }--></style>--></style> . . . . . .</head><body> . . .</head><body> . . .
The “Cascade”The “Cascade”
when there are two competing style rules when there are two competing style rules for the same selector, which one wins?for the same selector, which one wins?
Style Sheets Guide: The CascadeStyle Sheets Guide: The Cascade
TIPTIP: if you test every time you add or : if you test every time you add or change a rule, you’ll avoid most conflictschange a rule, you’ll avoid most conflicts
Add Some Class to Your StyleAdd Some Class to Your Style
Exercise 2Exercise 2
45 minutes45 minutes
TablesTablesused to display tabular dataused to display tabular data
also used frequently for page layoutalso used frequently for page layout
HTML for TablesHTML for Tables
Elements:Elements: <table>...</table>: defines a table<table>...</table>: defines a table <tr>...</tr>: defines a [<tr>...</tr>: defines a [ttable] able] rrowow <td>...</td>: defines a [<td>...</td>: defines a [ttable able ddata] cell within a rowata] cell within a row <th>...</th>: defines a [<th>...</th>: defines a [ttable able hheading] cell within a roweading] cell within a row
Optional attributes for <td> and <th>:Optional attributes for <td> and <th>: colspan: allows a cell to span more than one column colspan: allows a cell to span more than one column
(e.g., <td colspan=“2”>...</td>)(e.g., <td colspan=“2”>...</td>) rowspan: allows a cell to span more than one row rowspan: allows a cell to span more than one row
(e.g., <td rowspan=“5”>...</td>)(e.g., <td rowspan=“5”>...</td>)
Table ExampleTable Example<table><table><tr><tr> <td><br /></td> <td><br /></td> <th>Pros</th><th>Pros</th> <th>Cons</th><th>Cons</th></tr></tr>
<tr><tr> <th>Tables</th><th>Tables</th> <td>Control over layout</td><td>Control over layout</td> <td>Cumbersome to code</td><td>Cumbersome to code</td></tr></tr>...... </table></table>
ProsPros ConsCons
TablesTables More control over More control over layoutlayout
Cumbersome to codeCumbersome to code
Cascading Style Cascading Style SheetsSheets
Need to be more Need to be more flexible over layoutflexible over layout
Much easier to code Much easier to code and make changesand make changes
Browser DifferencesBrowser Differences
Internet Explorer:Internet Explorer:
treats the “50 px” as a maximumtreats the “50 px” as a maximum displays background colors of empty cellsdisplays background colors of empty cells border takes on background color of tableborder takes on background color of table
Netscape Navigator:Netscape Navigator:
treats the “50 px” as a minimumtreats the “50 px” as a minimum does not display the background colors of empty cellsdoes not display the background colors of empty cells
Add a TableAdd a Table
Exercise 3Exercise 3
20 minutes20 minutes
HTML EditorsHTML Editors
page production tools: Microsoft Wordpage production tools: Microsoft Word
site production tools: Dreamweaver, site production tools: Dreamweaver, GoLiveGoLive
BEWAREBEWARE: not all editors are equal: not all editors are equal
recommended editors: recommended editors:
ProductProduct PublisherPublisher PlatformPlatform PricePrice AvailabilityAvailability
DreamweaverDreamweaver MacromediaMacromedia Win, MacWin, Mac ~$100~$100 UO BookstoreUO Bookstore
GoLiveGoLive AdobeAdobe Win, MacWin, Mac ~$90~$90 UO Bookstore`UO Bookstore`
HTML-KitHTML-Kit ChamiChami WinWin FreeFree DownloadDownload
Editors: AdvantagesEditors: Advantages
more efficient for quick web page production, more efficient for quick web page production, especially with graphics and tablesespecially with graphics and tables
can import HTML code from existing pagescan import HTML code from existing pages
wide variety of featureswide variety of features
numerous free extensions and plug-ins availablenumerous free extensions and plug-ins available
build libraries of styles and scripts that you can build libraries of styles and scripts that you can reuse reuse
Editors: DisadvantagesEditors: Disadvantages
can be cumbersome if you're used to can be cumbersome if you're used to coding by handcoding by hand
they're not perfect and often introduce they're not perfect and often introduce errors into your codeerrors into your code
often don’t reflect the most current often don’t reflect the most current standards standards
Demo: HTML TidyDemo: HTML Tidy
Developed and endorsed by W3CDeveloped and endorsed by W3C
Cleans up generated codeCleans up generated code
Free from Free from W3CW3C
http://libweb.uoregon.edu/it/webpub/wp3/tihttp://libweb.uoregon.edu/it/webpub/wp3/tidydemo.htmldydemo.html
Guidelines for good practiceGuidelines for good practice
Know your message. Figure out what you Know your message. Figure out what you want/need to say and how you should say it want/need to say and how you should say it before you start coding pages. before you start coding pages.
Know your audience. Who are they? What do Know your audience. Who are they? What do they expect/want/need from you? From the they expect/want/need from you? From the web? What kinds of environments are they web? What kinds of environments are they working in? What hardware and software do working in? What hardware and software do they have available?they have available?
Know your resources. Well-crafted web sites Know your resources. Well-crafted web sites take time to both develop and maintain.take time to both develop and maintain.
What We Didn’t CoverWhat We Didn’t Cover
Programming and scripting for the web Programming and scripting for the web (e.g., Perl, Javascript, PHP) (e.g., Perl, Javascript, PHP) Dynamically generated web pages Dynamically generated web pages Cascading Style Sheets Level 2 (e.g., Cascading Style Sheets Level 2 (e.g., layers, positioning) layers, positioning) Graphics and multimedia production Graphics and multimedia production Web usability Web usability Designing for accessibility Designing for accessibility