1
00:00:00,230 --> 00:00:00,950
We'll come back.

2
00:00:01,140 --> 00:00:06,360
So in this lesson we're going to start by making a new file actually filling it with h t m l an opening

3
00:00:06,360 --> 00:00:11,930
in the browser and we're also going to learn about the underlying structure of every HTML document.

4
00:00:11,940 --> 00:00:17,190
So there's a few things that every document always has kind of boilerplate that we're going to learn

5
00:00:17,190 --> 00:00:17,820
about.

6
00:00:17,820 --> 00:00:22,880
So to start going to go to sublime and I'm going to make a new file.

7
00:00:23,100 --> 00:00:29,610
So file new file or command and and then I'm going to save the file and give it a name.

8
00:00:29,610 --> 00:00:33,340
So file save or command as.

9
00:00:34,080 --> 00:00:37,040
So once I do that we're going to give it a name.

10
00:00:37,140 --> 00:00:42,980
Let's call it first page the page T.M. and this part is very important.

11
00:00:42,990 --> 00:00:44,950
Dot h Timo.

12
00:00:45,690 --> 00:00:47,120
So I'll hit save.

13
00:00:47,670 --> 00:00:50,170
And that dot each team l tell sublime.

14
00:00:50,340 --> 00:00:55,790
And when I open it in Chrome it tells chrome This is an h tim I'll file treated as such.

15
00:00:56,220 --> 00:00:58,000
So we can write to Tim Allen here.

16
00:00:58,260 --> 00:01:04,460
So we'll start with just the one tag we've seen so far are one of the tags which is an H-1.

17
00:01:04,800 --> 00:01:06,740
And you'll notice that it's highlighted for me.

18
00:01:06,780 --> 00:01:08,040
So let's fill this in.

19
00:01:08,040 --> 00:01:16,470
This is my first tag and save this file and you'll see sublime knows it's H D M L so it highlights it

20
00:01:16,770 --> 00:01:19,020
makes corresponding tags red.

21
00:01:19,020 --> 00:01:19,950
In my case.

22
00:01:20,130 --> 00:01:25,680
Now what we want to do is actually open this file and view it because remember each time out it's just

23
00:01:25,680 --> 00:01:31,910
text but our browser interprets it and turns it into something like this or this.

24
00:01:31,920 --> 00:01:36,230
So to actually get Chrome to open it there's a few solutions.

25
00:01:36,270 --> 00:01:41,370
The first one is just double click on it and it will open it in your default browser.

26
00:01:41,490 --> 00:01:47,100
If that is not chrome it will still work but it will open it in Safari or Firefox or Internet Explorer

27
00:01:47,580 --> 00:01:53,690
and you can see though as it opens it it's not showing me the actual h t m l it is taking the h him

28
00:01:53,690 --> 00:01:58,090
out underlying it and turning it into this nice visual representation.

29
00:01:58,470 --> 00:02:03,340
As always I can view my page source and you'll see it's just one tag.

30
00:02:03,510 --> 00:02:07,470
So definitely simpler than something like this.

31
00:02:09,330 --> 00:02:11,670
But underlying they're exactly the same.

32
00:02:11,940 --> 00:02:15,910
And there's probably an H-1 on this page as well.

33
00:02:15,960 --> 00:02:17,770
So one other way of doing this.

34
00:02:18,000 --> 00:02:25,110
You can take the file right click and click on open with Google Chrome or you can click on it and drag

35
00:02:25,110 --> 00:02:27,720
it to Chrome and that will open it as well.

36
00:02:27,720 --> 00:02:32,640
Same thing goes for sublimest well so if you accidentally close the file you can drag it here and it

37
00:02:32,640 --> 00:02:33,470
will reopen it.

38
00:02:33,570 --> 00:02:40,200
So just to show you that click and I can open it.

39
00:02:40,440 --> 00:02:44,380
So unfortunately I have to break the news that are simple.

40
00:02:44,370 --> 00:02:47,650
It's Tim L that we've written so far is actually slightly wrong.

41
00:02:47,850 --> 00:02:52,140
The e-mail tag itself is fine but this isn't a valid document.

42
00:02:52,140 --> 00:02:57,260
And that's because we're missing the underlying structure that every page needs to have.

43
00:02:57,840 --> 00:02:59,320
So it looks like this.

44
00:02:59,490 --> 00:03:01,370
It is a lot compared to what we've done so far.

45
00:03:01,380 --> 00:03:03,950
But the good news is there's two pieces of good news.

46
00:03:03,960 --> 00:03:05,560
One it's always the same.

47
00:03:05,900 --> 00:03:12,120
And two sublime has a nice shortcut that gives this structure to us very very quickly with just four

