1
00:00:02,160 --> 00:00:05,490
So by now, we already learned a lot

2
00:00:05,490 --> 00:00:10,440
about HTML and CSS and how we use these two languages

3
00:00:10,440 --> 00:00:13,500
to bring something onto the screen.

4
00:00:13,500 --> 00:00:16,100
Time for a little wrap-up of what we learned

5
00:00:16,100 --> 00:00:17,270
up to this point.

6
00:00:17,270 --> 00:00:21,380
Most importantly, we learned about HTML elements

7
00:00:21,380 --> 00:00:24,780
and you learned that an HTML element typically

8
00:00:24,780 --> 00:00:29,010
is made up of an opening tag and a closing tag.

9
00:00:29,010 --> 00:00:32,110
And between those tags, you have the actual content.

10
00:00:32,110 --> 00:00:34,210
In case of the h1 element,

11
00:00:34,210 --> 00:00:38,220
which is used to create a main heading, a main title.

12
00:00:38,220 --> 00:00:40,480
The content between the opening and closing tags

13
00:00:40,480 --> 00:00:43,135
is the text of that title.

14
00:00:43,135 --> 00:00:44,960
Other examples for elements

15
00:00:44,960 --> 00:00:46,910
would be the paragraph element

16
00:00:46,910 --> 00:00:49,350
for a regular paragraph of text

17
00:00:49,350 --> 00:00:52,720
or the link element for creating a link.

18
00:00:52,720 --> 00:00:56,480
And the link element also is a another great example

19
00:00:56,480 --> 00:01:01,300
for another key HTML feature, attributes.

20
00:01:01,300 --> 00:01:05,570
We can add attributes to HTML elements

21
00:01:05,570 --> 00:01:10,570
to add extra functionality or configuration to them.

22
00:01:11,100 --> 00:01:13,620
And for example, the anchor element,

23
00:01:13,620 --> 00:01:18,130
which we use to create a link needs this extra attribute

24
00:01:18,130 --> 00:01:20,530
to know, or to tell the browser

25
00:01:20,530 --> 00:01:23,020
where does link should lead to,

26
00:01:23,020 --> 00:01:25,600
because between the opening and closing tags,

27
00:01:25,600 --> 00:01:27,770
we actually only have the text

28
00:01:27,770 --> 00:01:30,000
that should be turned into a link,

29
00:01:30,000 --> 00:01:32,240
but the destination of the link of course,

30
00:01:32,240 --> 00:01:34,170
is a separate thing.

31
00:01:34,170 --> 00:01:36,020
And that's therefore is a great example

32
00:01:36,020 --> 00:01:40,160
for a scenario where we need an HTML attribute.

33
00:01:40,160 --> 00:01:44,670
Now, those HTML attributes are added like you see it here.

34
00:01:44,670 --> 00:01:48,230
You have an attribute name, which is standardized,

35
00:01:48,230 --> 00:01:51,490
just like the HTML elements themselves are.

36
00:01:51,490 --> 00:01:55,410
So different elements support different attributes.

37
00:01:55,410 --> 00:01:59,820
Some attributes can be added to basically all elements

38
00:01:59,820 --> 00:02:04,030
and some attributes can only be added to some elements.

39
00:02:04,030 --> 00:02:07,100
For example, this href attribute cannot be added

40
00:02:07,100 --> 00:02:08,763
to all elements.

41
00:02:09,759 --> 00:02:12,250
Now, after it is attribute name,

42
00:02:12,250 --> 00:02:15,430
we have an equal sign without any white space

43
00:02:15,430 --> 00:02:17,510
between name and equal sign.

44
00:02:17,510 --> 00:02:19,400
And then after the equals sign,

45
00:02:19,400 --> 00:02:23,910
we directly have the so-called attribute value

46
00:02:23,910 --> 00:02:25,630
between double quotes.

47
00:02:25,630 --> 00:02:26,590
That's important.

48
00:02:26,590 --> 00:02:28,710
We always have those double quotes.

49
00:02:28,710 --> 00:02:30,250
And between those quotes,

50
00:02:30,250 --> 00:02:34,420
we have a value that makes sense for the attribute

51
00:02:34,420 --> 00:02:36,073
with which we are working.

52
00:02:36,920 --> 00:02:38,380
Earlier in this course,

53
00:02:38,380 --> 00:02:40,760
you saw the style attribute

54
00:02:40,760 --> 00:02:45,020
and there we had some CSS code as a value.

55
00:02:45,020 --> 00:02:47,490
Now for the link, it's the actual address

56
00:02:47,490 --> 00:02:49,040
this link should be leading to.

57
00:02:50,080 --> 00:02:53,290
Now, we also learned about CSS though,

58
00:02:53,290 --> 00:02:57,440
and we learned that we can add CSS directly to elements,

59
00:02:57,440 --> 00:03:01,260
but that we typically instead write global CSS

60
00:03:01,260 --> 00:03:03,260
as we are doing it here.

