Lesson video

Hi everyone, my name is Mrs. Welsh and welcome to the lesson today on "HTML fundamentals." If this is new to you, don't worry about it, I'll be here to guide you through.

So let's get started.

Welcome to today's lesson from the unit "HTML programming project." Today we're looking at "HTML fundamentals." By the end of today's lesson, you'll be able to create a structured web page layout that effectively displays text.

But before we begin the lesson, let's go over some keywords that we'll be using.

Web page.

A web page is a multimedia page of information.

Web browser is a software application used to view, navigate, and interact with web pages.

HTML is Hypertext Markup Language, which is used to define and structure content on web pages.

Tag is a marker in HTML that indicates where different elements of a web page are.

We'll be using these keywords throughout the lesson, so do make sure that you remember them.

Today we'll be looking at describing how HTML web pages are displayed, explain how text is structured on a web page, and finally, creating a structured web page.

So, to start with, we are going to be looking at how HTML web pages are displayed.

So when you visit a web page, your web browser displays video, image, and text on the screen.

But how does the web browser know what to display? A web browser is a tool that reads HTML code and shows the content on your screen.

As I said before in the keywords, HTML stands for Hypertext Markup Language and this is used to create web pages.

HTML is a markup language, which means it sets up the structure of a web page.

This is really important to remember.

HTML is not a programming language like Python or JavaScript.

HTML is a markup language.

And as it says, it means it sets up the structure of a web page.

It does not do all the things a programming language does.

So let's have a quick check to see what we can remember.

True or false? HTML is used to create the content for a web page.

Let's check to see if you've got it right.

And the answer is false.

Okay, why? HTML is used to define the structure of the web page, not the content, okay? So that is false, HTML is used to define the structure of a web page, not the content.

So, looking at how our web browser actually interprets the HTML code.

So as we've already said, web pages are built using HTML and the web browser that we use interprets that HTML code, and it does it using the following process.

When you're looking for a web page, you will type in a website address or URL into the web browser.

The web browser asks the web server for the HTML file.

The web server will then send back the HTML file.

And the web browser then shows the web page on your screen.

So let's have a quick check to see what we can recall.

Which of the following best describes how web pages are displayed by a web browser? A, the web browser shows the HTML code exactly as it is written.

B, the web browser reads the HTML code, interprets it, and displays content like text, images, and links on the screen.

C, the web browser ignores the HTML and generates its own content.

D, the web browser reads only images and ignores the rest of the HTML code.

If you need to pause to think about the answer, do so now.

Okay, let's check to see if we got the answer correct.

Did you select B? If you did, brilliant job.

That is the right answer.

The web browser reads the HTML code, interprets it, and displays content like text, images, and links on the screen.

So remember again, the HTML provides the structure of the web page and the web browser reads the HTML code to display the web page on the screen.

So, as it says, web browsers are made to understand HTML code.

They read the instructions in the code, like the headings, paragraphs, and images, and show the content in a way that's easy for users to see and interact with.

So moving on, we're gonna look at Task A, okay? And now this is for you to have a go at, so you can use the slide or use the accompanying worksheet, and what I want you to do is answer the following questions.

Question one, the purpose of HTML is to.

And please fill in the blank.

Question two, write a short paragraph describing how a web browser takes HTML instructions to display text, images, and links.

And question three, what might happen if a web page had no HTML code? If you need to pause the video now to answer the questions, please do so.

Okay, let's have a look at what we got, okay? So, for question one, the purpose of HTML is to structure and format content on a website, such as text, images, and links.

Did you get something similar? If so, well done.

Okay, moving on to question two.

Write a short paragraph describing how a web browser takes HTML instructions to display text, images, and links.

The web browser reads a file written in HTML.

It uses the instructions in the file to show headings and paragraphs as text, adds in images and makes links clickable.

Did you get all that? Did you get something similar? That's quite a tricky one to write a whole paragraph about how the web browser works.

And question three, what might happen if a web page had no HTML code? Now this is a bit of a tricky one because we haven't covered this explicitly in the slides, but it was for you to have a chance to think about what you think would happen if a web page had no HTML code.

So if you've got something along the following lines, you've done really well.

If the web page didn't have any HTML, the web browser wouldn't know how to display the content and the web page would either appear blank or not display anything correctly.

