Lesson video

Hello, and welcome to lesson one of Key Stage for HTML and CSS.

Now to start off I've got a question for you.

How many websites do you think you've accessed in the past say 24 hours? What about over the last week? What about even over the last month? Now I'm guessing whatever the answer is I'm imagining it's a big number.

So in this unit, you're going to take your first footsteps into web development, and you're going to create your very own web pages.

You're going to learn how to be the author, the designer, the maker of web content, rather than simply being the consumer of it.

Now, I'm really excited about this unit because I still remember the first time I created my first webpage.

And to think I was really excited about it because it really opened my eyes to the possibilities of what my new found skills could help me achieve.

So I'm Ben and I'll be your computing teacher for this unit.

And all you'll need for this lesson is a computer and a web browser, and through out this unit, we're also going to be using a website called Replete.

Now you'll need an account on Replete.

So you can go ahead and do that in the moment, but also you need to be over 13 to create an account.

And if you are over 13, please still ask your parents or carer for permission to do so.

So if you can clear away any distractions that you might have and when you're ready, let's get started.

Okay, so in this lesson, you will understand the purpose of HTML and tags when designing your website.

And we're also going to look at the following tags.

So HTML, head, body, p, h1 to h6, ul, ol and li.

Now these might be completely alien to you right now, but trust me, by the end of this lesson, you'll be fully familiar with these term.

Okay, so before we get going, I've got a starter activity for you to do.

Now, this question that requires you to think about how websites get delivered to our computers.

Now, if you've already done a unit on networks, you might have covered this already.

So this is a good opportunity for you to reflect on the learning that you did in that unit.

And think about the answer.

And if you haven't done that unit, then don't worry about it, but just think about the process that you think happens from your computer to actually getting that website and displaying it on your computer.

So pause the video for a moment and then unpause when you formulated an answer.

Okay, so let's go through the answers then.

Now, let's go through the process of what would happen when you're on your computer, you've opened the web browser and you type in a web address.

So you do, you type in that web address, which is known as a URL, which stands for uniform resource locator, and you type that into the address bar on your web browser, such as HTTP://www.

google.

co.

uk.

Now, to actually access that webpage, your browser needs to connect to that webpage's server.

Now it actually needs the address for it.

Now google.

co.

uk is as a URL and we have URLs, So they're easy for us to remember as human beings and type in.

But what's actually needed by your computer? Something called an IP address.

Now we're kind of going into the network unit a bit here, but to get the IP address, your computer needs to get that from something called a DNS server.

So once it's got that IP address, which is set of numbers and dots, that then knows that that's the address of the web server.

So it sends a little request packet to that server.

So the server would then respond with the webpage to your computer via something called HTTP protocol, and it's going to send some HTTP as a HTML code.

Now what happens when it arrives back at your computer, the browser reads that HTML code and displays it on the page.

So all of that is happening.

So imagine that you wanted to get a website that you think will most likely to be hosted on a server somewhere on the other side of the world.

How long is it going to take for that website to appear on your computer? You probably talking seconds, maybe not even a second.

So if you've ever had that thought process that, "Oh, man, that could be the internet is running really slowly today." Even if it takes one or two seconds, if you think about what actually is involved, you type in an address on your keyboard, then send a message to a server to then get an IP address.

And then that the IP address to send another message to a server across the other side of the world, and then not to send back what we call packets of data to your computer.

If your computer then put back in order and then your browser to display it and translate it and show you a webpage, all that happens in milliseconds.

So the internet is super fast, okay? So let's go into what we mentioned there, which was sending HTML, okay? Now HTML stands for HyperText Markup Language and it's used for creating web pages, okay? Now a web browser is designed to retake HTML, and then to translate it into the things that you see on screen.

Now, HTML, like we just mentioned there is a markup language.

So it's not in itself a programming language because what it does, it defines the structure.

Now I'll come back to that in just a second, but let's see if we can explain why it's not a programming language.

It's not a programming language because it doesn't have common programming features such as iteration or repetition, such as for loops or while loops.

And it doesn't allow you to do any kind of brunching, so conditions or making any decisions such as using if, elif or else.

