WEBVTT

1
00:00:00.150 --> 00:00:01.470
Now in the last lesson,

2
00:00:01.530 --> 00:00:05.910
we talked a little bit about how to get different routes to work by using the

3
00:00:05.910 --> 00:00:07.470
app dot route decorator,

4
00:00:08.040 --> 00:00:13.040
as well as how we can create variable paths by using this angle bracket syntax

5
00:00:13.530 --> 00:00:18.530
and how we can convert the path into a pre-specified data type by using this

6
00:00:19.830 --> 00:00:21.840
particular structure. Now,

7
00:00:21.840 --> 00:00:26.840
we also looked at how to run the App in debug mode so that we can auto reload

8
00:00:26.970 --> 00:00:31.530
our server and also get access to the flask debugger. Now,

9
00:00:31.560 --> 00:00:32.340
in this lesson,

10
00:00:32.340 --> 00:00:36.630
I want to talk a little bit about how we can render actual HTML,

11
00:00:36.840 --> 00:00:38.040
because at the moment,

12
00:00:38.070 --> 00:00:43.070
what happens is we're simply just returning a string and we're getting flask to

13
00:00:43.530 --> 00:00:46.710
do whatever it wants with it. And what that means.

14
00:00:46.710 --> 00:00:48.900
If we go into the Chrome inspector,

15
00:00:48.930 --> 00:00:53.930
by going to view and then developer and then develop a tools is we can see it.

16
00:00:55.130 --> 00:00:57.290
<v 1>It just stuffed that whole</v>

17
00:00:57.380 --> 00:01:02.380
<v 0>F-string into a body tag without any real HTML tags that gives it structure.</v>

18
00:01:04.190 --> 00:01:08.240
So that's usually not what you would want when you're creating a website.

19
00:01:08.840 --> 00:01:13.010
So let's see if we can start creating some HTML. Instead.

20
00:01:13.760 --> 00:01:18.760
Now the simplest way to do this is flask actually accepts HTML in the return.

21
00:01:20.510 --> 00:01:23.450
So we could just a simply say,

22
00:01:23.450 --> 00:01:28.450
if we wanted to create an H one by adding an H one opening and closing tag here,

23
00:01:29.510 --> 00:01:34.430
and if I hit save to refresh my server and then go to my home route,

24
00:01:34.730 --> 00:01:38.900
then you can see this is now inside and H one inside the body.

25
00:01:40.010 --> 00:01:43.670
Now, of course you can change this to whatever target is you want,

26
00:01:43.880 --> 00:01:46.520
and it should still work. Now,

27
00:01:46.520 --> 00:01:48.920
once we can start rendering HTML,

28
00:01:48.950 --> 00:01:52.610
we can also start using the HTML attributes, by the way,

29
00:01:52.670 --> 00:01:57.670
if any of this that I'm talking about HTML or CSS or attributes or tags sounds

30
00:01:58.220 --> 00:02:02.600
unfamiliar, it might be because you've skipped the sessions on each balance CSS,

31
00:02:02.840 --> 00:02:04.130
which we went through a few,

32
00:02:04.130 --> 00:02:06.360
<v 1>Two days ago. So have a quick search for that.</v>

33
00:02:06.470 --> 00:02:10.640
<v 0>If all of this is confusing and it might be a good time to do a revision on</v>

34
00:02:10.640 --> 00:02:14.600
that. Anyways. Now coming back to my H one tag,

35
00:02:15.050 --> 00:02:19.280
let's say I wanted to give it some CSS, which is just inline CSS.

36
00:02:19.760 --> 00:02:24.110
So I'm going to set the style and give it some CSS code. For example,

37
00:02:24.170 --> 00:02:28.610
I could set the text, the line CSS property to center,

38
00:02:29.120 --> 00:02:32.780
and now if I hit save and I refresh on my homepage,

39
00:02:33.200 --> 00:02:35.870
my text is now center aligned,

40
00:02:36.950 --> 00:02:39.590
and you can see if I select this H one,

41
00:02:39.860 --> 00:02:43.130
you can see that style being applied right here.

42
00:02:44.840 --> 00:02:49.840
Anything that we can do with inline styling that you saw in the CSS modules or

43
00:02:49.970 --> 00:02:54.970
changing the code to any sort of HTML tag we can do in the return.

44
00:02:55.910 --> 00:03:00.400
Now, what if you wanted to render more than one HTML element? Well,

45
00:03:00.460 --> 00:03:05.020
that's possible as well. All you have to do is just continue typing.

46
00:03:05.020 --> 00:03:09.220
So let's say we wanted to create a paragraph tag. Well,

47
00:03:09.250 --> 00:03:11.230
we could simply create it like this.

48
00:03:11.410 --> 00:03:16.210
So if I hit save and refresh, you can see, this is my H one,

49
00:03:16.270 --> 00:03:17.890
and this is a paragraph,

50
00:03:18.700 --> 00:03:22.210
and this is the updated structure of my HTML file

51
00:03:23.860 --> 00:03:28.860
now because pie charm doesn't really like you going too far over and creating

