1
00:00:00,390 --> 00:00:08,100
Now we come to the last and most important part of the coding process, the sibling that Axium allured

2
00:00:08,100 --> 00:00:16,950
page the syntax malfunction is responsible for generating page whenever that E.S.P 30 to Web server

3
00:00:16,950 --> 00:00:19,920
gets a request from our client.

4
00:00:22,010 --> 00:00:30,650
It merely concatenate Etchingham Alcalde into a big string and returns to the server doesn't function

5
00:00:31,040 --> 00:00:32,390
we discussed earlier.

6
00:00:33,690 --> 00:00:40,410
The function takes status of LEDs as a parameter dynamically generate stream malcontent.

7
00:00:41,490 --> 00:00:49,290
The first test you should always send is that DOCTYPE declaration, this DOCTYPE declaration indicates

8
00:00:49,290 --> 00:00:51,870
that we are sending ASTM uncowed.

9
00:00:52,500 --> 00:00:57,380
So let's start by initializing this method down here.

10
00:00:58,020 --> 00:01:01,320
It will retain strength so it won't be void string.

11
00:01:01,830 --> 00:01:05,640
Send a e-mail now.

12
00:01:05,790 --> 00:01:08,550
This method will take.

13
00:01:11,340 --> 00:01:12,260
Two parameters.

14
00:01:12,800 --> 00:01:16,140
The first one will be that integer.

15
00:01:21,190 --> 00:01:23,620
Let one status.

16
00:01:29,310 --> 00:01:32,160
And it will take led to St..

17
00:01:36,350 --> 00:01:41,060
As you can see here on here now, we need to identify appointer.

18
00:01:42,350 --> 00:01:50,650
So inside it, the first line will be string BTR, which is that point or the starting point out that

19
00:01:50,660 --> 00:01:58,340
we are going to use and the first thing that we are going to pass is the DOCTYPE.

20
00:02:03,060 --> 00:02:06,480
Ascherman, Doug.

21
00:02:08,060 --> 00:02:14,810
And if you are familiar with ASML, you'll know that this is something you have to do, you can't ignore

22
00:02:14,810 --> 00:02:22,670
it and you can't leave it, you have to tell the professor that this is an e-mail code using this line.

23
00:02:24,050 --> 00:02:33,020
Now, the selection here means new line, so the first thing that will be written in our estimable page

24
00:02:33,020 --> 00:02:40,760
is this, and it won't be written, it will be hidden and the selection will move to the next line so

25
00:02:40,760 --> 00:02:42,200
that we can write more things.

26
00:02:42,710 --> 00:02:50,240
Next, we are going to write the meter viewport element that makes the whole page responsive in any

27
00:02:50,270 --> 00:02:55,250
Web browser while Title Tags sits the title of the page.

28
00:02:55,400 --> 00:02:57,770
So let's do them one by one.

29
00:02:57,980 --> 00:03:03,320
And you'll notice that whenever I write this, I write plus equals plus equal means.

30
00:03:03,510 --> 00:03:07,070
Take this and add whatever written here to it.

31
00:03:07,610 --> 00:03:10,180
Don't replace it concatenated.

32
00:03:10,520 --> 00:03:16,440
So I have the first rank, plus the second string, plus the third string and so on.

33
00:03:16,940 --> 00:03:19,700
So we are going to write a long line here.

34
00:03:20,420 --> 00:03:32,150
This line will make that e-mail page, header or head and we are going to write the meta tags and you

35
00:03:32,150 --> 00:03:37,480
can't simply write them down or copy them from our code.

36
00:03:37,970 --> 00:03:41,000
I will provide the source code for this project.

37
00:03:43,800 --> 00:03:48,060
Now, right, viewport, let's slash.

38
00:03:48,990 --> 00:03:49,830
I'm about.

39
00:03:51,260 --> 00:03:58,010
More than content, but equal and rights again.

40
00:03:59,470 --> 00:03:59,950
Then.

41
00:04:01,440 --> 00:04:05,280
And another sign right with.

42
00:04:08,420 --> 00:04:18,710
Equals device with this will make our base responsive and it will change depending on our device with.

43
00:04:20,390 --> 00:04:23,990
Next, what you need to do is initial scale.

44
00:04:26,700 --> 00:04:28,620
The coma, right, Atia?