But what is a markup language then? Well, it kind of is using code in some respects.

So we use these things called tags, but what those tags do is literally show your browser or tell your browser how you intend the website to look.

So the tags will be read by the browser and the browser will then use that to just determine the look and structure and layout of the website, okay? So let's look at the HTML essentials.

Now, there are three HTML essentials that I want you to remember.

So starting with number one, number one, there are things called chevrons around the tags.

Now, if you look at that image on the right-hand side, you can see these little that we got like, HTML and head and body.

These are all the tags and surrounded by them to show that tags these things called chevrons.

So we won't call them like, little crocodile things like we did in prime school mass.

They're called chevrons.

Now, number two, there are four essential HTML features.

So they are a DOCTYPE.

So you can see on the screen, on the side of the screen, the image on the right-hand side there.

Line number one, we've got the thing called DOCTYPE.

Now this is an important part because it tells your web browser to use HTML five standards, okay? Then we use HTML, which then shows that we need the rest of the code that you can see or that anything else underneath this is going to be HTML.

So it tells your browser to read it that way.

Anything, we also have the head and the body tag.

So we're going to come to them on the next slide to explain a little bit more about what they do.

Now, you'll also notice that most tags, so this is number three, sorry.

Number three, is that most tags have a closing tag with a Forward slash, not all tags, as we'll explore in lesson two, but most tag do.

So if we look again in that image on the right-hand side there, for example, look at the head on line three, we've got head, which means this is the start of the head.

And then line five, you've got that full slash and then head that means to close the tag.

So anything in between the opening, closing tags, that's the head, okay? And anything between the opening tag of body and the closing tag with the full slash body that shows anything between that would be the body, okay? Hopefully all this will make sense when we get going with it, okay? So let's have a look at those tags in a bit more depth.

So, like I said before, the DOCTYPE html is always the first line of a HTML file.

And this gives us an opportunity to tell the web browser what kind of standards that we're using.

Now, when we use this line that you can see here, the !DOCTYPE htmL, that's telling your browser to use HTML standards.

So no matter which web browser you're using, they know how to translate it in the same kind of way.

So the next hack HTML tells the browser that we've used HTML code.

So it's telling it to expect anything in between the HTML tags, it's going to be HTML.

We have a head tag.

Now the head tag is meant for things that aren't displayed in the main body of your page, like the title.

Wherever you put in the head tag, the user won't see that as such.

It won't appear on the page, but we can put things on there such as the title of the page that might appear in the little tab, across the top of the browser, okay? And then we also have the body tag.

Now this contains all the content that you want to be displayed.

So unlike the head tag, the body tag, anything we put inside the body tag is going to be visible to the user on the screen, okay? Now web browsers.

So we can prove that all web pages have boilerplate by looking at the underlying code for one, okay? Now maybe like to have a go with this and you don't need to do it now, but maybe next time you're on a website, try doing this.

What I'd like to do is right-click on a page and maybe look for the option to View Source.

Now, when we view source we can see this boilerplate code.

Now we call it boilerplate because all webpages use the same set of code structure.

So all web pages will have a DOCTYPE.

They'll all have HTML.

They'll all have a head and they'll all have a body.

So whatever webpage we're using, we need this kind of boilerplate code they're like our framework of code that we have to use.

And then everything else is individual and customised to how you would like your webpage to look.

So I'm going to demonstrate that, now, like I say, you might want to pause the video and do it yourself if you'd like to, but you don't necessarily have to.

You can do this next time you're looking at a webpage.

So I'm going to head over to a webpage.

So you can see here, I'm on a website called teach computing.

Now, if I was to right-click on this website now, you can see I've got this option and I can click on view page source down here.

So when I click on that, what it's doing is it's showing me, that it's going to load up in a second.

There you go.

So this is all the HTML code that you can see that makes up this webpage.

And if we look at it in a bit more detail, we can see at the top area, if you see my mouse, yeah, I'm highlighting it there.

We've got the DOCTYPE tag there.

We've also got the head tag, perfect.

So we can see the head tag being closed.

There we go online 54.

So everything here, this won't be displayed to the user, so the user won't be able to see any of this.

