Lesson video

Hi everyone, my name is Mrs. Welsh.

Today we'll be learning about webpage layouts using CSS divisions.

Don't worry if this is something completely new to you, I'll be here to guide you through each step.

So let's begin today's lesson.

Welcome to today's lesson from the unit, HTML programming projects.

This lesson is called webpage layouts using CSS Divisions.

By the end of the day's lesson, you'll be able to design a webpage with sections and format them individually.

Let's have a look at those keywords.

Division, a section of a webpage used to group items. Class, an identifier that can be applied to a collection of HTML elements.

We'll be using these words throughout the lesson to make sure you know what they are.

Let's jump into it.

During today's lesson, we're going to look at how divisions are created on webpage.

We'll be able to explain how divisions are formatted and we are going to format a webpage with divisions.

So starting off with being able to describe how divisions are created on webpages.

Let's have a look at these two webpage examples.

Which website is easier to read A or B? You need to pause the video so you can take a closer look.

Do so now.

So which website do you think is easier to read? So let's take a look and the answer is A.

Why is it A? The content is divided into clear sections and the use of background callers and borders helps separate different parts of the webpage.

On website A, it has been split into sections that are called divisions.

Divisions are created using the div tag and divisions help us organise content on a webpage.

They act as a container for other elements, helping to group them content together.

So it says here we've got the main heading, the paragraph, introducing the novel, and we've got two divisions each with a paragraph on the same content but using different themes from the book.

So let's just check to see if we can recall what we have discussed.

So can you fill in the missing words.

Question one, web pages can be split into sections called, and fill in the missing word.

And question two, divisions help two fill in the missing word, content on a webpage.

You need to pause the video so you can read through the questions and think of the answer, do so now.

Let's take a look.

What did you get? We should have for question one, web pages can be split into sections called divisions.

Okay, so the keyword there is divisions.

And question two, divisions help to organise content on the webpage.

Did we get both of those? You may have used a slightly different word in question two than organise, but as long as it is talking about how we group content together or organise the content, then the keyword that you've used is fine.

So good job.

So how did we do? Did we get both of those correct? If so, excellent stuff and let's move on.

So a webpage is not just a single block of content, which is made up of different sections called divisions.

Sections could include the header, which would be the website's title, navigation bar, a main content area, a sidebar, and this is optional for navigation or additional content and a footer for copyright notices or social media links.

Why would we use divisions? Divisions separate content into sections, making it easier to organise and style different parts of a webpage.

They improve readability as content is easier to follow when divided into sections and they make applying styling rules easier as we can apply different CSS styles to each division.

Divisions can also help with responsive design because they can be adjusted to fit different screen sizes.

Let's have a look at another question.

What is the purpose of using the <div> tag in webpage design? Is it A to organise and group related content together? B, to automatically apply styling to sections of a webpage, or C To improve website speed and performance.

Can need to pause the video to read back through the question and decide on your answer.

Do so now.

Okay, what did we get? What do you think the answer is A, B or C? The answer is A, to organise and group related contents together.

Did you get that correct? So the division tag helps us to organise and group related content together and it says there, <div> tag is used to separate and organise content into sections, making it easier to structure and style.

So if you've got that correct, excellent work.

And let's move on.

Let's take a look at how we can use divisions to structure a webpage.

On the slide, we've got a division for the heading.

So the first division contains heading one, the Hunger Games themes.

And then under that we have got a division that's holding content, and this is holding the paragraph about novel.

And then we also have a section within a section.

So we have another division within that division and that is holding the different themes.

And in there we have got the heading, Survival and the paragraph.

And making sure again we have closed all the division tags that we have opened.

To make divisions easier to identify, they can be given a name or an ID.

Giving the <div> tag a unique name, makes it easier to create hyperlinks the links to other parts of the webpage.

And underneath there we can see an example of how we can add a unique name to a division to identify it and how we would use that in the code itself is shown on this slide.

We have got <div> ID equals theory topics and then we've got the content underneath.

So we can see here we've got the H2 heading and a paragraph before the division is then closed again.

And we can refer to this theory topics ID if we were going to add some hyperlinks in.

So true or false, a <div> element automatically applies styling to a webpage.

Is that true or false? You need to pause the video so you can read back through the question and decide on your answer, do so now.

So what do we think? The answer is false.

Division tag only groups content.

You would need CSS to actually style it.

So did you get that correct remember division tag or the division element is only organising your content.

Let's move up, task A.

Going to open up the Oak National Academy website and take a look at the key stage four subject page.

What I want you to do first of all is write down at least three sections you can see on the webpage.

This may be the header, the main content, a sidebar and a footer.

And for the second part, I want to explain why dividing a webpage into sections is useful.

If you need to pause the video now so you can read back through the task and complete it, do so now.

So let's take a look at a possible solution.

