Slide 1.17: Top website hosting
Slide 2.2: HTML (HyperText Markup Language)
Home

Programming Exercise I: A Static Bookstore Using HTML

Absolutely no copying others’ works

Development Requirement
Have to manually create the HTML pages. No HTML editors, such as Bootstrap, will be used


Due Date and Submission Methods
Due on or before Tuesday, September 24, 2019 in class and have completed the following three tasks: The exercise will not be graded if any of the above three requirements is not met.


Objectives
Design and implement a static online bookstore using HTML (a client-side language), i.e., the bookstore is fixed. This exercise is for students to practice HTML writing.


Requirements
The bookstore includes the features of user checking in and out, book searching, book purchasing, etc. (but again, they need not be working.) Ten different HTML pages need to be created manually.


Implementation
Implement this exercise by following the four steps below:
  1. Build 10 HTML pages by using a plain text editor such as Notepad or Wordpad. No HTML editors like Bootstrap are allowed to be used. All HTML files and images should be under a folder and no sub-folders are used. The HTML link destinations should be direct instead of complete or relative; for example, you should use 
       <a href="5.html">Search books</a>
    instead of 
       <a href="file:///C:/260/Ex1/5.html">Search books</a>
    If video or audio clips are used, the complete paths have to be used; for example, you should use 
       <object data="http://undcemcs01.und.edu/~wen.chen.hu/course/260/exercise/1/intro.swf"
     height="90" width="90"></object>
    instead of 
       <object data="intro.swf" height="90" width="90"></object>
    For images, either you can use direct paths if the images have been uploaded, or complete paths; for example, you could use 
       <img src="5.jpg" />
    if the image 5.jpg has been uploaded, instead of 
       <img src="images/5.jpg" />
  2. Check your pages as follows. Change the “Open with” property of the page to Firefox by right clicking the file name. Double click the file name and the Firefox will open the file at the corresponding URL such as 
       file:///C:/260/Ex1/5.html
  3. If anything is not what you expect, edit the page again and check it on Firefox.

  4. Finally, upload the 10 HTML files and at most 10 images via HTML Files Submission and fill out the form of HTML Implementation Data for grading.

Two Examples
Example I
This example shows how to move from one page to another page by using the HTML tag <form>.


The above example includes two pages (index.html and 2.html). The simplified source code of index.html is listed below:

index.html 
<html>
 <body>
  <form action="2.html">
   <table>
    <tr>
     <th>
      Start Using the Book Store.
     </th>
    </tr>
    <tr>
     <td>
      <input type="submit" name="act" value="Next page" />
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>

Example II
This example is similar to this exercise, but you will not receive a good grade by using it because it uses a limited number of HTML tags. By the way, it is dynamic partially.


Evaluations
The following features will be considered when grading: