- 1 - 
CS2204 Fundamentals of Internet Application Development 
Course Work No. 1 (CW1) 
Semester A 2024-2025 
 
10% Marks 
Due Date: 13 October 2024, 23:59 [Week 6] 
 
Learning Outcomes: 
 
• Design structures of web pages for a more realistic, commercial-like website 
• Achieve user requirements by using appropriate HTML5 markups. 
• Produce web pages that can pass through validation. 
 
  - 2 - 
1. Overview 
 
You must build a simple Web site for Visionary Innovation Hub by going through the 3S’s: structure, 
style, and script. This CW1 is the first step focusing on structure only. The Web site, therefore, would 
not be fully functional until the second and third parts (CW2 & CW3) using CSS and JavaScript are 
completed. 
 
To encourage you to have critical thinking and investigation, only the basic information of the Web 
pages is specified, and you have the freedom to design the structure if it can fulfill the specified 
requirements. However, like any design, some structures are better than others. 
 
To ensure timely feedback to the student’s questions, each of the following TAs will be responsible for 
different groups of students according to the last digit of your student ID. If you have any questions, 
you can contact the corresponding TA directly by email. A TA will also attend the tutorials in person 
to answer your questions related to the assignment. 
• Student ID’s last digit 0 ~ 2: YAO Yiming (yimingyao3-c@my.cityu.edu.hk) 
• Student ID’s last digit 3 ~ 5: WANG Xueying (xywang85-c@my.cityu.edu.hk) 
• Student ID’s last digit 6 ~ 9: ZENG Xiangrui (xiazeng9-c@my.cityu.edu.hk) 
 
Guideline for late submissions: 
• Late within 3 hours - 10% marks deduction 
• Late within 3 ~ 12 hours - 50% marks deduction 
• After 12 hours - no submission will be accepted 
 
  - 3 - 
2. Requirements of Structure 
Required information on the Web site is grouped into blocks, then pages. There are six main pages and 
one design page. All contents, unless specified, should be completed by yourself. If you use information 
and ideas from others online, you MUST acknowledge and quote the source on the design page. If you 
are found to have plagiarized, you will be subject to severe penalties, including but not limited to 
a zero for this coursework, failing the course, and being reported to the school authorities. 
Therefore, please follow the above rules to ensure the successful pass this course. 
 
 
There are 7 pages in total. The default landing page of the Web site is the Home page. The contents of 
every page can be found in the file "cw**contents.txt" available on Canvas. 
 
Home Page 
 
a) This page contains information grouped into 5 blocks, 3 of which are the standard header, 
navigation bar, and footer blocks as follows: 
 
a.1) The header/banner block consists of a logo (logo.png) and the heading of the Website; 
these are separated and should not be done in one single image. You should use <header> for 
the heading block. The size of the logo should be set to 334×100. The following is an example 
of how to set the size of an image: 
 
<img src="…" width="334" height="100"> 
 
a.2) The navigation bar should include links to all the website’s six main pages (except the 
Design page); all jump hyperlinks must be valid in the navigation bar. Ensure all links point to 
the correct page so users can access the required information without problems. Also, ensure 
that the layout and design of the navigation bar are consistent across all pages so that users can 
easily find the information they need. You also need to note that you need to use a reasonable 
HTML structure to organize the navigation bar. You need to note that there is no requirement 
for the navigation bar to be horizontal or vertical. <nav> should be used for the navigation bar. 
 
 
a.3) The footer with another logo (footer_logo.png, 260×40) and information about the 
copyright and a link pointing to the Design page. <footer> should be used for the footer block. 
 
 
Please choose a proper way to display the copyright icon and replace “CS2204” by your name 
with a link to the Design page.  - 4 - 
 
These three blocks would appear on not only the home page but also all other pages. 
HTML code of them should be duplicated on every page. 
 
b) The remaining 2 blocks are as follows: 
 
