report

____________________________________
____________________________________
First Name : Anthony
Last Name : Ku Ong
Student Number : 991040119
First Name : John
Last Name : Ngo
Student Number : 990991085
Course : CSC309 H1F
Date : Friday October 17, 2003.
Part 1 (a) Question 4.6
<html>
<head>
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
</head>
<body>
<!-- the original image -->
<img src = "deitel.gif" alt = "deitel.gif orig">
<br>
<!-- Question 4.6 a) Increase the image size to 100% -->
<img src = "deitel.gif" width = "400" height = "300" alt = "deitel.gif 4.6
a)">
<br>
<!-- Question 4.6 b) Increase the image size to 50% -->
<img src = "deitel.gif" width = "300" height = "225" alt = "deitel.gif 4.6
b)">
<br>
<!-- Question 4.6 c) Increase the image size to 2:1 ratio -->
<img src = "deitel.gif" width = "400" height = "200" alt = "deitel.gif 4.6
c)">
<br>
</body>
</html>
Part 1 (b) Question 4.7
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<!-- PART 1 XHTML -->
<!-- (a) 4.7 Create a link to each of the following
-->
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Part 1(a) Question 4.7</title>
</head>
<body>
<!-- create an unordered list -->
<ul>
<!-- (a) index.html located in files directory -->
<li><a href="files/index.html">Index.html Located
in Files Directory</a></li>
<!-- (b) index.html located in text subdirectory of the files
directory -->
<li><a href="files/text/index.html">Index.html Located
in Text subdirectory</a></li>
<!-- (c) index.html located in the other directory in your
parent directory -->
<li><a href="../other/index.html">Index.html Located
in Other Directory</a></li>
<!-- (d) A link to the President of the United States'
email address ([email protected]) -->
<li><a href=" mailto:[email protected]">President's Email</a></li>
<!-- (a) An FTP link to the file named README in the pub directory of
ftp.cdrom.com -->
<li><a href=" mailto:[email protected]">
ftp://ftp.cdrom.com/pub/README</a></li>
</ul>
</body>
</html>
Part 1(c) Question 4.8
<html>
<head>
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
</head>
<body>
<!-- Question 4.8 Write in XHTML a markup version of your resume>
<!-- Title of my Resume -->
<center>
<h1>
John Derrick Ngo
<h2>
26 Murray Ave.
<br> Scarborough, Ontario <br> M1S-2A2 <br>
<br>
</h2>
</h1>
</center>
<!-- Profile of My Resume -->
<h3 align = "left"><u> Profile: </u></h3>
<ul>
<li>
A self-motivated and quick-learning team player seeking to design and
implement <br>
professional websites with opportunities to utilize exceptional
technical, artistic, <br>
and communication skills.<br>
</li>
<li>
Able to learn and adapt quickly as a result of a strong problem solving
and <br>
Computer Science foundation at U of T. <br>
</li>
</ul>
<br>
<!-- My Education -->
<h3 align = "left"><u> Education: </u></h3>
<b> University of Toronto </b> <br>
September 2000 to Present <br>
Toronto, Ontario <br>
<i> Honours in Computer Science and Economics - 4th Year </i> <br>
<i> Specialist in Information Systems Program, Major in Economics </i> <br>
<br>
<b>St. Andrews College </b> <br>
September 1998 to June 2000<br>
Aurora, Ontario <br>
<i> Grade 11 to OAC </i> <br>
<br>
<br>
<!-- My Computer Skills -->
<h3 align = "left"><u> Computer and Language Skills: </u></h3>
<ul>
<li>
Proficient using utilities from Dreamweaver, Flash, Photoshop, MS Front
Page, Word, PowerPoint and Excel
</li>
<li>
Capable of scripting and Web development using Perl, Shell, Javascript,
SQL /MySQL HTML, XML, ASP, CGI, PHP
</li>
<li>
Java, C/C++, DB2, Visual Basic Language Programmer
</li>
<li>
Experienced in Internet hardware/software/ISP selection and
LAN/OS/software installation.
</li>
<li>
Comfortable working in Windows 95/98/NT and Unix Environments
</li>
<li>
Speaks English Mandarin and Filipino Fluently
</li>
</ul>
<br>
<!-- My Work Experience -->
<h3 align = "left"><u> Work Experience: </u></h3>
<b> Web Designer
- Blah Technologies Limited </b>
<br><i> April 2003 to Present </i> <br><br>
<ul>
<li>
Created WebPages for the company
</li>
<li>
Regular site maintenance and updates for the company
</li>
<li>
Created graphics/logo for the company website
</li>
</ul>
<br><br>
<b>Computer Operator - Trapp Inc. </b>
<br><i>January 2000 to August 2002</i>
<ul>
<li>
Assists in operating equipment including terminals and peripheral
equipment
</li>
<li>
Performs routine tasks such as monitoring and controlling disks and tapes
</li>
</ul>
<br><br>
<!-- Awards Recieved -->
<h3 align = "left"><u> Awards Recieved: </u></h3>
<ol type = "i">
<li>
Governor General’s Millennium History Prize 2000
</li>
<li>
Michael’s Prize for the Highest Mark in OAC History
</li>
<li>
Silver Medallist Ontario Winter Games 2000
</li>
<li>
Ontario Scholar 1999-2000
</li>
<li>
Honour Roll, St. Andrews College
</li>
<ol>
<br>
<br>
<br>
<!-- Awards Recieved -->
<h3 align = "center">References Provided Upon Request</h3>
</body>
</html>
Part 1(d) Question 5.7
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<!-- PART 1 - XTHML -->
<!-- (d)5.7 Create XHTML markup that produces the table in Fig 5.12 -->
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Part 1(d) Question 5.7</title>
</head>
<body>
<table border = "1">
<!-- note there is no header -->
<thead>
</thead>
<tbody>
<!--sets the first row (and only row) of this table -->
<tr>
<!--The first column of this row, sets table data-->
<td width = "65%" >
<h1>Objectives</h1>
<p>
<ul>
<li>To be able to create tables with rows
and columns of data.</li>
<li>To be able to control the display
and formatting of tables</li>
<li>To be able to create and use forms.</li>
<li>To be able to create and use image maps
to aid <br>hyperlinking</br> </li>
<li>To be able to use the <strong>
frameset</strong> element to
display multiple
<br>Web Pages</br></li>
</ul>
<em>
Yea, from the table of my memory
I'll wipe away all trival
<br>fond records. </br>
</em>
William Shakespeare
</p>
</td>
<!--The second column of this row, which
has the camel image-->
<td align = "center">
<img src = "camel.gif" width = "205"
height = "167" alt = "Picture of a camel" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Part 1(e) Question 5.8
<html>
<head>
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
</head>
<body>
<!-- Question 5.8 -->
<h1 align = "left"> Table Example Page </h1>
<table border = "1" align = "left" width = "24%">
<caption align = "left"> Here is a small example table.</caption>
<!-- the head of the table -->
<thead>
<tr><th> This is the head. </th></tr>
</thead>
<!-- the body of the table -->
<tbody>
<tr><td> This is the body.</td></tr>
</tbody>
</table>
</body>
</html>
Part 1(f) Question 5.7
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<!-- PART 1 - XTHML -->
<!-- (f)5.9 This is a University feedback form -->
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>University Feedback</title>
</head>
<body>
<h1>University Feedback Form</h1>
<p>Please fill out this form to help
us improve your next campus visit.</p>
<form method = "post" action = "/cgi-bin/formmail">
<p>
<input type = "hidden" name = "recipient"
value = "[email protected]" />
<input type = "hidden" name = "subject"
value = "Feedback Form" />
<input type = "hidden" name = "redirect"
value = "main.html" />
</p>
<!-- Defines a Name field to enter your text -->
<p><label>Name:
<input name = "name" type = "text" size = "25" />
</label></p>
<!-- Defines an address field to enter your text -->
<p><label>Address:
<input name = "name" type = "text" size = "25" />
</label></p>
<!-- Defines an email field that is "masked" with asterixes when
entered -->
<p><label>E-mail Address:
<input name = "email" type = "password"
size = "25" /></label></p>
<p>
<!-- Defines a text area where comments can be made -->
<p><label>Comments:<br />
<textarea name = "comments" rows = "4"
cols = "36"></textarea>
</label></p>
<!-- Defines check boxes where you can select an entry -->
<strong>Things you liked mout about the campus:</strong><br />
<label>Students
<input name = "thingsliked" type = "checkbox"
value = "Students" /></label>
<label>Location
<input name = "thingsliked" type = "checkbox"
value = "Location" /></label>
<label>Campus
<input name = "thingsliked" type = "checkbox"
value = "Campus" /></label>
<label>Atmosphere
<input name = "thingsliked" type = "checkbox"
value = "Atmosphere" /></label>
<label>Dorm Rooms
<input name = "thingsliked" type = "checkbox"
value = "Dorm Rooms" /></label>
<label>Sports
<input name = "thingsliked" type = "checkbox"
value = "Sports" /></label>
</p>
<!-- Radio Buttons that ask prospective student how they
<!-- became interested in the university.
<!-- Note: only one radio button
<!-- in a group can be selected.
<p>
<strong>How did you get interested in the University:
</strong><br>
<label>Friends
<input name = "howtosite" type = "radio"
value = "friends" checked = "checked" />
</label>
<label>Television
-->
-->
-->
-->
<input name = "howtosite" type = "radio"
value = "tv" /></label>
<label>Internet
<input name = "howtosite" type = "radio"
value = "internet" /></label>
<label>Other
<input name = "howtosite" type = "radio"
value = "other" /></label>
</p>
<!-- Submit and Reset Buttons for the form, note when clicked,
they do nothing -->
<p>
<input type = "submit" value =
"Submit Entries" />
<input type = "reset" value = "Reset Entries" />
</p>
</form>
</body>
</html>
Part 2 (a) Question 6.8
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<!-- PART 2 - CSS
-->
<!-- 2(a) 6.8 Displays the results of a Colour Survey -->
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Favourite Colour Survey</title>
<link rel = "stylesheet" type = "text/css"
href = "style_2a.css" />
</head>
<body>
<h1>Favourite Colour Survey</h1>
<form method = "post" action = "/cgi-bin/formmail">
<p>
<input type = "hidden" name = "recipient"
value = "[email protected]" />
<input type = "hidden" name = "subject"
value = "Feedback Form" />
<input type = "hidden" name = "redirect"
value = "main.html" />
</p>
<!-- See style_2a.css for more -->
<div class="vote">
<!-- Creates Radio buttons for the user to check their
favourite color -->
<p><strong>
Vote for your favourite Colour</strong> </p>
<p><label class="percent">Red
<input name = "howtosite" type = "radio"
value = "red" checked = "checked" />
</label></p>
<p><label class="percent">Blue
<input name = "howtosite" type = "radio"
value = "blue" />
</label></p>
<p><label class="percent">Yellow
<input name = "howtosite" type = "radio"
value = "yellow" /></label>
<p><label class="percent">Green
<input name = "howtosite" type = "radio"
value = "green" /></label>
<p><label class="percent">Orange
<input name = "howtosite" type = "radio"
value = "orange" />
</label></p>
<!-- Includes a reset and submit button
-->
<p>
<input type = "submit" value =
"Submit" />
<input type = "reset" value = "Reset" />
</p>
</div>
<!-- the <table> tag opens a table -->
<div class="colorChart">
<!-- creates an "invisible table" without any borders for
the results of the colour survey -->
<table border = "0" cellspacing=15 width = "100%"
summary = "This table provides information about
the price of fruit">
<!-- the <thead> is the first section of a table -->
<!-- it formats the table header area
-->
<thead>
<tr>
<!-- <tr> inserts a table row -->
<th>Current Results of Favourite Colours</th>
<!-- insert a blank entry-->
<th>&nbsp;</th>
</tr>
</thead>
<!-- all table content is enclosed -->
<!-- within the <tbody>
-->
<tbody>
<tr>
<td class="red">Red</td>
<!-- insert a data cell -->
<td class ="percent">25%</td>
</tr>
<tr>
<td class="blue">Blue</td>
<td class ="percent">42%</td>
</tr>
<tr>
<td class="yellow">Yellow</td>
<td class ="percent">11%</td>
</tr>
<tr>
<td class="green">Green</td>
<td class ="percent">9%</td>
</tr>
<tr>
<td class="orange">Orange</td>
<td class ="percent">13%</td>
</tr>
</tbody>
<!-- there is no <tfoot> in this table. It is the
last section of a table it formats the table footer -->
<tfoot>
</tfoot>
</table>
</div>
</body>
</html>
Style Sheet for 2 (a) Question 6.8
/*
Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
*/
/*PART 2 - Style Sheet for Question 6.8
This is the style sheet for Part 2a ,Question 6.8
which defines the styles for the file 2a.html
*/
body, td, th {
font-family: Serif,Arial;
font-size: 14px;
}
.vote{
/* uses absolute position to
place the text of the vote
in the top left area */
position: absolute;
left: 100px;
top: 80px;
}
.colorChart {
/* uses absolute position to
place the text of the results
in the top right area */
position: absolute;
left: 350px;
top: 65px;
width: 500px;
text-align: left;
}
/* Used for the background colors of the survey results */
.red { background-color: red;
}
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.green { background-color: green; }
.orange { background-color: orange; }
/* defines the text that present the Percentage of the results */
.percent { text-align: left;
font-size: 30px }
strong {
font-family: Verdana, Arial, sans-serif;
font-sze: 16px;
text-align: center;
font-style: oblique;
}
h1{
font-family: Verdana, Arial, sans-serif;
font-sze: 16px;
text-align: center;
}
Part 2 (b) Question 6.9
<html>
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<head>
<style type = "text/css">
h1
{color: blue}
a { text-decoration: none; color: blue}
a:hover
{background-color: yellow}
</style>
<title> Internet and WWW How to Program </title>
</head>
<body>
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Fig 4.5:links.html -->
<h1> Here are my favorite sites</h1>
<p><strong>Click a name to go to that page.</strong></p>
<!--Create four text hyperlinks -->
<p>
<p>
<p>
<p>
<a
<a
<a
<a
href
href
href
href
=
=
=
=
"http://www.deitel.com">Deitel</a></p>
"http://www.prenhall.com">Prentice Hall</a></p>
"http://www.yahoo.com">Yahoo!</a></p>
"http://www.usatoday.com">USA Today</a></p>
</body>
Part 3 (a) Question 7.16
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<!-- PART 3 Javascript -->
<!-- (a) 7.16 Write a script that asks the user to enter 2 numbers
obtains the two numbers from the user and outputs XHTML text that displays
the sum, product, difference and quotient of the two numbers.
Use techniques in Fig 7.6
-->
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Part 3 (a) Question 7.16 -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>PART 3(a) - 7.16</title>
<script type = "text/javascript">
<!-var firstNumber,
// first string entered by user
secondNumber, // second string entered by user
number1,
// first number
number2,
// second number
product,
// product of number1 and number2
difference,
// difference of number1 and number2
quotient,
// quotient of number1 and number1
sum;
// sum of number1 and number2
// read in first number from user as a string
firstNumber =
window.prompt( "Enter first integer", "0" );
// read in second number from user as a string
secondNumber =
window.prompt( "Enter second integer", "0" );
// convert numbers from strings to integers
number1 = parseInt( firstNumber );
number2 = parseInt( secondNumber );
// add the numbers
sum = number1 + number2;
// product: multiplies the numbers
product = number1 * number2;
//difference : subtracts the numbers
difference = number1 - number2;
//quotient : divides the numbers
quotient = number1/number2;
// display the results
document.writeln( "<h1>The
document.writeln(" <h1>The
document.writeln( "<h2>The
document.writeln( "<h2>The
document.writeln( "<h2>The
document.writeln( "<h2>The
First Number is " + number1 + "</h1>");
Second Number is " + number2 + "</h1>");
sum is " + sum + "</h2>" );
difference is " + difference + "</h2>" );
product is " + product + "</h2>" );
quotient is " + quotient+ "</h2>" );
// -->
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
Part 3 (b) Question 7.17
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<!-- PART 3 Javascript -->
<!-- (a) 7.17 Write a script that asks the user to enter two numbers, obtains
the two numbers from the user and outputs XHTML text that displays the
larger number followed by the words "is larger" in an information message
dialog.
If the numbers are equal, output XHTML text that displays the
message "These numbers are equal". Use techniques in Fig 7.15
-->
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>PART 3(b) Question 7.17</title>
<script type = "text/javascript">
<!--
var firstNumber,
// first string entered by user
secondNumber, // second string entered by user
number1,
// first number
number2,
// second number
largest;
// larger number
// read in first number from user as a string
firstNumber =
window.prompt( "Enter first integer", "0" );
// read in second number from user as a string
secondNumber =
window.prompt( "Enter second integer", "0" );
// convert numbers from strings to integers
number1 = parseInt( firstNumber );
number2 = parseInt( secondNumber );
// display the results
document.writeln( "<h1>The First Number is " + number1 + "</h1>");
document.writeln(" <h1>The Second Number is " + number2
+ "</h1>");
//Finds the largest number by comparing each pair.
if(number1 > number2)
largest = number1;
else
largest = number2;
//The case where the numbers are equal
if(number1 == number2)
document.writeln( "<h2> These numbers are equal</h2>" );
//When they are not equal, we know what the largest number is
else
document.writeln( "<h2> " + largest + " is larger " + "</h2>" );
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
Part 3 (c) Question 7.20
<html>
<head>
<!-Project 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<script type ="text/javascript">
<!--
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
document.write("<pre>
</pre>");
-->
</script>
*********
***
*
*
*
*
***
* *
*
*
*
*
*
*
*****
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*********
*
***
*
*
*
*
*
*
*
*
*
*
*
* *
*
*
</head>
<body>
</body>
</html>
Part 3 (d) Question 7.26
<!-Proejct 1 CSC309
---------------Member #1 : Anthony Ku Ong (991040119)
Member #2 : John Ngo
(990991085)
-->
<!-- PART 3 Javascript -->
<!-- (d) 7.26 Write a script that reads 5 integers & determines and outputs
XHTML text that displays the largest integer and the smallest integer in
the group.
-->
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>PART 3(d) Question 7.26</title>
<script type = "text/javascript">
<!-var firstNumber,
// first string entered by user
secondNumber, // second string entered by user
thirdNumber,
fourthNumber,
fifthNumber,
number1,
number2,
number3,
number4,
number5,
largest,
smallest;
//third string entered by user
//fourth string entered by user
//fifth string entered by user
// first number
// second number
// third number
// fourth number
// fifth number
// current largest number
// current smallest number
// read in first number from user as a string
firstNumber =
window.prompt( "Enter first integer", "0" );
// convert number from strings to integer
number1 = parseInt( firstNumber );
// read in second number from user as a string
secondNumber =
window.prompt( "Enter second integer", "0" );
// convert numbers from strings to integers
number2 = parseInt( secondNumber );
// read in third number from user as a string
thirdNumber =
window.prompt( "Enter third integer", "0" );
// convert numbers from strings to integers
number3 = parseInt(thirdNumber );
// read in fourth number from user as a string
fourthNumber =
window.prompt( "Enter fourth integer", "0" );
// convert numbers from strings to integers
number4 = parseInt(fourthNumber );
// read in fifth number from user as a string
fifthNumber =
window.prompt( "Enter fifth integer", "0" );
// convert numbers from strings to integers
number5 = parseInt(fifthNumber );
//Finds the largest number by comparing each pair.
if(number1 >= number2)
largest = number1;
else
largest = number2;
if(number3 >= largest)
largest = number3;
if(number4 >= largest)
largest = number4;
if(number5 >= largest)
largest = number5;
//Finds the smallest number by comparing each pair.
if(number1 <= number2)
smallest = number1;
else
smallest = number2;
if(number3 <= smallest)
smallest = number3;
if(number4 <= smallest)
smallest = number4;
if(number5 <= smallest)
smallest = number5;
// display the results
document.writeln( "<h1>The five numbers entered
+ number2 + " " + number3 + " " + number4 + " "
document.writeln(" <h1>The largest number is "
document.writeln( "<h1>The smallest number is "
+ "</h1>" );
are: " + number1 + " "
+ number5 + "</h1>");
+ largest + "</h1>");
+ smallest
</script>
</head>
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
PART 4 – Style: Address the following research question.
a) [5] We have discussed the importance of style in class. Choose a product or
service of your choice and compare the web sites of three competing
companies. Present a table that lists the advantages and disadvantages of
each company’s website with respect to style.
We have chosen our product to be Doughnuts.
Company 1: Dunkin Doughnuts
http://www.dunkinDoughnuts.com
Advantages
Disadvantages
1) Balance: There were not a lot of heavy
images and the logos and pictures that were
displayed had colors such as purple and
pink that was offset by a white background.
1) Navigation is pretty bad. It took a while
to find any information about
“Doughnuts”.
Apparently it was under the “nutrition”
section of the page, and it didn’t have a
separate “doughnut” page. What they did
have on the left column was two heading
“Shop for Coffee” and “Shop for Gifts”. I
think that this is misleading because coffee
and gifts are not the only two major items
that Dunkin Doughnuts sells.
2) Text Position: The location of the
“Features” and special product were
positioned on the top right of the screen
where most people look at (as discussed in
lecture).
3) Color scheme: The Purple
complemented the pink that was on the
page.
4) Legibility: The size of the font was not
too small, readable and spaced out. It was
distributed about the page equally. The
white space helped so the text wasn’t too
clumped especially since there was quite a
bit of text on the page.
5) The load time of the page was pretty
quick since the graphics on the page were
very small.
2) Clarity and Simplicity: The page has a
fairly simple design, yet the main links
were not clear, and had heading such as
“Delivery Program” and “By the pound”
under their “Shop for Coffee” section.
As mentioned in class, we need to organize
the website as if it were a real store. A
real store wouldn’t be this confusing to
navigate through.
3) Artistic and Original Design:
By looking at the Doughnuts Industry, I
thought that the colors used were very
colorful and “child” like. The fonts used
looked like crayon scribbles and were not
appropriate to the appropriate
demographics. Most people who come to
buy doughnuts or coffee are middle aged
people.
4) Color Scheme that matches: The Color
scheme did match, however the purple and
pink theme gave an impression that the site
was catered to children, and not to the
appropriate demographics.
Company #2: Tim Hortons
http://www.timhortons.com/
Advantages
Disadvantages
1 Design and Demographics: The main
page had an option to enter the page in
“English or French”. Thus they have
considered their audience.
1 Design and Demographics: The main
page had an option to enter the page in
“English or French”. Thus they have
considered their audience.
2. Balance: I found the pictures and the
text on the page balanced. The coffee cup
on the bottom of the menu, along with the
top brown banner on top of the page frames
it, so your eyes are kept to the center of the
page.
2. Balance: I found the pictures and the
text on the page balanced. The coffee cup
on the bottom of the menu, along with the
top brown banner on top of the page frames
it, so your eyes are kept to the center of the
page.
3. Legibility: The size of the font was not
too small, readable and spaced out. It was
distributed about the page equally. The
white space helped so the text wasn’t too
clumped especially since there was quite a
bit of text on the page.
3. Legibility: The size of the font was not
too small, readable and spaced out. It was
distributed about the page equally. The
white space helped so the text wasn’t too
clumped especially since there was quite a
bit of text on the page.
4) Color Scheme that matches: The Color
scheme of the brown, and yellow did match
the background which was white. These are
the colors associated with coffee and old
age.
4) Color Scheme that matches: The Color
scheme of the brown, and yellow did match
the background which was white. These are
the colors associated with coffee and old
age.
Company #3: Krispy Kreme
http://www.krispykreme.com/
Advantages
Disadvantages
1) Color themes: I found that this page
used a good color scheme that suited their
audience. The pictures were unbiased and
catered to both the young and the old. This
is unlike Tim Hortons whose color theme
and design was very dull (it appeared to
cater to those who were of an older
audience). This is also unlike Dunkin
Doughnuts which was the other extreme,
and their colors theme to indicate a
younger audience.
1) The load time of the page was heavy
since it contained a lot of graphics.
Customers may not appreciate the long
wait especially if there is traffic on the
page.
2) Simplicity in Menu: The page is very
simple in terms of design. The
organization of the page is really good
because the website is organized as if it
were a real store or business! (As
mentioned in class). This is because it is
clear where to get information about the
products they sell. By having their main
menu options as the items they sell, such as
“Doughnuts”, “Coffee”, and “Collectibles”,
its similar to how their menu would be
subdivided in the store itself.
3) Navigation: This is far best one of the
best aspects since they have eliminated
their navigation to only six links, and they
have considered what interests people.
Notice that “Krispe Kreme” and
“Doughnuts” are the first items because
this is what customers would like to get
information about. In other words, the
navigation is organized in order of
importance which I think makes it easy to
find what you are looking for.
4) Legibility: The size of the font was not
too small, readable and spaced out. It was
balanced with nice big pictures.
2) Placement of text: The most important
information is not on the top right of the
screen, in fact most of it is on the bottom
middle, or bottom right which isn’t the best
strategy according to what was said in
class. Most of us look at the right top, and
scan to the left.
3) Inconsistent Colors: I found that the
colors used for each page wasn’t consistent
and that some of the colors seemed to be
arbitrary.
5) Clarity using good User Interface: I
liked the fact that in many places of the site
such as the doughnut selection, you could
run over your mouse to select the different
types of doughnuts and get information for
each of it. It was very appealing by using
pictures to describe the product and only
giving you information when you put your
mouse over the picture.
b.) Suppose you were hired to create a website for a new company that sells the
product or service from part a. Based on your study in part a, describe the design
that you feel will be optimal for this company with respect to marketing.
Answer: We have to keep in mind that the type of industry that we want to enter in is the
“donut industry” therefore our recommendations should be aimed to improve the
marketing of this.

