Lesson video

Hello, and welcome to lesson five of KS4 HTML AND CSS.

I'm Ben, your computing teacher for this lesson.

And this lesson, we're going to build upon that CSS word you started in lesson four.

Am going to introduce you to things called DIVs, and classes.

Now, all you'll need for this lesson, as usual, is your computer and a web browser.

And you'll also need access to that repl.

it account that you've been using to build upon that laser type website.

Okay, so if you can clear away any distractions that you might have, maybe turn off your mobile phone, and if you got a nice quiet place to work, that would be wonderful.

Okay, and when you're ready, let's get started.

Okay, so specifically, In this lesson, you're going to understand the purpose of DIV tags.

And then we're going to apply knowledge of CSS to DIVs within webpages using classes.

Okay, it's a quite a mouthful, but hopefully that all makes sense by the end of this lesson.

So let's start off with a task.

Okay, and what this task is, allows you to explore some code that I've written for you, and you're going to make a few little changes to see what the effects might be.

Okay, so I'd like you in a moment to head over to task one, on your worksheet to explore the HTML and CSS that makes use of DIVs.

Okay, so you're going to use the repl.

it link on your worksheet to help you answer the question.

So I'm just going to head over to that link now.

So when you go to your worksheet, it'll take you to a page like this, okay.

Now, if you're logged in, you can put the project if you want to be don't necessarily need to for this one, okay.

And it's got a HTML page.

And you'll notice there things called DIV tags there, okay.

And there's also a CSS page here as well, okay, that you can look at and play around with, okay.

Don't forget to maybe run the code as well, to see what it looks like initially, and then follow the instructions to make a few small changes to run it again, and see what happens.

Okay, so let me head back over to the slides.

So what I like to do is pause this now head into a worksheet you'll find the link and just answer the questions and follow the instructions.

And when you've done that, I'll be here when you get back.

Okay, so how did you get on with that? Now, let's just explain what Div tags are for a minute.

Okay, so the division tag, so using the Chevron's that the IV so that we call it a div tag helps us to split the layout of a webpage into sections.

So we can create divisions in our pages by surrounding blocks with these tags.

And you can see that we've got a div class equals and then a name in quotation marks.

So this got section one there, but you can call it something memorable to you.

And then you can see something inside a div tag.

So we've got h1, and it says, my webpage heading and then we close the div tag, okay.

So when you group together HTML elements, using <div> tags, you can ask CSS to make changes to elements within that DIV tag.

So when we were exploring at CSS before, we were making changes to individual tags, so maybe the heading tag and the paragraph tag, and that would apply changes to all of the paragraph tags in our document.

But only the paragraph tags are only the heading tag.

So us some maybe repeat code as well, what we can do is we can put a thing group things together.

So inside that <div> tag, you can see that section one, we might have had a heading, but we might have had also a paragraph and some lists, for example, and therefore we can apply the same set of styling for that whole section.

Okay, so I'm just going to go back to that worksheet, this repl.

it that you were working on just a moment ago, and show you what that looks like.

Okay, so we have this website here, okay.

And when I run it, you can see we've got these blue boxes around them, okay, which is really interesting.

And you can see we've got the groups here, I have instructions to have a look at this <div> tag and click on that you can see it nicely highlights it for me.

So if I click on there, you can see the start and the end of the tag.

So anything in between, as in all of this stuff here.

Okay, that is included encompassed with inside that <div> tag called favourite.

Okay, now, you might have noticed that when we go to our style, we reference that class by using a dot and then favourite, and then we apply all that styling to everything inside that <div> tag.

Okay, and just to prove a point there.

Let's say I wanted to just apply it to h2.

So that styling rather than applied just to the <div> tag, I'm just going to apply it to h2.

So I'm going to go get rid of dot favourite, okay.

Cut out the second and then just go apply the h2 let me do that.

Let me try again.

Okay, and we're going to run it again.

And you can see now that only applying to the headings, okay? And it's not applied to the whole section.

Okay, but if I change that back to dot favourite, I should apply it to both sections go favourite.

Now what we can also do is we say, Okay, well, these are two maybe I want this to be this whole section to be a different colour.

Okay, so maybe I might just call this rather than favourite.

I'm going to call it artists.

Right and then in here, I'm just going to copy and paste all of this, it Worked there we go.

And I'm going to change favourite to artists.

If you notice it is referenced with the dot or anything that so we'll come to this in a moment.

But anything that is referenced by a DIV class, and the name of it, we use in the CSS, we reference it by using a dot, and then the name of the class that you've given it.

All right, so I called it artists, okay.

And you won't notice a difference at the moment.

But now if I change this to, I'm going to to pick a colour red.

And then we go, and now those sections are different.

And we can control individual elements of that of the page in individual sections as well and group them together, like I just showed you there.

Okay, so let me head back over to the slides.

Right, so visualising a page as series of DIVs is really helpful to you when working out how you'd like the look and feel of your page.

Okay, so we can think of DIVs as a way of breaking our page into boxes or containers.

So some, some of the inner DIVs out sorry.

Some of the inner Divs also have another DIV inside them.

