3.1 Images

3.1 HTML Image Syntax The alt Attribute Image Size- Width and Height Images in Another Folder Images on Another Server

3.1 HTML Image Syntax

In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does do not have a closing tag.

The src attribute specifies the URL(web address) of the image:

The alt Attribute

The alt attribute provides an alternate text for an image if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser cannot dins an image it will display the value of the alt attribute. The value of the alt attribute should describe the image

Note: The alt attribute is requires. A webpage will not validate correctly without it.

Image Size- Width and Height

You can use the width and height attributes to specify the width and height of an image. The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute.

Images on Another Server

Some web sites store their images on image servers. Actually you can access images from any web address in the world.

Example (students should download an image off the web):


<!DOCTYPE.html>

<html>
    <head>
       <meta charset = "utf-8">
        <title> Images</title>
     </head>

     <body>
        <img src = "example.png" width="200px" height="150px" alt="html">
        <img src ="https://freenaturestock.s3.us-east-1.amazonaws.com/1676.jpg" width ="200px" height="120px" alt ="nature">
      </body>
   </html>

Previous Section

📽️

2.13 Intro to HTML-Video Overview

Next Section

2️⃣

3.2 Links

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.