COAP:COAP-3120/week2

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
COAP 3120
COAP-3120
COAP-3120/week1
COAP-3120/week2
COAP-3120/week3
COAP-3120/week4
COAP-3120/week5
COAP-3120/week6
COAP-3120/week7
COAP-3120/week8

COAP 3120 Week 2 program

Main topic

  • Web typography and formatting large simple 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
  • Handout: HTML

Selectors

  1. Universal/global selector (using * or body selector)
  2. Using HTML tag names
  3. Using "position" of tags (children, siblings)
  4. Using pseudo-tags
  5. Basic cascading and inheritance principles (last rule found will win, children inherit from parents)

CSS properties for formatting text

  • Web typography (in particular font-family, using web-safe fonts, using fallbacks)
  • Units (pt, cm, %, em/x, font-size keywords)

Resources:

Validation

Install (if not already done so)

Classroom activities

  • Become familiar with Kompozer and Notetab


Wednesday

CSS properties for formatting text

  • Web typography (in particular font-family, using web-safe fonts, using fallbacks)
  • Units (pt, cm, %, em/x, font-size keywords)
  • Line spacing: line-height property
  • Negative and positive indentation of the first line: text-indent property
  • Text filling: text-align property
  • Underlining etc: text-decoration property
  • Margins: margin-left, margin-right, etc.
  • Shortcuts

Example file used:

Classroom activities

(1) Find a long and simple text you want to work on. Since HTML should be clean and simple, we suggest to download an HTML file from

(2) Get the following CSS file

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

  • Create a link to the CSS file in the HTML, e.g. copy and adjust the following line:
<link rel="stylesheet" href="hw1-style.css" type="text/css">
  • Open the CSS file in your favorite editor and start making modifications

Tips:

  • Consider using the CSS text styling tutorial for guidance
  • If you are more ambitious, use Codeburner (SitePoint), the Textbook appendices, or another good CSS reference.
  • You may have to make minor modifications to the HTML file, e.g. add class attributes or div wrappers
  • Validate both HTML and CSS !

Homework 1

Subject: Styling of a text document

Task:

  • Please style a text-centered HTML file
  • You can choose any HTML text (or other source) you like, under the condition that you make significant modifications to the original CSS.

However, we suggest using an XHTML e-book from an online repository such as Gutenberg (http://www.gutenberg.org/)

Suggestions:

Requirements

(1) Your mini-project (homework) should include at least the following features:

  • HTML file with an external or internal style sheet (make sure that there are no internal unintentional CSS overrides)
  • Text indentations
  • Text margins
  • Line spacings
  • Appropriate font sizes and styles for various text elements (in particular for titles and paragraphs)
  • At least one pseudo tag selector (e.g. p:firstline, p:first-letter or :before)
  • At least a sibling selector (A + B)

(2) A short report

  • It should shortly explain your design, e.g. what you aimed to achieve
  • It should include references/sources used (in particular to the original HTML file). Be careful to respect general Webster rules about plagiarism.
  • It should shortly explain what you did in your CSS.
  • The report can be turned in any format (e.g. HTML, PDF or Word).

Due

  • Wednesday week 3 (before start of class)

Submission

  • Upload (a) the HTML file, (b) the CSS file (if external) and (c) the report to the world classroom (hw 1)
  • 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 ....
  • Make sure that the upload worked (e.g. don't forget to hit the submit button)

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 % (only 2 days late = 5%)

Alternative homework for CSS experts

Homework for T.B (to be discussed)

  • Create a commented list of resources about CSS compatibility.
  • In particular:
    • Try to find resources that deal with either "implementation status" (implemented/partial/not yet) and/or "buggyness" (implementation errors).
    • Focus on recent and last generation browsers (e.g. IE8 / IE9 and rather skip older versions)
    • Also try to find resources that offer "work-around solutions".
  • Edit CSS compatibility

Note: Don't yet start writing about CSS compatibility. First stage (homework 1) is finding resources.


Reading, other resources and online services

Manual

Handouts

Textbook

  • Chapter 2, The Bits that make up a Style Sheet
  • Chapter 3, Selectors
  • 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)

Validation

Tools

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3120/week2&oldid=36036"