1
00:00:00,000 --> 00:00:00,360

2
00:00:00,360 --> 00:00:01,970
>> DAVID MALAN: So I've been working
on this search engine

3
00:00:01,970 --> 00:00:03,480
that looks like this.

4
00:00:03,480 --> 00:00:07,580
I seem to have a title called CS50
Search, below which is an HTML form,

5
00:00:07,580 --> 00:00:10,430
inside of which is an input whose
type is text and another input

6
00:00:10,430 --> 00:00:12,260
whose type is submit.

7
00:00:12,260 --> 00:00:15,400
Let's now take a look at the underlying
source code for this page.

8
00:00:15,400 --> 00:00:20,180
>> Here in search-2.html, notice that I
indeed have a title in the form of the

9
00:00:20,180 --> 00:00:23,260
head as well as in the body
with an h1 tag around it.

10
00:00:23,260 --> 00:00:26,490
I have an HTML form, and
then those two inputs.

11
00:00:26,490 --> 00:00:30,650
But notice in particular on the body
tag, that I've declared a style

12
00:00:30,650 --> 00:00:35,770
attribute whose value is text-align:
center;, thereby specifying that all

13
00:00:35,770 --> 00:00:38,390
text on this page should be
aligned in the center.

14
00:00:38,390 --> 00:00:41,700
>> Now this works perfectly correctly,
but it's a little bit sloppy.

15
00:00:41,700 --> 00:00:43,900
You can't really tell as much
because this page is fairly

16
00:00:43,900 --> 00:00:44,960
small at the moment.

17
00:00:44,960 --> 00:00:47,520
But imagine if this page got
longer and longer and

18
00:00:47,520 --> 00:00:49,180
longer and more complex.

19
00:00:49,180 --> 00:00:53,960
>> Notice that the pattern I've adopted
here is to intermingle my aesthetics

20
00:00:53,960 --> 00:00:57,380
with the structure of the page
by using the style attribute.

21
00:00:57,380 --> 00:01:00,540
Long story short, this isn't the best
design, certainly as your pages grow

22
00:01:00,540 --> 00:01:02,010
more complex.

23
00:01:02,010 --> 00:01:05,830
Better design would be to factor out
that stylization and put it someplace

24
00:01:05,830 --> 00:01:09,730
central, for instance not in a style
attribute but in a style tag,

25
00:01:09,730 --> 00:01:13,310
specifically a style tag inside
of my page's head tag.

26
00:01:13,310 --> 00:01:14,830
Let's do exactly that.

27
00:01:14,830 --> 00:01:18,160
>> First let's go in here and delete
this style attribute altogether.

28
00:01:18,160 --> 00:01:22,420
Then back up in my page's head, let's
declare a style tag and close it at

29
00:01:22,420 --> 00:01:24,620
the same time, so I don't
forget to later.

30
00:01:24,620 --> 00:01:28,120
And then let's specify that the body
of this page should have a CSS

31
00:01:28,120 --> 00:01:32,040
property of text-align is center.

32
00:01:32,040 --> 00:01:35,320
Let's now save this page, reload the
browser, and see what the effect is.

33
00:01:35,320 --> 00:01:38,070

34
00:01:38,070 --> 00:01:40,510
>> Reloading in my browser--

35
00:01:40,510 --> 00:01:41,570
no effect at all.

36
00:01:41,570 --> 00:01:43,110
But no effect was intended.

37
00:01:43,110 --> 00:01:45,150
We're simply improving
this page's design.

38
00:01:45,150 --> 00:01:47,606