PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture14 : Images

What is HTML Images - <img> Tag and Src Attribute

  • It is very important to understand that images are not technically "part" of the web page file, they are separate files which are inserted into the page when it is viewed by a browser. So a simple web page with one image is actually two files - the HTML file and the image file.
  • HTML images are defined with the <img> tag. <img> tag is empty, which means that it contains attributes only, and has no closing tag.
  • To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Example :
<img src="url" alt="text">

How to use HTML Images - <img> Tag and Src Attribute
It can be used by writing syntax like this: <img src="url" alt="text">


How to implement HTML images

  • It is used for alternate text for an image, when image cannot be displayed on browser.
  • The alt attribute provides alternative information for an image if a user cannot view it (because of slow connection, error in src attribute, user uses a screen reader) for some reason.
  • The height and width attributes are used to define the height and width for image.

Example : For Image
<!DOCTYPE html>
<html>
<body>

<img src="logo.png" alt="Project Log" width="100" height="112">

</body>
</html>


Example : For Map
<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3500.5831367341893!2d77.44081199999997!3d28.
67219799999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1405593521640" width="400" height="450" frameborder="0" style="border:0"></iframe>


</body>
</html>


Output
Project Log
   
All Rights Reserved with Project code