Extra Slides, week 1

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 1, sections 1.3 - 1.5

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.1 Valid CSS!

Additional XHTML elements

Not needed for our homework, but useful nonetheless

Definition list: <dl>, <dt>, <dd>

dl represents a list of definitions of terms (block)
dt represents each term, and dd its definition

<dl>
	<dt>newbie</dt><dd>one who does not have mad skills</dd>
	<dt>own</dt><dd>to soundly defeat
		(e.g. <q>I owned that newbie!</q>)</dd>
	<dt>frag</dt><dd>a kill in a shooting game</dd>
</dl>
newbie
one who does not have mad skills
own
to soundly defeat (e.g. I owned that newbie!)
frag
a kill in a shooting game

Computer code: <code>

code: a short section of computer code (usually rendered in a fixed-width font)

<p>
	The <code>ul</code> and <code>ol</code>
	tags make lists.
</p>

The ul and ol tags make lists.

Preformatted text: <pre>

a large section of pre-formatted text (block)

<pre>
         Steve Jobs speaks loudly
            reality distortion
           Apple fans bow down
</pre>
         Steve Jobs speaks loudly
            reality distortion
           Apple fans bow down

Using pre and code together

<pre><code>
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
</code></pre>

    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }

Practice problem

Write XHTML code to produce a page with the following Java code on it:

public class Numbers {
	public static void main(String[] args) {
		for (int i = 1; i <= 1000; i++) {
			if (i > 9 && i % 10 == 0) {
				System.out.println("I like " + i + "!");
			}
		}
	}
}

Additional CSS

Embedding style sheets: <style>

<head>
	<style type="text/css">
		p { font-family: sans-serif; color: red; }
		h2 { background-color: yellow; }
	</style>
</head>

Inline styles: the style attribute

<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>

This is a paragraph


Cascading style sheets

Inheriting styles (explanation)

body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }

This is a heading.

A styled paragraph. Previous slides are available on the web site.

  • a bullet list

Styles that conflict

p,h1,h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

This paragraph uses the first style above.

This heading uses both styles above.