48
00:03:12,120 --> 00:03:13,880
letters that we have to type.

49
00:03:14,280 --> 00:03:18,570
So we're going to go over these pieces individually and just a little bit but I'm going to start by

50
00:03:18,570 --> 00:03:25,650
just showing you how to get it in sublime so sublime instead of h tim l file we can type the word h

51
00:03:25,650 --> 00:03:29,690
tim L and then hit tab and we automatically get this structure.

52
00:03:30,000 --> 00:03:32,400
So let's go over what this does.

53
00:03:32,400 --> 00:03:33,460
First we're going to save.

54
00:03:33,570 --> 00:03:39,090
So there's this doc type H him out up top and it's kind of weird because there isn't a corresponding

55
00:03:39,090 --> 00:03:48,650
closing doc type like there is H-G M-L and head and title and body doc type is on its own.

56
00:03:48,690 --> 00:03:55,320
So let's go to M.D. and just showing you how you would get there I would type MT-NW and then doc type

57
00:03:55,850 --> 00:04:00,510
and it might seem silly to really talk about that but this is important because finding this information

58
00:04:00,510 --> 00:04:03,700
out is really what being a developer is googling something.

59
00:04:03,720 --> 00:04:05,500
How do you find the right answer.

60
00:04:05,520 --> 00:04:07,740
I'm going to be a complete broken record on that.

61
00:04:07,770 --> 00:04:12,660
My students laugh every time I talk about the art of googling but it really is important.

62
00:04:12,930 --> 00:04:13,760
So I'm here.

63
00:04:13,800 --> 00:04:14,910
Let's take a look.

64
00:04:15,030 --> 00:04:20,210
It says the doc type for each Timofei is simple to indicate that your HMO content uses HDMI.

65
00:04:20,210 --> 00:04:26,970
Five simply use doctype H-2 him out with an exclamation point in front of it and we do want to use HMO

66
00:04:26,970 --> 00:04:27,770
5.

67
00:04:27,870 --> 00:04:31,530
We'll talk exactly about what a schmuck a 5 is and what it isn't.

68
00:04:31,530 --> 00:04:32,580
In a future video.

69
00:04:32,790 --> 00:04:34,070
But we do want to use it.

70
00:04:34,140 --> 00:04:36,720
It's basically just the newest version of aged him out.

71
00:04:36,990 --> 00:04:38,660
So we put this up top.

72
00:04:39,030 --> 00:04:42,330
So the next thing we're going to talk about is the h t m l element.

73
00:04:42,510 --> 00:04:47,490
So this one is a little harder to find by searching who do MT-NW an HMO.

74
00:04:47,670 --> 00:04:48,540
If we just element

75
00:04:51,470 --> 00:04:56,030
there we go I always look for this empty end in the name.

76
00:04:56,040 --> 00:05:01,350
And this tells us the aged him root element represents the root of an HMO document.

77
00:05:01,500 --> 00:05:04,930
All other elements must be descendants of this element.

78
00:05:05,040 --> 00:05:06,500
So it's pretty self-explanatory.

79
00:05:06,620 --> 00:05:10,310
Basically everything that we write needs to go inside of each element.

80
00:05:10,710 --> 00:05:18,360
And more importantly under permitted content it tells us one head element followed by one body which

81
00:05:18,360 --> 00:05:22,640
is what we have one head and one body.

82
00:05:23,820 --> 00:05:28,140
So let's take a look at what head is the head element.

83
00:05:28,140 --> 00:05:34,190
Provide general information metadata about the document including its title and links to are definitions

84
00:05:34,200 --> 00:05:36,010
of scripts and style sheets.

85
00:05:36,330 --> 00:05:41,200
So what that means is basically everything that we don't see on the page as a user.

86
00:05:41,400 --> 00:05:48,210
So things like font files in our stylesheet files or javascript files all of those go in the head and

87
00:05:48,210 --> 00:05:53,200
then the body is where we put all of our content.

88
00:05:53,610 --> 00:05:57,210
It represents the content of an age HTML document.

89
00:05:57,210 --> 00:06:03,760
So if we go back here I can assure you one more thing which is how to write comments and niched him

90
00:06:03,750 --> 00:06:04,300
out.

91
00:06:04,530 --> 00:06:14,870
If I wanted to write a note to myself if I just wrote this content goes in the body and then appear

92
00:06:14,910 --> 00:06:21,000
I wrote a data goes in head.

93
00:06:21,750 --> 00:06:26,580
Fortunately that won't work because this will actually show up on the page.

94
00:06:26,720 --> 00:06:31,070
Its team will treat this like text and I want it just to be a note to myself.

