Web Programming Step by Step, 2nd Edition

Lecture 2: More HTML; CSS

Reading: Ch. 2; 3.1

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

2.3: Web Standards

Web Standards

W3C HTML Validator 

<p>
	<a href="http://validator.w3.org/check/referer">
		<img src="http://webster.cs.washington.edu/w3c-html.png"
		alt="Validate" />
	</a>
</p>

Validate

2.2: More HTML Elements

Unordered list: <ul>, <li>

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>

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. HTML 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

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&quot;&gt;
		Search Google for Marty
	&lt;/a&gt;
&lt;/p&gt;

Deletions and insertions: <del>, <ins>

content that should be considered deleted or added to the document (inline) 

<p>
	<del>Final Exam</del> <ins>Midterm</ins> is on <del>Aug 29</del> <ins>Apr 17</ins>.
</p>

Abbreviations: <abbr>

an abbreviation, acronym, or slang term (inline) 

<p>
	Safe divers always remember to check their
	<abbr title="Self-Contained Underwater Breathing Apparatus">SCUBA</abbr> gear.
</p>

Computer code: <code>

a short section of computer code (usually shown 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>

Textbook phrase elements

<p>To create a directory, use the <code>mkdir</code> command:</p>
<pre><samp>[mdoocy@webster ~] $</samp> <kbd>mkdir <var>dirname</var></kbd></pre>
<p>(<code>mkdir</code> stands for <dfn>make directory</dfn>.)</p>

Web page metadata: <meta>

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

<meta charset="utf-8" />
<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> 

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

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

Basic CSS rule syntax 

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

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

CSS properties for colors 

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

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.

Grouping styles

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

This paragraph uses the above style.

This h2 uses the above styles.

CSS comments: /* ... */ 

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

W3C CSS Validator 

<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>
Valid CSS!