Starting from:
$30
CSIT128-Assignment 1 HTML and CSS Solved
Question 1 - HTML
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_Cu p, 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;
Question 2 - Inline CSS
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
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_piec e) . 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.
Question 4 - Document CSS
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
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).
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_Cu p, 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;
Question 2 - Inline CSS
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
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_piec e) . 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.
Question 4 - Document CSS
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
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).
1 file (6.5MB)
