How To Add Images In HTML and CSS [Part One C]

Facebook Twitter Email Whatsapp

 

 

Hi, welcome to part one C of this course. The last time in part 1 B of this course, we learnt how to write recognizable headings and paragraphs to form a good web page.

 

Today, we will continue from there, and learn to add colour to our work by learning how to add images to our webpage.

 

Watch video here or continue reading

Download Source Code HERE

So, let’s get started. Open the HTML FOLDER on your desktop. Go, get some images you have on your pc and paste them into this folder. You can download free images from pixels.com, if you don’t have some images on your pc.

 

I will also leave the images I use here as part of the resource files so that you may want to download and use them.

 

As it is a best practice to follow! Name all the images in small letters just like I do here. For example, pic 1, pic 2, pic 3 and in that order.

 

Inside this same folder, create a subfolder and name it as images.  Now, move all the pictures except pic 1 into this subfolder.

 

Now, open your brackets editor. Create a new file and name it as images.html. Save it in the html folder. Copy the basic html skeleton and paste here.

 

In the head section, write images for the title.

Come to the body section and here, we’re going to add an image. The img tag is used to add images to your html file. In the previous lessons, we made mentioned of this tag as one of the tags that has no close end. Now, let’s make use of it here.

Follow what I do here even when you don’t understand this at the moment.

 

Open the less than symbol and write img, space, src, equal to, double quotes and then add the path of pic 1 and finally, the greater than symbol like this. Now, what did we just do?

 

The img is the image tag that clarifies we are adding an image. Src represents the source or path or the location where our image is being stored. This part is the image name and its format.

Save and check on live preview and bham! We have pic 1 added to our webpage.

 

By default, the image takes the full length and width of the browser window. But this might not be what we are looking for! So let’s go back to the editor and reduce the image width and height.

 

We use pixels or percentages to define the image resolution. So, write width to be, let’s say, 600 pixels. Save and check changes. And you can see the image width dropped to 600 pixels of that of the browser window.

When the width is added without the height, the browser automatically calculates the height and adjust it for you.

 

In the same way, when only the height is given, the image width is calculated automatically. For example, give the height to be 600 pixels. Save and check changes.

 

 You can see that the width is automatically adjusted. At times, the image height is automatically calculated based on the image height and not the browser height. We shall handle this behaviour of the browser later on in this course.

 

We can also use percentages to define the image resolution as well. Let’s set the width to occupy, let’s say, 50% of the browser window.  Save and check changes. And that takes effect!

 

When we set the width to 100%, it will occupy 100% of the browser window as well. Setting both width and height to 100%, the image will occupy 100% of the entire browser window. Experiment with most numbers to see which one looks good for you.

 

But for now, let’s set both height and width to 300 pixels. And this looks cool for us. Now, there is one more important feature I will like us to add here. This is called the alt text. This text shows in place of the image in case, the image is not able to load for some reasons or cannot be found on its original location.

 

Let’s experiment this. Back to pic 1, write beautiful flower for the alt text like this. Save and check changes. Nothing shows right?

 

Now, go back to the html folder on your desktop once again. Move pic 1 from its location to the subfolder named images. Now, go back to your browser again and refresh the page.

 

And what happened? Pic 1 is absent and the alt text, beautiful flower, is displayed in place of pic 1. The image could not load because, the path or location of the image has changed and the alt text will tell you what type of image was here before.

Now, go back to the html folder on your desktop. Open the images folder and take pic 1 back to its original location.

 

Now, go back to your browser and refresh to see the changes. Pic 1 is back and the alt text is not shown again right? Good, now, you have understood the alt feature perfectly.

 

Now, go back to the editor and let’s add more images to our webpage. This time, we’re going to add images from the subfolder named images in the html folder on your desktop.

 

 Now, pay very key attention to this stage. The path or location of these images are different from pic 1 so see how we add them as well.

 

Open the img tag and add pic 2. Pic 2 is inside the images folder so, the images folder will appear followed by forward slash, and then, the image name.

 

Add pics 3 and 4 following the same procedure.  Let’s still have some fun around the image path and see how they can also be written.

 

Go back to your images folder and create a subfolder inside it. Name it as sub. Move pic 5 into this sub folder. Now, go back to your editor and let’s add pic 5.

 

Open the img tag and add pic 5. You will notice that, the first folder or parent folder comes first follow by the next child or subfolder in that order. In this case the images folder will come first followed by its child folder where pic 5 is located.

 

Do you understand the trend? Then go ahead and experiment this to deepen your competence.

 

Alright, that’s how to add images to your webpage. Now. Let’s carry out this activity demo, combining our previous lecture and this one to come out with a webpage made of text and images.

 

Go to the exercise folder on your desktop. Create a folder inside it and name it as img. Copy one image of your choice into this folder and give the image a name.

Go back to the editor. Create a new file and name it demo hyphen image.html. Save it in the exercise folder.

Create the basic html skeleton. In the head section, write demo image for the title.

 

Come to the body section and open the image tag and add the image you saved in the exercise folder.

 

Give the image width 600 pixels and height to be 500 pixels. I will give an alt text as woman shopping. Save and check changes. And there it is! Now, go back to the editor and let’s make meaning to this image by adding headings and paragraph.

 

Open the h1 tag before the image and write happy shopping day immediately above the image.

 

 Directly beneath the image, let’s add a paragraph. Add any text you want. I will paste my sample text here.

Now, save and check changes. And wow! You have it right there.

 

 

Congrats! You have learnt how to add images to your webpage and blend them with text to define them.

 

QUICK SUMMARY

1.     The img tag is used to add images.

2.     Pixels and percentages are used to define image resolution.

3.     The browser automatically adjust the height when only the width is defined and vice versa.

4.     The alt text is shown in place of an image when the image location changes or when image is not able to load for some reasons.

 

 

Now, this is your exercise for the day. In this activity, you are on your own. Make sure you finish with this activity before you move on to the next lecture. As usual, I will leave the source code so that you can compare with your work to correct your errors.

 

These are the requirements for this activity.

Ø  Add 4 pictures each given both width and height 300 pixels.

Ø  Add appropriate alt text to all images.

Ø  Add the appropriate headings above the images as shown in the screenshot.

Ø  Add paragraphs beneath images as shown.

 

Congrats! And good luck. See you in the next lecture. Goodbye!