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 web page is clear and presented in a logical and organized way.

Content on a web page 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 page is linked 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. And 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're 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 subpages.

Choose your favorite 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 subpages? 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 you 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 subpages? 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 subpage 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 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 web page.

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 web page 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 web page.

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 web page 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 web page using HTML, you use the <a> tag.

Here's an example of the syntax.

<a 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 web page 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 web page.

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 1 and subpage 2.

For part three, add your content to subpage 1 and add an internal hyperlink to index.

html using a suitable source image from the examples.

For part four, add your content to subpage 2 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 customize 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 subpage 1 and subpage 2.

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 to add content to subpage 1 and add 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 2, 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 web page 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 web page.

For example, this is how a heading looks.

So the CSS file sets the color of the text.

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

To use a 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 web page 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 web pages.

Once CSS is set up, making changes to a web page 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 should be used.

This declaration states the background color, font family, font color, 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 use 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 page.

For part three, test your website by checking that each hyperlink allows navigation between the web pages and the web pages 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 web pages.

How did you get on? Did you manage To link the CSS style sheet to your web page? 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 page.

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

Open tag <link rel="stylesheet" href="style-sheet.

css">.

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 web pages." so that could have been things like changing the font style or changing the font color.

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 web pages and that the web pages 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 web pages 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 summarize what we have learned in this lesson.

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

The <a> tag is used to interlink web pages and help users navigate a website easily.

CSS can be used to style websites and make web pages 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.