Seminar 6

Building, Linking, & Mounting Web Pages

© Morris Firebaugh



Topics:



Creating a Web Page from Scratch

Let's assume we want to create a Web Page from scratch. We want it to contain the following elements:

We will use Adobe GoLive, the highest level Web page editor to which we have access.


Steps:

1. Open Adobe GoLive by clicking the icon

2. Edit the Title line to read "UNICO Page from Scratch"

3. Type three headings and assign them heading levels H1, H2, and H3 as shown:

4. Type a three-item bulleted (UL) list and a four-item ordered list (OL).

5. Copy a graphic from the WWW and insert it by dragging the graphic icon from the Palette:

6. Insert a Table by dragging the Table Icon from the palette:

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9

7. Build a list of Internal Links (Bookmarks), using: + + <Apple> drag

8. Build a list of External Links (REferences), using: +

9. Let's look at the Web Page we have created.



Web Pages with Structure - Tables & Frames

Tables are probably the single most powerful HTML tool for arranging information and enhancing the appearance of web pages.

 

Table 8.1
Sorting Algorithm Dependency on N
Sort Type
Random distribution
Nearly in order
Bubble sort
N2
N
Shell sort
N3/2
N
Quick sort
N log(N)
N2
Tree sort
N log(N)
N
Radix sort
N
N

 

 

 
<B><FONT COLOR="#0000FF" SIZE=+1>Table 8.1</FONT></B><br>
<I><FONT COLOR="#0000FF" SIZE=+1>Sorting Algorithm Dependency on N</FONT></I><FONT
 SIZE=+1></FONT>
<FONT SIZE=+1></FONT><TABLE BORDER="1" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD <P ALIGN=CENTER><B><FONT SIZE=+1>Sort Type</FONT></B></TD>
<TD <P ALIGN=CENTER><B><FONT SIZE=+1>Random distribution</FONT></B></TD>
<TD <P ALIGN=CENTER><B><FONT SIZE=+1>Nearly in order</FONT></B></TD></TR>
<TR>
<TD <FONT SIZE=+1>Bubble sort</FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N<SUP>2</SUP></FONT></TD>
<TD <P ALIGN=CENTER>N</TD></TR>
<TR>
<TD <FONT SIZE=+1>Shell sort</FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N<SUP>3/2</SUP></FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N</FONT></TD></TR>
<TR>
<TD <FONT SIZE=+1>Quick sort</FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N log N</FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N<SUP>2</SUP></FONT></TD></TR>
<TR>
<TD <FONT SIZE=+1>Tree sort</FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N log N</FONT></TD>
<TD <P ALIGN=CENTER>N</TD></TR>
<TR>
<TD <FONT SIZE=+1>Radix sort</FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N</FONT></TD>
<TD <P ALIGN=CENTER><FONT SIZE=+1>N</FONT></TD></TR>
</TABLE>
 

<TABLE BORDER="10" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD><IMG SRC="Flowers.JPG" HEIGHT="188" WIDTH="289"></TD>
</TR>
</TABLE>
 

<TABLE WIDTH="450" BORDER="3" CELLSPACING="0" CELLPADDING="0">
 <TR>
  <TD>Cell 1</TD>
  <TD>Cell 2</TD>
 </TR>
 <TR>
  <TD>Cell 3</TD>
  <TD>Cell 4</TD>
 </TR>
</TABLE>

Cell 1 Cell 2
Cell 3 Cell 4

 

 

 

 

 

Example 1: CyberStudio Table Inspector

