How to Insert Images in HTML | An HTML5 Image Tutorial

Summary

In this beginner's HTML tutorial, Dave guides viewers through adding multimedia to a web page, focusing on incorporating images. He demonstrates using the Chrome browser, Visual Studio Code, and the Live Server extension to organize images in a folder and insert them into an HTML document using the 'img' tag. Dave explains the importance of 'alt' and 'title' attributes for accessibility and SEO, and discusses the 'width', 'height', and 'loading' attributes for performance optimization. He also introduces the 'figure' and 'figcaption' elements for semantically grouping images with captions. The video concludes with resources for free images and software recommendations for image editing and compression.

Takeaways

• 🌐 Use the Chrome web browser, Visual Studio Code editor, and Live Server extension for efficient web development and real-time preview.
• 🖼️ Organize images in a separate folder, typically named 'img', for better project management and accessibility.
• 📸 Utilize the `<img>` tag with `src` and `alt` attributes to embed images in an HTML document, where `alt` text aids accessibility and provides a fallback for non-loaded images.
• 🎨 Include `title` attribute for additional complementary text that appears on mouseover, enhancing user experience.
• 📐 Specify `width` and `height` attributes in the `<img>` tag to prevent layout shift and improve page loading performance.
• 🔄 Implement lazy loading for images below the fold by setting the `loading` attribute to 'lazy', which loads images as they become visible to the user.
• 🖼️ Wrap images with the `<figure>` element and use `<figcaption>` for captions to semantically associate images with their descriptions.
• 🔄 Use the `code` element within `<figure>` to display code snippets as part of the content, providing context and explanation.
• 🌐 Validate HTML code using the W3C Markup Validation Service to ensure there are no errors or warnings.
• 📚 Explore resources like placeholder.com, unsplash.com, and canva.com for free images and tools to enhance web development.
• 🛠️ Use image editing software like Earp View and online tools like tinypng.com to resize and compress images for optimized web performance.

Q & A

What tools does Dave use in this tutorial for working with HTML?

Dave uses the Chrome web browser, Visual Studio Code editor, and the Live Server extension for Visual Studio Code to work with HTML in this tutorial.

What is the purpose of the 'img' tag in HTML?

The 'img' tag in HTML is used to embed images into a web page. It has a 'src' attribute to specify the path to the image and an 'alt' attribute to provide alternative text for the image.

Why is it a good practice to keep images in a separate folder for a web project?

Keeping images in a separate folder helps in organizing the web project more efficiently, making it easier to manage multimedia files and maintain the overall structure of the project.

What does the 'alt' attribute in an 'img' tag serve?

The 'alt' attribute serves two main purposes: it provides a description for assistive technologies like screen readers for users who may not be able to see the image, and it also displays text if the image fails to load for any reason.

What are the 'width' and 'height' attributes used for in an 'img' tag?

The 'width' and 'height' attributes in an 'img' tag define the dimensions of the image in pixels. They help the browser to understand the size of the image and can prevent layout shifts by informing the browser how much space the image will occupy.

What is 'lazy loading' of images and why is it recommended?

Lazy loading is a performance optimization technique where images that are not immediately visible on the page load (i.e., below the fold) are only loaded when they are about to enter the viewport. This technique helps in faster page loading times and reduced server load.

What is the 'figure' element in HTML and how is it used in relation to images?

The 'figure' element in HTML is used to enclose self-contained content, such as images, diagrams, photos, code listings, etc. It allows for associating a caption with the content, improving accessibility and semantic structure of the web page.

How can you validate your HTML code?

You can validate your HTML code using the W3C Markup Validation Service by uploading your HTML file or entering the URL of your web page. It checks for any errors or warnings and provides feedback on how to correct them.

What are some resources Dave recommends for finding free images for web pages?

Dave recommends websites like unsplash.com, pexels.com, gratisography.com, and pixabay.com for downloading freely usable images. He also mentions placeholder.com for using placeholder images during layout development.

