Insert an image web page…

5 min readFeb 23, 2021

How to insert an image

You can easily insert images from any section of an HTML page. <img> tags are used to insert an image into an HTML page. It is an empty tag that includes only attributes, as it does not require a closing tag. <img> tag should use inside <body>…</body> tag. The attribute “src” is used to add the source image, i.e., the image’s URL. The alt attribute is used to add alternate text and width is used to add width while the height attribute is used to add the height of the image.

<img src=”coffee.jpg” alt=”coffee Cup” >

Definition and Usage

A visual representation of something is a picture. It is an image that has been formed in electronic form or copied and stored. In terms of vector graphics or raster graphics, an image can be represented. Often, an image stored in raster form is called a bitmap.

The <img> tag in Html is used to insert in-line graphics (typically small graphics or icons) into an HTML document. This element is not intended for additional HTML text to be embedded.

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Main Attributes

You have to use an HTML tag when you are using img. The src part is an attribute of the img. There are lots of attributes which can add to the img tag. Some of them are,

· width:-Specifies the width of an image. (pixel)

· height: - Specifies the height of an image. (pixel)

· alt:- Specifies an alternate text for an image. (text)

· src:- Specifies the path to the image. (URL)

Set image size

First of all, in any text editor, we have to type the Html code or open an existing Html file in the text editor where we want to adjust the size of the image. Phase 2: Now, within the img tag, put a cursor. And then, to adjust the size of an image, we must use the height and width attributes of the img tag.

<img src=”coffee.jpg” alt=”coffee Cup” width=”500" height=”300">

Insert images from another folder

After choosing the image, you have to copy it to your images folder. Then open up your index. The line <img src=”” alt=” My test image”> is the HTML code that inserts an image into the page. Then insert the file path into your HTML code between the double quote marks of the src=”” code.

<img src=”images/Mushroom.jpg” alt=”Mushroom” width=”400" height=”300">

Insert images from another web site

When you are inserting an image from another website, first you have to copy the URL of the selected image and then after opening the Html file, insert it into the img code and save it.

<img src=”https://tinyurl.com/3ovzfvf2" alt=”Dog” width=”400" height=”250">

Image Border

To create borders around the images by using Cascading Style Sheets (CSS), you have to use the CSS border property. You can also use other CSS properties to create HTML borders (such as border-width, border-style, and border-color), but these don’t do anything that border doesn’t do. That’s because the border is shorthand for those other properties. When you use the border property, you need to supply three parameters; Width, Style, and Color. The code looks something like this: border:1px solid black.

In HTML:-

<img src=”forest.jpg” alt=”Forest” width=”450" height=”300" style=”border:5px solid black”>

In CSS:-

img {
 border: 5px solid Black;
 }

Hyperlink to an image

To use image as a link in HTML, you have to use the <img> tag as well as the <a> tag with the href attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding a link. Under the img tag src attribute, add the URL of the image. With that, also add the height and width.

<a href=”https://en.wikipedia.org/wiki/Albert_Einstein"><img src=”Albert Einstein.jpg” alt=”Albert Einstein” width=”100" height=”100"></a>

Rounded Images

Use the border-radius property to create rounded images. What adds rounded corners is the border-radius CSS property. To get it the way you want, you should play with varying values. i.e. Border-radius: 75px;

img {
 border-radius: 8px;
 }

If you want to create the image as a circle, by adding corners, you have to add border-radius: 50%.

img {
 border-radius: 50%;
 }

Responsive Images

Responsive images will automatically adjust to fit the size of the screen. You must assign a new value to its width property in order to make an image sensitive. It will then automatically change the height of the image itself. The crucial thing to note is that relative units such as percentage should always be used for the width property, rather than absolute ones like pixels.

img {
 max-width: 100%;
 height: auto;
 }

Center an Image

To the center, an image set left and right margin to “auto” and make it into a “block” element. It is important to place and align images on an HTML page to design the page. How to match a picture with the middle of a segment is one of the most popular issues.

img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

Add Image Background

Set a background-image for the <body> element. Using the background-image attribute within the <body> tag is the most common and easy way to add a background image. HTML5 does not support the context attribute that we have defined in the <body> tag. We can also add background images to a webpage using CSS properties.

body {
 background-image: url(“paper.gif”);
 }

Transparent Image

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0–1.0. The lower value is the more transparent:

img {
 opacity: 0.5;
 }

Image Text

This is mostly used to increase the attractiveness of a web page. To type on an image, set the image position to “relative” and set the text position to “absolute” and place the text where needed.