COAP:COAP-3120/week2: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
m (→Homework 1) |
||
| Line 75: | Line 75: | ||
Task: | Task: | ||
* Please style a text-centered HTML file | * Please style a text-centered HTML file | ||
* You can choose any HTML text (or other source) you like, '''under the condition that you | * 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/) | However, we suggest using an XHTML e-book from an online repository such as Gutenberg (http://www.gutenberg.org/) | ||
| Line 82: | Line 82: | ||
(1) Your min-project (homework) should include at least the following features: | (1) Your min-project (homework) should include at least the following features: | ||
* HTML | * HTML file with an external style sheet (make sure that there are no internal unintentional overrides) | ||
* Text indentations and margins | * Text indentations and margins | ||
* Line spacings | * Line spacings | ||
| Line 109: | Line 109: | ||
* Presence and quality of the report - 10% | * Presence and quality of the report - 10% | ||
* On time - 10 % (minus 5% for 2 days late, 10% for more) | * On time - 10 % (minus 5% for 2 days late, 10% for more) | ||
=== Alternative homework for CSS experts === | |||
* To be negotiated ... | |||
=== Reading === | === Reading === | ||
Revision as of 20:22, 31 October 2011
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
- Universal/global selector (using * or body selector)
- Using HTML tag names
- Using "position" of tags (children, siblings)
- Using pseudo-tags
- 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
Classroom activities
- Become familiar with Kompozer and Notetab
(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"
Tip: Use Codeburner (SitePoint), the Textbook appendices, or another good CSS reference.
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/)
Requirements
(1) Your min-project (homework) should include at least the following features:
- HTML file with an external style sheet (make sure that there are no internal unintentional overrides)
- Text indentations and 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)
- A small universal/global margin
(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.
Due
- Wednesday week 3 (before start of class)
Submission
- Upload the HTML file, the CSS file and 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 ....
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)
Alternative homework for CSS experts
- To be negotiated ...
Reading
Manual
- Install Codeburner for Firefox if not already done so and/or use
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)