What tools does Dave suggest for image manipulation and optimization?

Dave suggests using Earphone View for basic image resizing and cropping, Canva for more advanced design and manipulation, and tinypng.com (or tinyjpg.com) for compressing images to reduce file size and improve page load times.

How does Dave demonstrate the 'lazy loading' effect in Chrome?

Dave demonstrates lazy loading by using Chrome Dev Tools to monitor network activity. He disables the cache and filters for image files, then reloads the page and scrolls to observe that the image below the fold only loads as it becomes visible.

Outlines

00:00

🌐 Introduction to HTML Multimedia and Images

This paragraph introduces the viewer to incorporating multimedia, specifically images, into an HTML web page. The tutorial uses the Chrome web browser, Visual Studio Code editor, and the Live Server extension to demonstrate the process. The creator explains the importance of organizing images in a separate folder within the project and shows how to add images to the web page using HTML code. It also mentions resources for downloading free images and emphasizes the use of the 'img' tag with 'src' and 'alt' attributes, highlighting the importance of alt text for accessibility and placeholder text in case the image fails to load.

05:00

📸 Image Attributes and Accessibility

The second paragraph delves into the various attributes of the 'img' tag, such as 'title' and 'alt', explaining their roles in enhancing user experience and accessibility. It also discusses the 'width' and 'height' attributes, emphasizing their importance in preventing cumulative layout shift and improving page performance. The creator demonstrates how to adjust the image size and provides a brief overview of different image file types and their extensions. Additionally, the concept of 'lazy loading' is introduced, explaining how setting the 'loading' attribute to 'lazy' can improve page load times by deferring the loading of images below the fold until they are about to be viewed.

10:02

🏖️ Adding Images with Figure and Caption Elements

This paragraph focuses on using the 'figure' and 'figcaption' elements to semantically group images with their captions. The creator shows how to wrap an image in a 'figure' tag and add a 'figcaption' to provide a descriptive caption. This approach not only enhances the visual layout but also aids in accessibility by explicitly linking the caption to the image. The paragraph also touches on the use of the 'code' element for displaying code snippets within a figure, demonstrating the versatility of the figure element for different types of content.

15:02

🛠️ Image Optimization and Validation

The fourth paragraph discusses the importance of image optimization for web performance. It introduces the concept of 'lazy loading' with the 'loading' attribute set to 'lazy' for images that are not immediately visible on page load. The creator also explains how to provide the 'width' and 'height' attributes for images to ensure they display correctly and maintain aspect ratio. The paragraph concludes with a brief mention of validating the HTML code using the W3C validator to ensure there are no errors or warnings, emphasizing the importance of clean, valid code for web development.

20:02

🔍 Exploring Image Resources and Software

In this paragraph, the creator shares various resources for finding and working with images. It mentions placeholder image generators, websites for downloading free-to-use images like Unsplash, Pexels, Gratisography, and Pixabay, and software for image manipulation such as Earphone View and Canva. The creator also highlights the importance of using images with proper usage rights and provides tips for compressing images using Tiny PNG to improve load times. The paragraph concludes with a call to action for viewers to like and subscribe to the channel for more content.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It structures content on the web and is the backbone of any website. In the video, the creator uses HTML to build the foundation of a web page, adding multimedia elements like images to enhance the user experience.

💡Visual Studio Code

Visual Studio Code is a free, open-source code editor developed by Microsoft. It is highly customizable and supports a wide range of programming languages, making it a popular choice among developers. In the context of the video, the creator uses Visual Studio Code as the primary tool for writing and editing HTML code.

💡Live Server Extension

The Live Server extension is an add-on for Visual Studio Code that allows developers to quickly view their web projects in a live browser. It automatically refreshes the browser when the code is saved, providing real-time feedback on changes made. This extension is crucial for efficient web development as it streamlines the preview process.

💡Image Tag

