1
00:00:00,000 --> 00:00:04,771
[MUSIC]

2
00:00:04,771 --> 00:00:05,595
Hey there.

3
00:00:05,595 --> 00:00:09,040
Adding images and
links is a big part of building websites.

4
00:00:09,040 --> 00:00:12,630
To add an image to a page, or
link to another page in your site,

5
00:00:12,630 --> 00:00:16,520
you need to understand where that image or
page lives.

6
00:00:16,520 --> 00:00:20,980
In other words, where is the image or page
within the folder structure of the site?

7
00:00:20,980 --> 00:00:26,405
For example, you might want to add a photo
that's inside a folder named images or

8
00:00:26,405 --> 00:00:29,130
link to a page that's inside
a folder named books,

9
00:00:29,130 --> 00:00:32,170
which is inside another
folder named products.

10
00:00:32,170 --> 00:00:36,770
So to link to other pages, and reference
resources of your site like images,

11
00:00:36,770 --> 00:00:41,788
you provide a file path, that instructs
one file where another file is.

12
00:00:41,788 --> 00:00:45,050
The file path is what describes
the location of a file

13
00:00:45,050 --> 00:00:47,050
in a website's folder structure.

14
00:00:47,050 --> 00:00:51,360
So you've learned that when linking
to files within the same site,

15
00:00:51,360 --> 00:00:57,880
you do not need to specify the full URL,
including the https:// or

16
00:00:57,880 --> 00:01:01,710
the domain name in the file path
like we do with absolute URLs.

17
00:01:01,710 --> 00:01:04,891
So for example,
to link to the article page,

18
00:01:04,891 --> 00:01:10,775
we simply include the path to the filename
article.html and the links href value.

19
00:01:10,775 --> 00:01:15,967
These types of URLs are called relative
URLs because the file path you

20
00:01:15,967 --> 00:01:21,180
specify depends on or is relative
to where your HTML document lives.

21
00:01:21,180 --> 00:01:25,280
Relative URLs provide a shorthand way
of letting the browser know where to

22
00:01:25,280 --> 00:01:26,540
find your file.

23
00:01:26,540 --> 00:01:29,448
The top level folder in a site,
or the folder

24
00:01:29,448 --> 00:01:34,335
that holds all the files in other folders,
is called the root directory.

25
00:01:34,335 --> 00:01:39,570
So currently all of our files are in just
one directory, the root of the site.

26
00:01:39,570 --> 00:01:44,930
So we can link to any file, by including
just the file name, article.html for

27
00:01:44,930 --> 00:01:49,440
example, however, websites are usually
organized by placing resources and

28
00:01:49,440 --> 00:01:53,320
files for different section of
the site into separate folders.

29
00:01:53,320 --> 00:01:57,880
For example, the articles in one
folder and images in another folder.

30
00:01:57,880 --> 00:02:01,560
So now let's look at a few examples
of how to adjust your file paths

31
00:02:01,560 --> 00:02:03,870
based on the directory a file's in.

32
00:02:03,870 --> 00:02:06,460
First, lets add a new folder for articles.

33
00:02:06,460 --> 00:02:12,010
So in our workspaces menu, we'll select
File > New Folder, and name it articles.

34
00:02:14,330 --> 00:02:18,380
Then select and
drag article.html into the new folder.

35
00:02:20,200 --> 00:02:23,950
So the article's folder
is a child directory, or

36
00:02:23,950 --> 00:02:26,727
subdirectory, of the root folder.

37
00:02:26,727 --> 00:02:28,406
Over in the browser,

38
00:02:28,406 --> 00:02:34,680
clicking one of the Read more links in
index.html returns a Not Found page.

39
00:02:34,680 --> 00:02:39,115
So now we'll need to adjust
the link's path to indicate where

40
00:02:39,115 --> 00:02:43,320
article.html is in relation to index.html.

41
00:02:43,320 --> 00:02:48,710
So to reference or link to a file that's
inside a sub folder like articles, you

