1
00:00:00,420 --> 00:00:07,170
This video is focused on HTML Attributes attributes are way that we add additional information to our

2
00:00:07,170 --> 00:00:08,500
aged him out elements.

3
00:00:08,670 --> 00:00:13,590
So they take the form of a key value pair you're going to hear that phrase a lot.

4
00:00:13,590 --> 00:00:17,990
It basically means a property and then a corresponding value.

5
00:00:18,330 --> 00:00:26,180
So that might be something like source equals Corgies up PMG class equal selected type equals text less

6
00:00:26,190 --> 00:00:28,030
the SS So don't worry what those do.

7
00:00:28,050 --> 00:00:29,300
We're going to see them all in time.

8
00:00:29,460 --> 00:00:37,680
But it's this format of some word equals something in text message a developer network has a comprehensive

9
00:00:37,680 --> 00:00:43,130
attribute reference just like it did for elements but for all of the attributes in edged him out.

10
00:00:43,500 --> 00:00:47,820
So the first thing you'll notice as I scroll through is that there are a lot of different attributes

11
00:00:47,830 --> 00:00:48,050
.

12
00:00:48,360 --> 00:00:51,880
And just like with the elements you do not have to know all of these.

13
00:00:51,900 --> 00:00:58,560
In fact most developers won't use 80 percent of these so there's really a subset of five 10 maybe 15

14
00:00:58,560 --> 00:01:01,130
attributes that developers use pretty often.

15
00:01:01,470 --> 00:01:05,480
It's also important to note that not every attribute works on every single element.

16
00:01:05,490 --> 00:01:09,750
In fact most attributes only work on two to five different elements.

17
00:01:09,750 --> 00:01:11,440
Some of them only work on one.

18
00:01:11,580 --> 00:01:16,520
So this second column here denotes the elements that a given attribute works for.

19
00:01:16,590 --> 00:01:20,980
So something like code which is an attribute I've never had to use ever.

20
00:01:21,120 --> 00:01:26,130
But we can tell from here it specifies that you are out of an apple it's classified to be loaded and

21
00:01:26,130 --> 00:01:27,580
executed great.

22
00:01:27,600 --> 00:01:33,250
Whatever that means and it only works on an applet element which I've also never had to use before.

23
00:01:33,450 --> 00:01:38,680
But if we take something more common like source which I'll just search for you can see that the RC

24
00:01:38,790 --> 00:01:45,300
attribute works on quite a few different elements audio embed I-frame image input script source track

25
00:01:45,450 --> 00:01:49,360
video and we'll actually be using the source attribute later in this video.

26
00:01:49,380 --> 00:01:53,790
So the key takeaway there's a lot of attributes just like there's a lot of elements but there's really

27
00:01:53,790 --> 00:01:59,220
just a few important ones and I'm going to start by highlighting two of those which are swords and HPF

28
00:01:59,640 --> 00:02:05,220
and those two attributes are really important to images and anchor tags or links respectively.

29
00:02:05,490 --> 00:02:09,880
So let's go back to the slides so images really fun.

30
00:02:09,900 --> 00:02:12,010
An important part of making a web site.

31
00:02:12,130 --> 00:02:14,490
There are actually very short tags to write.

32
00:02:14,670 --> 00:02:20,760
And you'll notice they look slightly different than what you've seen before where there is no opening

33
00:02:20,760 --> 00:02:21,630
and closing tag.

34
00:02:21,640 --> 00:02:25,570
There's no inside content there's no inner HMO or inner text.

35
00:02:25,680 --> 00:02:32,650
Rather we just have this image tag that opens and closes and then a single attribute.

36
00:02:33,450 --> 00:02:34,910
So I'll show you how to do this.

37
00:02:34,920 --> 00:02:39,090
Let's start of course by finding an image.

38
00:02:40,180 --> 00:02:42,870
I love corgi mixes in particular.

39
00:02:42,870 --> 00:02:44,580
I love corgi husky mixes.

40
00:02:44,580 --> 00:02:45,770
There we go.

41
00:02:46,320 --> 00:02:47,850
Let's just take this image.

42
00:02:48,270 --> 00:02:49,610
Adorable dog.

