Let's make a collage. If you don't know what that is, look it up; but it's basically a picture or poster made up of a collection of smaller pictures
1. Think of a theme or idea for your collage.
The first thing that comes to my mind is space. Maybe I'll do planets. Why not?
For you it could be anything: pictures of animals, pictures of a single specific place you like, you and your best friend, random objects on the street, a bunch of amorphous shapes that have no meaning whatsoever, which ironically gives it a meaning...
Pick whatever you want.
2. You know the drill: Copy and paste your file from Week A and rename it to "WeekD.html" (without the quotes).
3. Open the file and delete the "Hello, World!" line and replace it with a "div" element.
<body>
<div>
</div>
</body>
4. Inside the div, add the title of your collage wrapped around in "h1" tags.
<div>
<h1>My Collage Title</h1>
</div>
Make sure to rename the placeholder text to your actual collage title. That should go without saying but I know for a fact some of you will copy the text verbatim.
In my case, it is:
<h1>The Planets of our Galaxy</h1>
5. Inside your "head" element, add a "style" element.
<head>
<style>
</style>
</head>
6. Inside your style element, create a ".title" class.
<style>
.title {
}
</style>
We will be using this class to style our title, if you couldn't already tell.
Also in your style element, add a block for the body element:
<style>
body {
}
.title {
}
</style>
7. Go down to your div and apply your .title class to the div.
<div class=".title">
<h1>My Collage Title</h1>
</div>
8. Download a bunch of images for your collage.
Go on the World Wide Web and find some pictures. Make sure to put them in the same directory as your HTML file, so the directory might look something like this:
WeekD.html
My-Picture-1.png
My-Picture-2.jpg
My-Picture-3.webp
My-Picture-4.png
My-Picture-5.png
My-Picture-6.jpeg
.
.
.
Six is probably a good enough number of images, though you can add more if you'd like.
9. Add an "img" element underneath your title div to add your first image.
<div class=".title">
<h1>My Collage Title</h1>
</div>
<img src="My-Picture-1.png">
If you open your webpage in the browser then you might find your image to be way too big on the screen. One way to fix this is to set the "width" and "height" attributes of the img element. For example, you could do this:
<img src="My-Picture-1.png" width="25%" height="auto">
This sets the width to 25% of the original width and the height to scale automatically with it so the image doesn't look all stretched and wonky.
10. Add all the other images.
For example, here are all mine:
<img src="The_Blue_Marble,_AS17-148-22727.jpg" width="25%"
height="auto">
<img src="51Eridanib_2_Feat.webp" width="38%" height="auto">
<img src="file-20230413-14-kps5s1.avif" width="35%"
height="auto">
<img src="planets-contain-more-w.jpg" width="35%"
height="auto">
<img src="image_2642-Tatooines.jpg" width="25%"
height="auto">
<img src="Neptune-Like-Exoplanet-Art-Concept.jpg" width="31%"
height="auto">
Notice the different width values. I just tweaked the numbers until it looked good on my screen.
11. Add some styles.
In my case, I just want to set the background to black and change the colour of my title to white:
body {
background-color: rgb(0, 0, 0);
}
.title {
color: rgb(255, 255, 255);
}
But you can do whatever colours you want, or whatever fits your collage.
And you're done!
Following these steps, I found a bug in my code: I didn't actually change the colour of my title.
There's an easy fix to this, and that is to just add the style inline to the title.
<h1 style="color: rgb(255, 255, 255)">The Planets of our
Galaxy</h1>