Lesson video

Hello, my name is Mrs. Holborow and welcome to Computing.

I'm so pleased you've decided to join me for the lesson today.

In this lesson, we are going to be looking at how you can create your own custom website, adding your own content, navigation, and styling.

Welcome to today's lesson from the unit Developing for the Web.

This lesson is called Creating a Custom Website, and by the end of today's lesson, you'll be able to create a multi-page website with working navigation.

Shall we make a start? We will be using these keywords in today's lesson.

Audience.

Audience, the group of people who watch, listen, or read something such as a website.

Purpose.

Purpose, the reason why something is done or created.

Navigation.

Navigation, how users move around a website using menus, links, and buttons to find information easily.

Testing.

Testing, checking if something works correctly and as expected.

Look out for these keywords in today's lesson.

Today's lesson is split into three sections.

We'll start by planning website content.

We'll then move on to add content and website navigation, and then we'll finish by styling and testing a website.

Let's make a start by planning website content.

A website is a set of web pages located under a single domain name.

Websites are an effective method of sharing information with different audiences and for different purposes.

This is because websites provide a globally accessible, cost effective and easily updateable platform for communication.

Websites are always created for a purpose.

People have lots of reasons for creating websites.

If you make a website, you need to think about who it is for, the audience, and why you are making it.

What is the purpose? An audience is a group of people who will use the website.

The website will be designed to attract a specific audience.

The audience may be defined by such things as age, interests and needs.

The purpose is what the website is for.

Some websites may be created to inform or educate.

Others may be for entertainment.

The purpose is the reason you are making the website.

Charities use websites to share information, raise awareness and engage supporters.

Website headings must have impact because they are the first thing visitors notice.

Here's an example.

Act now, help families rebuild after the storm.

A strong heading quickly communicates the main idea.

Making information easier to scan and understand.

A well-planned website ensures that the content on each webpage is clear and presented in a logical and organised way.

Content on a webpage should be relevant to the topic and audience.

Maintain information that is correct and engaging.

Be well structured and easy to understand.

When you are planning a website, you need to think carefully about which web paged link together to help the user move around the site easily.

A website's design usually starts at the top with the homepage.

A homepage is the main or introductory page of a website.

It's usually the first page a user sees.

Here we have an example, homepage heading.

First paragraph with overview of information about the site.

Heading for some navigation links and then some navigation to links on page one and page two.

It usually provides a heading, an overview of the site's purpose, navigation options, and easy access to other pages.

We can then create branches that lead from the homepage to other pages.

These are called subpages.

Subpages are additional pages within a website that provide more detailed content or specific information.

A structured diagram for a charity website might look like this.

So we have the homepage at the top of the structure diagram, and then we have two subpages, one which is called About Us and the other, which is called Our aims. An about us page should provide information about the charity's mission, values, and impact.

And Our aims page should outline the charity's specific goals and objectives.

The page should be clear and simple to follow.

Bullet points may help make the text easy to read and provide impact.

The basic structure for a homepage may look like this.

So remember we've got the homepage title, a bit of text that outlines the charity, title of navigation, subpage one hyperlink and subpage two hyperlink.

The structure of the subpage may look like this, so the subpage may have a heading.

It may have a subheading.

We may have a paragraph of text that is relevant to the page.

We then may have some hyperlinks, so for example, click the image below to return to the homepage.

A subpage with bullet points may look like this.

So we have the subpage two heading.

We have three bullet points, and then we have another hyperlink to take you back to the homepage.

Time to check your understanding.

True or false? A homepage is usually the main or introductory page of a website.

Pause the video whilst you have a think.

Did you select true? Well done.

The purpose of a website is A, the reason why the website was created.

B, a group of people who will use the website, or C, writing with a strong heading.

Pause the video whilst you have a think.

Did you select A, well done? The purpose of a website is the reason why the website was created.

Okay, we are moving on to our first task of today's lesson, and you're doing a fantastic job so far, so well done.

I'd like you to plan the content for a custom website.

This should include the main homepage and two sub pages.

Choose your favourite charity or download the example charity profiles from the additional materials and choose one of these.

Then plan your content.

What is the purpose of your website? Who is the audience for this website? What heading will you use on your homepage? What information will be on your two sub pages? Write a heading and some general information for each subpage.

Pause the video whilst you complete the activity.

How did you get on? Let's have a look at a sample plan together.

Remember, you may have chosen your own charity, so your plan may look different from this.

For part one, you were asked to explain the purpose of your website.

The purpose of my website is to promote the Our Air charity.

It will give users a lot of relevant information all about the charity.

Two, who is the audience for this website? The audience of the website is very wide.

