0
1
00:00:00,480 --> 00:00:06,390
So now that we understand how the HTML boilerplate works and what each line does in it it's time
1

2
00:00:06,390 --> 00:00:12,280
to move into the body section and start giving our web site some content because at the moment our web
2

3
00:00:12,280 --> 00:00:14,660
site is looking a little bit plain.
3

4
00:00:14,700 --> 00:00:20,100
So if we have a look at Jon Kleinberg’s web site the first thing that we want right at the top here is
4

5
00:00:20,160 --> 00:00:23,790
a level one heading that says our name.
5

6
00:00:23,790 --> 00:00:25,360
So let's head back into Atom.
6

7
00:00:25,470 --> 00:00:32,010
And as a challenge to you add a level one heading inside the body section of your web site that contains
7

8
00:00:32,100 --> 00:00:37,910
your name.
8

9
00:00:38,210 --> 00:00:45,260
So this one's easy and it's made even easier using the autocomplete features inside Atom.
9

10
00:00:45,410 --> 00:00:50,390
All I have to write in order to create an h1 tag which is what's needed to create a level one heading
10

11
00:00:50,740 --> 00:00:56,630
is I just have to write h1 and it makes a suggestion asking me, ‘Are you looking for a heading level
11

12
00:00:56,630 --> 00:00:57,120
one?’
12

13
00:00:57,230 --> 00:01:05,570
And now if I hit enter or if I hit tab I get the h1 tag inserted automatically opened and closed for
13

14
00:01:05,570 --> 00:01:08,620
me and my cursor gets moved right in between.
14

15
00:01:08,750 --> 00:01:11,960
Exactly the place where I would need to start typing.
15

16
00:01:12,350 --> 00:01:19,730
So now if I hit save and I head back over to my personal site and remember if you close down this tab
16

17
00:01:20,030 --> 00:01:25,460
you can always go into your finder or your explorer to open it back up again or you can select the full file
17

18
00:01:25,460 --> 00:01:29,600
path from Atom as well and paste it into here.
18

19
00:01:29,600 --> 00:01:36,020
Now if I hit enter you can see my h1, my level one heading, gets shown up here just like Jon Kleinberg’s
19

20
00:01:36,170 --> 00:01:38,940
and we're ready to move on to the next thing.
20

21
00:01:38,960 --> 00:01:44,180
Now we want to have a line that shows our title so who it is that we are.
21

22
00:01:44,420 --> 00:01:50,030
So let's head back to Atom and first I'm going to get rid of this little heart because it doesn't look
22

23
00:01:50,030 --> 00:01:56,470
very professional and I'm going to add another HTML element under the h1.
23

24
00:01:56,690 --> 00:02:02,060
And this is a good point to talk about how to keep your HTML file neat and tidy.
24

25
00:02:02,210 --> 00:02:09,470
Now most programmers are very serious about how to indent and structure their HTML files.
25

26
00:02:09,620 --> 00:02:16,190
And the reason for it is because having these indents makes it easy for us to see at a glance which
26

27
00:02:16,190 --> 00:02:18,830
tags are inside other ones.
27

28
00:02:18,830 --> 00:02:22,660
So for example if we look at the top level here we've got the html tag.
28

29
00:02:22,900 --> 00:02:30,410
And because both the head and the body tags are indented inside these html tags,
29

30
00:02:30,410 --> 00:02:39,590
it shows us at a glance that the head is inside the html element as is the body but the body and
30

31
00:02:39,590 --> 00:02:42,760
the head, they’re at the same hierarchical level.
31

32
00:02:42,800 --> 00:02:45,400
They're not inside of each other at all.
32

33
00:02:45,740 --> 00:02:51,370
And this is a good structure for us to be able to see at a glance what's happening in our code.
33

34
00:02:51,560 --> 00:02:56,540
And also when other programmers look at our code, because we're used to working with the same structure,
34

35
00:02:57,020 --> 00:03:00,620
it's easy to be able to understand what's going on at a glance.
35

36
00:03:00,890 --> 00:03:08,560
So you can see that there's one part of our code that breaks this rule and that's this line here.
36

37
00:03:08,850 --> 00:03:17,090
Our h1 is contained inside our body element and so it should be indented like so.
37

38
00:03:17,240 --> 00:03:23,020
And you can clearly see that this is now a child or contained inside the body tag.
38

39
00:03:23,330 --> 00:03:27,140
Now if you didn't want to do that manually every single time.
39

40
00:03:27,200 --> 00:03:33,370
Well we actually installed a package right at the beginning that helps us with this organization.
40

41
00:03:33,380 --> 00:03:35,320
It's our little housekeeper if you will.
41

42
00:03:35,420 --> 00:03:42,830
So if you go to packages and go to Atom Beautify and click on Beautify it will automatically beautify
42

43
00:03:42,830 --> 00:03:49,580
your entire code file to make all of the indents for you and to make everything look neat and tidy.
43

44
00:03:49,760 --> 00:03:55,340
So every so often once your code starts getting messy either learn the shortcut or go through it in
44

