Return To CS 100 Home

Images

Video Summary

Image tags take the form <img src="picturename.picturetype">, where src stands for source, or where you are getting the picture from

  1. Relative images
  2. Absolute images
  3. Resizing images
  4. Lab exercise

Relative Image

In order to add a relative image to your page, you will need to save a picture into your replit folder. You could use whatever picture you like, but for this example we suggest you right click on the image below, click "save image as", and save it into the replit folder. Remember that in order for a relative address to work, the image has to be in the same folder as the rest of the webpages.



Once you have the picture saved, you should be able to display it on your page with the following: 

 <img src="horse.gif" >


There are a few things you should note:

  1. The image name, in this case "horse", has to match exactly how it was saved into the replit folder, including capitalization
  2. The file type, in this case ".gif", has to match exactly with the file type the image was saved with, including capitalization
  3. The file type of the image doesn't matter. What matters is you match it when you reference it

Absolute Image

For absolute images, you don't need to save the picture itself, which can be helpful for saving your limited space on replit. You will simply use the absolute web address of the picture. To find the absolute address of a picture, right click on the image and click "view image". This should bring you to a page that just has the image on its own - the absolute address of the image will be in the web address bar at the top. Copy that and paste it into the src attribute.

For example, if you wanted to use the animated image below, the absolute address would be "http://www2.cs.uregina.ca/~cs100/images/sem3/smoothjazz.gif".
Animated images are added the same way as regular ones.



You should be able to add it to your page with the following: 

 <img src="https://cdn.discordapp.com/emojis/562331428080320522.gif?v=1" >

Resizing Images

There are a few ways to resize pictures. The easiest is to use the height and width attributes, such as: 

<img width="350" height="300" src="horse.gif" >

However, if you are using your own pictures, especially off your phone, you will probably want to use a simple drawing app, such as Paint, and resize the picture directly. For example, if you take a picture off of your phone, the original picture will have such a large file size that you will instantly use up your limit on Hyperion.

Details on this can be found on the FAQ

Lab Exercise

Create a new page named testing2.html and add two images to it, one using a relative address and one using an absolute address. It doesn't matter what the images are.