CSci 220 - Lecture 4
Web Page Design
© Morris Firebaugh
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
- Wisconsin Internet
University of Wisconsin-Parkside
Steven Premeau, System Administrator
- The system uses a Windows NT Server running on Dual 300 MHz Pentium III Processors
- Each processor has 256 MB of RAM
- The Web Server uses 3.5 GB of Hard Drive
- The system uses NetScape Enterprize Server Software vs. 3.6
- The system has 50 accounts
- For the period of 4/25/99 - 4/28/99 the following statistics were recorded:
- There were 131,000 hits
- 5.1 GB of information (URL pages) were downloaded
- Other interesting statistics:
- The system serves 4,000 clients
- Of these, 1,300 are campus computers
- Your instructor's home page, morris.csci, consumes 83 MB
Mike Falaschi, President and CEO
- The complete system (WWW server, e-mail, billing, etc.) runs on six 350 MHz G3 Macs
- Each machine has 128 MB RAM and 12 GB Hard Drive
- Software running on the system includes:
- Web Star for downloading Web pages
- DNS for Mac for Domain Name Server
- Eudora (EIMS) for E-mail
- CyberGage for system verification (checks every 60 seconds)
- MacRadius for User Authentification
- Rumpus for FTP
- System statistics include:
- 5,000 accounts
- 150,000 hits/day
- Both 56 KB and ISBN Modems supported
- Service costs $15/month [call 884-8040]
- This includes 5 MB of memory for customer Web Pages
- Additional space costs $1/MB/month
The basic concept of HTML Links involves Source and Destination
- There are four general classes of Destinations
- Relative Links [links to other files on-site]
- Bookmark Links [links to targets within long documents - TOC]
- External Links [links to URLs off-site]
- Link to different protocols [FTP, Gopher, TelNet, mail, etc.]
- There are also three forms for Sources
- Text Links [either files or complete URLs]
- Graphics Links ["hot" images which link to other images or files]
- Hybrid Links [combination of text and graphics links]
Links are the very heart of hypertext!
- The basic syntax of HTML Links requires the anchor tag: <A>...</A>
- Attributes of the <A>...</A> tag include:
- HREF="link destination" [filename or complete URL]
- NAME="bookmark" [destination marker within a long HTML document]
- TARGET="frame label" [specifies frame (window) link should be sent to]
- All <A> tags must have an attribute
- The destination filename or URL must be enclosed in "..."
The following HTML code:
<P>In case anybody want to offer me a job, I've also included my <A
In case anybody want to offer me a job, I've also included my Brief Resume.
- Note, the source has no spaces between the text and the tags.
- HTML Editors eliminate much of the nitty-gritty syntax of building links.
URL Path Links and UNIX Path Syntax
- There are two ways to cite a reference
- Absolute addressing = giving the complete URL address
- Relative addressing = specifying where the file is "from here"
- Relative Links are used to connect your HTML document to others on your site or host computer
- Both Relative and Absolute addressing rely on HFSs and are specified in terms of UNIX language
- UNIX [Paths]
- DOS [Directories and Sub-directories]
- Macintosh and Windows [Folders and files]
- This can best be understood with the help of a HFS diagram:
- The Absolute Address of Lect7.html, in this HFS, would be:
- and the Absolute Address of Lect8.html would most likely be:
- while that of Lect9.html would be:
- Relative Addressing answers the question: How do I get to where I want to go from WHERE I AM NOW?
- The answer:
- To link to a file within the present directory (folder) just use the file name, e.g. "Dragon.GIF" [assuming I am in Lect7.html]
- To link to a file in a folder one level up, move up one level with a ". . /" and then specify the path. E.g., to get to Lect8.html, give the relative address as ". . /Lect8.www/Lect8.html"
- To link to a file in a folder two levels up, move up two levels with a ". . / . . /" and then specify the path. E.g., to get to Lect9.html, give the relative address as ". . / . . /Week.5/Lect9.www/Lect9.html"
- Each move up one level in the hierarchy requires a ". . /"
- Once you're on the correct level, just dig down with the standard "dir1/dir2/dir3/file.html" path definition.
Advantages to Relative Addressing:
- Can test out all your links on your local machine, OFF-LINE, in ProjectX folder.
- When FTPing ProjectX to the server, you are confident that the relative links are maintained.
III. Basic UNIX Commands
General format for UNIX Commands is
command option(s) filename(s)
Guidelines for UNIX Syntax:
- Commands are lowercase
- Options modify the way commands work, often designated by a "-"
- Filename designates the file you want to manipulate
- Spaces are delimiters; "ls -al" works, but "ls-al" doesn't
- The " * " serves as "wildcard". Search for "*.html" retrieves all html documents
List of Essential UNIX Commands
- cd [pathname] Changes directory to that specified by pathname
- cp [old] [new] Copies file old to new file, new
- cp [file] [directory] Puts copy of file into directory
- ls [options] [name(s)] Lists files and subdirectories in the working directory
- mkdir [dirname] Creates new directory called dirname
- more [filename(s)] Displays contents of filename one screen at a time
- mv [source] [target] moves or renames files and directories
- pg [options] [filename] Displays contents of file one page at a time
- passwd [user] Creates or changes password associated with user name
- pwd Print current working directory
- rm [filename] Deletes filename
- rmdir [dirname] Removes directory dirname
UNIX File Name Conventions
- Avoid spaces in filenames
- Avoid special charactors (i.e., use only letters and numbersw)
- Use proper suffixes (e.g., .html, .gif, .jpg)
- Remember - file names are case-sensitive
- MIME = Multipurpose Internet Mail Extension
- Files embedded or linked to HTML documents have certain file types (MIME types)
- Generally, each file type requires a specific plug-in or application program
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)
1) Open Fetch
2) Enter the following information in the dialog box:
Username: <the student's login name>
Password: <the student's password>
(The Director field tends to start with /pub, you need to clear it out.)
3) Double click on the public_html directory. This is where the web pages need to go.
4) Upload the pages, using the "Raw Data" file type
5) Start Telnet and log in to the e-mail machine.
6) Choose option 14 from the menu (exit to shell)
7) Type 'cd public_html'
8) Type 'chmod o+r*'
9) Type 'menu' to return to the menu
10) Use NetScape to test the page.
V. Basic HTML Tags
- Perhaps the most underestimated capability of the WWW is "Action at a Distance"
- Consider the Light on the Net Project
- We can, in fact, turn lights on and off in Tokyo, Japan
- Recall our discussion of the elements ( & tags) allowed in the <HEAD>...</HEAD>
- Next consider the "Block Level Formatting Elements"
<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
- I suggest you use this tag as the first element of all remaining HomeWork assignments
- Several reasons for using address tag
- Search engines look for it - you want your home page indexed
- It is a nice, concise way of labeling your homework
- All documents should contain it for purposes of feedback and currency
- Think of the <address> section as your "business card"
- The syntax for the <address> tag is:
- Here is the recommended style and code for your homework assignments.
Your Name Here
Web Page Design 220
February 2, 20XX
which is done with the code:
Your Name Here<BR>
Web Page Design 220<BR>
February 2, 20XX<BR>
Character Formatting Elements - Logical Markup
This is EXAMPLE including <xmp>
Character Formatting Elements - Physical Markup
This is STRIKE through, as in legal documents.
This is TELETYPE, mono-spaced font for computer code.
This is BIG, increment font size.
This is SMALL, decrement font size.
This is SUBscript, for technical writing.
VI. Homework Assignment #2
Updated January 21, 2001