This video is focused on HTML Attributes attributes are way that we add additional information to our
aged him out elements.
So they take the form of a key value pair you're going to hear that phrase a lot.
It basically means a property and then a corresponding value.
So that might be something like source equals Corgies up PMG class equal selected type equals text less
the SS So don't worry what those do.
We're going to see them all in time.
But it's this format of some word equals something in text message a developer network has a comprehensive
attribute reference just like it did for elements but for all of the attributes in edged him out.
So the first thing you'll notice as I scroll through is that there are a lot of different attributes
.
And just like with the elements you do not have to know all of these.
In fact most developers won't use 80 percent of these so there's really a subset of five 10 maybe 15
attributes that developers use pretty often.
It's also important to note that not every attribute works on every single element.
In fact most attributes only work on two to five different elements.
Some of them only work on one.
So this second column here denotes the elements that a given attribute works for.
So something like code which is an attribute I've never had to use ever.
But we can tell from here it specifies that you are out of an apple it's classified to be loaded and
executed great.
Whatever that means and it only works on an applet element which I've also never had to use before.
But if we take something more common like source which I'll just search for you can see that the RC
attribute works on quite a few different elements audio embed I-frame image input script source track
video and we'll actually be using the source attribute later in this video.
So the key takeaway there's a lot of attributes just like there's a lot of elements but there's really
just a few important ones and I'm going to start by highlighting two of those which are swords and HPF
and those two attributes are really important to images and anchor tags or links respectively.
So let's go back to the slides so images really fun.
An important part of making a web site.
There are actually very short tags to write.
And you'll notice they look slightly different than what you've seen before where there is no opening
and closing tag.
There's no inside content there's no inner HMO or inner text.
Rather we just have this image tag that opens and closes and then a single attribute.
So I'll show you how to do this.
Let's start of course by finding an image.
I love corgi mixes in particular.
I love corgi husky mixes.
There we go.
Let's just take this image.
Adorable dog.
And let's go to some age old document.
Again I'm just going to go back to what we've been working on.
But this is clearly not some long lasting site that we're going to really build up.
This is just like a scratchpad for HMO.
So let's go anywhere on the page and retype the word.
I am g.
We do not need the closing tags so we don't do this.
This is a self closing tag.
And then there is a single attribute that we must have which is S R C stands for source and it's the
role of the image that we're trying to make this tag use so that you can be something that is hosted
.
So this image here but it could also be an image that I have saved on my machine.
It could be in the same directory that I am or the same folder in which case I would just reference
it like dog it JPAC.
For now we're going to deal with these online images.
We will spend some more time talking about where to restructure things where we put our images and all
of that later on.
Save this.
Let's open up this file.
And there we go.
We've got an image tag.
So another type of tag that uses an attribute is a tag which is how we make links.
So the tag sensor anchor tag is really important.
It's how we create links to other web pages.
It's how on Google when you search for something every single result you click on it.
That's an anchor tag.
Every single one of those links or on some web site when there is you know all the social media buttons
Facebook Instagram Twitter all those buttons are actually links you click on them and they take you
to another page.
So the format is as follows.
A tag opening and closing some text inside.
And then each ref attribute equals some you URL.
So I'll show you an example here.
We're going to make an a tag.
And this is just going to be a link to Google.
So we're going to provide that ref attribute ref equals GWW dot Google dot com.
So that's where the link goes.
When I click it of course if I refresh the page right now I would actually not see anything because
this link is invisible.
There's no text there's nothing to click on.
So inside the tags in the inner content I'm going to say click me says go to Google.
OK.
So as you can see it makes me a nice link that I can click on.
Also you'll notice that it's an inline element.
It doesn't take up its own block.
It doesn't take up its own line.
Force content onto a new line below it.
So it's in line and this should take us to Google when I click on it.
However it doesn't quite work.
Take a look at that you are all that it takes me to file colon slash slash.
This is just the file itself.
And then www.youtube.com.
So without going into too much detail because we cover this a lot when we get to the back end section
what's happening is that I'm on the file protocol which is what happens when you just open a file and
when I click this link it just thinks I want to use a file protocol again and just go to Google dot
com.
However what I actually want to do is go to Google dot com on the HTP protocol.
So I need to make sure my link is explicit.
So when I refresh my click click me to go to Google.
It actually takes me to Google because I specified this should be HTP colon slash slash www.youtube.com
.
With that said I sometimes do want to link to another page that is not on HTP.
So I'll give you an example.
It's an a tag.
And I'm just going to call this go to page 2 that HVM L which doesn't exist.
Go to page 2.
And now what I'm going to need to do is make a page too
and this page too is going to be really really simple just a single paragraph.
This is page 2 and I save it there in the same directory together on my desktop.
You can see I have first page and page 2 and this link just goes to page to that HMO.
So refresh the page I see go to page 2.
I click on it and you can see my uro has changed.
So this now takes me to the exact same place except it's now Page 2 that age HTML rather than first
page study Timo.
So we're seeing two types of you or else here.
One is called a relative path which means relative to where I am keep everything the same and add on
splash page to that HMO or it doesn't matter where I am because I want to go to Google completely different
place.
Both of them are atax.
So this type of usage is actually really common.
When you have a portfolio site and you have an About Me page and you have a page for projects and your
resume and contact information those could be all different HMO files that you create and then you just
link them together with atax.
And this use case is also really common.
If you want to link to your Facebook links and your Google Google Plus I guess if anyone uses that or
your Instagram and so on.
So to sum this up we've got a tag's we've got image tags.
Both of them use attributes and attributes are just ways where we pass information in.
They follow this format key value pair something equals something in quotes