COAP:COAP-3120/week2

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:

• Appendix C of the textbook
• CSS Selectors (Sitepoint)

Validation

Install (if not already done so)

• HTML validator
• For CSS, use http://jigsaw.w3.org/css-validator (you can install

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:

• http://tecfa.unige.ch/guides/css/ex/just-so-stories.html
• http://tecfa.unige.ch/guides/css/ex/just-so-stories.css
• Original: http://www.gutenberg.org/ebooks/2781

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

• http://www.gutenberg.org/
• Save the file to a appropriate directory

(2) Get the following CSS file

• http://tecfa.unige.ch/guides/css/ex/just-so-stories.css
• Save it to the same directory as the HTML

(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:

• Start from the CSS file shown in class (http://tecfa.unige.ch/guides/css/ex/just-so-stories.css)
• Validate both HTML and CSS
• Double-check the requirements below before you turn in your homework.

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

• Install Codeburner for Firefox if not already done so and/or use

Handouts

• CSS text styling tutorial (This is minimal suggested reading for getting the homework done)
• http://tecfa.unige.ch/guides/css/ex/just-so-stories.html (example HTML file)
• http://tecfa.unige.ch/guides/css/ex/just-so-stories.css (associated CSS file)

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)

• http://en.wikipedia.org/wiki/Web_typography
• http://www.alistapart.com/articles/on-web-typography/
• http://www.w3schools.com/cssref/css_websafe_fonts.asp
• http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Validation

• HTML validator (alternatively, use the FF exension): http://validator.w3.org/
• CSS validator: http://jigsaw.w3.org/css-validator/

Tools

• See the course home page for editing tools and browser extensions