Align image to the right - html

Question

So I am very new to the whole coding thing and for this site I am building for class I want to align this photo I have at the bottom and move it to the right hand side of the page.
<img src ="halogram%20VR.jpg" alt = "man in halogram type VR setting" width:"200" height= "200">
This is the code for the image and I tried to add put something like align=center, but that has presented no results. What is the proper code for moving my image to the right hand side of the page?

Answer 1

While you can use float:right that will mean you need to clear that float for anything after that element. You can use text-align on the parent element for a simpler option:
div {
text-align: right;
}
<div>
<img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>
An example of float messing up your layout without clearing it (note that this looks fine on Stackoverflow's small width, clicking full page will show the actual result).
img {
float: right;
}
<div>
<img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
<h1>HELLO WORLD</h1>
</div>
<h1>HELLO WORLD</h1>
An example using flexbox
div {
display: flex;
justify-content: flex-end;
}
<div>
<img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>
An example using float and clearing:
.clear::after {
display: block;
content: "";
clear: both;
}
.float {
float: right;
}
<div class="clear">
<div class="float">
<img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>
</div>
<p>HELLO WORLD</p>

Answer 2

You can do this in your HTML with <img src="image.jpg" alt="image" style="float: right"> or in a seperate .css file with img {float: right;}