🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

H1, H2 & <P> selectors

Questions

0

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025