Now we come to the last and most important part of the coding process, the sibling that Axium allured
page the syntax malfunction is responsible for generating page whenever that E.S.P 30 to Web server
gets a request from our client.
It merely concatenate Etchingham Alcalde into a big string and returns to the server doesn't function
we discussed earlier.
The function takes status of LEDs as a parameter dynamically generate stream malcontent.
The first test you should always send is that DOCTYPE declaration, this DOCTYPE declaration indicates
that we are sending ASTM uncowed.
So let's start by initializing this method down here.
It will retain strength so it won't be void string.
Send a e-mail now.
This method will take.
Two parameters.
The first one will be that integer.
Let one status.
And it will take led to St..
As you can see here on here now, we need to identify appointer.
So inside it, the first line will be string BTR, which is that point or the starting point out that
we are going to use and the first thing that we are going to pass is the DOCTYPE.
Ascherman, Doug.
And if you are familiar with ASML, you'll know that this is something you have to do, you can't ignore
it and you can't leave it, you have to tell the professor that this is an e-mail code using this line.
Now, the selection here means new line, so the first thing that will be written in our estimable page
is this, and it won't be written, it will be hidden and the selection will move to the next line so
that we can write more things.
Next, we are going to write the meter viewport element that makes the whole page responsive in any
Web browser while Title Tags sits the title of the page.
So let's do them one by one.
And you'll notice that whenever I write this, I write plus equals plus equal means.
Take this and add whatever written here to it.
Don't replace it concatenated.
So I have the first rank, plus the second string, plus the third string and so on.
So we are going to write a long line here.
This line will make that e-mail page, header or head and we are going to write the meta tags and you
can't simply write them down or copy them from our code.
I will provide the source code for this project.
Now, right, viewport, let's slash.
I'm about.
More than content, but equal and rights again.
Then.
And another sign right with.
Equals device with this will make our base responsive and it will change depending on our device with.
Next, what you need to do is initial scale.
The coma, right, Atia?
Scale and 1.0, we don't want it to scale up or down.
Now the use of scalable equal No.
Don't allow the user to scale our national code, it will auto adjust to the browser settings once you
are done.
You can simply close the tag, that meat attack and the right slash and and another mark of this, OK?
I know that this is a long line.
This is basically the header for page, and we are writing meta tags to make sure that our old page
will be responsive.
I don't recommend writing it down.
Just copy and paste this code from our code.
Now, the next step will be writing or setting the title of our page like BTR plus equal.
And you can't simply buy title.
This is the title tag and I title again now between these two, you can write the tag Bullet Control
E.S.P 32.
This will be the title of our Web page.
Now, our discussion here is to make sure that you have a new line now for styling the whole page,
we can add us, which is basically a way to color everything on your page and to control the background,
the width of the strokes and other things.
And we are going to add some see as a styling to our estimate bill to make it look more beautiful.
And to do that, you have to choose the font type.
The margins and other stuff, if you are not familiar with this, just copy and paste what we have done
and do some edits and you will notice the difference now, right, Peter?
Plus, equal.
And two signs, their lifestyle, right, as Jamal inside that you can now choose the font family.
You cannot area or any other type and you cannot display.
To be in line block.
Then you can't change the margin I would at zero bexell to the margin.
Now.
It's half of the zero, so you can add auto now,
we can also send the text a line.
To be senator.
After you do all of this, just add new line to make sure that you have moved to the next line to keep
writing your Astrium alcalde.
Now, this is the cars are styling and this is the title of our page.
This is the header.
Now, let's move on.
Now.
Now, you can simply follow our ride, the following code, these two lines, these two lines will help
set that color font and margin around the body tags that each one S3 and P tags.
As you can see, this will set the font size.
This will set the color for the P tag and this will set the margin.
Same here.
This is for each one and this is for each three.
You can simply copy and paste these lines from our code.
Some styling is applied to the buttons as well with properties like color, size, margin, etc..
The on and off button has different background color.
We can set different background color by using the active selector for buttons to ensure button click
effect.
Now I can write down the whole code little by little, but I will paste it here and explain it to you.
Now, as you can see here now are called for the button here, we said the words and the background
color for that button and we are stating that won't have any borders.
That color will be white.
The building will be 13 pixel and 30 pixel from left, right up and down the text decoration.
There will be no text decoration.
The font size will be 25.
And these are the other properties.
Sam, for the background color, you can see that here and you can see the background color, one active
when the baton was placed for us to see another color.
Same here for the on the background color will be this.
And when it's active, when someone clicks it, it will change to this.
This will have an effect on the baton and will be more in the active baton.
We can also start the heading.
You can simply lie, Peter.
For that one, issue three.
These two lines.
Will change the heading of the old page, you can simply change the text inside this H1 and H3 tags
to anything that suits your application.
But in our case, I have written SB 30 to observer and using access point code.
Now, to start displaying the buttons and corresponding state to dynamically generated the buttons and
little state we use if statement, so depending upon the status of that general-purpose, input output
pins on or off button are displayed.
Now, let's try this if statement here, you need to write F.
And unutilized else.
Now, inside that, if we are going try to lead one state and inflict one state.
Is.
On we are going to try this line.
Let me explain to you what's happening here now we are going to add to our Astrium alcalde this that
this line led one state is on.
And we are going to choose this class for battle.
We are going to choose button off.
And lead one off and we're right off inside the button, so this line will create a new button.
And.
In the next case, if the island state is off.
We are going to try the very same line, but sort of on we are going to right off here, Sam, for the
second if statement, which has led to state, we are going to have the very same lines.
Down here, as you can see, a to sit on led two states off and depending on the state, it will add
this line to our national code or this line for the red one and for the total at this line or this line.
Now, once we write all of this.
The next step will be returning the string, so at the end of this method, we are going to close the
tags.
Make sure that everything is set by.
OK, now, before we end this, we need to write BTR.
Plus, equal, and here you are going to close the Bundestag.
And slash and.
And then we are going to close the e-mail altogether.
And then slash and.
After that, let's try to return BTR, which will return this spring when this method is called, and
once this thing is returned, it will be sent and displayed on our Web browser.
Now, that's it.
This is the whole process.
That's shamal coding can be done automatically.
You can simply go now.
You can simply if you want to write your honesty and code, you can simply go here and.
Go the Schimel five Ed, all right, on Google online assignment editor, and using any of these editors,
you can simply write an e-mail could easily.
Now, you can start by writing, Lyd.
On and you can start adding different items.
Kind of clean the code, as you can see.
And you can add a link or just click on add your hyperlink to this, and once you are done with the
coding process or writing your Web page or how you want your Web page to be, you can simply copy these
lines.
But you need to add.
Once you copy these lines, I will show you how to do it.
Text.
Once you are done unsatisfied with your code, you can simply paste these lines and here you can do
the following, like BTR plus equal before each of these lines.
And at the end, add this.
And and.
And I see my you can simply copy this list here, here and here at the beginning, we need this text
sign.
That's it, then you can simply copy this code and based it on your Arduino, on a software.
This will be a much easier way for you to create your own page.
And the buttons that you want to display, but there are a lot of methods that you can do this where
there are more visual editors or software that can write e-mail calls, but I prefer cutting them.
And the Arduino idea and this is my code.
Now, what you need to do, if you felt overwhelmed with shame, I'll call.
You can simply copy my code and base it on yours and you can adjust it depending on your needs.
Edit your home, your page name using this line.
Let controller speak 332, edit the headers, added decorating buttons, add more buttons, depending
on your needs, you can do anything you want with this code.
And the next lesson, we are going to distill this code and connect our Wi-Fi network and run the ISP
server.
That's it for this lesson.
Thanks for watching.
This is Ashar from educational engineering team.