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

2
00:00:04,701 --> 00:00:05,660
How's it going?

3
00:00:05,660 --> 00:00:07,700
You've learned so
much about semantic-markup,

4
00:00:07,700 --> 00:00:10,990
displaying images, structuring and
formatting page content and more,

5
00:00:10,990 --> 00:00:13,264
that you're ready to start using
what you've learned to code

6
00:00:13,264 --> 00:00:14,620
websites on your own.

7
00:00:14,620 --> 00:00:17,750
In these final videos you'll push
your HTML coding skills further

8
00:00:17,750 --> 00:00:20,750
by learning more about file paths and
linking to web pages.

9
00:00:20,750 --> 00:00:23,790
You'll also learn to work
with special HTML characters,

10
00:00:23,790 --> 00:00:25,480
comment your code and explore tips and

11
00:00:25,480 --> 00:00:27,600
resources that will help
you go forward with HTML.

12
00:00:28,620 --> 00:00:31,970
Links can also navigate to
a specific section of a webpage.

13
00:00:31,970 --> 00:00:32,720
For example,

14
00:00:32,720 --> 00:00:36,150
if you're building a single-page
website similar to our VR site.

15
00:00:36,150 --> 00:00:38,980
Where the main content sections
like about articles and

16
00:00:38,980 --> 00:00:41,275
contact appear on the same page.

17
00:00:41,275 --> 00:00:45,510
You'll want your navigation to link to
those specific sections of the page.

18
00:00:47,280 --> 00:00:52,509
Also, on long webpages that users
have to scroll through to read.

19
00:00:52,509 --> 00:00:56,650
Developers often include a back to
top link at the bottom of the page.

20
00:00:56,650 --> 00:01:00,296
To make it easier for users to get back to
the top without having to scroll up from

21
00:01:00,296 --> 00:01:02,230
the bottom of the page.

22
00:01:02,230 --> 00:01:06,370
So, now let's set our main nav
to link to each of the main

23
00:01:06,370 --> 00:01:08,230
content sections of our webpage.

24
00:01:08,230 --> 00:01:12,820
Linking to a specific section of
a webpage is a two step process.

25
00:01:12,820 --> 00:01:16,540
First, you identify the parts
of the page you want to link to.

26
00:01:16,540 --> 00:01:19,940
Then, you set your links to navigate
to the parts you've identified.

27
00:01:21,160 --> 00:01:25,220
We'll first identify the parts of
the page we want our links to navigate to

28
00:01:25,220 --> 00:01:26,703
using the id attribute.

29
00:01:26,703 --> 00:01:32,390
The id attribute can be used on any HTML
element to give it a unique identifier.

30
00:01:32,390 --> 00:01:37,143
So let's give the section
element containing our about

31
00:01:37,143 --> 00:01:39,375
content an id attribute.

32
00:01:39,375 --> 00:01:42,615
And we'll set the value to about.

33
00:01:42,615 --> 00:01:45,424
Let's scroll down to the VR section and

34
00:01:45,424 --> 00:01:50,461
give the opening section tag an ID
attribute with the value articles.

35
00:01:54,089 --> 00:01:58,587
And we'll give our contact
section the ID contact.

36
00:02:01,521 --> 00:02:07,580
Since ID's are unique, no two ID's in the
same HTML file should have the same value.

37
00:02:07,580 --> 00:02:12,680
In other words, now that we've defined
the ID names about, articles and contact,

38
00:02:12,680 --> 00:02:16,520
we shouldn't set any other
elements' ID to these values,

39
00:02:16,520 --> 00:02:19,040
here in index.html.

40
00:02:19,040 --> 00:02:23,686
Next we'll link the nav to these three
sections by targeting each of the ID

41
00:02:23,686 --> 00:02:26,300
values within the href attributes.

42
00:02:26,300 --> 00:02:29,510
And the values need to
start with the hash or

43
00:02:29,510 --> 00:02:32,790
pound symbol followed by the value
of the ID you want to link to.

44
00:02:32,790 --> 00:02:39,283
So for example, to set the about link to
navigate to the about ID we just set,

45
00:02:39,283 --> 00:02:43,950
set the href value to #about,
and so on.

46
00:02:43,950 --> 00:02:49,160
So, we'll set articles to #articles
and contact to #contact.

47
00:02:51,706 --> 00:02:56,410
Save the file, refresh the page and
if we click the about navigation link,

48
00:02:56,410 --> 00:02:59,180
it navigates us to the about section.

49
00:02:59,180 --> 00:03:02,760
Clicking Articles takes us to
the latest VR article's heading,

50
00:03:02,760 --> 00:03:05,750
and Contact takes us down
to the contact section.

51
00:03:05,750 --> 00:03:06,590
Great.

52
00:03:06,590 --> 00:03:11,151
So when linking to a specific
section of a different webpage.

53
00:03:11,151 --> 00:03:15,260
You need to include the path to the file
before the pound symbol and the ID name.

54
00:03:15,260 --> 00:03:20,172
So for example, to set the read more
link here to navigate directly to

55
00:03:20,172 --> 00:03:23,653
the beginning of the article
in article.html,

56
00:03:23,653 --> 00:03:28,169
I'll give the article the ID vr-article.

57
00:03:33,229 --> 00:03:40,070
Over in index.html, the path to
article.html is already defined.

58
00:03:40,070 --> 00:03:43,513
So we'll add #vr-article to the path.

59
00:03:52,293 --> 00:03:55,241
I'll give index.html a save,

60
00:03:55,241 --> 00:03:59,236
refresh the browser and
clicking one of the read more links

61
00:03:59,236 --> 00:04:03,634
navigates us to the start of the article,
here on article.html.

62
00:04:08,739 --> 00:04:13,779
Next, we should update the navigation
links in the article.html file.

63
00:04:13,779 --> 00:04:19,161
To point to the unique sections
we defined earlier in index.html.

64
00:04:19,161 --> 00:04:23,360
Now, one way you can do this
is by including the path and

65
00:04:23,360 --> 00:04:28,898
name of the file index.html before
the hash symbol and ID names.

66
00:04:28,898 --> 00:04:34,500
Remember the ../ instructs the browser
to move out of the current directory.

67
00:04:34,500 --> 00:04:39,216
So we include two to move up
to the root of the project.

68
00:04:39,216 --> 00:04:41,862
Then move into index.html and

69
00:04:41,862 --> 00:04:47,160
navigate to the section with
the ID about, article or contact.

70
00:04:47,160 --> 00:04:50,564
In this case we'll do #about.

71
00:04:50,564 --> 00:04:52,050
And let's update the other two.

72
00:04:56,330 --> 00:05:00,352
This one will be #articles,

73
00:05:00,352 --> 00:05:02,165
and #contact.

74
00:05:13,341 --> 00:05:14,837
All right, that works great!

75
00:05:14,837 --> 00:05:19,200
Now we've been using document
relative paths so far.

76
00:05:19,200 --> 00:05:22,720
And these indicate the path
from one file to another file.

77
00:05:22,720 --> 00:05:27,080
But there's also another type of
path called a root-relative path.

78
00:05:27,080 --> 00:05:29,540
This describes the path from the main,

79
00:05:29,540 --> 00:05:33,310
or root folder of the
site to a file on that site.

80
00:05:33,310 --> 00:05:36,480
Now root relative paths have
some benefits and draw backs.

81
00:05:36,480 --> 00:05:37,950
And I'll teach you about
them in the next video.