1 / 29

Web Publishing III 06 May 2003

Web Publishing III 06 May 2003. Colleen Bell cbell@uoregon.edu UO Libraries, IT Curriculum. Objectives. understand the role of web standards increase familiarity with style sheets understand the use of tables on the web know how to troubleshoot HTML errors and create valid HTML code

hanna-wolf
Download Presentation

Web Publishing III 06 May 2003

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Publishing III06 May 2003 Colleen Bellcbell@uoregon.edu UO Libraries, IT Curriculum

  2. Objectives • understand the role of web standards • increase familiarity with style sheets • understand the use of tables on the web • know how to troubleshoot HTML errors and create valid HTML code • reinforce good web publishing practices

  3. HTML is a Web Standard • World Wide Web Consortium (W3C): speaking a common language • Evolved over time: • HTML (1992) • HTML+ (1993) • HTML 2.0 (1995) • HTML 3.2 (1997) • HTML 4.01 (1999) • XHTML 1.0 (2000) • XHTML 1.1 (2001) • XHTML 2.0 (2003)

  4. HTML is a Web Standard (cont’d) • Other markup languages: • XML • MathML • SGML • Other web standards: • Web Accessibility Initiative • CSS • Hypertext Transfer Protocol (http)

  5. Standards & Web Browsers • Past: browser vendors developed own HTML to keep market share  fragmentation • Browser Wars • Now: browser vendors work with standards  common ground, accessibility • Web Standards Project • Viewable with Any Browser Campaign

  6. Standards-Compliant Browsers • Internet Explorer: Windows v5.5 and higher; Mac v5.0 and higher • Netscape Navigator: v6.1 and higher • Opera: v5.0 and higher • Mozilla: v0.9 and higher • Others

  7. Is Your HTML Up To Code? • Exercise 1 • 15 minutes

  8. CSS Refresher • separate presentation from content • style sheet rules

  9. Four Ways to Include Styles • linked • embedded • imported • inline

  10. Linked Style Sheet • apply same style sheet to multiple pages or entire site • change the style sheet once - changes are reflected on every page • example:

  11. Embedded Style Sheet • apply style sheet to single web page (WPII) • example:

  12. Imported Style Sheet • useful for modularity • code must appear on first line of embedded style sheet • example:

  13. Inline Style • apply a style in a single instance within a web page • least efficient way to apply style – every instance must be edited to make global changes • example:

  14. Class Selectors • creates a style class that can be applied to any element one or more times • example:

  15. ID Selectors • defines a unique style for an element, can be applied only once in a document • often used in conjunction with <div> • example:

  16. Inheritance • style rules are inherited: rule(s) for outer boxes also apply to boxes inside the boxes • example: “Use black text on white background, with the Arial, Helvetica, or sans-serif font for everything in the body”

  17. The “Cascade” • when there are two competing style rules for the same selector, which one wins? • Style Sheets Guide: The Cascade • TIP: if you test every time you add or change a rule, you’ll avoid most conflicts

  18. Add Some Class to Your Style • Exercise 2 • 45 minutes

  19. Tables • used to display tabular data • also used frequently for page layout

  20. HTML for Tables • Elements: • <table>...</table>: defines a table • <tr>...</tr>: defines a [table] row • <td>...</td>: defines a [table data] cell within a row • <th>...</th>: defines a [table heading] cell within a row • Optional attributes for <td> and <th>: • colspan: allows a cell to span more than one column (e.g., <td colspan=“2”>...</td>) • rowspan: allows a cell to span more than one row (e.g., <td rowspan=“5”>...</td>)

  21. Table Example

  22. Browser Differences • Internet Explorer: • treats the “50 px” as a maximum • displays background colors of empty cells • border takes on background color of table • Netscape Navigator: • treats the “50 px” as a minimum • does not display the background colors of empty cells

  23. Add a Table • Exercise 3 • 20 minutes

  24. HTML Editors • page production tools: Microsoft Word • site production tools: Dreamweaver, GoLive • BEWARE: not all editors are equal • recommended editors:

  25. Editors: Advantages • more efficient for quick web page production, especially with graphics and tables • can import HTML code from existing pages • wide variety of features • numerous free extensions and plug-ins available • build libraries of styles and scripts that you can reuse

  26. Editors: Disadvantages • can be cumbersome if you're used to coding by hand • they're not perfect and often introduce errors into your code • often don’t reflect the most current standards

  27. Demo: HTML Tidy • Developed and endorsed by W3C • Cleans up generated code • Free from W3C • http://libweb.uoregon.edu/it/webpub/wp3/tidydemo.html

  28. Guidelines for good practice • Know your message. Figure out what you want/need to say and how you should say it before you start coding pages. • Know your audience. Who are they? What do they expect/want/need from you? From the web? What kinds of environments are they working in? What hardware and software do they have available? • Know your resources. Well-crafted web sites take time to both develop and maintain.

  29. What We Didn’t Cover • Programming and scripting for the web (e.g., Perl, Javascript, PHP) • Dynamically generated web pages • Cascading Style Sheets Level 2 (e.g., layers, positioning) • Graphics and multimedia production • Web usability • Designing for accessibility

More Related