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're going to be looking at how we can refine searches to find relevant information more efficiently.

And we're also going to see how we can add hyperlinks to a web page.

Welcome to today's lesson from the unit "Developing for the web." This lesson is called "Using search and web navigation effectively." And by the end of today's lesson, you'll be able to refine search queries to find relevant information efficiently.

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

Search operator, search operator, a special symbol or word that helps you refine or focus your search results when using a search engine.

Hyperlink, hyperlink, a clickable link that takes you to another web page, a section on the same page, or a different website.

Look out for these keywords in today's lesson.

Today's lesson is broken down into two parts.

We'll start by refining search queries, and then we'll move on to create hyperlinks.

Let's make a start by refining search queries.

Animals are grouped into different classes based on the way in which they are the same.

How are these groups different from each other? Fish, mammals, amphibians, birds, reptiles, and arthropods.

Maybe pause the video whilst you have a think.

Did you manage to identify how they were different from each other? Fish live in water, and they're cold-blooded.

Mammals can be found in water or on land, and they're warm-blooded.

Their young drink milk.

Amphibians can be found in water or on land and are cold-blooded.

Birds have feathers and can fly.

Reptiles can be found on land and are cold-blooded.

Arthropods have more than four legs and are cold-blooded.

Imagine if you ask, "Which animals have feathers?" There is only one group that has feathers, so the answer would be birds.

Imagine if you ask, "Which animals live in water?" What would the answer be? It could be multiple things.

It could be fish, amphibians, and mammals.

The broader the question that is used, the more results that are returned.

Online searching works similar to this example.

Sometimes, you can get too many or too few results for what you are looking for.

If you are trying to find something specific, you can narrow the search by asking a more complex question.

How could we expand this question, "Which animals live in water?" to remove fish from the answer? Maybe pause the video whilst you have a think.

Maybe we could expand it to say, "Which animals can live in water AND can live on land?" Using AND in the question means that both amphibians and mammals are returned.

Fish are excluded as both parts of the question do not apply to them.

Fish can live in water but do not live on land.

In an online search, using AND in your search means that it will only return results that match both of your keywords.

This narrows down the results.

So here you can see we have the example amphibians and mammals.

How do you think you could get more results instead of less? What word could you add to this question to have both mammals and arthropods as the answer? "Which animals drink milk as babies have more than four legs?" That's right, we could use the word OR.

In an online search, using OR in your search means that it will return results that match either of your keywords.

This broadens the results.

So here we have the example mammals OR arthropods.

How do you think you could show that you want a certain keyword removed from your search results? What word could you add to the question to only get arthropods as the answer? "Which animals do have fewer than five legs?" That's right, NOT.

Using NOT gives results that do not match what you have asked.

Here's the example, jaguar NOT car.

Sometimes when you search for something, you get lots of results that aren't what you want.

The NOT search operator helps to remove things that you don't need.

Izzy says, "If I search for 'jaguar,' I might get results about both the animal and the car.

If I type 'jaguar NOT car,' it will only show results about the animal." Alex says, "Using NOT is like telling the search engine, 'I want this, but not that!'" That's exactly right, Alex.

Time to check your understanding.

Match the search operator to its definition.

Pause the video whilst you have a think.

How did you get on? Let's have a look at the answers together.

NOT excludes results that contain a specific keyword.

AND shows only results that include both keywords.

OR includes results that contain either of the keywords.

Well done.

AND, OR, and NOT are called search operators.

When a search engine can return billions of results based on a single keyword, operators are helpful to make your search more specific.

Phrase searching is when you use quotation marks in your search.

This will only return results that have that phrase spelt in exactly that way and exactly that order.

So here we have the example "Edinburgh Castle" all in quotation marks with a space in between the two words.

Search engine technology keeps evolving.

It's become very advanced, and the algorithms can now spot common phrases within search terms. Phrase searching is still useful and will provide more accurate results than just letting the search engine try to link the keywords together.

It's best to keep your searches clear and focused to find the best information.

Adding too many words can make your search too specific, reducing the amount of useful results that you'll get.

Instead, use search operators to refine your searches and get the results that you're looking for.