43
00:02:49,950 --> 00:02:53,340
And let's go to some age old document.

44
00:02:53,340 --> 00:02:55,550
Again I'm just going to go back to what we've been working on.

45
00:02:55,560 --> 00:03:00,060
But this is clearly not some long lasting site that we're going to really build up.

46
00:03:00,060 --> 00:03:02,640
This is just like a scratchpad for HMO.

47
00:03:03,570 --> 00:03:07,500
So let's go anywhere on the page and retype the word.

48
00:03:07,500 --> 00:03:08,870
I am g.

49
00:03:09,150 --> 00:03:14,790
We do not need the closing tags so we don't do this.

50
00:03:14,790 --> 00:03:16,920
This is a self closing tag.

51
00:03:17,370 --> 00:03:23,430
And then there is a single attribute that we must have which is S R C stands for source and it's the

52
00:03:23,730 --> 00:03:30,330
role of the image that we're trying to make this tag use so that you can be something that is hosted

53
00:03:30,330 --> 00:03:31,000
.

54
00:03:31,140 --> 00:03:38,800
So this image here but it could also be an image that I have saved on my machine.

55
00:03:39,420 --> 00:03:44,160
It could be in the same directory that I am or the same folder in which case I would just reference

56
00:03:44,160 --> 00:03:48,410
it like dog it JPAC.

57
00:03:49,110 --> 00:03:52,200
For now we're going to deal with these online images.

58
00:03:52,220 --> 00:03:56,540
We will spend some more time talking about where to restructure things where we put our images and all

59
00:03:56,540 --> 00:03:58,080
of that later on.

60
00:03:58,260 --> 00:03:59,300
Save this.

61
00:03:59,610 --> 00:04:02,630
Let's open up this file.

62
00:04:03,690 --> 00:04:04,710
And there we go.

63
00:04:04,710 --> 00:04:06,590
We've got an image tag.

64
00:04:07,440 --> 00:04:13,510
So another type of tag that uses an attribute is a tag which is how we make links.

65
00:04:13,680 --> 00:04:16,560
So the tag sensor anchor tag is really important.

66
00:04:16,560 --> 00:04:19,680
It's how we create links to other web pages.

67
00:04:19,740 --> 00:04:24,450
It's how on Google when you search for something every single result you click on it.

68
00:04:24,570 --> 00:04:25,490
That's an anchor tag.

69
00:04:25,500 --> 00:04:31,380
Every single one of those links or on some web site when there is you know all the social media buttons

70
00:04:31,800 --> 00:04:36,390
Facebook Instagram Twitter all those buttons are actually links you click on them and they take you

71
00:04:36,390 --> 00:04:38,000
to another page.

72
00:04:38,730 --> 00:04:40,740
So the format is as follows.

73
00:04:41,070 --> 00:04:45,550
A tag opening and closing some text inside.

74
00:04:45,840 --> 00:04:51,100
And then each ref attribute equals some you URL.

75
00:04:51,180 --> 00:04:52,710
So I'll show you an example here.

76
00:04:52,740 --> 00:04:54,250
We're going to make an a tag.

77
00:04:54,960 --> 00:04:59,160
And this is just going to be a link to Google.

78
00:04:59,550 --> 00:05:07,700
So we're going to provide that ref attribute ref equals GWW dot Google dot com.

79
00:05:07,740 --> 00:05:08,910
So that's where the link goes.

80
00:05:08,910 --> 00:05:16,080
When I click it of course if I refresh the page right now I would actually not see anything because

81
00:05:16,110 --> 00:05:17,710
this link is invisible.

82
00:05:17,730 --> 00:05:19,890
There's no text there's nothing to click on.

83
00:05:20,100 --> 00:05:30,710
So inside the tags in the inner content I'm going to say click me says go to Google.

84
00:05:31,980 --> 00:05:32,250
OK.

85
00:05:32,250 --> 00:05:35,190
So as you can see it makes me a nice link that I can click on.

86
00:05:35,190 --> 00:05:38,180
Also you'll notice that it's an inline element.

87
00:05:38,190 --> 00:05:39,740
It doesn't take up its own block.

88
00:05:39,750 --> 00:05:41,220
It doesn't take up its own line.

