Hello, world!

Images HTML

Defining HTML Images is discussed in the HTML tutorial, specifically how to insert image, set image location, set the image width and height, define the Image Border and alignment, apply animated Images and image as a link and build image maps and floating



HTML Images

Adding images to your webpage is a great way to make your page attractive.
The width and height attributes are necessary because if they are not included, the page will tend to calculate the size as the image loads.
You are allowed toadd any image in your web page through the use of the <img> tag.

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="https://drive.google.com/uc?id=0B3wdKlA6ta9rXzhVVnBWSjlHTU0" alt="Test Image" />
HTML output inserting image:

Insert Image

Test Image

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://drive.google.com/uc?id=0B3wdKlA6ta9rOFN4QzlVaVM2NDg" alt="How to insert image" width="150" height="100" />

HTML output set image location:

How to insert image

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://drive.google.com/uc?id=0B3wdKlA6ta9rOFN4QzlVaVM2NDg" alt="How to set image border" border="5" />

HTML output set image border:

Set Image border

How to set image border

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://drive.google.com/uc?id=0B3wdKlA6ta9rOFN4QzlVaVM2NDg" alt="How to set image alignment" align="right" />

HTML output set image alignment:

Set Image Alignment

How to set image alignment

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="

Set Image width and height

How to insert image" alt="How to insert image" width="50" height="50" />

HTML output set image width/height:

Set Image width and height

How to insert image

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://www.facebook.com">
  <img src="https://drive.google.com/uc?id=0B3wdKlA6ta9rUjJKTWp1N3lMTTg" alt="How to use image as a link" width="50" height="50" border="0" >
</a>

HTML output image as link:

Click image to view site.

How to use image as a link

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="https://drive.google.com/uc?id=0B3wdKlA6ta9rRy1tTGpObUFTRkU" alt="Animated Image" style="width:48px;height:48px">

HTML output animated images:

How to insert animated images.

Animated Image

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://drive.google.com/uc?id=0B3wdKlA6ta9rOFN4QzlVaVM2NDg" 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>

HTML output image floating:

Image Float 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.

The image floats to the right of the paragraph.


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>

Coordinate System

<table>
  <tr>
    <td>Value</td>
    <td>Description</td>
  </tr>
  <tr>
    <td>x1,y1,x2,y2</td>
    <td>x1  is the coordinates of the upper left corner of the rectangle, y1 is the coordinates of the upper left corner of the rectangle, x2  is the coordinates of the lower right corner of the rectangle., y2 is the coordinates of the lower right corner of the rectangle </td>
  </tr>
  <tr>
    <td>x,y,radius</td>
    <td>xc is the coordinates of the center of the circle and the radius., xc is are the coordinates of the center of the circle and the radius.</td>
  </tr>
  <tr>
    <td>x1,y1,x2,y2,..,xn,yn</td>
    <td>Specifies vertices or points of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon.</td>
  </tr>
</table>