HTML Images
The learner will be able to…
• Identify and apply the elements and attributes that can be
used to insert and modify images on a webpage.
Image in a webpage is used to describe a specific event or
used to design the web page.
The HTML <img> tag is used to embed an image in a web
page.
Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding
space for the referenced image.
The <img> tag is an empty tag that contains attributes and
has two required attributes:
Note:
src - Specifies the path to the image
If a browser cannot
find an image, it will
alt - Specifies an alternate text for the image
display the value of
the alt attribute:
Example
To change the height and width of an image, use the
following attributes:
Width = “#px”
Height = “#px”
Example
If you have your images in a sub-folder, you must include the
folder name in the src attribute:
Example:
<img src =“/downloads/sample.jpg” alt = “this is in another
folder”>
Some websites points to an external image on another
server.
To insert an image form another server, you must specify an
absolute (full) URL in the src attribute:
Example:
<image src=“https://www.dmsimfg.com/wpcontent/uploads/2020/04/FB.png” alt=“alternate”>
You can also insert GIF in HTML.
Example
To use an image as a link, place the <img> tag inside the <a>
tag
Example
The title attribute specifies extra information about an
element. The information is most often shown as a tooltip text
when the mouse moves over the element.
Example
• The HTML <img> tag is used to embed an image in a web
page.
• The <img> tag is an empty tag that contains attributes and
has two required attributes: src and alt
• You may use attributes such as heigh and width to modify
the appearance of the images.
• To use an image as a link, place the <img> tag inside the
<a> tag
• https://www.w3schools.com/html/
• https://html.com/
• https://www.tutorialspoint.com/html/index.htm
• https://www.washington.edu/accesscomputing/webd2/student/
unit1/module3/html_history.html