45
00:04:30,690 --> 00:04:37,230
Scale and 1.0, we don't want it to scale up or down.

46
00:04:37,740 --> 00:04:41,130
Now the use of scalable equal No.

47
00:04:43,070 --> 00:04:50,510
Don't allow the user to scale our national code, it will auto adjust to the browser settings once you

48
00:04:50,510 --> 00:04:51,020
are done.

49
00:04:52,100 --> 00:05:04,180
You can simply close the tag, that meat attack and the right slash and and another mark of this, OK?

50
00:05:05,030 --> 00:05:06,640
I know that this is a long line.

51
00:05:07,850 --> 00:05:14,000
This is basically the header for page, and we are writing meta tags to make sure that our old page

52
00:05:14,000 --> 00:05:15,090
will be responsive.

53
00:05:15,320 --> 00:05:17,150
I don't recommend writing it down.

54
00:05:17,150 --> 00:05:19,740
Just copy and paste this code from our code.

55
00:05:20,540 --> 00:05:29,120
Now, the next step will be writing or setting the title of our page like BTR plus equal.

56
00:05:31,120 --> 00:05:33,910
And you can't simply buy title.

57
00:05:37,060 --> 00:05:47,290
This is the title tag and I title again now between these two, you can write the tag Bullet Control

58
00:05:49,000 --> 00:05:50,260
E.S.P 32.

59
00:05:51,730 --> 00:05:54,040
This will be the title of our Web page.

60
00:05:55,330 --> 00:06:04,090
Now, our discussion here is to make sure that you have a new line now for styling the whole page,

61
00:06:04,630 --> 00:06:14,680
we can add us, which is basically a way to color everything on your page and to control the background,

62
00:06:15,130 --> 00:06:17,910
the width of the strokes and other things.

63
00:06:18,400 --> 00:06:25,540
And we are going to add some see as a styling to our estimate bill to make it look more beautiful.

64
00:06:26,170 --> 00:06:29,830
And to do that, you have to choose the font type.

65
00:06:31,140 --> 00:06:36,360
The margins and other stuff, if you are not familiar with this, just copy and paste what we have done

66
00:06:36,600 --> 00:06:42,150
and do some edits and you will notice the difference now, right, Peter?

67
00:06:44,250 --> 00:06:45,060
Plus, equal.

68
00:06:46,960 --> 00:06:57,730
And two signs, their lifestyle, right, as Jamal inside that you can now choose the font family.

69
00:07:02,430 --> 00:07:08,310
You cannot area or any other type and you cannot display.

70
00:07:10,490 --> 00:07:11,750
To be in line block.

71
00:07:16,060 --> 00:07:22,740
Then you can't change the margin I would at zero bexell to the margin.

72
00:07:25,460 --> 00:07:25,970
Now.

73
00:07:27,570 --> 00:07:30,940
It's half of the zero, so you can add auto now,

74
00:07:34,720 --> 00:07:37,660
we can also send the text a line.

75
00:07:40,920 --> 00:07:41,850
To be senator.

76
00:07:45,530 --> 00:07:56,600
After you do all of this, just add new line to make sure that you have moved to the next line to keep

77
00:07:56,600 --> 00:07:58,310
writing your Astrium alcalde.

78
00:07:59,210 --> 00:08:04,960
Now, this is the cars are styling and this is the title of our page.

79
00:08:05,000 --> 00:08:05,900
This is the header.

80
00:08:07,660 --> 00:08:08,680
Now, let's move on.

81
00:08:12,530 --> 00:08:13,070
Now.

82
00:08:17,000 --> 00:08:25,160
Now, you can simply follow our ride, the following code, these two lines, these two lines will help

83
00:08:25,160 --> 00:08:33,680
set that color font and margin around the body tags that each one S3 and P tags.

84
00:08:33,710 --> 00:08:37,090
As you can see, this will set the font size.

85
00:08:37,130 --> 00:08:42,450
This will set the color for the P tag and this will set the margin.

86
00:08:43,220 --> 00:08:44,040
Same here.

87
00:08:44,600 --> 00:08:47,860
This is for each one and this is for each three.

88
00:08:48,650 --> 00:08:51,880
You can simply copy and paste these lines from our code.

89
00:08:53,330 --> 00:09:00,230
Some styling is applied to the buttons as well with properties like color, size, margin, etc..

