Web Programming Step by Step

Lecture 2
Basic HTML and CSS

Reading: Chapter 2; 3.1 - 3.3

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

Valid XHTML 1.1 Valid CSS!

2.1: Basic HTML

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

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

2.3: 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

2.2: More HTML Elements

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</li>
	<li>???</li>
	<li>Profit!</li>
</ol>
  • we can make lists with letters or Roman numerals using CSS (later)

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>

We don't use " marks for two reasons:

  1. XHTML shouldn't contain literal quotation mark characters; they should be written as &quot;
  2. using <q> allows us to apply CSS styles to quotations (seen later)

HTML Character Entities (2.2.4)

a way of representing any Unicode character within a web page

character(s)entity
< >&lt; &gt;
é è ñ&eacute; &egrave; &ntilde;
™ ©&trade; &copy;
π δ Δ&pi; &delta; &Delta;
И&#1048;
" &&quot; &amp;

HTML-encoding text

&lt;p&gt;
	&lt;a href=&quot;http://google.com/search?q=marty&amp;ie=utf-8&amp;aq=t&quot;&gt;
		Search Google for Marty
	&lt;/a&gt;
&lt;/p&gt;

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>

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" />

Favorites icon ("favicon")

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

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

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.