WEBVTT 00:00:07.860 --> 00:00:13.500 In this video we're going to learn how to include a BHP file inside another BHB file. 00:00:13.500 --> 00:00:17.320 So what do we mean by including a file inside another file. 00:00:17.460 --> 00:00:22.470 Imagine does you need to build many BHB pages and all of them. 00:00:22.470 --> 00:00:24.220 They include the same header. 00:00:24.690 --> 00:00:34.100 So rather than writing the code for the header in each of those files you can just create a header was 00:00:34.110 --> 00:00:40.760 BHB a file and include that file inside the other BHB pages. 00:00:40.850 --> 00:00:41.810 OK. 00:00:42.690 --> 00:00:52.590 So in our example we are going to create a header and include it in our file and we're going to also 00:00:52.590 --> 00:00:55.910 create a future and include it in our file. 00:00:55.980 --> 00:01:00.450 So I've already created a blank page footer. 00:01:00.510 --> 00:01:02.160 Another blank page header. 00:01:02.200 --> 00:01:07.410 So we going to write some code inside these two files and then we going to include those files inside 00:01:07.470 --> 00:01:08.550 our file. 00:01:09.090 --> 00:01:10.520 All right. 00:01:11.730 --> 00:01:14.100 OK so let's start with the header. 00:01:14.520 --> 00:01:18.110 So we're going to have in the head we're just going to have a nav bar. 00:01:18.390 --> 00:01:23.910 So if you go to your bootstrap folder and just import a nav bar from there 00:01:28.090 --> 00:01:30.150 OK so you can just copy 00:01:33.930 --> 00:01:36.390 this number OK from here 00:01:44.100 --> 00:01:49.060 and then you can paste it inside the head. 00:01:49.410 --> 00:01:50.070 OK. 00:01:50.400 --> 00:01:56.830 So now what we can to do going to include this hetero's BHB inside our file. 00:01:57.450 --> 00:01:59.000 OK. 00:02:00.360 --> 00:02:04.380 OK so to do that we're going to write some code at the beginning of the body 00:02:07.400 --> 00:02:11.150 this writes are BHP tag. 00:02:13.100 --> 00:02:14.020 OK. 00:02:14.190 --> 00:02:20.180 Now we're going to use the function include. 00:02:20.800 --> 00:02:21.270 OK. 00:02:21.450 --> 00:02:27.860 So if you explore this function and are not experts. 00:02:27.960 --> 00:02:37.140 But anyway so this function is going to include the file inside our file here. 00:02:37.200 --> 00:02:47.940 So we are going to say the location of our file in quotes we don't need parentheses for the include 00:02:47.940 --> 00:02:48.600 function. 00:02:48.840 --> 00:02:52.280 So our file is in the same workspace so we're just going to write easily. 00:02:52.690 --> 00:02:55.220 It's header that's BHB. 00:02:55.860 --> 00:02:57.420 OK. 00:02:57.600 --> 00:03:07.500 So now if we refresh the page we can see we've got our nav bar at the beginning of the page on it. 00:03:08.400 --> 00:03:17.130 OK so let's change the styling a little bit although we have some gap between the number and the div 00:03:17.130 --> 00:03:17.910 . 00:03:17.910 --> 00:03:26.910 So let's change the name of the class Contacts form to containing div for example 00:03:29.150 --> 00:03:31.830 . 00:03:32.570 --> 00:03:33.200 OK. 00:03:33.360 --> 00:03:37.750 And let's get more money. 00:03:37.760 --> 00:03:40.540 That's rather if you're going to go 400. 00:03:41.190 --> 00:03:44.230 So if you're fresh that looks better. 00:03:44.670 --> 00:03:52.980 Ok so now we're done with our headers so we created a headed up HP file and we have included inside 00:03:53.040 --> 00:03:56.070 our file using the include function. 00:03:56.070 --> 00:03:59.300 Now we get to do the same with the footer. 00:03:59.450 --> 00:04:07.890 OK but before we create the future of field the file We're just going to write the same code inside 00:04:07.920 --> 00:04:12.340 of file and this time we're going to write it's right at the end. 00:04:12.570 --> 00:04:14.410 OK. 00:04:16.140 --> 00:04:21.480 And this time we want to include footer both BHB. 00:04:22.230 --> 00:04:29.790 So if you refresh the page nothing will happen because the footer file is empty but now let's go to 00:04:29.790 --> 00:04:35.060 the to this file and fill it with some code. 00:04:36.060 --> 00:04:39.340 Ok so are going to create a bootstrap footer. 00:04:39.600 --> 00:04:40.190 OK. 00:04:40.350 --> 00:04:49.370 So we're going to use the footer tag to create our footer. 00:04:52.080 --> 00:04:52.970 OK. 00:04:53.010 --> 00:05:02.850 We're going to give you a class footer and then inside the footer tag we're going to have a container 00:05:02.860 --> 00:05:03.830 . 00:05:05.160 --> 00:05:05.720 OK. 00:05:05.730 --> 00:05:08.920 And then we're going to place a paragraph inside the container. 00:05:09.160 --> 00:05:13.230 So it's a div plus container. 00:05:13.260 --> 00:05:14.840 We have a paragraph inside 00:05:21.430 --> 00:05:23.850 so. 00:05:24.450 --> 00:05:27.430 So let's have some text in the paragraph 00:05:32.880 --> 00:05:37.220 and see how this goes. 00:05:37.380 --> 00:05:40.710 These are the moments where you just see our future. 00:05:40.710 --> 00:05:48.520 There is not the best food that we can have but we're going to add some styling in little bits. 00:05:48.750 --> 00:05:51.230 Ok is it regarding text. 00:05:51.700 --> 00:05:59.590 Let's have a let's have some copyright text so we can write some BHB code 00:06:03.820 --> 00:06:13.180 or that's OK because we're going to need today's dates or Today's the current year. 00:06:13.270 --> 00:06:18.710 So we're going to get the currents here using the date function in a Ph.D.. 00:06:18.980 --> 00:06:23.710 OK so let's writes Our PSP tag. 00:06:24.020 --> 00:06:26.290 OK. 00:06:28.450 --> 00:06:29.140 OK. 00:06:29.260 --> 00:06:36.720 Let's define a variable today where we're going to store the current year. 00:06:36.740 --> 00:06:42.840 OK so forget the currents here we going to use the Date function and we're going to use only one prime 00:06:42.860 --> 00:06:43.910 reason for the formants. 00:06:44.080 --> 00:06:51.120 And since we want only the year we're going to use only the letter Y capital we put it for you. 00:06:51.260 --> 00:06:52.370 OK. 00:06:52.780 --> 00:06:55.120 Now that we are going to echo 00:07:04.940 --> 00:07:11.330 copyrights and then we need the copyright symbol. 00:07:11.510 --> 00:07:17.230 We're going to use the entity corresponding to the copyrights 00:07:20.270 --> 00:07:29.290 and then we going to say for example from 2010 for example until the current year it's going to be today 00:07:29.310 --> 00:07:30.160 . 00:07:30.440 --> 00:07:40.110 So if we save and refresh we can see copyrights the copyright symbol from 2010 to 2015. 00:07:40.750 --> 00:07:44.800 OK now let's toile our paragraph. 00:07:44.810 --> 00:07:47.920 I'm going to use a bootstrap class. 00:07:48.500 --> 00:07:53.910 It's text muted. 00:07:55.930 --> 00:08:00.450 OK so text looks a bit no. 00:08:01.270 --> 00:08:02.000 OK. 00:08:02.500 --> 00:08:08.220 All right so now we are going to add some styling to our future. 00:08:08.500 --> 00:08:13.180 So we're just going to add a style elements at the top 00:08:16.990 --> 00:08:17.560 so 00:08:22.000 --> 00:08:24.430 that style the footer class 00:08:27.570 --> 00:08:30.010 OK. 00:08:31.940 --> 00:08:32.520 OK. 00:08:32.600 --> 00:08:38.290 So just bear in mind the footer class is our class it's not a drop class we just defined this class 00:08:38.290 --> 00:08:38.570 . 00:08:38.650 --> 00:08:40.480 You can name is anything you want. 00:08:40.490 --> 00:08:48.710 OK so we're going to we want our footer to stick to the bottom. 00:08:48.830 --> 00:08:54.070 So first of all we are going to give it a position absolute's. 00:08:54.910 --> 00:08:56.910 OK. 00:08:58.430 --> 00:09:00.100 And we're going to set the 00:09:04.180 --> 00:09:07.860 bottom to zero. 00:09:08.090 --> 00:09:10.330 OK so that it sticks to the bottom. 00:09:10.580 --> 00:09:17.510 OK so if we save this and refresh we can see that now it is sticking to the bottom. 00:09:17.970 --> 00:09:19.270 All right. 00:09:20.260 --> 00:09:23.450 Let's also give it a whit 00:09:27.430 --> 00:09:28.400 of sense 00:09:33.910 --> 00:09:37.220 and a background color 00:09:40.350 --> 00:09:44.530 this is a gray color 00:09:49.490 --> 00:09:54.510 . 00:09:55.390 --> 00:09:56.760 You know this looks like 00:10:06.110 --> 00:10:08.050 mine lays out some heights 00:10:10.660 --> 00:10:18.970 so it sets the plate to 60 pixels for example. 00:10:20.350 --> 00:10:26.090 OK it looks better now. 00:10:31.100 --> 00:10:31.510 OK. 00:10:31.660 --> 00:10:37.340 So since we have said the position two absolutes we are going to choose which balance elements is going 00:10:37.340 --> 00:10:40.070 to be relative. 00:10:40.380 --> 00:10:45.800 We get to set the Ishmail elements to be relative. 00:10:45.910 --> 00:11:03.100 So let's syle the shemale elements and this gives us a position relative. 00:11:03.160 --> 00:11:05.470 Now if we're fresh. 00:11:06.120 --> 00:11:16.840 OK so we can see you now the footer has gone up any second to the top here. 00:11:16.880 --> 00:11:24.550 So to avoid this we're going to give our human elements a mean heights OK. 00:11:24.850 --> 00:11:28.420 Of hundred percent. 00:11:30.500 --> 00:11:35.860 And then we can see that he has gone back to the bottom. 00:11:36.260 --> 00:11:40.260 OK. 00:11:40.410 --> 00:11:47.680 And also usually we would add to the body element a margin bottom. 00:11:47.710 --> 00:11:49.750 OK. 00:11:50.570 --> 00:11:52.880 Just to keep some gap in there. 00:11:53.000 --> 00:12:04.770 So let's add some styling to the body and give it a margin both of the example of 60 pixels. 00:12:07.510 --> 00:12:09.180 OK. 00:12:10.340 --> 00:12:18.640 OK so that's how we include files using BHB. 00:12:19.120 --> 00:12:19.520 OK. 00:12:19.510 --> 00:12:31.010 So in the next video we get to cover file handling.