It's just used to make up some key information that we need for the website, okay? And then we've also got a body tag here.

So from this point onwards, everything underneath, we can see in in the webpage.

So that's the body tag, okay? Some all types of things we can see.

And then we scroll down to the bottom hopefully, there we go I'm going to see we're closing the body type right at the bottom there.

And we're also closing the HTML tag, which shows us the end of my HTML code.

Okay, so let's look at some common HTML elements then that we might be using.

So if we look at that image on the left hand side, it's like a newspaper, but imagine that as a webpage, now what we might do on any kind of website, we might have a main heading.

Now we're going to use the h, main heading, sorry.

We'll use the HTML tag h1.

So we can see here on the slide that we've got h1 The Daily News full slash h1.

So anything between those tags will be displayed as a h1.

So what do you think h stands for? Well, h actually stands for the heading, now that stands for heading one, which means the biggest heading that we can have, okay? Then you notice the martins are coming last, that's what you call a subheading.

So in HTML, we might use maybe h3 for that.

And you can see that h3, The Daily News, and then followed by close a tag by using the chevrons and a full slash then h3, okay? Now you can see there.

We've got a different number that we've got h1, but we've also got a h3.

So which one's bigger, which one's smaller? So hopefully it's obvious that h1 is the biggest one from what we can see on the screen there, but h3 is slightly smaller.

So as we go down the list, we can have h2, which is bigger than h3, but smaller than h1, we also have a h4, five and six.

So if you go down that number list, obviously the headings are getting smaller.

So you can only go to six, but six is the smallest heading that we can have, okay? And then also you can see it's got these paragraphs here and you'll never guess what the tags for a paragraph you can see it is a p, okay? So HTML, some of it is fairly straightforward.

So if we want a paragraph is p.

Now, for example, let's say I wanted some texts to be underlined.

What tag do you think I would use? So if it's h for heading or p for paragraph, what do you reckon underline this? Well, if you guessed the answer was u, you got it absolutely right, okay? So we would use u tags to make something underlined, okay? What about italics? Have you got it? That's right.

It's i well done.

Okay, so this is your chance now to have a go and actually and writing your very first HTML code, and hopefully you get this like, wow moment that you've written some code that actually would be live on the internet, which is pretty powerful stuff, okay? So first question is, if you had a look at this code that you can see on the right-hand side there, what do you think it would look like? What would be displayed on your webpage? If this was the code and you run it and you open this as a webpage, what would it actually look like, okay? So think about what we just learned about with the h1 tags the h3, the p tags, Okay? So first of all, I'd like to head over to worksheet and just have a look at that.

And just in your mind think, what do I think that's going to look like? But then I'd also like you to have a go at running this, okay? Now on your worksheet, there was a link to something called Replete.

Now, like I mentioned right at the beginning of this lesson, for this lesson, you don't actually need a Replete account because if you follow the link, you'll be able to just edit it in the browser and run it and it will just do it.

But if you'd like to save your work, you do need a Replete account, okay? And we are also late on this unit.

I'm going to do a project where we do need you to have a Replete account.

So if you're over 13, you don't need permission to create an account.

You can create one, but please do anyway ask your parents or carers for permission, okay? If you're under 13, then you'll need to get your parents or carers to do this for you, or ask your teachers to set you up an account in advance.

So let me head over to that Replete link that you'll find on your worksheet.

Okay, so there we go.

So we're going to have a look at this.

So hopefully you can see my screen there.

I'm going to move myself to the bottom of the screen just for now, so you can see that white page, okay? So what we've got here is our boilerplate code for you.

So you can see that we've got our DOCTYPE, we've got HTML, we've got head, we've got body and HTML there.

Now your task was to put all that code inside the body tag, okay? Now I'm just going to test something out.

So I'm just going to put in h1, my Chevron's there and I'm going to type in, hello world, like this, okay? And close my type with the full slash h1.

Now this isn't your task, but I'm just demonstrating it to you so you can see what happens.

So I've typed in h1 and hello world, and then I closed my h1 tags.

And what do you think is going to happen when I run this? Okay, Well, hopefully you're thinking this' going to be a heading and it's going to be displayed hello world.

