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

    Once upon a time ...

    '
• 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.