How to Insert Images in HTML An HTML5 Image Tutorial

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn how to insert images in HTML. In this HTML5 image tutorial, you will learn about the img element and the attributes this HTML tag requires to display images on your web pages. You will also discover some good image resources along the way.
Subscribe https://bit.ly/3nGHmNn
This lesson is part of an HTML for Beginners tutorial series playlist:
https://www.youtube.com/playlist?listPL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu
Starter Source Code: https://github.com/gitdagray/html_course/tree/main/05_lesson
Course Updates https://courses.davegray.codes/
How to Insert Images in HTML An HTML5 Image Tutorial
(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:05) Image Files
(02:29) img element
(06:15) width and height attributes
(08:40) Insert a 2nd image
(11:34) Loading attribute and "below the fold"
(17:59) figure and figcaption elements
(19:58) Adding a 3rd image
(23:23) figure is not just for images
(25:50) Validate your HTML code
(26:52) Image resources
All Resources for this HTML Tutorial Series: https://github.com/gitdagray/html_course
Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Dark New Tab Chrome Extension: https://chrome.google.com/webstore/detail/dark-new-tab/kcphhkbdlfggickaoeiahdcfhagfbajl?hlen
Visual Studio Code (VS Code): https://code.visualstudio.com/
Prettier VS Code Extension: https://marketplace.visualstudio.com/items?itemNameesbenp.prettier-vscode
vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemNamevscode-icons-team.vscode-icons
Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemNameGitHub.github-vscode-theme
W3C HTML Validator: https://validator.w3.org/
References:
MDN HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
MDN HTML Elements Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
HTML Entities Character Chart: https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references
Image Resources:
Placeholder Image Generators:
https://loremipsum.io/21-of-the-best-placeholder-image-generators/
Sites with Freely-Usable Images:
https://unsplash.com/
https://www.pexels.com/
https://gratisography.com/
https://pixabay.com/
Image Editing / Resizing Software:
For Windows: https://www.irfanview.com/
As a Service: https://www.canva.com/
Suggestions for Mac:
https://www.cleverfiles.com/howto/top-5-photo-editing-apps-mac.html
Full Featured Editor for Windows/Mac/Linux:
https://www.gimp.org/
Image Compression (shrink file size):
https://tinypng.com/
Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven
Was this tutorial about how to insert images in HTML helpful? If so, please share. Let me know your thoughts in the comments.
#html #html5 #images