95
00:06:31,230 --> 00:06:33,570
So this is something you can do in every programming language.

96
00:06:33,690 --> 00:06:41,040
You can turn this into a comment and a comment looks just like this starts with a less than sign exclamation

97
00:06:41,040 --> 00:06:47,100
point two dashes and then some content and then on the other side two dashes and a greater than sign

98
00:06:47,110 --> 00:06:47,830
.

99
00:06:49,050 --> 00:06:52,420
So he can type that hear yourself type it manually

100
00:06:57,000 --> 00:06:59,680
and you can see it kind of goes gray in sublime.

101
00:07:00,000 --> 00:07:05,220
But another really nifty shortcut is that you can select a line you don't have to select it just go

102
00:07:05,220 --> 00:07:08,360
to align and hit command slash

103
00:07:12,570 --> 00:07:21,160
and you can also see it can go up to it and you can go to comment toggle comment.

104
00:07:21,180 --> 00:07:24,230
So in case you forget this and you don't want to write it out.

105
00:07:24,260 --> 00:07:25,200
Another nice thing.

106
00:07:25,250 --> 00:07:30,380
Let's say I had a bunch of notes to myself I can select all of them and do the same thing.

107
00:07:30,420 --> 00:07:33,000
Command slash.

108
00:07:34,440 --> 00:07:35,320
Great.

109
00:07:35,400 --> 00:07:38,860
So I'm going to keep these comments here that are just notes to myself.

110
00:07:39,000 --> 00:07:40,740
My content goes in the body.

111
00:07:40,830 --> 00:07:43,000
It goes in the head.

112
00:07:43,830 --> 00:07:50,880
So that means that if we're following our own notes our content here needs to go inside of our body

113
00:07:50,900 --> 00:07:51,670
.

114
00:07:52,680 --> 00:07:57,450
So we should have nothing floating around outside the H Tim L element except for doctype.

115
00:07:57,540 --> 00:08:02,280
Everything else goes in head or in body.

116
00:08:02,280 --> 00:08:06,570
So let's go ahead and open this up make sure it looks the same as it did before.

117
00:08:06,570 --> 00:08:07,470
Double click.

118
00:08:07,620 --> 00:08:09,250
You can see it looks identical.

119
00:08:09,420 --> 00:08:12,960
Let's view the page source looks the same.

120
00:08:12,960 --> 00:08:17,580
Notice that our comments are not showing up of course only our H-1 shows up.

121
00:08:17,580 --> 00:08:20,590
One thing that we're missing while we're here is a title.

122
00:08:20,880 --> 00:08:27,570
A title is important not because it shows up on the page it will not show up in our actual page here

123
00:08:27,570 --> 00:08:27,670
.

124
00:08:27,690 --> 00:08:28,980
Remember it's in the head.

125
00:08:29,040 --> 00:08:32,660
So it's just metadata what it does do is two things.

126
00:08:32,700 --> 00:08:37,270
One it's going to determine the name or the text that goes in our tab appear.

127
00:08:37,740 --> 00:08:43,710
And it's also important for search engines and for other pages when other pages linked to your site

128
00:08:44,070 --> 00:08:49,890
or when you go to Google and you search for MDA on these names here.

129
00:08:49,880 --> 00:08:52,770
These come from the title elements.

130
00:08:52,760 --> 00:08:58,070
So for instance M.D. and celebrates 10 years of document in your web you click on that.

131
00:08:58,470 --> 00:09:02,120
You can see up here it says MDA and celebrates it gets cut off.

132
00:09:02,190 --> 00:09:07,500
You can inspect the page look for a title element.

133
00:09:07,500 --> 00:09:08,730
So a lot of stuff here we go.

134
00:09:08,760 --> 00:09:12,250
Title and celebrates 10 years of documenting your web.

135
00:09:12,600 --> 00:09:13,810
The mizzle blog.

136
00:09:14,340 --> 00:09:16,340
So title is important.

137
00:09:17,070 --> 00:09:24,710
So let's give ArcSight a title let's just call it my first page refresh watch right here and it updates

138
00:09:24,730 --> 00:09:25,680
.

139
00:09:25,710 --> 00:09:27,080
That's it for now.

140
00:09:27,090 --> 00:09:28,420
Remember two things.

141
00:09:28,540 --> 00:09:31,640
This boilerplate can just type H him l tab.

142
00:09:31,770 --> 00:09:33,720
You would never have more than one in the document.

143
00:09:33,890 --> 00:09:37,850
But just so you remember html tab and comments.

144
00:09:37,980 --> 00:09:41,880
You can do with command slash can target them on and off.

145
00:09:41,900 --> 00:09:42,340
All right