WEBVTT FILE





1
00:00:05.899 --> 00:00:11.010
in this video and we're gonna start learning HTML components and

2
00:00:11.010 --> 00:00:16.350
specifically we'll be looking arts headings so first of all let's open our

3
00:00:16.350 --> 00:00:22.080
text editor we're gonna need to open our HTML folder so we're gonna use the

4
00:00:22.080 --> 00:00:28.260
getting started link and then open folder and if we go to the desktop and

5
00:00:28.260 --> 00:00:33.260
then the complete web development course then we can select the HTML folder just

6
00:00:33.260 --> 00:00:39.809
click on selects folder and now you can see our HTML folder in there and all the

7
00:00:39.809 --> 00:00:43.950
files inside the fold okay and if you click on any of the files you can see

8
00:00:43.950 --> 00:00:49.140
the corresponding code for that file at the moment swim cause only one file but

9
00:00:49.140 --> 00:00:52.920
all the files that we're going to be creating during the HTML chapter I'm

10
00:00:52.920 --> 00:00:58.050
gonna go here so what I'm gonna do I'm gonna splits my screen into two halves

11
00:00:58.050 --> 00:01:03.960
so the right-hand side half is gonna have the HTML code and the left-hand

12
00:01:03.960 --> 00:01:08.369
side house is gonna have the corresponding web page - that's code so

13
00:01:08.369 --> 00:01:13.500
so use the right-hand side half I'm gonna click on the windows button and

14
00:01:13.500 --> 00:01:20.549
the right arrow okay and the web page is gonna go there

15
00:01:20.549 --> 00:01:25.500
so rather than going to the course folder HTML and opening the page using

16
00:01:25.500 --> 00:01:30.240
Chrome what I'm gonna do I'm gonna use one of the really good functionalities

17
00:01:30.240 --> 00:01:34.740
of brackets I'm gonna use the live preview icon so if you click on last

18
00:01:34.740 --> 00:01:45.240
icon okay and then click on window left then you can see the actual web page

19
00:01:45.240 --> 00:01:50.610
corresponding to the HTML code in there and the good thing is if you click on

20
00:01:50.610 --> 00:01:55.380
any of the elements in there you can see the corresponding elements in the web

21
00:01:55.380 --> 00:02:01.500
page and also if you make any change you can see the change happening live as

22
00:02:01.500 --> 00:02:08.399
you're changing the code okay so this is one of the really great functionalities

23
00:02:08.399 --> 00:02:13.470
of brackets so now we're gonna look at headings

24
00:02:13.470 --> 00:02:21.240
so I'm gonna go to the Wikipedia homepage okay and I'm gonna go to an

25
00:02:21.240 --> 00:02:28.500
article so let's type nature and we've got a really nice article in here about

26
00:02:28.500 --> 00:02:34.260
nature let's see how we can make a heading just like this one so if you go

27
00:02:34.260 --> 00:02:41.250
to if you click right and go to inspect elements okay so if you open this

28
00:02:41.250 --> 00:02:48.290
division okay you will see that's our heading

29
00:02:48.290 --> 00:02:55.320
okay corresponds to this code all right now you can see that we're using an h1

30
00:02:55.320 --> 00:03:01.260
tag and some text between the tags okay other moments forgets about the ass

31
00:03:01.260 --> 00:03:07.170
abuse okay but just remember will cause h1 tags and text between attacks so

32
00:03:07.170 --> 00:03:15.060
let's go ahead and practice this so so we're gonna create a new file I'm gonna

33
00:03:15.060 --> 00:03:23.459
call it headings those HTML okay and I'm gonna copy the code from the hello world

34
00:03:23.459 --> 00:03:32.670
file and we'll change the title to headings okay and we're gonna get rid of

35
00:03:32.670 --> 00:03:40.820
the paragraph so we're going to create our first heading using h1 right and

36
00:03:40.820 --> 00:03:52.470
we're gonna call it first heading or it's quite a heading one okay so if I

37
00:03:52.470 --> 00:03:58.080
click on control D I'm gonna duplicate this line and I'm going to create

38
00:03:58.080 --> 00:04:02.550
another heading but this time I'm gonna use I'm gonna create a smaller one using

39
00:04:02.550 --> 00:04:07.950
h2 and you can see that's the second heading is smaller than the first

40
00:04:07.950 --> 00:04:14.519
heading okay and if you duplicate again control D we can create another one h3

41
00:04:14.519 --> 00:04:23.180
and eat smaller than B two previous ones and we can carry on until

42
00:04:24.340 --> 00:04:32.919
okay H four five and then six and a smaller one we can have on a smallest we

43
00:04:32.919 --> 00:04:38.190
can have is H six okay that's this more that's the smallest size you can have

44
00:04:38.190 --> 00:04:45.900
okay so let's see regarding headings in the next video we'll learn paragraphs