Lecture 2011 09 19

HTML

elements: has a tag that identifies and structures a part of a web page.
can contain
- text: <title> my title </title>
- other elements: <head> <title> my title </title> </head>
- empty: <img src="image1.jpg" width="100" />
attributes: information about the data in the document (as opposed to actual data).
in the following, 'src' and 'width' are attributes: <img src="image1.jpg" width="100" />
values: the value of an attribute.
- numeric: number or percentage.
  numeric value does not contain units (where units would be appropriate, assume pixels)
- color: color name (16 predefined colors), or hex (#c0c0c0 for 'silver')

Elements can be:

block-level: always displayed on a new line: <p>, <h1>, ...
Block-level is the largest structural unit, containing other block level elements, inline elements, text.
inline: displayed in the current line: a word in a paragraph.
Inline element can contain other inline elements and text.
list item.

In the following HTML, the div contains three elements: img, p, and p. The img is an empty element. the first p contains text. The second p contains text. <div> <img src = "image.jpg" alt="alternate text" /> <p> this is text

<p> this is other text in a paragraph </p> </div>
Pause to look at the HTML and the DOM in Firebug.

this is text

this is other text in a paragraph

<div> is used to break your page into chunks that can be styled separately.

Dogs at home

There are four dogs living with us. All but one were "free dogs".

Sev has the nickname Sevig. She is a 12 year old Laborador Retriever

Sev came to us because she was too rough and exuberant with the little girls she was living with

Koko was named by his previous owner. We changed the spelling to match the Lord High Executioner in Mikado

Charlie is the only non-black dog in the group. He is the biggest dog at about 95 pounds.

Ada is the puppy at 8 months. She is a big chewer and very playful.

Use the <span/> tag to group smaller chunks of text or other inline elements. A <span/> can be identified with id= or put in a class with class= ... in order to identify and apply styles. Example (see the source code.

This is the beginning of text in a paragraph. This text is put in a span in order to separately style it.

Every element on a web page is treated by CSS as though it is enclosed in an invisible box. The box contains:

content area
padding, the space surrounding the content area
border, the outside edge of the padding
margin, the invisible space around the border.

Positioning an element box:

default: leave the box in the flow (AKA static)
absolute: remove box from flow and specify exact coordinates with respect to
- parent element: absolute
- browser window: fixed
relative to default position in flow: relative
z-index for overlapping boxes.

To-morrow, and to-morrow, and to-morrow, Creeps in this petty pace from day to day, To the last syllable of recorded time;

The quote contines: And all our yesterdays have lighted fools The way to dusty death.

Get three pictures of planets. Position them overlapping going down diagonally. The one on the bottom right should be on top.