Web Publishing III 06 May 2003

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



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



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

Documents

Web Publishing III 06 May 2003