Hello and welcome to this lecture in this lecture we are going to be creating the structure for our
app using hitched PML.
So this is our blank page CML.
I've already written the hasty AML code for this for this project.
So what I'm gonna do I'm gonna actually copy the code in and then explain each of the each line of code
step by step.
There'll be a lot easier than you watching me type.
All right.
This is the hasty e-mail for our project.
So let me explain the code.
So line 1 here is the very first thing you have to indicate in an page Tamil DOCUMENT.
THIS IS THE DOC type which in which tells the web browser that the documents you are about to display
isn't hasty e-mail five document.
So that's what line 1 does.
Line 2 is the beginning where the document naturally starts.
So it begins with a hate UML tag and in between inside the tag I've added an attribute called Lang Basically
that tells a browser what language this is.
So the value is English which I specified with e when specify an attribute.
You need to enclose the value in quotes as I've done here.
So every tag most tags have an opening and closing tag.
So this is the whole plane HMO tag on line to get the start of the Hey CML document line 22 is the end
in tag which shows that anything between the heftier mouth tags is going to be rendered by the web browser
as an hate e-mail document.
That's what that means.
Line three to line 12 is the head tank inside the head tag.
You have various tags the information in the head tag is not visible you can't see it but the search
engine uses that information to display data or to serve a request that someone's looking for.
So we've got a few meter tags here inside the head and also notice how higher indented each of the code.
So it tells you that the head
and the body are children of a CML tag the metal tags are children of the head tag the link is a child
of the head tag.
Let me bring that up a bit.
Also the page one tag all these ones are children of the body.
So the indentation indicates who the parent is.
All right the metal tag basically used for information purposes.
This murder car set here basically the the.
It's it's an attribute and the value is UTF 8 UTF Dash 8 basically is the standard Unicode and is all
the characters that we're going to use are going to be readable by most or all web browsers so this
UTF is a standard code that is title here indicates the title.
So in case this title will show up on the web pages launched the maiden name here this again is another
attribute where you can specify the value of description where and the to tag to attributes here what
is the name for this metal tag which values description and then there's another idea here called content
and the value is the name of my app or what my app does.
So it's useful for these search engines in case someone's looking for an app that does something like
that that will guide them to this page the meta tag on line seven hands call value an attribute of name
and value of viewport.
This basically enables this page to be viewed by any device either a mobile device or a tablet regardless
of the screen size it will adapt to fit that screen size that's basically what this is.
And the content here again the width equals to the device minus with.
And then this is the initial dash skill.
So this is the zoom you can zoom.
So the initial zoom starts with one and then you can zoom to scale to your relevant screen size.
Basically that's what this is.
OK.
So that without the line seven it would be difficult to view this page on any device.
So you can only probably views on a standard screen.
But with this it will adapt to any screen size that is used to view this web page line.
Ed here is just a link to the style sheet I'll be using which is a style sheet here.
So that's just a reference to the link.
So that's the end of the ad section.
Dan let's move over to the body search.
This is a body section here.
Any content in the body section is the only content that you can see or visitors can see when they visit
the page.
So the visible content of a web page is inside the in between the body inside the body tag.
I've specified some child elements here.
So child tags I've got a hate one tag basically is ahead in tag and this is a text will show up in the
tag and then I've got an input tag thus giving it an idea he.
This idea I will use later for styling the value of the idea here is ACR which is short form for string
and then I've gone on the value inside that this input will be I've given it the value of blanks or
not won't be tablet.
If I wanted to include a text I will place that in between these quotes here but I wanted to be blank.
So I just let the quotes there.
And then the type is a text.
So what I want to go in here is a text as well specified here.
I've created another div here which will act as an output.
So whatever is typed in here will output to the deep here and given the div idea of the value output.
So this div here will show the output that has been inputted inside this inside this input box here.
I've also created a button on line 17.
So this is how you create a button.
I've given the button an I.D. equals two.
But Beatty in notice attributes always have to have their values in quotes in between the button tag.
I've added a hash to tag to display the text that the button will display and then I have closed the
button tag there.
All right.
To notice I have embedded two separate tags in one here.
And notice how I have closed them properly.
I've closed the page two first here before closing the button because a button came first.
And then the script of either the script just before the closing potty tag is always good to insert
your script there so that the page fully loaded before your script is executed.
All right so this javascript here this is where it will reference it from.
So that's it for our app structure.
This is the duck.
This is the code to create the app structure.
So I just click on save to make sure it is safe and click save all.
So that's the structure for the app Don.
That's it for this lecture.
Thank you so much.
Take care.
Bye for now.
Any questions please do not hesitate to ask.
I'll be more than happy to help.