CSci 220 - Lecture 6

Web Page Design

© Morris Firebaugh

 


I. Introduction

 


II. Structural HTML Elements and Their Usage

Recall, the two basic elements of an <HTML>...</HTML> document are:

The following elements and their function are legitimate for the <HEAD> element

<BASE>

<FRAMESET>

<ISINDEX>

<LINK>

<LINK REL="STYLESHEET" HREF="../../Style/CS220Style.css" TYPE="text/css"> 

<META>

<SCRIPT>

<STYLE>

<TITLE>


Chapter 6 elaborates on the Lecture 4 discussion of structure elements in the <HEAD> element. The important concepts are:

<LINK REL="STYLESHEET" HREF="CS220Style.css" TYPE="text/css">

The <META> tag generally takes care of itself

<META  HTTP-EQUIV="Refresh"  CONTENT = "8;
 URL=http://www.uwp.edu/academic/computer.science/file2.html">	

The <STYLE> tag is valuable for over-riding global CSS definitions

 


The <BODY> element provides valuable attributes for setting colors

The <BODY> . . .</BODY> element contains the contents of the Web Page

Its attributes are used

<BODY  BACKGROUND="URL">
<BODY  BGCOLOR="colorvalue">


<BODY  LINK="colorvalue">



<BODY  ALINK="colorvalue">



<BODY  VLINK="colorvalue">

 

<BODY  TEXT="colorvalue">

Note: All of these attributes may appear in a single <BODY> tag




III. Text Alignment and Formatting Text

The next Chapter begins to deal with the problem of Controlling Spacing and WhiteSpace

Recall last week, we introduced 10 basic HTML tags.This week we add 10 additional tags, mainly related to improving style (appearance of WWW document).  These tags include:

  1. <BR> & <NOBR>
  2. <PRE>...</PRE>
  3. <SPACER>
  4. <DIV> & <CENTER>
  5. <HR>
  6. <BLOCKQUOTE>...</BLOCKQUOTE>
  7. <ADDRESS>
  8. Physical Style Tags
  9. Logical Style Tags
  10. Lists



The problem:  [Tabs], multiple spaces, [CRs], all reduce to 1 space.  For instance,

all prints to the screen in HTML as:



 Review <P>


This is line 1. <P> This is line 2. <P>This is line 3.<P>This is line 4.<P>
		

produces




Introduce the  <BR> tag:  <BR> means [CR] + [LF]


This is line 1. <BR> This is line 2. <BR>This is line 3.<BR>This is line 4.<BR>

with results:

 


Effect of multiple <P>s and <BR>s on WhiteSpace:


This is line 1. <P><P> This is line 2. <P><P>This is line 3.<P><P>This is line 4.<P><P>

produces

 while


This is line 1. <BR><BR> This is line 2. <BR><BR>This is line 3.<BR><BR>This is line 4.<BR><BR>

produces:



Conclude: 



<NOBR>...</NOBR> Tag 



<PRE>...</PRE> Tag

Suppose you had some really ugly text to present (e.g. time table copy), with the equivalent of multiple tabs, columns, etc.  How could you do it?  ANSWER --> the <PRE> tag.

    CSCI *105   INTRODUCTION TO COMPUTERS      3CR
17070    001     200P- 250P  T  R     *FIREBAUGH M
56133  L 001     300P- 450P  T        *FIREBAUGH M
51445  L 002     300P- 450P     R     *FIREBAUGH M



<XMP>...</XMP> Tag

Can do the same thing with <XMP> tag

<P>
    CSCI *105   INTRODUCTION TO COMPUTERS      3CR
17070    001     200P- 250P  T  R     *FIREBAUGH M
56133  L 001     300P- 450P  T        *FIREBAUGH M
51445  L 002     300P- 450P     R     *FIREBAUGH M

Note: with <XMP> tag, all embedded HTML code is displayed but not interpreted. This is often extremely useful, particularly in writing lectures on Web Page Design. HTML 4.0 has designated the tag obsolete, but browsers continue to support it.


<SPACER> Tag

Consider the following picture of Babbage's Difference Engine and the text accompanying it.

Figure 3.5
Here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep. And here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep. And here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep.


<SPACER> tag allows one to position the figure caption towards the center of the figure.
Figure 3.5
Here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep. And here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep.


 Note: <SPACER> tag is supported only by NetScape, so it is not recommended for general use. However, it is a natural for performing the [TAB] function.

Here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep. And here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep.



is done with the <SPACER TYPE="horizontal" SIZE=36> tag.


<DIV> & <Center>Tags

<Center> is equivalent to <DIV align="center">


Figure 3.5
Here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep. And here is a bunch of highly technical, historical information that is guaranteed to put you right to sleep.



Note: <Center> always works, but <DIV> does not.




IV. Using Blocks and Style Tags

<HR> Tag

A very useful style tag is the divider tag, <HR>. It comes with several attributes:

Examples:














<BLOCKQUOTE> Tag


The problem is: How do we indent?




V. Making Different Kinds of Lists

Recall: We have already seen the unodered list, <UL>... </UL>


Consider now the

<OL>... </OL> Tag

Attributes are:

TYPE="1/A/a/I/i"
START=n


The effects of various types of numberings are:

TYPE="1"

  1. Item one
  2. Item two
  3. Item three


 

TYPE="A"

  1. Item one
  2. Item two
  3. Item three


 

TYPE="i"

  1. Item one
  2. Item two
  3. Item three


Finally, consider the

<DL>... </DL> Tag = Definition List Tag
Attributes are:

</DT>=Definition Term
</DD>=Definition Paragraph



The code:

<H2>Company Policy: Leave Procedure</H2> <DL> <DT><B>Leave of Absence</B> <DD>Unpaid leave of absence will be granted on a case by case basis. A written request should be submitted to the Supervisor. . . </DL>

produces

Company Policy: Leave Procedure

Leave of Absence
Unpaid leave of absence will be granted on a case by case basis. A written request should be submitted to the Supervisor. . . 




VI. Laboratory Assignment #3

 





Updated January 24, 2001