Presenting Images Using HTML

Introduction

Welcome to the Presenting Images Using HTML Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objectives are covered in this lab:

• 4.1 Construct and analyze markup that displays images
• 4.2 Describe the appropriate use of the img, svg, and canvas elements

Lab Duration

It will take approximately 20 minutes to complete this lab.

Exercise 1 - Working with Images

At times, when you resize the browser window on any device, the web page content including the images appears distorted or truncated. This should not ideally happen. The text and images on any web page should not appear truncated on any device. Rather, the web page contents should automatically fit to the screen size of the device. You should be able to properly view the web pages on all types of devices such as laptops, tablets, smart phones, and so on. The screen size of the device should not alter the appearance of the web pages.

Therefore, the concept of responsive web design is very important while designing real-time web pages. Responsive web design enhances the look and feel factor of the web pages. Using HTML and CSS, you can implement responsive web designs to play around with the content. You can resize, shrink, move, and hide the content or images to make the page look better.

The tag in HTML is commonly used in responsive web designs.

Going further, you can have image tooltips and image hyperlinks on web pages.

In this exercise, the first task will be to download the Visual Studio Code workspace from the Intranet and extract it. You will also download and save the required image files in the images folder. These images files will be used in aboutus.html.

In the second task, you will add code in blog.html to define image tooltips and image hyperlinks. You will add code in aboutus.html to use the tag to implement responsive web design.

Microsoft Internet Explorer does not support the execution of element. Therefore, for the purpose of this demonstration, you will run the code in Google Chrome web browser.

Learning Outcomes

After completing this exercise, you will be able to:

Use images in HTML pages