True or false? The best way to get more useful search results is to add as many words as possible to the search bar.

Pause the video whilst you have a think.

That's right, that's false.

Adding too many keywords can make the search too specific, which can exclude useful results.

Use search operators instead.

Okay, we've come to our first set of tasks for today's lesson, and you're doing a fantastic job, so well done.

Search for a term and record the number of results.

Refine your search using the search operators.

Record the number of results for each search in the table provided.

So you can see the table asks for the search term and the number of results, then the search term with AND and the number of results, then the search term with OR and the number of results, then the search term with NOT and the number of results, and lastly, the search term with quotation marks and the number of results.

Pause the video whilst you complete the activity.

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

Remember, you may have searched for something totally different, so your search terms may look different to mine.

So, in the first one, we have chocolate cake recipe, and we have 15,400,000 results.

Next time, we're gonna use the AND, so we've got chocolate cake AND frosting.

This reduces the results to 8,700,000.

Next, we're gonna use OR, so we have chocolate cake OR vanilla cake.

This has increased the number of results to 22,300,000.

Next, we've used the NOT, so chocolate cake NOT nuts.

This has taken the search terms down to 10,500,000.

And then lastly, we have quotation marks.

So we've put "chocolate cake recipe" all in quotation marks, and this has returned 5,200,000 results.

For part 2, which search gave the most results? For part 3, which search gave more specific and useful results? For part 4, how did the NOT operator change the results? And 5, why would search operators be helpful in real-life searches? Pause the video whilst you answer the questions.

Let's have a look at some sample answers together.

Which search gave the most results? So in my case, it was chocolate cake OR vanilla cake.

Was your OR search the one that provided the most results? Which search gave the more specific and useful results? So my "chocolate cake recipe" in quotation marks gave the most specific results.

How did the NOT operator change the results? Using the NOT operator removed results with the word I didn't want.

For example, chocolate cake NOT nuts gave me fewer results because it excluded recipes with nuts.

Why would search operators be helpful in real-life searches? Search operators help me find exactly what I need faster by narrowing down results or removing results that I don't want.

Okay, we're now moving on to the second part of today's lesson, where we're going to create hyperlinks.

Search engines work by using crawlers to index web pages.

Crawlers use hyperlinks to travel from one page to another.

Web pages that have hyperlinks on them are ranked more highly by search engines.

A hyperlink is a clickable link on a web page that takes you to another web page, website, or section of the same page.

It can be text, an image, or even a button.

When clicked, it directs you to a different page or resource.

So this hyperlink takes me to the Oak National Academy website.

Hyperlinks are often highlighted in blue or underlined, but you can change how they look on a web page using CSS.

When you click on a link to a website, you're using a hyperlink to go directly to that site.

Sam says, "Hyperlinks are how we navigate on the internet." Time to check your understanding.

True or false? Hyperlinks can only take you to another web page.

Pause the video whilst you have a think.

That's right, this is false.

Hyperlinks can also take you to other sections of the same page.

For example, you can use a hyperlink to go to a table of contents.

To add a hyperlink to a web page using HTML, you use the <a> tag.

Here's the syntax of the <a> tag.

So we open our bracket, <a href = and then we place the URL in quotation marks.

So that's the web address, which normally starts with http or https.

We then close the bracket, and then we put in the Link Text, and then we close the <a> tag.

Aisha says, "<a> stands for anchor." href stands for hypertext reference.

So, the <a> or anchor tag opens, and href is the hypertext reference.

So here's the completed example.

This hyperlink will display the text "Click here to visit RPF." When clicked, this link will take you to https://www.

raspberrypi.

org.

HTML syntax is important.

Don't forget the correct spacing and symbols.

The URL, or Uniform Resource Locator, is the web link.

It's a unique, specific address for a web page.

Notice that the href and web link are all inside pointed brackets for the opening <a> tag.

The link text is what users will click on to follow the hyperlink.

So here, the example is "Click here to visit RPF." This will create a clickable link that will take the user to https://www.

raspberrypi.

org when clicked.

When adding hyperlinks to your web page, accessibility is important.