If you've got something along those lines, that's really well done because, as we said, we hadn't actually covered this and it was for you to have a think about.

Okay, so well done if we got all those questions correct.

So moving on to the next section.

What we're going to be looking at is explaining the structure of text on web pages.

So HTML use predefined tags.

Tags are the building blocks that define the structure of a web page.

A few things that you need to know about tags.

Tags have chevrons, and most tags come in pairs to open and close the element, and we can see the example here on the screen.

So we can see that we've got pairs of tags, so, for example, <html> and then at the bottom we've got </html> so that is a pair of tags that's open and close.

Okay, so if we move on, we're gonna have a look at the basic structure for most web pages.

Okay, we can see again the example of a HTML code on the slide.

Right at the top we've got <!DOCTYPE html> and this informs the web browser that the document is a web page.

This is not a tag, okay? Moving on, we've got <html> This encloses the entire web page, so anything we do from here on out goes inside that tag.

The <head> tag.

This holds the information about the web page, so the title of the web page or the name of the web page, if you will.

The <body> tag holds the content of the web page, so any text, images, video, links that you want displayed on the web page need to go within this <body> tag.

So, all web pages have source code.

Source code allows you to see the HTML structure of the web page.

You can view a web page source code by pressing CTRL + U on a Windows device or Option + Command + U on a Mac device.

But don't worry if you're gone have a look at it and it looks really, really confusing.

Most modern web pages have very complicated HTML structures that use lots of advanced tags.

So let's have a look at the following question.

What does <!DOCTYPE html> do? A, informs the web browser it is a web page.

B, provides the structure of the web page.

Or C, provides content of the web page.

If you need to pause the video to think about your answer, do so now.

Okay, let's have a look, what did we get? If you got A, that is the right answer.

It informs the web browser it is a web page.

And remember again, the <!DOCTYPE html> is not a tag, so if you've got that one done and correct, well done.

So moving on, we're gonna have a look at some of the common elements used to structure text on a web page.

So on the slide we have got an example of a very simple web page that uses HTML, and that's "Welcome to the Gaming Club." And what we're gonna do is have a look at some of the main tags used to help display the text.

So right at the top where we've got "Welcome to the Gaming Club" in that big bold font, that is the main heading for the text, and this uses what is known as the <h1> tag, and this means it will appear in this big bold font.

And again, we have to make sure that anything we do sits inside the opening tag and the closing tag, so we can see here that we've got the <h1> opening tag, we would have the content or the "Welcome to the Gaming Club," and then we'll have the closing tag, so we'll have that </h1> tag.

Moving down, we have got a subheading, "What we do," and again this is in bold but it is smaller, okay? So we're using a slightly different heading tag and this is the <h2> heading tag.

And again, we have got the opening <h2> tag, the content, and then the closing </h2> tag.

Now for these subheadings, there are a lot, there are six different sizes that go from <h1> being the big main heading, down to <h6> which would be a much smaller heading that we might use further down a page.

And then the final tag we're looking at is the <p> tag and this is the paragraph tag, and these are used to define a paragraph of text.

And on our example we have got two different paragraphs here, one that starts with "If you love playing video games" and the second one is "We play multiplayer games," and they sit within the <p> tag.

So again, we open the <p> tag, have the content, and then we close the </p> tag to show that that paragraph has been finished.

So if we have a look at the example on the slide, we've got the HTML code for the web page we have just been looking at.

Okay, so we can see that all the content sits within the <body> tag.

We have got the <h1> tag with the "Welcome to the Gaming Club." We have then got a paragraph.

Then we have got our subheading, and then we have a second paragraph.

What we need to pay attention to is that in the HTML code editor, all text will appear on one line by default.

So we can see with this first paragraph, the text continues off screen, which can make it quite tricky to remember what you've typed or how long your sentence is.

So what we can do is press Enter to create a line break in the editor.

So in the second paragraph we have used Enter to create some line breaks so we can see all the text that we have typed in.

However, what you need to remember is when you run this, it will still display as one line on the web page.

So both of these paragraphs will display in the same way.

By using the Enter to create a line break in the editor, we are just making it more visible for us as the person writing the HTML code.

And what we also need to remember is when we start a new line on the web page, you need to make sure you use a new <p> tag, okay? So for every new line, make sure we use a new <p> tag.

