Exercise: Create a Simple Website
Author: Grace Lee Sum Yee (TA for 309)
Modified by Arnold, and Michael Bennett
Create an abc subdirectory inside public_html. Place all documents for this lab
inside abc.
Zip up and submit abc to the IVLE Labs/html workbin.
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 cp3101b-1.comp.nus.edu.sg (in your public_html directory).
To do this you will need the following permissions on your root directory,
your public_html subdirectory.
<![CDATA[
arnold@cp3101b-1:~/public_html$ ls -al ~
drwx--x--x 4 arnold ssl-cert 4096 Jan 20 08:05 .
drwxr-xr-x 3 root root 4096 Jan 9 00:34 ..
...
drwx--x--x 2 arnold ssl-cert 4096 Jan 20 07:57 public_html
(ie mkdir public_html; chmod 711 ~; chmod 711 public_html)
]]>
Files inside your public_html directory should have permissions as follows
<![CDATA[
arnold@cp3101b-1:~/public_html$ cd ~/public_html/
arnold@cp3101b-1:~/public_html$ ls -al
total 16
drwx--x--x 2 arnold ssl-cert 4096 Jan 20 08:13 .
drwx--x--x 4 arnold ssl-cert 4096 Jan 20 08:05 ..
-rw-r--r-- 1 arnold ssl-cert 44 Jan 9 00:35 index.html
-rw-r--r-- 1 arnold ssl-cert 30 Jan 9 00:38 index.php
(ie chmod 644 hello.html)
]]>
- You can view my index.html
via http://cp3101b-1.comp.nus.edu.sg/~arnold/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 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" />
]]>
