COAP:COAP-3120/week2: Difference between revisions
Jump to navigation
Jump to search
m (→Monday) |
mNo edit summary |
||
| Line 5: | Line 5: | ||
== COAP 3120 Week 1 program == | == COAP 3120 Week 1 program == | ||
'''Main topic''' | |||
* Web typography and formatting | * Web typography and formatting large simple texts | ||
'''Main learning goals''' | '''Main learning goals''' | ||
| Line 25: | Line 25: | ||
* The (X)HTML div and span tags | * The (X)HTML div and span tags | ||
* HTML 5 tags for text: section and article | * HTML 5 tags for text: section and article | ||
* Handout: [[HTML]] | |||
'''Selectors''' | '''Selectors''' | ||
# Universal/global selector (using * or body selector) | |||
# Using HTML tag names | |||
# Using "position" of tages (children, siblings) | |||
# Using pseudo-tags | |||
# Basic cascading and inheritance principles (last rule found will win, children inherit from parents) | |||
'''CSS properties for formatting text''' | '''CSS properties for formatting text''' | ||
* Web typography (in particular '''font-family''', using web-safe fonts, using fallbacks) | * Web typography (in particular '''font-family''', using web-safe fonts, using fallbacks) | ||
* Units (pt, cm, %, em/x, size keywords) | * Units (pt, cm, %, em/x, font-size keywords) | ||
* Line spacing: '''line-height | * Line spacing: '''line-height''' property | ||
* Negative and positive | * Negative and positive indentation: '''text-indent''' property | ||
* Text filling: '''text-align property''' | * Text filling: '''text-align property''' | ||
* Underlining etc: '''text-decoration''' property | * Underlining etc: '''text-decoration''' property | ||
* Margins (sometimes used as alternative for indentation) | * Margins (sometimes used as alternative for indentation) | ||
* Shortcuts | |||
Resources: | |||
* Apprendix C of the textbook | |||
* | |||
'''Validation''' | |||
Install (if not already done so) | |||
* [http://users.skynet.be/mgueury/mozilla/index.html HTML validator] | |||
* For CSS, use http://jigsaw.w3.org/css-validator (you can install | |||
'''Classroom activities''' | '''Classroom activities''' | ||
| Line 48: | Line 60: | ||
(2) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable" | (2) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable" | ||
Tip: Use Codeburner (SitPoint), the Textbook appendices, or another good CSS reference. | |||
=== Wednesday === | === Wednesday === | ||
| Line 89: | Line 103: | ||
=== Reading === | === Reading === | ||
'''Manual''' | |||
* Install [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] if not already done so and/or use | |||
'''Textbook''' | '''Textbook''' | ||
Revision as of 09:15, 31 October 2011
... under construction .....
COAP 3120 Week 1 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
- The (X)HTML div and span tags
- HTML 5 tags for text: section and article
- Handout: HTML
Selectors
- Universal/global selector (using * or body selector)
- Using HTML tag names
- Using "position" of tages (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)
- Line spacing: line-height property
- Negative and positive indentation: text-indent property
- Text filling: text-align property
- Underlining etc: text-decoration property
- Margins (sometimes used as alternative for indentation)
- Shortcuts
Resources:
- Apprendix C of the textbook
Validation
Install (if not already done so)
- HTML validator
- For CSS, use http://jigsaw.w3.org/css-validator (you can install
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"
Tip: Use Codeburner (SitPoint), the Textbook appendices, or another good CSS reference.
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)
- At least one pseudo tag selector (e.g. p:first-letter or :before)
- At least a sibling selector (A + B)
(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
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 (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)