61
00:03:03,260 --> 00:03:08,260
The advantage with global CSS is that we have a clear split

62
00:03:08,325 --> 00:03:11,890
between HTML code and CSS code,

63
00:03:11,890 --> 00:03:15,110
and that makes working on our code easier.

64
00:03:15,110 --> 00:03:18,950
And we can also select multiple elements in one go

65
00:03:18,950 --> 00:03:22,310
and apply the same styling to multiple elements

66
00:03:22,310 --> 00:03:24,873
without annoying copy and pasting.

67
00:03:25,840 --> 00:03:28,190
Now for a global CSS,

68
00:03:28,190 --> 00:03:33,190
you create those CSS rules between those style tags.

69
00:03:33,340 --> 00:03:34,530
That's important.

70
00:03:34,530 --> 00:03:38,560
You have to put your CSS code between those style tags

71
00:03:38,560 --> 00:03:42,510
to ensure that the browser understands your intention.

72
00:03:42,510 --> 00:03:47,500
And then you select the kind of element you wanna style

73
00:03:47,500 --> 00:03:51,570
by the element name, without the angle brackets,

74
00:03:51,570 --> 00:03:55,220
and then between curly braces, opening and closing,

75
00:03:55,220 --> 00:04:00,190
you have your CSS property value assignments.

76
00:04:00,190 --> 00:04:03,700
You specify certain CSS properties,

77
00:04:03,700 --> 00:04:06,180
which are also standardized.

78
00:04:06,180 --> 00:04:08,310
So just like elements and attributes,

79
00:04:08,310 --> 00:04:10,850
CSS properties are standardized.

80
00:04:10,850 --> 00:04:13,570
You can't invent your own ones.

81
00:04:13,570 --> 00:04:15,520
And then after a colon,

82
00:04:15,520 --> 00:04:19,190
you have values for those properties.

83
00:04:19,190 --> 00:04:22,690
And the just as with HTML attributes,

84
00:04:22,690 --> 00:04:26,930
different CSS properties want different values.

85
00:04:26,930 --> 00:04:31,170
A value of center, for example, of course makes no sense

86
00:04:31,170 --> 00:04:33,900
as a value for the color property

87
00:04:33,900 --> 00:04:35,283
and vice versa.

88
00:04:36,490 --> 00:04:38,930
So that's how you can add CSS.

89
00:04:38,930 --> 00:04:42,530
Now, as pages tend to become more complex,

90
00:04:42,530 --> 00:04:46,690
you also have to this general HTML page structure,

91
00:04:46,690 --> 00:04:48,640
this skeleton,

92
00:04:48,640 --> 00:04:52,070
and you can split your code

93
00:04:52,070 --> 00:04:57,070
into metadata and actual visible content of your page.

94
00:04:58,220 --> 00:05:03,130
The visible content should go between the body tags

95
00:05:03,130 --> 00:05:07,730
and your metadata, like the styling, but also this title,

96
00:05:07,730 --> 00:05:10,140
which shows up in the browser tab

97
00:05:10,140 --> 00:05:12,230
and in search engine results

98
00:05:12,230 --> 00:05:14,580
should go between those head tags

99
00:05:15,890 --> 00:05:20,310
and both head and body should then go between the html tags.

100
00:05:20,310 --> 00:05:23,143
And you also add this version at the top here.

101
00:05:24,350 --> 00:05:28,230
Now, one important word about putting tags into tags.

102
00:05:28,230 --> 00:05:31,460
So putting elements into elements like we do it here.

103
00:05:31,460 --> 00:05:35,290
This is a totally normal and common thing.

104
00:05:35,290 --> 00:05:37,240
It's one of the main strengths

105
00:05:37,240 --> 00:05:40,220
and important features of HTML

106
00:05:40,220 --> 00:05:44,610
that you can nest HTML elements into each other.

107
00:05:44,610 --> 00:05:45,590
Here, for example,

108
00:05:45,590 --> 00:05:48,090
we have a style element inside of a head element,

109
00:05:48,090 --> 00:05:50,110
inside of html.

110
00:05:50,110 --> 00:05:51,610
And if we scroll down here,

111
00:05:51,610 --> 00:05:54,920
we've got an anchor element inside of a paragraph element,

112
00:05:54,920 --> 00:05:58,203
which is inside of the body, which is inside of html.

113
00:05:59,230 --> 00:06:01,560
This is something you do all the time

114
00:06:01,560 --> 00:06:03,770
when you write HTML code,

115
00:06:03,770 --> 00:06:08,140
since you can only fully express different kinds of content

116
00:06:08,140 --> 00:06:12,560
by combining and nesting different HTML elements.

117
00:06:12,560 --> 00:06:15,300
And we're only getting started regarding that

118
00:06:15,300 --> 00:06:16,513
at this point here.

119
00:06:17,450 --> 00:06:19,850
Now that's a quick summary of first summary

120
00:06:19,850 --> 00:06:20,980
of what we learned.

121
00:06:20,980 --> 00:06:22,543
Now let's dive in deeper.