Handling Images in HTML – inserting images, dimensions and alt text

Hello students, welcome to Kwickprep. A web page without pictures looks like a notebook with only text. How does a browser know which photo to show, and how big? Today we will learn to insert images in HTML, set their size, and write alt text.

First, let us see why images matter. Images make a page attractive and easier to understand. A school website shows photos of the annual day and its toppers. An online shop shows a photo of every product before you buy. Remember one thing. The picture is a separate file, and the page only points to it.

Image files come in different formats, and the extension tells you the format. JPEG files end in jpg or jpeg, and they suit photographs. PNG files keep sharp edges, so they suit logos and diagrams. GIF files can hold small, simple animations.

To insert an image, we use the img tag, short for image. The img tag is an empty tag. An empty tag has no closing tag, because nothing is written between an opening and a closing tag. The attribute src, short for source, gives the name of the image file. Here the browser shows the file school dot jpg.

Let us be clear about the word attribute. An attribute gives extra information to a tag. It is always written inside the opening tag, after the tag name. Its form is the name, an equals sign, and the value in double quotes. One tag can have many attributes, separated by spaces, in any order.

The src value must tell the browser exactly where the file is. If the image is in the same folder as the page, just write the file name. If it is inside a folder named images, write the folder name, a slash, then the file name. If the image is on another website, write its full web address.

Next, the dimensions, which means the width and the height. The width attribute sets how wide the image is. The height attribute sets how tall it is. The numbers are in pixels. A pixel is one tiny dot on the screen. So this photo of the Taj Mahal is four hundred pixels wide and three hundred pixels tall.

Keep four rules in mind for width and height. The value can be pixels, or a percentage of the page width, like fifty percent. If you give only the width, the browser adjusts the height and keeps the shape. If both values do not match the original shape, the photo looks stretched or squashed. Giving the size also stops the page from jumping while images load.

Let us pause and predict. The original photo is eight hundred pixels wide and six hundred pixels tall. We write only width equals four hundred. What will the height be? The width became half, so the height also becomes half, which is three hundred pixels.

Now the alt attribute, short for alternative text. Alt text is a short description of the image, written in words. If the file is missing, or the internet is slow, the browser shows these words instead. Here it would show, Taj Mahal in Agra.

Alt text is small, but it does three important jobs. It is shown when the image cannot load. A screen reader is software that reads a page aloud, and it reads the alt text to users who cannot see. Search engines, like Google, also use it to understand the picture. So keep alt text short, and describe what the picture really shows.

Your textbook may show a few more attributes. The title attribute shows a small tip when the mouse rests on the image. Border draws a line around the image, and the number is its thickness in pixels. Align places the image to the left or right, with text flowing beside it. Border and align are old attributes, and modern pages use CSS for them.

An image can also work like a button. Put the img tag inside the anchor tag, a. The href attribute of the anchor gives the page to open. Now, when a student clicks the annual day photo, the gallery page opens.

Here is a complete page. The heading says, Our Trip to Agra. Below it, the img tag shows the Taj Mahal photo, four hundred pixels wide. The height adjusts by itself. If the photo fails to load, the words Taj Mahal in Agra appear instead.

Exams and practicals often catch these mistakes. If the file name or extension is wrong, the browser shows a broken image icon. Match the name exactly, because some servers treat capital and small letters differently. If alt is missing, nothing useful appears when the image fails. If width and height do not match the shape, the photo stretches, so give only the width.

Let us revise what we learned today. The img tag is an empty tag, and src gives the image file. Width and height set the size, in pixels or percent. Alt gives words shown when the image cannot load, and screen readers read it. Title shows a tip, while border and align are old attributes. Put img inside an anchor tag to make an image link. Try adding a photo of your school to a page today.