Description
Assignment specification:
Develop a single web page that contains all solutions to the assignment questions.
Put your name and student number as a heading on top of the web page.
Separate each question by a horizontal line.
Each question must be labelled clearly with a heading.
Question 1 – HTML (2 points).
In the Group Stage of the 2014 FIFA World Cup, there are 32 teams. These teams are divided
into 8 groups where each group consists of 4 teams. The grouping information can be found on
this website https://en.wikipedia.org/wiki/2014_FIFA_World_Cup, for example, Group A
consists of Brazil, Mexico, Croatia and Cameroon. Your task is to display this grouping
information in a table with the following specification:
– The code must use plain HTML and no CSS;
– The table must have a visible border;
– The table must have 2 columns with headings: Group, Teams;
– On each row, the first column contains the group name (such as Group A), the second
column contains an unordered list with 4 teams;
Page 1 of 3
Question 2 – Inline CSS (2 points).
Copy the code of Question 1 to Question 2, and modify it to add inline CSS. You must use
inline CSS and the following CSS properties:
– font-size
– color
– background-color
– padding
– text-align
– vertical-align
– border-collapse: set to separate
– border-spacing
– border-bottom-style, border-left-style, border-right-style, border-top-style
– border-bottom-color, border-left-color, border-right-color, border-top-color
– border-bottom-width, border-left-width, border-right-width, border-top-width.
Question 3 – HTML (2 points).
In a chess game, there are 6 types of chess pieces: King, Queen, Rook, Bishop, Knight and Pawn
(this information can be found on this website https://en.wikipedia.org/wiki/Chess_piece). Your
task is to display the chess piece information in a table with the following specification:
– The code must use plain HTML and no CSS;
– The table must have a visible border;
– The table must have 3 columns with headings: Name, Image, Chess Rule;
– On each row:
– the 1st column contains the chess piece name;
– the 2nd column contains 2 pictures, one is a black chess piece and one is a white
chess piece; character entities must be used to display the pictures (character
entities code can be found here:
https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode
– The 3rd column contains a short simple rule of the chess piece.
Page 2 of 3
Question 4 – Document CSS (2 points).
Copy the code of Question 3 to Question 4, and modify it to add document CSS. You must use
document CSS and the following CSS properties:
– font-size
– color
– background-color
– padding
– text-align
– vertical-align
– border-collapse: set to collapse
– border-style, border-color and border-width.
Question 5 – HTML & CSS (2 points).
Your task is to display information about 10 kinds of vegetables of your choice in a table with
the following specification:
– The code must use HTML and some CSS of your choice;
– The table must have 2 columns with headings: Name, Health benefit;
– On each row:
– the 1st column contains the name of the vegetable, underneath the name display
an image of the vegetable; use the width attribute to set the same width for all the
vegetable images;
– the 2nd column contains: health benefits of the vegetable, underneath that
display a link to a webpage that contains information about this vegetable (such
as wiki page).
(Remark: Since this is a programming subject, in the Health Benefit part, you can pretend to be
a nutritionist and give a serious scientific answer; or you can use your imagination and give a
humorous answer 🙂 it is up to you. In the vegetable image part, you can either use a real image,
or you can draw a funny picture of the vegetable.)
END OF THE ASSIGNMENT
Page 3 of 3
