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

Exercise 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.

Exercise 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

Exercise 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

Exercise 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.