HTML Lesson 7: Images

1
15

Introduction to HTML Images

Images are an essential part of any web page to break up the monotonousness of text on text on text. So how do you add images to your webpage? Well the first step is to upload the image file to the Internet. You can do this by uploading it onto your web server or by using a third party web site. Boom, that’s done. What’s next?

To get a little technical, images are not inserted into a HTML page, but rather they are linked to them. This is done by using the tag. I am sure you noticed that since there is a backslash before the end caret, that this is a void element. Indeed you are correct my friend. The tag uses the src attribute to call upon the location of the image. So the path of that image you uploaded needs to be copy and paste into the src attribute. Please note that this includes the actual file name and it’s extension! So at the end of the path needs to be myPicture.png where myPicture is your picture name and png is the file extension.

The below example shows the WikiProgramming logo! Let’s check it out

Source Code Output

Common Image types

The most popular image types include

  • jpg or jpeg – image in jpg format has very low quality. However the size of image is small. So if your objective is to use small image and quality is not important then you can use image in jpg format.
  • gif – the gif format has better color quality than jpg format. While gif also includes little animation which makes it worst choice for webpage.
  • png – image in png format provides lossless color compression that is why it has great color quality and size is also small. PNG format is developers top choice for websites.

Alternative text

The alt attribute contains the alternative text for an image which will be displayed. This attribute is essential to include into your <img tags as it is considered an error to search engines if it is omitted. Thusly, affecting your search engine rankings. Some examples in which the alt text will be displayed include:

  • The viewer has images turned off
  • The viewer is using a screen reader
  • There is a problem with the image path (works in some browsers)
  • Also, if you hover over the image, that alt text will display!

Check it out:

Source Code Output
Logo

Modifying the Dimensions

It’s fairly rare to have a picture that has the exact dimensions which you would like to display it as. To address this issue, there are two methods in which you can adjust the height and width of the image.

width & height attributes

The width and height attributes can be added inside the tag. To use this, put the numerical value of the size you would like the picture to be in quotes. This method is still accepted in HTML5, however we strongly suggest instead to use the style attribute instead.

Here it is in action:

Source Code Output
Logo

style attribute

The best way to modify the height and width of an image is to use the style attribute. The syntax is a little different but it gets the job done. Here is an example

Source Code Output
Logo

So as you saw, the width and height attributes were both enclosed in quotations in the style attribute. After the numeric value, there is a unit of measurement, in this example it is px for pixels. After the unit of measurement, there is a semi-colon. Don’t get to caught up the details of the syntax in this example. Truth be told this is actually CSS sneaking in for an appearance so don’t fret if it doesn’t make perfect sense to you right now.

Thumbnails

Thumbnails have significance importance with Images. A low quality image with small size and resolution is used for a Thumbnail. Now-a-days, it is recommended to use a Thumbnail every image and video in a Webpage.

Source Code

Summary

  • Images are uploaded either to your web server or one of a third party
  • Images are linked to web pages using the <img> tag
  • The alt tag is essential for proper validation
  • Using CSS to modify the dimensions of the image is better than the height and width attributes.

Next Lesson

Next we will explore ways to manipulate Font in HTML. See you in HTML Font lesson!

1 COMMENT

  1. […] Hopefully you have got enough understanding of how to create text links. But links are not limited to text only. In the next lesson you will learn basics about image and how to add links it. Cool isn’t it? So let move to our next lesson which is HTML Images. […]

Leave a Reply