Exercise: Create a Simple Website
Author: Grace Lee Sum Yee (TA for 309)
Modified by Arnold, and Michael Bennett
Create an abc subdirectory inside www. Place all documents for this lab
inside abc.
Create a website for ABC Cabinet. There should be two pages:
- main.html: Show the name of the company, a list of the products sold,
and a table contains the images and prices of the products.
- order.html: A order form that asks for name, address, method of payment,
card number, which products are ordered, and the colour of the product.
Include a reset button and a submit button.
Here are the images needed:
Method of payment: VISA or MasterCard
Colours available: white, black and brown
Here is a sample page of main.html:
Here is a sample page of order.html:
Additional Requirements
- Use HTML5, in particular
- Deploy your website on cs.utm.utoronto.ca (in your www directory).
To do this you will need the following permissions on your root directory,
your public_html subdirectory.
<![CDATA[
-csbash-4.1$ ls -al ~
total 162928
drwx--x--x+ 72 rosenbl6 2001 135 Jan 13 23:36 .
drwxr-xr-x+ 37 root 2001 38 Sep 18 13:41 ..
...
drwx--x--x+ 7 rosenbl6 2001 8 Jan 13 23:36 www
(ie mkdir www; chmod 711 ~; chmod 711 www)
]]>
Files inside your www directory should have permissions as follows
<![CDATA[
-csbash-4.1$ cd ~/www
-csbash-4.1$ ls -al
total 27
drwx--x--x+ 7 rosenbl6 2001 8 Jan 13 23:36 .
drwx--x--x+ 72 rosenbl6 2001 135 Jan 13 23:36 ..
-rw-r--r--+ 1 rosenbl6 2001 51 Jan 13 23:36 index.html
-rw-r--r--+ 1 rosenbl6 2001 51 Jan 13 23:36 index.php
(ie chmod 644 hello.html)
]]>
- You can view my index.html
via http://cs.utm.utoronto.ca/~rosenbl6/index.html
yours will have a similar URL.
- Ensure that your documents are HTML5 compliant by submitting them to The W3C Markup Validation Service
- Your forms should submit to www.cs.toronto.edu/~arnold/cgi-bin/environment.cgi, so you can see whether your form elements work.
References and Hints
- XHTML Reference at w3schools.com
- html5doctor
- Below is a sample HTML5 document...(you can find it at here)
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document Title</title>
</head>
<body>
Page Content Goes here!
</body>
</html>
]]>
- main.html uses the following elements:
<![CDATA[
<!DOCTYPE html>
<html> <head> <meta> <title>
<body> <header> <h2> <hr/> <h3>
<nav> <a> <br/> <p>
<img>
<ul> <li>
<table> <tr> <td>
]]>
- A further hint for main.html. I 'sorted' main.html.
- order.html uses the following elements
<![CDATA[
<!DOCTYPE html>
<html> <head> <meta> <title>
<body> <header><h2> <hr/> <h3>
<nav> <a> <br/>
<form> <p> <label> <input type="text"> <textarea> <input type="radio"/>
<input type="checkbox" />
<select> <option>
<input type="reset" />
<input type="submit" />
]]>
