All right.
Welcome back.
So in this video we're gonna talk about basic each team our tags.
So what I want you to do is we're already inside the sublime here.
If you don't have it open please open it up right click on learn basic HD him all five and I'm gonna
make a new folder and we're gonna call this zero to dot space basic.
Each team l tags and then hit enter and going gonna populate right here and right click to new file
control us and then type an index that each.
Make sure it's inside of 0 2 basic HD email tags it save minimize the other one if you would or close
up and then use our shortcut which is each team l mean hit tab one hit control us and we're going to
go to the body and I'm going to comment as out head in tag heading one tag
and I'm going to call right here we're going to do left bracket H one right bracket left bracket backslash
and we're going to head in one.
OK I'm a control I'm a right click and open in the browser and you can see heading one right now I know
you remember this because this is a memorable thing to teach but when we were doing going through the
Sublime Text features I showed you how to do a multiple line selection.
So what we're gonna do is we're going to return twice and I'm going to paste in
five heading one tag's kind of like this.
OK so we've got one two three four five six so here we're gonna go we're gonna hold control and click
1 1 1 1 I'm gonna hit backspace type open to her control asked to save up to and then click off and
then control us to save.
We're gonna do the same thing here.
So we're gonna do whole control and click right before the one hit backspace and then hit three and
click off and then control us.
Same thing here.
Hold control click right before the one and delete and before click off.
Same thing here.
Backspace at five and then we're going to do it again.
Here for six.
And then that will be all the heading tags and I want to show you all these because these are all commonly
used in Web sites.
So you got heading one heading to head in three and in four in five and head in six.
I want to right click and inspect and you can see right here.
OK.
Well heading tag heading to head in three head in four and five and in six.
You see how easy that is to identify.
OK.
This is heading one head into his head in three.
This is out in four.
It's like a label.
You're making it really easy for another developer to find your code and easily edit quickly and that's
what you want to do you want to make it simple for everybody.
Build a Web site like someone else is going to take over for you even if it's your own Web site because
you may eventually get a developer and you want to make it easy for them.
Trust me.
OK so that's the head in tag.
Now we're going to talk about the paragraph to it.
So I'm going to do a left bracket exclamation point we're going to come at this out paragraph tag.
OK.
So we're going to do a left bracket and a.
Right bracket left bracket backslash and I'm a type and this is a paragraph tag control as to save right
click open in the browser and you can see there's the paragraph tag very nice.
Now we're going to talk about the break tag so the break tag is right there but I'm on the left bracket
exclamation point let's come at this out break tag.
So think of the break tag as a return on word like twice so if you were to return twice and get that
space.
That's a break.
So the break tag basically gives you that space so you can't see it right now.
But let me put this highlight the paragraph tag and put it below and then right click open the browser
and then you can see the space.
Yep.
So there's the space right there.
So you see the default space is like this or that that that and that and that and they're all evenly
spaced even on the top.
But once I had the break it's like two returns and sort of one.
So it's that's an easy way to kind of create space if you need space.
Next up.
So you can delete this paragraph I just want to show you that controls to save that please.
And then I'm in return and we're gonna do the anchor tags so we're going to left bracket a and then
I would type in each ref and it should auto fill for you right here so I'll show you what it is right
there.
So do an equals and then quotes and we're going to do a hashtag which means it will go to a blank link
and I'm going to do a left bracket and a backslash and then I'm a link right here somewhere right click
open the browser and when I click on that it's not going to go anywhere.
OK.
That's the anchor tax you're going to uses a lot for navigation and anywhere in the page where you want
to link to another page anchors your way to go.
OK.
So let's forget to comment that out so let's come out out out real quick anchor tag.
OK.
And then I return again and let's comment this out image tag.
OK.
And I'm going to do left bracket I AMG and I'll do enter.
So will do I AMG space s our C and this is an open tag it doesn't close it's just opened so we'll do
I don't have an image but if I hit control s right click open in the browser and I open another tab
here and I go to Google dot com and I right click on the Google logo and copy image location.
Go back to Sublime and paste that in right click open the browser again.
Now I have the Google logo here.
OK so let's close off Firefox for me.
I'm going to do that.
OK.
Now I'm going to show you what it looks like when you break when you have a broken link where it's not
loading what you want.
So you know how to debug this guy's salt right here you see this it's a little square with a broken
image on it saying OK look guy or girl you broke the image.
And so it's not working.
Now if I right click and inspect you can see right here.
OK.
Pen or miss and the G.
And I think
we can fix it in real time.
Now that's not going to save because this is just simulating what you're updating but that's one way
to figure it out.
Because if I if I do that and go down and it's not working.
OK well that's possibly an error.
And
OK.
So now we obviously know what we did.
So I'll just do that and then we're going to do the.
Button tag.
So let's comment that our first button tag.
We're going to do left bracket button right bracket left bracket backslash.
OK.
And I'll do this is a button control us right click open in the browser.
This is a button right there.
Beautiful.
And the final tag that I'm gonna show you in this video is the DB tag so the div tag is used quite a
bit all over the place and more so back in the day than now.
But it's still used.
I use it all the time myself.
So the div tag let's return a couple times put a line 44 and have been and then let's add an H1.
This is the div tag.
So think of the div tag as a container where it's going to hold elements for you.
So right here you can see this is the div tag.
And if I expect this and I go in here and I click on the div OK.
This is the div tag.
So we have the H one in there and let's close this off for a second and let's add another tag in there.
So let's give it a break.
And we're going to give it a paragraph.
This is a paragraph and then button.
This is my button control us to save right click open the browser and you can see all this inside the
dev.
So if I inspect that
I click on there you can see this is the div tag break.
And let me take the breakout for a second I might add delete and now everything bunch is closer together.
So the div tag is used for a variety of things but one of the main purposes is to combine content together
and then you can give that a property and CSX give it a size a background and you can maneuver all that
content inside the div tag.
So it makes it really easy to move things around.
So that's all I have for this video.
Thanks for watching us.
In the next video.