CSC 104 Tutorial Notes
Bowen Hui
June 08th 2005
Recall from last time
=====================
General purposes of HTML:
- formatting, structure of document
- markup files in "plain text"
- use of two boards for examples
Lab recap:
- hand in last week's lab
- need to be comfortable with the following:
- netscape or firefox (or internet explorer)
- viewing the source code
- saving the source code on your account
- editing the saved file
- viewing the changes
- using the folder icon
- using the terminal icon
- "ls" to list the files in the directory
e.g., ls
- "pico" as the text editor
e.g., pico myfile.html
- printing
TODAY: learn to create websites from scratch!
Structure Tags:
==============================
- the simplest document is:
- "this is a test page" saved as .html
this is a test page
- "this is a test page" saved as .txt
this is a test page
- "this is a test page" saved as .html but without the tags
this is a test page
Structure Tags:
==============================
- header information
- e.g., title, meta
- title appears on browser's bar
- meta information doesn't appear on the browser at all
gives information about the page for other software (e.g., search engines)
- e.g.,
- how can meta tags be abused?
Structure Tags:
==============================
- contains the content of the page
- all the tags below belong in this section
- general page structure:
test
this is a test page
- why did the examples above work without the tag?
- which tags are *required*?
Structure Tags: Space related
=============================
- indenting an entire paragraph
ALICE was beginning to get very tired of sitting by her sister on the bank
and of having nothing to do: once or twice she had peeped into the book her
sister was reading, but it had no pictures or conversations in it, "and what
is the use of a book," thought Alice, "without pictures or conversations?'
- new paragraph
ALICE was beginning to get very tired
of sitting by her sister on the bank
ALICE was beginning to get very tired
of sitting by her sister on the bank
- page justification
Look @ me!
Look @ me!
Look @ me!
* notice upper vs. lower case letters
* notice use of double quotes
- new line "break"
ALICE was beginning to get very tired
of sitting by her sister on the bank
- horizontal rule that spans across the entire page in browser
ALICE was beginning to get very tired
of sitting by her sister on the bank
- HR can take parameters too
- comments
of sitting by her sister
of sitting by her sister
- comments do not appear on the browser, you can only see them in the .html
file
- what's it good for?
Style Tags
==========
- one big example:
So she was considering,
in
her own mind
(as well as she
could,
for the hot day made her feel very sleepy and stupid),
whether
the pleasure
of making a daisy-chain
would be worth the
trouble of
getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran
close by her.
- rewrite:
So
she
was
considering,
in
her
own
mind
(as well as she could,
for the hot day made her feel very sleepy and stupid),
whether
the pleasure
of making a daisy-chain
would
be worth
the
trouble
of getting up
and picking the daisies,
when
suddenly
a White Rabbit with pink eyes
ran close by her.
- "considering," is printed on its own, font style and spacing are different
* notice use of nested tags
- (preferred) nesting order
open1 open2 open3 ... close3 close2 close1
- headings are a way of combining multiple styles into one tag, including
putting itself into a new paragraph
...
- heading tags use *absolute* sizes
- what happens with would?
- font size (1 to 7) and colour do not both have to be specified
- what happened with font sizes > 7?
the
trouble
when
suddenly
- font tags use *relative* sizes
- some supported color names and hexidecimal value (#RRGGBB)
BLACK "000000"
WHITE "FFFFFF"
GREEN "00FF00"
MAROON
OLIVE
NAVY
PURPLE "FF00FF"
GRAY "C0C0C0"
RED "FF0000"
PINK
YELLOW
BLUE "0000FF"
TEAL
LIME
AQUA
FUSCHIA
SILVER
Lists
=====
- an unordered list:
- good morning
- konichiwa
- bonjour
- an ordered list:
- one
- item 2
- 3
- a nested list:
- we can have lists within lists
- the first embedded list is unordered
- within this one, there is an ordered list
- number 1
- number 2
- the second embedded list is ordered
- within this, there is an unordered list
- put more information here
- more nested lists can be created
- the numbering continues here
- if this were an ordered list, this item would be #4
- the list numbering can be changed in ordered lists
- one
- item 2
- 3
- fourth element
- five
Tables
======
- simple table with 2 rows and 3 columns:
this table has 6 cells
- formatting the table
add a border to the table
set the width of the table
colspan allows a cell to span across multiple columns
rowspan allows a cell to span across multiple rows
maintains indentation/justification of text within table
does not show unwanted borders
- colspan example
| R1C1-2 |
| R2C1 | R2C2 |
| R3C1 | R3C2 |
- rowspan example
| R1-2C1 | R1C2 |
| R2C2 |
| R3C1 | R3C2 |
- table width
absolute: