Rendering Images

00:00 The <img> element contains a src attribute, which allows you to attach images. The src references the image source, just like href is used with a link. You can head over to the code to begin adding images.

00:14 Before you start, make sure you have three images inside your images folder. You’ll find the sky images inside of the images folder after downloading the materials, or you can find three images of your own to use.

00:27 Your file directory should look similar to mine with an images folder that contains a `gallery .html` file and three images.

00:37 Open your gallery.html file if it is not already open. Add a heading element for your page. Since this is the first heading element on your gallery page, you can add an h1 tag, Image Gallery for the text in between, and then h1 to close the tag off.

00:55 Underneath your heading, you can begin adding your images. Type an opening image tag, and within the opening tag type src equal quotes sky

01:06 underscore 1.png. Now add a space and type alt equal "Cloudy sky."with period.

01:16 If you recall from earlier, void elements do not have a closing tag and are self-closing so you do not need to add a closing image tag. The source is a relative link to your existing “sky 1.png” image.

01:30 You added an alt attribute that stands for alternative text. It is used to provide a text alternative for an image in case the image cannot be displayed or if the user is using assistive technologies like screen readers.

01:44 Go ahead and add the remaining two images.

02:02 Now that you have all three images added check this out in your browser. When you open your `gallery .html` file in your browser, your page looks similar to this.

02:13 Images are a great way to make your website more visually appealing. However, the image gallery is a bit all over the place and without any additional styling, the website looks rather old school.

02:24 It’s time to change that. In the next section, you’ll add styling rules to your HML and gain better control over how the elements on your website look. Before moving on to styling, you can recap what you just did.

02:37 The alt attribute is used to add alternative text that describes the image. It’s similar to docstrings in Python. A docstring may describe the purpose of an object, the alt text describes the content of an image.

02:50 Alt text should end with a dot to help convey a complete thought, which may improve comprehension for some users.

02:57 Now you can move on to styling.