Okay, so what I mean by that, if we look imagine, this whole section here to be inside the body, we might have this box here where you can see my favourite foods, pizza and burgers, where you can see the kind of like this, this colour here the this kind of beige colour here, maybe that was called foods.

So DIVs class foods, then inside that we might have one called a div class food heading, for example, or just headings or something like that.

And that way, we can control all that box as being beige.

But just inside that as well, we can do something slightly different with just the heading.

Okay? So what I like to do is explore this concept a little bit more.

So I'd like to go to task two in your worksheet add more CSS and DIVs to achieve different effects on this on the webpage.

Okay, so it's, again, is a case of going to work, she does another link as a different page, the same content, but I put more <div> tags in there.

So make sure you kind of move on from the first one.

And you do follow that separate link on your touch ID.

Okay, follow the instructions.

And you'll get more of an understanding and an opportunity to play around with them in a <div> tags and see what impact that made.

Okay, so again, can you pause your video, now please, and head over to task two, follow the follow the link on the on the worksheet and also answer the questions that you've got there and follow the instructions.

And again, have fun with this.

I hope you enjoy it.

And don't be afraid to just play around with it.

Do follow the instructions and do make the changes that you need to answer the questions.

But then if you just want to think what would happen if I change that value, just definitely try it out and see what happens.

Okay, so pause the video and then unpause when you've done all of that.

Okay, so how did you get some of that.

So hopefully just being a little bit more confident now that you've now apply if you were with two files, and you've applied div tags to your HTML files, and you've also wrapped you've also referenced them in your CSS files.

Okay, so you've looked at using <div> tags, and inner <div> tags to apply styles to sections, but then also an additional style inside that section as well.

So if you've done that really well done.

So the next step, as you can see on the screen is to apply those styles to your laser target website.

So let me move on to the next slide.

So I would like you to reopen your laser tag website on repl.

it and apply <div> tag so that you can achieve different styles for the sections headings and subheadings on your pages.

So you should aim to achieve a similar appearance across all pages, okay, now, my advice to you would be to have a look and use the files that you've just been working on already in this lesson.

So use the CSS from there.

So don't be afraid to open up your your laser tag repl.

it file, and then copy and paste from the CSS we just used in the in the example files and paste them into that into your laser tag website.

And then from that point, you've got kind of the framework to work with.

Okay, so that way, you can then go back to your HTML pages, change the <div> tags and name of them, add the classes to them.

And then you can go to your CSS and just manipulate individual properties that we've used so far, Okay.

And hopefully, you can then achieve the exact style that you want to achieve with your laser tag website.

Okay, so I'd like to again, have fun with this, please, don't be afraid to just change those values around and don't be, don't be worried.

If it doesn't look so great this time time around, it doesn't matter, Okay, just keep changing properties and values here and there.

And eventually you'll achieve that look and feel exactly how you would like it to look.

Okay, So again, pause the video, please go back to that list type website, apply all your styles, and then unpause when you've done that.

Okay, so I'm thinking that your your unpausing because you've now finished your laser type website by applying those DIVs and inner <div> tags, which will be absolutely brilliant.

Thats well done.

We are going to move on a little bit next lesson and look at how we can actually change the layout or the appearance of where on the page there's a <div> tags can appear okay? I'm going to apply something called the CSS box model.

But we will come to that in lesson six.

Okay, so for now all that's left to do is to ask you a question where I've given you the CSS file and the HTML files.

And there were three mistakes that I like to spot.

Okay, so pause the video.

With a save, you can go through the code that you can see on the screen and spot the three mistakes.

And then when you think you've got three, or you can't spot anymore on pause, and we'll go through the answers.

Okay, so did you manage to spot all three? Hopefully you did.

So take a look at this because the next version that you see will be a corrected version.

Okay.

So let's have a look at that.

So first mistake that was in that was that colour was spelt with the U so the UK English version.

Actually, remember that colour must be spelled without the U It must be the American spelling.

Okay, so that was one of the mistakes.

The other mistake that was in that was the lines didn't finish with semi colons.

And they didn't close the curly brace at the end of each, you know, section now.

Okay, so we can see we've got a semi colons and the curly brace because we've opened it there must finish at the end there too.

Okay, so those two mistakes, and the mistakes that were made in the HTML page, where that div and classes were the wrong way around.

So, so its like posted around the DIVS class Okay, so hopefully you spotted those mistakes, and well done if you did.

Okay, so that is all for this lesson.

And again, I hope you've enjoyed it.

And I would really love to see how your websites are starting to take shape.

I'd like to see the latest type website with some CSS applied, and maybe some inner <div> tags.

And if you've done that, please do share them with them, share them with me.

So I would love to see the work that you've done, okay.

And if you'd like to please ask your parent or carer to share your work on Instagram, Facebook or Twitter, tagging@OakNational and using the #learnwithOak.

Okay, so as mentioned, we're going to move on that next lesson, which will be our last lesson in this unit, where we'll apply the box model and really manipulate some of those <div> classes a little bit more, and change the layout and look and feel of your page.

I hope you're looking forward to that and I'll see you next time.