Okay, so let's have a go to see what we can remember.

So on the slide we have got a number of tags and we also have a number of definitions, and what I would like you to do is match each tag with its definition.

If you need to pause the slide now so you can have a go at that, please do so.

So let's have a look at how we did.

Did we manage to match each tag with its definition? <html> tells the browser that we have used HTML to code the page.

The <head> tag defines the web page title.

The <body> tag contains all the content you want to see displayed, so remember, that's text, images, links, and so on.

The <p> tag defines a paragraph.

And the <h1> tag defines the most important heading or the biggest heading that you're going to have.

How did we do? Did we get all those right? If you did, well done.

And moving on.

So what we're gonna have a look now is Task B.

Okay, what we've got on the screen is a piece of starter code and we've got the link that you can open.

What I would like you to do is read through the HTML code and modify the subheading tag which is labelled <h2> to another heading style.

If you remember, subheadings can be anything from <h2> to <h6>.

You also need to remember to update the closing tag.

And then finally, what I'd like you to do is when you click Run, make a note of what happens to your subheading.

So again, if you need to pause the video, do so now so you can have a go at that task.

Okay, are we ready to move on? Let's have a look.

Okay, so what happens to the subheading when you click Run? So depending on what changes you have made, the size of the subheading will change, <h2> being the next largest font size after <h1> and <h6> being the smallest font size.

So what we should see is your subheading becoming smaller.

Did you have a go at all of them so you could have a look at the size difference between <h2> to <h6>? It is quite a visible difference if you used <h2> and then went straight down to <h6>, it's a massive difference.

If you managed to get it changed and updated and had a play with all the different subheading tags, well done and let's move on.

So we have got another task for you to do.

We have got the starter HTML file and as you can see this time it very much is just the basic tags in the starter document.

And what I'd like you to do is add the following.

So you need to add a main heading, which is "GCSE Computer Science," and then you need to add in some subheadings into the <body> tag.

So those subheadings are going to be "Theory topics." Underneath "Theory topics," I would then like you to add a paragraph of text with all the relevant content.

I would then like to add a second subheading called "Programming and algorithms," and again under there a paragraph of text with the relevant content.

Okay, if you need to use any revision guides or your exam board website to help you out with this, please do so.

If you need to pause the video so you can complete this task, pause it now.

So should we have a look at what we've got? Okay, let's see how we did.

So what we should have right at the top of the page in the <head> tag is the title, "GCSE Computer Science." So if we've got that, that is the heading for the web page or the title of the web page.

Inside the body of the web page, we should have a <h1> tag used for "Theory topics." And underneath that we should have a paragraph which has all the topics that we study that you would say are theory.

We would then have a second <h1> heading called "Programming and algorithms." And underneath that we have got another paragraph that lists all the topics studied within "Programming and algorithms," but it'll look something like the following.

If you've got a working web page that displays "GCSE Computer Science" as the title, it has got "Theory topics" and "Programming and algorithms" as two <h1> headings, and then you have got a couple of paragraphs that talk about the topics, excellent work, you've really understood the HTML fundamentals from this lesson.

So moving on to the final part of today's lesson, we are looking at creating a structured web page.

So first of all, what I'd like you to do is have a look at the HTML code displayed on this page and tell me what do you think it is going to display.

If you need to pause the video to read through the code, do so now.

Okay, so what do we think? It is going to display the following.

It's gonna have a title, "The Hunger Games by Suzanne Collins." It is then gonna have a short paragraph that tells us the genre.

And then under that a second paragraph that gives us a plot summary.

Did we get that? Did we understand what it was going to display and what the text was gonna look like? If so, good job.

So moving on.

So we can display text in slightly different ways.

HTML lets you show related items as a list.

There are two different types of lists you can make with HTML, ordered lists and unordered lists.

Lists help make information easier to read and are useful for creating accessible content.

So let's have a look.

An unordered list uses the <ul> tag to define it.

This is used for items that do not need to be in any particular order.

Items in the list are defined using the <li> tag.

So if we have a look at the example underneath here, we have got a <h2> tag for "Why I Recommend This Book." We have then got the <ul> tag to define the unordered list.

