How to Insert an Image in HTML | Insert Image From Folder | Wrap Text- Align / Float Images With CSS
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)
------------------------
Видео How to Insert an Image in HTML | Insert Image From Folder | Wrap Text- Align / Float Images With CSS канала Chester Tugwell
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)
------------------------
Видео How to Insert an Image in HTML | Insert Image From Folder | Wrap Text- Align / Float Images With CSS канала Chester Tugwell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Line of Best Fit - Excel Chart | Plus Understanding the y=x Equation](https://i.ytimg.com/vi/VXrAhahsKGA/default.jpg)
![Highlight and Count Duplicate Rows In Excel | Highlight Duplicate Rows in Excel Except First](https://i.ytimg.com/vi/awDEI_WvTv0/default.jpg)
![Calculate Variance and Standard Deviation in Excel | Sample & Population](https://i.ytimg.com/vi/D7fMS5X7bYM/default.jpg)
![Protect or Lock Sheets or Ranges in Google Sheets](https://i.ytimg.com/vi/xtYx-yuJCCo/default.jpg)
![Create a Basic Gantt Chart in MS Excel (Including Percentage Complete Progress Tracking)](https://i.ytimg.com/vi/-t4csMn1rsM/default.jpg)
![Excel VBA: Organise Files into Subfolders based on File Type](https://i.ytimg.com/vi/wtpUEvMIvD8/default.jpg)
![Word 2013: The New Read Mode View](https://i.ytimg.com/vi/0423ducW5Z4/default.jpg)
![Excel Subtract IF | Subtract If Not Blank | If Match Then Subtract | Subtract If Cell Contains Text](https://i.ytimg.com/vi/7MATRMHBnaY/default.jpg)
![Can Excel Handle Dates Before 1900 (Yes!) | Difference in Years, Month or Days](https://i.ytimg.com/vi/1uE3IicnuHU/default.jpg)
![Excel FILTER Function Across Multiple Worksheets](https://i.ytimg.com/vi/dpKmW0GmyoU/default.jpg)
![How to Keep a Chart (or Charts) Visible when Scrolling in Excel?](https://i.ytimg.com/vi/X3FwupzUtoQ/default.jpg)
![Dynamic Amortization Schedule Excel 365 Template | EMI Calculator with Repayment Schedule in Excel](https://i.ytimg.com/vi/ALIUFPSnd5Y/default.jpg)
![SUMIFS & COUNTIFS Partial Match | Part of Cell Contains Text | Using * and ? Wildcard Characters](https://i.ytimg.com/vi/mmPqgvPPYoY/default.jpg)
![How to Split Screen (Snap Layout) in Windows 11 | Split Screen Shortcut Key](https://i.ytimg.com/vi/pESSFmEq5Vo/default.jpg)
![Thermometer Chart Created in Microsoft Excel](https://i.ytimg.com/vi/W8Hy7k9UwWo/default.jpg)
![Create a Data Entry Form in Excel Without VBA - No Coding Required](https://i.ytimg.com/vi/3QIw7RbLBwo/default.jpg)
![How to Calculate and Type Exponents (Power, Indices) in Excel | Square, Square Root, Cube, Cube Root](https://i.ytimg.com/vi/AZe2a0MEBjM/default.jpg)
![How to Copy a List of Filenames in a Folder in Excel | Include Files in Subfolders if Necessary](https://i.ytimg.com/vi/neildrmXRQk/default.jpg)
![Reverse Text String (Without VBA) Using Formula or With VBA Using StrReverse Function | Mirror Text](https://i.ytimg.com/vi/4e083Nuazag/default.jpg)
![Show Percentage Change (Increase & Decrease) in Column Chart | Show Variance in Excel Chart](https://i.ytimg.com/vi/plsJTbbRfSA/default.jpg)
![How to Create Automatic Subtotals in Excel | Nested (Multiple) Subtotals | Group Rows & Subtotal](https://i.ytimg.com/vi/FDJYKssxXIw/default.jpg)