1 00:00:00,000 --> 00:00:02,903 Welcome again! In this lecture, you'll 2 00:00:02,909 --> 00:00:05,759 learn how to generate HTML pages using 3 00:00:05,759 --> 00:00:08,489 your Python web app. In the previous 4 00:00:08,489 --> 00:00:10,439 lecture, we simply return some plain 5 00:00:10,439 --> 00:00:14,609 strings, as you see here, so return a 6 00:00:14,609 --> 00:00:17,999 string. Now we will return an HTML 7 00:00:17,999 --> 00:00:21,869 template in here. And to do that, we need to 8 00:00:21,869 --> 00:00:26,309 use the render_template method of the 9 00:00:26,309 --> 00:00:29,699 flask library. And what render_template 10 00:00:29,729 --> 00:00:33,509 does is accesses an HTML file stored 11 00:00:33,509 --> 00:00:36,269 somewhere in our Python application, 12 00:00:36,329 --> 00:00:39,089 in our Python files, and then displays 13 00:00:39,089 --> 00:00:43,919 that HTML all the requested URL. So we need 14 00:00:43,919 --> 00:00:47,939 to replace this with name of the 15 00:00:47,939 --> 00:00:52,889 HTML page, let's say home.html, and 16 00:00:52,889 --> 00:00:55,259 this name here, this file name has to 17 00:00:55,259 --> 00:00:58,799 reflect a real HTML file, which has to 18 00:00:58,799 --> 00:01:03,059 be stored in a folder, which itself has 19 00:01:03,059 --> 00:01:07,079 to be named templates. So be sure you 20 00:01:07,079 --> 00:01:08,729 use this names when you create a 21 00:01:08,729 --> 00:01:12,179 folder. Inside the folder, then you need 22 00:01:12,206 --> 00:01:15,746 to create an HTML file, home.html. 23 00:01:16,679 --> 00:01:18,449 And the name has to reflect the name 24 00:01:18,449 --> 00:01:21,655 you're returning here in the render_template method. 25 00:01:22,207 --> 00:01:24,299 That's it. And here is 26 00:01:24,299 --> 00:01:27,179 where you write the HTML code now. If 27 00:01:27,179 --> 00:01:29,729 you know HTML already, this should be as 28 00:01:29,729 --> 00:01:32,999 easy as breathing. If you don't know 29 00:01:33,029 --> 00:01:34,979 then it should be easy to learn. If you 30 00:01:34,979 --> 00:01:36,599 know a bit of Python now, which you 31 00:01:36,599 --> 00:01:39,809 should, learning HTML is just a breeze. 32 00:01:39,839 --> 00:01:42,329 So just go ahead there and learn some 33 00:01:42,329 --> 00:01:45,989 HTML. It's that easy. But anyway, I'll 34 00:01:45,989 --> 00:01:50,044 create an HTML file here. Everything 35 00:01:50,069 --> 00:01:52,229 starts with a declaration of the 36 00:01:52,259 --> 00:01:56,579 DOCUMENTTYPE html. Then you have the 37 00:01:56,579 --> 00:02:00,809 HTML tags. That was a opening tag, and 38 00:02:00,809 --> 00:02:03,839 you also have a closing tag. That's it, 39 00:02:04,289 --> 00:02:05,549 you have body tags. 40 00:02:05,585 --> 00:02:12,335 [Author typing] 41 00:02:12,360 --> 00:02:14,788 Just like that, and inside here goes the 42 00:02:14,812 --> 00:02:17,340 content of your webpage. So let's 43 00:02:17,340 --> 00:02:20,587 say I want a heading like this. 44 00:02:20,612 --> 00:02:23,476 [No audio] 45 00:02:23,501 --> 00:02:25,354 And inside here you can put some tags, 46 00:02:26,028 --> 00:02:28,421 My homepage, for example. 47 00:02:29,481 --> 00:02:31,020 And yet another different 48 00:02:31,140 --> 00:02:33,570 type of tag, which is a paragraph tag. 49 00:02:33,594 --> 00:02:36,125 [No audio] 50 00:02:36,150 --> 00:02:40,140 And say, This is a test website, click 51 00:02:40,140 --> 00:02:43,410 Save, and yeah, you should be good to go, 52 00:02:43,410 --> 00:02:45,000 go to your script, make sure you have 53 00:02:45,000 --> 00:02:48,510 saved it, and the web app is restarting, and 54 00:02:48,510 --> 00:02:52,770 I'll go now and visit My homepage. This 55 00:02:52,770 --> 00:02:54,750 is the About page. This should be the 56 00:02:54,750 --> 00:02:58,110 homepage. I seem to have a 57 00:02:58,110 --> 00:03:01,320 little typo in here, I guess. Yeah, this 58 00:03:01,351 --> 00:03:04,561 should be h1 as the opening tag, 59 00:03:05,195 --> 00:03:07,505 click Save, and you don't have to re-run 60 00:03:07,530 --> 00:03:10,680 the Python script, just go here, 61 00:03:10,680 --> 00:03:14,100 reload the page, and this is normal text, 62 00:03:14,100 --> 00:03:17,220 now. So this is a paragraph, and this is 63 00:03:17,220 --> 00:03:22,530 heading. Great. So we can also have 64 00:03:22,560 --> 00:03:24,990 another page for the About page. If you 65 00:03:24,990 --> 00:03:27,930 want just quickly Duplicate this, say 66 00:03:27,930 --> 00:03:32,910 about, My about page, here, This is a test 67 00:03:32,910 --> 00:03:36,960 website again, just like that, you go 68 00:03:36,960 --> 00:03:40,500 to your script1 and change this to 69 00:03:40,530 --> 00:03:45,259 render_template and then you pass about.html 70 00:03:45,519 --> 00:03:48,870 click Save, go to the localhost. 71 00:03:49,080 --> 00:03:52,260 This should be the homepage. You have 72 00:03:52,260 --> 00:03:56,100 the about page. Yeah, My about page. So 73 00:03:56,100 --> 00:03:58,800 this is test website again. So that's 74 00:03:58,800 --> 00:04:01,380 it. That's how you pass HTML templates 75 00:04:01,410 --> 00:04:04,410 to your Python web app, and that's how 76 00:04:04,410 --> 00:04:07,830 you map them to your URLs. Let's move on 77 00:04:07,830 --> 00:04:09,240 then to the next lecture.