Lesson video

Hi.

I'm Allen Heard, and welcome to lesson one of developing for the web.

This one is all about website building blocks or HTML, which is the code use to create web pages.

For this lesson, you will need a text editor to code the pages and you will need an internet browser to view the pages that you're creating.

You'll also need a pen and paper to write down some answers later on.

You can pause the video while you get the things you need, and when you're ready, we can code some pages.

Okay.

So in this lesson we'll describe what HTML is, we'll use HTML to create some web pages, and we'll modify some HTML tags to improve the styling.

So what is HTML? Well, HTML stands for hypertext markup language, and that's the individual building blocks that are used to create web pages so that we can see the images and texts on the screen that we do.

Each of these individual building blocks is identified by a pair of tags.

One to mark the start of the block, and one to mark the end of the block.

Let's take a look at how HTML tags work.

So when using HTML tags, we have an opening tag and a closing tag, and you'll see the demonstration shortly, how that works.

What you can see on the screen now is some examples of this.

So we have an h1 tag with the heading the three little pigs, and then we close it at the end.

And again, I will demonstrate how to do that shortly.

The emphasise tag makes things italics, and the b tag makes things bold.

So you can see the text that we want to effect is in between those tags.

Okay.

So what I'll do is I'll show you a demonstration of that now.

Okay.

So to create our webpages, we're going to need a text editor.

In this one I'm using notepad because I'm on a Windows machine.

And depending on what device you're creating your pages on, then you'll have to load up the text editor that is on that device.

So let's get started with some basic tags and let's take a look at how we can create a webpage.

So, this is what a tag looks like.

It has the opening symbol there, and the closing symbol here, and this tag I'm using is h1.

That stands for heading.

So there are a number of headings you can use, one, two, three.

And as you go from the low number, the font gets smaller.

So, if I type the heading here, and then to close the tag, to finish the tag off, I would put the same thing again, but with a slash.

I'm not slashing this one.

This is an opening tag, and this is now the closing tag.

Okay? So what I'm hoping, or what should happen when this page opens in an internet browser, is it will give me some texts that says the heading and it will be quite large.

One important thing to do this point is to save it.

And if I just save this file as it is, it's going to save it as a text document.

Now that's not really what we want, because every time I open that document, it will open up in notepad, and we want this to be a HTML document.

So we'll have to change the file extension so that when we double click on it, it opens up in a browser.

So I'm going to call this my file dot HTML.

Again, that's not good enough just to put dot HTML.

It's still going to put dot text on the end here, so I need to stop it from doing that.

So we need to change that to all files.

And I'm going to save this on my desktop.

So we'll see this file up here over here in a second.

So there we go.

So what I'm going to do now is, when we're editing pages, it's sometimes useful.

If I open this page now and bring it across to this side of the screen, we can now see that I wanted a heading one saying the heading, and there's my heading that's quite large.

I can change this to say, this is my heading and press control S to save it, a little shortcut.

Or, you can just click file and save.

And if I now refresh this, it will refresh with whatever changes I have made in here.

Okay? So let's take a look at another tag that we could use.

I could use the b tag and say, this text is bold.

And then I can close the b tag, save it again, and refresh this.

I should get some more text saying that this text is bold.

And obviously that's a lot smaller because it's not a heading.

It's just regular text.

And I'm going to put another one in.

I'm going to use em for emphasise or italics.

This text is in italics.

I must remember to close the tag.

Control s again to save, and refresh.

And this text is in italics.

I can see that that is on the same line as this one.

Well, that's not on the same line here.

So what we can do is we can use the p tag for paragraph, and we can close the p tag for paragraph and save it.

And when we refresh that should now pop underneath.

So the p tag's useful to create new paragraphs.

What I'd also like to do at this point is to show you what happens if we don't close a tag.

So let's say for instance, I don't close the bold tag and I save it.

I refresh this version over here.

We can see that this text is in italics, and it's also in bold because I didn't close it.

So the browser is thinking, well, you wanted bold here and you haven't closed it, so everything beyond this point will be in bold.

So sometimes if you spot things going wrong in your HTML and you're wondering why something is bold or italics, when it shouldn't be, then it's probably because you haven't closed one of the tags.

Okay.

So now it's your chance to have a go with some HTML.

You will need to open a text editor, and you will need a browser.

You've got a task on the worksheet.

So your task is to use those three tags that we've just shown to create the text that's on the right hand side of this slide now.

So I've got an example of what it should look like when you finish by using those three tags and you can see or you can compare what yours should look like at the end.

You can pause the video and complete the task.

Okay.

How did you get along with that task? Well, you can see some code on the screen now.

You can see the heading in between the h1 tags.

You can see the word how in between the emphasis tags and the word mark-up in between the bold text.

So that should give you the kind of look on your webpage, as you can see, below that code there.

Don't worry if yours looks a little bit different.

If it's all on one line, it just depends on how you've resized your browser.

If you were to squish your browser, you could get it on two lines as well.

So that's no problem.

Going to give you another task now.

This one's on the worksheet too.

