Adding and Styling Images using HTML5 and CSS3

Disclaimer

I have gained the following insights while working through the Firehose Project's Bootcamp Prep Course and Khan Academy's Intro to HTML/CSS: Making Webpages.

Finding, Creating and Uploading Images

Before you can add an image to your webpage you need to find or create one. It is strongly suggested that you use a copyright-free image using a website like unsplash.com. There are lots of other copyright-free websites available that are both paid for and free.

Another option is to create your own images using photography, scanning or digital drawing software like the Professional Adobe Suite, or free alternatives like Krita, Inkscape or GIMP.

Once you have your images you may want to upload and store them onto the internet using websites like Imgur, Deviantart, Photobucket, as well as many others.

Adding: Method One

Once you have found or created and uploaded the image you want to use on your website, you need to add it to your HTML code. To do this first right click on the image you want to use, like this one by Patrick Tomasso on Pixabay.com and Unsplash.com, and select the option "Copy image address.

This will save the web address for the image to your clipboard. You can check that it has worked by opening a new tab on your web browser. The link should look something like:

https://cdn.pixabay.com/photo/2016/03/09/09/14/books-1245690_960_720.jpg

You now need to take this image address and copy it into a new line of code like below:

Notice that the new line of code has been inserted between the h2 and p keywords. This is because I wanted the image to appear underneath the subtitle but before the paragraph. The img keyword is to tell the computer that the following code is going to create an image. The section of code id="books" is going to be useful once we start styling the image in CSS. The src keyword tells the computer where the source of the image is, you'll notice that the link we copied before has been pasted here. Finally, the alt keyword prints some alternative text to use when either the image is not working or if a blind person is having the webpage read out to them using a screen reader.

Please note that the image address that you copy has a file extension at the end of it. The example above ends in .jpg but there are other image file extensions like: .png or .bmp. If they don't you may need to either use Method Two or check the website you are getting the image from for further details. For example, Unsplash.com requires you to use a slightly different method which is outlined on their website here.

Adding: Method Two

A slightly longer but neater way to do it, is to save the image to your computer. To do this you need to download it. To do that click on the download link on the image, as in the example below by Tirza van Dijk on Unsplash.com, or right-click and select "Save image as..."

Make sure to save the image into a dedicated folder with all other elements of your webpage, including the document with the HTML and CSS code like below.

You should also store your separate CSS folder in here, if you decided to do it that way. This is because you will need to save all of this into a zip-folder before uploading it to a website like Getforge.com. Once you have done this, you need to refer to it in your code. To do this is very similar to Method One except you only need to write the filename of the document and the file extension, e.g. .jpg.

Notice how the same keywords (img, src and alt) are in this new line of code. Rather than having a long weblink after src we just have a short file name. The id keyword has been changed to class, this will be explained in a moment in Styling. The alternative text has also been changed.

Styling

To style our two images we now need to return to the style section of the header. First we need to call the id and class keywords in the HTML. Before we do that, let's discuss what the id and class keywords do and how they are different. Both of these keywords assign a label to a part of the HTML so that it can be referred to in the CSS style section. An id keyword is only used to label one element of a webpage, while a class keyword can be used to give many elements the same label. I have used both here to demonstrate them but in this instance using the id keyword for the images would have been more appropriate.

An element with an id label is called in the style section of the code by putting a hash "#" symbol then the word you assigned to it. In my example it is called using #books. After this I have changed or styled this image in two ways. The first thing I have changed is the width to 700 pixels wide. I have also given the picture a solid border. The default colour of this boarder is black but this could be changed by adding a line of code that says: border-color: yellow. You could also change the border in other ways.

An element with a class label is called in the style section of the code by putting a dot "." before the word you assigned to it. In my example it is called using .coding. For this image I have changed the height to 150 pixels. Please note that in both examples I have only changed one dimension, either height or width, not both. You can change both, however if you do the image is likely to become distorted. By changing only one dimension the computer automatically keeps the other dimension to the same scale. The other thing that I have changed is the border-radius. This has made the image into an ellipse.

Round Up

These demonstrations should get you off to a good start when adding images to your webpages. There are also many links throughout the blog that you could explore to find out more. My website now looks like this: