1
00:00:08,930 --> 00:00:12,225
Let's talk about writing clean code.

2
00:00:12,225 --> 00:00:15,900
When I'm talking about clean code I'm talking about learning how to

3
00:00:15,900 --> 00:00:19,875
write code that's going to work on as many devices as possible.

4
00:00:19,875 --> 00:00:21,250
وللقيام بهذا،

5
00:00:21,250 --> 00:00:25,605
you need to know a little bit about the document object model,

6
00:00:25,605 --> 00:00:27,840
also called the DOM.

7
00:00:27,840 --> 00:00:30,929
When HTML5 was developed

8
00:00:30,929 --> 00:00:35,280
the main kind of driving goal is that they want to stick by the standard.

9
00:00:35,280 --> 00:00:38,625
That any new features should be based on HTML,

10
00:00:38,625 --> 00:00:41,710
CSS, the DOM, and JavaScript,

11
00:00:41,710 --> 00:00:44,450
and you can have a chance to learn about each one of those.

12
00:00:44,450 --> 00:00:47,930
But I want to talk about the DOM for just a little bit

13
00:00:47,930 --> 00:00:53,075
because it's going to help you understand the HTML a little bit better.

14
00:00:53,075 --> 00:00:59,120
One of the things about geeky computer scientists like myself is that we love trees.

15
00:00:59,120 --> 00:01:03,200
Not like trees out outside that are green and beautiful in the fall.

16
00:01:03,200 --> 00:01:05,075
We like mathematical trees.

17
00:01:05,075 --> 00:01:10,970
These tree-like structures that we can prove to be valid or invalid.

18
00:01:10,970 --> 00:01:15,950
So, when we talk about HTML as a tree we're talking about

19
00:01:15,950 --> 00:01:22,520
this idea that at the very root of the tree we are going to be creating HTML.

20
00:01:24,510 --> 00:01:28,095
Then, from that tree when we say,

21
00:01:28,095 --> 00:01:30,105
"I'm going to make an HTML document."

22
00:01:30,105 --> 00:01:31,605
We want to parts.

23
00:01:31,605 --> 00:01:36,640
We want the head over here, and we want the body.

24
00:01:36,640 --> 00:01:40,220
In the head we're going to keep all that kind of

25
00:01:40,220 --> 00:01:44,495
information that the user isn't going to see for the most part.

26
00:01:44,495 --> 00:01:47,135
The one difference is we might talk about the title,

27
00:01:47,135 --> 00:01:51,880
but we're going to have all of that kind of hidden stuff nobody really cares about.

28
00:01:51,880 --> 00:01:57,335
In the body is where we're going to learn to put all of our HTML five tags.

29
00:01:57,335 --> 00:02:01,280
So let's talk about HTML as a tree.

30
00:02:01,280 --> 00:02:05,825
In this case I'm showing you this idea that at the root of

31
00:02:05,825 --> 00:02:10,490
every HTML page should be what's called the HTML tag.

32
00:02:10,490 --> 00:02:11,870
That kind of thing that says,

33
00:02:11,870 --> 00:02:13,115
lets the browser know.

34
00:02:13,115 --> 00:02:18,125
I'm going to be giving you certain types of tags and here's how I want them to work.

35
00:02:18,125 --> 00:02:20,600
If we don't look at it as a picture,

36
00:02:20,600 --> 00:02:22,640
I can also kind of just tell you that

37
00:02:22,640 --> 00:02:26,600
every tree has three parts to a well-formed document.

38
00:02:26,600 --> 00:02:31,385
The Doctype, which is the version of HTML that you're going to be using.

39
00:02:31,385 --> 00:02:37,685
The head, which is all of the metadata or kind of extra information, and the body.

40
00:02:37,685 --> 00:02:40,220
The body is the displayable content.

41
00:02:40,220 --> 00:02:45,875
The thing that most people are going to get back when they do the request response cycle.

42
00:02:45,875 --> 00:02:48,590
So let's talk doctype.

43
00:02:48,590 --> 00:02:51,155
You are so lucky.

44
00:02:51,155 --> 00:02:55,995
When I was creating web pages at first and we were in HTML4,

45
00:02:55,995 --> 00:03:00,020
we had to come up with all these different ways to kind of explain whether

46
00:03:00,020 --> 00:03:04,940
our HTML4 was very strict standards or whether it was transitional.

47
00:03:04,940 --> 00:03:08,455
In HTML5, it's very simple to say,

48
00:03:08,455 --> 00:03:14,765
"No there's only one thing and it's called DOCTYPE HTML", and you're all set.

49
00:03:14,765 --> 00:03:18,680
For the head which is inside the head tag,

50
00:03:18,680 --> 00:03:23,170
we're going to have all this additional information used by the browser.

51
00:03:23,170 --> 00:03:28,355
So for instance you might want to say what language you're creating your page in.

52
00:03:28,355 --> 00:03:30,095
You could also include,

53
00:03:30,095 --> 00:03:33,020
and you really want to include what the title of your pages.

54
00:03:33,020 --> 00:03:38,300
When I am talking about the title I'm not talking about big kind of header that you see.

55
00:03:38,300 --> 00:03:42,475
I'm talking about the little tiny thing you see in the tab of your browser.

56
00:03:42,475 --> 00:03:46,415
Later, you might want to add supporting files as well.

57
00:03:46,415 --> 00:03:50,465
You might want to have CSS files that will style your page,

58
00:03:50,465 --> 00:03:53,735
or JavaScript that can add on different interaction,

59
00:03:53,735 --> 00:03:56,570
or really any type of add-ons that's going to

60
00:03:56,570 --> 00:03:59,945
change the way people view and interact with your site.

61
00:03:59,945 --> 00:04:03,695
Other than the title, the metadata is not displayed,

62
00:04:03,695 --> 00:04:05,630
people will not see it.

63
00:04:05,630 --> 00:04:11,080
What people do see is the information that's in your body tag.

64
00:04:11,080 --> 00:04:14,380
That body tag is the bulk of your page.

65
00:04:14,380 --> 00:04:18,670
So it's very important to write well formatted or tree-like

66
00:04:18,670 --> 00:04:23,225
code where you're making sure that every tag has an end.

67
00:04:23,225 --> 00:04:26,260
That you're not putting tags in weird orders.

68
00:04:26,260 --> 00:04:30,370
So, most of the content in the body is displayed by the browser but

69
00:04:30,370 --> 00:04:34,240
every once in a while there's a little bit of metadata in there too.

70
00:04:34,240 --> 00:04:36,535
But we're not going to hit that in this class.

71
00:04:36,535 --> 00:04:38,640
دعونا نأخذ مثالاً.

72
00:04:38,640 --> 00:04:42,330
Right here, I have a file called template.html,

73
00:04:42,330 --> 00:04:44,890
and I'm displaying the code here on the screen for you.

74
00:04:44,890 --> 00:04:48,615
Can you find the three parts of a well-formed document?

75
00:04:48,615 --> 00:04:51,805
The first thing you want to look for is the Doctype.

76
00:04:51,805 --> 00:04:54,245
We've got that right here.

77
00:04:54,245 --> 00:04:57,645
Letting you know that this is an HTML5 document.

78
00:04:57,645 --> 00:05:03,410
We then have the HTML tag which was the root of our really scientific tree,

79
00:05:03,410 --> 00:05:08,570
and I'm letting people know I'd liked the language that it's displayed in to be English.

80
00:05:08,570 --> 00:05:12,700
In the head section we've got that metadata.

81
00:05:12,700 --> 00:05:15,870
Where it's telling us things like, "Hey,

82
00:05:15,870 --> 00:05:18,080
I know that there's lots of different keyboards

83
00:05:18,080 --> 00:05:20,435
and ways across the world to represent letters.

84
00:05:20,435 --> 00:05:23,015
I want you to use what's called UTF-8."

85
00:05:23,015 --> 00:05:25,615
Don't worry that just use it every time.

86
00:05:25,615 --> 00:05:30,605
Then the next part of my metadata is the title where we want to see it saying,

87
00:05:30,605 --> 00:05:32,675
"My First Page." That's it.

88
00:05:32,675 --> 00:05:34,190
That's two of the three parts.

89
00:05:34,190 --> 00:05:36,980
The last part is the body tag and it's

90
00:05:36,980 --> 00:05:41,210
displaying the content that we want to see on the screen.

91
00:05:41,210 --> 00:05:48,650
So let's look at this in a browser. What do I have?

92
00:05:48,650 --> 00:05:51,185
I have my title way up here,

93
00:05:51,185 --> 00:05:55,540
and my displayable content right down there.

94
00:05:56,450 --> 00:05:58,770
I have written the code,

95
00:05:58,770 --> 00:06:02,495
the next step you should always do is validate the code.

96
00:06:02,495 --> 00:06:05,585
Say, "I have written code it looks good,

97
00:06:05,585 --> 00:06:08,900
but I know that browsers are very nice and they

98
00:06:08,900 --> 00:06:12,380
make things display nicely even when I haven't written good code."

99
00:06:12,380 --> 00:06:16,490
So if you go to validator, that w3.org,

100
00:06:16,490 --> 00:06:21,680
you can check any website to see if the code is valid and you have three choices.

101
00:06:21,680 --> 00:06:24,570
You can upload the URL,

102
00:06:25,000 --> 00:06:27,995
you can upload a file,

103
00:06:27,995 --> 00:06:32,435
or you can actually copy and paste your code and put it right in there.

104
00:06:32,435 --> 00:06:38,735
In this case, I've put in the URL to template.HTML run Check,

