CSci 220 - Lecture 14

Web Page Design

© Morris Firebaugh

 


Introduction



A. Chapter 13: Server Side Includes

Some Server software (e.g., NCSA's Apache) supports SSIs


Examples of SSIs

The following HTML code:


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Server Side Includes</title>
</head>
<body>
<!--#if expr="\"$HTTP_USER_AGENT\" = \"Mozilla\""  -->
	Welcome Netscape User!
	<!--#elif expr="\"$HTTP_USER_AGENT\" = \"Explorer\""  -->
Welcome Internet Explorer User!
<!--#else  -->
Welcome!
<!--#endif  -->
<!--#echo var="DATE_LOCAL"   -->
<!--#include virtual="IconTable.html"  -->
<p>Let's see if it worked?</p>
<p></p>
<p>
</body>
</html>

This code produces. when we go to SSIncludes.html


Conclude:

Doesn't work with all servers.

Advise:

Avoid SSIs


B. Introducing Cascading Style Sheets

Style Sheets are the logical extension of the Style feature of modern word processors.

 


Style sheets are a perfect example of concept of abstraction

 


Styles come in two flavors:

 


Style Sheet Placement - Where are those boxes?

Flexible placement of Style Information

 


Four Options include:

  1. An external style sheet in a separate document referenced by the <LINK> tag in the head of the document to which it is to be applied

  2. An internal style sheet contained within <STYLE> tags defined within the head of the document to which it is to be applied

  3. An imported style sheet referenced by a URL embedded within <STYLE> tags

  4. Inline style changes using the STYLE attribute and applying only to the current element

 


For the Latest Definition of Style Sheets , see

 


C. Cascading Style Sheets

Cascading Style Sheets

 

Principles of Cascaded Style Sheets

  1. Styles cascade (i.e., they accumulate and refine style definitions).
  2. A Style Sheet File, style1.css , can contain the @Rule, @import "style2.css"
  3. Local definitions win.

 


D. Style Sheet Syntax

Let's look at some style sheet syntax

Style sheet syntax differs significantly from HTML syntax

selector { property : value }


An External Style Sheet Example: CS220Style.css

The "pretty printing" style for displaying the style sheet used for this lecture is:

 
/*  This is a Style Sheet Comment*/
BODY {background-color: #FFE4B5;
		  margin-left: 10px;
margin-right: 10px 
}A:link {
color: #4040ff
A:visited {
color: #FF6600 } A:active { color: #CCCC00 } H1 { font: 35pt Palatino; color: maroon; } H2 { font: 25pt Helvetica; color: DarkViolet; }
H3 { font: 20pt Palatino; } P { font: 14pt Palatino; } KBD,XMP { font-family: Courier,sans-serif; font-size: 14pt; font-weight: bold; color: Green; } . . . etc.

 

a:active { color: #cccc00 }
a:link { color: #4040ff }
a:visited { color: #ff6600 }
address { color: #660066; font-size: 14pt; font-family: Arial }
body { background-color: #ffe4b5; margin-right: 10px; margin-left: 10px }
code { color: blue; font-size: 14pt; font-family: Courier, sans-serif }
dfn { color: blue; font-size: 14pt; font-family: Courier, sans-serif }
dl { color: #8b4513; font: 14pt/20pt Palatino, "Times Roman", serif }
h1 { color: maroon; font: 35pt Palatino }
h2 { color: #9400d3; font: 25pt Helvetica }
h3 { color: #a52a2a; font: 20pt Palatino }
kbd { color: green; font-weight: bold; font-size: 14pt; font-family: Courier, sans-serif }
ol { color: #8b4513; font: 14pt/20pt Palatino, "Times Roman", serif }
p { color: #8b4513; font: 14pt Palatino }
p.classic { color: red; font-size: 14pt; font-family: Helvetica, sans-serif; margin-right: 10px; margin-left: 200px }
p.symbol { color: green; font-size: 14pt; font-family: Symbol; margin-right: 200px }
p:first-line { font-style:  }
pre { color: #dd0000; font-size: 14pt; font-family: Courier, sans-serif; border: solid 3pt red }
samp { color: blue; font-size: 14pt; font-family: Courier, sans-serif }
sub { color: #8b4513; font: 10pt Palatino, "Times Roman", serif }
sup { color: #8b4513; font: 10pt Palatino, "Times Roman", serif }
tt { color: #dd0000; font-size: 14pt; font-family: Courier, sans-serif }
ul { color: #8b4513; font: 14pt/20pt Palatino, "Times Roman", serif }
xmp { color: green; font-weight: bold; font-size: 14pt; font-family: Courier, sans-serif }

 

 


Linking in external style sheet with <LINK> tag

  <HEAD>	
  <meta name="generator" content="GoLive CyberStudio 3">
  <base target="Body">		 
 <link rel="STYLESHEET" type="text/css" href= "CS220Style. css">	
 </HEAD>
  <BODY>  .  .  .</BODY>

 

 


Defining <STYLE> in head of document:


 <STYLE TYPE="text/css">
p { font-size: 12pt }
pre { color: fuchsia; font-size: 14pt; font-family: Courier, sans-serif; text-indent: 0.25in; margin-right: 0.5in; margin-left: 0.75in; padding: 0.25in; border: solid 3pt fuchsia }
samp { color: blue; font-size: 14pt; font-family: Courier, sans-serif }
sub { color: #8b4513; font: 10pt Palatino, "Times Roman", serif }
 sup { color: #8b4513; font: 10pt Palatino, "Times Roman", serif }
 tt { color: #dd0000; font-size: 14pt; font-family: Courier, sans-serif }
 </STYLE>

 


Defining STYLE within element of HTML document:

  <P STYLE="font-size: 12pt; color: rgb(0, 0, 200)">How do you like this text style? 

How do you like this text style?

 


Defining Cascaded Style Sheets:

To define a cascade, you simply provide more than one LINK or STYLE elements, e.g.


<LINK REL=stylesheet HREF="corporate.css">

 
 <LINK REL=stylesheet HREF="techreport.css">  
 <STYLE TYPE="text/css">  p.special { color: rgb(230, 100, 180) }    
 </STYLE>


The elements are cascaded in the order they appear in the HEAD. A cascade can include style sheets applicable to different media. The user agent is then responsible to filtering out those style sheets which are inapplicable to the current situation.

 


The SPAN element

Sometimes it is desirable to apply a style to some text which doesn't have a structural role or established rendering convention. For instance, the first few words of an article may be rendered as small capital letters ("small-caps"). In such situations it is inappropriate to use an existing tag such as EM: on existing user agents the first few words would be mysteriously italicized. The new SPAN tag is recommended instead, as it has no effect on existing user agents.

An example based on CSS:

 <TITLE>Title</TITLE>    
  <STYLE TYPE="text/css">    SPAN { font-variant: small-caps }  </STYLE>...  <P><SPAN>The first</SPAN> few words of this article are in small-caps.

This would be formatted to look something like:

 


E. Style Sheet Examples

Example 1: Style1.htm


<HTML>
 <HEAD>
 <TITLE>STYLE SHEET PLAYGROUND</TITLE>
 <STYLE TYPE="text/css">
 <!-- 
  BODY {background-color: #000000;        margin-left: 10px;margin-right: 10px}  
 A:link {color: #8080ff} 
 A:visited {color: #ffff00}  
 A:active {color: #000000}  
 H1{font: 20pt OldEnglish;color: red} 
 H2{font: 18pt Greece;color: blue;          margin-left: 200px} 
H3{font: 16pt Comic Sans MS;color: green}    P{font-family: sans-serif;font-size: 10pt;              color: silver;} 
  P.classic{font-family:Greek;font-size:12pt;              color: red;margin-left: 200px;margin-right: 10px}
 P.funky {font-family: Comic Sans MS;font-size: 10pt;color: green;margin-right: 200px;}
 ADDRESS {font-family: Arial;font-size: 10pt;           color: silver }-->
  </STYLE>
  </HEAD>
 <BODY>
  <H1>Level One Head</H1>
 <P> some words of wisdom ... 
  <A HREF="galtable.htm">some words of wisdom</a>
 ... some words of wisdom
  ... some words of wisdom
  ... some words of wisdom
  ... some words of wisdom
  ... some words of wisdom
 ... some words of wisdom 
 ... some words of wisdom ...
 <H2>Level Two Head</H2>
 <P CLASS=classic> 
  further words of wisdom
 ... further words of wisdom 
 ... further words of wisdom 
... further words of wisdom
 ... further words of wisdom
 ... further words of wisdom 
 ... further words of wisdom ...
  <A HREF="valform.htm">further words of wisdom</A>
  ... further words of wisdom ...
  <H3>Level Three Head</H3>
 <P CLASS=funky> a little foolishness for levity ... 
 <A HREF="basic.htm">a little foolishness for levity</A> 
 ... a little foolishness for levity 
 ... a little foolishness for levity 
  ... a little foolishness for levity 
  ... a little foolishness for levity 
 ... a little foolishness for levity
 ... <HR>
 <ADDRESS>HTML Publishing for Netscape<BR>
 By Gayle Kidder &amp; Stuart Harris<BR>
  <A HREF="http://www.netscapepress.com/">
 Netscape Press</A> 1997</ADDRESS>
  </BODY>
 </HTML>  

Produces the Output

STYLE1.HTM

 

Example 2: Summary - TheThreeLevels of Style Sheets


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="GoLive CyberStudio 3">
<title>Welcome to GoLive CyberStudio 3</title>
<LINK REL="STYLESHEET" HREF="CS220Style.css" TYPE="text/css">
<STYLE TYPE="text/css">        
 H2 { color:green;font:20 point Helvetica }   
</STYLE>
</head>
<body>
<h1>This is Heading H1 defined in External Style Sheet CS220Style.css.</h1>
<h2>This is Heading H2 defined in the Embedded Style Sheet.</h2>
<h3 style="font-size: 18pt; color:blue">This is Heading H3 defined in the element H3.</h3>
<p>&nbsp;
</body>
</html>

  




Updated February 27, 2001