1
00:00:02,090 --> 00:00:06,060
So let's now continue adding content to our page.

2
00:00:06,060 --> 00:00:09,320
At the moment we have this title and this paragraph,

3
00:00:09,320 --> 00:00:13,115
and now I want to add a second paragraph here.

4
00:00:13,115 --> 00:00:16,960
I want to add a second paragraph below the first one,

5
00:00:16,960 --> 00:00:21,397
where we add more texts and I'm adding this text in a new

6
00:00:21,397 --> 00:00:25,375
paragraph instead of adding it in the first paragraph,

7
00:00:25,375 --> 00:00:30,375
because, A, I soon want to style it differently.

8
00:00:30,970 --> 00:00:33,050
And they [inaudible 00:00:34] shouldn't get the styles

9
00:00:33,050 --> 00:00:35,940
which are applied on this first paragraph.

10
00:00:35,940 --> 00:00:39,069
And B if we use a new paragraph,

11
00:00:39,069 --> 00:00:42,245
we'll automatically get a line break.

12
00:00:42,245 --> 00:00:45,520
If I add some text here

13
00:00:45,520 --> 00:00:48,051
and I add a line break in my code,

14
00:00:48,051 --> 00:00:50,085
you notice that if I reload,

15
00:00:50,085 --> 00:00:53,490
the line break is not here on the page.

16
00:00:53,490 --> 00:00:58,440
And that's something to note and something to be aware of.

17
00:00:58,440 --> 00:01:00,537
Line breaks in your text,

18
00:01:00,537 --> 00:01:05,537
and your code, are ignored by browser, by HTML.

19
00:01:05,630 --> 00:01:09,340
If they are in one of the same HTML element,

20
00:01:09,340 --> 00:01:13,340
basically there are some exceptions and you could also

21
00:01:13,340 --> 00:01:16,970
change this behavior with CSS, but by default,

22
00:01:16,970 --> 00:01:18,681
they are ignored.

23
00:01:18,681 --> 00:01:21,680
So if you have a new paragraph of text,

24
00:01:21,680 --> 00:01:24,725
you really want to create a new paragraph element.

25
00:01:24,725 --> 00:01:27,210
And if you think about it, it makes sense.

26
00:01:27,210 --> 00:01:31,640
The HTML element is called a paragraph element.

27
00:01:31,640 --> 00:01:35,420
So every paragraph of text should be wrapped by its own

28
00:01:35,420 --> 00:01:37,100
paragraph element.

29
00:01:37,100 --> 00:01:40,700
That's the most semantically correct way of structuring your

30
00:01:40,700 --> 00:01:41,880
content.

31
00:01:41,880 --> 00:01:44,530
And that's why I'm using a new paragraph here.

32
00:01:44,530 --> 00:01:47,230
I want to have a new paragraph of text.

33
00:01:47,230 --> 00:01:49,072
Now in this paragraph, I'll say,

34
00:01:49,072 --> 00:01:53,640
I'll achieve this goal

35
00:01:53,640 --> 00:01:55,450
by diving

36
00:01:55,450 --> 00:01:59,438
into more learning resources.

37
00:01:59,438 --> 00:02:01,730
That's the text I'll have here.

38
00:02:01,730 --> 00:02:06,170
And if we save this and reload, we see that text here,

39
00:02:06,170 --> 00:02:09,433
and this text does not have the styling from the first

40
00:02:09,433 --> 00:02:13,500
paragraph because we haven't added to that style attribute

41
00:02:13,500 --> 00:02:14,740
here.

42
00:02:14,740 --> 00:02:18,080
So for the moment, I'll just copy this style,

43
00:02:18,080 --> 00:02:20,978
attribute with the values, with the CSS code,

44
00:02:20,978 --> 00:02:24,990
we assigned to the first paragraph and add it to the second

45
00:02:24,990 --> 00:02:26,553
paragraph as well.

46
00:02:26,553 --> 00:02:30,140
And I'll press this format document shortcut,

47
00:02:30,140 --> 00:02:33,833
so that my code is automatically formatted and is structured

48
00:02:33,833 --> 00:02:36,490
in a more readable way.

49
00:02:36,490 --> 00:02:37,497
And now if I reload,

50
00:02:37,497 --> 00:02:41,142
that second paragraph is styled as well.

51
00:02:41,142 --> 00:02:44,745
Now I'll come back to that styling because having to copy

52
00:02:44,745 --> 00:02:47,892
that style around is not ideal for a couple of reasons,

53
00:02:47,892 --> 00:02:49,860
but I'll come back to that.

54
00:02:49,860 --> 00:02:50,693
For the moment,

55
00:02:50,693 --> 00:02:53,129
I want to add more content and to be precise,

56
00:02:53,129 --> 00:02:57,236
I want to turn more learning resources into a link.

57
00:02:57,236 --> 00:03:00,580
The cost that's another common requirement,

58
00:03:00,580 --> 00:03:02,420
which you might have on any website

59
00:03:02,420 --> 00:03:05,260
you're building that you want to include some links that

60
00:03:05,260 --> 00:03:09,417
lead somewhere else, either to another page of your site.

61
00:03:09,417 --> 00:03:12,820
But at the moment, we only have one page,

62
00:03:12,820 --> 00:03:14,770
one HTML file here.

63
00:03:14,770 --> 00:03:17,880
Or to some external resource.

64
00:03:17,880 --> 00:03:22,000
And here I want to start with some external resource.

65
00:03:22,000 --> 00:03:24,980
Let's simply say, we want to link to Google here,

