HTML Images

Image Element & Attributes

For our third web page experiment we are going to add an image with the image tag (<img>) and four qualifying attributes; src, width, height and alt.

Adding an Image

HTML images are defined with the <img> tag and three attributes:

  • A source attribute to specify the image filename
  • A width attribute for the image width in pixels
  • A height attribute for the image height in pixels
  • The alt attribute should also be used to define text in circumstances where the image can not be displayed.

HTML Image Tag with src and size attributes:

HTML images are defined with the <img> tag.

The filenpath of the source image (src), and the size of the image (width and height) are all provided as attributes:

<img src=”../Images/MyPortrait01.jpg” width=”104″ height=”104″>

The src Attribute:

The src file path should be specified as a relative path such as  ../Images/MyPortrait01.jpg

../ means the parent directory of the current directory.

../Images means the Images directory parallel to the current directory.

../Images/MyPortrait01.jpg means the file MyPortrait01.jpg located in a parallel or sister directory to the current directory.

 The size Attributes:

The image size is specified in width and height expressed in  pixels:

width="104" means 104 screen pixels wide and 
height="104" means 104 pixels high.

The alt Attribute:

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

The value of the attribute can be read by screen readers or text only browsers. This way, someone “listening” to the webpage, e.g. a blind person, can “hear” the element.

alt=”Author’s Image” 

Putting it all together:

<img 
src="../Images/MyPortrait01.jpg" 
alt="Author's Image" 
width="104" 
height="104"
>

Note that attribute  value is enclosed in quotes and each attribute is separated by a single space:

<img src=”../Images/MyPortrait01.jpg” alt=”Author’s Image”
width=”104″ height=”104″>

Recapping:

  • The <img>tag is used to define HTML images.
  • Thesrc attribute provide the relative filepath and filename of the image
  • The width and height attributes provide size information for images
  • The alt attribute provides alternative text for screen readers
  • External files should be specified by relative paths whenever possible
  1. Copy your “index02.htm” to “index03.htm” and edit as follows:
<!DOCTYPE html>

<html lang="en-US">
<html>
<body>
<h1>This is a Heading</h1>
<p title="I'm a tooltip">
This is a paragraph with a tooltip.
</p>

<img src="../Images/MyPortrait01.jpg" alt="A picture of the author" width="104" height="104">

<p>
This is a paragraph with a link <a href="https://www.w3schools.com">Click Here</a>
</p>

</body>
</html>

Note: additions are in bold text

Save the HTML page as “index03.htm”

Save the image “MyPortrait01.jpg” in the directory “MyWebPages/Images”

View the HTML Page in Your Browser

Double click on the file “index03.htm”, or right-click – and choose “Open with” and select your preferred browser.

The result will be a heading and two paragraphs with an image placed between them.

The image will be displayed at the size specified by the width and height attributes

We will continue by adding a banner image at the top of of our page in Minimal Website 04.

Eric Pickstone