52
00:03:29.230 --> 00:03:32.350
very long lines of code because it's difficult to read.

53
00:03:32.650 --> 00:03:36.880
One of the neat tricks that it has is if you want to split a string at any

54
00:03:36.880 --> 00:03:39.040
point, all you have to do is hit enter,

55
00:03:39.400 --> 00:03:41.470
and it will add in this backslash for you,

56
00:03:41.770 --> 00:03:45.820
which basically is the equivalent of the same code that we had before.

57
00:03:46.090 --> 00:03:47.830
But it's now much easier to read.

58
00:03:48.280 --> 00:03:52.630
So you can add in as many lines of HTML as you want in this fashion.

59
00:03:54.280 --> 00:03:57.490
For example, if we wanted to add a another line,

60
00:03:57.910 --> 00:04:02.910
then we would go inside the paragraph quotation Mark hit enter to insert another

61
00:04:04.210 --> 00:04:07.870
line. And here we can add our image element.

62
00:04:09.160 --> 00:04:13.000
Our image element is a self closing tags. We don't need the closing tag,

63
00:04:13.240 --> 00:04:15.010
but it does need a source.

64
00:04:15.640 --> 00:04:19.120
And this source could be a image that we find online.

65
00:04:19.540 --> 00:04:24.100
So let's see if we can find a picture of a kitten.

66
00:04:24.940 --> 00:04:26.140
This one looks pretty good.

67
00:04:26.170 --> 00:04:29.740
Let's go ahead and copy the image address here by right clicking.

68
00:04:30.100 --> 00:04:34.750
And then let's piece that in here as the image source. Now,

69
00:04:34.780 --> 00:04:39.190
if I go ahead and hit, save and go back to my website and reload it,

70
00:04:39.490 --> 00:04:42.220
you can see that is my little cat.

71
00:04:42.970 --> 00:04:47.410
Now you can add other attributes, do the image tag. For example,

72
00:04:47.470 --> 00:04:52.470
you can change the width to you only 200 pixels so that it would fit in to this

73
00:04:52.810 --> 00:04:56.860
site a little bit better, or you can manipulate it in any way you want.

74
00:04:57.610 --> 00:05:02.230
Now, the great thing about the image tag is we can also add gifts as well,

75
00:05:02.320 --> 00:05:04.120
and it'll be rendered in our browser.

76
00:05:04.630 --> 00:05:09.490
So Giphy is a great source of gifts from all over the internet.

77
00:05:09.850 --> 00:05:12.880
So let's find an animated kitten on him.

78
00:05:16.120 --> 00:05:20.770
This one is very cute. If we go to copy link and then copy the gift link,

79
00:05:21.220 --> 00:05:23.530
and we replace this URL,

80
00:05:23.560 --> 00:05:28.330
that's currently inside the source with this new URL,

81
00:05:28.750 --> 00:05:33.010
then we would end up with our gift of being rendered as an image. Now,

82
00:05:33.010 --> 00:05:37.900
one thing to note is that as we're changing these source attributes or the style

83
00:05:37.900 --> 00:05:38.733
attributes,

84
00:05:38.860 --> 00:05:43.270
the tax let's going in there is going in as a string with the quotation marks.

85
00:05:43.720 --> 00:05:47.200
So this will clash with any outer quotation marks.

86
00:05:47.560 --> 00:05:52.560
So be sure that if you've got a return as a single quoted string,

87
00:05:53.590 --> 00:05:56.260
that in the middle, if you need to have quotes,

88
00:05:56.500 --> 00:06:00.440
it will be double quotes basically has to be opposite of each other.

89
00:06:01.490 --> 00:06:03.500
If you have single quotes on the outside,

90
00:06:03.530 --> 00:06:05.750
then you're going to be using double quotes on the inside.

91
00:06:05.990 --> 00:06:07.550
If you are using the opposite,

92
00:06:07.580 --> 00:06:10.610
then it's double quotes on the outside that it has to be single quote on the

93
00:06:10.610 --> 00:06:14.300
insight let's hit, save and see if this worked,

94
00:06:14.510 --> 00:06:17.270
go back to our home page, hit refresh,

95
00:06:17.510 --> 00:06:22.510
and you can see there is a fairy cute kitten being rendered in HTML from a flask

96
00:06:25.250 --> 00:06:26.083
server.

97
00:06:27.440 --> 00:06:32.180
So we've now leveled up a website a little bit more. We can now render HTML.

98
00:06:32.210 --> 00:06:36.890
We can put an inline styling and we can add HTML elements to our heart's

99
00:06:36.920 --> 00:06:41.600
content. Now in the next lesson, I've got a little bit of a challenge for you.

100
00:06:42.110 --> 00:06:46.670
And the idea is for you to practice what you learned yesterday about decorators.

101
00:06:47.120 --> 00:06:51.560
It's a bit of a advanced topic, but once you get used to it, it's really,

102
00:06:51.560 --> 00:06:56.090
really handy. So for all of that and more head of it in the next lesson,