1 00:00:02,090 --> 00:00:03,557 Now, adding this favicon 2 00:00:03,557 --> 00:00:05,840 was the first thing I wanted to do. 3 00:00:05,840 --> 00:00:08,600 Now there's one last topic I wanna cover 4 00:00:08,600 --> 00:00:11,670 and that's about the paths to the different files 5 00:00:11,670 --> 00:00:13,760 which we have here in our links, 6 00:00:13,760 --> 00:00:16,250 but also for example in index.html 7 00:00:16,250 --> 00:00:17,893 here for the image element. 8 00:00:18,740 --> 00:00:20,960 These paths here which we have here 9 00:00:20,960 --> 00:00:24,100 are actually so-called relative paths, 10 00:00:24,100 --> 00:00:28,800 which means they're seen relative from the current file on. 11 00:00:28,800 --> 00:00:31,370 So since index and full-week.html 12 00:00:31,370 --> 00:00:33,630 both sit in the main project folder, 13 00:00:33,630 --> 00:00:35,890 the paths basically are the same. 14 00:00:35,890 --> 00:00:38,440 We always say for this image here, for example, 15 00:00:38,440 --> 00:00:40,350 that we dive into the images folder, 16 00:00:40,350 --> 00:00:43,430 which sits next to the index.html file. 17 00:00:43,430 --> 00:00:45,390 The images folder is right next to it. 18 00:00:45,390 --> 00:00:49,860 And then there separated by a slash inside of that folder 19 00:00:49,860 --> 00:00:52,313 it's this image which we wanna display. 20 00:00:53,690 --> 00:00:56,320 Now, when using an actual server 21 00:00:56,320 --> 00:01:00,040 like the development server with the live server extension 22 00:01:00,040 --> 00:01:04,170 or after deploying our website, for example, to Netlify, 23 00:01:04,170 --> 00:01:07,853 we also have an alternative to use relative paths. 24 00:01:08,880 --> 00:01:11,440 Instead of specifying a relative path, 25 00:01:11,440 --> 00:01:14,970 we could also specify an absolute path 26 00:01:14,970 --> 00:01:18,020 and this is for example done by adding a slash 27 00:01:18,020 --> 00:01:21,270 at the beginning here, which was not there before 28 00:01:21,270 --> 00:01:23,173 here for this trophy image. 29 00:01:24,320 --> 00:01:26,820 If I do this here on the development server, 30 00:01:26,820 --> 00:01:28,240 you see nothing changed. 31 00:01:28,240 --> 00:01:29,810 The image is still displayed 32 00:01:30,730 --> 00:01:33,940 because the absolute path informs the server 33 00:01:33,940 --> 00:01:35,470 that this should always be seen 34 00:01:35,470 --> 00:01:38,523 from the root folder that's being served, 35 00:01:39,670 --> 00:01:41,180 which of course is the same folder 36 00:01:41,180 --> 00:01:44,100 as the index.html file is in. 37 00:01:44,100 --> 00:01:46,920 So therefore here, it doesn't make a difference. 38 00:01:46,920 --> 00:01:49,980 It can be useful to use absolute paths 39 00:01:49,980 --> 00:01:52,100 instead of relative paths though 40 00:01:52,100 --> 00:01:56,130 if you have HTML files in nested folders. 41 00:01:56,130 --> 00:01:59,490 If I, for example, add a new folder here 42 00:01:59,490 --> 00:02:01,870 and name it full-week, 43 00:02:01,870 --> 00:02:05,670 and I move full-week.html into that folder, 44 00:02:05,670 --> 00:02:08,419 and then maybe I rename it to index.html 45 00:02:08,419 --> 00:02:10,780 so that would be basically use the folder name 46 00:02:10,780 --> 00:02:13,520 as the main indicator of the content that's in it, 47 00:02:13,520 --> 00:02:17,150 and then we name all our HTML files equally, 48 00:02:17,150 --> 00:02:19,450 but they're stored in different folders, 49 00:02:19,450 --> 00:02:23,140 then we would have the problem that this index.html file 50 00:02:23,140 --> 00:02:26,990 can still be reached because the server will by default 51 00:02:26,990 --> 00:02:29,120 serve an index.html file 52 00:02:29,120 --> 00:02:32,620 if you try to find a file in the full-week folder. 53 00:02:32,620 --> 00:02:37,620 Hence here, if I try to load /full-week as a path 54 00:02:39,160 --> 00:02:42,830 without .html on my local development server, 55 00:02:42,830 --> 00:02:45,510 this file is still found and displayed, 56 00:02:45,510 --> 00:02:48,470 but as you see, the styles are missing. 57 00:02:48,470 --> 00:02:49,970 And the styles are missing 58 00:02:49,970 --> 00:02:53,150 because the paths to the style files are incorrect 59 00:02:53,150 --> 00:02:56,810 inside of this index.html file, inside of full-week, 60 00:02:56,810 --> 00:02:58,910 because they're relative. 61 00:02:58,910 --> 00:03:02,163 And that's where absolute paths could be helpful. 62 00:03:03,320 --> 00:03:06,320 Here, instead of pointing at a styles folder, 63 00:03:06,320 --> 00:03:09,140 which is expected next to this HTML file, 64 00:03:09,140 --> 00:03:10,980 which is not the case anymore, 65 00:03:10,980 --> 00:03:12,840 by adding a slash in front of this, 66 00:03:12,840 --> 00:03:17,110 we say start at the root level of this project folder again, 67 00:03:17,110 --> 00:03:19,400 so in this case the overall root project folder, 68 00:03:19,400 --> 00:03:21,850 and then look for a styles folder there, 69 00:03:21,850 --> 00:03:24,600 which of course does exist in that root level. 70 00:03:24,600 --> 00:03:27,130 So now we can switch this all to absolute paths 71 00:03:27,130 --> 00:03:30,110 in all these places, also for the images, 72 00:03:30,110 --> 00:03:32,050 so for the icon here, 73 00:03:32,050 --> 00:03:34,110 and also for this link here 74 00:03:34,110 --> 00:03:37,720 where we wanna load the starting page again. 75 00:03:37,720 --> 00:03:40,770 Instead of looking for a file named index.html 76 00:03:40,770 --> 00:03:43,890 in this full-week folder, which would be the wrong file, 77 00:03:43,890 --> 00:03:46,130 we can point at just slash 78 00:03:46,130 --> 00:03:48,910 and this tells the server that we wanna load 79 00:03:48,910 --> 00:03:50,580 the main index.html file 80 00:03:50,580 --> 00:03:53,060 in the main root project folder again, 81 00:03:53,060 --> 00:03:55,453 which is this index.html file here. 82 00:03:56,620 --> 00:04:00,590 So we can do that here in the full-week.html page. 83 00:04:00,590 --> 00:04:03,450 And on index.html on the starting page, 84 00:04:03,450 --> 00:04:05,800 I just wanna change that link at the bottom 85 00:04:05,800 --> 00:04:08,640 and not look for a full-week.html file 86 00:04:08,640 --> 00:04:11,600 next to this root index.html file, 87 00:04:11,600 --> 00:04:14,370 because such a file doesn't exist anymore. 88 00:04:14,370 --> 00:04:18,060 Instead here, I wanna dive into the full-week.html folder, 89 00:04:18,060 --> 00:04:20,990 and I could point at the index.html file here, 90 00:04:20,990 --> 00:04:23,310 or since servers look automatically 91 00:04:23,310 --> 00:04:25,410 for such an index.html file, 92 00:04:25,410 --> 00:04:28,713 I can just point at the folder name like this basically. 93 00:04:30,620 --> 00:04:33,300 With that, I'm still using some relative paths here 94 00:04:33,300 --> 00:04:35,550 in the root index.html file, 95 00:04:35,550 --> 00:04:38,320 but that's okay because there they still work. 96 00:04:38,320 --> 00:04:41,470 We could change them to absolute paths though. 97 00:04:41,470 --> 00:04:45,530 But in the nested index.html file, which is in a subfolder, 98 00:04:45,530 --> 00:04:48,380 we have to switch to these absolute paths 99 00:04:48,380 --> 00:04:52,023 to ensure that these resources are still all found. 100 00:04:54,040 --> 00:04:57,810 And with that, if we reload, this all works again, 101 00:04:57,810 --> 00:05:01,250 but now we leveraged those absolute paths. 102 00:05:01,250 --> 00:05:03,030 And that's not a must do. 103 00:05:03,030 --> 00:05:04,970 There was nothing wrong with that, 104 00:05:04,970 --> 00:05:08,890 but it is helpful if your page grows, your website grows, 105 00:05:08,890 --> 00:05:11,220 and you have multiple HTML files 106 00:05:11,220 --> 00:05:13,610 and you wanna start organizing those files 107 00:05:13,610 --> 00:05:15,560 into subfolders as well. 108 00:05:15,560 --> 00:05:18,290 With absolute paths, that's easy to do. 109 00:05:18,290 --> 00:05:20,090 And knowing about the difference 110 00:05:20,090 --> 00:05:22,410 between relative and absolute paths 111 00:05:22,410 --> 00:05:24,830 is important as a web developer anyways. 112 00:05:24,830 --> 00:05:27,960 So here you go, and that's that for the end of this section. 113 00:05:27,960 --> 00:05:31,660 Now we're ready to learn more about HTML and CSS 114 00:05:31,660 --> 00:05:34,023 and how we write proper websites.