Produces:

 
<TABLE BORDER="4" CELLPADDING="0" CELLSPACING="2" WIDTH="200">

			<TR>
				<TD></TD>
				<TD></TD>
				<TD></TD>
			</TR>

			<TR>
				<TD></TD>
				<TD></TD>
				<TD></TD>
			</TR>

			<TR>
				<TD></TD>
				<TD></TD>
				<TD></TD>
			</TR>
		</TABLE>

 

 

Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6
This is done with the HTML code

 
<TABLE WIDTH="250" BORDER="5" 
CELLSPACING="10" CELLPADDING="15" 
ALIGN="RIGHT" BGCOLOR="#990099">
<TR>
<TD WIDTH="50%">Cell 1</TD>
<TD WIDTH="50%">Cell 2</TD></TR>
<TR>
<TD WIDTH="50%" BGCOLOR="#009900">
Cell 3</TD>
<TD WIDTH="50%" BGCOLOR="#000099">
Cell 4</TD></TR>
<TR>
<TD WIDTH="50%" BGCOLOR="#990000" 
HEIGHT="100">Cell 5</TD>
<TD WIDTH="50%" BGCOLOR="#ff9999">
Cell 6</TD></TR>
</TABLE>

 

 

Example 2: ATable Header <TH> example

 

Starting by pushing HTML Editor's Table Button opens:

 

 

Modifying the resulting skeletal structure to read:

 

<center>
<TABLE BORDER=2>
<TH COLSPAN=3>On Windom Peak in San Juan Mountains of Colorado, Elev. 14087'
</TH>
<TR>
  <TD WIDTH=20> <BR> </TD>    
  <TD><IMG SRC="CHIBASIN.JPG"  ALIGN=TOP></TD>    
  <TD WIDTH=20> <BR> </TD>
</TR>
<TR>
  <TD HEIGHT=20></TD>    
</TR>
</TABLE></center>

 Produces:

 

On Windom Peak in San Juan Mountains of Colorado, Elev. 14087'

 

 

 

Example 3: Multi-Column Formatting using Invisible Tables

 

Chapter 8

Three-Dimensional Graphics -

Geometric Modeling and Visibility

M. Firebaugh

© Wm. C. Brown Communications, Inc.

We introduced three-dimensional graphics with very concrete examples of how 3D objects may be represented, manipulated, and displayed by projecting 3D world coordinates onto a 2D viewing surface. As in all areas of computer science, 3D graphics is subject to trade-offs along the concrete/abstract spectrum. The concrete examples illustrated in the last chapter have the virtue of simplicity and clarity but suffer from limitations intrinsic in the choice of polyhedral representations. Many of these limitations are overcome by moving to more abstract representations. Several of the more abstract representations for geometric modeling are presented in this chapter.

The second main emphasis of the chapter considers implementation issues of 3D clipping and hidden surface removal. These operations greatly improve the visual realism of the image and may be considered refinements inserted in the viewing pipeline.

The example above illustrates how the moving of a single control point can significantly modify the shape of the parametric surface. Since there are sixteen points to manipulate, the user has a tool of considerable power for sculpting the 3D surface shape desired. By changing the sign of the control points in the last two rows of the point control matrix, for instance, we can generate the surface shown in Figure 8.5.

 

(a)


(b)
Figure 8.4 Effects of variation of single control point.


The parametric representation of the bicubic patch of Figure 8.5 (b) can be obtained by multiplying out the matrices in equation 8.6 and is represented as:


 

 

What can we learn from this example?

 



FRAMES

Frames provide a more sophisticated, dynamic, and complex page structure

Frames are now widely used by modern, up-to-date Web Pages

However, frames also pose problems

Define frames:

Demonstrate commercial Web sites using frames

 


Frame Syntax

Structure of a frame document:

 

Overview:

 

Syntax of <FRAMESET>...</FRAMESET> tag:

 

Syntax of <FRAME>tag:

 

 

 

Use of TARGET attribute

 

<BASE TARGET="Body">
 

 

<A HREF="Body.html#A."TARGET="Body">

 


What Does All This Mean? Examples

Let's see how we can control the look of a page using frames.

 

Example 1: A simple, two-frame Web page


<HTML>
<HEAD>
<TITLE>SimpleExample1.html</TITLE> 
</HEAD> 
<FRAMESET COLS="50%,50%">
   <FRAME SRC="left.html"> 
   <FRAME SRC="right.html">
   </FRAMESET> 
</HTML>
 

<A HREF="SimpleExample1.html" TARGET="_top">

Example2: The Frame Structure of This Lecture

Let's examine this structure in more detail:

 

Example 3: The UW-P ADVISOR ADVISOR Page

 

 


