CSci 220 - Lecture 4

Web Page Design

© Morris Firebaugh


I. Introduction

A. Chapter 4: A Beginner's Guide to the Server

B. Basic UNIX Commands

C. How to Upload your own Web Page to a Server

D. Basic HTML Tags


II. Chapter 4: A Beginner's Guide to the Server

Web Pages are stored on the Servers of Internet Service Providers (ISPs)

Two Internet Service Providers (ISP) most familiar to your instructor are:

University of Wisconsin-Parkside

Steven Premeau, System Administrator

Wisconsin Internet

Mike Falaschi, President and CEO

The basic concept of HTML Links involves Source and Destination




Links are the very heart of hypertext!

<A  HREF="destination">source</A>



The following HTML code:

<P>In case anybody want to offer me a job, I've also included my <A 
ResumeMWF.html">Brief Resume.</A>




URL Path Links and UNIX Path Syntax



Absolute Addressing



Relative Addressing





Advantages to Relative Addressing:

III. Basic UNIX Commands

General format for UNIX Commands is

command  option(s)  filename(s)

Guidelines for UNIX Syntax:

List of Essential UNIX Commands

UNIX File Name Conventions

MIME Types

IV. How to Upload your own Web Page to a Server

Recall - Each University student has their own E-mail Account. Here is an algorithm for uploading your Web Page to your E-mail Account.

1.0 Create your home page folder, MyPage.www, containing your home page document, MyPage.html, and all associated graphics and html files.

2.0 Use Fetch, , to upload your folder to the Public-html folder of your E-mail account.

3.0 Use Fetch to set the Read/Write Permissions to give everyone reading permission but only the owner writing permission

4.0 Verify that you (and your curious public) can, indeed, read you Web page by opening the URL

Second Algorithm for posting Web Page to the Net (Fetch + TelNet)

V. Basic HTML Tags

<ADDRESS>      An address for further information
<BLOCKQUOTE>   Used for quotations, indentations, or substitute for TAB
<CENTER>       Used to center an element
<DIV>          A logical division with a particular format
<FORM>         An element for collecting and transmitting user input
<Hn>           An nth level heading, running from H1 (largest) to H6 (smallest)
<HR>           A horizontal rule for logical organization of a page.  Width and height adjustable.
<P>            New paragraph container
<PRE>          Pre-formatted text container for structuring white space such as this table
<SPAN>         A tag for specifying a sub-string for applying a particular style
<TABLE>        What can I say?
<UL>, <OL>     Lists such as unordered (bulleted) and ordered lists (numbered)

Consider the <Address> Element (Tag) in more detail


Your Name Here
Assignment 3A
Web Page Design 220
February 2, 20XX

which is done with the code:

     <address><P align="right">
     Your Name Here<BR>
     Assignment 3A<BR>
     Web Page Design 220<BR>
     February 2, 20XX<BR>


Character Formatting Elements - Logical Markup


VI. Homework Assignment #2

Updated January 21, 2001