Web Programming Step by Step

Lecture 3
More Basic HTML/CSS

Reading: 2.2; 3.1 - 3.3

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

Web page metadata: <meta> (2.3.3)

information about your page (for a browser, search engine, etc.)

<meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
<meta name="description" 
 content="Authors' web site for Building Java Programs." />
<meta name="keywords" content="java, textbook" />

• placed in the head of your XHTML page
• meta tags often have both the name and content attributes
  • some meta tags use the http-equiv attribute instead of name
• using a meta tag for Content-Type gets rid of validator "tentatively valid" warnings

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. I owned that newbie!)</dd>
	<dt>frag</dt> <dd>a kill in a shooting game</dd>
</dl>

Quotations: <blockquote> (2.2.3)

a lengthy quotation (block)

<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
	<p>Fourscore and seven years ago, our fathers brought forth
		on this continent a new nation, conceived in liberty, and 
		dedicated to the proposition that all men are created equal.</p>
</blockquote>

Inline quotations: <q>

a short quotation (inline)

<p>Quoth the Raven, <q>Nevermore.</q></p>

• Why not just write the following?
  <p>Quoth the Raven, "Nevermore."</p>

HTML Character Entities (2.2.4)

a way of representing any Unicode character within a web page

• Complete list of HTML entities
• How would you display the text & on a web page?

HTML-encoding text

<p>
	<a href="http://google.com/search?q=marty&ie=utf-8&aq=t">
		Search Google for Marty
	</a>
</p>

• To display the link text in a web page, its special characters must be encoded as shown above

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>

Preformatted text: <pre>

a large section of pre-formatted text (block)

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

• displayed with exactly the whitespace / line breaks given in the text
• shown in a fixed-width font by default
• how would it look if we had instead enclosed it in code tags?

Grouping styles

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

• a style can select multiple elements separated by commas
• the individual elements can also have their own styles (like h2 above)

CSS comments: /* ... */ (3.1.4)

/* This is a comment.
  It can span many lines in the CSS file. */
p {
	color: red;
	background-color: aqua;
}

• CSS (like HTML) is usually not commented as rigorously as programming languages such as Java
• the // single-line comment style is NOT supported in CSS
• the <!-- ... --> HTML comment style is also NOT supported in CSS

CSS properties for fonts (3.1.5)

font-family

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

• enclose multi-word font names in quotes

More about font-family

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

• can specify multiple fonts from highest to lowest priority
• generic font names:
  serif, sans-serif, cursive, fantasy, monospace

font-size

p {
	font-size: 14pt;
}

• units: pixels (px) vs. point (pt) vs. m-size (em)
  16px, 16pt, 1.16em
• vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
• percentage font sizes, e.g.: 90%, 120%

font-weight, font-style

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

• either of the above can be set to normal to turn them off (e.g. headings)

CSS properties for text (3.1.6)

text-align

blockquote { text-align: justify; }
h2 { text-align: center; }

• text-align can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

text-decoration

p {
	text-decoration: underline;
}

• can also be overline, line-through, blink, or none
• effects can be combined:

  text-decoration: overline underline;

The list-style-type property (3.2.4)

ol { list-style-type: lower-roman; }

• Possible values:
  1. none : No marker
  2. disc (default), circle, square
  3. decimal : 1, 2, 3, etc.
  4. decimal-leading-zero : 01, 02, 03, etc.
  5. lower-roman : i, ii, iii, iv, v, etc.
  6. upper-roman : I, II, III, IV, V, etc.
  7. lower-alpha : a, b, c, d, e, etc.
  8. upper-alpha : A, B, C, D, E, etc.
  9. lower-greek : alpha, beta, gamma, etc.
  10. others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha

Body styles

body {
	font-size: 16px;
}

• to apply a style to the entire body of your page, write a selector for the body element
• saves you from manually applying a style to each element

Cascading style sheets

• it's called Cascading Style Sheets because the properties of an element cascade together in this order:
  • browser's default styles
  • external style sheet files (in a <link> tag)
  • internal style sheets (inside a <style> tag in the page's header)
  • inline style (the style attribute of the HTML element)

Inheriting styles (explanation) (3.2.1)

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; }

• when multiple styles apply to an element, they are inherited
• a more tightly matching rule can override a more general inherited rule
• not all properties are inherited (notice link's color above)

Styles that conflict

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

• when two styles set conflicting values for the same property, the latter style takes precedence
• (later we will learn about more specific styles that can override more general styles)

W3C CSS Validator (3.2.6)

<p>
	<a href="http://jigsaw.w3.org/css-validator/check/referer">
		<img src="http://jigsaw.w3.org/css-validator/images/vcss"
			alt="Valid CSS!" /></a>
</p>

• jigsaw.w3.org/css-validator/
• checks your CSS to make sure it meets the official CSS specifications
• more picky than the web browser, which may render malformed CSS correctly

CSS properties for backgrounds

background-image

body {
	background-image: url("images/draft.jpg");
}

• background image/color fills the element's content area

background-repeat

body {
	background-image: url("images/draft.jpg");
	background-repeat: repeat-x;
}

• can be repeat (default), repeat-x, repeat-y, or no-repeat

background-position

body {
	background-image: url("images/draft.jpg");
	background-repeat: no-repeat;
	background-position: 370px 20px;
}

• value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.
• value can be negative to shift left/up by a given amount

Favorites icon ("favicon")

<link href="filename" type="MIME type" rel="shortcut icon" />

<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />

• the link tag, placed in the HTML page's head section, can specify an icon for a web page
  • this icon will be placed in the browser title bar and bookmark/favorite
• IE6: this doesn't work; must place a file in .ico format named favicon.ico in the root directory of the web server (instructions)