This week's homework is all about divs. Divs, divs and more divs. What are divs anyways and why does HTML have so many of them?
Div stands for "divider" and divs are used to divide up your code.
In Week C of the book, divs are used for just that: to divide your zoo webpage up into discrete manageable sections.
1. Copy and paste the file from Week A (WeekA.html) here and rename it to "WeekC.html" (without the quotes) and open it in Notepad.
If you forget how to do this step then refer to Week A's homework for help.
2. In your body element, wrap your "p" element with a div.
<div>
<p>Hello, World!</p>
</div>
"Wrapping" something in HTML means surrounding it with the start and end tags of some other element, as you can see above.
3. Add the following style to the div tag: "background-color: red;" (without the quotes).
<div style="background-color: red;">
<p>Hello, World!</p>
</div>
Did you notice that the word "colour" is spelt wrong? Get used to that when it comes to coding language keywords: they are all standardized in American spelling.
America is a pretty big and important country, but unfortunately they spell words wrong: Colour should always contain a "u" in regular written language, but when coding, you'll sometimes be forced to drop it.
4. Open your HTML file.
You'll notice that the background colour you set has taken effect, and it shows you the typical shape of a div.
Much like water, divs take up 100% of all the width they are given, so our div stretches across the screen to do just that.
Divs only take up as much height as they need to. If you look at your webpage, you'll notice that the div is just tall enough to show its "Hello, World!" element inside and no more.
5. Copy and paste your entire div inside of itself, and change the inside colour to green.
<div style="background-color: red;">
<p>Hello, World!</p>
<div style="background-color: green;">
<p>Hello, World!</p>
</div>
</div>
6. Open your webpage again.
Now you can see with your very own eyes the "green div" inside of the "red div", unless you're colour blind, in which case you might want to pick different colours.
Feel free to copy and paste more divs and play around with any colour you like. The more we mess around here, the more we learn by understanding how things work on an instinctual level.
7. Copy and paste a bunch more times and change the colours.
This is what I did:
<div style="background-color: red;">
<p>Hello, World!</p>
<div style="background-color: green;">
<p>Hello, World!</p>
<div
style="background-color: yellow;">
<p>Hello,
World!</p>
<div
style="background-color: blue;">
<p>Hello,
World!</p>
</div>
</div>
<div
style="background-color: orange;">
<p>Hello,
World!</p>
</div>
</div>
<div
style="background-color: violet;">
<p>Hello,
World!</p>
</div>
</div>
Yours will obviously look different. Make sure not to mess up while pasting, or else the format of your code will be wrong and the browser won't know how to render it properly.
Try copying and pasting until the entire page is filled with colours!