Alex says, "Accessibility means making sure that everyone, including people with disabilities, can use and enjoy websites." Hyperlinks should be easy to see.

They are typically blue and underlined.

Make sure your hyperlinks stand out against the background so users can identify them easily.

The link should make sense.

It should be clear where the user is navigating to when they are using your link.

Aisha says, "This is helpful for people using screen readers or other assistive technologies." Time to check your understanding.

Which hyperlink is more accessible? Pause the video whilst you have a think.

That's right, the top hyperlink is more accessible.

"Click here" is vague, whilst "Visit our homepage for more information" tells the user exactly what to expect when clicking on the hyperlink.

Well done.

Izzy says, "So we can make text into hyperlinks.

What about images?" To use an image as a hyperlink, we can replace the link text with an image tag instead.

So here, you can see "Click here to visit RPF" is the link text.

The image, which is berry.

jpg, can be placed inside the hyperlink tags to become a hyperlink.

So you can see now we have <img src="berry.

jpg">.

This makes the image of a raspberry turn into the hyperlink.

This way, the user can click on the image to use the hyperlink and visit a web page.

An external hyperlink is a hyperlink that takes the user out of the website they are currently browsing and onto another website.

Note that an external hyperlink must use a full URL address because it links to a completely different website.

So here, the raspberrypi.

org URL is a full URL address 'cause it contains the https and the www.

part.

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

Note that the URL of an internal hyperlink uses a relative path instead of a full URL address.

They're usually shorter, and we don't use the www.

part.

So here, you can see the URL link is info.

html.

Just like with other hyperlinks, internal hyperlinks can use text.

So here's an example using text, which says "Go to the info section." And they can also use image tags.

So here, we're using the image info.

jpg as the hyperlink.

Time to check your understanding.

Would this hyperlink take the user to an internal or external web page? Pause the video whilst you have a think.

That's right, the hyperlink would take the user to an internal web page called aboutus.

html.

That's because it doesn't contain the full URL path.

Okay, we're moving on to our final task of today's lesson.

Terry has asked you to finish building his travel blog.

Open the starter code at oak.

link/terrys-travel-site.

In index.

html, add hyperlinks for the web pages Scotland, Poland, and Algeria.

In scotland.

html, poland.

html, and algeria.

html, add a hyperlink to the image world.

png that returns the user to index.

html.

Pause the video whilst you have a go at the tasks.

How did you get on? Did you manage to add some hyperlinks to your page? Well done.

Let's have look at some code together.

Aisha says, "I added the internal hyperlinks to each of the web pages, and then I tested them out to make sure that they worked." That's a really good tip.

Make sure you do test your hyperlinks.

If you want to open the solution code, you can go to oak.

link/terrys-travel-site-solution.

Let's have a look at the code on line 11.

So, line 11, we have a <p> or paragraph tag.

We then have the <a href> tag, which is linking to the page "scotland.

html" in quotation marks.

We then close the bracket.

We're using the word Scotland as the text that will be linked.

And then we're closing the <a> tag and we're closing the paragraph tag.

This is repeated on lines 12 and 13, but this time for the pages poland.

html and algeria.

html For part 2, you were asked to add internal hyperlinks for the web pages Scotland, Poland, and Algeria, this time using the image as the hyperlink.

Aisha says, "I added this code above to scotland.

html, poland.

html, and algeria.

html." So on three different pages.

"The image link works great! And it's easy to jump between the pages now." well done, Aisha.

Remember, you can open the solution code at oak.

link/terrys-travel-site-solution.

So on line 10, we have a <p> tag.

We then have the <a href> tag, which is going to index.

html.

We then have the image source tag, so <img src="world.

png"> We close the <a> tag, and we close the <p> tag.

Remember, if you want to make any amendments to your code, you can pause the video and do that now.

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've learned today.

Search terms should be carefully chosen as they affect the information that you find.

Search operators can be used to help refine and focus search results when using a search engine.

Hyperlinks are used to navigate a user between web pages and websites.

Crawlers use hyperlinks to travel from one page to another.

Web pages that have hyperlinks on them are ranked more highly by search engines.

I hope you've enjoyed today's lesson, and I hope you'll join me again soon, bye.