b.1) The welcome block contains some information shown in the screenshot. You can find 
the content of this page in the appendix at the end of the document. The website we needed to 
implement had a large amount of text, so we provided all the website’s textual content in the 
appendix. 
b.2) The basic information block contains four types of information shown in the screenshot: 
address, telephone, business hours, and location which is an image (location.jpg, 800×800); 
use the most structured elements to present such information. At the end, an image 
(button.png, 400×100) link points to the Apply page. We have implemented the button’s 
functionality with an image here. 
 
The following is an example of a finished home page. 
   - 5 - 
 
About Page 
 
c) contains the standard header, navigation bar, and footer, the same as the home page. The About 
page also includes two more blocks: the promotional image block and the information block. 
 
d) You should put an extra promotional image block inside the header that contains only one 
image (about.png, width=”1400”). You should put it in the <header> with the header block 
introduced before. 
 
  - 6 - 
e) The information block should display the information below. Use <p> for each paragraph. 
Also, it should display the “Highlights of Visionary Innovation Hub” table that contains some 
brief information. The cw1 does NOT require the “Highlights of Visionary Innovation Hub” 
table’s border. 
 
 
 
Apply Page 
 
f) contains the standard header, navigation bar, and footer, the same as the home page. The order 
page also includes three more blocks. 
g) The welcome block contains welcome information. On this webpage, we include the phrase 
"Welcome to VIH" in the block. 
The apply block shows the companies in Visionary Innovation Hub that can be applied; it 
has the heading “Common Choices of Interns” followed by three more minor headings with 
names (Technology Zone, Innovation Zone, and Ecology Zone. You should design five 
company application forms for the Technology Zone (first five, TechWave~Connectify), three 
company application forms for the Innovation Zone (EcoTech~CreaTech), and four company 
application forms for the Ecology Zone (GreenFuture~EcoBuild). Each company is a <form> 
including a <img> (200×200), a <label>, a <input>, and a <button>. We do not use these 
buttons in this coursework. We will functionalize them in later coursework with JS. Companies 
in the same zone should be organized in a <div>. The “action” and “method” of each form 
should be set to “#” and “get”, respectively. The resulting block displays information about 
chosen companies, rankings, and the number of completion choices in a table format. The head 
of this table, time, and “Total number of …” are three sub-headings like <h2>.  - 7 - 
 
 
 
  - 8 - 
 
Visit Page 
 
h) This page contains information grouped into six blocks, 3 of which are the standard header, 
navigation bar, and footer blocks, as introduced above. The remaining three blocks are as 
follows. 
i) The welcome block is a block of HTML code containing a paragraph that displays a warm 
welcome to visitors and introduces the campus and academic environment of the Visionary 
Innovation Hub. <p> should be used for each paragraph. You will lose some points if we find 
all the text in the welcome block crammed into one paragraph. 
j) The location block contains five types of information as shown in the screenshot: address, 
telephone, fax, email, and location (location.jpg, 800×800); use the most structured elements 
to present such information. 
k) The reservation block is an HTML snippet that contains a reservation form. It displays a form 
on a web page for booking a visit and collects information about the user's reservation. The 
user can fill in the information about the reservation to visit the hub, including the date, time, 
and number of visitors, and submit the form via the submit (Check Availability) button. It 
would be best to implement everything in the reservation block shown in the screenshot, 
including but not limited to the legend “Booking information,” the form’s action attribute, Date, 
Time, and “No. of Visitors,” and Check Availability and reset. You need to note that you 
should develop at least two different time options. In the screenshot, we have implemented 
five options. 
 
 
  - 9 - 
 
Information Page 
 
l) This page contains information grouped into five blocks, 3 of which are the standard header, 
navigation bar, and footer blocks, as introduced above. The remaining two blocks are as 
follows. 
m) There are two promotion information blocks, each containing a text passage for the 
promotion of Visionary Innovation Hub, followed by a video(width="700") that plays 
automatically and continuously. Inside the <video> tag, use the <source> tag to define the 
source file for the video. In this project, two source files are provided as alternatives. The 
browser will select the first supported file type for playback. If the browser does not support 
either source file type, then the video will not play. The first <source> tag specifies the MP4 
file source of the video, and the second <source> tag specifies the WebM file source of the 
video. 
 