From observation from section 4a, I believe that an important aspect of designing
our website is having a constant color theme within the entire site. This means
that all the website should follow the theme you have chosen. Moreover, I think
the color scheme should complement each other. What I mean by this is that if
you have chosen a bright color in one of your aspects of the website then you
should balance it out with a dark color. We do not want to have our website to
have too bright or too dull of a color combination. Also in choosing your color
you want to pick a something that can attract more customers as possible. As a
result we should pick neutral colors that can attract the tastes of majority of the
population.

Another thing that we want to implement in our website is to have a site with a
sizable amount of pictures showing our product. Since we are selling donuts, our
customers want to see the donut they wish to purchase and eat. However, we
should be careful with the size and amount of pictures we want to put on the site.
We do not want to over-flood the site with pictures and cause older machines and
slower Internet users to have a hard time accessing our page. We also want to put
a small description beside our products to let the user be aware on what the
specifications of our products. The font sizes we plan to use should be not too
small, must legible and informative.

Following the concept of Krispy Kreme that we mentioned above, they have
eliminated their navigation to only six links, and they have considered what
interests people. In other words, the navigation is organized in order of
importance which I think makes it easy to find what you are looking for. This is
the type of navigation system we plan to implement. It looks simple but sorted in
a way that is comfortable to the user.

The website should also be artistic. This is a good way to attract customers
regarding your site. However, we would like to be careful on what artistic
elements we wan to implement in the site. We have to choose something that is
contemporary and would appeal to the current generation of customers. We are
planning to use fashion trends on what people want today and implement these
designs in the web page.

We will definitely find a good web-hosting server. We do not want annoying popups that drive customers away. We’re a reputable donut company and probably
would spend a bit to improve on this aspect of our marketing.