WEBVTT FILE





1
00:00:06.529 --> 00:00:11.370
in this video we're gonna get introduced to the structure of a website

2
00:00:11.370 --> 00:00:14.280
this means that we're going to be covering the main components that's

3
00:00:14.280 --> 00:00:20.480
built up the skeleton of a webpage so first I'm going to open a Google Chrome

4
00:00:20.480 --> 00:00:27.990
and then we're gonna go to the Wikipedia home page click write and go to inspect

5
00:00:27.990 --> 00:00:34.290
elements so you see here on the left hand side is the Wikipedia home page and

6
00:00:34.290 --> 00:00:41.430
on the right hand side you can see the actual HTML code behind the web page so

7
00:00:41.430 --> 00:00:45.870
the way it works is when you type the address of the websites there is a

8
00:00:45.870 --> 00:00:51.360
request that's sent to the server where this website lives and then if the

9
00:00:51.360 --> 00:00:56.610
request is successful is gonna send this HTML code that's gonna get downloaded by

10
00:00:56.610 --> 00:01:05.040
your computer and then the web browser in our case Google Chrome is going to

11
00:01:05.040 --> 00:01:12.590
read this code and then interpret it and it will render the web page accordingly

12
00:01:12.590 --> 00:01:16.950
ok so that's how it works so now we're gonna go through this HTML

13
00:01:16.950 --> 00:01:22.590
code line by line and just understand its structure so first of all we've got

14
00:01:22.590 --> 00:01:29.310
a doctype or document type which is just a telling the browser what document type

15
00:01:29.310 --> 00:01:37.140
our web page is and in our case it's HTML which refers to html5 there are

16
00:01:37.140 --> 00:01:41.820
other document types but in our course we're gonna work mainly with html5 the

17
00:01:41.820 --> 00:01:49.320
latest HTML as we're speaking now ok and then moving on to the next line we've

18
00:01:49.320 --> 00:01:55.200
got an HTML elements so if you go through details here we've called a and

19
00:01:55.200 --> 00:02:01.890
open brackets then HTML and of course a closed bracket star and in between

20
00:02:01.890 --> 00:02:09.720
rakaats some other text so this HTML between two brackets is what we call a

21
00:02:09.720 --> 00:02:16.830
tag okay if you go a little bit further there will be another tag okay HTML

22
00:02:16.830 --> 00:02:20.160
between two brackets that's another sank but this one has caused a forward slash

23
00:02:20.160 --> 00:02:26.190
Enix so this first one is what we call an open tag and the second one is what

24
00:02:26.190 --> 00:02:31.950
we call a closed tag as a general rule anytime you open like that you would

25
00:02:31.950 --> 00:02:40.020
need to close like that okay and just before the end of the open tag this text

26
00:02:40.020 --> 00:02:45.210
is adding some properties to our tag as I think as an example we've got a

27
00:02:45.210 --> 00:02:49.560
language property or a language attribute which is just setting language

28
00:02:49.560 --> 00:02:54.420
to multiple as you can see Lee we could be the home page indeed has got multiple

29
00:02:54.420 --> 00:03:03.480
languages in it okay so the HTML elements starts there and ends there and

30
00:03:03.480 --> 00:03:10.950
it tells the browser that's our web page starts here and ends there okay all

31
00:03:10.950 --> 00:03:17.660
right so inside the HTML elements we've got other elements listed in it and

32
00:03:17.660 --> 00:03:22.380
we've got a head elements and a body element so it starts with the head

33
00:03:22.380 --> 00:03:30.330
elements so if you expand it we can see other elements inside it okay so first

34
00:03:30.330 --> 00:03:36.270
of all you'll notice an open tag and a closing and let's go through the

35
00:03:36.270 --> 00:03:44.120
contents of these head elements line by line so first of all we've got a comment

36
00:03:44.150 --> 00:03:51.660
comments are used by developers to make their code more readable it can be used

37
00:03:51.660 --> 00:03:58.050
by yourself or by any other developer to see the structure of the code okay all

38
00:03:58.050 --> 00:04:04.020
right so moving on to the next one we've got a meta elements or meta data so meta

39
00:04:04.020 --> 00:04:10.050
data is some machine possible data doesn't appear on the web page but it

40
00:04:10.050 --> 00:04:16.109
will add some extra information to the browser so that it can render the page

41
00:04:16.109 --> 00:04:19.440
in a proper way so this metadata for example is a

42
00:04:19.440 --> 00:04:23.910
character sets we just said which is just a success in the character encoding

43
00:04:23.910 --> 00:04:32.259
of our page to utf-8 by the way utf-8 includes almost all the

44
00:04:32.259 --> 00:04:35.259
symbols and characters in the world and this is gonna be the character sets

45
00:04:35.259 --> 00:04:40.090
we're gonna be using for all our websites in this course okay you'll

46
00:04:40.090 --> 00:04:44.680
notice does this tag all these element doesn't have a close tag we've got only