The 'img' tag is a fundamental HTML element used to embed images into a web page. It has attributes like 'src' (source) to specify the image file path and 'alt' (alternative text) to provide a textual description for the image, which is essential for accessibility and SEO purposes.

💡Alt Attribute

The 'alt' attribute, short for 'alternative text', is a required attribute in the 'img' tag that provides a textual description of an image. It is crucial for accessibility, as it helps screen readers convey the content of the image to visually impaired users. Additionally, it serves as a placeholder if the image fails to load.

💡Responsive Images

Responsive images are images that automatically adjust their size based on the screen size of the device viewing them. This is important for creating mobile-friendly websites, as it ensures that images are not too large or too small, improving user experience and reducing data usage. Techniques like specifying the 'width' and 'height' attributes or using CSS can make images responsive.

💡Lazy Loading

Lazy loading is a performance optimization technique that delays the loading of non-critical resources, such as images below the fold, until they are needed or about to be viewed by the user. This improves page load times and reduces unnecessary data usage, enhancing the user experience.

💡Figure and Figcaption Elements

The 'figure' and 'figcaption' elements are HTML tags used to semantically group media content, such as images, with their captions. The 'figure' element is used to enclose the media, while the 'figcaption' provides a caption or a legend for the content. This pairing improves accessibility and SEO by making it clear that the caption is related to the figure.

💡Placeholder Images

Placeholder images are temporary images used in the layout of a web page during development when the final images are not yet available or decided upon. They help in visualizing the design and structure of the page without the actual content.

💡Image Optimization

Image optimization refers to the process of reducing the file size of images without significantly compromising their visual quality. This is important for web performance, as smaller image files load faster and consume less data, leading to a better user experience.

💡Web Accessibility

Web accessibility is the practice of making web content accessible to all users, including those with disabilities. It involves using proper HTML elements and attributes, such as 'alt' text for images, to ensure that assistive technologies like screen readers can interpret and convey the content to users with visual impairments.

Highlights

The tutorial is part of a beginner's HTML series using Chrome web browser, Visual Studio Code editor, and the Live Server extension.

HTML supports multimedia, and images are a significant part of web content.

It's a common practice to keep images in a separate folder for web projects.

The 'img' tag is used to insert images into an HTML page, and it doesn't require a closing element in HTML5.

The 'src' attribute specifies the path to the image, and the 'alt' attribute provides a text description for the image.

The 'alt' attribute is essential for accessibility and displays text if the image fails to load.

The 'title' attribute provides additional information about the image, which can be displayed on mouseover.

Specifying 'width' and 'height' attributes in the 'img' tag can improve page performance by preventing layout shift.

The 'loading' attribute with a 'lazy' value allows the browser to load images only when they are about to enter the viewport.

The 'figure' element is used to wrap images and related content, and the 'figcaption' element provides a caption for the figure.

The 'code' element is used to display computer code or other types of code examples on a web page.

Validating HTML code with a validator like W3C's validator ensures there are no errors or warnings in the code.

Placeholder images can be used for layout purposes before final images are chosen.

Free image resources like Unsplash, Pexels, and Pixabay offer high-quality images for free use.

Image editing software like Earp View and online tools like Canva and TinyPNG can help optimize images for web use.

The tutorial provides a comprehensive guide on adding and managing images in an HTML web page, improving accessibility, and optimizing performance.

Resources for free images and tools to compress and resize images are shared for practical applications.

Transcripts

[Music]

hello and welcome hi i'm dave

this tutorial is part of a beginner's

html series i'll be using the chrome web

browser the visual studio code editor

and the live server extension for visual

studio code to view the web page there

are links to these tools starter code

files and all resources in the

description below let's look at adding

images to our web page until now we've

only worked with text but html supports

multimedia and images are a big part of

that so what we want to do is go to

visual studio code that i have here on

the left and i have our project running

here on the right and we're using live

server for that

so the live server has launched down

here and you can click to close the

