In the book, you learn how to re-size elements. We're going to do a bit of that here too.
1. Open up Microsoft Paint.
That's right, let's do some drawing in our coding class. Click the search bar at the bottom of your screen and type in "paint". Click the app that's called Paint. You should have MS Paint opened up right now.
2. Resize your image.
There are four dots in each of the four corners of the white canvas. Click on one of those, hold down the mouse and drag to resize your image. I personally resized the canvas to about 300x300 because I want to make a square.
3. Draw something.
What I did was: I clicked on the Paint Bucket tool on the top left, then I selected the Colour Red on the top right and finally I clicked on my canvas to turn it a bright red.
4. Save it.
Click on File which is on the top left of your screen, then click Save As. Save it in your working folder and give it a name. I called it square.png
5. Create your html file.
You know the drill. Create WeekE.html. Make sure it is in the same folder as your image that you just made! It should look like this!
<body>
<head>
</head>
<body>
</body>
</body>
6. Add an image tag.
And don't forget to source your image.
<body>
<head>
</head>
<body>
<img src="square.png">
</body>
</body>
7. Open the HTML file in your browser.
There it is, your image. Let's give it some style.
8. Give your img tag a width and height style.
<body>
<head>
</head>
<body>
<img src="square.png" width="50%" height="200%">
</body>
</body>
9. Open it in your browser (again).
Wow, it looks different! Yep, that's 'cuz we styled it. Try playing around with the numbers and see what size looks best on your screen.