90
00:09:00,260 --> 00:09:03,450
The on and off button has different background color.

91
00:09:04,130 --> 00:09:13,220
We can set different background color by using the active selector for buttons to ensure button click

92
00:09:13,220 --> 00:09:13,790
effect.

93
00:09:14,720 --> 00:09:22,210
Now I can write down the whole code little by little, but I will paste it here and explain it to you.

94
00:09:26,130 --> 00:09:34,020
Now, as you can see here now are called for the button here, we said the words and the background

95
00:09:34,020 --> 00:09:40,550
color for that button and we are stating that won't have any borders.

96
00:09:41,820 --> 00:09:43,210
That color will be white.

97
00:09:43,350 --> 00:09:52,930
The building will be 13 pixel and 30 pixel from left, right up and down the text decoration.

98
00:09:52,950 --> 00:09:54,600
There will be no text decoration.

99
00:09:54,930 --> 00:09:57,270
The font size will be 25.

100
00:09:57,660 --> 00:10:00,090
And these are the other properties.

101
00:10:01,940 --> 00:10:08,390
Sam, for the background color, you can see that here and you can see the background color, one active

102
00:10:08,390 --> 00:10:12,660
when the baton was placed for us to see another color.

103
00:10:13,340 --> 00:10:17,810
Same here for the on the background color will be this.

104
00:10:17,810 --> 00:10:22,040
And when it's active, when someone clicks it, it will change to this.

105
00:10:23,030 --> 00:10:27,980
This will have an effect on the baton and will be more in the active baton.

106
00:10:29,360 --> 00:10:31,130
We can also start the heading.

107
00:10:33,720 --> 00:10:36,180
You can simply lie, Peter.

108
00:10:38,730 --> 00:10:40,350
For that one, issue three.

109
00:10:41,800 --> 00:10:42,820
These two lines.

110
00:10:44,260 --> 00:10:51,400
Will change the heading of the old page, you can simply change the text inside this H1 and H3 tags

111
00:10:52,210 --> 00:10:54,870
to anything that suits your application.

112
00:10:55,510 --> 00:11:02,070
But in our case, I have written SB 30 to observer and using access point code.

113
00:11:03,630 --> 00:11:10,540
Now, to start displaying the buttons and corresponding state to dynamically generated the buttons and

114
00:11:10,540 --> 00:11:17,160
little state we use if statement, so depending upon the status of that general-purpose, input output

115
00:11:17,160 --> 00:11:22,230
pins on or off button are displayed.

116
00:11:24,720 --> 00:11:30,120
Now, let's try this if statement here, you need to write F.

117
00:11:34,170 --> 00:11:35,760
And unutilized else.

118
00:11:39,660 --> 00:11:46,740
Now, inside that, if we are going try to lead one state and inflict one state.

119
00:11:50,330 --> 00:11:50,780
Is.

120
00:11:52,190 --> 00:11:54,860
On we are going to try this line.

121
00:12:02,030 --> 00:12:08,450
Let me explain to you what's happening here now we are going to add to our Astrium alcalde this that

122
00:12:08,510 --> 00:12:10,520
this line led one state is on.

123
00:12:12,280 --> 00:12:17,180
And we are going to choose this class for battle.

124
00:12:17,890 --> 00:12:19,660
We are going to choose button off.

125
00:12:21,270 --> 00:12:28,230
And lead one off and we're right off inside the button, so this line will create a new button.

126
00:12:31,650 --> 00:12:32,220
And.

127
00:12:33,720 --> 00:12:38,430
In the next case, if the island state is off.

128
00:12:40,340 --> 00:12:47,870
We are going to try the very same line, but sort of on we are going to right off here, Sam, for the

129
00:12:47,870 --> 00:12:54,080
second if statement, which has led to state, we are going to have the very same lines.

130
00:12:56,420 --> 00:13:03,860
Down here, as you can see, a to sit on led two states off and depending on the state, it will add

131
00:13:04,100 --> 00:13:12,260
this line to our national code or this line for the red one and for the total at this line or this line.

132
00:13:13,090 --> 00:13:15,200
Now, once we write all of this.

133
00:13:16,260 --> 00:13:24,570
The next step will be returning the string, so at the end of this method, we are going to close the

134
00:13:24,570 --> 00:13:25,080
tags.