So for the first question, writing down at least three sections you can see on the webpage.

We've got a header, and this is the top section of the website that contains the logo, the search bar, and the navigation menu.

We've got the main content area and this is the central part of the webpage that displays the list of the key stage four subjects.

And each subject is presented in a clickable box, making it easy for navigation.

The boxes as well could be individual sections.

And finally we have the footer, and this is at the bottom of the webpage and it includes links to about us, privacy policy, contact us, and social media links.

Did you get all those different sections? You may have worded it slightly differently, but as long as you have identified there are three different sections on that and you've been able to talk about them.

Excellent stuff and we'll move on to the second part of this task.

So why is defining a webpage intersections useful? It improves readability and navigation as users can quickly find the information they need.

It also makes the webpage accessible and responsive as the sections can be adjusted for different screen sizes, making the website user-friendly on mobile and desktop devices.

So did you get something similar? As long as you've spoken about why having the webpage divided up into sections can help with accessibility and readability and navigation, you've done really well.

So excellent stuff and let's move on to the next part of the lesson.

So now we're gonna be looking at how divisions are formatted.

Divisions can be styled using CSS.

In HTML we use classes to group elements together and apply style rules to them at the same time.

For example, all the text needs to have a certain colour font and alignment.

A class can be created to hold this style rule and it can be applied to HTML elements that contain text.

A class is a label we can assign to a HTML element, for example, heading paragraph or hyperlink.

It allows us to apply the same style to multiple divisions at the same time.

A class is defined in the HTML code using the class attribute and classes are identified by a unique name.

So let's have a look at an example of a class being used on a webpage.

The snippet of code shows the body or the main content of a webpage and the class has been applied to the division that's been created and we can see that with <div class and it's equal to main content> And main content is the name of the class that has been created.

We have then got the H1 tag and the P tag, which also contains some content about the webpage.

And these will use the style rules from the main content class.

So both the H1 tag and the P tag will have the same formatting.

Let's have a look at a question to see what we can remember.

Which of the following best describes the purpose of a class in HTML? A, a class is used to create a new HTML element.

B, a class automatically adds colour to a webpage, or C, a class allows multiple elements to share the same style.

If you need to pause the video to read back through the question and decide on your answer, do so now.

So what answer do you think it is? It is C.

A class allows multiple elements to share the same style.

Did you get that right? You recalled what a class is correctly? If so, excellent job.

Classes can use a range of CSS properties to create style rules.

Common properties can include text styling, background and borders, spacing and layout, and positioning and display.

Let's have a look at how we'd set up a class.

Classes are defined by using a dot before the unique name, and we can see this on the example, we have got a dot before the word section.

We then add the style and rules between the parentheses.

We have then got a list of style rules within this class that is called section.

And we have included the background colour, padding, which adds space above and below each section.

We've added a margin and this adds space between the text and the border.

We have a border which allows us to draw a box around our content and we can have that with a solid line and coloured and we also can have the border radius, which means we can round the corners of our border if we wanted to.

Let's have a look at the example website again, what classes have been created for this webpage? If you want to pause the video now so you can think about what classes you think have been made for this webpage.

Do so now.

Let's take a look.

We have got a header class, and this is with a red background and white text.

We've then got the main content class, which has a light grey background with black text.

And then we've got the theme class, which is the white background with the red border on the left hand side.

So we've got three classes there that have been applied to this webpage.

Did you get all those? You may have called them slightly different things, but as long as you have identified the header at the top, the light grey background, and then the class that is for the themes.

So the white background with the red order, you've done really well.

So let's move on.

To use a class on a webpage, you need to follow these steps.

One, make sure to use <div> tag to create the sections in the HTML code.

Two, create the classes in the style sheet, making sure to give every class a unique name to identify it.

And three, apply the classes to the divisions on the webpage.

Let's take a look at how we go about doing that.

Let's have a look at this example code.

We've got some HTML code where divisions have been implemented already and we've also got classes assigned to them.

So we can see we have got the division for the header, which is is using the class header to style it.

We have then got two divisions for the content which both use the main content class.

So this means both the memory storage and network topologies sections will use the same formatting.

And if we have a look at the style sheet, we have got the two classes created.

The header class, which has got a background colour, which is a dark blue and white text.

We have got the text aligned to the centre and then we've got padding of 20 pixels around that content.

We've then created the main content class and again we've got a background colour and this time it is a light green.

This also has a border.

This is a dark green.

The text has padding of 15 pixels from the edge and it has got a margin of 10 pixels from other content.

So if we apply all of this, our website will look something like the example shown on the slide.

We have got the header class at the top and it says this blue background and white text.

And then we have got our main content class for both memory storage and network topologies.

And that was with a green background with a darker green order around it.

Moving to task B, also I want you to do is fill in the blanks with the correct term.