server or open the server

if you don't have the live server

extension search for that here in the

extensions

find

live server

and that should pull up by ritwik day

and you just want to install that and it

can launch your page for you

okay going back to what we need we have

clicked on the file explorer

in visual studio code and we need to

create a folder to hold our image files

so i'll type img to name this folder

and it is a common practice to keep your

images for your web page or web pages in

a separate folder as you organize your

project

now that we've got that i'm going to

grab some images and paste those in so

we can work with them you'll be able to

download these images from the files and

resources that i share in the

description however at the end of this

tutorial i'm also going to go over some

resources where you can download your

own images that are free for use

so now inside this image folder i'm just

going to right click and choose paste

and paste these images in

let's look at what we've got i can click

on the vacation image

and i get this vacation image here and

notice at the bottom we can see the size

of the image it's 400 by 267. those are

pixels

we can look at this html logo that we're

going to use it's 300 by 300 and we've

got an image of the caribbean as well

and it's 400 by 225 so i'm going to

collapse this now and

we're going to use those in our html

code so now i'll click on the file

explorer to hide the file tree and this

all starts with the image tag so let's

scroll down in our html to where we want

to insert our first image in our page

we're going to put it right below

the paragraph that says this is my first

web page in the i'm ready to learn html

section okay let's start by typing img

and pressing tab and then visual studio

code will help us with that image

abbreviation

and it will automatically fill out the

rest of the image element now notice the

image element doesn't have a closing

element like we see here with a heading

or we see here with a paragraph

sometimes you will see it

with a slash like that at the end which

means it's self closing html does not

require that i should say html5 does not

require that however if you are using

this in the future in something like

react it may require that so that's just

something to be aware of right now i

won't put that in because html5 does not

require it and that's what we're

focusing on okay notice the image

element has a source attribute and an

alt attribute automatically the source

attribute tells html where to grab the

image we want so we start by typing the

folder name that we created now we see

the folder here image slash and i can

click on that and then it provides us

the names of the images that we have

well we want the html logo that i saved

so i'll just click on that and there is

the full relative path to our image it's

in the same project here and it's on our

local server

in this area so we don't need that

absolute url that would grab it from

somewhere else on the web so this is

once again a relative path to our folder

and then to the image

then we have the alt attribute now the

alt attribute has a couple of purposes

one is to help assistive technology for

those that may not be able to see the

image we are putting on the page the

assistive technology like a screen

reader will read the description of the

image so let's put html5

logo as the alt text but this also

makes this alt text appear on the page

if the image for some reason does not

load so first of all let's just save our

page and you'll see the logo now appear

on the web page and suddenly our page

got much more interesting it's awesome

putting images into our web pages

however let's go ahead and change the

file name so that it doesn't find the

image and let's see what happens on the

page

now we have a broken image icon but

notice our alt text appears html5 logo

so that is another purpose of the alt

attribute i'll fix that so we get our

logo back now there's other attributes

that we can and probably should use with

an image so one is title now we've seen

the title attribute before remember the

title

text that we provide here in the title

attribute is not accessible a screen

reader will not read it so this can't be

something that is very important that

everybody should know this is text

that can complement our image but it's

not necessarily

required the page is complete without it

but we can add some complementary text

here so i'll just put i am

learning html5

it doesn't have to be i don't even need

the period really it doesn't have to be

identical to the alt text at all this

should be complementary but now if we

mouse over the image we'll see

the title pop-up that says i am learning

html5 and that's complementary a couple

of other attributes that way back in the

1990s these were required however for

years these have not been required but

now they're coming back and it's width

and height so if we define a width here

and we want to provide the same width of

our image now i saved this image with a

file name that tells me it reminds me

exactly the width and the height and

it's 300 pixels by 300 pixels so i'll

just put 300 if we just provide the

width

html will remember or shift

the image to match so the aspect ratio

stays the same so if i switch this to

200

and save notice it also adjusted the

