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