Web Programming Step by Step

Lecture 2
HTML/CSS Basics

Reading: Ch. 2, 3.1

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

Basic HTML and Elements

Hypertext Markup Language (HTML) (2.1.1)

Structure of an XHTML page (2.1.2) 

<!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>Chapter 2: HTML Basics</title>

Paragraph: <p> (2.1.3)

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>

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>

Horizontal rule: <hr>

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

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

Block and inline elements (explanation)

elements

More about HTML tags

Links: <a> (2.1.4)

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

<p>
	Search 
	<a href="http://www.google.com/">Google</a> or our 
  <a href="lectures.html">Lecture Notes</a>.
</p>

Images: <img>

inserts a graphical image into the page (inline)

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

More about images

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

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>
  • br should not be used to separate paragraphs or used multiple times in a row to create spacing

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

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

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

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>

Nesting tags

Bad:

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

Unordered list: <ul>, <li> (2.2.1)

ul represents a bulleted list of items (block)
li represents a single item within the list (block) 

<ul>
	<li>No shoes</li>
	<li>No shirt</li>
	<li>No problem!</li>
</ul>

More about unordered lists

<ul>
	<li>Simpsons:
		<ul>
			<li>Homer</li>
			<li>Marge</li>
		</ul>
	</li>
	<li>Family Guy:
		<ul>
			<li>Peter</li>
			<li>Lois</li>
		</ul>
	</li>
</ul>

Ordered list: <ol>

ol represents a numbered list of items (block) 

<p>RIAA business model:</p>
<ol>
	<li>Sue customers for copying music</li>
	<li>???</li>
	<li>Profit!</li>
</ol>
  • we can make lists with letters or Roman numerals using CSS (later)

Web Standards

Web Standards (2.3.1)

W3C XHTML Validator (2.3.2) 

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

Validate

3.1: Basic CSS

The bad way to produce styles

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

Cascading Style Sheets (CSS): <link> (3.1.2) 

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

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

Basic CSS rule syntax (3.1.1) 

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

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

CSS properties for colors (3.1.3) 

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

This paragraph uses the style above.

property description
color color of the element's text
background-color color that will appear behind the element

Specifying colors

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

This paragraph uses the first style above.

This h2 uses the second style above.

This h4 uses the third style above.

CSS properties for fonts (3.1.5)

property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Complete list of font properties

font-family

p {
	font-family: Georgia;
}
h2 {
	font-family: "Courier New";
}

This paragraph uses the first style above.

This h2 uses the second style above.

More about font-family

p {
	font-family: Garamond, "Times New Roman", serif;
}

This paragraph uses the above style.

  • if the first font is not found on the user's computer, the next is tried
  • generally should specify similar fonts
  • placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

font-size

p {
	font-size: 14pt;
}

This paragraph uses the style above.

  • pt specifies number of point, where a point is 1/72 of an inch onscreen
  • px specifies a number of pixels on the screen
  • em specifies number of m-widths, where 1 em is equal to the font's current size

font-weight, font-style 

p {
	font-weight: bold;
	font-style: italic;
}

This paragraph uses the style above.