Images - HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 5: Images

On to some fun stuff. Let's add an image to our web page. First of all go ahead and create a simple image in Microsoft paint or any other program that you might use. It could be a colored rectangle. It doesn't matter. As long as you have an image to use for this lesson. Make it about 500 pixels by 500 pixels and save it as image.jpg. When you save it, save it right into your website folder that has your HTML document in it. As far as taking images off of the web is concerned you have to be careful what images you use because you don't own the rights to that image and might have to ask the creator for permission or put an acknowledgment to that person in your website or wherever you may have used it. There are some safer places out there like creative commons website's where people upload images to a website and release all of their rights to them. You can do a search for creative common images but read very carefully because some of their content has rules you still have to follow. One website for downloading free images is FreeDigitalPhotos.net. Just make sure you read their rules and terms of use. But for learning purposes any image that you create will be fine. So now that you have an image saved into your website folder go back to your HTML code in your text editor and enter this line right after your opening body tag:

<img src="image.jpg">. Okay before we run our page let's break this down:

·This is another empty element and does not have a closing tag.

·<img stands for image and tells the browser that we are adding an image to our page in the area we placed it in our code. So for our example we are displaying it as the first thing at the top of our web page.

·src= stands for source and this is an attribute. It's telling the browser where to find the image and since we saved it right into our website folder we don't have to specify a huge file location. We can just call it by name.

·"image.jpg"> And this is the name and file extension or your image. Make sure that you surround it with double quotes.

Go ahead and run your page now and you will see your image is displayed in the top left corner of your browser window. You'll also see that there is a little bit of space between the image and the sides of the page. This is called a margin. The browser adds this automatically and we'll go over how to change this later.

Another thing that you could do if you plan on adding a lot of images to your website is create a folder inside of you website folder. Name it something like images. This way you can keep all of your images organized and in one place. The only difference in your code to add an image now would be adding the folder name and a forward slash. So you would have:

<img src="image.jpg">

You could also point to another image online and grab a copy from that website to display on your page. Say if you had an image stored on photobucket.com. In this case you would use the full url (location) of your image. For example:

<img src="http://www.photobucket.com/youraccount/nameofyourimage.jpg">

Resizing Images

If after you load your image onto your page you don't like the size of it. You can change it simply by adding this code directly to your img element:

<img src="images/image.jpg" width=200 height=200>

What's happening here is we are loading the image at it's original size and then the web browser on the user's computer will re-size it. By the way the 200 that we put in for the width and height means 200 pixels. When we get into CSS we will be able to re-size things in a few different ways including scaling and percentage. Resizing images in the example above is okay if you just want to make a small change to one or two images. But you wouldn't want to do this throughout your entire site with many images. This will make a big impact on how fast your website loads. So it's always a better idea to re-size your images in an image editor before you load them to your page. You can re-size them in Microsoft paint or an image editor. There are a bunch of free and paid editor's that you can get. But if all you need to do is re-size something your paint program can do that easily.

You can also add some alternate text to your code in the case that your image didn't load for some reason. The text will display instead of one of those error images that we've all seen before. If you want to add this to your code it would now look like this:

<img src="images/image.jpg" alt="could not load image" width=200 height=200>

To see an example of how this would look just add an extra letter to the name of you image. So add an extra e to the file name, imagee.jpg. Then run your page again. Since the file name is different from what you actually saved it as you will get the text displayed instead of the picture. This text can say whatever you want it to say.

Image Formats For Web Use

There are four basic formats for images that you will find on the web.

·.jpg or .jpeg This is the format that is most commonly used for images on the web. Any images that you want to load that are high quality should be saved in this format. Good for images that use many colors. You shouldn't use this format for images containing text or large areas of a single solid color because you might get a blurry picture.

·.gif You would want to use this format for less quality images. .gif files are always reduced to no more than 256 colors. The benefit of using a .gif instead of a .jpg is having a smaller file size for the browser to load. Good for text images and large solid colors.

·.png This format is basically the replacement for the older .gif format. But some browsers won't display a .png file so you might be better off using .gif.

·.bmp You probably won't ever use this format to display an image. Most browsers will not display a bitmap image and I would recommend using one of the other three instead.

Quiz Chapter 5

1.What is the empty element used to add an image to your web page?

2.When is it okay to re-size an image inside using HTML?

3.What attribute do you use to add alternate text to an image?

4.What format would be best to use for an image that has many colors?

5.What is the best format to use for an image containing text?