Now you're familiar, hopefully, with saving a HTML file and you've had some positive results showing it in a browser.

There's some code on the right hand side I'd like you to use in an HTML file.

I'm going to tell you what they do at the moment, because on the worksheet you're going to have to kind of write down a description of what those tags do.

So you'd be able to type that code in, interpret what that code is actually doing, and then write the answers down.

But you can save this as my file two dot HTML so you don't overwrite your first one if you set it as my file dot HTML.

You can pause the video and complete the task.

I hope you enjoyed doing that task.

Hopefully you notice that h2 is still a heading, but it gives you a heading two, or heading size two, which is slightly smaller than heading size one.

The ol, well that was kind of, it had li items in the middle, so they were nested in there.

So there were list items, but they were in an ordered list.

So every time you add an item using the li tags within those ol tags, then it will give you additional numbered item, and also if you added more, then it would just keep numbering them.

So obviously, yeah, because of that, li is a list item.

And then you'll notice that centre was spelled incorrectly, which is the American standard for the HTML, so we have to use the American spelling for it, but that will centre whatever text is between those tags.

Okay.

So for part two of that task you'll notice you used h3 instead of h2.

You're asked to change it and write down what it does.

Well that's still a heading, but it's slightly smaller than h2.

So it's still a heading with slightly smaller text.

And then you're asked to change, ol to ul.

Well ol was an ordered list, and in this example ul is an unordered list.

So instead of having numbers, they've got bullet points.

So you could just keep adding text to that list if you wanted to use any li tags, and that would just give you more bullet points.

So now I've got challenge for you.

Using what you've learned in this lesson.

Not giving you an example code here.

You can use the code you've worked with previously to see if you can solve this one.

So I've got some texts on the screen that says, Wow! This text is not only bold, but in italics too.

I'd like you to start a new HTML file and see if you can put some text together, hopefully starting to see the ones you kind of need for this to see if you can complete that task.

So pause the video and complete the challenge.

Okay.

How was that? Well, I think the heading task would be fairly straightforward to get the heading in bold, or as a heading not using the bold tag.

But then obviously you have to put that in the centre tag too.

Now, you may have noticed that at the beginning, when we did the video demonstration, you noticed I put the p tag for paragraph around that one at the very last line for the one that was in italics, I think, to put it on another line.

So we can nest HTML tags within each other.

So hopefully if you solve this one, you'll see that we had to nest the h tags within centre.

And similarly, we had to nest the bold tags within emphasise.

Now it wouldn't matter which way around you nested the bold or the emphasise, or which way you had them.

The important thing is that you open them and close them.

And hopefully you've got it looking like that.

But there's the solution on the screen if you didn't.

So make sure you understand what's going on with that one and try it again if you didn't manage to be successful with it.

Okay.

So we're looking at text formatting in HTML now.

So as we said, HTML are the building blocks of creating web pages, and if you want to style your pages, you can do this, but you kind of have to do it brick by brick, or piece by piece.

You can see some more code on the left here.

So this is using a style tag within our heading.

So we can see that if we put style equals and then colour blue, and this one I said about the American spelling of the word colour, we've got to make sure we use that spelling or else it won't work.

We can put colour next to it, and then the closing tag, and put Pig one.

And you can see on the right hand side the result of that.

So where we use a style and we choose a colour, then it will make the heading or the text or whatever, however we formatted it be that colour.

The second part of text is just the first house is built of straw.

That's just normal, seen as normal text because we closed the h2 last.

Obviously any style that was applied to h2 doesn't apply to the text below.

Similarly, when we get to the next line, when we've chosen, when we've wrote Pig two, we've chosen the colour pink.

Again, we've closed tag so we can see that that doesn't apply to the line that says the second built his house of sticks.

So, okay.

This one is another task for you.

I've given you some code.

I'll give you an example below what I'd like your webpage to look like.

So using what we've seen on the previous screen here, can you take some of that code and make a webpage that looks like the one below? You can pause the video and complete the task.

Okay.

It's quite a bit more code for this one, and there is a solution on the screen for you.

You can pause the video if you want to have a look through this code.

I don't want to read all the code out for you, but you can see that, you know, when we compare this to the webpage that you were shown on the task four, we need to use some different colours.

We need to use a style tag to obviously make it look as we want it to.

We've nested some tags with using centre to get things centred on the screen and to get things in the right place.

Okay? So if you didn't get that one, you've got the code here.

You can have a look at it and you can experiment with it.

But you know, really, really keep experimenting with this code and see what you can come up with.

And the more you use these tags, then the more familiar they'll become, and the more kind of ways you'll be able to problem solve.

If you get an error, you'll know why because you've kind of, you know, worked out that you've got a tag in the wrong place, or it's not closed, or something along those lines.

Okay.

Don't forget there is a quiz at the end of this lesson to complete.

I hope you've enjoyed it.

Don't forget to share your work with Oak National.

So if you'd like to, please ask your parent or carer to share your work on Instagram, Facebook, or Twitter, tagging @OakNational and hashtag LearnWithOak.

I'll see you next time.