Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
00:00:00,000 --> 00:00:06,100
1
00:00:06,100 --> 00:00:08,790
>> DOUG LLOYD: So we spent about-- if my math is right,
2
00:00:08,790 --> 00:00:11,900
and I think looking back-- I think we spent about 35 videos talking
3
00:00:11,900 --> 00:00:15,139
about various aspects of C, maybe a little more, maybe a little less.
4
00:00:15,139 --> 00:00:16,930
And we didn't cover everything in C, but we
5
00:00:16,930 --> 00:00:21,170
covered a big chunk of the language, the vast majority of it,
6
00:00:21,170 --> 00:00:22,882
certainly for common uses.
7
00:00:22,882 --> 00:00:25,090
Now we're going to talk about another language, HTML.
8
00:00:25,090 --> 00:00:28,180
And we're going to cover it in just one video.
9
00:00:28,180 --> 00:00:29,340
>> But that's going to be OK.
10
00:00:29,340 --> 00:00:31,410
That's going to actually become something you're going to get used to.
11
00:00:31,410 --> 00:00:33,535
Now that you have the fundamentals of one language,
12
00:00:33,535 --> 00:00:35,776
it's actually pretty easy to start learning others.
13
00:00:35,776 --> 00:00:37,650
So we're going to start to step a little back
14
00:00:37,650 --> 00:00:43,340
and gloss over the basic differences between these languages
15
00:00:43,340 --> 00:00:45,750
and sort of leave you to it.
16
00:00:45,750 --> 00:00:48,530
There's a lot of really great resources on the internet, which
17
00:00:48,530 --> 00:00:51,279
we're going to start directing you towards because the internet is
18
00:00:51,279 --> 00:00:53,340
a vast repository of information.
19
00:00:53,340 --> 00:00:55,960
And so it's not like you'll be losing out necessarily
20
00:00:55,960 --> 00:00:58,349
by not having the information covered in a video.
21
00:00:58,349 --> 00:01:00,640
You'll still be able to get everything you need and use
22
00:01:00,640 --> 00:01:03,590
the knowledge you've already built up by understanding C
23
00:01:03,590 --> 00:01:07,130
to make the learning curve for these other languages actually a lot flatter.
24
00:01:07,130 --> 00:01:08,640
I promise.
25
00:01:08,640 --> 00:01:12,770
>> But let's talk about one language that's really fundamental for every web
26
00:01:12,770 --> 00:01:14,830
page, which is HTML.
27
00:01:14,830 --> 00:01:18,230
HTML is the Hyper Text Markup Language.
28
00:01:18,230 --> 00:01:22,700
HTML is a language but it is not a programming language.
29
00:01:22,700 --> 00:01:23,900
>> HTML doesn't have variables.
30
00:01:23,900 --> 00:01:26,430
It doesn't have logic or functions or anything like that.
31
00:01:26,430 --> 00:01:30,301
We can't do any programming per se in HTML.
32
00:01:30,301 --> 00:01:32,300
Sometimes you'll hear people describe themselves
33
00:01:32,300 --> 00:01:35,710
as HTML programmers, which isn't entirely accurate.
34
00:01:35,710 --> 00:01:37,980
We can't write HTML programs.
35
00:01:37,980 --> 00:01:40,770
>> HTML is just used to mark up text.
36
00:01:40,770 --> 00:01:42,690
It's called a markup language.
37
00:01:42,690 --> 00:01:47,680
And what this does-- this markup-- we use tags in HTML and these tags--
38
00:01:47,680 --> 00:01:51,600
this markup-- semantically defines the structure of a page
39
00:01:51,600 --> 00:01:55,280
and causes the plain text that exists between tags to be interpreted
40
00:01:55,280 --> 00:01:57,320
by browsers in different ways.
41
00:01:57,320 --> 00:02:00,370
And perhaps it's best to explain this by way of an illustration.
42
00:02:00,370 --> 00:02:06,450
>> Here's a very simple HTML page, not an HTML program, again, an HTML page.
43
00:02:06,450 --> 00:02:08,680
And we know it's an HTML page because we've
44
00:02:08,680 --> 00:02:11,480
bounded everything with HTML tags.
45
00:02:11,480 --> 00:02:13,850
So this is what an HTML tag looks like.
46
00:02:13,850 --> 00:02:15,870
It's between angle brackets.
47
00:02:15,870 --> 00:02:18,570
And notice at the top we have HTML and at the very bottom,
48
00:02:18,570 --> 00:02:21,400
after we've done what is apparently a lot of other HTML,
49
00:02:21,400 --> 00:02:24,310
we have angle bracket slash HTML.
50
00:02:24,310 --> 00:02:29,262
So that sort of is the boundary between what is HTML and what is not.
51
00:02:29,262 --> 00:02:32,220
And of course, conventionally, just as you wrote all of your C programs
52
00:02:32,220 --> 00:02:35,300
with dot C extensions, all of your HTML files
53
00:02:35,300 --> 00:02:37,909
will end with dot HTML extensions.
54
00:02:37,909 --> 00:02:39,200
But there's more going on here.
55
00:02:39,200 --> 00:02:40,658
We don't just have these HTML tags.
56
00:02:40,658 --> 00:02:44,010
We apparently have this thing called a head tag.
57
00:02:44,010 --> 00:02:46,010
Well, OK, what's that?
58
00:02:46,010 --> 00:02:48,550
>> Well maybe it's best to distinguish by way of a body,
59
00:02:48,550 --> 00:02:50,590
body being the content of the web page.
60
00:02:50,590 --> 00:02:55,860
So maybe the head tag defines stuff that isn't in the browser window proper,
61
00:02:55,860 --> 00:02:59,410
but is somehow important to our web page being rendered correctly.
62
00:02:59,410 --> 00:03:02,490
For example, inside of the head tag we have title tags.
63
00:03:02,490 --> 00:03:05,500
>> So title being hello world, that's actually going to be what
64
00:03:05,500 --> 00:03:08,797
shows up in the tab in Chrome or in safari or Firefox--
65
00:03:08,797 --> 00:03:11,880
whatever browser you prefer-- that's what's going to show up in the title.
66
00:03:11,880 --> 00:03:14,800
And before tabs it would show up in your entire browser window
67
00:03:14,800 --> 00:03:19,710
and you can only have one page open in a browser window at a time.
68
00:03:19,710 --> 00:03:22,160
So that's going to be the title of my page up in the tab
69
00:03:22,160 --> 00:03:24,600
or the browser window bar, hello world.
70
00:03:24,600 --> 00:03:28,611
And then the content of my web page will be world, hello.
71
00:03:28,611 --> 00:03:31,360
So let's take a look at what some thing like this might look like.
72
00:03:31,360 --> 00:03:33,210
This is a pretty simple HTML page.
73
00:03:33,210 --> 00:03:35,970
So I'm here in my CS50 IDE and I've zoomed in a little bit.
74
00:03:35,970 --> 00:03:38,290
And I'm just going to open up hello dot HTML
75
00:03:38,290 --> 00:03:42,000
and show you that this is pretty much the page content that we saw before.
76
00:03:42,000 --> 00:03:45,240
My simple HTML, head tags, title tags, body, and so on.
77
00:03:45,240 --> 00:03:47,320
I've indented to be clean.
78
00:03:47,320 --> 00:03:51,530
>> And then what I can do in my IDE is just preview the page.
79
00:03:51,530 --> 00:03:52,630
And there we go.
80
00:03:52,630 --> 00:03:56,070
The content of my page is world, hello, and I don't see anything
81
00:03:56,070 --> 00:03:58,500
in from the head tags there.
82
00:03:58,500 --> 00:03:59,980
It's just the content of the body.
83
00:03:59,980 --> 00:04:00,780
World, hello.
84
00:04:00,780 --> 00:04:03,700
And again the body just said, world, hello.
85
00:04:03,700 --> 00:04:06,160
The other part is missing.
86
00:04:06,160 --> 00:04:07,610
>> So that's really all it is.
87
00:04:07,610 --> 00:04:11,370
This is a very simple basic HTML page.
88
00:04:11,370 --> 00:04:14,280
Now I've indented my HTML to be really nice and organized,
89
00:04:14,280 --> 00:04:15,840
but I don't actually have to.
90
00:04:15,840 --> 00:04:17,959
I could make it look pretty ugly.
91
00:04:17,959 --> 00:04:19,467
And this would still work.
92
00:04:19,467 --> 00:04:21,050
This would be the exact same web page.
93
00:04:21,050 --> 00:04:23,100
I've just gotten rid of all of the white space.
94
00:04:23,100 --> 00:04:24,820
>> As it turns out, white space is data.
95
00:04:24,820 --> 00:04:28,540
And so when we're sending data from sender to receiver, from server
96
00:04:28,540 --> 00:04:30,670
to client, data costs money.
97
00:04:30,670 --> 00:04:34,460
And so getting rid of whitespace is actually a good idea
98
00:04:34,460 --> 00:04:37,320
if you're somebody who serves up a lot of web content.
99
00:04:37,320 --> 00:04:39,820
It's a bad idea if you're somebody who's learning this stuff
100
00:04:39,820 --> 00:04:41,528
and you want to have it nicely organized.
101
00:04:41,528 --> 00:04:43,810
This is a lot easier to parse than this.
102
00:04:43,810 --> 00:04:45,540
But it's functionally identical.
103
00:04:45,540 --> 00:04:48,720
>> The indentation and stuff like that doesn't actually matter in HTML.
104
00:04:48,720 --> 00:04:53,634
All that matters is opening tags and closing tags in the correct order.
105
00:04:53,634 --> 00:04:55,050
Notice what happened here, though.
106
00:04:55,050 --> 00:04:58,450
The markup gives us a way to communicate extra information
107
00:04:58,450 --> 00:04:59,940
about what we've written.
108
00:04:59,940 --> 00:05:03,130
The Hello, World part was interpreted as the title.
109
00:05:03,130 --> 00:05:06,410
And the world, hello part was interpreted as the content
110
00:05:06,410 --> 00:05:09,090
or what should be visible on my web page.
111
00:05:09,090 --> 00:05:12,167
>> There are over 100 of these different tags and lots of great resources
112
00:05:12,167 --> 00:05:13,000
online to find them.
113
00:05:13,000 --> 00:05:14,900
We're going to talk about a few of them in this video, some
114
00:05:14,900 --> 00:05:16,440
of the really fundamental stuff.
115
00:05:16,440 --> 00:05:18,440
But we're not going talk about it all because it
116
00:05:18,440 --> 00:05:20,250
would be exhaustive to do so.
117
00:05:20,250 --> 00:05:22,880
>> Another thing you can do, though, is open up developer tools.
118
00:05:22,880 --> 00:05:26,069
And if you recall from our video on HTTP,
119
00:05:26,069 --> 00:05:27,860
I explained how to open up developer tools.
120
00:05:27,860 --> 00:05:32,020
In Chrome it's usually the F12 key to open up the developer toolbar.
121
00:05:32,020 --> 00:05:35,909
Then instead of choosing the Network tab, you can choose the Elements tab.
122
00:05:35,909 --> 00:05:37,700
And if you load a web page, you'll actually
123
00:05:37,700 --> 00:05:40,280
see the HTML that creates that web page.
124
00:05:40,280 --> 00:05:44,090
And so you can learn a lot about HTML by looking at your favorite websites
125
00:05:44,090 --> 00:05:48,474
and seeing how they build the various pieces of them that you like.
126
00:05:48,474 --> 00:05:50,890
So maybe there's this cool pattern or something like that.
127
00:05:50,890 --> 00:05:52,140
How do they make it with HTML?
128
00:05:52,140 --> 00:05:55,630
Well you can just open up your developer tools and hover over that element
129
00:05:55,630 --> 00:05:57,700
and see exactly what HTML makes it.
130
00:05:57,700 --> 00:05:59,450
So that's a really good way to learn HTML,
131
00:05:59,450 --> 00:06:02,330
and I strongly recommend that you do it both to learn HTML
132
00:06:02,330 --> 00:06:04,930
and also to learn a little bit about some of the options
133
00:06:04,930 --> 00:06:07,050
available to you in developer tools, which
134
00:06:07,050 --> 00:06:10,200
will certainly come in handy as you begin doing more intensive web
135
00:06:10,200 --> 00:06:11,090
programming.
136
00:06:11,090 --> 00:06:14,080
>> So let's take a look at a couple of common HTML tags.
137
00:06:14,080 --> 00:06:17,210
And we'll jump and take a look at what these tags will also render
138
00:06:17,210 --> 00:06:20,490
as by looking at some files in my IDE.
139
00:06:20,490 --> 00:06:26,330
So here are three very basic tags for tweaking the visual appearance of text.
140
00:06:26,330 --> 00:06:29,050
There's B tags, I tags, and U tags.
141
00:06:29,050 --> 00:06:33,170
And respectively what they do is render the text between them in bold,
142
00:06:33,170 --> 00:06:35,430
italics, and underlining.
143
00:06:35,430 --> 00:06:40,430
So let's see what that would look like on an actual web page in my IDE.
144
00:06:40,430 --> 00:06:43,390
>> So here in my IDE I have a file called BIU dot HTML.
145
00:06:43,390 --> 00:06:46,770
BIU dot HTML just being bold, italics, underlining.
146
00:06:46,770 --> 00:06:47,830
I'll open it up.
147
00:06:47,830 --> 00:06:51,810
>> And we'll see that here I have this text is B tags bold.
148
00:06:51,810 --> 00:06:54,010
This text is I tags italic.
149
00:06:54,010 --> 00:06:56,307
And this text is U tags underlined.
150
00:06:56,307 --> 00:06:57,640
What is this going to look like?
151
00:06:57,640 --> 00:06:59,473
Well again, all I have to do is go over here
152
00:06:59,473 --> 00:07:04,690
to my browser, my file browser, click Preview, and this is what comes up.
153
00:07:04,690 --> 00:07:07,520
>> The text in between the B tags is indeed now bold.
154
00:07:07,520 --> 00:07:10,720
The text in between the I tags is indeed now italic.
155
00:07:10,720 --> 00:07:14,634
And the text in between the U tags is indeed now underlined.
156
00:07:14,634 --> 00:07:15,550
So that's pretty good.
157
00:07:15,550 --> 00:07:18,450
We now know how to make text look a little more fancy
158
00:07:18,450 --> 00:07:20,360
or draw emphasis to certain things.
159
00:07:20,360 --> 00:07:25,530
Another couple of common tags here are paragraph tags, P, and header tags,
160
00:07:25,530 --> 00:07:27,980
which I've rendered here as HX.
161
00:07:27,980 --> 00:07:32,520
>> These P tags, these paragraph tags, break your text up into paragraphs.
162
00:07:32,520 --> 00:07:34,646
It's not enough to just hit Enter and leave spaces,
163
00:07:34,646 --> 00:07:37,186
because a computer is only going to do what you tell it to do
164
00:07:37,186 --> 00:07:39,450
and it ignores white space for the most part.
165
00:07:39,450 --> 00:07:41,636
So we can't just hit Enter and expect our computer
166
00:07:41,636 --> 00:07:43,760
to interpret that we want to start a new paragraph.
167
00:07:43,760 --> 00:07:47,670
We have to very explicitly say this is one paragraph-- this is another--
168
00:07:47,670 --> 00:07:50,740
by enclosing each in a set of P tags.
169
00:07:50,740 --> 00:07:54,560
>> And we also have these options for H tags, these header tags.
170
00:07:54,560 --> 00:07:57,000
We have six different levels of headers, one, two, three,
171
00:07:57,000 --> 00:08:01,110
four, five, and six, which are progressively larger and larger
172
00:08:01,110 --> 00:08:01,710
headers.
173
00:08:01,710 --> 00:08:04,360
And they get smaller and smaller and smaller and smaller.
174
00:08:04,360 --> 00:08:07,690
So we have a top level header, a second level header, and so on, and so on.
175
00:08:07,690 --> 00:08:10,480
>> Let's take a look at maybe some P tags and some header tags
176
00:08:10,480 --> 00:08:13,110
in action on a web page.
177
00:08:13,110 --> 00:08:18,180
So here in my IDE I have a file called PH dot HTML, PH being paragraphs
178
00:08:18,180 --> 00:08:18,970
and header tags.
179
00:08:18,970 --> 00:08:20,709
Open that up.
180
00:08:20,709 --> 00:08:23,000
There's a lot going on here because I've put some lorem
181
00:08:23,000 --> 00:08:24,660
ipsum, some just random text in here.
182
00:08:24,660 --> 00:08:27,284
So I'll zoom out a little bit because there's so much going on.
183
00:08:27,284 --> 00:08:31,980
But notice that I have at the very top here I have an H1, a level one,
184
00:08:31,980 --> 00:08:32,802
header tag.
185
00:08:32,802 --> 00:08:36,010
Then I have a paragraph, which is just a bunch of random text-- lorem ipsum--
186
00:08:36,010 --> 00:08:38,720
just default standard filling in text.
187
00:08:38,720 --> 00:08:41,970
So I have two paragraphs inside of that level one header and then down below I
188
00:08:41,970 --> 00:08:46,850
have a level two header here on line 24, a second level header, and another two
189
00:08:46,850 --> 00:08:47,840
paragraphs.
190
00:08:47,840 --> 00:08:51,910
Well what does this look like if I view it in my preview?
191
00:08:51,910 --> 00:08:53,790
Let's see.
192
00:08:53,790 --> 00:08:55,730
>> So notice that the first level header here
193
00:08:55,730 --> 00:08:58,420
is actually quite a bit bigger than the second level header.
194
00:08:58,420 --> 00:08:59,940
So we used H1 tags.
195
00:08:59,940 --> 00:09:03,820
And notice that the P tags allow us to break things out into paragraphs.
196
00:09:03,820 --> 00:09:07,500
If we had gotten rid of those P tags and actually just put Enters or Returns
197
00:09:07,500 --> 00:09:10,110
in between what we hoped would be the different paragraphs,
198
00:09:10,110 --> 00:09:13,193
they would all just slam together and it wouldn't have this nice paragraph
199
00:09:13,193 --> 00:09:15,840
separation with space above and below.
200
00:09:15,840 --> 00:09:18,300
And so that's what paragraph tags and header tags
201
00:09:18,300 --> 00:09:22,440
are commonly used to do to draw attention to portions of our web page
202
00:09:22,440 --> 00:09:23,550
in that way.
203
00:09:23,550 --> 00:09:27,560
>> Next up are some tags that we use to build lists on our web page.
204
00:09:27,560 --> 00:09:30,820
So we have unordered lists-- ULs-- which are just
205
00:09:30,820 --> 00:09:34,090
bulleted lists, ordered list which are numbered--
206
00:09:34,090 --> 00:09:37,680
OLs-- and inside of either one of those we need to have
207
00:09:37,680 --> 00:09:40,600
sets of how to indicate list items, LI.
208
00:09:40,600 --> 00:09:44,370
And so we have open UL tag and we put items inside of it.
209
00:09:44,370 --> 00:09:46,920
And then when we're done with that, we can close the UL tag.
210
00:09:46,920 --> 00:09:49,850
>> And similarly we can have an ordered or numbered list
211
00:09:49,850 --> 00:09:51,560
and put list items inside of that.
212
00:09:51,560 --> 00:09:53,350
So let's take a look at a couple of lists
213
00:09:53,350 --> 00:09:57,230
and what they would render as on CS50 IDE.
214
00:09:57,230 --> 00:10:00,640
So I have here in my IDE a file called lists dot HTML.
215
00:10:00,640 --> 00:10:03,100
Let's take a look.
216
00:10:03,100 --> 00:10:08,482
>> And notice here I have an unordered list with five things in it.
217
00:10:08,482 --> 00:10:11,440
And then I have an ordered list, and I've changed the tag a little bit,
218
00:10:11,440 --> 00:10:11,939
right?
219
00:10:11,939 --> 00:10:13,152
I've said start equals six.
220
00:10:13,152 --> 00:10:16,110
It turns out with an ordered list I can set the starting point wherever
221
00:10:16,110 --> 00:10:20,130
I want-- by default it will be one-- by just adding this so-called attribute
222
00:10:20,130 --> 00:10:21,190
to my OL tag.
223
00:10:21,190 --> 00:10:23,572
And so this list will start counting at six.
224
00:10:23,572 --> 00:10:26,780
So the elements of that numbered list should be six, seven, eight, nine, ten,
225
00:10:26,780 --> 00:10:29,930
because there are five elements in the list, as opposed to one,
226
00:10:29,930 --> 00:10:33,770
two, three, four, five, which would be the case if I had said OL
227
00:10:33,770 --> 00:10:36,730
without specifying the start attribute.
228
00:10:36,730 --> 00:10:41,594
>> So we'll just preview this so you can get a sense for what's going on here.
229
00:10:41,594 --> 00:10:42,260
And there we go.
230
00:10:42,260 --> 00:10:44,610
There's my list.
231
00:10:44,610 --> 00:10:47,810
The first five elements are unordered or bulleted lists.
232
00:10:47,810 --> 00:10:51,010
And the next five elements are a separate ordered list
233
00:10:51,010 --> 00:10:52,980
starting from six.
234
00:10:52,980 --> 00:10:56,247
So that's how we can build lists using HTML.
235
00:10:56,247 --> 00:10:58,080
Another thing you might want to do with HTML
236
00:10:58,080 --> 00:11:01,520
is build a table of information of rows and columns
237
00:11:01,520 --> 00:11:04,560
to present information in a particularly organized way.
238
00:11:04,560 --> 00:11:09,110
To do this with HTML we can have a table definition beginning open bracket
239
00:11:09,110 --> 00:11:10,160
table.
240
00:11:10,160 --> 00:11:14,680
And then inside of that table we might have a set of rows, TR tags
241
00:11:14,680 --> 00:11:15,980
to indicate each row.
242
00:11:15,980 --> 00:11:22,510
And then TD tags go inside of TR tags to specify a column within a row.
243
00:11:22,510 --> 00:11:24,340
>> Why is it called TD and not TC?
244
00:11:24,340 --> 00:11:25,940
Well, TD stands for table data.
245
00:11:25,940 --> 00:11:27,900
Usually you're putting your information there.
246
00:11:27,900 --> 00:11:29,440
So that's why it's TD and not TC.
247
00:11:29,440 --> 00:11:31,140
It's a little bit confusing.
248
00:11:31,140 --> 00:11:33,720
>> So you have table tags and inside of your table tags
249
00:11:33,720 --> 00:11:35,600
you have a number of rows, TRs.
250
00:11:35,600 --> 00:11:40,030
And inside each row you have TDs for the number of columns
251
00:11:40,030 --> 00:11:42,880
that you want to have in that particular row.
252
00:11:42,880 --> 00:11:47,730
Let's take a look at a very simple table over in CS50 IDE.
253
00:11:47,730 --> 00:11:49,730
>> So I have here a file called table dot HTML.
254
00:11:49,730 --> 00:11:53,390
Let's have a look at what that looks like.
255
00:11:53,390 --> 00:11:56,225
There's a lot going on here but if you notice I have a table open.
256
00:11:56,225 --> 00:11:57,850
I'm starting the definition with table.
257
00:11:57,850 --> 00:12:02,100
And then in my first row I apparently have four columns, one, two, three,
258
00:12:02,100 --> 00:12:02,660
four.
259
00:12:02,660 --> 00:12:04,290
And then I'm done with that row.
260
00:12:04,290 --> 00:12:07,750
>> Then I start another row and do two, four, six, eight.
261
00:12:07,750 --> 00:12:08,850
Finish that row.
262
00:12:08,850 --> 00:12:11,410
Do another row, three, six, nine, 12.
263
00:12:11,410 --> 00:12:14,830
And then a last row, four, eight, 12, and though it's
264
00:12:14,830 --> 00:12:16,560
a little cut off here, 16.
265
00:12:16,560 --> 00:12:17,710
>> I finished that row.
266
00:12:17,710 --> 00:12:18,970
I finished the table.
267
00:12:18,970 --> 00:12:21,430
And then I'm done with my HTML.
268
00:12:21,430 --> 00:12:22,590
What does this look like?
269
00:12:22,590 --> 00:12:26,014
270
00:12:26,014 --> 00:12:27,430
Well, it's not really much to see.
271
00:12:27,430 --> 00:12:31,690
I've clearly organized my information in a somewhat more organized way.
272
00:12:31,690 --> 00:12:33,755
But it's not super pretty here.
273
00:12:33,755 --> 00:12:36,130
And we're going to deal with that when we talk about CSS.
274
00:12:36,130 --> 00:12:38,930
We'll revisit this idea of what we do to make a table--
275
00:12:38,930 --> 00:12:41,260
maybe format it a little bit better?
276
00:12:41,260 --> 00:12:45,070
But I do still have four rows, each of which has four columns,
277
00:12:45,070 --> 00:12:48,890
and really what this amounts to is a very simple four by four multiplication
278
00:12:48,890 --> 00:12:49,870
table.
279
00:12:49,870 --> 00:12:51,690
>> Just a few more tags we'll talk about.
280
00:12:51,690 --> 00:12:54,617
Let's talk about the concept of an HTML form.
281
00:12:54,617 --> 00:12:57,450
So you may have seen this in the context of logging into a web page.
282
00:12:57,450 --> 00:12:59,100
Usually you type in your user name.
283
00:12:59,100 --> 00:13:01,510
You type in your password, and you're good to go.
284
00:13:01,510 --> 00:13:04,170
That would be the beginning of a form.
285
00:13:04,170 --> 00:13:05,420
>> Skipping over div a second.
286
00:13:05,420 --> 00:13:07,987
We also have inputs which kind of fit inside of forms.
287
00:13:07,987 --> 00:13:10,320
These are the elements that you're actually typing into,
288
00:13:10,320 --> 00:13:12,580
or the radio buttons you're ticking, or the check
289
00:13:12,580 --> 00:13:14,310
boxes that you're ticking off.
290
00:13:14,310 --> 00:13:15,770
So these go inside of forms.
291
00:13:15,770 --> 00:13:18,500
And they comprise basically each row of the form
292
00:13:18,500 --> 00:13:19,887
if your form is formatted well.
293
00:13:19,887 --> 00:13:22,220
Then there's this concept of a div, which doesn't really
294
00:13:22,220 --> 00:13:25,060
fit in any particular category of tags like the ones I've
295
00:13:25,060 --> 00:13:26,170
been doing previously.
296
00:13:26,170 --> 00:13:29,790
It just sort of demarcates the beginning of some arbitrary division--
297
00:13:29,790 --> 00:13:31,670
div-- of the page.
298
00:13:31,670 --> 00:13:33,210
There's no visual break.
299
00:13:33,210 --> 00:13:34,800
There's no line.
300
00:13:34,800 --> 00:13:37,180
It's not set off as a separate chunk automatically.
301
00:13:37,180 --> 00:13:39,430
You'd have to style it that way to do that.
302
00:13:39,430 --> 00:13:42,110
>> It just sort of says I want a piece of space on my web page,
303
00:13:42,110 --> 00:13:45,190
and I'm just going to call it this division of my page.
304
00:13:45,190 --> 00:13:47,619
We can put stuff inside of divs, and in fact,
305
00:13:47,619 --> 00:13:49,410
when we head over to IDE in a second, we'll
306
00:13:49,410 --> 00:13:53,760
see that I'm putting my form inside of a div.
307
00:13:53,760 --> 00:13:57,050
>> So I have here in my IDE a file called div form dot HTML.
308
00:13:57,050 --> 00:13:59,260
Let's open it up.
309
00:13:59,260 --> 00:14:01,460
Notice that like I said, div is kind of arbitrary.
310
00:14:01,460 --> 00:14:01,640
Right?
311
00:14:01,640 --> 00:14:02,973
It doesn't really mean anything.
312
00:14:02,973 --> 00:14:05,140
So I have an arbitrary first division of my page.
313
00:14:05,140 --> 00:14:07,848
And then instead of another div later on, starting on line eight,
314
00:14:07,848 --> 00:14:08,730
I have this form.
315
00:14:08,730 --> 00:14:13,594
And inside of the form I have a number of inputs, fields of the form.
316
00:14:13,594 --> 00:14:16,510
So I have a field whose name is A-- which doesn't really mean anything
317
00:14:16,510 --> 00:14:19,350
right now-- that apparently takes text, another one that
318
00:14:19,350 --> 00:14:22,630
takes a password, another that's a Radio button, another that's a check box,
319
00:14:22,630 --> 00:14:24,797
and another that's a Submit button.
320
00:14:24,797 --> 00:14:26,630
Well, what does this all actually look like?
321
00:14:26,630 --> 00:14:27,629
Well, let's take a look.
322
00:14:27,629 --> 00:14:31,010
We'll open it up in our preview window.
323
00:14:31,010 --> 00:14:33,557
Notice that this arbitrary first division-- there's
324
00:14:33,557 --> 00:14:34,640
no visual separation here.
325
00:14:34,640 --> 00:14:37,150
It didn't really do anything, right?
326
00:14:37,150 --> 00:14:38,220
>> And then I have my form.
327
00:14:38,220 --> 00:14:39,890
And I didn't do any special formatting.
328
00:14:39,890 --> 00:14:42,680
So the form is just one big row of information.
329
00:14:42,680 --> 00:14:46,424
If I had formatted my form differently, I might have it line by line by line.
330
00:14:46,424 --> 00:14:47,590
But I didn't do any styling.
331
00:14:47,590 --> 00:14:49,256
Again, we're not talking about CSS here.
332
00:14:49,256 --> 00:14:51,030
We're just talking about HTML.
333
00:14:51,030 --> 00:14:53,980
>> Well in my text form I can type-- remember that forms of type text
334
00:14:53,980 --> 00:14:55,480
so I can put my name.
335
00:14:55,480 --> 00:14:57,330
And in my password I can type my password.
336
00:14:57,330 --> 00:14:59,740
And because that field is of type password,
337
00:14:59,740 --> 00:15:01,470
you don't know what my password is.
338
00:15:01,470 --> 00:15:02,800
It's all dots.
339
00:15:02,800 --> 00:15:09,140
>> I can also choose to tick off a radio button or tick off a check box.
340
00:15:09,140 --> 00:15:10,420
Or I could submit my form.
341
00:15:10,420 --> 00:15:11,810
And I didn't do anything, so when I submit my form,
342
00:15:11,810 --> 00:15:13,090
the page just refreshes.
343
00:15:13,090 --> 00:15:16,970
But I could perhaps configure my Submit button to do something else.
344
00:15:16,970 --> 00:15:20,410
And we'll see what we can do with that in a future video on PHP.
345
00:15:20,410 --> 00:15:22,520
But this builds a very simple form that we
346
00:15:22,520 --> 00:15:27,360
can use to have users interact and submit information to our website.
347
00:15:27,360 --> 00:15:29,620
>> One last comment before we move on to some other tags
348
00:15:29,620 --> 00:15:32,040
are to take a look at this input tag one more time.
349
00:15:32,040 --> 00:15:35,760
Notice that I've highlighted the ends of the tag in red.
350
00:15:35,760 --> 00:15:39,390
Every other tag we've seen so far has had a beginning and an end, an opening
351
00:15:39,390 --> 00:15:41,030
tag and a closing tag.
352
00:15:41,030 --> 00:15:42,520
>> But an input tag doesn't.
353
00:15:42,520 --> 00:15:46,860
There's no text that goes in between input tags.
354
00:15:46,860 --> 00:15:49,160
All of the information we're intending to convey
355
00:15:49,160 --> 00:15:52,640
is bound up as part of the attributes of that input.
356
00:15:52,640 --> 00:15:54,690
Notice we have input name equals x.
357
00:15:54,690 --> 00:15:55,580
Type equals y.
358
00:15:55,580 --> 00:15:57,660
That's really all the information we need.
359
00:15:57,660 --> 00:15:59,470
>> This is called a self closing tag.
360
00:15:59,470 --> 00:16:02,470
It doesn't require an opening and a close because all of the information
361
00:16:02,470 --> 00:16:04,974
is contained inside the tag and its attributes.
362
00:16:04,974 --> 00:16:06,390
So sometimes you'll see this, too.
363
00:16:06,390 --> 00:16:10,400
So just be aware that if you have a tag that is entirely self-contained,
364
00:16:10,400 --> 00:16:14,170
it opens and closes itself with the open angle bracket on the left
365
00:16:14,170 --> 00:16:17,000
and the slash angle bracket on the right.
366
00:16:17,000 --> 00:16:20,580
We'll see another one of those right now with image tags as well.
367
00:16:20,580 --> 00:16:23,300
>> Before we talk about images, we need to talk about hyperlinks.
368
00:16:23,300 --> 00:16:26,080
If we want our web page to be interactive and move us around,
369
00:16:26,080 --> 00:16:28,121
it would be nice be able to click on one of those
370
00:16:28,121 --> 00:16:30,190
what has typically been a blue link.
371
00:16:30,190 --> 00:16:34,440
This is actually how we build a hyperlink in our web page.
372
00:16:34,440 --> 00:16:36,540
And interestingly enough there's another HTML tag
373
00:16:36,540 --> 00:16:39,000
called link, which is not a hyperlink.
374
00:16:39,000 --> 00:16:44,130
A here stands for anchor, and that's how we indicate a hyperlink.
375
00:16:44,130 --> 00:16:49,150
>> A href equals x means go to web page X. And everything
376
00:16:49,150 --> 00:16:51,580
between the open A tag and the close A tag
377
00:16:51,580 --> 00:16:56,010
is what's going to be that underlined blue text that looks like a link
378
00:16:56,010 --> 00:16:57,590
that we're familiar with.
379
00:16:57,590 --> 00:17:01,660
Below that we have an image tag, which is a self closing tag for displaying
380
00:17:01,660 --> 00:17:05,599
an image located at X. And you might be able to change
381
00:17:05,599 --> 00:17:08,280
that image by specifying width and height
382
00:17:08,280 --> 00:17:11,640
and other attributes in that dot dot dot there.
383
00:17:11,640 --> 00:17:14,260
>> At the very bottom here we have a very interesting
384
00:17:14,260 --> 00:17:16,170
looking tag that doesn't have a closing tag.
385
00:17:16,170 --> 00:17:19,410
It's exclamation point doctype HTML.
386
00:17:19,410 --> 00:17:23,300
So HTML has been around since the early 1990s for building web pages,
387
00:17:23,300 --> 00:17:25,859
and it's gone undergone several revisions since then.
388
00:17:25,859 --> 00:17:28,550
Most recently in 2014 it underwent a revision
389
00:17:28,550 --> 00:17:33,440
called HTML5 which is now the current sort of de facto HTML standard.
390
00:17:33,440 --> 00:17:36,730
>> To indicate that our web pages are written using HTML5,
391
00:17:36,730 --> 00:17:38,160
this is how we start off.
392
00:17:38,160 --> 00:17:40,380
It can be omitted but what that basically
393
00:17:40,380 --> 00:17:45,930
means is you can't use any of the tags that are HTML5 tags, those new tags.
394
00:17:45,930 --> 00:17:48,591
So we always start off if we're using HTML5.
395
00:17:48,591 --> 00:17:51,340
And all the tags we've talked about previously are not HTML5 tags.
396
00:17:51,340 --> 00:17:55,470
But this would indicate that HTML5 tags will be present.
397
00:17:55,470 --> 00:17:58,400
And so we have exclamation doctype HTML, which
398
00:17:58,400 --> 00:18:01,280
is at the very beginning of our HTML file, and then after that point
399
00:18:01,280 --> 00:18:04,930
we actually have our HTML open tag and proceed from there.
400
00:18:04,930 --> 00:18:10,050
>> The last one is a comment tag, which looks slightly different, too.
401
00:18:10,050 --> 00:18:12,810
It starts off with angle bracket exclamation dash
402
00:18:12,810 --> 00:18:15,220
dash but no closing bracket.
403
00:18:15,220 --> 00:18:20,150
In between those two elements there is where you write your comments.
404
00:18:20,150 --> 00:18:28,420
And let's take a look at images and comments and links in CS50 IDE.
405
00:18:28,420 --> 00:18:32,850
>> So I have here a file called image link dot HTML which I'm going to open up.
406
00:18:32,850 --> 00:18:36,420
And notice I've got a couple of comments here in my HTML comments.
407
00:18:36,420 --> 00:18:38,990
So just like in C and other programming languages,
408
00:18:38,990 --> 00:18:43,169
HTML just by being a markup language does have the ability to have comments.
409
00:18:43,169 --> 00:18:45,710
And so I'm apparently going to place a picture of Rick Astley
410
00:18:45,710 --> 00:18:49,060
somewhere between this div tag, this arbitrary division.
411
00:18:49,060 --> 00:18:51,497
Apparently that file is located at Rick dot JPEG, which
412
00:18:51,497 --> 00:18:53,580
if we head back over to my file tree for a second,
413
00:18:53,580 --> 00:18:55,490
is a file that exists in the current directory.
414
00:18:55,490 --> 00:18:56,031
So that's OK.
415
00:18:56,031 --> 00:18:57,710
I can reference it.
416
00:18:57,710 --> 00:18:59,680
>> Then I can have internal links.
417
00:18:59,680 --> 00:19:05,080
So notice on line 11 here my href is hello dot HTML.
418
00:19:05,080 --> 00:19:09,050
So that just refers to hello dot HTML which exists in the current directory.
419
00:19:09,050 --> 00:19:12,980
And I can also have external links by just specifying HTTPS
420
00:19:12,980 --> 00:19:16,180
to indicate that I'm not talking about a file in my current directory.
421
00:19:16,180 --> 00:19:19,730
I'm talking about a file that exists somewhere on the internet, which I have
422
00:19:19,730 --> 00:19:23,370
to request using the HTTP protocol.
423
00:19:23,370 --> 00:19:25,990
>> So let's take a look at what this page might look like
424
00:19:25,990 --> 00:19:29,500
and get ready for a picture of Rick Astley to show up on your screen.
425
00:19:29,500 --> 00:19:31,490
So I'll preview this.
426
00:19:31,490 --> 00:19:33,800
There's Rick Astley at the very top in this arbitrary
427
00:19:33,800 --> 00:19:35,008
division I put it at the top.
428
00:19:35,008 --> 00:19:36,960
And then down below I have my links, right?
429
00:19:36,960 --> 00:19:39,330
>> I have a link to hello dot HTML.
430
00:19:39,330 --> 00:19:42,860
And if I click that, I get moved over to this page
431
00:19:42,860 --> 00:19:47,050
that we're very familiar with from the very beginning of our program.
432
00:19:47,050 --> 00:19:50,880
If I pop that page open again, if I pop image link open one more time,
433
00:19:50,880 --> 00:19:54,420
I can also go externally to CS50's website.
434
00:19:54,420 --> 00:19:56,740
And there we see-- I'll zoom out a little bit here--
435
00:19:56,740 --> 00:20:00,260
we'll see CS50's website sort of embedded in the middle of our page.
436
00:20:00,260 --> 00:20:04,670
So I was able to make an internal link as well as an external link.
437
00:20:04,670 --> 00:20:07,200
>> The last rule with HTML that we're going to talk about here
438
00:20:07,200 --> 00:20:09,510
is that your HTML should be well formed.
439
00:20:09,510 --> 00:20:13,020
In C we talked a lot about the various syntax of things.
440
00:20:13,020 --> 00:20:17,650
In HTML the syntax really revolves around tags.
441
00:20:17,650 --> 00:20:19,660
Every tag you open needs to be closed.
442
00:20:19,660 --> 00:20:22,630
And in fact, every tag you open should be closed in reverse order.
443
00:20:22,630 --> 00:20:25,790
>> So if you open a bold tag, an italic tag, and then an underline tag
444
00:20:25,790 --> 00:20:28,120
to do all three to a particular set of text,
445
00:20:28,120 --> 00:20:30,070
you should close them in reverse order.
446
00:20:30,070 --> 00:20:32,270
So if you opened bold, italic, underline, you
447
00:20:32,270 --> 00:20:35,240
want to close underline, italic, bold.
448
00:20:35,240 --> 00:20:39,990
This sort of encapsulation is what keeps HTML nice and organized.
449
00:20:39,990 --> 00:20:44,370
>> Unlike C, though, syntax errors won't actually cripple your HTML possibly.
450
00:20:44,370 --> 00:20:48,730
Your HTML may be not well formed but would still work.
451
00:20:48,730 --> 00:20:50,589
And so these errors can sort of slide by.
452
00:20:50,589 --> 00:20:52,130
It's up to you to really be vigilant.
453
00:20:52,130 --> 00:20:54,760
Sometimes they will fail but sometimes you can get away with it.
454
00:20:54,760 --> 00:20:56,509
>> It can be a really difficult task, though,
455
00:20:56,509 --> 00:21:00,660
to keep track of when you opened a tag, when you closed it,
456
00:21:00,660 --> 00:21:04,110
especially as your HTML files get bigger and bigger.
457
00:21:04,110 --> 00:21:05,490
You'll want some help.
458
00:21:05,490 --> 00:21:07,560
And there are online validator tools that you
459
00:21:07,560 --> 00:21:11,474
can use to have a look at your web page and see if it's well formed HTML.
460
00:21:11,474 --> 00:21:13,390
And you should definitely take a look at those
461
00:21:13,390 --> 00:21:16,620
and start to use them as you begin doing some work with HTML,
462
00:21:16,620 --> 00:21:20,800
writing HTML, just so you get some good habits about organizing
463
00:21:20,800 --> 00:21:24,377
your HTML in a good way and good style and making sure
464
00:21:24,377 --> 00:21:27,210
that you're not doing anything that could create a syntax error that
465
00:21:27,210 --> 00:21:30,270
would cause you a bit of a problem down the road.
466
00:21:30,270 --> 00:21:31,190
>> I'm Doug Lloyd.
467
00:21:31,190 --> 00:21:33,450
This is CS50.
468
00:21:33,450 --> 00:21:34,859
39159
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.