1
00:00:00,450 --> 00:00:01,380
Hey, welcome back.

2
00:00:01,410 --> 00:00:07,500
As part of today's programming concept, you learn how to program in HTML.

3
00:00:08,520 --> 00:00:10,950
HTML is a language, that's for sure.

4
00:00:11,310 --> 00:00:20,280
Email is the language which builds every web page on the web, and HTML is interpreted by your browser.

5
00:00:20,310 --> 00:00:27,150
So basically, every page that you see, if you right click over that page and go to view page source,

6
00:00:27,750 --> 00:00:35,850
that is actually HTML and your browser is interpreting this language and displaying the output, which

7
00:00:35,850 --> 00:00:37,020
is this page.

8
00:00:38,240 --> 00:00:40,700
Now, why am I teaching you HTML?

9
00:00:40,730 --> 00:00:41,870
Well, because.

10
00:00:42,690 --> 00:00:44,810
I showed you earlier this.

11
00:00:45,740 --> 00:00:46,910
Page, Right.

12
00:00:47,510 --> 00:00:51,920
So that's the homepage of our API, which gives some information here.

13
00:00:52,030 --> 00:00:54,650
And so this is also built in HTML.

14
00:00:55,100 --> 00:00:57,530
Now, I want to clarify something, though.

15
00:00:57,680 --> 00:01:03,350
When you use a library such as stream lit, you don't need to know HTML.

16
00:01:04,129 --> 00:01:13,640
So as you've seen before for stream lit, we simply wrote some python codes such as SD dot.

17
00:01:13,660 --> 00:01:14,510
Right?

18
00:01:14,690 --> 00:01:22,220
And then we enter some text here and that would translate to something on the browser.

19
00:01:22,550 --> 00:01:29,690
The secret here is that stream light produces HTML for us, so we don't need to write HTML.

20
00:01:31,020 --> 00:01:36,330
So if you click over the pages we have produced with extreme leads.

21
00:01:36,360 --> 00:01:41,280
If you right click and go to views page source, again you'll see HTML code.

22
00:01:41,280 --> 00:01:44,070
So that HTML code is also produced by streaming it.

23
00:01:44,430 --> 00:01:49,140
But there are other libraries such as Flask and Django.

24
00:01:49,530 --> 00:01:55,110
These libraries are also used to build websites just like stream like this.

25
00:01:55,110 --> 00:01:59,310
Used to build websites of both Flask and Django.

26
00:01:59,340 --> 00:02:01,560
Don't produce that HTML.

27
00:02:01,680 --> 00:02:06,570
Now you'd ask, Well, why not using streamlined for everything then?

28
00:02:06,960 --> 00:02:13,950
Well, that would not be a good idea for more complex apps because you can't just make any app with

29
00:02:13,950 --> 00:02:14,720
streamlined.

30
00:02:14,730 --> 00:02:20,850
So streamlined is limited to more simple websites and more simple apps.

31
00:02:22,080 --> 00:02:26,850
If you want to build an API, for example, you can do that with stream leads.

32
00:02:26,850 --> 00:02:33,570
You need something like Flask or Django, and Flask is what we're going to use today.

33
00:02:33,810 --> 00:02:38,460
So before we jump into Flask, I want to introduce you to HTML.

34
00:02:39,600 --> 00:02:42,030
Therefore, let me delete that.

35
00:02:42,060 --> 00:02:48,180
Therefore, we want to create an HTML file here.

36
00:02:48,270 --> 00:02:51,410
So right click, go to new and create an HTML file.

37
00:02:51,420 --> 00:02:52,350
Give it a name.

38
00:02:54,030 --> 00:02:55,320
Let's say tutorial.

39
00:02:55,530 --> 00:03:01,820
You don't need to give the HTML extension because permission will give the extension automatically.

40
00:03:01,830 --> 00:03:06,950
So if you create a that HTML like I did, you should see some code already.

41
00:03:06,960 --> 00:03:09,030
So I added some code.

42
00:03:10,340 --> 00:03:15,800
Another way to create the HTML file would be to right click and go to new and go to a simple file.

43
00:03:16,040 --> 00:03:22,910
Then you'd say tutorial to dot HTML, for example, but then you'd need to write that code manually

44
00:03:22,910 --> 00:03:23,570
in here.