And then we have got one, two, three <li> tags, so we've got three items in this list to describe why I would recommend this book.

And remember, with every tag we open, we need to make sure that we do close it as well.

So let's have a look at what this is going to display.

So looking at this unordered list, we can see the example web page on this slide.

So we've got the <h2>, "Why I Recommend This Book," we've got a bold title, and then in a bullet-pointed list we have got the three items in the list displayed.

So we can see there it really sets out the text nicely.

So let's move on and have a look at an ordered list.

So an ordered list uses the <ol> tag to define it, and this is used for items that need to be in numerical order.

Items in this list are again defined using the <li> tag.

So again, we've got an example at the bottom of the slide.

We have got a <h2> heading for "Top 5 books." So as this is top five books, it is going to be in order of what their top five books are.

We have then got the <ol> tag and we have got one, two, three, four, five items in this ordered list.

So let's have a look at what it looks like.

So there we have it.

We have got, again, our <h2> heading, "Top Five Books," and we have got our ordered list displaying the five items numbered one through to five.

Okay, so we can see there again it's another nice way of setting out text, but this time if it needs to be in a particular order.

So let's have a quick check to see if we can remember everything that we've learned about lists and their tags.

So what tag is used for an ordered list? Is it A, <ol>? Is it B, <li>? Or is it C, <ul>? If you need to pause the video just to read through the question again, do so now.

Okay, let's have a look.

It is A, <ol>.

So if you got that right, well done.

Okay, so let's have a look at the next question.

What does the <li> tag do? Is it A, it creates a link to another web page? Is it B, it creates a paragraph of text? Or is it C, it defines an item in an ordered or unordered list? Again, if you need to pause the video to read through the question, please do so.

Okay, let's check out and see what we got.

If you got C, you've got it right.

It defines a list item in an ordered or an unordered list, so well done.

So moving on to Task C.

What we've got is a starter file, so you'll need to open that.

And what I want to do is modify the HTML file to include the subheading "Key Characters" and then add in an unordered list of the main characters, and I'd like you to add in the three mentioned on this slide.

Once you've done that, I would like you to click the Run button to display the web page.

So if you need to pause the video so you can read through the task again, please do so.

Okay, so let's have a look at what we've got.

We should start off with "The Hunger Games by Suzanne Collins" being in the big heading at the top.

We have then got the two paragraphs that show the genre and the plot summary.

Underneath that we should have a subheading which says "Key Characters." And then in an unordered list we should have the three main characters from the book.

And when I say unordered, that means it'll appear in a bullet-pointed list.

So if you've got that, so you've got the subheading and you've got the unordered list of key characters displaying correctly, excellent job on this one.

So the final part of this task.

Using the code editor, what I'd like you to do is create a web page for a topic from the GCSE Computer Science specification using HTML to show the following.

It needs to have a title for the web page, a main heading, an unordered list of the topic content, a second heading for the first sub-topic, and a paragraph with the content of the first sub-topic.

Okay, so if you need to press pause so you can read through that task again, please do so.

Okay, should we have a look at an example so you can see if you've done the HTML code correctly.

So what we should have right at the top is the title for the web page.

So that should say, again, something like "GCSE Computer Science." In the <body> tag, we will have the main heading, and the topic that has been picked is "Memory and Storage" and that is appearing within the <h1> because that is the main heading for this page.

We have then got a very short paragraph just to tell us about the contents of the topic.

And then we have got an unordered list of all the topics, so you can see there's one, two, three, four, five different topics within "Memory and Storage." We have then got a second heading for the first sub-topic, so we can see that they have used the <h2> heading for "Primary storage" and then we have got two paragraphs with some content about "Primary storage." Again, as you can see on this example, we have got the tag being opened and closed when needed.

So if your page looks something like the example, you've done really well because you've remembered how to use all the tags.

If it's displaying correctly, again, that's brilliant, because it means you've both opened and closed the tags correctly.

So, in summary for today's lesson.

HTML is Hypertext Markup Language, and this is the standard language used to create and structure web pages.

HTML uses tags to structure the content of web pages.

Tags are used to give meaning and structure to the content and therefore improving readability.

Web browsers interpret HTML code to display content as a web page.

Okay, so those are the key things we need to take away from today's lesson.

So I hope you'll join me next time when we look further into HTML.