Let’s make a website. Episode IV – Images

Where you acquire the sacred knowledge to put GIFs everywhere.

Yanis Vieilly

Follow

Published in

codeburst

5 min readJan 28, 2018

--

I’m back. And so soon after the last post. You’re welcome.

This post will be shorter than the previous one, since we’ll only focus on one topic: images. In the last part, we learned a lot of new HTML tags at once. This time, there’s just gonna be one: <img>.

(Émile &) Images

A quick recap

Last time we said each other goodbye, our web site looked like this:

While it’s extremely beautiful in its current state, it feels like it’s missing something. If you just said “yeah a good sense of design”, you wouldn’t be wrong, but what we’re gonna add today are images.

You can see them everywhere on the web. For example, there’s an image right above this paragraph, showing what our web page looks like. When used in moderation, they can perfectly illustrate a paragraph or an idea. They can also make for a great page header.

This web page has very little text. The logo itself is an image, and the entire background is a photograph. In my opinion, it just looks awesome.

Let’s find an image

We’re gonna add one to our page.

You can choose one of your images/photographs on your computer. Or you can find one on the web. There’s always Google Images, but as for myself I like to go on Unsplash for some quality photography. The photos there look great and are free to use. Here’s what I got:

Pont Alexandre III, in the most beautiful city in the world. Photo by Léonard Cotte on Unsplash

Adding the image

From theory (mostly)…

Ok, you got your image on your disk, ready to add it?

First of all, you need to move it to the same folder as your .html file. All good? Perfect.

Now for the code itself. As I said earlier, we’re gonna use the <img> tag. You use it like this:

<img src="path/to/image.jpg">

A few things here:

<img> is called a self-closing tag. This is because contrary to the usual tags like <h1> or <a>, it doesn’t have a corresponding closing tag (e.g. </h1> or </a>). Indeed, self-closing tags are not used to enclose and give meaning to content. They have meaning just by themselves.
Guess who’s back (back again)? Your old friend, the attribute. Here it’s src. It basically tells the browser where to look for the image.

I mean the song is already in your head by now so you might as well have the music video.

Let’s say your image is named great_photo.jpg. Here’s what it would look like in your code:

<img src="great_photo.jpg">

Note that if you put great_photo.jpg in a folder called images on your disk (the images folder still has to be in the same folder as your .html file), you can tell your browser that the image is there by creating your tag like this:

<img src="images/great_photo.jpg">

Why would you do that? Well right now you only have two files. But after a while you could have hundreds of them, and it will be much easier if your files are categorized in different folders.

Leslie would make a great web developer.

…to practice

Alright! Let’s add our image to our existing code from last time.

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>    <a href="http://www.medium.com">This is a link to the Medium homepage</a>    <img src="images/great_photo.jpg">
  </body>
</html>

Here’s the result for me:

Sure the image appears on our screen, which is awesome in itself. But it’s weird cause it’s displayed on the right of our link. And there’s this whole white space on the left.

How could we fix this? If only there was a way to put this image in a new paragraph. It would totally solve our problem.

Any idea? :)

Take all your time to find the answer (spoiler: it’s in the third post)!

Yes! The <p> tag! We’re gonna put our image in a new paragraph. Just enclose your <img> tag in an opening and a closing <p> tags.

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>    <a href="http://www.medium.com">This is a link to the Medium homepage</a>    <p>
      <img src="images/great_photo.jpg">
    </p>
  </body>
</html>

The new result:

Wow! It actually looks pretty decent!

Going further

You now know how to add images to your web page. Feel free to add as many as you want!

As a bonus: did you notice that in our example, our image is a .jpg file? Well, what do you think would happen if you were to download a .gif file, save it in the same folder as your previous image, and type its name in the src attribute, instead of great_photo.jpg? I’ll let you check this out by yourself. :)

The next post will be a little different, kind of an interlude. We’ll talk about code editors. They’re there to help you write code more easily than with Notepad!

See you next time!

The next article is available here!

Note: This post is part of a series.

As usual, feel free to share this article if you liked it!