Hello, world!

Images HTML

Images HTML will learn you to add images to the website and modify size, placement etc. The Images HTML is a basic and important part of HTML tutorial.


 
Inserting Image
Syntax inserting image:
<img src="Image URL" ... attributes-list/>
 
The <img> tag is an empty tag, denoting that it can have merely list of attributes.
The <img> tag does not require a closing tag.
 
HTML code example inserting image:
<p>Insert Image</p>
<img src="test.png" alt="Test Image" />
 
The alt Attribute
Applying the alt attribute will identify an alternate text that is build once the image cannot be showed.
The value for this attribute must define the image in words.
 
Syntax alt attribute:
<img src="umage url" alt="some text">
 
HTML Screen Readers
The HTML Screen Readers are programs that read what is showed in a screen.   
These are applied by disabled people such as blind, visually impaired, or those with learning disability.
 
Set Image Location
The src element tells the browser where to look for the image.  
You ca set images on your own home directory, image servers or even from any websites in the world.
 
Syntax set image location:
<img src="image url " alt="some text" >
 
HTML code example set image location:
<img src="https://image.png" alt="How to insert image" width="150" height="100" />
 
Set Image Width/Height
Applying the width and height element are applied to indicate the width and height of an image .  
Values are set in pixels or percentage of its actual size.
 
Syntax set image width/height:
<img src="image url " alt="some text" >
 
HTML code example set image width/height:
<p>Set Image width and height </p>
<img src="https://image.png" alt="How to insert image" width="50" height="50" />
 
Set Image Alignment
The align element is used to identify the alignment of an image based on the text around it.
Image are aligned left by default. You can set it to other value by using the align attribute.
 
Syntax set image alignment:
<img align="left|right|middle|top|bottom">
 
HTML code example set image alignment:
<p>Set Image Alignment </p>
<img src="https://image.png" alt="How to set image alignment" align="right" />
 
Set Image Border
The border element is used to indicate the border thickness around an image.  
Values are set in pixels or percentage of its actual size.  
If you don’t want to put border around the image, set the border to 0.
 
Syntax set image border:
<img src="image url" alt="some text" border="3"
 
HTML code example set image border:
<p>Set Image border </p>
<img src="https://image.png" alt="How to set image border" border="5" />
 
Animated Images
You can also put animated images to your webpage, the GIF standards will allow you to perform this.  
The process and syntax is similar to image inserting.
 
HTML code example animated images:
<p>How to insert animated images.</p>  
<img src="http://image.gif" alt="Animated Image" style="width:48px;height:48px">
 
Using an Image as a Link
Inserting an image as link is similar to the process of inserting HTML text links.
Image links is required to have opening and closing anchor tags.  
To perform this, you need to place the image between the <a href> and the </a> tags.
 
HTML code example image as link:
<p>Click image to view site.</p>  
<a href="https://image">
  <img src="https://image" alt="How to use image as a link" width="50" height="50" border="0" >
</a>
 
Image Maps
The HTML image map will help you build an image with multiple clickable  
These areas are allowed to link on various URLs.
 
HTML code example image maps:
<p>Click on the sun or on one of the planets to view it closer:</p>  
<img src="planets.gif" alt="Image Map" usemap="#planets" style="width:145px;height:126px">  
<map name="planets">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
 
Image Floating
You can build your Web pages where you have an image that float either to the left or right of a paragraph  
To apply image floating, you should use the CSS float property.
 
HTML code example image floating:
<p>
  <img src="https://image.png" alt="Image Float"
  style="float:right;width:40px;height:40px">
  How to use image floating. How to use image floating.
  How to use image floating. How to use image floating.
  How to use image floating. How to use image floating.     
</p>  
<p>The image floats to the right of the paragraph.</p>