Basic Web Pages with XHTML
(and a bit of CSS)

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 1, sections 1.1 - 1.3

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!

Hypertext Markup Language (HTML)

XHTML

Structure of an XHTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		information about the page
	</head>

	<body>
		page contents
	</body>
</html>

Page title: <title>

describes the title of the web page

<title>CSE 190 M: HTML</title>

Paragraph: <p>

paragraphs of text (block)

<p>You're not your job.
You're not how much money you have in the bank.
You're not the car you drive.   You're not the contents 
of your wallet. You're not your         khakis.  You're 
   the all-singing, all-dancing crap of the world.</p>

You're not your job. You're not how much money you have in the bank. You're not the car you drive. You're not the contents of your wallet. You're not your khakis. You're the all-singing, all-dancing crap of the world.

Headings: <h1>, <h2>, ..., <h6>

headings to separate major areas of the page (block)

<h1>University of Whoville</h1>
<h2>Department of Computer Science</h2>
<h3>Sponsored by Micro$oft</h3>

University of Whoville

Department of Computer Science
Sponsored by Microsoft

Block and inline elements (explanation)

Horizontal rule: <hr>

a horizontal line to visually separate sections of a page (block)

<p>First paragraph</p>
<hr />
<p>Second paragraph</p>
<hr />

First paragraph

Second paragraph

More about HTML tags

Links: <a>

links, or "anchors", to other pages (inline)

<p>
	Search 
	<a href="http://www.google.com/">Google</a>
	now!
</p>

Search Google now!

More about anchors

<p><a href="1-internet.html">Lecture Notes 1</a></p>
<p><a href="http://www.google.com/" 
title="Search">Google</a></p>

Lecture Notes 1

Google

  • to make links that open in new windows, we'll need to learn Javascript (later)

Nesting tags

Bad:

<p>
	<a href="1-internet.html">Lecture Notes 1
</p>
<p>
	This text also links to Lecture Notes 1</a>
</p>

W3C XHTML Validator

<p>
	<a href="http://validator.w3.org/check/referer">
		<img src="http://www.w3.org/Icons/valid-xhtml11" 
		alt="validate" />
	</a>
</p>

Validate

Line break: <br>

forces a line break in the middle of a block element (inline)

<p>Teddy said it was a hat,<br />So I put it on.</p>
<p>Now Daddy's sayin',<br />
Where the heck's the toilet plunger gone?</p>

Teddy said it was a hat,
So I put it on.

Now Daddy's sayin',
Where the heck's the toilet plunger gone?

  • br should not be used to separate paragraphs or used multiple times in a row to create spacing

Images: <img>

inserts a graphical image into the page (inline)

<p>
	<img src="gollum.jpg" alt="Gollum from LOTR" />
</p>

Gollum from LOTR

More about images

<p>
	<a href="http://theonering.net/">
		<img src="gandalf.jpg" alt="Gandalf from LOTR"
		title="You shall not pass!" />
	</a>
</p>

Gandalf from LOTR

Practice Problem

Bilbo Baggins Frodo Baggins
Bilbo Baggins (Wiki) and Frodo Baggins (Wiki)

Result:Interaction Pane:

Comments: <!-- ... -->

comments to document your HTML file or "comment out" text

<!-- My web page, by Suzy Student 
CSE 190 D, Spring 2008 -->
<p>CSE courses are <!-- NOT --> a lot of fun!</p>

CSE courses are a lot of fun!

Phrase elements : <em>, <strong>

em: emphasized text (usually rendered in italic)
strong: strongly emphasized text (usually rendered in bold) 

<p>
	HTML is <em>really</em>,
	<strong>REALLY</strong> fun!
</p>

HTML is really, REALLY fun!

Introduction to CSS

producing styles with Cascading Style Sheets

The bad way to produce styles

<p>
	<font face="Arial">Welcome to Greasy Joe's.  You will
	<b>never, <i>ever, <u>EVER</u></i></b> beat 
	<font size="+1" color="red">OUR</font> prices!</font>
</p>

Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!

Cascading Style Sheets (CSS)

Basic CSS rule syntax

selector {
	property: value;
	property: value;
	...
	property: value;
}

p {
  font-family: sans-serif;
  color: red;
}

Attaching a CSS file: <link> 

<head>
	...
	<link rel="stylesheet" type="text/css" href="filename" />
	...
</head>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css"
href="http://www.google.com/uds/css/gsearch.css" />

CSS properties for colors

p {
	color: red;
	background-color: yellow;
}

This paragraph uses the style above.

Specifying colors

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }

This paragraph uses the first style above.
This heading uses the second style above.
This heading uses the third style above.

Grouping styles

p, h1, h2 {
	color: blue;
}
h2 {
	background-color: yellow;
}

This paragraph uses the above style.

This heading uses the above style.