47
00:04:44.680 --> 00:04:52.930
an open tag and as we call a sailfin closing tag okay all right moving on

48
00:04:52.930 --> 00:05:01.300
we've got a title open tag close tag and the title is Wikipedia and it's exactly

49
00:05:01.300 --> 00:05:05.860
the title you see at the top here of your tab and also if you want to add

50
00:05:05.860 --> 00:05:10.900
this page to your favorites this title is gonna be suggested to you you can

51
00:05:10.900 --> 00:05:16.360
change your of course all right okay so then we've got another comment

52
00:05:16.360 --> 00:05:22.690
and then record another emitter elements it's a view ports so the view post is

53
00:05:22.690 --> 00:05:32.199
used by the browser to render your web page in different device sizes okay so

54
00:05:32.199 --> 00:05:36.370
the way so the browser is gonna use the properties you aren't here for the for

55
00:05:36.370 --> 00:05:41.409
your viewport so as an example we've called users column a scalable equals

56
00:05:41.409 --> 00:05:45.610
yes meaningless we're allowing the user to zoom in and zoom out and you can test

57
00:05:45.610 --> 00:05:53.820
us if you wanna zoom in or zoom out you can see that you can do this okay and

58
00:05:53.820 --> 00:06:00.009
then we've got link elements after that so link elements they are used to link

59
00:06:00.009 --> 00:06:04.780
your web page to external resources so it's allowing the web browser to use

60
00:06:04.780 --> 00:06:09.099
these external resources for various purposes so as an example this link here

61
00:06:09.099 --> 00:06:14.409
this link elements is linking the process to a style sheet which is going

62
00:06:14.409 --> 00:06:19.240
to be used for decoration purposes okay so it's gonna be used to style your age

63
00:06:19.240 --> 00:06:24.849
then half the decoration you want for it okay and then we've got a style elements

64
00:06:24.849 --> 00:06:31.630
and it's got type here of text CSS so if you open it you will see I've got some

65
00:06:31.630 --> 00:06:36.789
code in it and this code is just styling your web page as well okay and we're

66
00:06:36.789 --> 00:06:41.590
gonna cover this in detail in the CSS chapter of this course

67
00:06:41.590 --> 00:06:46.370
okay so that's its and then we've got a comment unlesss so let's say for the

68
00:06:46.370 --> 00:06:50.870
head elements so to summarize the head usually will

69
00:06:50.870 --> 00:06:56.780
contain various bits of information which are going to be used by the web

70
00:06:56.780 --> 00:07:02.710
browser for different purposes styling for example adding a title to your page

71
00:07:02.710 --> 00:07:08.509
and so on and then we move on to the body element so the body is everything

72
00:07:08.509 --> 00:07:15.469
that you see on the page everything that appears there is gonna be in the body so

73
00:07:15.469 --> 00:07:21.560
if we expand it you will notice that when we hover on any of these elements

74
00:07:21.560 --> 00:07:29.030
you will see the corresponding elements on the page being highlighted okay

75
00:07:29.030 --> 00:07:33.770
so as an example if you hover on this first one this is an h1 or a heading

76
00:07:33.770 --> 00:07:40.400
okay which is equivalent to a big title so when you hover on this you can see

77
00:07:40.400 --> 00:07:46.340
the Wikipedia header being highlighted and then if we expand it inside this

78
00:07:46.340 --> 00:07:55.099
heading will cause an image unless the image talking about alright let's go to

79
00:07:55.099 --> 00:07:59.770
another one let's go to this division okay div for division so if we expand it

80
00:07:59.770 --> 00:08:04.550
well see that we've got other divisions in it as an example this is a division

81
00:08:04.550 --> 00:08:12.589
this one so if we expand its we're gonna find a link inside division so a tag for

82
00:08:12.589 --> 00:08:17.960
a link and that's the reference of the link if you click on it it will take you

83
00:08:17.960 --> 00:08:24.409
somewhere and if we expand the link we'll find some other elements inside

84
00:08:24.409 --> 00:08:30.550
the link so we've got some texture some other texture and where's the male sex

85
00:08:30.550 --> 00:08:37.760
so this text here is surrounded by these tanks strong which are just making the

86
00:08:37.760 --> 00:08:43.640
text look bold and this one is surrounded by the e/m tanks which are

87
00:08:43.640 --> 00:08:48.410
just adding some infinite emphasis to the text another last one is surrounded

88
00:08:48.410 --> 00:08:53.660
by the small tanks Chris which are just making the text look smaller than

89
00:08:53.660 --> 00:08:57.740
anything else and between each of these you have a

90
00:08:57.740 --> 00:09:06.890
line-break BR for lane break okay so that's that's a quick introduction to

91
00:09:06.890 --> 00:09:13.460
the structure of a webpage in the next video we're gonna build our very first

92
00:09:13.460 --> 00:09:15.940
web page