So at the top here you can see is option to run.

So I'm going to click on that.

There we go.

And you can see, hello world has appeared, so maybe have a little play around with that, so just to prove what we talked about earlier.

So h2 hello, oh, I'm typing hello world again full slash h2 and then I'm going to, oh, don't do that.

I'm going to hit enter.

I'm also going to put h3 and type in hello world again.

Now, hopefully you guessing that there will be three hello worlds playing on screen, but what's going to be different about them? 'Cause I'm using different heading tag, h1, h2, h3.

Do you think they're going to get bigger or do you think they're going to get smaller? Okay, let's have a look.

So I'm going to run this and there you go.

Can you see the way the getting smaller? So that was h1, the first one, the second one is h2, and the third one is h3.

So you can see as we go down the list, they're getting smaller, but anyway, I'm going to delete this, okay? And then your task is to once you've guessed what you think this will look like.

I would like to just copy it all out and type it into your Replete and then click run.

Now, if you have created an account, you can make this project your own.

And what you can do is you can click on this drop down here and you can click on an option to fork the project.

And once you fork that, that will create a copy of my project and put it in your new user area for your account, okay? So it will save the work that you've done.

Okay, so if you can go ahead and do that.

So I'm just going to head back over to my slides.

Okay, oh, there we go.

So again, I'd like to pause the video now, head over to the worksheet, find that linked up Replete, and then type out that code and see what happens.

And once you've done that unpause the video and that I'll be here when you get back.

Okay, so well done.

If you've done that, you've created your very first web page and a big well done.

Now, hopefully you just got that little moment that I got when I created my first webpage, which was that, look, I've actually written some code here.

I've written some markup language, sorry.

And actually I've been able to display something, make something happen on the internet, which is really fantastically powerful.

Now we're doing all this in Replete, but actually you don't even need Replete to be able to do this.

If you're using a PC, for example, you can use a notepad, just a simple bit of free software that comes with your operating system.

You can write all this out as notepads, and then when you go file, save as, save as a.

HTML file.

And that'll then save this to your computer and open in a web browser, okay? So that in itself, hopefully is a powerful thing.

So now by now you're seeing the potential of what we can achieve using some HTML, okay? So let's move on to the next bit of code that I'd like us to look at.

Here we go, now, list tags.

So using HTML list tasks, we can create two different types of lists.

So we have a ul which stands for unordered list and ol which stands for an ordered list, okay? Now, if we just have a look at the images on the right-hand side, we have a ul which stands for unordered list, okay? And then we close the tag here, then any one of these items that we want in our list, okay? We still have li which stands for list item, okay? Then we close the tag there, list item and we close the tag there.

So we've got pizza and burgers on the first one.

And the ordered list has Shrek and Ghostbusters.

So visually, what do you think the difference is between an unordered list and an ordered list? As in what would be the difference on the screen that the user would see, okay? So maybe pause the video and have a little think about that.

And when you've thought about what you think the answer might be, unpause the video and we'll have a look.

Okay, so let's go through the answer then.

So we've got the difference between an unordered and an ordered list, okay? So the first one is an unordered list.

Let's have a look about what that would look like, and then we go, so you can see, it would look like bullet points, just simple plain bullet points, okay? So it's an unordered list.

Now, if you had no idea and you just thought, I really just don't know.

Now we know what an unordered list looks like.

What do you think an ordered list is going to look like? Okay, let's have a look.

Well, the difference is the only differences is that actually instead of bullet points, we're using numbered bullet points, okay? So then it's going to be a numbered list rather than like a dotted list, okay? So we'll try and remember that the right way round.

So unordered list is just bullet points and an ordered list is a number list, okay? Don't confuse it with an unordered list means it doesn't matter what all do you put things in underneath or an unordered list for some reason, might automatically order the left items, it doesn't do that.

It will display them in the way that you have told them to display it, it won't do it alphabetically or anything like that.

But the each new item, it puts a number in rather than just a bullet points, okay? So what I'd like used to do now is I'd like to create some a lists for your page.

So maybe you could do a top 10 music artists or top 10 games or something.

So I'd like you to see if you can do that.

