WEBVTT FILE





1
00:00:05.839 --> 00:00:10.889
in this video we're gonna learn how different HTML elements interacts with

2
00:00:10.889 --> 00:00:16.440
each other and how much space they take in the webpage first of all you're gonna

3
00:00:16.440 --> 00:00:26.730
create a new file and we're gonna call it in line versus book I'm gonna explain

4
00:00:26.730 --> 00:00:34.340
in a bit what it means okay let's close the files as we don't need

5
00:00:34.340 --> 00:00:40.950
okay and let's enforce the content from the previous file change the title to

6
00:00:40.950 --> 00:00:49.379
inline vs. block okay and let's get rid of the body

7
00:00:49.379 --> 00:00:56.579
content for now okay so let's review the difference HTML elements we have covered

8
00:00:56.579 --> 00:01:02.850
so far so we have covered headings so we're gonna create a heading okay

9
00:01:02.850 --> 00:01:10.140
we have also covered paragraphs so I'm going to create a simple paragraph and

10
00:01:10.140 --> 00:01:21.360
also we have covered links so this creates a link I'll give it an H ref go

11
00:01:21.360 --> 00:01:37.799
into the Google home page and let's create an image and give it a source go

12
00:01:37.799 --> 00:01:49.130
into images picture dodging back let's give it a width of 200 pixels okay

13
00:01:50.869 --> 00:02:00.479
unless it's so so if we start with the first elements so what we notice is that

14
00:02:00.479 --> 00:02:08.280
it starts with a line break and it ends with a line break okay and also we can

15
00:02:08.280 --> 00:02:12.860
see that the elements is taking as much space

16
00:02:12.860 --> 00:02:19.580
as possible when it comes to the width okay so it starts in there and it ends

17
00:02:19.580 --> 00:02:24.470
at the end of the line okay even though it doesn't read he doesn't really need

18
00:02:24.470 --> 00:02:29.420
all this space by in terms of the heights is taking just as much as much

19
00:02:29.420 --> 00:02:34.520
height as it needs if you go to the paragraph you'll see something similar

20
00:02:34.520 --> 00:02:40.220
so the width we taking the whole line and height we're just taking as much

21
00:02:40.220 --> 00:02:45.740
height as we need and also the paragraph starts with a line break and ends with a

22
00:02:45.740 --> 00:02:52.880
line break well if we move to the link you will see that the link has got a

23
00:02:52.880 --> 00:02:57.110
very small heights only when it needs and also a very small with only what it

24
00:02:57.110 --> 00:03:03.020
needs so the width of the link doesn't go all the way we still see that's the

25
00:03:03.020 --> 00:03:07.250
link starts with a line break I'm gonna show you in a bit salty that line break

26
00:03:07.250 --> 00:03:13.610
it doesn't belong to the link itself and then after that will cause the image so

27
00:03:13.610 --> 00:03:20.950
the image is just taking the space that it needs depending on our a speeds okay

28
00:03:20.950 --> 00:03:32.110
and also there is no line break between the link and the image so there is a

29
00:03:32.110 --> 00:03:38.989
difference between the heading paragraph on one side and the link and picture on

30
00:03:38.989 --> 00:03:45.310
the other side so the heading and the paragraph we call them block elements

31
00:03:45.310 --> 00:03:49.900
block elements they all start with a line break on the end of the line break

32
00:03:49.900 --> 00:03:57.470
the link and the image they are in line elements so they just sits next to the

33
00:03:57.470 --> 00:04:02.360
preceding elements if it's an inline elements if it's a a block element like

34
00:04:02.360 --> 00:04:06.830
the link coming outs are coming after the paragraph it still starts adds a new

35
00:04:06.830 --> 00:04:12.560
line okay so if we want to have a line break

36
00:04:12.560 --> 00:04:16.880
between the link and the picture all we need to do is place a line break in

37
00:04:16.880 --> 00:04:23.890
there using the BR tag okay and now we can see that's because a line break that

38
00:04:23.890 --> 00:04:31.400
okay let's get rid of that now also if you place the link between

39
00:04:31.400 --> 00:04:38.390
the heading and the paragraph you will see that's the link now has got a line

40
00:04:38.390 --> 00:04:41.720
break before it's on a line break after it but none of them belongs to the link

41
00:04:41.720 --> 00:04:46.460
itself the light break before the link belongs to the heading and the line

42
00:04:46.460 --> 00:04:51.730
break after the link belongs to the paragraph so to summarize block elements

43
00:04:51.730 --> 00:04:56.570
like headings they start with a line break and with the line break and they

44
00:04:56.570 --> 00:05:02.600
take as much space as possible for the width okay they take the whole line and

45
00:05:02.600 --> 00:05:07.490
the only take as much space as they need for the height inline elements like

46
00:05:07.490 --> 00:05:13.490
links or images they don't have a line break before them unless they come after

47
00:05:13.490 --> 00:05:17.840
a block elements but the line break belongs to the block elements in that

48
00:05:17.840 --> 00:05:22.580
case and they don't have a line break after them unless they are followed by a

49
00:05:22.580 --> 00:05:27.500
block elements but in that case the line break belongs to the block elements and

50
00:05:27.500 --> 00:05:34.520
also they take as much space as they need okay in terms of the width and

51
00:05:34.520 --> 00:05:39.560
height okay so that's how we differentiate in line elements from

52
00:05:39.560 --> 00:05:42.520
block elements