______
______
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 () -->
<li<a href=" mailto:">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:">
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 = "" />
<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 = "" />
<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 </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>