It must be suitable for users of all ages because the charity believes everyone can help make our air cleaner.

Part three, what heading will use on your homepage? The heading for the homepage will be Our Air.

This will let people know the name of the charity straight away.

The heading will be large so that it is clear and easy for the users to read.

For part four, what information will be on your two sub pages? Write a heading and some general information about each subpage.

I will have subpages with the headings About Us and Our Aims. The About Us page will have a subheading, take a deep breath and then give some details about the charity and why their mission is important.

The Our Aim sub page will have a bullet list that outlines the three most important aims that the charity has.

Remember, if you need to pause the video and go and add any detail to your answers, you can do that now.

We are now moving on to the second part of today's lesson where we're going to add content and website navigation.

In HTML, tags are special words inside angle brackets that tell a web browser how to display and structure content.

So here's some example of some HTML code with some tags.

A heading is a piece of text that is made larger and bolder to act as a title for a section of a webpage.

So here on line four we have the h1 or heading one tag, and you can see that this is made the text, this is a heading display bigger than the rest of the text on the page.

Headings can be added to a webpage using the h1 tag.

It automatically adds space before and after the text.

The P tag is used to create a paragraph of text.

Again, it automatically adds space before and after the text.

The UL tag is used for creating an unordered list.

It's used to create a list of items where the order doesn't matter and uses bullet points.

So on line four we open the UL tag.

On lines five, six, and seven, we have the LI or list item tags for each bullet item and then on line eight we close the UL tag.

Each item in the list is placed inside the LI or list item tag.

The image tag can be used to add images to a webpage.

The source attribute must be used within the tag to add an image.

So the syntax for this is IMG or short for image SRC, which is short for source.

And then in quotation marks, we put the name of the image.

Note, that the exact name of the source image must be used including the extension.

So in this case the extension is JPG.

Images can be sized using percentages.

In this example, the width has been set to 50%, so the image will be half the width of its window.

Using percentages allows images to adjust to different screen sizes automatically, so your webpage will look good on both mobile and computer devices.

A hyperlink is text or media.

For example, an image that when clicked takes a user to another specified location.

To add a hyperlink to a webpage using HTML, you use the A tag.

Here's an example of the syntax.

A space href is equal to and then we place the URL in the quotation marks.

We close the bracket and then we put in the link text.

This is the text that will appear for the user to click and then we close the A tag.

Remember, A stands for anchor.

Internal hyperlinks are special links on a website that let you jump to different pages within the same website.

This is how a user navigates between different webpage on a website.

If you are using an internal hyperlink, you don't need the full URL, so you don't need the part that says HTTP or HTTPS www.

Just like with other hyperlinks, internal hyperlinks can use text, so like this top example here, but they can also use image tags.

To do that, we just place the image tag where we would put the link text in the hyperlink.

Here, the image info.

jpeg is being used as a hyperlink.

Time to check your understanding.

True or false.

Hyperlinks cannot be added to images on a webpage.

Pause the video whilst you have a think.

That's right.

It's false.

Why is it false? Because hyperlinks can use text or image tags.

Here's an example of a hyperlink with an image tag.

Which tag is used to create an unordered list? Is it A, B, or C? Pause the video whilst you have a think.

Did you select C? Well done.

UL is used to create an unordered list.

Okay, we've come to our second set of tasks for today's lesson.

Open the link oak.

link/charity-website-template and look through the three template HTML files.

These files have the example code you need to complete this task.

For part one, add a heading, introductory paragraph and navigation subheading to index.

html using the tags provided.

For part two, complete the internal hyperlinks in index HTML to create text navigation links to subpage one and subpage two.

For part three, add your content to subpage one and add an internal hyperlink to index html using a suitable source image from the examples.

For part four, add your content to subpage two and add an internal hyperlink to index.

html using a suitable source image from the examples.

As a tip, add extra tags as necessary to customise your website.

Pause the video whilst you complete the activities.

How did you get on? Great work.

For part one, you were asked to add a heading, introductory paragraph and navigation subheading to main.

HTML, using the tags provided.

So you can see on line seven I've added a heading, which is called Our Air.

And then on line eight I've started a paragraph tag, which is an introductory paragraph for the website.

On line 10, I have a h2 or heading two tag which says, explore our website.

For part two, you are asked to complete the internal hyperlinks in main.

HTML to create text navigation links to sub page one and sub page two.

On lines 11 and 12, you can see an example of these hyperlinks.

So we have a paragraph tag and then the a href tag and we have subpage1.

html, and in the link text we have about us, we close our A tag and we close our P tag.

That's repeated on line 12, but this time the link goes to subpage2.