Considerations in Designing Frames



Web Pages for Interaction - Forms

Concept of Pull vs. Push

A nice introduction to Forms is given in Adam Elman's Stanford Lecture

 

 


General Syntax of Forms

 
<FORM ACTION=....METHOD=....>
<INPUT NAME=....VALUE=....TYPE=....>
<INPUT NAME=....VALUE=....TYPE=....>
....
<INPUT NAME=....VALUE=....TYPE=....>
</FORM>


<FORM> Tag Syntax

<FORM>...</FORM> is a container tag with attributes

 


<INPUT> Tag Syntax

<INPUT> is a single tag defining a field or element of the form.  Attributes include:

 


<TEXTAREA> Tag Syntax

Container tag for a "free-form" scroll box for text.  Attributes include:



<SELECT> Tag Syntax

This tag allows users to select the form data from a pop-up menu

 


Text Entry Fields - Syntax

 
<FORM ACTION="/cgi-bin/print-result.pl" METHOD="POST">
<H3>The text box provides a way to enter up to one line of text.<BR>
-- Text box</H3>
<BR><INPUT TYPE="text" NAME="text-box" SIZE="30">
<H3>The Textarea tag can define a multiline area for the user to enter text.<BR>

These are the default contents -- they may be left blank.

</H3>
<BR><TEXTAREA NAME="text-area" ROWS=6 COLS=50>
These are the default contents -- they may be left blank.
</TEXTAREA>

</FORM>

Produces

 

The text box provides a way to enter up to one line of text.
-- Text box

The Textarea tag can define a multiline area for the user to enter text.
These are the default contents -- they may be left blank.

 


Choice Buttons - Syntax

 

<FORM ACTION="/cgi-bin/print-result.pl" METHOD="POST">
<H3>Checkboxes can be on or off; arranged in a group, they can allow multiple 
selections from a set of choices.<BR>
-- Checkbox
</H3>
<BR><INPUT TYPE="checkbox" NAME="this-box">

<H3>Radio buttons must be grouped, and within a group, only one can be 
checked at any given time.<BR>
-- Radio Button
<BR>
</H3>

<BR><INPUT TYPE="radio" NAME="radio-button" VALUE="on" CHECKED>On
<BR><INPUT TYPE="radio" NAME="radio-button" VALUE="off">Off

</FORM> 

Produces

 

Checkboxes can be on or off; arranged in a group, they can allow multiple selections from a set of choices.
-- Checkbox

Radio buttons must be grouped, and within a group, only one can be checked at any given time.

On

Off

 


Some Real Examples of Forms

Example 1: Basic Text Entry Field Forms 

 

This form adds you to our mailing list.

Name:

Street Address:

City:

State:

Zip:

 

HTML Code producing Example 1

 

<BLOCKQUOTE>
<P><FORM ACTION="mailto:firebaug@uwp.edu" METHOD="post"></P>
<H3>This form adds you to our mailing list.</H3>

<P>Name:<INPUT TYPE="text" NAME="surname" SIZE="20"></P>
<P>Street Address:<INPUT TYPE="text" NAME="street" SIZE="20"></P>
<P>City:<INPUT TYPE="text" NAME="city" SIZE="20"></P> 
<P>State:<INPUT TYPE="text" NAME="state" SIZE="2"></P>
<P>Zip:<INPUT TYPE="text" NAME="zip" SIZE="5"></P>
<P><INPUT TYPE=submit><INPUT TYPE=reset>
</FORM>
</BLOCKQUOTE>


Example 2: A Better Form for Forms - Tables

 

This form adds you to our mailing list.

Name:
Street Address:
City:
State:
Zip:



Example 3: Using Radio Buttons

This is the ideal format for on-line exams and quizzes



4. The first four principles of Web Page Design presented in the course included all of these except

the Web is the best source of information
borrow ideas - copy proven designs
use extensive graphics
stick with OOP
use hierarchical data structures (folders)

 



35. In the first third of the course, our CS-220 lectures

contained only PULL
contained only PUSH
contained both PULL and PUSH
contained neither PULL nor PUSH
can't say from the information given

 






