Lectures‎ > ‎

Lecture 03: Layout and Markup

Lecture Slides



CSS in Google Docs

Create a cascading style sheet (CSS) for Google Docs text documents that:

  • changes the default body text to 11pt Sans Serif

  • indents all text other than headings by 1in

  • underlines all H1 headings and puts them in 18pt bold Sans Serif

  • displays H2 headings in 14pt bold Sans Serif italic

  • displays all links in red

  • puts an image saying "DRAFT" in the background of the page

(You need to sign up for a Gmail account in order to do this exercies.)

DOM Manipulation and Microformats

Download Firefox and the Greasemonkey extension. Read up on the DOM and JavaScript.

(a) Write a Greasemonkey script that finds all German “Postleitzahlen” (ZIP code) on a page, wraps them in a simple hCard microformat, and replaces them with a link to Google Maps to view the location.

(b) Write a Greasemonkey script that finds hCard microformat information on a page and reformats it: the name should be displayed in bold face red surrounded by a box, and the rest of the hCard should be displayed in red and not bold faced.

Thomas M. Breuel,
Apr 27, 2010, 7:49 AM