Notesale: Turn your study into money

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above

---

How to Insert Images in HTML | An HTML5 Image Tutorial
Dave Gray

Adding Images to Your Web Page
Hello and welcome! In this tutorial, we will be learning how to add images to our web page using
HTML
...


Setting Up the Environment
Before we begin, let's make sure we have the necessary tools set up
...
You can find the links to these tools and the starter code files in the description below
...


Creating an Image Folder
In order to organize our project, it is best practice to create a separate folder to hold our image
files
...
This is where we will
store our images
...
However, I will also provide some resources at the end of
this tutorial where you can find free images for your own projects
...
We will
begin by opening our HTML file in Visual Studio Code and scrolling down to the section where
we want to insert our first image
...
This tag is self-closing, meaning it does not
require a closing tag like other elements
...

The src attribute specifies the source location of the image
...
We can use the file explorer in Visual Studio
Code to navigate to the image file and copy its relative path
...
This text is read by assistive
technology like screen readers and also appears on the page if the image fails to load
...
If we change the file name
or remove the image, the alt text will be displayed instead to provide context
...
One of them is the title
attribute, which specifies additional text that appears as a tooltip when we hover over the image
...

Another set of attributes that are making a comeback are the width and height attributes
...
By providing the width and height of an image, we inform
the browser about the image's dimensions, allowing it to reserve the space and prevent sudden
shifts in the layout when the image loads
...


By following these best practices and incorporating images into our web pages, we can make
our content more engaging and visually appealing
...
To do this, type "img" and press "Tab" in your code editor
...

Next, you need to specify the source and alt attributes for the image
...
For example, if you have an image of a beach in a folder called "images" and the
file name is "beach
...
jpg" and the alt
attribute to "beach"
...
This attribute provides
complementary text for the image, and it can be different from the alt text
...

Finally, you should specify the width and height attributes for the image
...
You can find the width and
height of an image by opening it in an image editor or using your code editor's file explorer
...
Specify the source
and alt attributes for the new image, and set the title, width, and height attributes as needed
...
e
...
By setting the loading attribute to
"lazy", the browser will only load the image when it is about to be displayed, thus reducing the
initial page load time
...
However, in other browsers like Chrome, you need to explicitly set the
loading attribute to "lazy" to enable lazy loading
...
Open the dev
tools and go to the Network tab
...
Then, reload the page and scroll down to see the images load as you approach them
...
You could also go to the Edit menu and
choose Undo
...
But again, if you want to
demonstrate that, you can just type in
and then how many of those elements you want
...
So that is a demonstration of a lazy loading technique
that helps your pages load faster
...
You wouldn't want the page to continue loading until it loaded all of those images
...

Now let's add a new element to our page
...
So I'll
put it underneath the paragraph that says "I've heard good things about the Caribbean
...
Now I'll highlight
the closing tag and press Ctrl+X to cut
...
There's Cut, Copy, and Paste
...
And now,
at the end of the image here, I'm going to paste, which is Ctrl+V
...
I'll highlight the image here and just tab it in as I'm used to seeing it
...

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
...
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
...
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
...
And now it does
show up on the page
...

And once again, we can change all of the layout of the page and how everything looks with CSS
in the future
...
It's indented
somewhat
...
Now let's go ahead and add our last image as
well
...
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 let's type "img", that's the name of our folder, and slash, and now we've got
our vacation image
...
And now we can put in the "alt" tag, "The Cancun
vacation" for our vacation image
...
"
There's something worth noting about this phrase
...
Now, that's what's possible
...
But we can use single quotes inside of our double quotes, so this does
work
...
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
...
" That looks good
...
So let's go ahead and put a
"figure" element around this image as well
...
Once again, I'm
going to highlight the closing tag, press

Validator
To validate your HTML code, go to validator
...
org
...
The validator will check your code for any errors
or warnings
...


Resources
Here are some resources that you can use for web development:
●

●

●
●
●

Placeholder Image Generators: These are useful when you are laying out a page and
don't have the actual images yet
...
com: Generates placeholder images based on the provided
URL
...
com: Provides random pictures of actor Bill Murray
...
Some examples include:
● unsplash
...
com
● gratisography
...
com
Free Image Software: Earphone View is lightweight software that allows you to resize
and crop images easily
...
com is a web-based design tool that offers various features for creating
and editing images
...
com is a tool that compresses images, reducing their file size
without significant loss in quality
...
Even a little progress
every day can go a long way
...
Thank you for watching!



---