...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #160 HTML Images


Images are essential for beautifying and conveying numerous complicated topics in a straightforward manner on your website. This guide will walk you through the process of using pictures in your web pages in simple stages.

Insert a picture

Using the <img> element, you may embed any picture into your web page. The easy syntax for using this tag is as follows.
The <img> element is an empty tag, meaning it can only contain a list of attributes and no closing tag.
Example
Let's retain our HTML file test.htm and picture file test.png in the same directory to follow the example.

   <!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
    
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
    
</html>
You can use PNG, JPEG, or GIF image files depending on your preference, but make sure you supply the right image file name in the src attribute. Case is always taken into account when naming an image.
The alt property is a required attribute that gives an alternative text for an image if it is not able to be shown.

Set the Image's Position

All of the photos are usually kept in a different directory. So, we'll maintain the HTML file test.htm in our home directory and establish a subfolder images under the home directory for our picture test.png.
Example
Try the following example assuming our image location is "image/test.png."

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
    
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
    
</html>


Set the image's width and height.

With the width and height characteristics, you may customise the image's width and height to meet your needs. You can select the image's width and height in pixels or as a percentage of its real size.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
    
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
    
</html>

Create an image border

The picture will be surrounded by a border by default; however, you may set the border thickness in pixels using the border property. A thickness of 0 indicates that there is no border surrounding the image.
Example


<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
    
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
    
</html>

Align your images

The picture will align to the left of the page by default, but you may use the align property to have it align to the centre or right.
Example:


<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
    
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
    
</html>

Free Web Graphics

You may check at Free Web Graphics for free web Graphics, which includes patterns.