height of the image however we want to

provide

both we want to provide the width and

the height

and let's provide exactly what they are

and i'll tell you why this is making a

comeback and why it is now recommended

to provide the width and the height even

though we can change this in the future

with css so i'm saying we provide these

but yes css may change

and override these values so why do we

provide them well it's a little

complicated but it's called cumulative

layout shift if you've ever gone to a

web page

and you were getting ready to click on

something and then you saw the page

shift around maybe a pop-up ad appeared

or a banner ad and you clicked on

something that you didn't intend to

click because the button or the image

that you wanted to click suddenly moved

that is cumulative layout shift so we

provide the width and the height now to

tell the browser hey

this is going to take up some space here

and this is how much if we don't provide

that the browser shifts everything once

it figures out the size of the image now

once again you can still change the size

of the image make it responsive which

would adapt to mobile devices and

everything else with css so we really

provide this information with the width

and the height

just to give the browser an idea of the

size and the aspect ratio coming in so

it just kind of prepares itself and that

helps just a little bit it is now

recommended by google developers that we

do provide the width and the height in

the image element with our first image

added now let's scroll down and add a

second image to our page and we'll

scroll down to our vacation area place

i'd like to visit let's change this to

places i'd like to visit

and they've got i've heard good things

about the caribbean so this seems like a

great place to put an image of a

caribbean beach so once again we'll type

our img abbreviation and press tab

and then visual studio code helps us out

by providing

the image element with the source and

alt attributes ready to go so for the

source once again type the name of our

folder press slash and now we get the

names of the images we have ready i'm

going to choose caribbean

and then in the alt area i'm going to

type

caribbean beach

and now let's save and see what we get

on the page when we scroll down because

we have to scroll down a little ways to

see it and there is our caribbean beach

image so now let's add a title attribute

that's just a little different than our

alt attribute just complementary text

and this is i

want to visit a

caribbean

beach

and we'll save that

now we're getting closer but remember we

should apply the width and the height

attributes as well so let's click on the

file explorer because i didn't have

the width and the height saved in the

name of this jpeg file dot jpg notice

the other image we used was a dot png

there are different image file types and

those have different extensions so now

i'll click the

explorer up here we'll go back open the

image folder and i'm going to click on

the caribbean image

now when i do that in visual studio code

it shows the image and at the bottom i

can see it is 400 pixels

by 225 the first number is the width so

i'm going to close this now

click file explorer to hide that so i

have a little more room and now i can

say

width

equals 400

and the height

equals

225

and if we save everything should remain

the same we've just provided these extra

attributes now i've noticed

that

this wrapped a little strange here in

visual studio code but know that the

width and the height are still part of

the image element that we started right

here

okay now that we've got that let's go

ahead and remove the in from the jpeg so

it will not find the image and make sure

our alt text appears yes we've got a

broken image icon but it says caribbean

beach and that is our alt text so i'll

fix that by putting the in back in the

name spelling it correctly and the image

shows up because now visual studio code

can find the file for us okay we had to

scroll down to see this image because

our page is long enough

that if we scroll to the top

we don't see our vacation area anymore

now this bottom of the page here you

could call it a crease if it was a

newspaper and a lot of the terminology

kind of goes back to newspapers and

magazines as we talk about layout

and so this bottom part

that defines the line

that anything below that we do not see

right now that's called the fold so

anything

after this area that we can now see is

called below the fold so anything below

the fold we have to scroll to see and

now we scroll to see this image well

there's one more attribute for this

image that i want to talk about and it's

the loading attribute

and if we provide loading and we can set

it equal to a value and there's two

possible values the first one

is eager but we never have to provide

this this is the value by default so if

we do not provide the loading attribute

the loading attribute is always there

and it's just set to eager we just don't

see it

but the one that we do need to provide

is called lazy

and what you want to do for performance

for your web page

is for any image that is below the fold

that is one you do not currently see

when the page loads you want to set the

