- 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 "cw1-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
