Images

Sometimes do you wonder if you can just have a photo album on the web, whereby, you can display series of picture probably of you or maybe thing you like? well with “img” element you can simply do that and insert series of links to each images, but first of all let’s just see what the <img> element can do for us.

Example 1:
Let’s try to see how we can use the <img> element to do some basic display of an image.

<img src="gow.jpg" alt="God of War" />

It will look like this on a browser

The attribute “src” means source and it locates the link to the image file, in our previous lessons, we used href to link to text and our html document. in image element, src is the required attribute to use. a complete URL to the image file can be used or just the name if placed in the same folder as the web page.
Notice how the img element is opened and closed using the same tag. Like the tag <br />, it is not tied to a piece of text.

“gow.jpg” is the name of the image file you want to insert in your page. “.jpg” is the file type of the image. Just like the extension “.htm” or “.html” shows that a file is an HTML document, “.jpg” tells the browser that a file is a picture. There are so many image formats available but in this tutorial we’re going to base on three different types of image file types you can insert into your pages:

GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily ‘heavy’ pages can be extremely annoying for the user.

Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.

How can i edit an Image if i want?
Well, there are so many source free / open source/ free ware applications available for windows, mac and Linux that you can use to edit any images you want. If you really want to go pro, then you can get Photo shop, its a nice program but it’s not free. consequently you can use a free image editor such a PhotoScape, it has an easy to use interface and it’s free, you can use it to edit the 3 types of images stated above.

How do i get images for my website?
You can borrow images from other website but please be sure not to violate copyrights when downloading image files, still its easy to know how to download image files from a website.

Right click on the images and choose
Save image as or save picture as depending on your browser
Choose a location to save and “Press Save”, like you can change the name on save as prompt.

Do this for the image below and save it on your Computer, in the same location you have your HTML documents (Notice that the image is saved as .png file)

You can insert this into your web page, try it our for yourself.
Do i need to know more about images?
Yes there’re more to know about images, consequently you can add an image attributes that will give it style once it is hover on or probably once a user wants to click on the image. let’s see some couple of examples shall we!

Example 2:


<img src="phclogo.png"  />
or 

<img src="http://www.phclogo.png"  />
or 

<img src="images/phclogo.png"  />

In this steps you can use the direct image file link, if its in the same folder with your HTML document or use a hyper link, if it’s on a web server or if it’s in a folder and your HTML document is in the root folder, you can specify to the browser the location of the image file.

Example 3:


<a href="http://www.phcityonweb.com">
<img src="images/phclogo.png"  />
</a>

It will look like this on a browser

Are there any other attributes i can use?
Yes you can use the “alt” attribute to write a short description of what the images is all about, “title” attributes can also be used to add more information to the images.

Example 4:


<img src="images/phclogo.png" alt="Phcityonweb Logo"  />

NB. Note that the alt attribute is used to show an alternative description of the image file, probably you must have noticed this once a Google or Facebook page is loading, you can see a text hidden before the logo appear that say “Google Logo” or “Facebook Logo”, that’s what the alt attributes does. Although most browser would show you the name in a popup box once the mouse cursor hover on the image. But that’s not the proper function of the alt attribute.

Example 5:
The Title attribute is use to describe image or add extra information to the images, its displays a popup text once the mouse cursor hovers on the image.


<img src="images/phclogo.png"  title="PhcityonWeb Learn HTML Programming "/>

It will look like this on a browser

Example 6:
To change the width and height of an images, you can use the width and height attributes to manipulate the size of the image and how it’s to be displayed.


<img src="images/phclogo.png"  title="PhcityonWeb Learn HTML Programming " 
width="200px" height="70px"/>


<img src="images/phclogo.png"  title="PhcityonWeb Learn HTML Programming " 
width="150px" height="50px"/>

It will look like this on a browser

However, keep in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, you should never decrease the image size by using the width and height attributes. Instead, you should always resize your images in an image editing program to make your pages lighter and faster.

That said, it is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way.

Back

Main: HTML Programming

Previous Lesson: Links

Next Lesson: Creating an HTML Document