>> [音乐播放]
大卫·马兰：好，欢迎回来。
这是CS50。
这是7周结束。
而且这是清道夫的结束 从追捕问题集4
你可能还记得。
恢复所有的经过 员工的JPEG文件，
你受到挑战，如果你愿意， 拍摄自己与尽可能多的
那些人的，你可以。
我们得到了一大堆的意见书 在过去的几周里，
事实上，相当多的正确中午前 今天，其中一些是那些在这里
在这里抓到in--看起来like--安嫩伯格 大厅办公时间，一个在这里
洛厄尔房子尼克。
这里的拉蒙被抓的电话。
这是在CS50的午餐。
这是杰森Skyping与 一个更有创意的同学，
谁给他打电话这种方式。
我们不知道这是什么了。
>> [笑]
>> 大卫·马兰：但 这是值得一千兆字节。
这里是长安，谁 硬是跑了舞台
为了避免被偷拍1 一天，但最终被抓获。
这是尼克。
这里是艾莉森下来的领域。
和Zamyla即使被发现 在舞厅的竞争。
因此，我们将通过 这些照片，弄清楚
谁提交的最 最早和奖励
1神话般的奖品，如 承诺规范。
同时，我们也将跟进有关 被涉及的空间。
>> 一对夫妇announcements--所以午餐 是，再次，本周五下午1:15。
如果您想加入我们的行列， RSVP在该URL在这里。
杰森再次出现在这里从一个 该路段的一两年
回来，刚巧 落在万圣节。
而事实上，他装扮成一个 南瓜特定的一年。
如果你看这一节 他从2011年段
8，如果你很好奇， 在CS50.tv，我觉得
这是在这一年中 他的空气泵工作。
>> 如果再观看 在2012年类似的部分，
你会看到这个杰森多少瘪， 由于该诉讼已不再发挥作用，
这仅仅是说 本周五，如果你愿意
想刻有Daven南瓜 和加布等人，RSVP的头
在cs50.harvard.edu地址。
它有望成为很大的乐趣。
Daven，我们被告知，已刻 南瓜他所有的生活。
加布里埃尔来自巴西从未 雕刻南瓜的万圣节。
所以在那里与他们他在学习。
>> 研讨会，meanwhile-- 所以你很快就学会
什么我们的期望是 最后的项目，基本上
将归结为 设计和实现
最感兴趣的任何项目 你，虽然经审批
从你的教学研究员的指导。
朝的结束 学期中，我们介绍了一些
研讨会，这是可选的类 为首的教学研究员和哈佛
工作人员，横跨朋友，当然 校园里，各种主题，
相切的 课程的基本大纲
但仍然适用的，有趣的， 不同的潜在最终的项目。
>> 例如，第一，如果你想 注册，头部到网址那里。
这就是阵容 今年的研讨会孤单。
但要意识到我们有几十个 从过去几年的研讨会，所有这些
在研讨会菜单链接 课程网站的选项。
所以，如果你正在考虑 超越你的舒适区
或者挑一些新的技能， 例如，编程iPhone
与雨燕，新的语言的应用程序 苹果或Objective-C的
或Android应用程序或编程[？ CUE？] 灯泡，或任何的主题
在这里，更由于支票 从注册页面。
>> 所以我们开始和结束的 与看着HTTP周一。
这么快refresher-- HTTP， 超文本传输​​协议。
但是，这究竟意味着什么？
这是什么意思呢？
那是一只手？
我知道你只是摸不着头脑。
但是你要提出HTTP是什么？
>> 听众：如何电脑 与[听不清]通信。
大卫·马兰：我错过了最后一部分。
计算机通信with--
>> 听众：互联网服务器。
大卫·马兰：Good--与互联网 服务器，并且具体地，网络服务器。
因为回忆，有一堆 在互联网上的服务，其中的一些
你可能使用的日常聊天的 和消息，聊天和Web和电子邮件，
等。
和HTTP仅仅是 协议的Web浏览器
沟通与说话的时候 Web服务器，反之亦然。
并且，在该模拟 人类世界可能是，
我伸出我的手有些抖 其他人的，他（或她）
确认通过扩展 他或她的手为好。
所以，这只是一个协议， 一组约定。
>> 什么确实是这些公约？
那么，它只是归结为 发送邮件来回，
因为我们在这里描述。
还有的在几个方面 您可以发送这些消息。
也许最 常见的被称为GET。
我们会看到一个对比 这之前很长。
>> 但是，从浏览器中的GET请求 服务器只是看起来像这样。
这是一堆文字，它使得 里面的一个虚拟的信封。
在该包络线的外侧 走了几个片段的细节。
有什么需要去上 信封，可以这么说，
为了得到这样的一个请求 这从我的Web服务器？
是啊。
>> 听众：您的IP地址。
>> 大卫·马兰：我的IP地址 在From字段，可以这么说，
并且，当然，在 接收方的IP地址。
但在网络分组的情况下， 我们需要更多的细节
这是不够的只是 送的包络线到一台服务器，
因为该服务器可能 听不同类型的
互联网流量。
那么还有什么需要我们 除了收件人的IP？
是吗？
>> 听众：是不是TCP？
大卫·马兰：好。
TCP--
>> 听众：地址。
>> 大卫·马兰：地址， 或端口，因为它被称为。
接近，但一TCP端口号。
并有一堆这些。
但肯定是最 熟悉最终应
是80，这是默认 1用于Web流量。
而另一位熟悉 1很快就会443，
这是用于安全网络 交通，即开始以https网址。
>> 原来这就是云 里面那个信封。
并获得/只是手段，给 我的默认网页。
给我的硬盘的根目录 开车的Web服务器上。
并希望，在网络 服务器将，OK响应
及数量200，这仅仅是 公约说，是的，所有的
的确确定。
这里的页面。
所述网页的类型是要 是文字，但更具体地，HTML
我们正要潜入回。
和点点点只是 手段，这里是HTML。
而这也正是我们 今天拿起故事，
实际编写HTML， 超文本标记语言，它
是语言中 网页被写入。
这是不是一种编程语言。
有没有功能 或循环或条件。
它是一种标记语言， 也再次看到今天，
它允许您指定 如何构建和风格化
美学上的网页。
>> 所以这是一个 我们只有真正的页面
看了看，如果简单地说，在星期一。
并注意到一些 显着特点。
有很多开放的弯角 支架和关闭角度的支架。
在这些弯角之间 括号内的话。
我们要开始 调用这些话的标签。
因此，开放式支架头 与封闭的支架头
是在打开和关闭标记， 或在开始和结束标记
HTML元素的分别， 因为我们把它叫做，称为头。
和相同的专业术语适用 到身体中的HTML等。
>> 什么是不错的 HTML--而事实上，我们将
花非常少的时间就可以了， 因为你大多只是弄清楚
什么功能它都有，当你 其实有一个具体的问题，
以solve--你会发现， 浏览器是非常愚蠢的。
它只是要do--没有什么不同 一个computer--你告诉它的事情。
因此，如果你已经打开 支架HTML在最高层
那里，基本上 只是意味着，嘿嘿，浏览器，
这里谈到HTML编写的网页。
>> 当它看到开放式支架 头，这只是意味着，
哎，浏览器，来了头， 我的网页最上面的部分。
当它看到一个封闭的支架 头，那只是意味着，嘿嘿，
这就是它的头部。
待机别的东西。
和别的东西是 显然将是本体。
而当你没有一个标签，像 你刚才你好，逗号，世界，
这只是将是原始文本 最终显示在屏幕上。
>> 现在，你会发现太多 这里的压痕。
你大概可以推断出 怎么我们风格化了。
每当我打开一个标签， 可以这么说，我缩进。
每次我关闭 一个标签，我取消缩进，
类似的精神，大括号。
而除此之外，我是那种 用我的判断。
请注意，我没有打扰打 请输入标题标签里面。
为什么呢？
好吧，我刚刚决定它看起来 少许清洁剂给我，人，
只是懒得做。
如此反复，有一些 判决称只是
好像有C或任何语言。
>> 但是请注意过，这个压痕 适合于一个心智模式，
不要过度复杂化。
但是，一棵树，对不对？
如果你想一个网站 页，显然写
这样，作为被 很好地缩进的方式，
你几乎可以认为开放式支架 HTML封闭的支架标记标定
一个节点的根，一个家谱 在树上的款式风格节点
我们研究了上周五。
>> 事实上，我们在这里的权利 我们会打电话给一个DOM，D-O-M，文档
对象模型中，说一个奇特的方式 表示该HTML树。
并注意HTML有，我们会说， 就像一个家庭树，两个孩子。
左边是头。
右边是身体。
>> 而且，正如一个无意识的思想运动， 当然，头，有多少孩子
根据这个结构？
所以只有一个，title-- 这就是为什么我们有
箭头从头部将标题。
因此，这好像是人在 家族树刚一后代。
然后标题本身就 可以说有一个孩子了。
>> 回想一下，在HTML有 你好，逗号，在它下面的世界。
而我只是一个在它绘制 椭圆形而不是矩形刚
传达语义，即使 它是树中的一个节点，可以这么说，
这有点本质的不同。
这不是一个标签。
或者更确切地说，它不是一个元素。
这只是一个文本节点，如果你愿意。
但是，这些是完全 任意人的约定。
这是刚才我的方式 代表我会作为一个集合体
调用该文档。
>> 而作为一个在旁边，在事 超级左上角，
开放式托架感叹号文档 HTML类型，这就像是一个标签，
但它是愚蠢的角落情况 这只是在那里，复制和粘贴
来指示浏览器 这是HTML 5版本。
世界在不断变化的是什么 代码在页面的第一行应该是。
这也就意味着5版本。
所以它完全不是那么回事 看起来像其他人。
>> 好吧，让与 说，现在你会明白
这还算这种愚蠢的 纹身的人了。
>> [笑]
>> 大卫·马兰：好吧， 现在，让我们真正的潜水
为做一些与此有关。
你会记得，最后一次 我打开了CS50电器
我做了一件为 简单的开放gedit中。
我保存的文件即使在 我desktop--无处special--
为hello.html的。
>> 因此，让我这样做 again-- hello.html的输入。
现在，在这个文件中，我将 继续前进，复制我们刚刚
saw--文档类型的HTML然后我要去 做开放式支架HTML封闭支架。
然后我要先发制人 打开和关闭标记。
为什么呢？
只是让我不要忘了后面。
这是一个好的做法，比如开放 闭花括号的一次。
>> 然后呢紧随其后？
你能想到的纹身。
>> 听众：头。
>> 大卫·马兰：头。
然后在这里，我 有标题，我想。
而标题是随意， 你好，世界接近冠军。
再往下这里，身体的， course--那么我们关闭body标签。
然后只是有些冗余， 我有同样的事情到这里。
>> 所以我说这是一个网页。
这是后话了 现在可以生活在网络上，
尽管，当然，它的字面意思 住在我的桌面上现在。
不过说实在的，如果我减少gedit中， 我将我的桌面图标上看到的。
即使是这样的设备， 你可以这样做在Mac OS
没有TextEdit或 窗户用记事本偶数。
>> 如果我继续和双击 即使和选择 - 好了，让我们
没有选择，因为 Chrome的不开放。
让我们继续前进，打开浏览器。
然后执行命令-O开放 并导航到我的桌面
并打开文件。
这是怎样一个浏览器解释 HTML中，从上到下，从左到右。
嘿，浏览器这里的HTML。
这里的负责人。
这里的称号。
这里的身体。
事实上，这是怎么 它呈现的网页。
>> 但是要注意的URL。
没有，你可以拉起来这个特定的 在您的笔记本电脑的页面，现在，
甚至里面的 通过该URL家电，
因为文件：//表明它实际上 在我的文件系统，我的硬盘，
不是你的。
因此，这是不是所有的有用。
>> 现在，让我们走向移动 用一个实际的Web服务器。
而事实证明，在CS50电器 不仅仅是一个环境，
你可以写C代码和编译 并运行它，就像你一直在做。
它也已被配置成通过所述 人员来表示一个典型的网络
服务器在Internet上， 可能是你付
或一个就是在所谓的云。
>> 而且它的运行 标准的开源免费
软件，例如，一些 叫阿帕奇，这也许是
仍然是最流行的Web 在世界上的服务器软件
成千上万的网站今天使用。
它甚至还可以有 软件如MySQL，
这是一个数据库服务器 我们最终会到达，
这仅仅是说 我可以开始治疗
我的设备作为一个完全成熟的服务器 我不是支付其他地方。
它只是生活在自己的笔记本电脑 发展和方便的目的。
>> 因此，让我们继续前进， 利用这一点。
我要继续前进， 打开一个终端窗口。
而且我要继续前进， move--实际上，第一个我
要导航到我的桌面。
如果我做LS，有hello.html的。
我要去 未来，并开始使用
我们已经新目录 在今天之前不能使用。
>> hello.html--我要动 以../vhosts虚拟hosts--
更多的，在未来 - 然后 到一个名为localhost目录下，
这是考虑到几乎昵称 任何一台电脑，无论是在Mac，PC，
或Linux计算机，然后 具体到一个目录中，我们，
工作人员已为您创建的时候 您下载的所谓家电
公众。
正如它的名字所暗示的，任何事情 我把这个文件夹中，在理论上，
是要现在是 公开的，至少人
直接谁拥有 连接到我的电脑。
>> 所以，现在让我继续前进， 做cd到同一个目录下
这样我就可以看到什么 怎么回事，输入ls。
事实上，这就是 在那里嘛。
我现在，因为我已经把这种说法 文件hello.html的一个目录的内
称为目录的公开内 目录内为localhost
所谓虚拟主机，这 感谢CS50人员
已被预先配置成 您的Web服务器的根目录，
我现在希望能做到这一点。
>> 我要开辟一个新的选项卡。
我要去不予立案：//。
我将用实际 HTTP / localhost，该
再次，是昵称 对于我自己的服务器。
然后我会去到什么 文件名，只是要清楚吗？
哪里是这个故事的大概走向何方？
hello.html的。
>> 所以，换句话说，我想现在这个 是我自己的电脑，我自己的家电，
就好像它是一个真正的服务器。
它的绰号为localhost。
不过想想本地主机作为像 Facebook.com google.com，等等。
这只是我的本地名称。
然后最终我要的是在 硬盘驱动器的根目录，可以这么说，
或Web服务器的根， ERGO正斜杠，然后
文件名hello.html的。
>> 让我缩小并按下回车键。
事实上，现在有我的网页。
因此，它是略有不同的。
它只是为给人留下深刻印象。
这是旧版本。
让我缩小字体回去。
这是老了。
这是新的。
但是，什么是根本上发生的事情 现在是HTTP的正在被使用。
>> 让我们把这个更加清楚一点，或者， 如果你愿意，更复杂一点。
让我去右下角 角落我的设备的。
并注意到这一切 时间，还有的是一个数字。
这是唯一的地址 您CS50电器。
这是一个私有地址， 所暗示的172.16，
只有您身体只是手段 可以访问这个Web服务器。
一切都和防火墙 很好地保护，其余
因为这个世界的寻址。
>> 现在发现，虽然如果我去 这个地址，而不是在我的器具，
但在Mac OS--我要去 回头看过来。
这是我的Mac了。
而现在我要去开拓 这个版本的Chrome浏览器在这里。
我要去到http：//172.16.25 /我忘了rest-- 133。
>> 所以我打算从我的Mac访问 该IP地址/hello.html输入。
而现在，我从我的Mac看 我的CS50电器，谁的
IP地址是 数，的确表现
像在互联网上的web服务器。
它没有一个很好的容易 记得名字一样Facebook.com，
但它使用HTTP 显然，即使铬
一种是简化了的世界 对我们来说却没有向我们展示HTTP。
但是，这确实是完全相同的。
Chrome浏览器只是节省一些 击键这些天。
这就是我们现在看到的。
>> 所以这是一切优秀和良好。
但是，这是一个非常深刻印象的页面。
让我进去做什么 有一点不同了。
因此，让我回去gedit中。
而代替打招呼， 世界，让我们把图像。
我从before--让我去称 进入我的本地目录中公布。
让我继续前进，复制 一大堆从今天的文件
从我的Dropbox文件夹复制到这里。
>> 现在，如果我输入ls，看 在所有这些文件
我已经通过分布 当然网站提前的今天，
其中之一是静止hello.html的。
因此，有那一个。
而回忆这段痴心一片 从去年时间 - cat.jpg。
所以让我尝试嵌入 cat.jpg我的网页里。
>> 我要继续前进 做cat.jpg，保存。
让我再回到浏览器。
让我放大了 字体现在重装。
哎呀，在这里我把这个？
Standby--我还有老 版本从桌面打开。
因此，让我进入我的虚拟主机，我 本地主机，我的公开和hello.html的。
所以，现在让我继续前进， 说主体的内部cat.jpg
在这里我希望它是 显示并重新加载。
当然，这是不正确的。
>> 所以，我需要告诉浏览器一点点 更刻意就是我想要做的事。
只需键入名称是 显然不充分。
所以，记得还有一个 标签，图像，IMG的简称。
这仅仅是因为人类 不喜欢的类型完整的单词。
然后我们可以做源=“cat.jpg”。
>> 现在我该怎么办 有一点不同的位置。
即使所有的 我们的标签迄今有
过了这个概念 开始标记和结束标记，
这并没有真正 有意义的图像，对不对？
图像或者是有还是没有出现。
这样一来，人类发展， 了一个简单的约定。
当你有一个标记，既可以 开始和结束于相同的时间 -
它可以是空的，所以speak--刚 把正斜杠标签内
在最后。
现在让我回到我的浏览器。
打刷新妈的，什么是错的。
你可能已经看到了这个 偶尔在网络上，
即使它没有得到你的错。
这是Web服务器的故障。
什么颂歌这似乎预示？
这是坏了。
这就是图像所属。
是吗？
>> 听众：但它不 可以访问该图像。
>> 大卫·马兰：这不 可以访问该图像。
也就是说，甚至更糟，也许 它甚至不存在。
让我们来看看，如果我们不能诊断的。
从最后一次回想一下，如果 在Chrome中，在家电，
甚至在您的Mac或PC， 你去Developer菜单
并转到开发工具 选项​​，这可能是你已经
不使用过多或过。
如果我去网 并重新加载页面，
让我们来实际看一下HTTP 正在做出该请求。
>> 它看起来像hello.html的是 确实好，因此200。
但cat.jpg是403。
所以它不是一个404。
文件可能存在。
403是指禁止。
所以这是一个有点混乱。
我要回去 我的终端窗口。
让我放大了这里。
让我做一个LS。
有那些相同的文件。
>> 现在让我做了LS-L， 这你可能
之前看文件中使用 尺寸可能或时间戳。
而且我们看到一大堆 铺天盖地的信息。
但是要注意一些细节。
下面是hello.html的本 排在这里和这里的cat.jpg。
它只是家电是 用户通过突出显示JPEG友好
紫色是这样的。
但是，什么是不同的旁边 文件大小和文件名？
>> 听众：[听不清]。
大卫·马兰：是啊，有 2多个R的看过来。
注意什么hello.html的已回事。
所以，事实证明，名称 这个目录公开是很重要的。
任何在此目录中 是指被公开。
但是，这还不够 只是在那里放文件。
你还需要改变 的文件的模式，
更改的权限 该文件不主动
是默认设置， 这是只有我能读懂
写吧，我是主人。
我想全世界的每个人都来 能读懂我的文件，可以这么说。
阅读只是手段进行查看。
>> 事实上，正如你会在看到问题 设置7，这就是这些R的意思。
这两个R的意思让大家 在世界其他也读它，
尤其是现在， 这是该目录中。
因此，要解决这个问题最简单的方法是 去我的提示做CHMOD变革
模式，然后做一个+ R，干脆， 每个人，一切和r表示读，
然后cat.jpg Enter键。
似乎什么都没有发生，这 通常是指一件好事。
所以LS-L again--现在 让我们来看看cat.jpg。
与此权限 似乎已经改变。
顺便说一句，如果你犯了一个 错，你，例如，
刚才your--我不知道 - 作文 公开偶然访问，
你可以反其道而行之，存取权限chmod a-R。
但坦率地说，它不应该 在公共目录
反正如果是这样的问题。
>> 所以，现在，让我们回到 我的浏览器和重载。
我要去点击 小捉鬼敢死队
符号清除的那部分 屏幕，我们可以看到新的要求。
事实上，这里是 脾气坏的猫从之前。
但更重要的是， 技术上，有
数200，其 意味着我们得到了确定。
好了，所以这是一切优秀和良好。
但是，我们并没有做 最好的网站，
我们也将试图太难 使网站今天最高档。
但是，让我们至少做一些事情 之前剑拔弩张超熟悉
关闭其他几个标签。
因此，假设我不只是要一只猫在这里。
假设我真的希望这 猫要链接到的东西。
>> 我可能，例如 做这样的事情。
一个锚的HREF 超基准equals--
而我们只是做一些事情 像www.google.com关闭
引述接近支架。
现在搜索的猫。
关闭锚标记。
因此，这只有一个排序 从根本上新的细节。
当然，标签是不同的。
它的名称的锚 HREF或Hyper参考。
>> 但更重要的是，有 这个语法功能在这里。
这就是我们将开始呼唤 没有一个标签，而是一个属性。
和属性是什么， 修改标签的行为。
而这种属性，HREF，手段 修改此锚的行为
这样，当它被点击， 它进入这个网址在这里。
，当然，该URL是谷歌。
>> 同时，这是什么 文字在这里将会是？
嗯，这将是 实际上是什么人
看到的下划线 链接，就这么简单。
因此，让我们试试这个。
让我保存它。
我仍然在hello.html的。
但在网上的版本中，你会看到 我们的实际文件名预先制备。
让我继续前进，重新加载。
而现在它是一个非常 给人留下深刻印象仍页面。
但是，如果我将鼠标悬停在那里 - 这是一个有点小，
但 - 你可以在下方看到 左上角屏幕，
它真的到google.com。
如果我点击，它会 拂我的方式来实际的谷歌。
>> 但是请注意，这里的机会 开发，只是作为一个备用。
我们会回来给其他 安全用不了多久的问题。
因为有这种二分法 你去哪里和你说的，
你可以这样做 this-- http://www.google.com。
好了，现在如果我重装 保存该网页后，
它看起来像我会去谷歌。
但是，没有任何原因，我 必须去谷歌，对吗？
我其实可以去像 badguy.com，重新加载该页面在这里。
和通知，它仍然看起来像谷歌。
且仅当我尖锐 足以将鼠标悬停在这里
我会看到它甚至会 去一个不同的位置。
>> 所以，如果你曾经得到 的电子邮件，特别是
一个来自支付宝，或 貌似从支付宝
请您登录 您的帐户，这
所以你千万别 曾经在电子邮件中点击链接，
坦率地说，在电子邮件中的任何链接。
如果你知道你有实际 在支付宝或银行的钱
美国或富达或任何 网站手动输入进来。
因为看起来它是多么容易 欺骗某人为展示什么
看起来像一个链接。
但它实际上可能 绝对去任何地方。
>> 并有更大的 威胁莫过于此。
其实，这是一个有点 切线的现在，但一
的最好的我见过 这已被关闭，
是有人牵头人 to--所以这可能会说，
点击这里登录到您的 帐户，银行帐户。
这是西方银行。
>> 因此，有人买了这个。
这是一个很容易就能看到 它在一个单间距字体放大
在一个30英尺的投影机。
但是，当它是小字体中 电子邮件是您收到，
这看起来像bankofthewest.com， 不bankofthevvest.com，
其中有人已支付10美元购买。
然后这导致了他们的 相当于一些不良网站。
>> 你会看到too--其实我们可以做的 this--如果我去实际的网站，
bankofthewest.com，再次 从上一次召回
如果这是他们的网页， 你好奇的是，它的工作原理，
你当然可以去 Chrome的开发者工具。
你可以看到所有的 HTML格式良好的存在​​。
>> 但更重要的是， 你cam--让我们关闭
this--你可以去查看 开发人员查看源文件。
我为什么不只是复制 所有这一切，然后我
可以进入我的小窗口gedit中 在这里，让我自己的网页。
在hello.html的存档。
大概这是要打破， 因为它不是如此简单平常。
但现在，如果我重装上自己的网页 我自己CS50电器和打重装，
OK，有些东西打破了。
但我敢接近有 我自己的银行网站，对吧？
所有的这HTML--
>> [笑]
>> 大卫·马兰：--I 没有actually--你
知道有一个人在那里谁 实际上过于点击这些链接。
所以很明显，有些东西打破了。
但是这会导致 我们进入一个讨论，
不必要的现在，至于是什么 CSS，层叠样式表，是，
实际上你如何 下载其他HTML文件
和JPEG文件GIF文件 该网站可能会使用。
但是，所有这一切是accomplishable。
但是，它真的可以归结为 这些非常简单的启发式方法。
>> 所以，现在就让我们通过略读 几个HTML的其它实例
只是给你的感觉 还有什么可以做。
例如，这是list.html。
假如我要拍一个网页 与房屋的四边形的列表。
我可能会使用的UL标签无序 列表，然后将列表项子
然后遍历over--或列表， rather--房子有问题。
>> 如果我开这件事，让我们做到这一点。
让我们不要hello.html的， 但list.html。
该死的。
我该如何解决这个问题？
这是相同的问题和以前一样，对不对？
所以，让我做chmod-- oops-- 存取权限chmod a + list.html的河
而现在，如果我回到我的浏览器 单击刷新，它就在那里。
因此，如果你曾经想制作 项目符号列表，你​​可以做到这一点。
如果你想成为超级花哨，使 的有序列表，而不是一个无序列表，
改变那些OL，重新加载页面， 现在，浏览器将编号给你。
>> 我们还能做什么？
嗯，一对夫妇的others--如果 你有text--长款
例如，一些 像this--拉丁文本
你希望它在不同的段落， 开P，段落标记密切页。
而一次又一次地这样做。
如果我现在打开这个文件， paragraphs.html，好了，这
越来越讨厌。
所以，现在就让我们回到我 提示，存取权限chmod a + R R星.html--
一个可爱的小外卡可以这么说。
这应该可以解决所有的 这些问题对我来说。
让我们来重新加载。
有三段。
>> 现在，让我们继续 并开辟另外一个。
怎么样的表？
你会发现表如下 稍微复杂一些。
但它同样idea-- 开放标签，打开标签，
开放，开放，开放，关闭标签，打开标签。
而这些恰好代表 表，其边界是很明显
将是一个厚度1--任何 这是指：表行，表
数据，这意味着小区。
如果我回到我的浏览器 在这里，去table.html，
你可以看到什么 这样，狰狞。
但我们会去点 在这里我们可以真正
使比漂亮的东西。
>> 因此，让我规定现在。
还有更多的标签束。
而HTML是美妙的回暖 因为，坦率地说，所有你需要做的
是看现有的网页 与你熟悉。
和你一样，哦，这是怎么 他们这样做美观。
>> 或者，你可以查找任何在线 资源为HTML是如何工作的，
你会看到，有一个 其他标记的所有词汇。
但是，用简单的心理模型 孤独，几乎任何标签打开
已被真正关闭， 没有足够的自学
HTML了解后， 标签这些基本理念
和属性以及良好性 我们已经谈到，
收什么，我们可能会打开 所以，我们不要混淆一个浏览器。
现在让我们借此来 一个更有趣的水平
通过将实际的。
让我们去我的Mac 在这里，到google.com。
现在notice--让我们做到这一点。
我锣去 设置，搜索设置。
我想关闭这个恼人的瞬间 结果事情立刻在那里
开始回应你的打字。
让我们做到这一点旧的学校，所以 实际上我们看到发生了什么事情。
>> 所以，我要救我 谷歌在这里设置。
现在notice--我要去 搜索类似猫科动物。
它仍然在做汽车 在这里完成，但基于东西
人们已经输入了过去。
但是要注意什么事情要发生。
>> 在URL的时刻 是这样的，只是google.com。
而在技术上，它的斜线。
谷歌只是保存字符 而不是向我们展示这一点。
他们向我们展示了HTTPS，只 是超级让人欣慰的是我们
在安全或加密的页面。
>> 因此，让我继续前进，寻找猫。
现在，这个真的有 铺天盖地的快。
看看这个URL的长度。
但事实证明，大部分这样的东西 在URL实际上是相当无用的。
我要开始删除 事情我不明白。
我看到猫。
我明白了猫。
我不知道为什么猫那里了。
我真的不知道 这是什么废话。
所以，我只是要保持 突出显示和删除的东西
我不明白， 蒸馏网址逼到这一点。
>> 现在，让我得到重新输入。
它看起来像谷歌仍然有效。
所以由于某些原因，他们增加一个 很多东西到他们的URL的默认。
但它没有严格要求。
那么，什么是好的，这一点？
好吧，让我继续前进， 打开Chrome的督察。
有一点点鼠标快捷键吧。
>> 进入网络选项卡。
现在让我重新加载 此页面一次。
而且我按住Shift键。
顺便说一句，浏览器 往往高速缓存或保存
只是为了效率的缘故信息。
但通常情况下，按住Shift 重装将迫使一切
从头开始。
而这正是我想在这里做。
>> 并注意所有这些 那个刚刚出现的行。
事实证明，在任何给定的网络 页，则可能是只有一个文件
involved-- hello.html--或有 可能是52，因为在这种情况下。
当我访问google.com， 显然，我的浏览器
揭幕52分开的HTTP请求。
这是为什么？
>> 好了，看看里面有什么 这个网页往上顶。
这里不仅是文字， 但有实际图像
的猫科动物转移到右侧。
有一个丰富多彩的标志在这里在左边。
还有所有的图标 用于麦克风等。
有很多件，建筑 块，刮片，如果你愿意，
这个网页。
什么样的浏览器做在 获得的第一个文件，该文件
是此行这里时，它基本上 遍历HTML顶部
至底部，左到右，找 之类的图像标记或其他标记
所提到的其他的文件和 当它看到他们，去和他们取
通过HTTP，可行全 信封比喻，
然后在显示它们 在网页中适当的位置。
>> 但是请注意，在这里，如果我专注于 第一掷，搜索猫，
注意到，确实它使用HTTP 1.1。
不幸的是，谷歌 Chrome浏览器目前已经在39版
是一种方法简化下来，并 不向我们展示了实际的头。
但确实是发送一个请求 不削减，但/搜索？Q =猫。
>> 现在，为什么是重要的？
嗯，我要去推断 从这个，如果你谷歌
支持这种形式，为什么查询 不我实现我自己的搜索
发动机CS50，只是前 结束，就在图形用户界面。
我们将外包后端， 实际的搜索结果谷歌。
>> 所以，我怎么能这样做呢？
好吧，让我进入gedit中在这里。
让我继续前进，打开 了，让我们说，一个新的文件。
而且我要救这个 暂时作为搜索-0.html。
然后最终，我们将快速 期待一个我事先准备好的。
>> 而我要去 迅速掀起文档类型
HTML打开HTML支架 靠近支架的HTML。
然后我会做头 靠近头部公开赛冠军CS50
搜索代替谷歌搜索。
到这里我将有 身体，到这里靠近身体。
现在我需要CS50搜索。
而实际上，让我们 建立这个增量。
我要继续前进，并关闭该和 其实把它放在我的公开目录。
所以给我的只是一个瞬间。
搜索0.html--我要去 时间search.html调用它。
我要和chmod它+ R search.html。
现在我要打开它。
好了，所以这是快。
但我们的目标是简单的 让我们给点意见
有此文字 文件名为​​search.html。
所以，没有什么好看的呢。
事实上，如果我去我的浏览器，并 去search.html，这一切是。
但是你知道吗？
我可以是一个小票友。
我在读一本书，有 标题标签称为H1。
而且我要继续前进， 使用开放的H1和关闭H1。
重新加载页面。
现在它的更大，更大胆， 不是所有的有趣，
但至少在结构上 更有趣。
但现在让我介绍另一个标记。
原来，有一个表单标签。
让我关闭的标签。
而事实证明有 输入标记，
有一个名为类型的属性，它 是该字段的数据类型，
如果你愿意。
并且将是文本类型。
它的值是怎么回事 要CS50搜索。
关闭标签。
而且也将是没有概念 打开和关闭与独立的标签。
>> 让我回到了这里 看看这是怎么回事，重装。
越来越有趣。
它看起来就像是一个文本字段。
而实际上，我不想 把一个价值还没有。
让我回到这里，并实际获得 摆脱这个值来保持它的简单。
而不是一个值，我想要的东西 给这个事情是一个名字。
我不知道它是什么， 所以我会回来的。
>> 但下面这一点，我想 做INPUT TYPE =提交。
并且这个值将是CS50搜索。
我们会看到为什么我 移动的价值这一点。
当我重装，我好像现在有 我自己搜索的开始
发动机，超可怕的， 但坦率地说，这是
不是远远抛在了什么 谷歌的默认页面的样子。
>> 如果我现在在这里，我可以键入 猫，希望单击搜索。
但我没有完全完成， 因为我还没有实现，
显然，一个数据库。
我还没有爬的 网络搜索结果。
所以，我需要外购，为谷歌。
那么，如何做到这一点？
>> 嗯，首先我的 需要补充和行动
归功于我的表单标记， 是http://www.google.com/search。
我知道，只有从具有 看仔细推断
在他们的URL。
而现在采取的猜测。
什么应该这个文本字段可能 被称为基础上，我们来了
从之前？
>> 听众：Q。
>> 大卫·马兰：Q。
而我们实际上并不需要的问题 纪念它的出现，但q是确实的，
●对于可能由查询 默认情况下，只是因为这是
拉里和谢尔盖 想到了几年前。
所以，现在让我重新加载该页面。
它看起来并不都不同。
但现在看会发生什么。
>> 如果我输入的猫和点击 CS50搜索和放手，
请注意，我得到护送 客场实际谷歌。
现在，谷歌正在一点点 恼人的，因为它们是
附加一个额外的参数， 如果你愿意，到URL。
这一切发生 自动对谷歌的一面。
>> 最重要的是，我似乎 要在这里产生了这一请求。
事实上，这是发生了什么。
当你有HTML的 看起来是这样的，这
是某种Web开发人员表示法 这么说，就创建一个表单
当它的提出， 它会去这个网址。
并且当URL提供 对于喜欢的东西的Q值，
不要去只是为了这个URL。
其实，去质疑 标记，然后Q =猫。
附加的参数时， 像HTTP参数。
>> 和刚需超精密， 什么东西被推断这里 -
但我会更explicit--是 我想使用的方法
为得到而不是像， 后，我们最终会看到的。
因此，在短期，简单地理解 HTML和使用一些非常简单的标签，
我们现在可以开始创建 我们自己的前端用户
与搜索界面 发动机后面。
>> 但当然这是很可怕的。
因此，让我真正打通 一个稍微好一点的版本。
这是我编写的一个 提前有一些意见。
但是你会看到，我 几乎是重新创建它。
因此，这是网上已经可用。
我也正好先发制人 访问https只是为了保持它的简单。
>> 现在，让我们打开了 这下一次迭代。
是版本1，而不是0。
什么跳出你的稍微 在这个例子中有什么不同？
>> 听众：[听不清]。
>> 是啊，有这样的文字居中。
这是一个有点怪异了这里。
但是，这确实是新的。
也许猜到了什么事情发生。
如果我去我现在的浏览器 参观搜索1.HTML，
这几乎是同样的事情。
但它是更近了一步 是多了几分可爱。
它仍然是丑陋的，但在那漂亮 至少一切的，现在居中。
>> 所以，事实证明，我正在使用 在另一种语言完全叫
CSS，层叠样式表。
和CSS，坦率地说，是一种 ，在我个人看来，
一个残暴的设计语言。
这是非常恼人的记忆 所有的各种细节。
但它是什么stylizes的 整个万维网今天。
我得罪人。
行。
所以，让我们回到这里，看看 怎么我们实际上用这个。
而事实证明，至少它的 实际上是一个非常简单的语言。
这只是键值对，性质 和值，属性和值。
事实上，这里是1 这样的属性和值。
>> 只需通过使用样式 属性在我身上的标签
并给它的值 字结肠和另一单词，
或一个属性和一个值， 我会影响美观
的网页，而不是对 不一定但该结构中，
但它的美观性。
而就在谷歌搜索的时候，我意识到 该CSS，层叠样式表，
支持一个名为属性 文本对齐，其值可以
将左，右或中心，例如。
>> 所以，现在当我重新加载 这一页，我没拿到
是一个居中的页面， 但仍然相当难看。
让我们继续前进，打开 搜索了第2版。
现在发现我做多一点。
注意，在这里的头部的里面 标记，可以有多于标题。
事实上，有一个风格的标签。
而这正是它只是得到了 有点乱眼看CSS的时候。
>> 请注意，我好像有东西 在结构上看起来非常不同。
但这里是名 我想要的标签程式化。
这是我们的老朋友卷发 括号和封闭的大括号。
然后这里是 属性和它的值。
>> 如果我打开这个文件，search2.html， 最终的结果是相同的。
但它是朝着更好的设计的一个步骤。
通过分解出这个CSS，我已经 不符合我的HTML混合的。
事实上，正如我们所看到的，我可以 重新使用这些属性和值。
如果我要拍的串 我的网页的部分为中心，
我不必键入风格=文本对齐 中心所有的地方。
我可以在一个地方 或许，就像在顶部。
>> 但是，即使这不是最好的设计。
事实上，其中的一件事，你将学习 因为你花更多的时间与
网络编程的，你就可以 模块化的东西和因素的事情了
像.h文件让我们因数的东西出来， 喜欢helpers.c让我们因子的事情了
一些pset中前。
同样地，我们可能 要实现这一点。
>> 因此，在版本通知 3 search.html我已经
清理的头 页面，只是把
在此，一个链接标记，这 相反的名称，
不给你一个超链接。
它通过的方式链接到另一个文件 一个href其值在这种情况下，
是搜索3.css
所以，我知道我们要快。
但是，所有我做的是怎么样 中移动周围的事物。
让我打开搜索3.css。
就在那儿，没有什么吧。
我只是复制并粘贴到一个新的 文件，就像我们分解出来的东西
进入之前的其他文件。
和result-- 完全underwhelming--
将是完全一样的。
但是，我们正在toward--不，它不是。
哦，我知道为什么。
>> 因此，它似乎是一个错误。
它在某种意义上是。
不过，让我打开我的网络标签。
让我重新加载页面。
啊，为什么是CSS没有被应用？
那么，CSS文件，同样，有 是世界可读的，可以这么说。
而它也正在被禁止。
因此，让我做一个存取权限chmod a + R 星点CSS-- whoops--
我们点CSS仅仅是 文件扩展名的CSS文件。
现在让我回去 我的浏览器和重载。
OK，好一点。
>> 现在让我做最后一件事。
在搜索4.html。
我说我只是想一个版本 是这样凉，虽然这样更
复杂的。
让我们来看看结果第一次。
关闭这个给我们更多的空间。
改变这种搜索-4，回车。
>> 现在一堆东西被打破。
我要回去 进入我的目录位置。
而现在我只是做 一+ R上file--在chmod
因为我知道它叫exists-- logo.gif，这是一个图像。
而现在重装。
和wow--所以现在我 八九不离十，坦率地说，
喜欢1999年的版本，谷歌，以及 坦率地说，2014年版的谷歌，
对不对？
>> 所以它现在要他们的网站， 最终，如果我搜索的猫。
的确是。
但我做了什么不同 在这个版本4？
所以我们不会过多谈论在这里。
你会看到这个问题， 集7最终。
但是请注意，我做了几件事情。
>> 我介绍一个div 标签，这是师，
类似的精神，一个段落标记。
但是，一个部门就像是，这里的 一个长方形的不可见区域
屏幕。
让我们给它一个独特的 标识符，页脚，只是
这样我们就可以谈 它在其他地方我们的HTML。
这里是页的另一种格 其ID将是内容。
它是该页面的内容。
而且在这里是页的标题中。
>> 换句话说，我已经 实际上在HTML中很弱智
查看此网页的 三部分组成，一个头
在这里用这种无形的矩形， 在中间的内容，然后
页脚向下跌破，甚至 虽然我们没有看到那些东西。
因为我想在我的脑海中 在此页面，或在.css文件，
我可以用这个语法。
>> 头是不是一个标签。
这是一个ID，因此它变成 指出，这样做的#header，
我现在可以申请一个或多个 属性的报头。
我可以做同样的内容， 同样对于这里的内容。
>> 因此，例如，在页脚，通知 所有这些特性，我加入。
我知道它们的存在仅仅通过阅读 了对CSS的文档。
字体大小将是smaller-- 因此一些相对字号。
权重将是大胆的。
Margin--多少像素 围绕它 - 是20个像素。
而且它会为中心。
>> 但现在，页面看起来是这样的。
如果我不喜欢的 我的副本就在那里，
我可以不喜欢红色。
然后我就可以节省这一点，重新加载， 现在我已经程式化页脚。
所以这只是暗示的力量 你可以在一个网页怎么办
改变周围的事物。
>> 而比这更酷，如果你想 闲逛实际的网站，
你永远不能改变他们。
但是，如果我打开 再次Chrome的督察
我去不要的左手侧 在这里，这说明Facebook的HTML，
但在右图所示 右手边所有的CSS，
您可以和 在运行中改变的东西。
因此，让我继续前进，做到这一点。
>> 让我继续前进，控制 在这个随机单词点击这里，
签字，然后单击检查元素。
Chrome浏览器很方便地跳转到 Facebook是用h1标签。
并请注意这里的Facebook 有一种懒洋洋
硬编码的字体大小为这里的属性。
>> 因此，很酷的事情，虽然是 如果我真的去这里
并说，哦，Facebook的，我不喜欢这样 64个像素，我们可以改变现在的Facebook。
当然，我们只是改变它 对我个人的时刻。
但是，这仅仅是另一个 工具在我们的工具包
那将让我们能够调整 并找出和诊断也
问题在我们自己的网页。
我们可以同样地走了过来 在这里，这是同一件事。
如果你真的想获得幻想，我 意思是说，现在你真的可以发生变异的页面
做疯狂的事情。
>> 那么，为什么这一切有用吗？
好了，最后，我们 将要成为
能够创建Web页面 通过我们自己的后端驱动，
不只是谷歌和 外包后端存在。
我们真正想要的 值，例如
我们的搜索引擎的作用 属性去不是别人，
但像search.php中， 那里的search.php是我们自己的服务器上，
而不是别人的。
>> 所以到那里，我们其实 需要引入一种新的语言。
因此，我们已经看了一眼新 这里的语言，或两个真的，HTML
和CSS。
但他们真的只是 结构和审美语言。
他们不是编程 语言本身。
那就是尽可能多的正式 时间，我们将花费在他们身上。
因为我们现在将开始 转换到PHP。
>> 所以，PHP是一个实际的 编程语言。
这是一个脚本语言 在这个意义上，它的
意思是重量更轻 不是像C.
它是一种解释型语言， 这意味着它不会被编译。
因此，概括地说，这是什么意思 当我们使用类似C语言
我们不得不去编译它？
什么意思 编译C源代码？
听众：[听不清]。
大卫·马兰：再说一遍吗？
听众：[听不清]。
大卫·马兰：完美。
它把它变成二进制代码。
它把它变成零和一 从实际的类似英语的源代码。
然后我们就可以真正 运行这些零和一
通过在将它们传递 CPU通过双击图标
或者运行一个命令。
>> PHP和Python和Ruby 和Perl和JavaScript
和其他的串 语言的解释
语言，这是说 你不编译它们。
相反，你喂它们作为输入 一个程序调用一个解释。
并且解释， 这别人写的，
读取您的源代码，从上到下， 左到右，只是解译
那些线条和做什么，你说​​。
>> 所以，如果你遇到一个 该行表示，打印，
它不一定转换打印 为相应的零和一。
它只是有这种类似的解释 一个大的if条件，上面写着：
如果程序员的指令 打印，然后执行以下操作。
所以它只是把它解释 通过一种推理
通过什么你告诉它做的事。
>> 而PHP是其中一种语言。
和PHP年前设计 正是基于web编程。
它最初是一个 很邋遢凌乱的语言。
事实上，有一个巨大的 量差的PHP代码在那里。
但是语言本身 已经成熟，多年来，
以至于现在它的 实际上是一个美妙的下一步
教学上从C，因为它是 所以该死的熟悉的一切
你刚才看到的，在过去​​的几个星期。
>> 我们将看到一个初始的区别 是没有的主要功能了。
当你开始写代码，它只是 要得到执行，不管是什么，
正如我们将看到一个时刻。
同时，这里就是一个 变量看起来像在PHP。
这是一个有点不同的， 但只是勉强。
>> 在PHP中，有没有强类型。
还有一周打字， 这只是意味着有
有数据类型，如字符串 和数字和其他东西。
但是，你不要打扰指定 他们是什么样了。
PHP的数字出来给你。
美元符号仅仅是一个决策 该PHP的人做年
以前，这样在PHP中的任何变量 刚开始用一个美元符号。
它是一种真正的有用 它跳出你多一点。
>> 但在此之后，这 在PHP中的条件。
有什么不同的对C？
欺骗question--什么， 这实际上是非常好的。
布尔表达式PHP--相同。
同和与布尔表达式 或者，开关，循环，循环，loops-- OK，
这个人是不同的。
>> 因此，原来有一个 情侣在PHP中的其他功能。
其中之一就是实际上这一点， 这是奇妙的方便。
如果$的数字是，你已经一个数组 在程序中事先声明，
你有这样奇特的每个构造 这样做，而不是所有的
讨厌我等于0，我是 低于此，[？ I ++？]
每个数字作为编号，其中每个 那些美元符号的值就是
一个变量，而后者 你能想到的是一
你可以把它叫做任何你想要的。
我把它叫做数字。
这是要遍历 数组被叫号码。
并在每个迭代中，它是 要自动更新
为你的美元符号数 变量使你不断
有机会获得你想要的变量 无需做任何括号
符号或索引到一个数组中。
>> 除此之外，我们甚至有类似的东西 数组，这看上去几乎相同，
除非这是非常常见的，如我们 看，无论是在PHP和JavaScript
预初始化数组 使用方括号。
C使用大括号。
因此，它是略有不同的，即使 我们并没有真正使用的伎俩了。
>> 但更强大的是， PHP有关联数组，
这是一种奇特的方式 说法哈希表。
事实上，如果你想声明一个哈希 表在PHP中，不像在C--多少
代码行花了来 真正实现在C语言的哈希表？
或者有多少行代码是 以C语言实现一个哈希表？
因此，它可能是一个很大吧？
这是几十个，也许100或200。
这是平凡的。
或者它即将被作为 您很快就会看到，平凡
实现一个哈希表 [听不清]，也是一个尝试。
但在PHP--坦率地说，我 或许不应该告诉你这
直到Monday--在PHP中，如果 你想有一个表，完成。
这是一个哈希table--这样 用一行代码。
和
>> 很多语言做到这一点。
有乐趣的PSET 5。
所以很多语言做到这一点。
他们给你的这些抽象 其他人，其他程序员，
为你创造这样 你可以站在他们的肩膀上
并开始使用的想法是超 引人注目的，像哈希表和树
并尝试。
但你不一定要 实现这些东西自己。
>> 因此，最终，有什么 我们将使用PHP
可能是写程序 所谓的命令行。
我们可以重新创建每个程序 我们已经写了本学期迄今，
也许除了突围它采用SPL， 这是专门针对C的时刻。
但是，所有其他问题集， 当然马里奥和恺撒
和的V @ genere和 [？破解？]及以后，我们
可以重新实现在PHP中，和 可能有点更容易。
>> 但我们最终会 用PHP的Web编程。
而我们将要介绍下一个 一周的心理模型，一个叫范
MVC，模型视图控制器， 其中，如果你做编程
之前在Python或 Ruby或其他地方，你
可能知道这​​支球队与 Rails和Django和等。
但如果你是新来 这也太，你会看到
这其实是一个很自然的 延伸因子的
和设计的那种 的代码，我们已经
一直在做C.我们要现在 运用其中的一些教训，PHP
所以，最终，我们是 实现我们自己的网站。
如果你是那种 催眠或惊奇
我们要做的 所有的这么快，
认识到，几乎每 学期中，近90％
学生CS50，包括那些 谁从来没有编程之前，
最终使最终的项目 基于web编程。
所以你会看到回报 高在几周来。
所以我们会看到你，然后在星期一。
>> 扬声器1：现在，深 思考了Daven法纳姆。
哈希表。
>> [笑]