Question 4 was produced by the HTML code:

 
4.  The first four principles of Web Page Design presented in the course included all of these except
<BLOCKQUOTE>
<INPUT TYPE="radio" NAME="Answ4" VALUE="1" > the Web is the best source of information<BR>
<INPUT TYPE="radio" NAME="Answ4" VALUE="2"> borrow ideas - copy proven designs<BR>
<INPUT TYPE="radio" NAME="Answ4" VALUE="3"> use extensive graphics<BR>          
<INPUT TYPE="radio" NAME="Answ4" VALUE="4"> stick with OOP<BR>
<INPUT TYPE="radio" NAME="Answ4" VALUE="5"> use hierarchical data structures (folders)
</BLOCKQUOTE>



Note Radio Button features:
  1. Each set allows only one (exclusive) answer
  2. Different sets are distinguished by the logical NAME (Answ4, Answ35, etc.)

 


Example 4: Check Boxes for independantly correct answers

Consider the following order for an ice-cream desert:


Please check each box to customize your ice-cream delight:

 

1-Dip

2-Dips

3-Dips

bananas

Cheries

Chocolate

Butterscotch

Marshmello


The syntax for generating checkboxes is:

 
<P><INPUT TYPE="checkbox" NAME="topping" VALUE="3-Dip"> 3-Dips</P>

 


Final Form Example -->  <SELECT> + <OPTION>

Suppose, in building a Student Registration system, we want to restrict responses on student status to:  FRESHMAN...OCCASIONAL/RETIRED.

 

<FORM ACTION="mailto:firebaug@uwp.edu" METHOD="post">
<H4>Select your current UW-Parkside student STATUS:</H4>
<SELECT NAME="status" MULTIPLE SIZE=3>
	<OPTION>Freshman</OPTION>
	<OPTION>Sophmore</OPTION>
	<OPTION>Junior</OPTION>
	<OPTION>Senior</OPTION>
	<OPTION>Graduate Student</OPTION>
	<OPTION>Occasional/Retired</OPTION>
</SELECT>

<P><INPUT TYPE=submit><INPUT TYPE=reset>
</FORM>

Produces

Select your current UW-Parkside student STATUS:



 



Linking HTML to PDF Documents

Linking is what makes the WWW a non-linear hypermedia

The basic concept of an HTML Link involves a Source and Destination



 

 

Links are the very heart of hypertext!

Let's Review Some  Considerations in Link Design

 


HTML Link Syntax

 The basic syntax of HTML Links requires the Anchor tag:  <A>...</A>

 

 

Note:

 


Text Links

The following HTML code:

<p>Let's learn about the wonders of Adobe Acrobat PDF by linking directly to<a href="Acrobat.pdf"> Acrobat.PDF</a></p>

Produces:

Let's learn about the wonders of Adobe Acrobat PDF by linking directly to Acrobat.PDF

 

Observations:

 


Graphics Links

The following HTML code:

produces

 

Let's see what happens when we click the hot image!


Observations:



Hybrid Links

The HTML Code:


<A  HREF="http://dragon.acadiau.ca/~giles/HTML_Editor/Documentation.html"><IMG  SRC="Rick2.GIF" border="2" height="143" width="95" align="left">Rick's HTML Editor Documentation</A>

produces
Rick's HTML Editor Documentation


The Color of Links

 


Relative Links and UNIX Path Syntax

Relative Links are used to connect your HTML document to others on your site or host computer.

 

 


Absolute Addressing

 


Relative Addressing

 

Observations:

 

Advantages to Relative Addressing:



Mounting Web Pages to Servers

Two Systems for Up-Loading Web Pages:


Fetch

1. Click on Fetch Icon

2. Select Shortcut identifying your WWW site

3. Navigate through the HFS to locate the folder for your page

4. Click <PutFile> or select "Put Folders and Files" under Remote Menu

5. Load all files and folders as "Raw Data"


GoLive

1. Select "FTP Upload and Download" under FILE Menu

2. Select appropriate URL site and password

3. Drag and Drop files and folders from original folders to appropriate server folder