45
00:03:23,570 --> 00:03:29,120
So every edge HTML page, every HTML document needs to have that code.

46
00:03:30,260 --> 00:03:35,540
So I'll delete the tutorial to that HTML and keep tutorial that HTML.

47
00:03:37,060 --> 00:03:37,360
No.

48
00:03:37,360 --> 00:03:45,610
So this is an HTML document and you can open it by right, click in and go to open in browser and open

49
00:03:45,610 --> 00:03:47,320
with one of your browsers.

50
00:03:47,320 --> 00:03:50,770
Or you can just click this one of these.

51
00:03:50,770 --> 00:03:54,160
So I can see if they show on your chart.

52
00:03:55,610 --> 00:03:58,070
So like you can click on Chrome.

53
00:03:58,280 --> 00:04:02,780
And for now, this is an empty web page, but we can add content.

54
00:04:03,170 --> 00:04:05,590
To add content to a web page.

55
00:04:05,600 --> 00:04:10,270
You need to do that inside these body tags.

56
00:04:10,280 --> 00:04:13,460
So all these are called tags.

57
00:04:13,580 --> 00:04:14,900
This is a head tag.

58
00:04:15,290 --> 00:04:16,839
This is an HTML tag.

59
00:04:16,850 --> 00:04:18,290
This is a body tag.

60
00:04:18,769 --> 00:04:24,320
The actual contents, the visible content is added inside the body tags.

61
00:04:24,590 --> 00:04:27,010
I'll explain what these tags are also.

62
00:04:27,020 --> 00:04:29,240
But let's add some content first.

63
00:04:29,360 --> 00:04:29,930
For example.

64
00:04:29,960 --> 00:04:30,800
Hello here.

65
00:04:31,750 --> 00:04:33,420
You don't need to save the page.

66
00:04:33,430 --> 00:04:37,980
Just go to that button again and hello is rendered in here.

67
00:04:37,990 --> 00:04:42,070
So there we have a simple web page with some content.

68
00:04:42,980 --> 00:04:44,110
Let me zoom that in.

69
00:04:44,500 --> 00:04:45,820
So there we go.

70
00:04:46,270 --> 00:04:47,830
Let's add some more content.

71
00:04:48,550 --> 00:04:56,380
Now it's a good idea to actually use proper tags for each element, for each content that you that you

72
00:04:56,380 --> 00:04:56,870
add.

73
00:04:56,890 --> 00:04:58,930
So I added this tag.

74
00:04:58,960 --> 00:04:59,850
It's a P tag.

75
00:04:59,860 --> 00:05:01,300
It means a paragraph.

76
00:05:01,690 --> 00:05:11,410
A paragraph tag is used to add normal text like, Hello, this is our first web page.

77
00:05:12,840 --> 00:05:15,060
So now if you go to the Web page.

78
00:05:15,910 --> 00:05:19,930
You can refresh or in my case, this refreshes automatically.

79
00:05:20,410 --> 00:05:24,820
Otherwise, you need to press control or command or to refresh the page.

80
00:05:25,970 --> 00:05:28,280
If the automatic refresh is not working.

81
00:05:28,910 --> 00:05:31,730
So that's the paragraph we just added.

82
00:05:32,420 --> 00:05:39,290
Now, it's a good idea to actually indent this with a tab like that, because what we're looking here

83
00:05:39,290 --> 00:05:42,140
is now like a hierarchy of tags.

84
00:05:42,530 --> 00:05:46,370
So the first tag is this dock type HTML.

85
00:05:46,550 --> 00:05:50,430
This is like the declaration of what this type of document is.

86
00:05:50,460 --> 00:05:52,460
And then we have the HTML tag.

87
00:05:52,670 --> 00:05:58,570
Now, if I select this tag, you'll see that this will be highlighted, this closing HTML tag.

88
00:05:58,580 --> 00:06:01,380
So every tag has an opening tag.

89
00:06:01,400 --> 00:06:08,570
So it opens in here and it closes in here and everything inside is part of that tag.

90
00:06:10,020 --> 00:06:11,390
And then we have the head tag.

91
00:06:11,400 --> 00:06:13,980
It opens here and it closes in here.

92
00:06:13,980 --> 00:06:19,830
And everything inside those two tags is part of the head tags, right?

93
00:06:20,040 --> 00:06:22,680
These are part of the two head tags.

