Programming Exercise II:
A Static Website Using HTML and CSS

(Industry-Level, Second-to-None Comprehensive Specifications)

---

Absolutely no copying others’ works

• Unlike other languages, using others’ HTML & CSS code is obvious.
• Though these exercises are related, you are NOT allowed to submit one exercise to cover two or more exercises.

Development Requirements
When start developing the exercise, follow the requirements below:

• The exercise has to be Internet-enabled (a trend of current IT systems).
• The system entry page must be located at “http://undcemcs02.und.edu/~user.id/2/index.html” and all pages must be hosted by “http://undcemcs02.und.edu/~user.id/”.
• The systems have to be active even after being graded until the end of this semester. They will be re-checked for plagiarism from time to time.

---

Soft Due Date and Submission Methods
Due on or before Friday, February 16, 2024. Send an email to the instructor at wenchen@cs.und.edu to let him know the exercise is ready for grading.

---

Objective
There are four steps to achieve our goal, building an online bookstore:

1. (Server) Sign in to our server, undcemcs02.und.edu .
2. (HTML & CSS) Build static webpages.
3. (CGI) Connect the Internet to the server-side programs.
4. (Python) Write programs to fulfill the users’ requests.

This exercise is the second step to achieve the goal by using HTML and CSS to create a static website.

---

Programming Helps
The four programming exercises have each student step-by-step build a simple, dynamic website, which may be the most useful and popular IT system. By doing the exercises, students will gain essential knowledge and experience of using computers because they require you to know how to use various fundamental computer tools (like Linux, HTML, and Python). If you need helps for the programming exercises,

• Come to the classes physically and the instructor will help you during or after classes.
• Come to the instructor’s or TA’s office during the office hours.
• We can do it over the Zoom during the office hours, but it would take much time.
• Send an email to the instructor for a face-to-face or Zoom appointment other than the office hours.

---

Requirements
This is the second part of a simple dynamic website construction. It is to build few static webpages as follows:

• Home page (index.html), which is like the page below:
  
  


• Help page (help.html), shown after clicking on the Help button in the home page:
  
  


• Page 1 (1.html), in HTML and CSS shown after clicking on the “Page 1” button in the home page:
  
  
  which includes the following elements:
  
  
  • A background image at ,
  
  
  • Three hyperlinked images , , and showing the original image by clicking on the image,
  
  
  • Six images , , , , , ,
  
  
  • Three input text elements for quantities (no need to work),
  
  
  • Three hyperlinked titles,
  
  
  • Three hyperlinked numbers (no need to work),
  
  
  • Five buttons including Buy, List, Main, Help, and Reset (no need to work), and
  
  
  • Three Compare buttons (no need to work).
  
  
  • Book details, which are shown after clicking on the hyperlinked title in the book list and show (i) book title, (ii) ISBN, and (iii) price for each book such as
    
    

Recommended Steps
Take the following steps to build your Programming Exercise II:

0. For your convenience, here are the reference cards of Linux and Emacs.


1. (Off-campus only) You may skip this step if you are on campus. Otherwise, you may connect to the NDUS servers by using VPN (virtual private network) like GlobalProtect.


2. Connect to the server “http://undcemcs02.und.edu/~user.id/” by using SSH (Secure Shell) like PuTTY (PC) or Termius (Mac).


3. Sign in to your account by using your UND credentials.


4. Create the web folder ‘2’ by using the Linux command mkdir such as

     shell> mkdir public_html/2 

5. Enter the folder “public_html/2” by using the Linux command cd such as

     shell> cd ~/public_html/2 



6. Create three web pages by using an editor such as

     shell> emacs index.html 

     shell> emacs help.html 

     shell> emacs 1.html 

   where the index.html and help.html are given, but need some editing like changing my path to yours, and 1.html requires development by using HTML and CSS.


7. Create three text files of book details by using an editor such as

     shell> emacs 0596005431.txt 

     shell> emacs 0470048395.txt 

     shell> emacs 0596006810.txt 

   each of which includes the title, ISBN, and price.


8. Use a browser to check your result at

     http://undcemcs02.und.edu/~user.id/2

9. 🍀   Good luck!   🍀

---

Possible HTML Tags and CSS Properties to Be Used
The following HTML tags and CSS properties may be used in this exercise, but you are not limited to them. For the complete lists, check HTML and CSS.

No.	HTML Tag	Description
1	a	Defining a hyperlink, which is used to link from one page to another
2	b	Specifying bold text without any extra importance
3	body	Defining the document’s body
4	br	Inserting a single line break
5	center	Used in HTML4 to center-align text
6	font	Used in HTML 4 to specify the font face, font size, and color of text
7	form	Used to create an HTML form for user input
8	head	A container for metadata (data about data) and is placed between the <html> tag and the <body> tag
9	html	The root of an HTML document
10	img	Used to embed an image in an HTML page
11	input	Specifying an input field where the user can enter data
12	link	Linking to an external style sheet
13	p	Defining a paragraph
14	style	Used to define style information (CSS) for a document
15	table	Defining an HTML table
16	td	Defining a standard data cell in an HTML table
17	th	Defining a header cell in an HTML table
18	tr	Defining a row in an HTML table
No.	CSS Property	Description
1	background-color	Setting the background color of an element
2	border	Defining the border properties
3	color	Specifying color using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values
4	float	Specifying whether an element should float to the left, right, or not at all
5	font	Setting some font properties with the shorthand declaration
6	padding	The space between its content and its border
7	text	For formatting text

Evaluations
The following features will be considered when grading:

• Specifications:
  • The instructor (or your assumed client) has given the exercise specifications as many details as he possibly can. If you are confused about the specifications, you should ask in advance. Study the specifications very carefully. No excuses for misunderstanding or missing parts of the specifications after grading.
  • The specifications are not possible to cover every detail. You are free to implement the issues not mentioned in the specifications, but the implementations should make sense. Implemented functions lacking of common sense may cause the instructor to grade your exercise mistakenly, and thus lower your grade.
  • The exercise must meet the specifications. However, exercises with functions exceeding the specifications will not receive extra credits.


• Grading:
  • This exercise will not be graded if the submission methods are not met. Students take full responsibility if the website/system is not working.
  • Before submitting the exercise, test it comprehensively. Absolutely no extra points will be given after grading.
  • The total weight of all four exercises is 40% (10% each) of the final grade.
  • The systems have to be active until the end of this semester. They will be re-checked for plagiarism from time to time.
  • The instructor will inform you the exercise evaluations by emails after grading.


• Comments:
  • Make the exercise work first. Do not include extra features, such as fancy interfaces, in the beginning. By the way, you will not receive credits for the extra features.
  • Time management is critical for software development. If you are not able to complete the exercise, display whatever you have accomplished, so the instructor can give partial credit to your exercise.