Web Publishing II Outline University of Oregon Libraries

Web Publishing II
Outline

Objectives

  • To increase knowledge of HTML
  • To be able to locate an image on the web and incorporate it into a web page
  • To understand the relationship between HTML and CSS
  • To be able to incorporate a style sheet into an HTML document
  • To reinforce good web publishing practices

Refresher

Hands On PracticeExercise 1: Web Publishing I Refresher [ 15 minutes ]

  • Creating/editing and publishing an HTML document
  • HTML as structural language
  • Containers, case, nesting
  • New HTML elements: address, block quotation, ordered list
  • New HTML construct: named anchors
  • HTML is a web standard; there are different versions out there, developed over time – we're using HTML 4.01

HTML Entities

entity n.: also character entity reference. Symbol or code that represents a character that cannot easily be entered on a keyboard.

  • Reference chart
  • Uses of entities: special symbols (e.g., ©, , £); math symbols and fractions (e.g., ∞, ½); diacritics (e.g., é, å, Æ); Greek symbols (e.g., Ω, ψ); punctuation (e.g., ¿, « »); and typographical symbols (e.g., -, ‡)
  • Most entities have both a character and numerical notation
  • Browser support (uneven)
  • Some common entities:
    Entity Name Numeric Code Descriptive Code Character
    ampersand 1 & & &
    less-than sign 2 &#60; &lt; <
    copyright &#169; &copy; ©
    fraction: one-half &#189; &frac12; ½
    small e, acute accent 3 &#233; &eacute; é
    small u, dieresis or umlaut mark 3 &#252; &uuml; ü

    1. Should be used instead of a plain & in web pages (& has special meaning in HTML).
    2. If you want to display HTML code on a web page, replace the initial angle bracket (<) with its entity.
    3. To save time use a word processor to create a document in another language then convert it to HTML.

Hands On PracticeExercise 2: Copyright Your Web Page [ 5 minutes ]

More on Images

  • Review of the image element
  • More attributes: width, height, align (deprecated), border (deprecated)
  • File types: GIF, JPEG
  • Finding images on the web
  • Optimizing images for the web

Hands On PracticeExercise 3: Images from the Web [ 25 minutes ]

Introduction to Cascading Style Sheets

deprecate v.: to express disapproval of

  • CSS summary
  • Separation of presentation (aesthetic) from structure and content (semantic)
  • Deprecated HTML elements: basefont, center, font, s, strike, u
  • Deprecated HTML attributes:
    attribute elements to which they apply
    align caption, div, h1...h6, hr, img, p, table, td, tr
    alink body
    background body, table
    bgcolor body, table
    color basefont, font
    hspace img, object
    link body
    size basefont, font
    start ol
    text body
    type li
    vlink body
    vspace img, object
  • Style sheet rules replace these deprecated elements and attributes
  • Style element
  • Browser support of style sheets is uneven

Hands On PracticeExercise 4: Add A Little Style [ 25 minutes ]

Review

  • HTML elements: address, block quotation, image, ordered list, style
  • Entities
  • Web Standards
  • Separating presentation from structure and content
  • Creating a style sheet

Guidelines for good practice

  • When using color, make sure there is as much contrast as possible between the background and foreground (text, links, borders, etc.) colors.
  • Keep it simple - don't go overboard with graphical elements and color.
  • The goal is graceful degradation - can your web page stand on its own, without the style sheet? If yes, it will degrade gracefully in older browsers, and users will lose none of the content.