COAP:COAP-3120/week2

The educational technology and digital learning wiki
Jump to navigation Jump to search

... under construction .....

COAP 3120 Week 1 program

'Main topic'

  • Web typography and formatting of large texts

Main learning goals

  • Be able to include CSS in an HTML document: external files, internal style sheets, @import, inline
  • Understand CSS rules: Selectors and properties
  • Be able to format longer text
  • Be able to use HTML elements made for CSS (div and span)
  • Use of text/HTML/CSS editors
  • Use browser extensions for checking HTML and CSS validity, and analyzing pages
  • Think about good style and good visual style

Monday

HTML principles

  • The three dominant HTML families (HTML 4x, XHTML 1x, HTML5), a short introduction
  • The (X)HTML div and span tags
  • HTML 5 tags for text: section and article

Selectors

  • tags, position of tages, pseudo-tags

CSS properties for formatting text

  • Web typography (fonts)
  • Units
  • Line spacing and margins

Classroom activities

(1) Find a long text you want to work on. HTML must be clean and simple. Suggestions:

(2) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"


Wednesday

TBA (dealing with text, part II)

Homework 1

  • Styling of a text document, details TBA

Requirements

(1) Your text should include at least the following features

  • An external style sheet (make sure that there are no internal unintentional overrides)
  • margins
  • Line spacings
  • Appropriate font size for various text elements (in particular titles and paragraphs)

(2) A short report

  • The report should shortly explain your design, e.g. what you aim to achieve and how you did it.

'Due'

  • Monday week 3 (before start of class)

Submission'

  • Upload both the HTML file and the CSS file to the world classroom (hw 1)
  • Upload the report (in any format you like, HTML is recommended)
  • If you use other assets (e.g. pictures) you also must upload these. However, we suggest working with a text that doesn't include any ....

'Evaluation criteria'

  • Requirements (presence of CSS elements) - 20%
  • Visual design / originality - 30%
  • Usability - 10% (is the text readable ?)
  • Technical quality (CSS structure and documentation, valid HTML and CSS) - 20%
  • Presence and quality of the report - 10%
  • On time - 10 % (minus 5% for 2 days late, 10% for more)

Reading

Textbook

  • Chapter 2, The Bits that make up a Style Sheet
  • Chapter 3, Selectors (only pp 39-49)
  • Chapter 5, Applying Font Faces (only 73-82)
  • Chapter 6, Manipulating the Display of Text (only: “Line height” section)
  • Chapter 8, The Box Model (only: Margins section)

About web fonts and web typography (optional reading)