Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,390 --> 00:00:04,710
So now that we understand how the HTML boilerplate works and what each line
2
00:00:04,710 --> 00:00:05,550
does in it,
3
00:00:05,790 --> 00:00:09,840
it's time to move into the body section and start giving our website some
4
00:00:09,840 --> 00:00:14,370
content cause at the moment, our website is looking a little bit plain.
5
00:00:14,610 --> 00:00:16,740
So if we have a look at Jon Kleinberg's website,
6
00:00:16,860 --> 00:00:21,860
the first thing that we want right at the top here is a level one heading that
7
00:00:21,960 --> 00:00:26,550
says our name. So let's hit back into Atom and as a challenge
8
00:00:26,550 --> 00:00:31,260
to you, add a level one heading inside the body section of your website that
9
00:00:31,290 --> 00:00:32,940
contains your name.
10
00:00:38,090 --> 00:00:43,090
So this one's easy and it's made even easier using the auto complete features
11
00:00:43,730 --> 00:00:47,990
inside Atom. All have to write in order to create an h1 tag,
12
00:00:48,050 --> 00:00:51,710
which is what's needed to create a level one heading, is I just have to write
13
00:00:51,770 --> 00:00:54,770
h1 and it makes a suggestion asking me,
14
00:00:55,100 --> 00:00:59,780
are you looking for heading level one? And now if I hit enter, or if I hit tab,
15
00:01:00,140 --> 00:01:05,140
I get the h1 tag inserted automatically, opened and closed for me
16
00:01:06,020 --> 00:01:10,520
and my cursor gets moved right in between exactly the place where I would need
17
00:01:10,520 --> 00:01:11,480
to start typing.
18
00:01:12,260 --> 00:01:17,260
So now if I hit save and I head back over to my personal site,
19
00:01:17,810 --> 00:01:19,700
and remember if you close down this tab,
20
00:01:19,940 --> 00:01:23,600
you can always go into your Finder or your Explorer to open it back up again
21
00:01:23,810 --> 00:01:28,810
or you can select the full file path from Atom as well and paste it into here.
22
00:01:29,540 --> 00:01:32,360
Now, if I hit enter, you can see my h1,
23
00:01:32,390 --> 00:01:35,990
my level one heading gets shown up here just like John Kleinberg's
24
00:01:36,080 --> 00:01:38,450
and we're ready to move on to the next thing.
25
00:01:38,870 --> 00:01:43,820
Now we want to have a line that shows our title, so who it is that we are.
26
00:01:44,330 --> 00:01:46,730
Let's head back to Atom. And firstly,
27
00:01:46,730 --> 00:01:49,760
I'm going to get rid of this little heart because it doesn't look very
28
00:01:49,760 --> 00:01:50,593
professional
29
00:01:51,020 --> 00:01:55,550
and I'm going to add another HTML element under the h1.
30
00:01:56,180 --> 00:02:01,180
And this is a good point to talk about how to keep your HTML file neat and tidy.
31
00:02:01,340 --> 00:02:01,940
Now,
32
00:02:01,940 --> 00:02:06,940
most programs are very serious about how to indent and structure their HTML
33
00:02:08,240 --> 00:02:09,073
files.
34
00:02:09,110 --> 00:02:13,790
And the reason for it is because having these indents makes it easy for us to
35
00:02:13,790 --> 00:02:18,260
see at a glance, which tags are inside other ones.
36
00:02:18,290 --> 00:02:18,920
So for example,
37
00:02:18,920 --> 00:02:23,360
if we look at the top level here and we've got the HTML tag and because both the
38
00:02:23,360 --> 00:02:28,360
head and the body tags are i dented inside these HTML tags,
39
00:02:29,930 --> 00:02:34,930
it shows us at a glance that the head is inside the HTML element and as is
40
00:02:37,190 --> 00:02:42,080
the body. But the body and the head they're at the same hierarchical level.
41
00:02:42,290 --> 00:02:44,630
They're not inside of each other at all.
42
00:02:45,230 --> 00:02:49,580
And this is a good structure for us to be able to see at a glance what's
43
00:02:49,580 --> 00:02:53,690
happening in our code. And also when other programmers look at our code,
44
00:02:53,780 --> 00:02:56,060
because we're used to working with the same structure,
45
00:02:56,480 --> 00:02:59,920
it's easy to be able to understand what's going at a glance.
46
00:03:00,340 --> 00:03:05,340
So you can see that there's one part of our code that breaks this rule.
47
00:03:05,950 --> 00:03:07,780
And that's this line here.
48
00:03:08,320 --> 00:03:12,010
Our h1 is contained inside our body element
49
00:03:12,280 --> 00:03:16,360
and so it should be indented like so.
50
00:03:16,720 --> 00:03:21,720
And you can clearly see that this is now a child or contained inside the body
51
00:03:21,880 --> 00:03:26,590
tag. Now, if you didn't want to do that manually every single time,
52
00:03:26,680 --> 00:03:27,400
well,
53
00:03:27,400 --> 00:03:31,720
we actually installed a package right at the beginning that helps us with this
54
00:03:31,840 --> 00:03:34,690
organization. It's our little housekeeper, if you will.
55
00:03:34,870 --> 00:03:38,410
So if you go to packages and go to Atom Beautify
56
00:03:38,680 --> 00:03:40,120
and click on beautify,
57
00:03:40,540 --> 00:03:45,540
it will automatically beautify your entire code file to make all of the indents
58
00:03:45,610 --> 00:03:48,730
for you and to make everything look neat and tidy.
59
00:03:49,210 --> 00:03:52,330
So every so often, once your code starts getting messy,
60
00:03:52,510 --> 00:03:57,490
either learn the shortcut or go through it in the menu and reorganize your code
61
00:03:57,490 --> 00:04:00,730
file. It'll make it much easier on the eyes and much easier to read.
62
00:04:00,940 --> 00:04:05,680
So now I want to add my title under my h1 tag.
63
00:04:06,100 --> 00:04:08,830
And for this, I'm going to use the P tag,
64
00:04:09,160 --> 00:04:14,160
which is a paragraph tag and the P tag formats text into a paragraph.
65
00:04:15,400 --> 00:04:20,230
So they get a new line and the text inside gets grouped together into the same
66
00:04:20,230 --> 00:04:23,230
paragraph. So let's add my title here,
67
00:04:23,880 --> 00:04:24,713
yeah.
68
00:04:28,470 --> 00:04:32,340
And now let's see what our changes look like. So remember again,
69
00:04:32,370 --> 00:04:37,370
command +s or control + s to save and head back over to our site and command + r or
70
00:04:38,250 --> 00:04:43,170
control + r to refresh or click this button to refresh. And there we go.
71
00:04:43,230 --> 00:04:47,400
There's our brand new paragraph showing up. Now, if we look at Jon Kleinberg,
72
00:04:47,400 --> 00:04:52,400
so you can see that his title is italicized and ours is not.
73
00:04:53,370 --> 00:04:57,870
So how can we make ours italicized as well? Well, this is where our lessons
74
00:04:57,870 --> 00:04:59,880
on documentation is going to come in handy.
75
00:05:00,360 --> 00:05:05,360
Let's go ahead and go to Google and see if you can find out how do to italicize
76
00:05:05,910 --> 00:05:08,850
your text using HTML.
77
00:05:12,480 --> 00:05:12,630
Go on.
78
00:05:12,630 --> 00:05:16,680
Let's write italicize HTML MDN
79
00:05:17,700 --> 00:05:18,690
and let's hit enter.
80
00:05:19,530 --> 00:05:22,440
And you can see that there's actually two tags that come up here
81
00:05:22,770 --> 00:05:26,310
and the first one that comes up is this one. So let's have a look at it first.
82
00:05:27,090 --> 00:05:30,900
Now this is the em or the emphasis element
83
00:05:31,200 --> 00:05:35,040
and it marks text that has a stress emphasis.
84
00:05:35,160 --> 00:05:37,470
Now it looks like this in practice
85
00:05:37,830 --> 00:05:41,070
and the result is that it makes it look italicized.
86
00:05:41,790 --> 00:05:43,770
Now you might have noticed back here,
87
00:05:43,770 --> 00:05:47,130
we also had the i element or the i tag
88
00:05:47,340 --> 00:05:49,590
and it does the same thing visually.
89
00:05:49,770 --> 00:05:54,420
It also makes the text that's in between the i tags italicized.
90
00:05:54,990 --> 00:05:59,000
But there;s a little bit of a difference here and the difference is quite subtle.
91
00:05:59,150 --> 00:06:03,740
The emphasis tag tells the browser the words that are enclosed between it
92
00:06:04,070 --> 00:06:07,010
should be stressed or should be emphasized,
93
00:06:07,100 --> 00:06:11,060
but the i tag only italicizes the text.
94
00:06:11,090 --> 00:06:14,810
So it only styles the text to make it slanted
95
00:06:15,140 --> 00:06:18,920
and it doesn't confer any of that emphasis. And for this reason,
96
00:06:19,130 --> 00:06:23,510
it's good practice to always use emphasis instead of italic
97
00:06:23,720 --> 00:06:25,730
because it conveys more information
98
00:06:26,240 --> 00:06:28,730
and it isn't just about the style.
99
00:06:29,150 --> 00:06:33,320
Remember when we're writing HTML code we're more concerned about structuring our
100
00:06:33,320 --> 00:06:38,320
text rather than caring about how it looks or how it appears. Now a similar pair
101
00:06:39,710 --> 00:06:43,160
is the B tag or the bold tag,
102
00:06:43,550 --> 00:06:45,380
and this is equivalent to the i tag.
103
00:06:45,650 --> 00:06:49,760
It makes any texts that's in between bolded like so.
104
00:06:50,240 --> 00:06:54,140
But instead, what you should be using is the strong tag.
105
00:06:54,560 --> 00:06:57,440
And that's because the strong tag, again, confers
106
00:06:57,500 --> 00:07:02,500
meaning. It says that this text has strong importance and therefore it's
107
00:07:03,230 --> 00:07:08,090
displayed in bold rather than merely saying that this should be styled so that
108
00:07:08,090 --> 00:07:12,560
it's darker than the rest of the text. And if you're interested,
109
00:07:12,590 --> 00:07:17,330
you can have a read between bold and strong, as well as emphasis and strong,
110
00:07:17,600 --> 00:07:19,280
as well as emphasis and italic.
111
00:07:19,550 --> 00:07:22,880
It makes for some interesting reading and gives you a bit more background
112
00:07:22,880 --> 00:07:25,580
information on the different between these two tags.
113
00:07:25,820 --> 00:07:28,670
But whenever you're looking to make something bold in your website,
114
00:07:28,970 --> 00:07:30,950
you should probably be using the strong tag.
115
00:07:31,070 --> 00:07:33,140
And whenever you want to make something italicize,
116
00:07:33,410 --> 00:07:35,570
you should be using the emphasis tag.
117
00:07:36,470 --> 00:07:39,800
So let's go ahead and make our paragraph,
118
00:07:40,130 --> 00:07:44,540
this title, italicized or emphasized like
119
00:07:44,540 --> 00:07:46,220
so. If you remember,
120
00:07:46,250 --> 00:07:50,780
all we have to do is just to enclose it inside the em tag.
121
00:07:52,190 --> 00:07:55,220
Now you can do that for the entire length of the text,
122
00:07:55,370 --> 00:07:59,630
or you can simply apply it to just a section of the text. So for example,
123
00:07:59,630 --> 00:08:03,260
if I wanted to make the part where it says the App Brewery bolded,
124
00:08:03,560 --> 00:08:07,190
then I can simply add a strong tag and have the App
125
00:08:07,190 --> 00:08:11,780
Brewery not including the full stop inside this strong tag. Now,
126
00:08:11,780 --> 00:08:14,690
if I hit save and go ahead and refresh,
127
00:08:14,870 --> 00:08:19,870
then you can see that the entire paragraph is emphasized and the App Brewery is
128
00:08:22,070 --> 00:08:25,550
bolded. So we've done a little bit of formatting for our website.
129
00:08:26,090 --> 00:08:27,680
Now let's move on to the next part.
130
00:08:27,920 --> 00:08:31,700
We're going to add a little bio here and that again is going to be inside a
131
00:08:31,700 --> 00:08:36,050
paragraph element, and it just tells anybody who's visiting our personal site
132
00:08:36,320 --> 00:08:39,770
who we are and what we're all about. So once you're ready,
133
00:08:39,830 --> 00:08:43,850
go ahead and figure out where you should add this and complete the challenge.
134
00:08:46,070 --> 00:08:50,030
OK. So that wasn't so hard. All we have to do is just indent,
135
00:08:50,060 --> 00:08:51,590
so we're in the right position,
136
00:08:51,590 --> 00:08:55,470
we're inside the body tag. And we're going to create a new paragraph element.
137
00:08:55,740 --> 00:08:59,700
So this is going to be on a new line from this paragraph.
138
00:08:59,760 --> 00:09:03,270
They are going to be separate paragraphs and here I'm going to write
139
00:09:03,330 --> 00:09:07,830
I am an iOS and web developer.
140
00:09:08,220 --> 00:09:11,340
I love coffee
141
00:09:12,750 --> 00:09:16,410
and brew my own beers.
142
00:09:16,740 --> 00:09:20,580
Let's save and check it out here. All right. It looks pretty good
143
00:09:20,670 --> 00:09:24,000
and we're getting pretty far already. So obviously you can put as much
144
00:09:24,120 --> 00:09:26,850
or as little as you want here and design your website
145
00:09:26,850 --> 00:09:29,280
however you want it to look. Now,
146
00:09:29,280 --> 00:09:32,070
the next thing I want to add is this horizontal line.
147
00:09:32,430 --> 00:09:34,110
And we've done that previously.
148
00:09:34,380 --> 00:09:39,120
So you can go ahead and add that into your code file as a challenge.
149
00:09:39,410 --> 00:09:40,243
Go on.
150
00:09:42,170 --> 00:09:44,570
All right. So do you remember how to do that? Well,
151
00:09:44,600 --> 00:09:48,020
all we need to do is we're still staying inside the body because we're creating
152
00:09:48,020 --> 00:09:49,550
the content for our website.
153
00:09:50,030 --> 00:09:53,750
And all we need to do is just to create a horizontal rule.
154
00:09:53,780 --> 00:09:57,410
So I'm going to use my good friend autosuggest and I'm going to right hr and
155
00:09:57,410 --> 00:10:00,770
hit enter to insert a new horizontal rule.
156
00:10:01,100 --> 00:10:04,520
And now it's looking pretty similar to what we've got here. Now,
157
00:10:04,520 --> 00:10:09,520
the last thing I want to add is a subtitle where I'm going to list all the books
158
00:10:09,980 --> 00:10:12,950
and courses that I'm teaching. Go ahead
159
00:10:13,010 --> 00:10:14,990
and add a level three
160
00:10:14,990 --> 00:10:19,990
heading to your website underneath the horizontal rule and call it books and
161
00:10:20,690 --> 00:10:22,970
teaching. Or if you don't have any books and teaching,
162
00:10:23,180 --> 00:10:27,560
you can simply call it education and list all the schools that you've attended.
163
00:10:28,130 --> 00:10:28,963
Okay.
164
00:10:32,600 --> 00:10:36,230
All right. Underneath the horizontal rule, I'm going to add an h3
165
00:10:36,260 --> 00:10:37,430
so a level three heading,
166
00:10:37,640 --> 00:10:41,510
and this is going to be the books and teaching.
167
00:10:42,740 --> 00:10:43,070
All right.
168
00:10:43,070 --> 00:10:47,180
So we've already got most of our personal site coded up. In the next lesson,
169
00:10:47,210 --> 00:10:51,830
we're going to be diving into HTML lists and how we can create these bullet
170
00:10:51,830 --> 00:10:55,970
points as well as numbered points and add it to our website.
171
00:10:56,360 --> 00:11:00,080
So, all of that and more, I'll see you on the next lesson.
15234
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.