[音乐播放] 大卫·马兰:这是CS50和 这是7周的开始。 因此,欢迎回来。 你可能还记得, 在问题设置四, 有一点寻宝的 对于一些丰富奖品,由此 在恢复的照片 在这里和在纽黑文的工作人员, 你面临的挑战是找到尽可能多的 这些计算机科学家,你可能。 而且我们已经有了一个整体 一堆意见书。 想我会分享一些 你今天在这里。 我们将发布所有这些网上。 但我特别想 请你注意用于:井一, 山姆是在相当多的人 通常冒充这样。 但现在看来,作为 今天上午,大奖得主 在某一个叫肯用 工作人员的24相机拍下 或几个,当你考虑到更多 考虑多个工作人员中的图片。 图为肯下一个 玛丽在纽黑文。 现在,肯,不过,变成 出是一个角落的情况下位 这不是还没有发生过。 事实证明,它并没有发生 我把在问题小字 设4,指出员工 不合格的丰富奖品 因为肯,当然,其中一个 我们的工作人员摄影师。 现在,随着中说,他 最初写我说的话 请不要在网上发布这些照片。 我认为,这在很大程度上 因为大部分照片 这个摄影师拍了一下 有点这样的事情。 和类似物。 但肯要我向你保证 他是一个非常好的摄影师, 他是一个专业的,他以 照片是不模糊的, 对焦的更好,他 拿了不少的我们自己的员工。 但是,而不是只承认 肯,我们认为我们会做 是通过列表 谁提交的实际学生。 而事实证明,兰斯与 15张照片截至今天上午 是我们的赢家。 而图为兰斯与科尔顿, 与Skaz,与自己,与山姆。 但后来事实证明,作为 11:46,所以只是一点点前, 我回到我的电子邮件,发现 我们还没有一个更多提交 一个叫邦妮学生 只有这样的电子邮件中说。 不会说谎,我 在课堂上这样做。 继而又附加刚 14张照片,人们害羞兰斯的15。 但在邦妮的照片,原来 出人多工作人员,山姆 其中,所以我们认为我们 会做的是承认这两个。 所以除了得到Dropbox的 空间,大家谁参加 接收,这两部分也将 收到一个不错的午餐照顾他们 和它们的部分 接下来的一周配合。 所以你会听到来自美国, 兰斯和邦妮有关。 这么大的恭喜他们。 现在,你们谁愿意 像午餐更普遍 知道CS50午餐在剑桥 和纽黑文是这个星期五。 进入CS50网站斜线RSVP。 而现在在研讨会一句话。 更多curricularly。 因此,我们已接近 点学期 在这里,你应该开始 想着最终的项目。 而事实上,在短短的一点,将 所谓的预提案到期。 所以预提案是为了 是相当低的影响,真的 只是一个机会 您撰写一个简短的说明 你的教学同胞去通知 他或她你在想什么,你 可能要为你的最终项目。 现在,很多学生结束了 这样做基于网络的最终项目。 当然,我们只是 现在,上周在该 超越潜入Web编程。 所以,不,如果你担心 完全不知道怎么样 你将建立的想法, 你可能在你的心中。 这真的只是一个强制功能 让你的思维和说话 你对此TF。 但是,为了帮助你这一点, 与最终的项目最终, 知道CS50有一个传统 中提供了研讨会。 而这些都是可选的,双手, 或基于机会的演讲 了解更多有关的话题 一个小配套的课程的 教学大纲,但仍然精彩 料开车决赛项目。 所以这是列表的 在这里纽黑文CS50的工作人员 纷纷拿出了 今年有关的iOS 编程,机器人 编程,游戏开发, 更多的工具和串 与语言和技术。 因此,保持眼睛的CS50的网站。 而在此期间,如果你想 在任何这些注册您的利益, 去CS50的斜线寄存器。 我们将随后跟进的 天,飞行时间和地点 和一切 - 最一切都会 流式传输,也可根据需求 之后,如果你不能真正做到这一点。 因此,事不宜迟,我们 不放过最后一次与GET。 这就像是这样的消息 虚拟信封中,回忆, 我们从路由器传送到路由器 Web浏览器和网络之间的路由器 服务器。 这消息看起来 有点这样的事情。 这是更神秘的消息, 实际上是一个信封中 写在一张纸上,其 第一行说,从字面上看,得到的斜线。 而只是作为一个全面的检查, 没有斜杠什么表示? 这是什么意思斜线时, 请求网站? 你要求它所有的时间。 几乎任何时候你访问一个网站,你 实际上不键入文件名。 你可能只要到Facebook.com, 输入,gmail.com,或类似物。 又是什么斜线代表什么? 是什么文件? 还是什么页面,具体一点吗? 该指数是啊。 所以默认页。 所以,如果你不指定文件 名字作为我们就可以看到, 你实际上只是请求 给我的Facebook的默认页面 或者给我我的收件箱或提供 我的消息的默认页面 在CNN的网站等。 和服务器然后响应 有一些消息 像这样的,他说是的,我 说HTTP 1.1版。 200,它是一个状态 我们人类很少代码 看到过,因为这是很好的。 因为这意味着OK,请求 已接收并妥善处理。 与内容类型 显然在响应 相当经常,但不总是,文本。 具体而言,HTML。 而这实际上是 我们看今天。 所以,事实上,我要去 进取,不断开拓的浏览器。 我将使用Chrome浏览器,你可以使用 几乎所有的浏览器在今后几个星期。 我们一般建议Chrome浏览器 因为它是特别 良好的软件开发人员。 它有很多内置的 工具,使人们更容易 不仅要制定HTML和CSS, 事情我们就开始谈论今天, 但也有其他语言。 而且我要继续前进,去用于: 我要控制或右键 点击网页上的任何地方。 而且我会去检查元素。 而且我会调整我 屏幕只是一点点在这里一点。 让我搬这个底部。 原来这就是被称为 Chrome的检查。 因此,这就像一个调试 工具内置于Chrome浏览器。 所有你已经有了这个 如果你使用Chrome已经。 它可以让你看到是怎么回事 一些网页的罩的下方。 因此,让我们真正需要 看看这个如下。 它的方式更多的功能 而大家关心的今天。 但是有这些标签在这里。 元素,网络,资源, 时间线,和一些其他的东西。 我要点击 网络了一会儿。 这是一个有点势不可挡 在这里乍看之下。 但是我什么都做的是让 我简化它一点点。 我要打开 记录光,这样它是红色。 而我要说保存日志。 而这仅仅是一点点 的事情,我想通了 随着时间的推移,那将节省 一切发生在浏览器中。 现在我要去 到http://facebook.com。 其实,让我们做WWW 良好的措施,大幅削减。 输入。 因此,一个URL许多与 你可能已经访问过。 现在,Facebook的网页 页面出现在顶部。 然后一大堆 东西飞过底部。 而事实上,事实证明, 当您访问Facebook.com, 你不只是使一个HTTP请求, 事实证明,要Facebook.com 送41的信封, 每个都有自己的get请求, 所示,虽然在屏幕背后 这里,在屏幕的底部, 它表明,事实上,我 浏览器41作出的请求。 及在总,它传送861 千字节,并花了因某种原因 多达八个秒 下载了这一切。 所以这实际上是一个有点怪异 Facebook的网站将采取 长,但也只能如此在这种情况下。 现在,这一切我真的不关心 有关除了最上面的请求。 因此,让我们去这一个就在这里 让我缩小只是一瞬间。 让我放大这一点。 因此,我在左边,即使已经做了 有很多在这里怎么回事 是我突出 Facebook.com然后 请注意,我向下滚动, 向下滚动,向下滚动, 请求头。 你会看到Chrome的显示 我基本上内内容 请求我做了。 这不是格式完全一样 方式,但要注意有提得到, 请注意,其中提到的主持人, Facebook.com,路径,或斜线, 这就是我所要求的文件。 然后,如果我滚动 备份,我们实际上 看到什么Facebook的返回 对我来说,所有这些头。 因此,虚拟信封中 的确有很多键值对。 一个字,一个冒号,然后是值。 一个字,一个冒号和一个值。 这些都是所谓的头。 还有的方法更详细,这里比 我们真正关心现在。 但是,这是第二次到 最后一次出现了下滑, 请注意,这Facebook.com的服务器, 这里的确是说来一些文本的HTML。 所以,这一切是说 当你请求一个网页的 从一个浏览器向一个页 服务器,该服务器响应 与自己的包络线 其内部是文本。 换句话说,HTML。 超文本标记语言。 这是另一种语言 今天我们介绍 人类或计算机生成 为了实现网页。 具体来说,让我们来看看这个。 我打算现在回去 Facebook的网站。 而我要去刚 控制或右击 并点击查看页面源代码。 而且,即使你不使用Chrome, IE浏览器可以做到这一点,火狐可以做到这一点, Safari浏览器可以做到这一点,即使菜单 选项​​可能看起来有点不同。 这是HTML的马克和 公司在Facebook的采写。 而集体,这种语言在这里 实现了蓝色和白色的页面 我们刚才看到的。 现在,这是一个有点势不可挡。 但是,如果我们仰望左上角,我们 将开始看到一些模式。 它看起来像有很多 这些开放的角度支架 然后有这个关键字的HTML。 这里的另一个开放 尖括号和头部。 在这里,如果我们向下滚动 上下上下,我 要继续前进,并尝试 要寻找的东西。 有办法在右侧 这里是开放式支架体。 而从过去的回忆 我们提出的时间 最简单的网页 一个人可以写 看起来有点像这样。 打开HTML标记,开目 标签,打开标题标签, 然后关闭标题,闭头,开 身体标记,一些文本,封闭体, 封闭的HTML。 但暂停这里只是一瞬间。 此代码,即使你 以前从来没有写过这 但还是不太明白 这是怎么回事,看起来还不错。 没错,这是非常干净的。 这是非常不错的文体。 很多缩进和空白的。 Facebook的不是。 那么,为什么是Facebook的这么多 比我差在写HTML? 显然。 对,这好像人 出五项风格。 有一个令人信服的理由 他们削减这些角落。 好了,所以他们不希望 让您更容易阅读。 因此,在某种意义上说,他们是 之类的模糊处理它,争先恐后它 至少美学等等 这是MySpace的困难 去撕掉他们的 网页和HTML它。 事实证明,使用程序 不过,包括浏览器, 我们可以很容易的超清洁本了。 因此,它不是想象中的那么的缘故。 还有什么可能是原因。 是啊。 是啊,白色的空间成本数据。 什么意思? 是的,没错。 如果你打的Tab键大量或 空格键,可以考虑的影响。 所以,你的键盘上的每个按键是一个 [听不清]表示作为一字节。 因此,假设马克或任何开发者的 这几天打空格键只有一次 在这个HTML页 代表Facebook的主页。 而Facebook有很多 用户的这些日子。 因此,假设Facebook的主页 由十亿人今天被访问。 而有人在Facebook有 按空格键一次。 因此,一个额外的字节, 一个十亿的请求, 多少数据是Facebook的 传送通过互联网 因为有人打 空格键他或她的键盘上? 十亿字节,或一千兆字节 数据正在从Facebook的服务器发送 周围的人 世界上没有很好的理由。 现在,这只是一个空格。 试想一下,如果我们真的擦拭本 事情并缩进,并添加 大量的白色空间, 制表符和空格, 你最终消费千兆字节, 如果不是千佛字节更多的空间。 而在这样的超级共同 Web开发的现实世界 是中缩小你的代码。 我们最终会看到 你怎么可能做到这一点。 但今天,我们就开始编写代码 这是由我们人类真正可读。 事实证明,不过,如果你回去 在Chrome浏览器这一工具检查元素, 以前,我们的网络选项卡上。 事实证明,如果你去了 元素标签,你实际看到 是Chrome的漂亮的印刷 版本相同的HTML。 因此,我们反混淆了。 因此,它是敌不过一台电脑。 现在你可以实际 按一下周围,并开始 看层次结构是一个网页。 因此,让我们真正做到这一点。 我要继续前进,在开拓 我的Mac一个名为文本编辑程序。 和召回,这只是 一个超级简单的文本方案。 Windows有NOTEPAD.EXE。 而且我要一字不差 键入以下命令。 文档类型的HTML,开放式支架 HTML,封闭支架HTML, 我们有页的头部这里, 页的头部这里结束时, 标题会是怎样,世界你好。 然后到这里,我们需要 该网页的身体。 收身。 然后在这里,世界你好。 好吧。 因此,我们已经写了一个超快速的网页。 我将其保存为 hello.html的我的桌面上。 我的Mac的去抱怨, 认为,等一下, 这是一个文本文件,这样做 你怎么称呼它.TXT? 但是,没有,我想用点HTML。 然后,什么是好,如果我 只需双击该文件, hello.html的,这里是我的网页。 不幸的是,我是 只有人在世界 现在谁可以访问这个页面。 由于它在哪里生活明显? 这是在我的Mac上,对不对? 这是没用的。 就像没有人在这个房间 更何况在互联网上 实际上可以访问该网页。 所以今天,我们需要 引入另一个元素。 而要做到这一点,我要去 去进取,不断开拓云9。 所以,云9当然是一个 基于云的service-- CS50 IDE--那有我们所有的工作区 某处的互联网上运行。 这意味着我们所有的文件 公众开放了。 因此,让我们继续前进,做到这一点。 我要继续前进, 创建一个新的文件NCS50IDE。 我将其保存为前 为hello.html的,然后点击保存。 而现在只是为了节省时间,我要去 继续前进,复制粘贴此代码 而不是重新输入。 并保存它。 所以现在我有一个 文件名为​​hello.html的。 但我怎么竟 打开它作为一个网页? 哦,原来出内置到CS50 IDE不仅是一个编译器像铛 而像GDB调试器和 其他方案的束, 实际上有一个完全成熟 Web服务器CS50 IDE中运行。 在座的各位,也就是说, 拥有自己的Web服务器。 和Web服务器只是一块 其目的在生活的软件 是来提供网页。 要收听来自浏览器的请求和 很少有虚拟信封回应 里面,其中是 我写的内容。 所以这个Web服务器 实际上自由和开放源码。 凡开源只是手段 软件别人有 撰文指出,我们都可以 真正看到和下载,甚至 改变的源代码。 而这就是所谓的Apache。 我们找到了一个比较容易 通过调用它的Apache 50 CS50IDE使用。 因此,它实际上可以 了解以下。 我要说的Apache 50开始。 然后,我只是说了点。 我们看到一些稍微 神秘的消息, 设置Apache的文件[?组?] 家,Ubuntu的,不管它是什么, 大幅削减工作区。 启动Web服务器 Apache的成功2。 所以长话短说,我 刚刚推了按钮 并把Web服务器谁是现在 监听TCP端口在互联网上 80,在一个特定的地址。 它说,在这里, 此功能的方法改变 您的用户名和其他因素的影响, 但要注意,现在如果我点击这个, IDE50点jharvard等和 因此,请注意,这段时间 在过去的几 周,你可能有 发现自己的用户名 埋设在右上角 角落CS50IDE的。 而这实际上已经这一切 时间地址您可以在哪些 通过Web访问您的所有文件。 到现在为止,还没有要紧, 因为在C,你一般 要在运行中的事 终端,而不是在网络上。 但是今天,我们开始 编写基于Web的代码 我们确实希望 在访问公开网址。 那么,我要 要做的就是点击这个网址。 而且请注意,我看到一个相当 丑陋的索引,目录列表, 但什么文件跳出你可能? 的Hello.html。 那是因为我救了 在我的工作空间中的文件。 而我已经告诉了Apache Web服务器 是看在大卫的工作空间目录。 而让任何人在 世界看到这些文件。 事实上,如果我现在 点击hello.html的, 我这个标签正是文件中看到。 现在请注意,云9所做的, 东西我们一点帮助。 在CS50 IDE中,注意有 突然一个地址栏。 这是因为,即使我们是 使用Chrome访问CS50IDE, CS50IDE的内部是它自己的 版本网络浏览器的现在。 因此,而不是 复杂的事情是这样的, 我要继续前进 而只是复制此网址。 我要继续前进,只是 打开我自己的Chrome浏览器窗口。 因此,有没有魔法在这里,没有CS50IDE。 我只是从字面上贴 我Ĵ哈佛的URL,然后按Enter。 瞧,现在我和 从理论上讲,每个人都 在互联网上,如果我配置 适当的权限, 可以访问此文件。 所以现在,如果我说 hello.html的,瞧,有 我难以置信的深刻印象网页。 因此,让我们做一个快速的完整性检查。 因为所有这一切 是概念上的设置。 而我们实际上已经不是真的 教你如何写HTML本身。 因此,任何问题远 什么只是发生了什么? 是。 请问CS50拥有这些网页? 凭什么? 好问题。 因此,CS50的拥有CS50.io. 我们的确买了该域名。 并通过你们的性质 登录CS50IDE, 你们得到了什么叫做一个子域。 所以IDE50-马兰,或IDE50-Rob.CS50.io, 这是在你的唯一地址 我们的域名。 因此对于过程的​​目的, 你有自己唯一的地址。 但我们通过简单的事情 购买顶级域名,CS50点 I / O,然后其他人都 那里面,可以这么说。 我们会回来的 在几个星期的可能, 尤其是在最后的项目 一次,当你们中的一些 可能希望让自己的域名。 这确实比较 简单。 好吧。 现在让我们做到这一点。 我要去回 CS50IDE,在我的文件,现在, hello.html的,是不是所有的有趣。 我想要做的事情 比更好一点。 所以我会做这样的事情。 让我开paragraphs.html。 所以这是一个文件,我事先写道。 在它的顶部,就像 以往,我们有意见。 但在HTML,评论 看起来有些不同。 在三线和14号线,你 看到语法开始评论 和结束注释。 但是,在没有任何的东西 在功能方面之间。 这只是一个音符到 人类什么是怎么回事。 而只是作为一个快速的理智 检查时,如果我向下滚动, 有什么明显的新 标签,我们已经出台? 到目前为止,我们已经看到了这种标签是开放的 支架HTML,头,标题和正文。 但显然现在新? 是啊,所以页。 p标签或段落标记。 然后,我只是借用了一些默认 拉丁文字构成我的段落。 因为我想 证明你是怎么可能 代表HTML文本的段落。 所以什么开始出现 这里要说的是有已经 一个模式发展。 让我继续前进,做到这一点。 首先,我关掉了Apache。 而且我要告诉它自行启动 再次内今天的源7 米目录。 所以,我有机会获得的一切。 而现在,如果我回去 此目录列表, 请注意,我看到今天的每一个文件。 你会在看 下一个问题集,我们将 给你指示 这样做正是这一点。 如果我打开paragraphs.html,这可能 还有看起来像一个编程语言 给你,如果你不说或读拉丁文。 但是,这只是三段 文本的标记在HTML中。 并注意段落 它们之间的休息时间。 因为事实证明, 而即使你 可能倾向于做到这一点, 而在现实世界中, 如果你想要把线 事物之间的休息时间, 你可能很简单 做到这一点,最后点击保存。 而现在,如果我重装这里,通知 这一切都只是模糊起来 在短短的一个BLOB文本。 因为HTML是个不会说话的语言。 它是指在这样的使用 一种方式,浏览器将只 做明确你告诉它做。 所以,如果你不告诉它 给我一个新的段落, 你不会看到一个新的段落。 而事实上,有什么 浏览器会做 甚至,如果你敲回车, 让我们一次又一次地说, 并再次,移动该文本方式 倒在屏幕上,然后保存 然后重新加载,浏览器是怎么回事 折叠所有这一切空白 成只是一个单一的,可见的空白。 好吧。 所以这是段落标记。 所以什么模式 这正在开发吗? 好了,这似乎是这样的情况 HTML是所有关于启动标签 和结束标记。 什么是标签? 那么,它的语法只是一大块。 打开托架,一个关键字, 封闭的支架,是一种标记。 或者开始标记。 然后当你 做了表达自己, 在你与段落做, 你可以这么说相反。 但相反的是不完全倒退。 您只需前缀相同标签的 名正斜杠是这样的。 好吧。 所以,不是所有的精彩。 而事实上,我们并没有使 网站所有的更有趣。 如果我想要什么 事情越做越大胆? 因此,原来这里是一个例子 在headings.html,凡在我的身上, 我有一个H1标签,H2,H3, 四个,五个,或六个,所有这些都 似乎很神秘。 但是,如果我去开这个 例如,让我们一起来看看。 Headings.html。 因此,浏览器在默认情况下可以给你短信 这是大和大胆的不同尺寸。 H1大。 H6较小,然后 一切在两者之间。 所以这是有趣的,但仍 没有真正的网络,我知道。 如果我们想要我有什么 像的列表。 。 所以这里有一个项目符号列表 3哈佛大学的房子。 你是如何去这样做? 好了,看看list.html。 在这里,我们看到了一个 funkiness点点 但让我们来考虑发生了什么。 因此,基于你所看到的, UL表示无序列表。 无序列表只是意味着项目符号。 有没有数字。 还有一种叫做 有序列表,这是一个在OL标签。 然后李,列表项都是这个意思。 并自动所以它 号码为你的一切。 但同样,我所有的压痕 和空白只是为了我的缘故。 浏览器的不 究竟要关心。 因此,即使你不能 做到这一点,仅仅是明确的, 你不应该,即使 浏览器仍然会 能理解就好了。 我打重装我 浏览器,我点击刷新 没有正在发生变化 因为浏览器仍 在做什么,我告诉它做的事。 好吧。 因此,这一切都只是文字。 现在,让我们做一些更有趣。 我要继续前进, 借用一些这样的HTML。 我要继续前进, 在这里创建一个新的文件。 我们会打电话给这个rick.html。 我们有不成比例 用过的东西 叫里克卷本 今年课,我不知道, 它只是发生有机。 现在它的失控。 所以,我只是去用它。 如果我去谷歌 图像和里克·阿斯特利。 如果你不知道我们为什么做 这一点,只是读了维基百科。 你点击链接时,都会 有人一直在笑的地方。 而让我去ahead--有 我们走了,让我们来查看此图像。 所以在这里我们有一个 图像在谷歌图片。 而且,我们认为,这是 合理无处不在互联网上。 所以我要承担它的确定对我来说 真正把我的网页这一点。 我要继续前进 和复制图片地址。 而现在,如果我回去云 9,让我们来看看有什么我可以在这里做。 因此,这里只是一个网页。 这是里克·阿斯特利,哈哈, 我打算现在回去 到我的浏览器,重新加载,和有趣。 瑞克在哪儿? 因此,让我看看发生了什么事。 其实,我要去 假装我并没有这样做。 [听不清]把他放在这里。 我们会回来的,在一个瞬间。 因此,这里的rick.html。 所以,这不是里克·阿斯特利。 所以,事实证明,我们可以 居然把他加在了这里。 这是里克·阿斯特利。 我会说给我一个图像,其 源是我刚才复制的URL,这 显然是幸福的 生日或其他东西。 现在我要去 关闭这样的标签。 因此,这是包装超长。 但是请注意,我的一切。 做的是开放式支架的形象, 源与一个这样的属性。 这是一个很长的URL。 并且在最后,注意到这一点。 为什么我做了斜线角度的支架 而不是,像所有其他标记, 具有开放的支架, IMG,封闭支架? 只要采取一种猜测,即使你 不熟悉任何 与HTML之前。 因此,它是如何关闭 命令,但为什么 它没有真正直观 踏踏实实做的东西多一点 长篇大论喜欢接近的形象? 是啊。 是啊。 就在语义上,有没有感觉 起始图象和结束的图像, 它要么存在或不是。 所以,它没有任何意义,留下一个缺口 为别的图像的内部。 你不能做到这一点。 这样一来,语法 就一般只是 做正斜杠内 打开标签或开始标记 然后打保存。 所以,如果我现在重新加载该文件,现在 我有一个好的网页烹饪这里。 我们可以肯定 真的惹恼人 通过嵌入代替 像一个YouTube链接。 而事实上,任何时候 你曾经去到YouTube, 让我真正意外 里克推出自己在这里。 所以里克辊。 所以里克roll--我要去这里。 [音乐播放] OK,一个人喜欢的。 所以,注意这一切的时候,如果你 点击分享链接,你当然 获取URL,你实际上可以 嵌入到电子邮件或法医形象 或在习题集或幻灯片。 而现在,如果我不是点击嵌入, 请注意,这一切的时候,这东西 一直存在。 我要继续前进并复制本。 而只是让我们可以更好地看到它,我 将其粘贴到我的文本编辑器。 请注意,这是什么 YouTube上已经告诉你了。 您访问一个每次 的YouTube视频,如果你 要嵌入的视频你 网页,只需抓住这一点。 因此,这是另一种 HTML标记所谓的iframe。 或在线框。 因此,它也看起来有点多 比其他复杂。 所以,事实证明,图像 标签和明显的iframe标签 采取所谓的属性。 这是另一种 一块语法的HTML。 除了标记的 名,开括号标记名称, 你可以控制标签的行为 通过有一大堆属性 等于价值。 属性等于值。 因此,例如, YouTube正在告诉我们 如果你想这个视频的宽度 为420象素,高度 是315像素,这是 如何在HTML中表达出来。 视频的源会 要那么久YouTube网址 然后一些其他的东西 像框线为零, 所以这可能意味着有 周围的东西没有边框。 可能允许全屏 意味着用户 可以点击一个按钮, 实际上全屏视频。 所以,如果我真的想成为 在里克点HTML令人印象深刻的这里, 而不是使用的图像标签,让 我删除,而不是粘贴。 现在重装。 现在又来了。 好了,这就足够了。 好吧,所以我会尽力 很难不再次做到这一点。 那么,这里的一些外卖的? 所以HTML,丑如这些网页 是,其实很简单。 这是不是一种编程语言。 它不具有的功能。 它没有环路。 它没有条件。 它所拥有的几十个 不同的标记,其中每一个 具有零个或多个属性。 而事实上,有什么好玩的约 HTML作为你开始潜入 是,这是很自我受教。 它所需要的是理解 对HTML的总体框架。 什么是标记,是什么属性, 您怎样配置一个网页 如下。 和其他一切是真的结果 寻找在网上参考 或者谷歌搜索如何做一些 技术或如我们所看到的, 看着Facebook的源 码,看一个网站 你喜欢在它的源代码, 了解如何开发有 实际布设的东西出来。 因此,我们可以做的影像。 而事实上,我们刚才做的。 让我继续前进,只是告诉你。 下面是一些示例代码。 如果你想看到不爽猫。 所以请注意,我可以 这里有一个形象的标签。 而且我知道了以上评论。 我有一个替代 文字无障碍。 因此,有人谁是使用屏幕 读者视线的原因 实际上然后有自己的 屏幕阅读器说,脾气暴躁的猫。 因为如果他们不能 看到的图像,它们 至少可以有自己的电脑 告诉他们口头上它是什么。 与该文件的来源是cat.jpeg。 所以,事实上,如果我真的想 弄巧,我能有done-- 我答应不要去里克·阿斯特利,所以 我要去,而不是谷歌的一只猫。 如果我去谷歌图片 在这里,我们假设 这是我的猫的照片。 假设我有控制点击 或者右键点击这个,不小心 让人毛骨悚然。 而cat.jpeg我要去 救我的桌面上。 现在让我回去云9。 请注意,在这里,我可以 到本地的文件上传。 如果我抓住这个 文件cat.jpeg,通知 我可以拖动它, 把它放到云9 并且它会在我在这里嚷嚷。 因为我们已把 给你一个cat.jpeg文件, 但它的超级容易 抢出你那照片 从Facebook采取 或Flickr或类似 居然将其拖放 进入云9,然后使它 您自己的个人部分 网站或问题 设置七八个,因为我们很快就会看到。 然后当你 最后参观的猫, 假设我下载的猫一样, 通知that--这是可爱的。 什么,你会看到的是 像这样的脸在这里。 因此,文件,您 在网页内的参考 可以是本地在你自己 帐户或远程其他服务器上 如在瑞克的情况下 Astley的照片一点点前。 那么,else--什么 还能做吗? 因此,让我们来看看下面的内容。 你知道什么样的凉爽? 我们迄今已使 非常静态的网页。 我想如下香料的东西。 我想我自己的搜索引擎。 因此,为了使搜索引擎,让我们 继续前进,开始这样做。 我要继续前进,创造 一个新的文件名为search.html。 我们已经在网上prefabed版本。 哎呦。 不要粘贴到你的终端窗口。 预制版本在线。 而且我要开始如下。 所以这里的开始 一个名为search.html。 我将它保存在 今天的源目录。 我要称之为搜索。 事实上,我们会做的更好。 CS50搜索,实际上品牌吧。 而现在,我要说的话 像H1 CS50搜索。 再往下这里,H2即将上市。 而只是为了回顾一下,H1和 H2分别指什么? 是啊,这么大,大胆,和 不一样大,但仍大胆。 所以,如果我保存这个走在这里, 让我们来看看该文件search.html。 好了,而这一次 是right-- [听不清]。 支持。 大卫是困惑。 哦,它就在那里。 大卫是个白痴。 好。 所以它是。 因此,CS50搜索即将推出。 所以,现在,让我们来合成 我们上周做了。 当我们谈到了 HTTP水平较低机制。 而这些新的想法 HTML中,这仅仅是 这个标记语言,你 告诉浏览器该怎么做 并实现我们自己的搜索引擎。 因此,而不是仅仅 他说快到了,我 要介绍 一些所谓的表单标签。 而在这种形式下,我要去 有类似的输入字段。 与此输入的名称 现场,我打算把它称为Q. 而这种输入字段的类型 我想说的只是“文字”。 和文本字段,如我们 看,只是一个文本框。 所以它不会感觉到这里有 它里面任何东西在这一点上。 所以我只是去 关闭与该标签 斜线右边的标签本身。 然后我要去 有一个其它的输入。 输入类型等于提交。 然后我要去 关闭这一个了。 现在我要去回到这里。 而且我们已经看到, 虽然很丑陋,我已经 得到的开端 在这里我自己的搜索页面。 事实上,让我尝试 打扫一下一点点。 事实证明,在 输入在这里,我可以有 所谓的占位符其他属性。 我可能会看到类似的关键词, 或更具体地,查询对于q。 同时注意,现在,我有 这种灰色的文字 即消失, 一旦我开始打字, 但它可能是什么 你见过在其他网页。 我真的不喜欢提交按钮。 所以,实际上,我给 提交按钮搜索的值。 而现在,如果我重新加载,请注意 我的按钮将变为命名的搜索。 你知道,我真的不 喜欢这里的标志。 因此,谷歌字体生成。 我想进一步调剂这件事。 因此,CS50搜索。 让我创造我自己的标志。 这看起来不错。 所以,现在让我保存这个as--来吧。 它在哪里去? 那里。 好。 错过了。 另存为。 愚蠢的浏览器。 待机,我们要 解决这个问题一劳永逸。 在那里,我们走了。 好吧。 抱歉。 休息日。 现在,这是时髦的。 退出全屏。 好吧。 现在,像一个正常 人,保存图像。 Logo.gif。 现在,我要进入CS50IDE和 我要简单地抓取标志, 我打算把它拖到 我的消息来源7目录, 文件已经存在,我与该确定。 所以我要重写它 因为我已经办完了。 现在我该如何摆脱呢? 让我们继续在这里做 图片来源等于logo.gif。 关闭这一点。 保存。 而现在,如果我回到我的搜索 页面,现在它看起来相当不错。 好吧,所以它没有 完全完成任何用处。 事实上,让我试试搜索 一只猫,看看会发生什么。 猫。 该死的。 它不只是工作,显然。 那么什么是关键棋子 唯一缺少的吗? 对了,即使你不知道任何HTML, 我已经开始打了电话形式 我已经告诉它怎么去投入, 给我一个文本框和一个提交按钮, 哪块显然缺少什么? 假设我们要真正得到 这个东西正常工作。 什么是我们需要做什么? 我们有必要实行后端 数据库或搜索引擎本身, 而这将需要一段 一大堆的时间,坦率地说。 所以请记住我们所做的最后一次。 所以,如果你搜索的东西在谷歌 并且您已经提前关闭, 召回,即时搜索。 因此,让我把它们关掉 因此,这实际上是 行为就像一个老派的浏览器, 如果我现在要查找类似猫科动物, 回忆一下网址样子。 这是非常神秘的。 但是嵌入在里面, 召回,是斜线搜索。 问号Q等于猫。 这似乎给我 一大堆的搜索结果。 所以,你知道我该怎么办? 我要借钱 谷歌只是一分钟。 我要去了 在这里,我要说 这一形式的行动,或 目的地,可以这么说, 应该从字面上是谷歌。 而法,我想 要使用将是获得。 那么,什么是行动? 动作古怪命名, 但是这只是意味着 谁去处理 这种形式的行动? 当我点击搜索,在那里 应结果去了? 如果我现在回到我的表 这里刷新我的网页 现在搜索的东西 喜欢狗,现在通知 我已经重新实现谷歌。 对? 如果我要寻找的东西 否则,它适用于不只是狗, 它也适用于猫。 这也适用于CS50。 和OK,这只是 在空前的,是不是? 好吧,但它的实际工作。 那么,实际上已经持续? 所以,我教我的浏览器,使用 的HTML,采取从用户输入 实际上发送输入 到远程服务器使用HTTP。 而由于我的浏览器 理解HTTP,它实际上 构造URL,这样什么 我结束了在我的浏览器, 注意到发生了什么 当我搜索犬。 如果我点击搜索,请注意 网址改变,因为我打算 以google.com/search~~V查询等于狗。 这是因为形式 知道,因为该方法得到的, 简单地把它添加到URL存在。 现在,这些网页都还难看。 因此,让我们引入另一个 一块语法如果今天我们能做到。 这是已知的东西 作为级联样式表。 因此,让我看看 这个例子在这里,看看 如果我们可以推断出这是怎么回事。 这是CSS0.html。 这是哪里的东西 变得有点难看。 因为不幸的是, 在幅材的世界, HTML不能单独做的一切。 所以,如果你想 风格化您的网页, 你真正需要关注的 美学以不同的方式。 所以在这里,我有我的网页的身体 其中,内页是一个很大的股利。 而一个div只是意味着分工。 所以,它就像一个段落,但 不具有相同的语义 的一段文字。 这也就意味着到 浏览器,这里来 我的网页大矩形区域 页面,我想特别处理。 现在,第21行是分区的开始。 而只是采取一种猜测。 什么是线21上的作用 其余的页面的内容? 围绕它。 就这样。 所以,我们还没有看到的一种方式 实际上围绕文本。 事实上,我的搜索​​引擎, 不像实际的谷歌, 一切都有道理到左边。 所以,现在在第21行,我说,哎 浏览器,创建页面的一个部门。 只要给我一个很大的,无形的矩形。 这就是我想 想想网页。 然后风格化它如下。 里面那些报价, 现在,是第二语言 我们今天推出 所谓的级联样式表。 值得庆幸的是,它太不 一种编程语言, 所以它是非常有限的语法,但 也非常有限其功能 而HTML是所有关于 标记了一个网页的数据 和网页的结构。 CSS通常是关于 最后一英里,美学, 得到的大小和颜色和 布局完全正确的网页。 事实上,它形成 与键值对。 这样,文字的属性 对齐,随后是结肠, 其次是该值 属性,在这种情况下是中心。 而现在注意到你 可以嵌套这些东西。 如果我想要的一切在那 我一直强调为中心, 这就是为什么我有21行和 相应的行31。 但是,现在假设想说约翰 哈佛,欢迎访问我的主页。 版权符号约翰哈佛。 再假设我想第一 这些线路是相当大的。 36像素。 所以这是一个体面的大小。 我想它的重量要大胆。 但随后跌破这一位置, 我想小文。 其下方,我想 更小的文本。 抱歉。 今天感觉就像一个休息日。 所以,现在,我在做什么来表达呢? 在这里,第22行是一个嵌入式 格或div嵌套,如果你愿意。 它也有自己的风格标签。 我指定的36字体大小。 我指定粗体的字体粗细。 到这里,我只指定了24个像素。 最后,在第28行,我指定12。 因此,正如一个快速完整性检查 而作为一个人读这篇文章, 哪些词在屏幕上的 究竟要大胆? 哪些线路实际上是大胆? 只是约翰哈佛。 对? 因为正如行22说:哎 浏览器,这里的页面的一个部门。 让它的字体大小36点。 使字体粗细大胆。 一旦你到达 相应的结束标记 或线24封闭的标记, 这意味着,嘿嘿浏览器, 停止做不管它是你正在做的。 而通知明确,即使 线22具有所有这些属性 喜欢的风格,当你 关闭标签在第24行, 你只提标签的名称。 你不重复的字样式或 任何的这些报价内。 所以,如果我看这个现在 在我的浏览器,让我们 看看最后的结果。让我走 未来到这个文件,这是CSS 0。 它仍然是相当平淡, 但得到相当有趣。 但事实证明,有 其他的事情,我可以在这里做, 并且在制造的风险 这完全可怕的, 注意这里,在我 我的网页的身体, 我可以做一些有趣的事情 像血糖或背景色。 快捷,什么是你最喜欢的颜色? 绿色听说。 好吧。 所以,现在,如果我打重装现在, 我们有一个绿色的网页。 好了,所以这不是坏的。 而现在,如果我想使这个真 很酷,我可以让我的文字的颜色 甚至红色。 因此,让我们看看这是什么样子。 现在,它看起来相当不错。 而到这里,如果你真的 想惹别人 或者,如果你想成为 那些人之一谁 试图诱骗用户访问一个网页 页面,因为他们已经欺骗了谷歌 到思维有一大堆 关键词like--让我们来看看,重装。 哪儿去了? 它就在那里我们。 好吧。 所以我说这是题外话,我们将 谈论这个东西在几个星期 当我们谈论 安全,如果你真的 中嵌入整串 在网页中的关键词, 即使他们不可见的, 当然,人,有人喜欢谷歌, 可实际上仍然发现这一点。 好了,所以这是很 可怕的很快。 而事实上,这还不是全部 那么多不像我自己的网站 页面作为一名大学生,这 我开始使用Google四处找 过去的版本我的旧网站。 这是非常糟糕的。 事实上,我确实发现 ONE仅有上课前。 但更糟糕的是在那里。 这显然​​是我的 主页早在1996年。 显然,我认为这是 应该问的人他们的名字 才可以 居然看到我的网页。 然后我给他们 一些愚蠢的事,大概。 我会挖多为下一次。 但现在,让我们来 考虑位的设计。 我们已经讨论过的风格。 而这个页面从而远不及 最一切,我已经写了 很干净的曲风。 但怎么样的设计? 嗯,有很多冗余 在什么我已经在这里做什么。 我已经提到这个词 颜色在几个地方。 我在一对夫妇提到字号 地方和大胆的在几个地方。 从根本上,我的合作 交融两种语言。 我有HTML与我的标签和我 属性,然后突然之间, 引号之间的,我有 第二语言的今天 所谓的CSS,它再次,只是这些 键值对,或这些属性 用冒号分隔。 事实证明,很多 就像C一样,我们 可以先对因子 一些代码为标题的文件, 所以我们可以做同样的HTML。 并朝着一个步骤如下。 请注意,这个版本,CSS1.html是 在结构上完全相同的网页。 所以,我有一大堆 申报单的,但是这一次,我已经 摆脱了包装的 DIV,你会看到的。 我已经给这三个div的 顶部,中部和底部,唯一ID。 这是很好的,因为 给这些部门 页面唯一标识符, 我可以在其他地方引用它们。 在哪里? 好吧,让我向上滚动。 因此到目前为止,任何时候我们已经看了 在网页的头,有什么 我们已经在唯一的标签 一个网页的头? 大声一点。 就在标题为止。 但事实证明,有 一些其他的东西 你可以把在那里,一 它之所以被称为风格标签。 所以刚才我们看了 在样式属性。 原来有一个风格的标签。 它属于内部 网页的头部。 现在发现我在做什么。 我有这里面 风格标签下面。 我从字面上提的第20行的 我想风格化标签的名称。 然后,我有大括号 和封闭大括号。 因此,在精神为C相似,但 再次,这不是一个功能, 这仅仅是一个语法在这里的细节。 那当然,而且我要告诉 浏览器,浏览器哎, 使页面的整个主体 有中心的文本对齐方式。 然后这话说以下。 嘿,浏览器,如果你看到一个HTML 在页面元素或标记, 具有顶部的唯一标识符, 因此,井号这里只是指 顶部独特的想法,继续前进 并使其字体大小36 其字体粗细大胆。 嘿浏览器,元素,其 ID为中,使其24像素。 哎浏览器,如果你看到一个 底部的理念,使其12像素。 最终的效果 正是SAM。 如果我去到了CSS 1, 页面看起来都一样。 但我们走向了一步 一个稍微好一点的设计。 现在让我回到这里CSS2 ,看看还有什么我所做的一切。 现在的网页是真的,真的很干净。 其实,我可以适应所有的 页面上的内容在这里。 但是,新的标签有我 介绍,很明显? 链接。 而且这不是一个最好的名字的标签, 因为它不是在这个意义上一个链接 我们知道,但这意味着 在某些其它文件的链接。 这是一种像尖锐包括C. 这是HTML的方式 说哎浏览器, 去得到的内容 该文件名为css2.css。 的关系,对我来说, 是,这是一个样式表。 事实上,这正是的一个 的s在级联样式表的手段。 这是一个样式表。 这只是包含文本文件 一大堆的财产。 这一大堆的风格 要应用到的页面。 所以这显然是 参照一个第二文件。 如果我打开,CSS2.css, 请注意,所有我做 是复制和粘贴的所有 这到这个文件。 而现在,即使你从来没有 之前编码这个东西, 只是考虑与 众所周知工程帽 对,这是为什么一个 更好的设计可能? 分解出的CSS属性, 把他们变成自己的文件。 即使我们解决了这个 问题像五分钟前 在第一个版本。 我们没有好转的 页面风格上, 这仅仅是更好 设计在某种意义上。 为什么你认为? 是啊。 更灵活的怎么样? 是啊。 所以,如果你想要去 背部和改变的东西, 现在,你有一个地方 在这里你可以改变的事情。 而事实上,对于一些 类似的问题设置七, 在这里,我们将实现一个 股票交易网站, 那将会有一个 一大堆的页面。 而这将是非常 恼人的,如果你决定,嗯, 我真的不喜欢24像素,我想 它是28像素或稍大。 然后还要做 全球查找和替换 或打开所有的网站的文件 只是真正改变一个值。 通过分解出这些风格 在一个中心位置, 你现在就可以打开一个文本文件 在CS50IDE到任何程序, 改变它,保存它,并完成。 你传播的 变化无处不在。 这将是相同的 在一个点.h文件也是如此。 因此,任何问题从而 据有关此语法? 好了,所以我们 所做的一切似乎 但实际执行的超链接。 因此,让我们继续前进,做到这一点。 让我继续前进, 在这里创建一个新的文件。 我要叫它 link.html,放在今天的代码。 而我要做的开 支架的文档类型的HTML。 顺便说一句,这东西在 顶,这个文档类型声明, 它是唯一一个很奇怪 与感叹号。 你只需要做到这一点存在,并且 我们使用的HTML版本,5表示。 老版本的 语言有更长的时间 你需要串放在那里。 因此,这里是被称为链接的示例。 我需要我的网页的身体在这里。 和在这里,A HREF等于 让我们说HTTP://www.disney.com 我最喜欢的网站,我们会说。 好吧,所以很 无关痛痒的,用户友好的页面。 如果我现在去到我的目录 在这里上市,开拓link.html, 我们有超文本。 事实上,这是在哪里 在HTTP轰得来的。 超文本传输​​协定 是有关传输文本 具有超链接到其他资源。 事实上,这里是大家熟悉的, 如果复古,蓝色链接,如果点击, 实际上将导致我Disney.com。 现在,噢,那很快就出来了。 好了,那么现在,有哪些 本作的含义是什么? 坦率地说,这个世界开始 得到一点更熟悉 并且也有点可怕 同时也多了几分 自我辩护的,一旦你开始 了解这些东西。 因为赔率是,一些你,如果你去 通过您的Gmail的垃圾邮件文件夹,甚至 您的收件箱,你可能 得到某种形式的电子邮件 是在问你改变你的 密码也许或者验证 您的PayPal凭证或诸如此类的东西。 而事实上,你可能已经收到 东西说,像请点击这里 重置您的支付宝密码。 现在,请注意,如果 这不是Disney.com 但像badplace.com和 重装,注意,这里是正文 任何能说什么。 而事实上,这只是话。 为什么不让我其实是超级恶意 并说http://www.paypal.com。 点击此处重置您的支付宝 密码现在重装。 这看起来很合理,对不对? 我的意思是,我不会点击 一封电子邮件,只是说这个。 但这里要注意的两分法。 它说www.paypal.com, 而事实上,等一下, 我们知道你想要 在S安全。 所以,现在,去www.paypal.com HTTPS, 但如果你以前从来没有这样做, 不要陷入习惯 徘徊在小链接在这里。 而且它是很难看到 在屏幕上出现, 这不是所有的容易在这里。 但一路下来这里 在小小的角落 做浏览器实际 告诉你,我们要 以badplace.com代替Paypal.com。 现在,我们去哪儿用呢? 所有我们今天所做的例子, 我们已经硬编码,并手动输入了。 该网站是令人难以置信 无趣,当你辛苦 编写你的网页,这样的内容 是静态的,从来没有改变。 当然,我们所有的 今天最喜爱的网站, 无论是Gmail或Twitter或 Facebook或任何其他一些 是动态的。 他们正在改变 响应于用户输入 就像谷歌的搜索结果。 因此在周三,我们做的是 我们离开的HTML和CSS介绍 过去,而我们走 理所当然,我们现在 知道它,我们引入 一种新的编程语言 所谓的PHP,它喜欢 C,是要给我们 实际创建的程序的权力 这本身产生的输出。 在这种情况下,我们将使用 PHP生成动态网页 使用这种新的语言的网页。 因此,更多的是在周三。 回头见。 [音乐播放]