1
00:00:00,540 --> 00:00:03,490
Imagine how dull the web
would be without pictures.

2
00:00:03,490 --> 00:00:08,030
Photos and images are a cornerstone of
building exciting, beautiful web pages.

3
00:00:08,030 --> 00:00:11,650
So we're going to look at the image tag,
the tag that allows you to add photos and

4
00:00:11,650 --> 00:00:13,700
images to web pages.

5
00:00:13,700 --> 00:00:17,410
Let's start by looking at this image
tag in the header of our profile page.

6
00:00:19,290 --> 00:00:20,760
If you don't have a workspace open and

7
00:00:20,760 --> 00:00:23,940
wanna follow along,
click the launch workspace button.

8
00:00:23,940 --> 00:00:26,690
Most HTML tags can have
additional information

9
00:00:26,690 --> 00:00:28,920
called attributes added to them.

10
00:00:28,920 --> 00:00:32,040
An attribute provides instructions for
the browser.

11
00:00:32,040 --> 00:00:35,420
For example,
this tag has three attributes.

12
00:00:35,420 --> 00:00:39,870
Source, alt, and class.

13
00:00:39,870 --> 00:00:43,080
We've already seen the class
attribute a few times before.

14
00:00:43,080 --> 00:00:46,330
You can use it to create CSS styles
that control how the element

15
00:00:46,330 --> 00:00:48,080
appears on the page.

16
00:00:48,080 --> 00:00:48,800
And by the way,

17
00:00:48,800 --> 00:00:54,300
when web develops say HTML element,
they simply mean any HTML tag on a page.

18
00:00:54,300 --> 00:00:57,640
The image tag is a good element to
start learning about attributes

19
00:00:57,640 --> 00:00:59,760
because it needs two of them.

20
00:00:59,760 --> 00:01:02,660
The source attribute and
the alt attribute.

21
00:01:02,660 --> 00:01:05,430
The source attribute
points to a file path,

22
00:01:05,430 --> 00:01:08,300
to the location of the image
file on your site.

23
00:01:08,300 --> 00:01:12,700
In our case,
the image is in this folder called images.

24
00:01:12,700 --> 00:01:15,980
And image itself is called me.png.

25
00:01:15,980 --> 00:01:21,280
If you look over here in our Images
folder, you can see that image right here.

26
00:01:21,280 --> 00:01:28,073
So if we change the file path to the other
image in this folder, Portland.jpg.

27
00:01:31,273 --> 00:01:35,726
And save, and refresh the example project,
you can see that this tag is now

28
00:01:35,726 --> 00:01:39,900
pointing to the picture of
the steel bridge here in Portland.

29
00:01:39,900 --> 00:01:42,410
The same image as our
header background image.

30
00:01:42,410 --> 00:01:45,200
You can also link to what's
called an absolute URL.

31
00:01:45,200 --> 00:01:50,020
A full web address that links to
an image that's outside of your website.

32
00:01:50,020 --> 00:01:53,480
Let's replace this image with a place
holder, so we can see how that works.

33
00:01:54,520 --> 00:01:59,644
I'm going to go to a place holder
image website called placeimg.com.

34
00:02:01,150 --> 00:02:04,220
This is a really useful website
that provides you with the URL that

35
00:02:04,220 --> 00:02:07,750
will load a random image onto your
page each time your website loads.

36
00:02:09,600 --> 00:02:15,250
In these boxes, enter a height and
width of 400 pixels.

37
00:02:15,250 --> 00:02:17,860
And you can choose any category you like,
but

38
00:02:17,860 --> 00:02:20,620
I'm going to choose people to
get random images of people.

39
00:02:22,750 --> 00:02:26,740
Now we can copy this URL up here, and

40
00:02:26,740 --> 00:02:31,230
paste it into our source attribute on
the image tag, in between these quotes.

41
00:02:33,140 --> 00:02:35,640
Save, refresh, and

42
00:02:35,640 --> 00:02:40,540
now you can see every time we refresh
the page, we get a new placeholder image.

43
00:02:40,540 --> 00:02:44,980
This really comes in handy when laying out
pages and need an image on the fly, for

44
00:02:44,980 --> 00:02:48,620
those times when you don't have an image
yet or haven't quiet decided on one.

45
00:02:48,620 --> 00:02:50,170
Let's move on to the Alt tag.

46
00:02:50,170 --> 00:02:52,248
Alt here is short for Alternative text.

47
00:02:52,248 --> 00:02:56,120
You should always put a precise
description of your image into your

48
00:02:56,120 --> 00:02:57,630
Alt attribute.

49
00:02:57,630 --> 00:03:01,240
This is what visitors to your website
will see if the file path cut to image is

50
00:03:01,240 --> 00:03:03,890
somehow broken or
if the image isn't available.

51
00:03:03,890 --> 00:03:07,630
This text is used by search engines and
screen readers too.

52
00:03:07,630 --> 00:03:11,780
It enhances accessibility for the visually
impaired and other people who use tools

53
00:03:11,780 --> 00:03:15,090
called screen readers that read
out the text on a web page.

54
00:03:15,090 --> 00:03:17,450
If someone using a screen
reader visits your site,

55
00:03:17,450 --> 00:03:19,720
the alt text will tell
them about the image.

56
00:03:19,720 --> 00:03:23,050
One last thing I'd like to
mention about image tags.

57
00:03:23,050 --> 00:03:26,520
Notice that the image
tag has no closing tag.

58
00:03:26,520 --> 00:03:30,010
Tags that don't need to be closed
are called self closing tags or

59
00:03:30,010 --> 00:03:31,362
empty elements.

60
00:03:31,362 --> 00:03:33,800
There are only a few of
these self closing tags,

61
00:03:33,800 --> 00:03:36,960
like the link tag we talked
about in the last video.

62
00:03:36,960 --> 00:03:39,350
You'll learn which tags are self
closing as you get more and

63
00:03:39,350 --> 00:03:40,520
more familiar with HTML.

64
00:03:40,520 --> 00:03:43,690
But the majority of HTML
elements will need to be closed.