Hello and welcome to this lecture in this lecture.
We are going to be creating the structure for our app using hasty e-mail.
So I have got my text editor open I am inside the index dot HMO file which is what I've highlighted.
So this is where we'll create the structure for the app.
The way this is gonna work what I'm going to do rather than you watch me type the code I would pre write
the code and then explain what I have done all I want here.
I have got a line of code here which is known as the declaration.
This basically is the first thing you do in an HMO document.
What this does is it notifies the web browser that the page they are about to view is in hasty AML five
document
line two and line four.
They are hasty AML tags.
So that's where the actual CML begins.
So the content between these two tags here is what will be the HMO content.
So in between this Haiti AML tags we will nest or the tax that will together build up the H2 CML content
line to here just is the beginning of the HMO tag followed by the land.
This is an attribute and the value is EHR which means English.
So with attributes you need to enclose the values in quotes and every tag most tags should have an opening
and 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 under the closing and under the big opening
tag.
So this is the head tack most of the tags on information within the hair tag is not visible within the
browser.
That means visitors can't see them the only there for information purposes are also to help with search
engines.
All right.
So inside the head hotel we've got a few member tags with attributes attached.
So the first line on line for there we've caught the meta tag and we've got a motor car set the car
set is the attribute and the value is UTF Dash 8.
It's basically the type of encoding that is used in most web browser.
So it's most characters are supported by the UTF Dash 8 is an encoding type.
Line 5 here we've got a meter with a attribute of name the name.
Basically it's the attribute and the value is viewport viewport basically refers to the screen size
of any device.
So what is saying here is that these this website or this app is adaptable to any screen size.
So regardless of what device you're using to view you be able to fit it to the screen size.
That's basically what I'm a five a C.
OK.
You can see the content you see the content equals to be with equals a device minus with.
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 scale here is 1.0 says here
user scalable Yes I am as a user can scale or resize this screen to fit the app.
OK.
Line 6 here is this.
This is if you have any reference for your style.
This is where you need to include it.
So this style it here plus the reference I've put here to this style shit.
So I have had it the final chunk of code for the body tax or from line eight to line 15.
So the body tag style from line 8 and in between the body tag.
I have also nested some of the tag of missed out the closing body tag.
OK.
So that's the closing tag.
I just say that.
OK.
So in between the body tag I have got all the nested tags so we've got the div the DB basically is used
to divide a section of a page and I've given it an I.D. attribute equals to wrapper.
The idea is useful because we use that to target that deed.
During our CSA styling line 10 here basically is and hate one head in tag with a title to do list.
Eleven 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 value of task.
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 button and I.D. is equal
to and so this is where the button will click to add the task.
Once we've done the input okay.
And I've given the idea and attributes as well we'll use that to style as well.
And here this is how you write a comment in Haiti AML.
If you don't want it anything with a comment.
The web browser will ignore.
So you do a left angled bracket quote exclamation dash dash and then double dash and then right angle
bracket.
You can see is almost grayed out so anything with that the web browser will not run that piece of code.
All right.
Line 13 of creating another div here with div I.D. to dos this day.
Here is where the to dos will be listed.
Once we have set it up properly they'll be listed inside this div.
All right.
Line eleven.
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 CML document to any script.
All right.
Which would be the script file would be reference from here.
All right.
So that's it for our HMO 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 ECMO so we can see what the hasty email looks like.
Let's just minimize that a bit.
All right.
So this is what our page looks like at the moment.
This is where we're at the task and will input the task.
And this is where we'll add it.
So that's it for the structure in our next lecture will be building or styling this content to make
it look a bit prettier using CSX.
That's it.
Thanks for watching.
Bye for now.