Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The image tag allows you to add photos and images to your web pages.
Placeholder Websites:
Image Tag Attributes:
-
alt - Short for alternative text, this attribute always goes on an <img> tag and should contain a short description of the image.
- src -Tells the browser where the image is located. You can link to an image from your website’s files, or from an outside URL.
Further Reading:
Imagine how dull the web
would be without pictures.
0:00
Photos and images are a cornerstone of
building exciting, beautiful web pages.
0:03
So we're going to look at the image tag,
the tag that allows you to add photos and
0:08
images to web pages.
0:11
Let's start by looking at this image
tag in the header of our profile page.
0:13
If you don't have a workspace open and
0:19
wanna follow along,
click the launch workspace button.
0:20
Most HTML tags can have
additional information
0:23
called attributes added to them.
0:26
An attribute provides instructions for
the browser.
0:28
For example,
this tag has three attributes.
0:32
Source, alt, and class.
0:35
We've already seen the class
attribute a few times before.
0:39
You can use it to create CSS styles
that control how the element
0:43
appears on the page.
0:46
And by the way,
0:48
when web develops say HTML element,
they simply mean any HTML tag on a page.
0:48
The image tag is a good element to
start learning about attributes
0:54
because it needs two of them.
0:57
The source attribute and
the alt attribute.
0:59
The source attribute
points to a file path,
1:02
to the location of the image
file on your site.
1:05
In our case,
the image is in this folder called images.
1:08
And image itself is called me.png.
1:12
If you look over here in our Images
folder, you can see that image right here.
1:15
So if we change the file path to the other
image in this folder, Portland.jpg.
1:21
And save, and refresh the example project,
you can see that this tag is now
1:31
pointing to the picture of
the steel bridge here in Portland.
1:35
The same image as our
header background image.
1:39
You can also link to what's
called an absolute URL.
1:42
A full web address that links to
an image that's outside of your website.
1:45
Let's replace this image with a place
holder, so we can see how that works.
1:50
I'm going to go to a place holder
image website called placeimg.com.
1:54
This is a really useful website
that provides you with the URL that
2:01
will load a random image onto your
page each time your website loads.
2:04
In these boxes, enter a height and
width of 400 pixels.
2:09
And you can choose any category you like,
but
2:15
I'm going to choose people to
get random images of people.
2:17
Now we can copy this URL up here, and
2:22
paste it into our source attribute on
the image tag, in between these quotes.
2:26
Save, refresh, and
2:33
now you can see every time we refresh
the page, we get a new placeholder image.
2:35
This really comes in handy when laying out
pages and need an image on the fly, for
2:40
those times when you don't have an image
yet or haven't quiet decided on one.
2:44
Let's move on to the Alt tag.
2:48
Alt here is short for Alternative text.
2:50
You should always put a precise
description of your image into your
2:52
Alt attribute.
2:56
This is what visitors to your website
will see if the file path cut to image is
2:57
somehow broken or
if the image isn't available.
3:01
This text is used by search engines and
screen readers too.
3:03
It enhances accessibility for the visually
impaired and other people who use tools
3:07
called screen readers that read
out the text on a web page.
3:11
If someone using a screen
reader visits your site,
3:15
the alt text will tell
them about the image.
3:17
One last thing I'd like to
mention about image tags.
3:19
Notice that the image
tag has no closing tag.
3:23
Tags that don't need to be closed
are called self closing tags or
3:26
empty elements.
3:30
There are only a few of
these self closing tags,
3:31
like the link tag we talked
about in the last video.
3:33
You'll learn which tags are self
closing as you get more and
3:36
more familiar with HTML.
3:39
But the majority of HTML
elements will need to be closed.
3:40
You need to sign up for Treehouse in order to download course files.
Sign up