Embedding Images

Our Web page now doesn't look too bad, but it's still currently text-only. Images can make Web pages more interesting and provide more context on the content of the page.

In order to put an image into a Web page, we use the <img> (opens new window) element.

It accepts a src (opens new window) attribute that specifies the URL of the image to load, as well as an alt (opens new window) that specifies an alternate text to display in case the image fails to load.

It also accepts the width and height attributes to specify the dimensions of the image when rendered on the page.

<img 
     src="https://res.cloudinary.com/arnellebalane/image/upload/v1632525393/html-css-workshop/avatar_sxu43r.jpg" 
     alt="A photo of myself" 
     width="100" 
     height="100" 
/>

Adding Images to Our Page

In the 05 - Images page of our design reference, we display our image right above the intro section text. Let's update index.html to load that image:

<img
  src="https://res.cloudinary.com/arnellebalane/image/upload/v1632525393/html-css-workshop/avatar_sxu43r.jpg"
  alt="A photo of Arnelle"
  width="130"
  height="130"
/>

The image in the design appears rounded and has a border around it, so let's add those styles in index.css:

.intro-section img {
  width: 130px;
  height: 130px;
  border: 8px solid #ede9fe;
  border-radius: 50%;
}