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.
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
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.
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
Microsoft Internet Explorer does not support the execution of
After completing this exercise, you will be able to:
Use images in HTML pages
See the full benefits of our immersive learning experience with interactive courses and guided career paths.