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,039 --> 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
It just stuffed that whole

17
00:00:57,380 --> 00:01:02,380
F-string into a body tag without any real HTML tags that gives it structure.

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
Two days ago. So have a quick search for that.

33
00:02:06,470 --> 00:02:10,639
If all of this is confusing and it might be a good time to do a revision on

34
00:02:10,639 --> 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,