Hello and welcome to this lecture in this lecture we are going to be creating the structure for the
calculator using CML.
So this is my text editor.
I'll be using to write the HMO code which is this text editor called Sublime Text the way I'm going
to structure this lecture is to add chunks of code at a time and then I explain the code to you rather
than you watch me type and take up too much time.
I have added some basic tags these are tags that you will find in every web page or every web application.
They are standard tags that you will see.
So let me explain each one very quickly on line one.
We've got the doc type the doc type basically is there for information and purposes.
What it does it instructs the web browser or any browser that's trying to display the page.
It just lets them know that the content of the page is hate mail.
That's the purpose of the doc type and the hate mail next to it just indicates it's an hate PML document.
So the actual hasty MLK content is between these number two line number two and line 14.
So any of the content are displayed on the web page the content starts from the hate mail that to this
e-mail tag here.
So most tags have an opening and a closing tag so they all come in pairs the head note notice also it's
indented properly so you can tell that the head and the body are both children of the hate PML element
and the title here tag is the child of the head tag the in between the head tag is where you find things
like the title a link to any CFS or script or JavaScript.
Most times you can.
You can include them in the head section.
You can also include several metal tags MIT attacks are used to provide extra information about the
document that you are trying to display and the actual content of the page that visitors or anyone sees
is between the body tags or anything between the body tag is visible.
I have added so much chunk of code I've added From line for to line 7.
So there's a few meth attacks here.
Line 4 basically is a meth attack and it's got an attribute of course set with a value of UTF that 8
the core set attribute basically specifies the character encoding for the hasty AML document.
Line 5 here against another method to out with the attribute of name equals description and also we've
got another attribute here.
Content equals javascript calculator.
So this is descriptive of the document these information here that matter tag they are used to provide
extra information which helps these search engines to display data relevant data.
Line 6.
The meta tag here with the name of attribute with it with this attribute here.
Code name and the value of viewport.
Notice most of and most attributes have the values and closed in quotes.
So here on line 6 the value for this name metal attack this name attribute is viewport.
And then we've also got the content here and the value is with equals device dash with and he's also
got an initial dash skill equals 1 What the viewport is the viewport ref is refers to the screen that
is going to view this calculator.
So it will resize to whatever.
So this what makes this w makes the web page or the web application display this calculator makes it
responsive.
That means it will be responsive to any device regardless of the size it will all to recite itself to
fit that screen device regardless of the device type it will fit the screen.
And this initial scale here is just to zoom is the initial zoom.
So if you want to zoom higher you can zoom as you want in and out of the device.
That's what the scale is.
It's just a zoom.
Line 7 is a reference to the style sheet that I'll be using and be using this.
This is the style sheet have defined on here.
So this is just a link to the style sheet line Niles spoke about.
Line 9 before is just a title for the calculator.
So I've added some more code here.
Line 14 and 15.
Line 14 basically is a head in tag that will use to give a title to the application page.
So that's just what is so hard in tag and the PR here is a breakdown.
Which means after this line it will give us space underneath.
Basically what the break means it means wants this.
Once you get to the end of this line create a space so anything is that needs to follow will come after
this space has been created using the bizarre tag I have added some more CODE ON LINE 16 and 17 lines
16 is have created a form the calculator is going to be created inside the form so the input everything
will be enclosed in a form so the form I have given it an idea equals to my form and I've also given
it a name equals to calc C LC So given it and attributes so this is an attribute and name attribute
given it with the name of calc.
All right so he's got two attributes.
Once an idea and one is a name are also on line 17 created an input.
Phil this is where the answers for the calculator will be displayed.
So giving it a name attribute with a with a value of display so naturally let me save this and see if
we can see if we can see the input.
Ok so this is the input we've just created and that is the head in tag so we can see the input here.
So the answers for the calculator will be displayed inside this input on line 18.
Have got on that input tag but the type of input is a button.
So do the attribute type here equals the value of button and the value of that button will be zero.
So this is where we'll be creating the actual keys for the calculator.
So let me show you.
Let's see what it looks like because all we're going to do is just copy and paste it and create the
other keys.
You can see we've just created a zero.
So I'm going to copy the same and change as change a few things and we can get the rest of the keys
popping up.
So that's just how you create the individual key pads on the calculator.
Using this impulse in the using this input tag will a type equal button the value will be the key.
So be 0 followed by a 1 and so on.
OK.
I have now added more code to create all the keys.
We'll use for his key pad for the calculator.
So basically this is how you create the keys.
So the first one with the value of this will be key pad 0 1 2 3 and this will be the plus symbol.
Notice his break here means after the plus symbol.
Give a break and start a new line.
So we've got 3 4 5 keys.
And then after that we've got the minus key and then a break.
Next we've got six seven eight.
And then this is a multiplication symbol and then a break.
This is number nine two to add a.
This is an entity.
This is what we use to create the division symbol.
OK.
So is use notice here we've got equals two.
But for the visual you need to use this entity a symbol entity to create the symbol.
So let me save that and then you can see how it looks.
So this should give us the full structure of our app.
Just refresh.
As you can see we've got all the key pads we need for the calculator.
So we've got the structure for the hasty e-mail structure in place in the next lecture.
We'll be styling it to make it look prettier.
That's it for this lecture.
Thanks for watching.
Bye for now.