Videos are available on: 
http://cs2204.cityu-dg.local/~instructor/video/video1.mp4 
http://cs2204.cityu-dg.local/~instructor/video/video1.webm 
http://cs2204.cityu-dg.local/~instructor/video/video2.mp4 
http://cs2204.cityu-dg.local/~instructor/video/video2.webm 
 
n) The information table block contains an HTML table for displaying various internship 
opportunities of different companies and their related information. In the first row of the table, 
the <th> tag defines the table header, including the column headings "Zone" "Company" 
"Focus" and "Internship Salary". Starting with the second row, each corresponds to 
information about a company. The text content of each cell is defined using <td> tags. This 
table presents the various interns and their related information of different companies so users 
can easily compare and find the programs of interest. 
  - 10 
- 
 
Contact Page 
 
o) This page contains information grouped into four blocks, 3 of which are the standard header, 
navigation bar, and footer blocks, as introduced above. The remaining two blocks are as 
follows. 
p) The contact block creates a table with contact information, including location, address, 
telephone, fax, and e-mail. Such a table can be used to display the contact information of a 
school or organization, making it easy for visitors to access relevant information for 
communication or contact. 
  - 11 
- 
 
Design Page 
 
q) This is an additional free format Web page for you to acknowledge the sources of information 
used in your design. If you use images, icons, or text obtained from the Internet, write the 
source and links on this page. Most information will be put in later for CW2 and CW3. 
Whether you need something to acknowledge or not, enter your name and student ID. 
r) This page is mainly used for acknowledgement. Therefore, the TA will only grade this design 
page based on whether it contains the necessary information, such as your name and 
acknowledgments (if needed). There is no special formatting requirement for the content of 
this page, e.g., you can use any suitable tags to present the information in this design page. 
 
  - 12 
- 
3. Assessment criteria 
 
You will be assessed by how much and how well you can apply what has been learned from the course; 
some considerations are: 
 
• No styling nor JavaScript is required in CW1 (do not include any style or CSS, except for 
image sizes added as attributes in the tag as specified in this document; marks will be deducted 
if your styles confuse our marking) 
• use appropriate HTML structural tags (e.g., <header>, <footer>, <div>, <span>), and give as 
much structure as feasible. 
• Adopt all possible good practices discussed in lectures. 
• Your website should be organized in proper folders, e.g., HTML and image. 
• Make sure the hyperlinks on your web page are available. 
• All pages except the design page must pass through validation with no error. You can use 
https://validator.w3.org/#validate_by_input+with_options for a check. 
 
4. Submission 
 
• Your solution will be submitted to Canvas for grading. Details about the Canvas submission 
site will be released soon via the Canvas Announcement. 
 
• Submit a zip file of your website with appropriate folders set up so that it can be tested directly 
by unzip - be careful with your URLs; they should work when your submission is tested as 
local files on other computers or as Web pages served by a Web server. The TA will download 
your zip file and unzip it on their own computer and grade it. Therefore, please ensure that 
the file paths involved in your solution are correct. It is highly recommended to unzip your 
zip file and test it on another computer to ensure that all pages/images/links are functioning 
properly before submission. 
 
• DO NOT include video files in your submission file; DO NOT use YouTube video; should 
use any one given video link in the server folder. Note that this link can only be accessed 
within the CityU(DG) network. If you are outside campus, you should use VPN. 
 
http://cs2204.cityu-dg.local/~instructor/video/video1.mp4 
http://cs2204.cityu-dg.local/~instructor/video/video1.webm 
http://cs2204.cityu-dg.local/~instructor/video/video2.mp4 
http://cs2204.cityu-dg.local/~instructor/video/video2.webm 
 
Videos for the promotion information block: video1.mp4, video1.webm, video2.mp4, 
video2.webm 
 
5. Miscellaneous information 
 
• You should retain a copy of your submission. The same set of web pages will be used again 
in CW2 and CW3 for adding styles and JavaScript, respectively. 
• Some images are available in the Canvas CW1 folder. 
 
 
~ End ~ 

請加QQ：99515681  郵箱：99515681@qq.com   WX：codinghelp