CS2204编程代写、代做Java程序语言

日期：2024-10-13 10:23

- 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 ~