CSC 195 2014S, Class 05: HTML and Cascading Style Sheets
========================================================

_Overview_

* Preliminaries.
    * Admin.
    * Homework.
    * Thoughts on Postscript?
* Topics.
    * HTML basics.
    * CSS basics.
* Lab.

Preliminaries
-------------

### Admin

* Assignments
    * Assignment 5 is on the outline.
* Don't forget to apply for summer research (if you find it interesting).
* Sorry about the Postscript assignment confusion.
    * Remember that you can always get the source of the eboard by
      replacing .html with .md.
* Fun CS stuff
    * Technical interviews discussion today at 4:30
    * CS Table tomorrow (I hope)
* I have flash drives with virtual machines with new Xubuntu installs 
  with the latest gigls and psaifr on them.  Let me know if you want
  to borrow one.  (I would like my flash drives back.)
  <https://github.com/GlimmerLabs/virtual-mediascheme/blob/master/UserGuide.md>

### Assignment

Build a "portfolio" Web site for yourself.  It need not be large (most of
you are young), but it should look good and should show some thought about
how you break things up.  

Add a link to your portfolio Web site to the repo.

I'd prefer that you write your HTML and CSS manually, so that you get a
better sense of them.

### Thoughts on Postscript?

* Seems cool because lots of stuff uses Postscript.
* Steep learning curve, at least as compared to Processing.
* Rotation seemed really counter-intuitive - rotates around 
  (0,0), so you have to shift, rotate, and then shift again.
    * Yay, Linear algebra
* Very frustrating.
    * Seeing what the stack is like would be helpful.
* Functional programming seems difficult in Postscript.
* Mostly it's that stack manipulation seems very difficult.

HTML Basics
-----------

* Mark up text to indicate characteristics of the text
    * Logical markup: The *role* of the text (e.g., _The New York Times_)
    * Physical markup: The *appearance* of the text
* HTML mixes the two
    * Unless you are representing a particular document, try to use
      logical markup.
* In HTML, we mark text by surrounding it with "tags".
    * A paragraph: `<p>Once upon a time ...</p>'
* What kinds of logical and physical markup have you encountered?
    * Link (logical): `<a href="URL">TEXT</a>`
    * Images (in between): `<img src="URL" width="10" height="10"/>`
* User-defined logical roles
    * A small piece of text `<span class="NAME">...</span>`
    * A group of pieces of text `<div class="NAME">...</div>`

CSS Basics
----------

* Relationship of logical markup to appearance
* Given a tag, what are the characteristics

    P {
      font-family: Helvetica;
      color: white;
    }

    span.shouting  {
      font-family: Helvetica;
      font-weight: Bold;
      color: orange;
    }

Work!
----

Follow the instructions at 
<https://github.com/Grinnell-CSC195/html-examples/blob/master/mathlan.md>
to set up your Web site.

Clone the repo at

<https://github.com/Grinnell-CSC195/html-examples/>

into your public_html directory.

Read through the HTML.

Play with the CSS.