html and the link text says Our Aims. For part three, you were asked add content to subpage one and in an internal hyperlink to main HTML using a suitable source image from the examples.

So you can see on line 14 we have a hyperlink, which goes to index.

html.

Where the link text would be, we have an image tag, so we have image source is equal to Our-Air-Logo.

png and we're setting the width of that image to 10%.

For part four, you were asked to add content to subpage two and add an internal hyperlink to main HTML using a suitable source image from the examples.

So again, this is really similar and we've used the same link using the same image.

If you want to go and see the full solution, you can go to oak.

link/charity-website-solution1.

Okay, we are now moving on to the final part of today's lesson where we are going to style and test a website.

Aisha says, I like the content but my website looks a bit dull.

The style and appearance of a webpage can be improved with a CSS file.

CSS is short for cascading style sheets, A CSS file is stored outside of the HTML code in a separate file.

CSS style sheets must be saved in the.

css format.

A CSS style sheet defines how HTML tags and properties should be styled when viewed on a webpage.

For example, this is how a heading looks.

So the CSS file sets the colour of the text.

The HTML document defines the heading and the text that will be in the heading.

To use the CSS sheet in a HTML file, the link tag should be used.

Notice that the link tag goes inside the head tag of your HTML document.

Alex says, "Without this, the webpage won't use the CSS style sheet." Using CSS means that a web designer doesn't have to manually change the formatting of every line of HTML.

The CSS can be reused across many different webpages.

Once CSS is set up, making changes to a webpage style becomes quick and easy.

Every rule in CSS is made up of two parts, the selector and the declaration.

The selector is the part of the HTML that you want to style.

In this example, it is h1.

The declaration is inside the curly brackets.

It gives instructions for the styles that should be used.

This declaration states the background colour, font family, font colour, and size that should be used for heading one tags.

It's important to test a website after it's built to make sure it works correctly and is easy to use.

This could include testing that hyperlinks navigate to the correct location, the style and look of the website displays as expected.

Testing helps you identify and fix errors and improve the user experience for website visitors.

Time to check your understanding.

True or false.

A CSS file is stored outside of the HTML code in a separate file.

Pause the video whilst you have a think.

That's right.

A CSS file is stored outside of the HTML code as a separate file.

Time to check your understanding.

Fill in the blanks using the words provided.

Pause the video whilst you have a think.

How did you get on? I'm sure you managed this.

It's important to test a website after it's built to make sure it works correctly and is easy to use.

Testing helps you identify and fix errors and improve the user experience for website visitors.

Okay, we are now moving on to our final set of tasks for today's lesson.

In this task, you'll continue to build your website with the code you completed in Task B.

You'll also be working with the file style-sheet.

css, which will be in your code.

For part one, in each HTML file, add the CSS file style-sheet.

css to the link tag.

For part two, open the style sheet CSS file and modify the contents to provide suitable styling rules for your web pages.

For part three, test your website by checking that each hyperlink allows navigation between the webpages and that the webpages display as expected.

Tip.

If you have some time, try out different styling in the CSS to see what works best for your website and webpages.

How did you get on? Did you manage to link the CSS style sheet to your webpage? For part one, you were asked in each HTML file to add the CSS file link.

Aisha says, I added the CSS file style-sheet.

css to the link tag in all three of my web pages.

So here's an example of what that looks like.

On line four.

Open tag, link rel is equal to style sheet, href is equal to style-sheet.

css, close bracket.

If you want to see this working as a solution, you can go to oak.

link/charity-website-solution2.

For part two, you are asked to open the style-sheet.

css file and modify the contents to provide suitable styling rules for your web pages.

Aisha says, "I modified quite a few rules in the CSS files to style my webpage, so that could have been things like changing the font style or changing the font colour." Remember to consider your audience and purpose of your website when changing the style.

For part three, you are asked to test your website by checking that each hyperlink allows navigation between the webpage and that the webpages display as expected.

Aisha says, "I tested my website and was really pleased that all the hyperlinks worked.

It was easy to navigate around the page and the webpages were styled as I expected." Did your website work as you expected, or did you have to go and fix anything? Okay, we've come to the end of today's lesson and you've done a fantastic job, so well done.

Let's summarise what we have learned in this lesson.

A well-planned website ensures that the content on each webpage is clear and presented in a logical and organised way.

The A tag is used to interlink webpages and help users navigate a website easily.

CSS can be used to star websites and make webpage look more attractive and consistent.

Testing helps you identify and fix errors and improve the user experience for website visitors.

I hope you've enjoyed today's lesson and I'm sure your websites look absolutely fantastic.

See you again soon.

Bye.