Download the HTML and CSS files here (images not included): https://www.bluepecantraining.com/wp-content/uploads/2022/10/Insert-and-Float-Images.zip

In this video I demonstrate how to insert an image in a webpage using HTML and CSS. The first part of the video shows you how to display an image that is either stored in the same folder as your webpage or in a subfolder. The video goes on to explain how to specify the width and the height of the image.

If you have text that you want to wrap around images or display alongside images you can float images either to the left or right of text. You do this using CSS. The video explains how to create an external CSS file and reference that file in your HTML document. In the CSS file you can define classes to align images to the left or right of text. I also demonstrate how to prevent paragraphs from wrapping around floating images.

Table of Contents:

00:00 - Introduction
00:26 - How to insert an image in HTML
01:34 - How to use the alt attribute
02:56 - How to specify the size of your image (height and width)
04:17 - How to insert an image saved in a subfolder
05:09 - How to float images to the left or right (how to wrap text around images or display alongside)
05:32 - How to create and reference an external CSS file
06:32 - Creating & applying classes to align and format images
08:27 - How to get paragraphs to clear floating images (prevent wrapping)
------------------------