CSIT128: Introduction to Web Technology

Assignment 1 (Group)

Your assignment must be submitted to Moodle before the deadline. Put all your report and codes   into a folder. Named the folder as A1-GxTyy-UOWID1,UOWID2(Name1,name2) where “x” stands for your tutorial group number and “yy” stands for the team number. For example, A1-G2T05 stands for team 05 in tutorial group 2. In the folder you should have 1 html file, 1 MS Words report and the 4 pictures. The title of the web page, report and html file must use the same name as the folder. Zip up the folder and submit it via the Assignment 1 Submission on Moodle. Only 1 submission per group. Part of the evaluation include the ability to follow these instructions.

Assignment question: Using HTML, CSS, Javascript. to develop the content as shown below. There are 4 parts, and all parts must be in a single html file including the CCS content. All pictures must make use of relative link. Your code must demonstrate the use of CSS. All source codes need to follow proper programming style. and convention to enhance its readability.

Your report must include the screenshot of your webpage, your code and the explanation of all your code. Highlight those html tags, CSS and Javascript. constructs you have used by showing the code segment from your html file. Below is a sample.

Part 1:

A table reflecting the following information. The format must be as shown below.

Part 2:

As shown below. The hyperlink will direct you to the corresponding sections. For example, when C++ is clicked, it will bring you to the C++ section and when C# is clicked it will bring you to the C# section. The 4 pictures are included in the assignment package. Note that the actual picture is different as shown below. You need to resize the picture using the image attribute. No outer boarder is required.

Part 3:

The layout and format (e.g. line spacing) of your page should be as close as possible to what is shown below. No outer boarder is required. You may use the following web addresses for the four links (“here”).

• https://www.uow.edu.au/student/support-services/academic-skills/online- resources/plagiarism/

• https://www.uow.edu.au/student/admin/academic-consideration/

• https://www.uow.edu.au/student/support-services/advisers/

• https://www.uow.edu.au/business-law/about/equity-diversity-inclusion/disability- resources/

Part 4:

Build a html form. with the following elements. The form. must be within a table structure.

•    Name: a text box where the content contains no special character or number. The text box must not be empty.

•    Module code: a text box where the content must start with 2 uppercase alphabets and

follows by 3 digits in the range of 3 to 6 (inclusive of both ends) for the 2nd  and 3rd  digits. This textbox can be empty.

•    Current date: anon-editable textbox and should be in the format as shown (e.g. 2 October

2024 Wednesday 1:47 PM). The content is the current date or today’s date which will change everyday.

•    Message : a text area with 3 rows and 20 columns. The default text is “Hello 202409” . The text area cannot be empty.

•    Find: a text box for the user to key in text he/she wants to find.

•    Replace: a text box for the user to key in the replacement text. If the find text is empty, this element should be disable (i.e. user cannot key in anything here).

•    Find and Replace: This is a button, when click, it will goto the “Message” text area to find all the occurrence of the text shown in the “Find” text box and replaces all of them with the content shown in the “Replace” text box. After the replacement,a message showing the number of replacements must be displayed besides the button.

•    Source language: a radio button with English, Malay. Use English as the default.

•    Target language: a selection list with Chinese, Japanese and Korean. Make Chinese as the default.

•    Submit button: the button is called “Translate” . When it is clicked, it should invoke the

google translatehttps://translate.google.comto perform. the translation of the content in the “Message” text area as described above.

• Reset button: this will reset the content of all the elements.

You are free to design your own validation messages, but they must appear besides the corresponding html elements as shown in the lecture slide (i.e. no popup error message).

There may be components or attributes which are not covered in the lecture. You need to do some research and discuss those new features you have learned and used in your report.