Add Images to Your Website

In this tutorial you will learn how to add images to web page.

Adding Images to web page

We can add images to your website by using the img element, and point to a specific image's URL using the src attribute. src stands for "source". The img tag is empty, which means that it contains attributes only and it has noclosing tag.

The value of the src attribute is the URL of the image you want to displayon your page. The URL points to the location or address where the image is stored.

The HTML <img> element defines a image:

Example: Try It


 
<img src="images/Car.jpg">

Result:

<img> tag attributes:

Adding alternate text:

The alt attribute is used to define an alternate text for an image. The alt attributetells the reader what he or she is missing on a page if the browser can’t load images.The browser will then display the alternate text instead of the image.

Example: Try It


<img src="images/Car.jpg" alt="Car image">

Result:

Note: It is a good practice to include alternate text for every image on a page to improve the display and usefulness of your document for people who have text-only browsers.

Adjusting image size:

Width and height attributes are used to adjust the pixel width and height of the area the image will occupy on the page.

Example: Try It


<img src="images/Car.jpg" width="200" height="150" alt="Car image">
<img src="images/Car.jpg" width="150" height="100" alt="Car image">
<img src="images/Car.jpg" width="100" height="50" alt="Car image">

Result:

It's a good practice to specify both the width and height attributes for an image, so that browser can allocate that much of space for the image before it is downloaded. Otherwise, image loading may cause distortion or flicker in your website layout.

Insert Images from Different Locations:

We can also get an image from another folder on your server or another location on the Web as follows:

<img src="images/car.jpg">
<img src="https://srirep.in/images/car.jpg">

Background Images: Try It

We can add images to html page as follows:

<body background="flower.jpg">

Or using style attribute

<body style="background-image:url(car.jpg)">

Aligning Images: Try It

We can align images within the text as follows:

Using style attribute: style="vertical-align: text-middle/top/bottom;"

<img src="Car.jpg" style="vertical-align: text-top;" width="100" height="100">

Top align image

Middle align

image
Bottom align

image

Left align

image (style="float:left")

Practice exercise:

1.Write an html code to display the web page as follows. View

Sri Hari Book Store

Mission

"sriharibookstore.com is committed to bringing the most convenient, easy and secure shopping experience on the web."

Products

10 Million Books across 20+ Languages, Audio Books, Gadgets & Accessories, Toys, Electronics, Mobiles & Tablets Accessories, Health Care Devices and Many More Stores.

Highlights

sriharibookstore.com has been awarded the most promising Start-Up company 2013.

The Most Prompt Customer Service & Support 2013-2014.

India's largest Book Warehouse - India Book of Records 2013 -2014.

2.Write an html code to display the web page as follows. View

Sri Ramanuja e-Patashala

New Media and Web Design

Sri Ramanuja Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services .

Meeting Your Business Needs

Our expert designers are creative and eager to work with you.Take advantage of the power of Web!

Graphic design

When it comes to Graphic Design there are so many directions you can go. We’ve created our fair share of business logos and brand guidelines,
but one of our favorite styles continues to be bringing history to life with modern illustrations.

        Learning is not  
             the product of teaching. 
               Learning is the product of 
                          the activity of learners.