105
00:06:38,735 --> 00:06:41,450
and yay, not surprisingly because I knew I

106
00:06:41,450 --> 00:06:44,270
was going to be taping this, it successfully checked.

107
00:06:44,270 --> 00:06:46,040
Don't worry about warnings.

108
00:06:46,040 --> 00:06:48,845
Warnings are usually in to cover themselves.

109
00:06:48,845 --> 00:06:51,380
What if you want to validate

110
00:06:51,380 --> 00:06:54,650
your file but your files aren't actually on the Internet yet?

111
00:06:54,650 --> 00:06:59,045
Let's walk through really quickly an example of how you can do that.

112
00:06:59,045 --> 00:07:04,655
Let's say that I have my file template.HTML and I want to check it.

113
00:07:04,655 --> 00:07:07,580
I want to point out to you that I went in and I changed

114
00:07:07,580 --> 00:07:10,790
the file and I put in an intentional typo.

115
00:07:10,790 --> 00:07:14,525
I spelled the closing tag for title incorrectly.

116
00:07:14,525 --> 00:07:16,250
لذلك دعونا نرى ما سيحدث.

117
00:07:16,250 --> 00:07:19,560
And if the browser or the validator can find this.

118
00:07:19,730 --> 00:07:24,585
What I'm going to do is I went to validator.w3.org,

119
00:07:24,585 --> 00:07:29,905
and I'm now going to select the third option validate by direct input.

120
00:07:29,905 --> 00:07:35,160
I go back to my file command A or control A,

121
00:07:35,160 --> 00:07:37,890
if you're on a PC Command C,

122
00:07:37,890 --> 00:07:43,120
I copied all the code and now I want to put it in the validator.

123
00:07:44,030 --> 00:07:51,850
Hit check, up, and if we scroll down here I can make this a lot bigger for you.

124
00:07:51,850 --> 00:07:55,540
You can see that I did get two errors.

125
00:07:55,540 --> 00:07:59,560
Why did I get two errors when I only typed one error in?

126
00:07:59,560 --> 00:08:02,315
Well, validators are never perfect.

127
00:08:02,315 --> 00:08:05,250
So what error it found is it said,

128
00:08:05,250 --> 00:08:09,680
"I found the end of a file and I was not expecting that."

129
00:08:09,680 --> 00:08:13,370
Well the reason that happened is let's check out error number 2,

130
00:08:13,370 --> 00:08:17,015
it tells us, "Oh you forgot to close the title tag."

131
00:08:17,015 --> 00:08:21,380
So sometimes one error can cause a lot of error messages.

132
00:08:21,380 --> 00:08:22,685
لذلك لا تقلق.

133
00:08:22,685 --> 00:08:26,540
I've seen as many as 50 or 60 errors that once

134
00:08:26,540 --> 00:08:32,240
I corrected one line of code it fixed more than 80 percent of those errors.

135
00:08:32,240 --> 00:08:34,790
So I'm going to go back over to my code,

136
00:08:34,790 --> 00:08:40,460
I'm going to fix it and put that title in and save it.

137
00:08:40,460 --> 00:08:49,940
Copy it again, put it in and I'm going to check again.

138
00:08:51,890 --> 00:08:57,035
This time checking complete no errors.

139
00:08:57,035 --> 00:08:59,280
So just to review,

140
00:08:59,280 --> 00:09:04,265
you really want to follow DOM structure if you want a well-formed page.

141
00:09:04,265 --> 00:09:09,490
Following that structure means you always use beginning and end tags.

142
00:09:09,490 --> 00:09:13,510
Also you close inner tags before outer ones.

143
00:09:13,510 --> 00:09:15,760
What that means is if you start

144
00:09:15,760 --> 00:09:20,455
a title tag You've got to end it before you end the body tag.

145
00:09:20,455 --> 00:09:22,630
You also will want to use

146
00:09:22,630 --> 00:09:25,900
valid attributes which is one of the things we're going to talk about a little

147
00:09:25,900 --> 00:09:28,170
later when we talk about images and

148
00:09:28,170 --> 00:09:31,685
basically parts of your page that need extra information.

149
00:09:31,685 --> 00:09:36,440
The problem with browsers is that they'll actually fix bad code for you.

150
00:09:36,440 --> 00:09:39,455
I always call them the helicopter parents of coding.

151
00:09:39,455 --> 00:09:42,655
It's like, "I know what you wanted it to look like so,

152
00:09:42,655 --> 00:09:45,135
that's the way I'm going to make it look on the screen."

153
00:09:45,135 --> 00:09:49,040
The problem is that doesn't always work for everyone.

154
00:09:49,040 --> 00:09:53,360
So, just because your site looks good to you when you're looking at it on your browser,

155
00:09:53,360 --> 00:09:54,560
doesn't mean it's right.

156
00:09:54,560 --> 00:09:58,100
You have to use a validator to check your code.