1
00:00:00,000 --> 00:00:02,930
>> SPEAKER: Suppose that we'd like to
create a home page for a course that

2
00:00:02,930 --> 00:00:04,900
provides students with
links to resources.

3
00:00:04,900 --> 00:00:05,880
How might we do it?

4
00:00:05,880 --> 00:00:08,460
Well, let me propose this
very simple example.

5
00:00:08,460 --> 00:00:12,740
>> Here, we have the course's name, CS50,
below which is an ordered list, one

6
00:00:12,740 --> 00:00:15,730
with a link to lectures, and one
with a link to the syllabus.

7
00:00:15,730 --> 00:00:19,500
If I click now on lectures, I see
another unordered list, this time with

8
00:00:19,500 --> 00:00:22,400
a link to Week 0, and another
link to Week 1.

9
00:00:22,400 --> 00:00:25,760
If I choose Week 0, for instance, I'll
now see that we have links to

10
00:00:25,760 --> 00:00:27,780
Wednesday and links to Friday.

11
00:00:27,780 --> 00:00:32,950
And if I dive in one level
deeper, this is CS50.

12
00:00:32,950 --> 00:00:35,880
>> Now, how might we go about implementing
the site in code?

13
00:00:35,880 --> 00:00:37,310
Well, let's take a look.

14
00:00:37,310 --> 00:00:41,090
Here, in index.php, allow me
to propose not even PHP

15
00:00:41,090 --> 00:00:43,260
code, but simply HTML.

16
00:00:43,260 --> 00:00:46,290
In particular, there's that unordered
list inside of which

17
00:00:46,290 --> 00:00:47,950
are two list items.

18
00:00:47,950 --> 00:00:51,500
>> If we now look at lectures.php, to
which the first of those bullets

19
00:00:51,500 --> 00:00:55,250
linked, we now see that second unordered
list, this one with links to

20
00:00:55,250 --> 00:00:57,110
Week 0 and Week 1.

21
00:00:57,110 --> 00:01:01,830
And we take a look at week0.php, to
which that first bullet links, here we

22
00:01:01,830 --> 00:01:05,120
see, again, an unordered list, this
time with a link to Wednesday's

23
00:01:05,120 --> 00:01:07,940
slides, and another link
to Friday's slides.

24
00:01:07,940 --> 00:01:10,330
And in Week 1 is very similar code.

25
00:01:10,330 --> 00:01:13,610
>> Now across all four of these files
is quite a bit of redundancy.

26
00:01:13,610 --> 00:01:17,970
In particular, each of them has an HTML
tag, a head tag, a title tag, and

27
00:01:17,970 --> 00:01:19,340
the title CS50.

28
00:01:19,340 --> 00:01:24,030
Each of them has a body and an H1 tag,
inside of which is, again, CS50.

29
00:01:24,030 --> 00:01:27,240
And beneath that is an unordered
list again and again.

30
00:01:27,240 --> 00:01:31,270
Surely it would be nice if we could
somehow factor out those commonalities

31
00:01:31,270 --> 00:01:34,860
into some central place so that, if
I ever want to change my page's

32
00:01:34,860 --> 00:01:38,580
structure or even its title, I
could do it much more easily.

33
00:01:38,580 --> 00:01:40,331