1
00:00:02,020 --> 00:00:05,220
So let's now add the actual content,

2
00:00:05,220 --> 00:00:06,939
text and images,

3
00:00:06,939 --> 00:00:10,980
which the visitors of our website will be able to see.

4
00:00:10,980 --> 00:00:14,420
And I'll start here in the header.

5
00:00:14,420 --> 00:00:15,890
In that header,

6
00:00:15,890 --> 00:00:20,280
If you recall that screenshot of the finished project,

7
00:00:20,280 --> 00:00:21,780
I want to have a title,

8
00:00:21,780 --> 00:00:23,630
and I want to have an image.

9
00:00:23,630 --> 00:00:24,660
And this image,

10
00:00:24,660 --> 00:00:27,103
which I already provided to you.

11
00:00:28,000 --> 00:00:29,080
Now for the title,

12
00:00:29,080 --> 00:00:32,280
I'll use the h1 element,

13
00:00:32,280 --> 00:00:37,280
to mark up this main page title.

14
00:00:37,350 --> 00:00:40,210
And it's up to you which title text you want to have here,

15
00:00:40,210 --> 00:00:42,680
but on that screenshot from earlier,

16
00:00:42,680 --> 00:00:47,680
I had HTML and CSS Basics Summary

17
00:00:47,940 --> 00:00:50,003
so I will stick to that text.

18
00:00:51,320 --> 00:00:53,520
Now, below that title,

19
00:00:53,520 --> 00:00:56,330
we had an image on that screenshot.

20
00:00:56,330 --> 00:00:57,163
And therefore,

21
00:00:57,163 --> 00:00:58,830
I want to add an image here as well,

22
00:00:58,830 --> 00:01:01,160
and you'll learn how that works.

23
00:01:01,160 --> 00:01:05,000
There is the dedicated image element here,

24
00:01:05,000 --> 00:01:08,790
which also happens to be a white element,

25
00:01:08,790 --> 00:01:12,050
with no content but instead configured

26
00:01:12,050 --> 00:01:14,930
through attributes only.

27
00:01:14,930 --> 00:01:17,540
So we can add those attributes here

28
00:01:17,540 --> 00:01:19,830
for this extra configuration

29
00:01:19,830 --> 00:01:21,320
and for the image.

30
00:01:21,320 --> 00:01:22,990
That's the src,

31
00:01:22,990 --> 00:01:25,900
the source attribute which we need,

32
00:01:25,900 --> 00:01:27,960
and the alt attribute,

33
00:01:27,960 --> 00:01:29,510
which we typically want to add.

34
00:01:30,440 --> 00:01:32,880
With the source attribute,

35
00:01:32,880 --> 00:01:34,810
we set the image source,

36
00:01:34,810 --> 00:01:38,900
so we point at the image file that should be embedded.

37
00:01:38,900 --> 00:01:40,690
And with the alt attribute,

38
00:01:40,690 --> 00:01:43,200
we provide an alternative text

39
00:01:43,200 --> 00:01:46,300
which should be displayed if the image is not loaded

40
00:01:46,300 --> 00:01:47,630
for some reason,

41
00:01:47,630 --> 00:01:49,410
or if a blind user,

42
00:01:49,410 --> 00:01:50,243
for example,

43
00:01:50,243 --> 00:01:51,550
visits our page,

44
00:01:51,550 --> 00:01:54,853
then that's the description of what's on the image.

45
00:01:55,960 --> 00:01:58,340
So here for a source, I just want to point at

46
00:01:58,340 --> 00:02:01,460
HTML, CSS, png.

47
00:02:01,460 --> 00:02:03,530
And for alt,

48
00:02:03,530 --> 00:02:06,340
I want to set an alternative description.

49
00:02:06,340 --> 00:02:09,750
And since that image basically contains the

50
00:02:09,750 --> 00:02:14,210
HTML5 and the CSS3 logo,

51
00:02:14,210 --> 00:02:17,220
I just want to, well,

52
00:02:17,220 --> 00:02:20,220
describe that or add that as a description.

53
00:02:20,220 --> 00:02:23,610
So HTML and CSS logos,

54
00:02:23,610 --> 00:02:26,960
because that's what's on the images.

55
00:02:26,960 --> 00:02:30,003
Now this is our header content.

56
00:02:30,930 --> 00:02:32,450
Now to preview it,

57
00:02:32,450 --> 00:02:35,190
I'll right click on this index HTML file

58
00:02:35,190 --> 00:02:38,150
and open it with that live server extension,

59
00:02:38,150 --> 00:02:42,490
which manual installed in the last course section.

60
00:02:42,490 --> 00:02:44,280
If you haven't installed it yet,

61
00:02:44,280 --> 00:02:47,450
because you skipped that last section for whatever reason,

62
00:02:47,450 --> 00:02:50,030
you can go to view extensions,

63
00:02:50,030 --> 00:02:53,120
and their search for live server,

64
00:02:53,120 --> 00:02:56,160
and then the live server extension by Ritwick Dey,

65
00:02:56,160 --> 00:02:58,350
that's the extension you want to install.

66
00:02:58,350 --> 00:03:00,040
And once you've got that installed,

67
00:03:00,040 --> 00:03:02,350
you can right click on that file

68
00:03:02,350 --> 00:03:04,340
and open it with live server.

69
00:03:04,340 --> 00:03:08,640
And that will then give you that auto reloading version

70
00:03:08,640 --> 00:03:09,540
of your page

71
00:03:09,540 --> 00:03:12,720
which is served by that development server.

72
00:03:12,720 --> 00:03:14,510
Now let me zoom in again a bit,

73
00:03:14,510 --> 00:03:15,870
and with that,

74
00:03:15,870 --> 00:03:17,230
that's what we got.

75
00:03:17,230 --> 00:03:19,710
And that's the content we added thus far,

76
00:03:19,710 --> 00:03:21,830
but of course it's not very pretty.

77
00:03:21,830 --> 00:03:24,840
It's lacking all styling and they are for

78
00:03:24,840 --> 00:03:26,240
in the next minutes,

79
00:03:26,240 --> 00:03:28,170
we will add some styles here,

80
00:03:28,170 --> 00:03:30,220
to make this look prettier and

81
00:03:30,220 --> 00:03:32,833
to give the overall page a better look.