So we'd like to head back over to your Replete that you created just a moment ago.

And I would like to see if you can create an unordered list and an on an ordered list for different things.

Think about maybe putting a title.

So using one of the head tags.

So you might use a h3 or a h4 maybe, and then create an ordered list and an unordered list on something of your choice, okay? And then as an Explorer Task, I'd like to see if you could make like an indented list, okay? Now, with all of these tags that we might use in HTML, don't be afraid to just look it up.

No one expects you to know and just remember all the HTML tags that you might need to use.

In fact, any coder, unless you're using it day in, day out, whatever language it might be.

They always need to look up some documentation somewhere, okay? So you might even want to just Google, create an ordered list in HTML and see if it comes up with how you can make those little sub items, okay? So spend a little bit of time doing that.

Let's start that bit again.

So just spend a little bit of time doing that.

And then I'd like to pause the video as you do that.

And then unpause when you've done that okay? So good luck have fun with it and I'll see you in a moment.

Okay, so hopefully you created your bullet pointed list, okay? Which is really fantastic if you've done that.

So not only have you added code to a website to make your website, but now hopefully you've made some ordered list.

An actually you're starting to build something that uniquely yours, something that doesn't exist anywhere else on the internet, okay? This is your website, but we're now we're going to move away from that now.

So like I say, if you've got a Replete account, it will automatically have saved it.

Or if you didn't and you think, "You know what I'd like to save this one page, because is my first one, then don't be afraid to just pause the video now and go make that Replete account, so you make sure you don't lose what you've done, okay? Now let's move on to a new scenario.

Now, a local business want you to create a website for their Laser Tag experience.

Now we're going to build this over the next couple of lessons, but our starting point is to recreate the design that they've given you.

So they've created this kind of a wire frame design here do not worried about colours or images just yet, but what they do want you to do is recreate their design as a webpage, okay? Now you can only use the following tags.

So you must use a body tag because that's part of our boilerplate code.

And you can only use h1, h3, a p, unordered list, ordered and with list items, that's all you're allowed to use, okay? To recreate this page, okay? So this is on your worksheet as well.

So you don't need to kind of visually memorise this.

I mentioned it will be on your worksheet.

So, I'd like you to head over to your worksheet now.

Okay, so go to Task 2 on your worksheets.

And the task is to recreate that laser tag that matches the image that you've been provided with, okay? So yet again, pause the video, but this time, follow a new link to a new Replete file that has that boilerplate code filled in for you.

You've just got to recreate what you can see in the image, okay? So again, have fun with it.

Don't be afraid to look stuff up.

Don't be afraid to look back at the exercise that you did previously as well, okay? To help you with that.

So pause the video and unpause when you're ready.

Okay, so hopefully you're unpausing 'cause you finished out, so let's see how you got on.

So I'm going to go through my solution, okay? So let's have a look at that.

There we go, right.

So I've recreated this design as HTML code.

Now this is how I've done it.

So hopefully you've done something really similar and if you haven't done it, you just got really lost with it and you found it a bit difficult then just don't be again.

Don't be afraid to just pause the video now, look at my code and see if you can type it and recreate this website because this lesson, and the next lesson is particularly all about just getting comfortable with HTML code.

We're not testing you here.

Just get used to writing the code because the more you write the more familiar, you'll become with it, and the easier it will become as well, okay? So have a go at that, but if you've got it right first time, job well done.

Okay, So it's time for you to do a quiz.

So there's an end of lesson quiz for you to do, which will test you on some of the things that we've learned this lesson, okay? So have a go at that.

And once you've done that, that is the end of this lesson.

Now, hopefully like I've mentioned a few times, you're as excited as I was the first time that I created my first website.

And if you were really excited about it, we would love to see the website that you made, maybe something that you did does live the creative that made it uniquely yours.

So if you'd like to share that with us, then please do so, and please ask your parents or carer to share your work on Instagram, Facebook, or Twitter, tagging @OakNational and using the #LearnwithOak, okay? So I'm looking forward to next lesson where we're going to look at inserting some hyperlinks and we're also going to insert some images onto our Laser Type website, okay? So I'll look forward to seeing you then.

All right, see you next time.