135
00:13:29,870 --> 00:13:33,190
Make sure that everything is set by.

136
00:13:34,140 --> 00:13:39,000
OK, now, before we end this, we need to write BTR.

137
00:13:41,070 --> 00:13:46,290
Plus, equal, and here you are going to close the Bundestag.

138
00:13:51,680 --> 00:13:53,310
And slash and.

139
00:13:56,450 --> 00:13:59,960
And then we are going to close the e-mail altogether.

140
00:14:03,140 --> 00:14:04,540
And then slash and.

141
00:14:07,200 --> 00:14:18,120
After that, let's try to return BTR, which will return this spring when this method is called, and

142
00:14:18,120 --> 00:14:22,530
once this thing is returned, it will be sent and displayed on our Web browser.

143
00:14:23,650 --> 00:14:24,820
Now, that's it.

144
00:14:24,900 --> 00:14:26,970
This is the whole process.

145
00:14:27,330 --> 00:14:31,830
That's shamal coding can be done automatically.

146
00:14:32,040 --> 00:14:35,310
You can simply go now.

147
00:14:35,310 --> 00:14:41,010
You can simply if you want to write your honesty and code, you can simply go here and.

148
00:14:43,050 --> 00:14:51,330
Go the Schimel five Ed, all right, on Google online assignment editor, and using any of these editors,

149
00:14:51,330 --> 00:14:54,960
you can simply write an e-mail could easily.

150
00:14:56,000 --> 00:14:59,150
Now, you can start by writing, Lyd.

151
00:15:01,110 --> 00:15:06,360
On and you can start adding different items.

152
00:15:07,620 --> 00:15:09,630
Kind of clean the code, as you can see.

153
00:15:10,740 --> 00:15:21,420
And you can add a link or just click on add your hyperlink to this, and once you are done with the

154
00:15:21,900 --> 00:15:29,250
coding process or writing your Web page or how you want your Web page to be, you can simply copy these

155
00:15:29,250 --> 00:15:29,840
lines.

156
00:15:31,000 --> 00:15:32,200
But you need to add.

157
00:15:33,410 --> 00:15:35,850
Once you copy these lines, I will show you how to do it.

158
00:15:36,130 --> 00:15:36,440
Text.

159
00:15:39,220 --> 00:15:46,120
Once you are done unsatisfied with your code, you can simply paste these lines and here you can do

160
00:15:46,120 --> 00:15:51,480
the following, like BTR plus equal before each of these lines.

161
00:15:55,290 --> 00:15:59,520
And at the end, add this.

162
00:16:01,190 --> 00:16:02,150
And and.

163
00:16:06,080 --> 00:16:14,040
And I see my you can simply copy this list here, here and here at the beginning, we need this text

164
00:16:14,080 --> 00:16:14,540
sign.

165
00:16:16,560 --> 00:16:23,190
That's it, then you can simply copy this code and based it on your Arduino, on a software.

166
00:16:24,580 --> 00:16:27,850
This will be a much easier way for you to create your own page.

167
00:16:28,840 --> 00:16:34,990
And the buttons that you want to display, but there are a lot of methods that you can do this where

168
00:16:35,350 --> 00:16:44,280
there are more visual editors or software that can write e-mail calls, but I prefer cutting them.

169
00:16:44,290 --> 00:16:48,170
And the Arduino idea and this is my code.

170
00:16:48,400 --> 00:16:52,480
Now, what you need to do, if you felt overwhelmed with shame, I'll call.

171
00:16:52,480 --> 00:17:00,460
You can simply copy my code and base it on yours and you can adjust it depending on your needs.

172
00:17:00,880 --> 00:17:04,780
Edit your home, your page name using this line.

173
00:17:06,610 --> 00:17:14,080
Let controller speak 332, edit the headers, added decorating buttons, add more buttons, depending

174
00:17:14,080 --> 00:17:17,530
on your needs, you can do anything you want with this code.

175
00:17:17,710 --> 00:17:26,020
And the next lesson, we are going to distill this code and connect our Wi-Fi network and run the ISP

176
00:17:26,020 --> 00:17:26,530
server.

177
00:17:26,980 --> 00:17:28,140
That's it for this lesson.

178
00:17:28,330 --> 00:17:29,050
Thanks for watching.

179
00:17:29,050 --> 00:17:31,420
This is Ashar from educational engineering team.