HTML Images

If you already have a personal repository:

• Open the Learn IDE, and in the terminal, type

git clone https://github.com/<your_username_here>/exceptional-realty
cd exceptional-realty
git fetch --all
git checkout main-pages

If you want to use the demo repository to follow along:

git clone https://github.com/learn-co-curriculum/exceptional-realty-demo
cd exceptional-realty-demo
git fetch --all
git checkout html-images

Remember to use httpserver to live test your webpage

Let's go back to index.html so we can add an image to our home page right above our <p> tags.

The way we insert images is using the <img> element. The <img> element has two main attributes, src, the source of the image, and alt, the alternate text.

To add a source to our image, we can provide either a relative path to a file we have locally, or provide a url to an existing image on the internet. We downloaded an image to our images folder in an earlier lesson, but if you do not have that image, you can download it manually by saving the file from here: intro-pic.jpg. Alternatively, if you're using the in-browser IDE, cd into your images folder and type:

wget http://ironboard-curriculum-content.s3.amazonaws.com/front-end/lab-assets/intro-pic.jpg

To reference this file in our source, we need to provide the exact, relative path from where we are calling the file. Since the images folder is in the same directory as index.html, the relative path would be images/intro-pic.jpg. A file in the same directory would just need the filename, and if we were leaving the current folder, moving up to a parent directory, we would use ../ at the beginning of the path. Moving up two directories would be ../../, etc..

We should add an alt text to this image which will be displayed if the image fails to load. The alt text is also important for screen readers for the visually impaired, as the alt text will be read outloud. It is necessary to provide a source for an image to load, and while it isn't required, it is strongly advised to add an alternate text as well.

In our case, we want our alt text to say that this is an image of a beautiful living room.

One additional attribute that can be useful is the title. Content added to this attribute will display when we hover over the image with our mouse. Let's add 'Welcome to Exceptional Realty' to the title attribute. The <img> element should now look like this:

<img src="images/intro-pic.jpg" alt="a beautiful living room" title="Welcome to Exceptional Realty">

If you're working on your own repository, go ahead and add, commit and push up the work you've done to your remote, and then let's see what this image looks like on a live page. Fire up httpserver and take a look at our index.html page, we'll see that the image has appeared.

PHRG HTML Images