94
00:06:23,310 --> 00:06:31,430
Now, these are some declarations of the title of the web page and the character sets of the Web page.

95
00:06:31,440 --> 00:06:38,400
So if we change this to, let's say my Web page and you go to the Web page, you'll see here on the

96
00:06:38,400 --> 00:06:41,790
tab on the browser, my web page is shown.

97
00:06:42,300 --> 00:06:44,220
So that's the title of the Web page.

98
00:06:44,790 --> 00:06:46,510
And then we have the body text.

99
00:06:46,530 --> 00:06:51,740
So now everything that we enter here is part of the actual web page.

100
00:06:51,750 --> 00:06:55,290
So let's show you some more tags.

101
00:06:55,560 --> 00:07:03,630
We have the H one tag welcome and that will render as big font in here.

102
00:07:03,720 --> 00:07:07,740
You also have smaller headings.

103
00:07:07,740 --> 00:07:09,090
So these are headings.

104
00:07:09,390 --> 00:07:15,480
Like, this is our web page and that will render like this.

105
00:07:15,600 --> 00:07:17,420
And then we have the P tags.

106
00:07:17,430 --> 00:07:18,900
So normal text.

107
00:07:19,800 --> 00:07:20,160
Now.

108
00:07:20,160 --> 00:07:21,870
Next, let's add an image.

109
00:07:22,980 --> 00:07:23,950
To add an image.

110
00:07:23,970 --> 00:07:27,050
You need the IMG tag.

111
00:07:27,060 --> 00:07:35,430
But then before you close the tag, you want to add an S or C property, which is equal to this quote.

112
00:07:35,430 --> 00:07:40,290
And inside the codes you need to enter the path to the image you want to display.

113
00:07:40,320 --> 00:07:41,490
Cat dot PNG.

114
00:07:41,520 --> 00:07:48,840
Now this image has to be in the same directory with tutorial dot html, so I'll paste the image here

115
00:07:48,840 --> 00:07:49,780
which I copied before.

116
00:07:49,800 --> 00:07:53,370
You can find this image attached in the lecture resources.

117
00:07:55,160 --> 00:07:57,110
Or we can use your own images.

118
00:07:57,800 --> 00:08:00,860
So get that PNG cat dot png g.

119
00:08:01,250 --> 00:08:03,650
Then you want to close this tag and that's it.

120
00:08:03,680 --> 00:08:08,720
Now, image is one of those tags that doesn't need.

121
00:08:09,950 --> 00:08:11,610
This closing tag.

122
00:08:11,630 --> 00:08:13,730
So you need to remove that.

123
00:08:14,840 --> 00:08:17,270
It doesn't need that tag because.

124
00:08:19,580 --> 00:08:21,690
So that's the content.

125
00:08:21,710 --> 00:08:28,190
So it doesn't need a closing tag because we're not showing any text.

126
00:08:28,190 --> 00:08:32,539
So usually between the tags will show some information.

127
00:08:32,840 --> 00:08:39,590
But since the image path is given through this property, then we don't have any other information to

128
00:08:39,590 --> 00:08:41,030
show besides the image.

129
00:08:41,720 --> 00:08:44,100
Now, this gap is quite big, as you can see.

130
00:08:44,120 --> 00:08:54,800
So for that we can add styling to the image using a style property and that would be equal to quotes

131
00:08:54,800 --> 00:08:56,120
and side quotes.

132
00:08:56,390 --> 00:09:06,260
You give the properties such as width, lets say 500 pixels p x, and then you do this semicolon and

133
00:09:06,260 --> 00:09:07,350
then hide.

134
00:09:07,370 --> 00:09:15,800
So we're still inside these quotes, the height, let's say 400 p x, so don't forget the p x and let's

135
00:09:15,800 --> 00:09:16,730
check the cat.

136
00:09:17,510 --> 00:09:23,510
So I can see that the ratio, the aspect ratio of the image has changed.

137
00:09:23,690 --> 00:09:30,800
So if you want to preserve the aspect ratio, then you need to only give one of these properties.

138
00:09:30,800 --> 00:09:35,420
So only the width and the aspect ratio will adjust.

139
00:09:35,420 --> 00:09:37,980
So the height will be relative to the width.

140
00:09:38,000 --> 00:09:40,100
So that's what we have so far.