42
00:02:48,710 --> 00:02:54,115
include the name of the folder, followed
by a forward slash and the file name.

43
00:02:54,115 --> 00:02:58,727
So in our Read more link's href
value we'll type the name of

44
00:02:58,727 --> 00:03:02,521
the folder which is articles/article.html.

45
00:03:02,521 --> 00:03:04,050
Now let's do the same for the next link.

46
00:03:05,355 --> 00:03:08,670
Folder name forward slash
followed by the file name.

47
00:03:10,850 --> 00:03:13,590
Save our file, we'll refresh the page.

48
00:03:14,890 --> 00:03:18,008
You'll see that the Read more links
now take you back to the article.

49
00:03:21,789 --> 00:03:25,967
Now to link to a file that's
inside a parent or root folder,

50
00:03:25,967 --> 00:03:31,400
from within a sub folder like articles,
you'll need to instruct the browser

51
00:03:31,400 --> 00:03:36,770
to go up one level, out of the current
folder, and up to its parent folders.

52
00:03:36,770 --> 00:03:42,179
For example, in article.html to
set the Home link in the nav,

53
00:03:42,179 --> 00:03:47,080
to navigate to index.html,
from inside this sub folder

54
00:03:47,080 --> 00:03:51,387
you will need to include
../ in the href value.

55
00:03:51,387 --> 00:03:55,682
Then, after the forward slash,
include the file name to link to,

56
00:03:55,682 --> 00:03:57,488
in this case index.html.

57
00:03:57,488 --> 00:04:02,810
So each ../ instructs
the browser to go up one level

58
00:04:02,810 --> 00:04:06,190
out of the current folder and
up to its container folder.

59
00:04:06,190 --> 00:04:10,857
So over in the browser, let's click
Read more to bring up the article page.

60
00:04:10,857 --> 00:04:15,670
And clicking the Home link
takes us back to index.html,

61
00:04:15,670 --> 00:04:21,284
because the value tells the browser
to go back to the root folder and

62
00:04:21,284 --> 00:04:23,330
display index.html.

63
00:04:23,330 --> 00:04:27,677
So now let's create
a subfolder of articles and

64
00:04:27,677 --> 00:04:34,320
we'll name this folder 2017, and
place article.html inside it.

65
00:04:38,060 --> 00:04:41,630
If we go back to the browser,
refresh, and click Read More,

66
00:04:41,630 --> 00:04:43,801
we once again get the Not Found page.

67
00:04:43,801 --> 00:04:48,147
So now,
to link to a file inside this subfolder,

68
00:04:48,147 --> 00:04:54,199
that's two levels deep from the root
of the project, you include

69
00:04:56,170 --> 00:05:01,000
articles, then a forward slash, followed
by the name of the subfolder, 2017,

69.5
00:05:01,000 --> 00:05:05,000
followed by another forward slash,
then the file name.

70
00:05:18,028 --> 00:05:25,810
So now, can you figure out how to link
back to index.html from this subfolder?

71
00:05:25,810 --> 00:05:27,761
Feel free to pause the video and try it.

72
00:05:33,479 --> 00:05:39,687
Since each ../ instructs the browser to go
up one level out of the current folder,

73
00:05:39,687 --> 00:05:43,710
we'll need to include two to
move up two directories or

74
00:05:43,710 --> 00:05:48,190
back up to the root directory
where index.html is located.

75
00:05:48,190 --> 00:05:49,010
Give that a save.

76
00:05:50,170 --> 00:05:52,590
Let's refresh the article page, and

77
00:05:52,590 --> 00:05:55,220
clicking Home takes us back
to our home page, perfect.

78
00:05:56,440 --> 00:06:00,700
So in the next video, you'll get more
practice writing relative file paths,

79
00:06:00,700 --> 00:06:02,323
by adding images to the page.

80
00:06:02,323 --> 00:06:02,823
See you then.