So for question one, you're going to look at A, the fill in the missing word tag is used to group sections of a webpage.

B, the CSS fill in the blank, property changes the background colour of a <div> C, the, fill in the missing word, property is used to add space inside a <div> tag between the content and the border.

And question two is to write a short paragraph about why a web developer might use <div class= main content> instead of just the <div> tag.

So if you need to pause the video now to read back through the questions and complete them, do so now.

Okay, are we ready to move on and have a look at the answers? Question one A, the <div> tag is used to group sections of a webpage.

B, the CSS background colour property changes the background colour of a <div> tag.

And C, the padding property is used to space inside a <div> tag between the content and the border.

So how did you do filling in those missing words? Did you get them all correct? If so, excellent work.

If not, go back a couple of slides and just make sure you've got those key words embedded.

Question two, write a short paragraph about why a web developer might use <div class= main content> instead of just the <div> tag.

A web developer might use <div class = main content> to apply consistent styles across multiple elements.

By assigning a class they can style all divisions or sections the same way in CSS instead of applying styles to each <div> tag individually.

So did you get that the key points to take away are the fact that it can apply the same style across lots of the different divisions you may have on your webpage.

How did we do with that question? Did we get something similar? If so, good job and let's move on.

So now we're going to look at how to format a webpage with divisions.

A division is a container that groups content together.

It helps to organise the sections of a webpage.

By using divisions we can apply different styles to the sections.

They make it easier to read and maintain the HTML and the CSS code.

When a webpage is split into sections using a division, each section can be assigned a class name.

A class holds the style rules for that element for example, the header remain content and each class has a unique name to identify it.

Let's have a quick review.

True or false, you can use the same class name for multiple divisions, so you can easily apply the same style rules to all of them.

You need to pause the video just to read through the question and decide on your answer, do so now.

What do you think? Is that true or false? The answer is true.

Multiple divisions can share the same class name to make it easy to apply consistent styles.

So for task C, we're going to have a go at implementing some divisions and classes.

So to start with, you need to open up the starter code and you're going to modify the HTML on each webpage to include the following divisions, a header, main content, sub content and footer.

Part two is to create classes in the style.

css file for the following sections.

Main header, main content, sub content, and footer.

In each styling rule, you need to include background colour, text colour, text alignment, the font family, and also the font size.

You need to include a border, padding, and margin.

You do not have to use all the styles for every class.

Pick the ones that are most appropriate.

I would highlight that using background colour and making sure the text is formatted and including some of the padding is what are the most important.

If you need to pause the video now to go back and read through the task again, do so now.

Let's have a look at a possible solution.

Have a look at the CSS for the main content.

We have set up our class with the dots, followed on by the unique name for the class, which is main content.

And then within the parentheses we have got a background colour.

For this class we have set the font family to aerial.

We've added some padding of 15 pixels to provide some spacing.

We have got a margin between the border and the text of 10 pixels.

And we have also included a border rage use of eight pixels, which means we're going to get a rounded corner on our border.

So did you get something similar? Obviously colours and fonts may be slightly different.

You may also have picked slightly different padding and margins, or you may not have included those at all, but have a check when you run it.

If you haven't included padding and margins, you may find your content has ended up looking a little bit squished.

So I would suggest if you haven't done that, go back and add in some padding and a margin.

Taking a look at a snippet of the solution for the HTML code using a CSS class.

So at the top we've got our <div class and header> which means that our H1 theory topics heading, it's going to use the formatting we have set up for the header.

We have then got another division, which is using the class main content.

And this means that all the content within this division, so the paragraphs are going to use the formatting from the main content class.

So if we have a quick look at what a possible solution might look like, we have got our theory topics header, and this has got a blue background with white text.

For our paragraph we've got our main content and we have got this light grey background with a margin between the border and the text.

We've got a border radius set to eight pixels, so we can see the rounded corners on that.

And we've got the font family set to aerial.

So you can see how the text is set to the aerial font.

How did we do? Yours may look different because you may have used different colours and different text, and again, you may or may not have included things like the border radius or maybe the margins, but if you've managed to get it, so you've included the divisions on the webpage itself and you've created some of the classes to include background, colour, text colour, and so on.

Excellent job.

You've done really well today.

So to summarise, web pages use divisions to create sections to organise content.

A class can be created to hold style rules.

Each class will have a unique name to identify it.

You can assign a class name to a division and you can use the same class name for multiple divisions to more easily create a consistent style across a website.

So if you've managed to get through all of those tasks today and you understand how to use CSS divisions to create webpage layouts, you've done really well today.

That's a brilliant lesson.

It is quite tricky when you first start using CSS classes and divisions together on your HTML code.

So I hope you've enjoyed the lesson and you'll join me next time when we look further into using HTML and CSS to create web pages.