loading attribute to lazy and that means

the browser will only load that image

when it knows it is about to show it

when we start to scroll

now firefox the web browser firefox is

much easier to demonstrate this in

chrome wants to display the image much

earlier so it right now this image is

close enough

to the area that we see that it will

still load this caribbean image

automatically that we have here so i

need to create some extra space and i

can demonstrate this to you by using

something called chrome dev tools that's

available in the browser so let's do

that now i'm going to scroll back up

above places i'd like to visit

to the hr area the horizontal rule that

we have going across right here before

the i am also planning a vacation

and i'll type an abbreviation

br for a line break and then i'll put

the asterisk for times and i'm going to

put 150.

this emit abbreviation that visual

studio code supports will insert 150

line breaks into our page there's no way

i would want to type all of those

individually but i can do it with this

abbreviation so i'll click that and

suddenly we have all of these line

breaks

if i save

and we don't see this change but now

there's a lot of space between the

sections and that's what i need to

demonstrate this so we've changed the

code i'm going to click the maximize

button here in chrome

to bring the browser all the way out and

now let's right click

and choose inspect and you could also do

this with keys

and it would be ctrl shift and the

letter i all at once the control key the

shift key and the letter i i'm just

going to right click and choose inspect

either way we'll open up the dev tools

in chrome

and now that we're getting the dev tools

open it will automatically open to the

elements tab and notice how if i

hover over an area

in the elements now it highlights those

on the left in the browser so here i've

hovered over my goals for the year and

we can see that i can hover over the

section that discusses html and it

highlights that section what we want to

do though is click the two greater than

symbols here at the top and i'm going to

choose the network tab

once it shows the network tab

you'll want your disable cache

to have the check mark

and that is because browsers know to

save images after they've loaded them

initially so they can reload them fast

but that is called the cache where it

stores the images that's c-a-c-h-e

we want to disable that cache so we can

demonstrate this also

in this area right below the filters you

see all fetch slash xhr js css

choose the image all we are interested

in right now are the image files we

don't want to see the rest of the files

so once you've done all of that

we're going to go ahead

and reload the page so i'm going to

click the reload icon up here in the

browser

and we've reloaded and notice down here

we just see the html logo file that's

all that has loaded right now

and now as we scroll down as we get

close to the caribbean image file we

will see it load because it has

the loading attribute set to lazy so

only once we get close and i created a

lot of space here so i'm scrolling down

and fairly soon it should pop up there

it is

we don't see it on the page yet over

here but it's getting close so chrome

loaded it in preparation for us to see

it but what that really helps is that it

did not load the image right when we

loaded our page so that made our page

load faster it only loads these images

when it thinks it's going to need them

and that is lazy loading so now you can

click the x here in the top right to

close the dev tools then i'm going to

click the

maximize button again to get the browser

back to the size we wanted it i'll drag

it down here so we can see everything

and then over in visual studio code i'm

going to press ctrl z which is undo you

could also go to the edit menu and

choose undo but i'll do control z

and get rid of all those line breaks but

again if you want to demonstrate that

you can just type in br and then how

many of those elements you want in

visual studio code will recognize that

so that is a demonstration of a lazy

loading technique that helps your pages

load faster imagine if you had a page

that had a dozen or 20 or even 50 images

you wouldn't want the page to continue

loading until it loaded all of those

images so lazy loading is a very good

performance technique especially when

you're dealing with lots of images that

are below the fold now let's add a new

element to our page and it's something

we're going to wrap this image in so

i'll put it underneath the paragraph

that says i've heard good things about

the caribbean and i'm going to type the

word

figure and i'll press tab because figure

is an element now i'll highlight the

closing tag and press control x to cut

you can also get these options that i

use with the keyboard shortcuts in the

edit menu there's cut copy and paste so

it's ctrl x to cut and now at the end of

the image here i'm going to paste which

is control v and now i've got the

opening

and closing figure tags