45
00:03:55,340 --> 00:03:58,500
the menu and reorganize your code file.
45

46
00:03:58,520 --> 00:04:01,350
It'll make it much easier on the eyes and much easier to read.
46

47
00:04:01,460 --> 00:04:06,360
So now I want to add my title under my h1 tag.
47

48
00:04:06,590 --> 00:04:15,830
And for this I'm going to use the p tag which is a paragraph tag and the p tag formats text into a paragraph.
48

49
00:04:15,920 --> 00:04:21,580
So they get a new line and the text inside gets grouped together into the same paragraph.
49

50
00:04:21,740 --> 00:04:23,890
So let's add my title here.
50

51
00:04:29,010 --> 00:04:31,290
And now let's see what our changes look like.
51

52
00:04:31,290 --> 00:04:39,270
So remember again command S or control S to save and head back over to our site and command R or control
52

53
00:04:39,270 --> 00:04:43,680
R to refresh or click this button to refresh and there we go.
53

54
00:04:43,680 --> 00:04:46,400
There’s our brand new paragraph showing up.
54

55
00:04:46,500 --> 00:04:53,810
Now if we look at Jon Kleinberg you can see that his title is italicized and ours is not.
55

56
00:04:53,910 --> 00:04:56,750
So how can we make ours italicised as well?
56

57
00:04:56,880 --> 00:05:00,860
Well this is where our lessons, our documentation, is going to come in handy.
57

58
00:05:00,870 --> 00:05:08,460
Let's go ahead and go to Google and see if you can find out how to italicize your text using HTML.
58

59
00:05:12,850 --> 00:05:22,150
So let's write italicize HTML MDN and let's hit enter and you'll see that there's actually two tags
59

60
00:05:22,150 --> 00:05:27,690
that come up here and the first one that comes up is this one so let's have a look at it first.
60

61
00:05:27,700 --> 00:05:35,720
Now this is the em or the emphasis element and it marks text that has a stress emphasis.
61

62
00:05:35,740 --> 00:05:38,150
Now it looks like this in practice.
62

63
00:05:38,410 --> 00:05:42,410
And the result is that it makes it look italicised.
63

64
00:05:42,430 --> 00:05:49,240
Now you might have noticed back here we also had the i element or the i tag and it does the same
64

65
00:05:49,240 --> 00:05:50,310
thing visually.
65

66
00:05:50,410 --> 00:05:55,380
It also makes the text that's in between the i tags italicised.
66

67
00:05:55,630 --> 00:05:57,780
But there's a little bit of a difference here.
67

68
00:05:57,970 --> 00:05:59,800
And the difference is quite subtle.
68

69
00:05:59,800 --> 00:06:06,370
The emphasis tag tells the browser the words that are enclosed between it should be stressed or should
69

70
00:06:06,370 --> 00:06:11,670
be emphasized but the i tag only italicises the text.
70

71
00:06:11,710 --> 00:06:18,390
So it only styles the text to make it slanted and it doesn't confer any of that emphasis.
71

72
00:06:18,430 --> 00:06:25,120
And for this reason it's good practice to always use emphasis instead of italic because it conveys
72

73
00:06:25,120 --> 00:06:29,770
more information and it isn't just about the style.
73

74
00:06:29,770 --> 00:06:36,010
Remember when writing HTML code we're more concerned about structuring our text rather than caring
74

75
00:06:36,010 --> 00:06:38,840
about how it looks or how it appears.
75

76
00:06:38,860 --> 00:06:43,940
Now a similar pair is the b tag or the bold tag.
76

77
00:06:44,170 --> 00:06:48,640
And this is equivalent to the i tag, it makes any text that's in between
77

78
00:06:48,790 --> 00:06:50,630
bolded, like so.
78

79
00:06:50,860 --> 00:06:55,010
But instead what you should be using is the strong tag.
79

80
00:06:55,180 --> 00:06:59,080
And that's because the strong tag again confers meaning.
80

81
00:06:59,080 --> 00:07:05,860
It says that this text has strong importance and therefore it's displayed in bold rather than merely
81

82
00:07:05,860 --> 00:07:11,700
saying that this should be styled so that it's darker than the rest of the text.
82

83
00:07:11,830 --> 00:07:18,370
And if you're interested you can have a read between bold and strong as well as emphasis and strong as
83

84
00:07:18,370 --> 00:07:23,440
well as emphasis and italic. It makes for some interesting reading and gives you a bit more background
84

85
00:07:23,440 --> 00:07:26,320
information on the different between these two tags.
85

86
00:07:26,410 --> 00:07:30,790
But whenever you're looking to make something bold in your website you should probably be using the
86

87
00:07:30,790 --> 00:07:31,620
strong tag.
87

88
00:07:31,690 --> 00:07:36,630
And whenever you want to make something italicized you should be using the emphasis tag.
88

89
00:07:37,090 --> 00:07:45,630
So let's go ahead and make our paragraph, this title, italicized, or emphasized, like so.
89

