Lecture Notes - Tues Feb 18

Computer Science @ Marlboro

Introduction to the Internet,Spring 2003

Lecture Notes - Tues Feb 18

Questions?
Last week of HTML.
Another reference: Bare Bones HTML
Lists
- You're looking at one.
  - Here's what it looks like when
  - you embed them.
Tables
- The basic idea
  
  one two
  
  one two
- Many, many variations.
Styles (CSS - Cascading Style Sheets)
- The idea is not to repeat FONT tags everywhere; instead define styles that apply in many places.
- Relativity new; somewhat inconsistent across various browsers.
- A style can be applied to all instances of a certain kind of tag, or to tags that you choose, with class="yourClassName"
- For example, this line.
- Look at the source at the top of the page to see how the format for the line above and below is defined.
- And this one.
- Here's what a style sheet look like.
```
 <style>
    H1 {
       font-family:  Verdana, Helvetica, sans-serif;
       font-size:    50%;
    }
    .bigPink {
       font-size:    200%;
       font-weight:  bold;
       color:        #FFCCCC;
    }
 </style>
```
- To define styles for you webpage, either
  1. insert the <STYLE> block inside the <HEAD>, or
  2. read in a style definition file (everything inside the STYLE tag) by putting a line like this in your HEAD:
```
  <LINK HREF="yourStyles.css" rel="stylesheet" type="text/css">
```
    (The advantage to that method is you can re-use the styles in many pages.)
  3. specify a style explicitly within a given tag, like this:
    Big red text.
- To invoke a pre-defined style, either
  1. just use the altered tag as you would normally
    (like this)
  2. or put class="yourClass" inside many container tags (TD, SPAN, P, DIV, BODY, ..)
    like this
- See http://www.htmlhelp.com/reference/css/ for more details.
- Teal's question: how do I get someone else's stylesheet, when the web browser won't display it? One answer: use "wget" from the command line to fetch it for you, then look at it in a text editor.
Validation Services
- Type "HTML validation" into Google.
- For example, validator.w3.org
Examples
- This webpage as HTML
- BioinfPerl | as HTML
- Web Pages That Suck.com
- slashdot. - lots of TABLE and FONT tags
- www.oreilly.com | as HTML| main.css - their stylesheet
  with TABLES, a stylesheet, and <SPAN CLASS=...>
- www.perlmonks.org - actually lets you define your own stylesheet...
- www.google.com - pretty short'n sweet : styles defined in HEAD, a bit of JavaScript, one table to line it all up. Few line breaks.
  (Browse around their site to look at some pretty clean layouts.)

Jim Mahoney ( mahoney@marlboro.edu)
Last modified: Thu Feb 20 12:23:05 EST 2003

one	two
one	two