141
00:09:41,030 --> 00:09:43,700
Let me show you now how to add a link.

142
00:09:43,730 --> 00:09:56,330
A link can be added using the A tag with an h ref property and very give like https google dot com.

143
00:09:56,330 --> 00:09:57,560
So that's the link.

144
00:09:57,680 --> 00:09:59,210
And then you close the link.

145
00:09:59,360 --> 00:10:06,710
And this has a closing a tag and inside here you give the description of the link, the text of the

146
00:10:06,710 --> 00:10:11,930
link such as Google page and it will be rendered like this.

147
00:10:12,200 --> 00:10:15,140
So if you click that, it will take us to Google.

148
00:10:15,530 --> 00:10:20,750
And the problem here is that this was rendered in the same page with the image.

149
00:10:21,140 --> 00:10:26,030
But you can fix that by using a break tag like that.

150
00:10:26,810 --> 00:10:32,600
So this creates a brake line, as you see now, there's a brake line after the image.

151
00:10:32,600 --> 00:10:39,770
So between the image and the link, you can add more brake lines if you want more space between the

152
00:10:39,800 --> 00:10:41,780
two elements just like that.

153
00:10:43,120 --> 00:10:48,010
Okay, So we need to add one more element to this code and then we're done.

154
00:10:49,300 --> 00:10:53,260
So what I want to add is something here on top.

155
00:10:53,290 --> 00:11:00,850
What I want to add is a NEF element, and this will contain multiple other elements, nested elements

156
00:11:00,850 --> 00:11:03,970
which will be like this.

157
00:11:04,480 --> 00:11:05,260
Tags.

158
00:11:05,290 --> 00:11:08,680
I'll just copy this actually one time.

159
00:11:08,680 --> 00:11:10,780
Two times, three times.

160
00:11:10,810 --> 00:11:15,550
I'll change the links to about.

161
00:11:17,000 --> 00:11:19,010
This to.

162
00:11:20,980 --> 00:11:22,540
Contact us.

163
00:11:25,330 --> 00:11:26,470
And the last one.

164
00:11:28,750 --> 00:11:30,520
Store or something like that.

165
00:11:31,450 --> 00:11:33,610
So let me change the descriptions as well.

166
00:11:33,640 --> 00:11:35,740
I'll explain what I'm doing in just a bit.

167
00:11:36,160 --> 00:11:38,230
Contact us.

168
00:11:39,780 --> 00:11:40,880
And store.

169
00:11:40,890 --> 00:11:47,700
So if I go to the web page now, we will see that what I've just added is the actual navigation menu

170
00:11:47,700 --> 00:11:49,140
of the website.

171
00:11:49,500 --> 00:11:51,990
So that's how you can add the navigation menu.

172
00:11:52,020 --> 00:11:57,300
The problem here is that if we click over one of these, the page is not found.

173
00:11:57,310 --> 00:12:02,610
So you see that the browser is trying to access the page.

174
00:12:02,610 --> 00:12:03,810
Contact us.

175
00:12:04,350 --> 00:12:09,650
The page is not found because this is just one HTML page.

176
00:12:09,660 --> 00:12:13,830
And now we're stepping into the world of interactions.

177
00:12:13,890 --> 00:12:16,740
And to do such interactions.

178
00:12:16,740 --> 00:12:23,150
To enable such interactions, you need a web framework such as Django or Flask.

179
00:12:23,160 --> 00:12:26,340
So these are web frameworks written in Python.

180
00:12:26,850 --> 00:12:34,350
And these enable you to create complete websites with multiple pages so that the pages can interact

181
00:12:34,350 --> 00:12:35,250
with each other.

182
00:12:35,490 --> 00:12:38,040
And so for that, you need web frameworks.

183
00:12:38,040 --> 00:12:41,400
You need a language such as Python or PHP.

184
00:12:41,430 --> 00:12:47,520
So PHP also has its own frameworks and Python has its own frameworks such as FLASK and Django.

185
00:12:47,520 --> 00:12:52,780
And we will use of course Python and exactly how we use Python.

186
00:12:52,800 --> 00:12:56,930
That's a question which you'll understand in the next videos.

187
00:12:56,940 --> 00:12:59,180
So get ready for that and see you later.

188
00:12:59,190 --> 00:12:59,670
Thanks.