Programming Exercise I: A Static Bookstore Using HTML
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:
- Submit the following files through HTML Files Submission:
- exact 10 HTML pages [named
1.html
(homepage), 2.html
, ..., and 10.html
] and
- at most 10 images [named
1.jpg/gif/png
, 2.jpg/gif/png
, ..., and 10.jpg/gif/png
and only three image types (jpg
, gif
, and png
) allowed],
- Fill out the form of HTML Implementation Data, and
- Turn in printouts of all HTML source code.
(Online students can send the code to the instructor via emails.)
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:
- 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" />
- 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
- If anything is not what you expect, edit the page again and check it on Firefox.
- 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:
|
<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:
- Grading:
- The weights of this exercise are 5% and 6% of the final grades for the campus and online students, respectively.
- (80%) The number of different tags and attributes used in this exercise will be heavily considered when grading.
That is the higher number of different tags and attributes is used, the higher score you will receive.
However, the tags or attributes will not be considered if they are not used effectively or do not make sense.
The following rankings are usually used by the instructor:
- Excellent if (tag # + attribute # ÷ 2) ≥ 70,
- Very good if 70 > (tag # + attribute # ÷ 2) ≥ 60,
- Good if 60 > (tag # + attribute # ÷ 2) ≥ 50,
- Fair if 50 > (tag # + attribute # ÷ 2) ≥ 40,
- Not good if 40 > (tag # + attribute # ÷ 2) ≥ 30, and
- Poor if 30 > (tag # + attribute # ÷ 2).
- (20%) Other web page features, such as user-friendliness, quality-design, easy-to-use, making-sense, etc., will also be considered when grading.
- Grading of this exercise is subjective and is based on comparison.
The instructor will try to grade the exercises as fairly as possible.
-
Guidelines:
- This exercise will not be graded if the submission methods are not met.
Students take full responsibility if the web site is not working.
- Before submitting the exercise, test it comprehensively.
Absolutely no extra points will be given after grading.
- Other than plain text editors, no software tools such as Dreamweaver is allowed to be used to create the pages.
- The newest Firefox browser will be used to grade exercises.
Note that Internet Explorer, Chrome, and Firefox are not compatible.
That is your exercises may work well on IE or Chrome but not Firefox.
- The exercise printouts will be kept until all grading is done.
They will be used to check against others’ exercises.
- The instructor will inform you the exercise evaluations by emails after grading.