How to Insert Images in HTML | An HTML5 Image Tutorial
Summary
TLDRIn 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
🌐 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.
📸 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.
🏖️ 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.
🛠️ 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.
🔍 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.
Mindmap
Keywords
💡HTML
💡Visual Studio Code
💡Live Server Extension
💡Image Tag
💡Alt Attribute
💡Responsive Images
💡Lazy Loading
💡Figure and Figcaption Elements
💡Placeholder Images
💡Image Optimization
💡Web Accessibility
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
浏览更多相关视频
Head Tag in HTML | An HTML5 Head Element Tutorial
Introduction to HTML | An HTML5 Tutorial for Beginners
CLASS 8 | CHAPTER 9 | IMAGES, LINKS AND FRAMES IN HTML 5 | CYBER TOOLS | KIPS
HTML Tutorial #4: Images & File Paths | Web Development | Filipino | Tagalog
HTML Tag Text Basics | HTML5 Element Text Tutorial
HTML - Attributes - W3Schools.com
5.0 / 5 (0 votes)