i'll highlight the image here and just

tab it in as i'm used to seeing it so

the image is inside the figure element

now this by itself won't do much but it

is saying we've got a figure with an

image and we can add a caption and it

tells the browser

that the caption

big caption element

is related to the image which is better

than just putting a paragraph underneath

it the paragraph

while we could visually see it's

probably related to the image if it was

right under the image it's not telling

the browser or assistive technology that

it is a caption for the image this

spells it out for both the browser and

assistive technology that yes what we

put in here is directly related to this

image but it doesn't have to be

identical to the alt attribute of the

image although it should kind of be a

description of the image so i'll put

caribbean

beach

getaway here as our fig caption and now

it does show up on the page and notice

the image has been indented just a

little bit and once again we can change

all of the layout of the page and how

everything looks with css in the future

but this is just the

default behavior when we apply a figure

it's indented somewhat so we have an

image and the caption now let's go ahead

and add our last image as well and we

want to put that underneath

margarita island reserve riviera cancun

an actual resort in the mexican

riviera cancun area so we'll scroll down

here

and underneath the address we want to

add an image

of at least the cancun area because

that's where we're thinking about going

so image and

we press the tab button and we get the

source and alt attribute again so let's

type img that's the name of our folder

and slash and now we've got our vacation

image and that looks good

and now we can put in the alt tag the

cancun

vacation for our vacation image

and now in the title

we can put something like

it's

five o clock

somewhere because that's kind of related

to margaritaville and jimmy buffett

and he's famous for that saying and it's

five o'clock somewhere there's something

worth noting about this phrase we've got

single quotations here inside of our

double quotations now that's what's

possible if we had used single quotes

out here this would not be possible but

we can use single quotes inside of our

double quotes so this does work now

let's go ahead and save

and if we look at the page right

underneath the address for the resort

we're thinking about we've got our

caribbean vacation image and if we mouse

over we've got the title it's five

o'clock somewhere that looks good but

notice we don't have the space or the

indentation that we get from the figure

element so let's go ahead and put a

figure element around this image as well

so we'll type

figure press tab once again i'm going to

highlight the closing tag press control

x

underneath the image ctrl v to paste it

in and if i save i should get some auto

formatting and so now i've got the image

indented inside the figure and let's add

a caption here as well remember it's the

fig caption element so i'll press tab

and now let's put

a caribbean

vacation

image

so it's not quite the same as our alt

attribute it's not the same as our title

attribute but it's a nice description of

this image okay we're not quite finished

with our image it's easy to forget some

of these attributes that we might not

think about applying right away so

one we know we need is the loading

because this will absolutely be below

the fold so let's set that to lazy as

well and save and now let's click on the

file explorer again in the top left and

let's look at our vacation image and

find the dimensions and we can see here

at the bottom it's 400 pixels by

267 pixels

so now we can close that out

and click on the file explorer to hide

that again

and let's provide width and height so

the width is equal to

400 and the height

is equal to 267. so now we've provided

all the correct attributes that we need

for this image

and everything looks good here on the

page

one more thing i want to add about

figure figure is not just for images so

let's scroll up here in vs code back to

our html area

and we do have

our html logo right here underneath this

is my first web page we'll scroll back

up to this area here on the page as well

and now we can add a figure underneath

this image so i'll type the word figure

again and now let's add a fig caption

first the fig caption element needs to

either be the first thing inside of a

figure or the last thing it can be

either or so here i'm going to type

in example

of html5

code and that will be our caption so

let's save that much and we see that

here but really we have no content

inside of our figure yet so let's go

ahead and add some content and i'll add

a paragraph which is a block level

element we've discussed that in the past

block versus inline

and now for the text of the paragraph i

want to put that inside of an inline

element that will not create a line

break and it's a code element

code

this element code helps you actually

display code if that's what you want to

use you can use other elements inside of

it though so if i want to display html

code i can't simply put an h1 element

because then it applies this element to

the page we need to go back to what we

learned about html entities to provide

the less than sign which is an ampersand

lt with a semicolon then i could type h1

and then ampersand gt with a semicolon

for the greater than symbol and now i'll

put hello world

with an exclamation mark and then i'll

do the

less than html entity again and then a

slash h1 and then the ampersand

gt semicolon which is greater than

in a semicolon and now if we look at the

page

we have got an example of some html code

printed directly to our web page so this

is another example of how to use a

figure element it can contain other

content such as a code sample and you

can have a caption at the top just as

easily as you can at the bottom of the

figure okay our code for the lesson is

complete but i do want to show you some

image resources but before we can do

that we need to validate our code with

the validator once again so i'm going to

grab this and make it just a little

wider so the validator shows up better

here remember we're at validator

validator.w3.org

we want to click validate by file upload

click choose file make sure you're in

the correct folder once this folder area

opens up

and i'm in the lesson 6 folder and then

i'm going to choose the index file that

we were working in and choose open and

from there i can choose

check

and it should check the html it says

document checking completed no errors or

warnings to show that's what you want if

you do get an error warning it should

tell you what line it's on in your code

and you can refer to visual studio code

find the line and fix the error that it

is telling you about so once again

validate your code before you finish

before finishing this image lesson i

wanted to share some resources that i

use now there are many resources out

there so these are just a few and i'm

sure you can find others as well first

there's this article that has 21 of the

best placeholder image generators using

placeholder images is very common

practice when you're laying out a page

and you're not sure the images you want

to use yet what you can do is take a uh

url like this from

placeholder.com and put it in as the

value of the source attribute in your

html image tag and then it will generate

a placeholder image until you find the

image you want to put there some of

these other image generators actually

provide pictures like the second one on

the list called phil murray provides

random pictures of the actor bill murray

but it works in the same way you put the

url in

for the source attribute value in your

image tag and then you will get a

picture of bill murray from this image

generator okay the next several sites

are just great places to download

freely

usable images as it says right here

these are licensed for free use it's

important to download and use images

that you actually have the usage rights

to so this is a good way to do that find

them on unsplash.com is my favorite you

can also go to pexels.com as you see

here very similar site you can also go

to gratisography.com

and this site has unique and kind of

funny pictures so that's kind of neat

too

and you never know what you'll see on

these the next one is

pixabay.com

very much like the previous ones i

showed you from there i want to suggest

some free image software it's called

earphone view i've used this for years

it's just really lightweight software

easy to use and you can load in an image

and resize it and that's what i usually

use it for you can also crop images with

it i'll pull it over here as i have an

instance of orphan view open already

you can see i've got in this large

picture of the caribbean beach but you

can go to the edit menu

and you can see different options that

are here such as the crop

and of course we'd have to select an

area to do it but in the image menu

there is a resize resample

and here you can see you've got the

dimensions of the image but i can resize

this it's a huge image right now at

5464 pixels wide

i'll take it to say 400 pixels

and it stays in sync so it keeps the

aspect ratio and now we're at

225 for the height so you see the

current size and then the new size i'll

click ok

and it brings it down to a much smaller

nicer size easy to save as well as a new

name

and a great little software to use from

there i also recommend

canva.com now disclosure here there is a

paid subscription to use this site

however i believe they have a free

account that you can at least get some

of the features or try it out so

canva.com is good after you've got your

images

and even after you have resized your

images to the smaller size that you

would probably use on your web page it's

also a good idea to drag and drop them

into tiny png

i believe this also comes up if you type

in tinyjpg.com

but it will compress the images and they

will still look good but they get a

smaller file size so they load to that

web page faster which is always

important so all of these resources are

great and i will put links to all of

them in the description below remember

to keep striving for progress over

perfection and a little progress every

day will go a very long way

please give this video a like if it's

helped you and thank you for watching

and subscribing you're helping my

channel grow have a great day and let's

write more code together very soon