CSSE 290 Web Programming

Lecture 2: More HTML; CSS intro

Reading: Ch. 2; 3.1-3.2

Attribution: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.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

Valid HTML Valid CSS!

Administrivia (a great word from former CSSE prof Curt Clifton)

Simple Use of Aptana Studio Eclipse Plugin

2.1: Basic HTML

Block and Inline Elements

elements

More About HTML Tags

Horizontal Rule: <hr /> Tag

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

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

Links: <a>

Link, or "anchor", to another page (inline) 

<p>
	Search 
	<a href="http://www.google.com/">Google</a> or our
    <a href="lecture01-internet.shtml">lecture 1 Slides</a>.
</p>

* Most browsers allow us to violate this rule and many other rules, but we should strive to stick to the rules.

Images: <img>

Inserts a graphical image into the page (inline) 

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

<img src="images/gollum.jpg" alt="Gollum" height="80" width="400" />

More About Images

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

HTML Character Entities

A way of representing any Unicode character within a web page; necessary when you want to include a character with special HTML meaning

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

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

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

<!-- My web page, by Suzy Student
     CSSE 290, Spring 2013       -->
<p>CSSE courses can be <!-- NOT --> a lot of fun!</p>

Let's get some practice! (exercise is on next slide)

Follow the link on the schedule page to get the starting code (a ZIP file). Extract the Session02 folder and all of its contents to somewhere on your computer.

Exercise (15 minutes) Try to Duplicate This Page

second page image

2.3: Web Standards

Web Standards

2.2: More HTML Elements

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

Quotation: <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 quotation: <q>

A short quotation (inline)

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

Inline quotation: <q>

A short quotation (inline)

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

We don't use quotation marks here for two reasons:

  1. IN some places, HTML shouldn't contain literal quotation mark characters; they should be written as &quot;
  2. using <q> allows us to apply CSS styles to all quotations in a page

HTML-encoding Text

&lt;p&gt;
	&lt;a href=&quot;http://google.com/search?q=claude&amp;ie=utf-8&quot;&gt;
		Search Google for Claude
	&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>First exam</ins> is on <del>May 16</del> <ins>Dec 19</ins>.
</p>

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

Superscripts and Subscripts (sup and sub Tags)

Superscripts and subscripts (inline) 

<p>
	x<sup>3i+2</sup> + y<sub>i</sub> - 6
</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>

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

<meta charset="utf-8" />
<meta charset="utf-8" http-equiv="refresh" content="5" />  <!-- Thanks, Dax! -->
<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

Exercises on Basic HTML

3.1: Basic CSS

CSS
Cascading Style Sheets

The Old Way to Change a Page's Appearance

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

Three Ways to Incorporate CSS Code

1. Attribute of an HTML element:

<p style="color:green; font-weight:bolder;">bold green text</p>

Three Ways to Incorporate CSS Code

1. Attribute of an HTML element:

<p style="color:green; font-weight:bolder;">bold green text</p>

2. In an HTML file's head section: 

<style>
  li {font-size: 85%;}
  p  {background-color: rgb(90, 0, 129);}
</style>

Three Ways to Incorporate CSS Code

1. Attribute of an HTML element:

<p style="color:green; font-weight:bolder;">bold green text</p>

2. In an HTML file's head section: 

<style>
  li {font-size: 85%;}
  p  {background-color: rgb(90, 0, 129);}
</style>

3. In a separate CSS file. link tag goes in the head section of an HTML file. 

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

Basic Syntax for CSS Rules 

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.

Font-related CSS Properties

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 CSS 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, ...
  • Usually the fonts in the list should be similar
  • Placing a generic font name at the end of your font-family value ensures that every computer/browser will find a valid font to use
  • List of web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

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.

Next Class Meeting ...