To reposition an image on a web page using HTML tags, the following steps must be adhered to:
To begin, the first step is to input the HTML code into a text editor or open the current HTML file in the text editor where we intend to position an image:
<!Doctype Html>
<Html>
<Head>
<Title>
Align an Image
</Title>
</Head>
<Body>
Hello User!
This page helps us to understandhow to specify an image at a particular position in a pargraph using the Html tag.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="100" height="100" >
</Body>
</Html>
Step 2: Next, position the cursor within the <img> tag associated with the image requiring alignment. Subsequently, the align attribute within the img tag is utilized to indicate the position. Therefore, input the align attribute exactly as detailed in the subsequent code block.
<img align="top/left/bottom/middle/right" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="200" height="200" >
Step 3: Once the location is specified, it is important to save the HTML code and then execute the file. Below are different HTML codes that display an image within a paragraph at various locations:
1. Middle
This alignment setting centers the image on the page.
<!Doctype Html>
<Html>
<Head>
<Title>
Align an Image at middle
</Title>
</Head>
<Body>
Hello User!
<p>This page helps us to understand how to align an image in Html.
<img align="middle" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="100" height="100" >
It is first section in this page which describes how to specify an image at middle in a pargraph using the Html tag.</p>
</Body>
</Html>
The result generated by the HTML code above can be viewed in the screenshot displayed below:
2. Top
This alignment value sets the image at the top.
<!Doctype Html>
<Html>
<Head>
<Title>
Align an Image at Top
</Title>
</Head>
<Body>
Hello User!
<p>This page helps us to understand how to align an image in Html.
<img align="Top" src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" width="100" height="100" >
It is Second section in this page which describes how to specify an image at top in a paragraph using the Html tag.</p>
</Body>
</Html>
The result of the HTML code above can be viewed in the accompanying image:
3. Bottom
This alignment setting positions the image to the lower part of the container.
<!Doctype Html>
<Html>
<Head>
<Title>
Align an Image at bottom
</Title>
</Head>
<Body>
Hello User!
<p>This page helps us to understand how to align an image in Html.
<img align="bottom" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="100" height="100" >
It is third section in this page which describes how to specify an image at bottom in a paragraph using the Html tag.</p>
</Body>
</Html>
The HTML code displayed above produces the output visible in the screenshot provided below:
4. Left
This alignment value sets the image at the left.
<!Doctype Html>
<Html>
<Head>
<Title>
Align an Image at left
</Title>
</Head>
<Body>
Hello User!
<p>This page helps us to understand how to align an image in Html.
<img align="left" src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" width="100" height="100" >
It is fourth section in this page which describes how to specify an image at left side of a paragraph using the Html tag.</p>
</Body>
</Html>
The outcome of the HTML code above is displayed in the screenshot presented below:
5. Right
This alignment value sets the image at the right.
<!Doctype Html>
<Html>
<Head>
<Title>
Align an Image at Right
</Title>
</Head>
<Body>
Hello User!
<p>This page helps us to understand how to align an image in Html.
<img align="right" src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" width="100" height="100" >
It is fifth section in this page which describes how to specify an image at right side of a paragraph using the Html tag.</p>
</Body>
</Html>
The result of the HTML code provided can be observed in the screenshot below: