HTML Images
Images help to beautify the contents of the web page. It would be boring to read a website without any images.
to put an image on the web page we simply need to use the <img /> element with src attribute to define the URL of the location of animage. <img/> is an empty and inline element
arrtibute src
We use the attribute src to specify an image URL or the file path
Example:
<img src="image.png" />
Attribute alt
The alt attribute indicates an alternative text for the image when the image is not loaded for various reasons like slow internet connect, slow server or broken links.
Example
<img src="image1.png" alt="my image"/>
Sizing the images
Sometimes its required to resize the images on the web page. to do so we use the height and width attribute
Example
<img src="image.png" height="50" width="50"> <img src="image.png" style="height:50px; width:50px;">
In the above example we can see that the height and width can be specified in two different ways, the result is the same. However the best practices is to use the style attribute.
Floating the image
We can float the image to the right and left side of the web browser. to do this we need to use the style attribute with the float property
Example
<p><img src="image.png" style="float:right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Image as Link
Images can also be used as links. It is very simple to achieve this. we need to write the <img> tag inside <a> tag
example
<a href="myinternalfile.html"><img src="image.png" height="50" width="50"/></a>
Image form another folder
Images have to be organised well, hence they will be kept in organised folders, to refer to such images in the folder we need to specify the folder name as seen in the example below
<img src="testimages/flowers.jpg" >
Image from external source
there could be a need to refer the images to an external image file, in such a case we simply specify the image URL
<img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />
More the number of images the slower will be the web page to load.