Welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott, and I'm a trainer here at Bring Your Own Laptop. Uh, this tutorial is for people that are new to web design and have, uh, never used Dreamweaver before. Alright, in this topic we're gonna be looking at something called a tag selector. Now, it sounds kind of code language, but they're quite important to building a website. The overall term is called a selector.
And in part of this tutorial course is we're gonna look at various types of selectors. The first one is called a tag selector. And a tag selector is just a really simple way of telling browsers and Google, um, what the information on your page is. So we're gonna look at it first, and then it'll become clearer. So to start with, we're gonna look at a tag selector called an H one. Now, an H one is just, uh, short for hitting one, and it's essentially telling people like Google search engines what the most important part of your page is.
So, um, in this case, we're gonna make this word here welcome our H one. So if I highlight it by default, it's got, it's called this thing called a P tag. A P tag. Think of a P tag is your body copy. Everything that is just normal text is something called P tag. And that short for paragraph, okay?
So everything you copy and paste into dream movies gets wrapped up in this tag called paragraph. What I'd like to do is change it from paragraph to hitting one. Okay? And what you'll notice down here is that my, uh, tag here has changed from a P tag to an H one, and you'll also notice some of the defaults change. Okay? It's gone to this big black times new Roman, um, size here, okay?
And that's the defaults. We're gonna look at changing that in a later course, okay? But for the moment, this is telling something like Google what the most important bit of information on your page is your heading. Is this word welcome? And this happens quite a bit in word design. We don't want the word welcome because that's not describing our page particularly well.
So in this course, we're gonna be looking at creating a little retro camper website, okay? So for people hiring camper fans, but the, the kind of the, uh, VW combi style. So instead of the word welcome is we're gonna put putting in vintage camper rentals. Okay? I've made sure that I'm really clear in my heading about what this website does. So Google comes along and checks what your H one is and says, okay, your H one, your most important bit of information on this page is the words vintage camper rentals.
Okay? So that will help you rank for this particular word, having things like welcome, uh, welcome to our site will tell Google that your most important part of this page is welcome to your site. And obviously it's not really what you want to rank for. Okay? So you want your website ranking for the right keyword. So we're gonna change this one.
This says vintage Camper renters. Okay? Now, down here, I've got this one here, booking your camper today. Okay? Ideally you should have one h one per page, and you should have, um, say I've got another one that is still quite important. It's more than body copy, it's a little bit more important.
I'm gonna use instead of the P tag, you see here, it's going to be this heading two. Okay? So now you can see down here it's the heading two tag. Okay? So that's called an H two. Okay?
So we've got an H one tag and we've got a H two tag. And we've got lots of P tags, okay, applied. Now we've been working in design view. Now design view is the safe view, and I guess, uh, the nice easy way to get started, but you're gonna have to work in code view as well. So we're gonna work in a split view, so we can see part design and part full code view. So split view just cuts it down the middle, and we can see either side.
Now what you'll notice in the code view is this is what, this is the code that's being created for your website, and this is what the users see. So I see this title at the top here and what the code view sees is, see, I can see it's got this H one tag. Now tags have an open and also a close. You can see over here, here's my slash H one. So in between these two, Google knows that these words are my heading one. You can see down here, these words are my H twos.
Okay, my second most heading and my heading. Um, second most important heading. You can see lots of PT tags. Here's my PT tag. It opens and closes there. Okay?
So the PT tag opens and ptag closes. So as we go through this course, we'll get more, we'll get better and better at looking at tags and better and better at looking at co view. Now, co view can look a bit daunting when you're new. Okay? So you can kind of keep working on this design view, but you need to get comfortable on this side as well, okay? Because what we can do is we can do things like this.
I would like to change my H two to say an H four. Okay? Now I could highlight it here and change it down here, and that obviously be nice and easy, but you need to be aware that you could change it on this side as well. So here's my H two open and my close. So over here I'm gonna change the H two to an H four. Okay?
And I can't forget to change the end as well. So the beginnings an H four and the bottoms an H four. And what happens is I can do one or two things. I can click over this side or I can hit this refresh button. They both do the same thing. But if I click over here, you can see this is now updated to an H four.
You can see down the bottom here in my tag selector, it tells me that it's an H four. So I'm telling Google that this is the most important heading. There is no H two, no H three, and this is the fourth most important heading. Okay, before we finish up, let's change this one back to an H two. So I've highlighted it all here and I'm gonna change it back to an H two. And You'll see over here in the code view, it changes to an H two as well.
So for your website, every page okay. Needs at least one H one. Okay? And this tells Google and the way it ranks that this is the most important information on my page or the most, and this is helps describe to Google what your page is about. Okay? And this should be unique for every single page.
So every single page should have an H one, and it should be different from every other page. Okay? H twos can be important as well. Okay? If you've got a lot of text and you really need to help clarify what the differences in terms of headings, okay? There's not a lot of text on this particular page, but, um, this H one here is definitely required.
H twos can be if you've got enough text when you get down to things like h threes, fours, and fives and sixes. Um, actually once you get past an H three, there's not a lot of value in Google knowing what the extra headings are. Okay? So, um, definitely in H one, H two, if you've got enough text okay. To warrant it. And when you get start talking about h fours and h fives, I wouldn't worry too much about them.
They don't help you in your rankings particularly well. They're a bit, um, they lack a little bit of strength down at those really low heading sizes. Okay? So, cool. All right, that'll be the end of this tutorial. Let's move on to the next one.