CSS - How we make our pages look good
To put it plainly, HTML is ugly UNLESS we use CSS. With CSS we can arrange elements in our page, change their size, font, colour, etc.
Below is an example of some CSS in our page:
Below is an example of some CSS in our page:
CSS goes within <style></style> tags, these tags then go inside <head></head> tags which come after the <html> and before the <body>.
Notice how we use the American spelling for "color" - this is confusing but it is important to try and use this spelling otherwise it won't work.
Notice how we use the American spelling for "color" - this is confusing but it is important to try and use this spelling otherwise it won't work.
|
Task one: Using your Goku website from last time, as well as the css elements in the table below, make your page look like the page to the right. HINT: first move the <img> tag underneath the <h1> tag!
Task two: Do the same thing with the page for Vegeta, choosing your own colours. Once you have done this, try to change the font of the text AND set the background to have another image rather than a colour. |
|
Group competition
Go to Teams and download the "template.html" file in the handout called "Group website."
Form a group of 2-3 people. In your group, choose a group of characters, for example: the Avengers.
Each member needs to pick a character from the group and must make a webpage using HTML and CSS. You must make the theme (colour, fonts, the general look of the page) look similar to your teammates.
Your page needs to contain the following HTML tags:
The content of the page must include:
Expert task: When all members are done, make a homepage for the group together that links to all of the other characters.
Hint: You will need to email your pages to one of your members in order to link to all of the pages.
Form a group of 2-3 people. In your group, choose a group of characters, for example: the Avengers.
Each member needs to pick a character from the group and must make a webpage using HTML and CSS. You must make the theme (colour, fonts, the general look of the page) look similar to your teammates.
Your page needs to contain the following HTML tags:
- h1, h2
- p
- img
- a
- ul, ol
The content of the page must include:
- A profile picture of the character
- 3 sections giving information about the character
- A numbered list and an unordered list
- A background colour or image
Expert task: When all members are done, make a homepage for the group together that links to all of the other characters.
Hint: You will need to email your pages to one of your members in order to link to all of the pages.
