Adding Images in html

Adding Images in html

site_image
img.add a image to your webpage

Besides linking to others pages, we can also use URLs to add images on a webpage.

To add images on a webpage we start with the <img> tag. Just like the break tag <br> , <img> is an empty tag. That means it has no closing tag.

To display an image , an image tag need the SRC attribute, src for source.

<!DOCTYPE html>
<html>
 <head>
       <title> My first webpage </title>
 </head>
 <body>
    <h1> My first image heading </h1>
     <img src="https://learncode-a-z.com/imag... ">
 </body>
</html>

Image attributes

An image as two attributes, it help to define the image’s size. The first attribute is the Width, the width attribute adjust the width of the image. The second attribute is the Height and as it name it’s just the height of the image.

Now that we know about image attribute let set size of the previous image .

Example

<img src="https://learncode-a-z.com/imag... " width="800" height="400">

Images source

Image need a source. Source is like the address where the image is located. With a address it’s easy for browser or computer to fetch an image.

There are 2 types of source for image :

  • The image can be located in a local file on the same computer then the source can me be write like this : <img src= “/img/myImage.png”>
  • the image can be located on another computer and can only be accessed via internet then the source can have this kind of syntax: <img src= “https://mywebsite.com/img/myImage.png”>.

That’s it ! Now you know how to put an image in your html code. For more lessons don’t forget to subscribe!

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

<img src="https://learncode-a-z.com/imag... " width="800" height="400" alt="The red car">

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!