HTML Image Element (Clip 15): Gentle Introduction to HTML for Beginners

How to use the HTML image element.

*Lesson Links*
Downloading Images: follow each GitHub link below, right-click on the image, select Save image as..., and save the image to the desired location.

To view the code for the "coding along" exercises in this lesson, click the links below. This takes you to my GitHub, which is a site for storing code files. You can then copy/paste text from those files (saving you some typing) or compare your code to the code from the exercise.

*Content*
00:00 Images
00:14 Image element (img)
00:29 The src attribute
01:43 Image element attributes (alt, height, width)
02:15 Consider the aspect ratio
02:37 Figure element (figure, figcaption)
03:15 Coding Along: Displaying an image
03:19 Coding Along: Getting images
04:01 Creating an images folder using VS Code
04:30 Adding an image to a web page
07:56 Key points

*Course Description*
Every web page you see is created with HTML. This course is a gentle introduction to the syntax and best practices of HTML.

You'll learn about HTML elements and attributes, how to structure a page, and use semantic elements to organize your content. You'll see how to build a list and table, add images and navigation, and create a data entry form.

You have the option of coding along with the course and building a website with HTML.

*Audience*
• Anyone new to web development.
• Students considering a web developer career.
• Existing web developers that want to reinforce their HTML knowledge.
• Those that manage or interact with web developers to better understand what HTML is and how it's used.

No prerequisite knowledge or skills are needed for this course.

This is the second course of the "How to Become a Web Developer" series.