Hello and welcome to this lecture in this lecture.
We are going to be creating the structure for our app, using hate HTML.
So I have got my text ready to open.
I am inside the indexed HMO font, which is what I've highlighted.
So this is where we'll create the structure for the app.
The way this is going to work.
What I'm going to do rather than you watch me type the code, I will write the code and then explain
what I have done.
Line one here I have a line of code here, which is known as the declaration.
This basically is the first thing you do in an HTML document.
And what this does, it notifies the web browser that the page they are about to view is in his HTML5
document, line two and Line four.
They are paste HTML tags.
So that's where the actual HTML begins.
So the content between these two tags here is what will be the HTML content.
So in between this HTML tags, we will nest. other tags that will together build up the HTML content
line to here just is the beginning of the Haytham of Tag, followed by the link.
This is an attribute and the values here, which means English.
So with attributes, you need to include the values in quotes and every tag.
Most tags should have an opening and the closing.
The closing tag you can tell by the forward slash before the tag is closed.
I have added some more code, which is the head tag from Line three here to line seven.
You can see they are paired because you've got the dotted line on the closing and under the big opening
tag.
So this is a head tag.
Most of the tags or information within the hash tag is not visible within the browser.
That means visitors can't see them.
They they're only there for information purposes and also to help with search engines.
Alright, so inside the hash tag, we've got a few meta tags with attributes attached.
So the first line on line for there, we've got the meta tag and we've got a comment, a concept because
it is the attributes and the value is UTF eight.
It's basically the type of encoding that is used in most web browsers, so it's most characters are
supported by the UTB.
Dash eight is an encoding type line five.
Here we've got a meta with a attribute of name their name.
Basically, it's the attribute and the value is viewport.
Viewport basically refers to the screen size of any device.
So what is seen here is that the this website or this app is adaptable to any screen size.
So regardless of what device you're using to view, you'll be able to fit it to the screen size.
That's basically what I'm five p saying.
OK, you can see the content here.
The content equals to the weight inclusive device minus width.
So basically what they're saying here is that regardless, the content can be viewed regardless of the
device with.
OK, so whether the screen is small or large, you can scale it.
And the initial scan his 1.0 says here use scalable system.
As a user, I can scale or resize the screen to fit the app.
OK, Line six, here is this.
This is if you have any reference to your style sheet, this is where you need to include it.
So this style sheet here, plus the reference I've put here to the stylesheet.
So I have heard that the final chunk of code for the body tag.
So from line eight to line 15.
So the body tag style from lane eight and in-between the body tag.
I have also nested some of the tag I've missed out the closing body tag.
OK.
So that's the closing body tag.
I just say that.
OK.
So in between the body tag on.
Have got other nested tags, so we've got to dig the deep basically is used to divide a section of a
page and I've giving it an ID attribute equals to wrapper.
The idea is useful because we use that to target native Chewie and ask this styling line 10 here.
Basically, it's an H1 head in tag with a title to do list.
11 is the input.
This is where we will actually type the task.
We want to do and I've given it an I.D. with a valley of Tusk.
Again, we'll use this idea for styling purposes later.
I've also attached a button next to the input and the button.
I have given the pertinent ID equals to add.
So this is where the bottom will click to add the task once we've done the input, OK, and I've given
the idea and attribute as well.
We'll use that to style as well.
And here this is how you write a comment in HTML if you don't want anything with a comment.
The web browser will ignore so you do a left angle bracket, quote, exclamation dash dash and then
double dash and then write down go bracket so you can see almost grayed out.
So anything with that the web browser will not run that piece of code.
All right, the line 13 of created another div here would divide to dos this div here is where the to
dos will be listed.
Once we've set it up properly, they'll be listed inside this Steve.
All right, line 11.
We've got a script tag, so this is where we will this JavaScript file created here.
We are making reference to it inside our HTML document, so any script will write what would be the
script file would be reference from here.
All right, so that's it for this HTML document.
If I just say that, I think I have already.
And let's run it so we can see what it looks like.
So this is the project folder.
I just open it up and double click to run the HTML.
So we can see what the hitman looks like.
I just minimized that a bit.
All right, so this is what our page looks like at the moment.
This is where we are the task and will input the task, and this is where we'll add it.
So that's it for this talk show in our next lecture will be built in or styling this content to make
it look a bit prettier using CCIs.
That's it.
Thanks for watching.
Bye for now.