89
00:05:41,220 --> 00:05:44,460
Force content onto a new line below it.

90
00:05:44,460 --> 00:05:48,100
So it's in line and this should take us to Google when I click on it.

91
00:05:48,120 --> 00:05:50,850
However it doesn't quite work.

92
00:05:51,090 --> 00:05:57,330
Take a look at that you are all that it takes me to file colon slash slash.

93
00:05:57,330 --> 00:06:00,330
This is just the file itself.

94
00:06:00,330 --> 00:06:03,180
And then www.youtube.com.

95
00:06:03,180 --> 00:06:07,650
So without going into too much detail because we cover this a lot when we get to the back end section

96
00:06:08,040 --> 00:06:14,520
what's happening is that I'm on the file protocol which is what happens when you just open a file and

97
00:06:14,520 --> 00:06:21,690
when I click this link it just thinks I want to use a file protocol again and just go to Google dot

98
00:06:21,690 --> 00:06:22,670
com.

99
00:06:22,740 --> 00:06:31,460
However what I actually want to do is go to Google dot com on the HTP protocol.

100
00:06:31,530 --> 00:06:34,050
So I need to make sure my link is explicit.

101
00:06:34,050 --> 00:06:38,500
So when I refresh my click click me to go to Google.

102
00:06:38,520 --> 00:06:46,770
It actually takes me to Google because I specified this should be HTP colon slash slash www.youtube.com

103
00:06:46,770 --> 00:06:48,110
.

104
00:06:48,180 --> 00:06:55,180
With that said I sometimes do want to link to another page that is not on HTP.

105
00:06:55,350 --> 00:06:57,020
So I'll give you an example.

106
00:06:57,150 --> 00:06:58,250
It's an a tag.

107
00:06:58,470 --> 00:07:05,290
And I'm just going to call this go to page 2 that HVM L which doesn't exist.

108
00:07:05,640 --> 00:07:07,710
Go to page 2.

109
00:07:08,640 --> 00:07:11,790
And now what I'm going to need to do is make a page too

110
00:07:15,480 --> 00:07:21,510
and this page too is going to be really really simple just a single paragraph.

111
00:07:21,510 --> 00:07:28,530
This is page 2 and I save it there in the same directory together on my desktop.

112
00:07:28,530 --> 00:07:36,340
You can see I have first page and page 2 and this link just goes to page to that HMO.

113
00:07:36,510 --> 00:07:39,980
So refresh the page I see go to page 2.

114
00:07:40,330 --> 00:07:43,680
I click on it and you can see my uro has changed.

115
00:07:43,950 --> 00:07:50,460
So this now takes me to the exact same place except it's now Page 2 that age HTML rather than first

116
00:07:50,460 --> 00:07:52,050
page study Timo.

117
00:07:52,500 --> 00:07:55,120
So we're seeing two types of you or else here.

118
00:07:55,230 --> 00:08:02,280
One is called a relative path which means relative to where I am keep everything the same and add on

119
00:08:02,370 --> 00:08:09,780
splash page to that HMO or it doesn't matter where I am because I want to go to Google completely different

120
00:08:09,780 --> 00:08:10,450
place.

121
00:08:10,590 --> 00:08:12,960
Both of them are atax.

122
00:08:13,320 --> 00:08:16,530
So this type of usage is actually really common.

123
00:08:16,800 --> 00:08:22,950
When you have a portfolio site and you have an About Me page and you have a page for projects and your

124
00:08:22,950 --> 00:08:29,010
resume and contact information those could be all different HMO files that you create and then you just

125
00:08:29,010 --> 00:08:30,940
link them together with atax.

126
00:08:31,290 --> 00:08:33,450
And this use case is also really common.

127
00:08:33,600 --> 00:08:39,990
If you want to link to your Facebook links and your Google Google Plus I guess if anyone uses that or

128
00:08:39,990 --> 00:08:41,660
your Instagram and so on.

129
00:08:42,030 --> 00:08:45,870
So to sum this up we've got a tag's we've got image tags.

130
00:08:45,870 --> 00:08:51,720
Both of them use attributes and attributes are just ways where we pass information in.

131
00:08:51,870 --> 00:08:57,980
They follow this format key value pair something equals something in quotes