66
00:03:24,980 --> 00:03:28,480
google.com, but you can link to any page.

67
00:03:28,480 --> 00:03:32,126
If we want to link there, we need to grab that address.

68
00:03:32,126 --> 00:03:36,160
google.com or this complete address,

69
00:03:36,160 --> 00:03:37,920
as it shows up in the browser,

70
00:03:37,920 --> 00:03:40,478
including HTTPS colon slash slash,

71
00:03:40,478 --> 00:03:44,500
we need to grab this address.

72
00:03:44,500 --> 00:03:45,880
And then what?

73
00:03:45,880 --> 00:03:48,638
How do we turn this text into a link?

74
00:03:48,638 --> 00:03:53,638
Well, we got a separate dedicated HTML element for this.

75
00:03:54,280 --> 00:03:56,371
We got the a element

76
00:03:56,371 --> 00:03:59,630
and a stands for anchor tag

77
00:03:59,630 --> 00:04:03,188
and the anchor tag is such a link.

78
00:04:03,188 --> 00:04:08,188
Now this anchor tag needs to be wrapped around the text.

79
00:04:09,320 --> 00:04:11,170
That should become a link.

80
00:04:11,170 --> 00:04:14,630
And then you need to add one very important thing to this

81
00:04:14,630 --> 00:04:16,180
anchor element.

82
00:04:16,180 --> 00:04:20,414
You need to add an HTML attribute because, like this,

83
00:04:20,414 --> 00:04:25,350
we would tell the browser which texts should become a link,

84
00:04:25,350 --> 00:04:28,660
the texts between the opening and closing anchor tags,

85
00:04:28,660 --> 00:04:32,170
but we don't tell the browser what the address,

86
00:04:32,170 --> 00:04:35,868
what the target's destination of this link is.

87
00:04:35,868 --> 00:04:39,800
And to tell the browser, we need to add an attribute here,

88
00:04:39,800 --> 00:04:42,730
which defines this target address.

89
00:04:42,730 --> 00:04:46,975
So that's another example of us adding more information to

90
00:04:46,975 --> 00:04:50,023
an element with help of attributes.

91
00:04:50,900 --> 00:04:55,900
And here it's the h ref, the hyperlink reference attribute,

92
00:04:56,030 --> 00:04:57,149
which we need to add.

93
00:04:57,149 --> 00:04:58,523
How do I know that?

94
00:04:58,523 --> 00:05:01,110
From experience, from the MDN docs,

95
00:05:01,110 --> 00:05:03,421
And of course, by using auto completion.

96
00:05:03,421 --> 00:05:05,085
If we add this attribute,

97
00:05:05,085 --> 00:05:08,647
we can now set a target destination of this link

98
00:05:08,647 --> 00:05:13,277
and here the value then should be the URL we want to go to,

99
00:05:13,277 --> 00:05:15,760
for example, in this case,

100
00:05:15,760 --> 00:05:18,176
HTTPS colon slash slash

101
00:05:18,176 --> 00:05:21,550
www.google.com.

102
00:05:21,550 --> 00:05:25,050
But of course you can use any address here.

103
00:05:25,050 --> 00:05:28,280
And I'll press this auto format shortcut again,

104
00:05:28,280 --> 00:05:30,210
so that this is formatted again,

105
00:05:30,210 --> 00:05:33,010
please note that it did now add a line break

106
00:05:33,010 --> 00:05:35,450
after into, for me here

107
00:05:35,450 --> 00:05:37,560
and that this is no problem.

108
00:05:37,560 --> 00:05:39,380
That this will be ignored, as you learned.

109
00:05:39,380 --> 00:05:42,350
And therefore, this will still be one sentence in one line

110
00:05:42,350 --> 00:05:44,830
once it's output by the browser.

111
00:05:44,830 --> 00:05:48,120
And speaking of that, let's see what the browser outputs.

112
00:05:48,120 --> 00:05:49,368
If I reload now,

113
00:05:49,368 --> 00:05:53,370
we see that more learning resources is underlined.

114
00:05:53,370 --> 00:05:56,510
And if I click on it, I'm taken to Google.

115
00:05:56,510 --> 00:05:57,860
And of course, now I'll go back

116
00:05:57,860 --> 00:05:59,560
because I want to stay on my page.

117
00:06:00,690 --> 00:06:03,048
Now, regarding the fact that it's underlined

118
00:06:03,048 --> 00:06:05,369
and actually also has a different color.

119
00:06:05,369 --> 00:06:09,660
We did learn that we can now inspect this in the browser to

120
00:06:09,660 --> 00:06:11,890
open the dev tools and have a look at

121
00:06:11,890 --> 00:06:13,800
why it's looking this way.

122
00:06:13,800 --> 00:06:14,750
And here, indeed,

123
00:06:14,750 --> 00:06:18,040
we see that we haven't assigned any custom styles,

124
00:06:18,040 --> 00:06:20,840
but we have some user agent styles.

125
00:06:20,840 --> 00:06:23,660
And here, some color is set and the text decoration

126
00:06:23,660 --> 00:06:25,120
is set to underline.

127
00:06:25,120 --> 00:06:27,633
And that's why we do have this look here.

128
00:06:28,750 --> 00:06:30,580
So that's now a link added.

129
00:06:30,580 --> 00:06:32,538
And of course that's another key feature

130
00:06:32,538 --> 00:06:35,533
because basically every webpage we're going to build

131
00:06:35,533 --> 00:06:38,223
will, very likely, need some links.