90
00:07:45,820 --> 00:07:53,220
So, if you remember, all we have to do is just to enclose it inside the em tag.
90

91
00:07:53,310 --> 00:07:59,250
Now you can do that for the entire length of the text or you can simply apply it to just a section of
91

92
00:07:59,250 --> 00:08:00,090
the text.
92

93
00:08:00,090 --> 00:08:05,730
So for example if I wanted to make the part where it says The App Brewery bolded then I can simply add
93

94
00:08:05,760 --> 00:08:12,330
a strong tag and have The App Brewery, not including the full stop, inside the strong tag.
94

95
00:08:12,480 --> 00:08:20,010
Now if I hit save and go ahead and refresh then you can see that the entire paragraph is emphasized
95

96
00:08:20,670 --> 00:08:24,030
and The App Brewery is bolded.
96

97
00:08:24,030 --> 00:08:26,640
So we've done a little bit of formatting for our web site.
97

98
00:08:26,640 --> 00:08:28,340
Now let's move on to the next part.
98

99
00:08:28,470 --> 00:08:34,080
We're going to add a little bio here and that again is going to be inside a paragraph element and it
99

100
00:08:34,080 --> 00:08:39,390
just tells anybody who's visiting our personal site who we are and what we're all about.
100

101
00:08:39,390 --> 00:08:44,560
So once you are ready go ahead and figure out where you should add this and complete the challenge.
101

102
00:08:46,640 --> 00:08:48,500
OK so that wasn't so hard.
102

103
00:08:48,530 --> 00:08:50,570
All we have to do is just to indent.
103

104
00:08:50,600 --> 00:08:52,230
So we're in the right position.
104

105
00:08:52,240 --> 00:08:56,160
Inside the body tag we're going to create a new paragraph element.
105

106
00:08:56,300 --> 00:09:00,310
So this is going to be on a new line from this paragraph.
106

107
00:09:00,320 --> 00:09:02,360
They're going to be separate paragraphs.
107

108
00:09:02,360 --> 00:09:08,670
And here I'm going to write I am an iOS and WebDeveloper.
108

109
00:09:09,020 --> 00:09:17,280
I love coffee and brew my own beers.
109

110
00:09:17,300 --> 00:09:19,930
Let's save and check it out here.
110

111
00:09:19,940 --> 00:09:20,320
All right.
111

112
00:09:20,360 --> 00:09:21,150
Looks pretty good.
112

113
00:09:21,200 --> 00:09:22,760
And we're getting pretty far already.
113

114
00:09:22,790 --> 00:09:28,460
So obviously you can put as much or as little as you want here and design your website however you want
114

115
00:09:28,460 --> 00:09:29,250
it to look.
115

116
00:09:29,270 --> 00:09:34,370
Now the next thing I want to add is this horizontal line and we've done that previously.
116

117
00:09:34,550 --> 00:09:39,490
So you can go ahead and add that into your code file as a challenge.
117

118
00:09:42,370 --> 00:09:42,700
All right.
118

119
00:09:42,700 --> 00:09:44,210
So do you remember how to do that?
119

120
00:09:44,410 --> 00:09:49,120
Well all we need to do is we're still staying inside the body because we're creating the content for
120

121
00:09:49,120 --> 00:09:53,940
our web site and all we need to do is just to create a horizontal rule.
121

122
00:09:53,950 --> 00:09:59,860
So I'm going to use my good friend autosuggest, I'm going to write hr and hit enter to insert a new
122

123
00:09:59,860 --> 00:10:01,100
horizontal rule.
123

124
00:10:01,270 --> 00:10:03,920
And now it's looking pretty similar to what we've got here.
124

125
00:10:03,970 --> 00:10:10,300
Now the last thing I want to add is a subtitle where I'm going to list all the books and courses that
125

126
00:10:10,330 --> 00:10:11,680
I'm teaching.
126

127
00:10:11,680 --> 00:10:17,020
So go ahead and add a level three heading to your web site
127

128
00:10:17,290 --> 00:10:22,990
underneath the horizontal rule and call it Books and Teaching or if you don't have any Books and Teaching
128

129
00:10:23,230 --> 00:10:27,560
you can simply call it Education and list all the schools that you've attended.
129

130
00:10:32,700 --> 00:10:34,500
So underneath the horizontal rule
130

131
00:10:34,500 --> 00:10:42,490
I'm going to add an h3, so level 3 heading, and this is going to be the Books and Teaching.
131

132
00:10:42,570 --> 00:10:42,890
All right.
132

133
00:10:42,900 --> 00:10:47,050
So we've already got most of our personal site coded up. In the next lesson
133

134
00:10:47,070 --> 00:10:53,310
we’re going to be diving into HTML lists and how we can create these bullet points as well as numbered
134

135
00:10:53,310 --> 00:10:55,900
points and add it to our website.
135

136
00:10:56,220 --> 00:10:58,120
So all of that and more.
136

137
00:10:58,200 --> 00:10:59,890
I will see you on the next lesson.