DAVID J. MALAN：好的。 我们回来了。 所以，这最后一次会议的目标 是介绍几个概念 也给每个人一个机会 以一种舒展你的手指 实际上做一些事情 有点动手。 我们的目标是不给转 我们都为Web开发人员 以任何手段，但实际上只是 给你一些味道 什么样的基本构造的 进入网络编程和网络的今天 发展，所以 的things--静态侧 没有逻辑，没有编程 语言只是静态内容。 它会给我们一个机会 实际看到的Web服务器是什么， 看到一个HTML文件是什么，看什么 它是HTTP实际上是服务了。 但在此之前，我们在潜水，追溯 关于云计算的问题 抵押或在两者之间什么吗？ 没有？ 好了，好了，让我们 为此，以防万一 报名参加的过程 东西需要几分钟的时间。 我们会让它做它在后台运行。 来吧，如果你能， 这个URL这里 -  c9.io. 这是一个第三方service-- 平台即服务，如果你will-- 这是要邀请您 注册一个帐户， 并且它去给你们每个人 在所谓的云的帐户 在别人的基础设施， 一家名为Cloud9。 但是，什么是关于nice 这是他们给你 的近似值 实际的现实世界的发展 环境，虽然在 云和在网络浏览器， 我们会用这个实际 今天试验了一下。 然后继续前进，只是导航 自己的方式注册过程 如果你可以。 因此，我们在发生该类使用此 我教所有的学生， 在校园和关闭，现在， 它取代历史是什么 否则被下载的软件。 那么，你获得访问 是这些虚拟机之一， 本质上，我前面描述。 因此，这家公司可能Cloud9 从第三party--的确租金 在这种情况下，Google--一个整体 束的虚拟机的 他们莫名其妙地砍成 各个服务器的错觉 我们每个人都有完全控制权。 这不是很准确的说 他们是虚拟机， 虽然，因为什么 Cloud9实际使用 是一个有些较新的技术 所谓的集装箱。 让我抓住这个图片 这里画这幅画。 

容器是，如果 你还记得图片 从早期的，有点轻 重量比的虚拟机。 实际上，而最后 一次，我们谈到有 作为一个经营 系统管理程序 然后客户机操作系统，来宾 操作系统，来宾操作系统 系统之上的 物理硬件， 这种新的差异 技术，集装箱， 是，它们都以某种方式分享 相同的操作系统。 但他们仍然创造 大家的错觉 有他或她自己的专属 管理权限和文件 在服务器上。 但是，有一个在更少的软件 你和硬件之间。 其结果是，在 理论上，一个更高的性能， 因为你使用或 浪费更少的资源 关于所谓的虚拟化层。 因此，这被称为 集装箱的性质 由称为多克尔技术的方式， 这是非常进入它自己。 这是东西 工程师贵公司 也许那种类型的谈话开始 关于很快，如果他们还没有准备好， 虽然有肯定没有 理由跳上任何bandwagons。 

所以这么说，是什么 你可能现在看 是，看起来有点像这样的画面。 好。 如果没有，只是叫我过来。 如果so--我就过来如果不是。 来吧，点击大 再加上创建一个工作区， 你会看到这样的画面。 您可以致电工作区 命名你想现在任何东西。 而实际上只是为了简单起见， 去还有 - 还有，你们中的一些 已经有工作区。 说它不管你want--业务， 哈佛，周四，无论你想。 不需要的描述。 你可以把它私有的，除非你 已经有一堆的工作区。 如果你不得不把它公开， 这很好今天的目的。 在这里，也就是加售之一。 你得到一个私人工作空间 默认。但是，如果你想要更多， 你要付出更多。 否则，他们强迫你 使您的工作公开。 但是，这很好，因为他们也 在开源社区这个目标 鼓励人们 其实合作。 

这是很重要的最后一件事， 虽然，是，你选择一个名字后， 而你选择私立或公立之后， 单击HTML5的大橙色图标 左边第二个，并且 然后单击创建工作区。 它将可能 花一分钟左右， 但你再有一个 环境，一旦你 做到这一点，看起来让人想起 我有什么在屏幕上现在这里。 但是，再次，它可能需要一分钟 以上才能到该屏幕 当您点击创建工作区。 但就我旗在，如果你想我 要看看什么或提出建议。 好吧。 所以，我要这个背景现在。 给我打电话了，如果你似乎 有任何技术上的困难。 但是，再次，它可能需要一 点点的打开。 让我们继续谈什么 它实际上就是使一个网页， 什么HTML是，怎么了这一切 现在作为互连我们开始 实际使用的一些技术。 所以，事实证明，我可以 继续我的小苹果在这里， 打开一个叫做简单程序 文本编辑，或在Windows上我可以 开放所谓Notepad.exe的。 我可以只是简单地做一些事情 像this--“你好，世界”。 然后，我会这样保存为 hello.txt的所以没有魔法存在。 这有没有关系网络 编程无关的HTML。 只需创建一个简单的文本文件。 但事实证明，一个网络 网页是字面上这一点。 这是一个简单的包含文本文件中的文本 你可能在你的键盘输入， 但其通常但不总是 在结束不.txt文件，但.HTML或.htm。 而你不只是 键入文件中的话。 实际上，你必须使用所谓的东西 标签或更一般地，一些 称为标记语言。 

所以，我要非常快速输入 然后解释如下。 我要去第一 键入此，它说， 哎，浏览器，来了一个 网页用HTML编写的。 而这两个东西放在一起说，哎， 浏览器，以下是确实的HTML。 嘿，浏览器，来了 头或我的页面的顶部。 哎，浏览器，顶部的内 我的网页，把一个标题就是，“你好， 世界。” 嘿，浏览器，该负责人后，我 页面，这才是我的页面的主体。 而且，嘿，浏览器的身体我 网页还应该说，“世界你好”。 那么什么是显着的细节吗？ 这就是通常的 被称为文档类型声明， ，坦率地说，这是一个有点 很难在第一次记住这一点。 你只是一种复制粘贴。 这是正规途径 他说，哎，浏览器， 我使用的HTML版本5，其 出来了最近一些。 这是一个神奇的咒语，一些 人类与设计意识薄弱 决定把在 该文件的最顶部。 尽管这是一个 小奥术，这是所有 它是指：哎，浏览器，在这里 带有HTML 5版本。 

这样做的其余部分已经与我们 一段时间以来，从历史上看， 但它在不断发展，它的 可能已经开始有点简单。 注意几个特点 什么我突出。 有这些东西有角度 brackets--左括号 右括号。 这里注意的对称性。 并且对称，我的意思是，就像我 这里有这样的开始标签或标签开放 如果你愿意，这儿我有一个 结束标记或结束标记这是 不同仅因为它具有此 在字的开头削减 HTML。 你能想到的 这是我随便 提出前，嘿嘿， 浏览器，来了一些HTML。 而反过来说，哎，浏览器，这是 它为HTML--开始和结束。 

同时哎，浏览器，在这里 说到我的网页的头部。 嘿，浏览器，这是它的头部。 嘿，浏览器，这里是 身体我的网页。 嘿，浏览器，这是它的身体。 而且里面的一些 现在任意文本。 和头部的内部，同时， 一些任意的，但标记， 可以这么说，文本说，标题 我的网页应为“你好，世界”。 现在，现在，你可以 假定浏览器 有only--或者说，网页有 只有两个曲子分为头部和主体。 和头部通常仅有 如菜单栏，东东 真的只是在最高层。 而且身体页的胆量， 一切都在那个大的矩形 那充满屏幕。 所以我要继续前进，并做到这一点。 我要继续前进， 单击保存，保存文件。 而且我要救 以此为hello.html的， 我只是要 把它放在我的桌面上。 我要去 进取，点击保存。 而notice--我的Mac在 至少在我大呼小叫。 你确定要这么做吗？ 而且我会说，是的，使用HTML。 我知道在这种情况下更好。 现在我会去我的桌面 在那里我有这个文件突然。 而且我要双击它。 而且你会发现，通过 默认情况下，Chrome浏览器打开。 这是因为这是 我的默认浏览器。 而且它只是说，“你好，世界”。 但它说“你好， 世界“，在两个地方。 注意左上角。 相当困难的错过。 这是大和大胆。 和别的地方它似乎 说：“你好，世界”？ 

听众：该选项卡。 

戴维·马兰：是的，标签本身。 所以，当我说的头 网页是一切行动top-- 这确实是标题。 这只是在这里标签。 我可以拉这个标签 出以免混淆。 这仅仅是一个单一的标签，现在， 而事实上，我们看到“你好，世界” 在这里和“你好，世界”到这里。 所以很简单。 但它也相当简单。 而且，事实上，我放大英寸 我可以更改字体大小 放大可访问性。 但是，让我们现在做的事 更有趣一点。 

我要去go--哎呦，让 我回到我的文本文件。 我要回我的 文本文件，然后我要去 要改变这一点，说 “你好，迪斯尼世界。” 保存。 而回到我 浏览器，然后单击刷新。 现在，当然，它 说，“迪斯尼世界”。 我要去人为地放大 在短短所以它更容易看到。 所以，现在，不幸的是，我有点想 中场休息其实，这是一个Mac的功能。 我想点击迪斯尼世界 和去的地方像disney.com， 但是，这并不工作。 所以纸幅的一个基本原则是 超链接，也去其他地方的联系。 那么，如何做呢？ 好吧，我可以说， “你好，http://www.disney.com。” 保存此。 重新载入。 但是，这也不能点击。 什么是不错这里，即使 这不是功能呢， 是，它似乎 浏览器从字面上只做 我告诉它做的事。 所以，如果我只是输入网址这样， 它只是要告诉我的URL。 我需要使用标记或标记 语言居然告诉 浏览器做更多。 所以我要继续前进， 删除了一会儿。 而我会说，嘿， 浏览器，从这里开始锚， 一个链接可以这么说。 与超基准，目的地 锚的，应该是这个URL。 并注意我的报价。 我可以用单引号也一样， 但你必须是一致的， 我会一般只使用 双引号保持简单。 请注意，我将关闭该标签。 然后，在这里我会 说，“迪斯尼世界”。 而现在我需要一些symmetry-- 开放式支架，/一，封闭支架。 

所以，我有什么介绍？ 我们已经有一些标签。 HTML，头，标题，正文 都是标记，可以这么说， 开放和封闭的同行。 但通知，这是排序 根本不同。 这就是我们会打电话给 在HTML属性。 和一个属性是 只是一个键值对。 这是常见的事 计算机science--键值对。 这有点贸易的工具。 一个键和一个值。 一个字，然后一些 其他的字或词。 在这种情况下，关键是HREF， 和值是完整的URL。 什么属性确实是 影响标签的行为。 在这种情况下，我们需要影响 锚标记的行为， 因为我们需要锚定 这个链接的地方。 怎么你这样做是 由属性的方式。 

所以我要继续前进 现在保存文件。 回到我的浏览器和重装。 而且，瞧，我们现在有 一个合法的网页的开端。 超级简单，但如果我悬停 在左下角this--通知， 它的超小型。 但是你看到www.disney.com。 如果我点击它，这的确 拂尘我带到disney.com。 现在，奇怪的事 这里是，它是不 在best--最适销对路的URL，但 这很好，因为这个文件不 存在在万维网上。 它存在作为显然是一个本地文件 我的用户directory-- / jharvard-- 约翰Harvard-- /桌面。 但它有一个网址。 这恰好是本地的。 不幸的是，没有一个可以访问 这一点，因为如果你输入这个网址， 你会告诉你的浏览器， 寻找一个名为hello.html的 在你的硬盘驱动器。 而且，当然，除非你已经 手动沿之后， 它不会存在那里。 

所以这是很好。 我们还需要一种方式，最终， 得到这个文件放到网上， 但让我们梳理出几个 的安全隐患我们刚刚 看到和领带回较早 从今天上午的讨论。 事实证明，如果 浏览器从字面上少了点 我告诉它做的事，似乎 到是一个锚定标记的话 由的值的影响 此属性称为HREF 但它显示此 文本，这似乎 暗示我可以把网址 在这两个地方，然后重装 而现在看到的网址，然后转到URL。 请注意，如果我将鼠标悬停在左下角， 我确实要去仍然disney.com。 

所以，如果你曾经去过 phished--的P-H-I-S-H-E-D-- 这些伪造邮件的一个 从PayPal等银行， 你可能得到的内部链接 你正在阅读的电子邮件 告诉你点击这里去确认 您的密码或者确认您的生日 社会或社会上的东西 工程您披露 信息。 好吧，我可以那种拿 利用这一点，我能不能？ 我能说些什么 像，www.paypal.com。 而不是disney.com，我 可以去一样，badguy.com。 重新载入。 而且是多么容易欺骗， 特别的非技术性读者 或粗略阅读 读者比点击 像这样的链接，如果我点击它 -  我其实不想去badguy.com。 我不知道什么是真正在那里。 所以paypal.com，通知，是 它说，它打算， 但当然，如果我往下看 超低价，这是一个有点模糊， 但它说badguy.com。 这是唯一的告诉现在 我要去到错误的地方。 当我刚才说的银行 真的不应该鼓励或火车 用户点击链接，这 只是它的一个表现。 它就是这么简单。 你现在的对手，如果 你做这样的事情 并试图诱骗用户 到访问您的网站。 但现在，我们会继续 整洁，干净。 我们要继续前进 和倒带这些变化。 重新加载页面。 我回去disney.com。 

让我们看看，如果我们不能去惹 这除了多一点。 因此，“你好，迪斯尼世界。” 我要在这里说下。 也许我会做一些空间。 “我们希望你过得愉快！” 保存。 重新载入。 这不是rea--这不是 我故意的，对吧？ 我的意思是，如果我对待我的文字 文件像文字​​处理器， 那你希望在这里会发生？ 是啊，我觉得好像有 应该是一个换行符在这里， 所以感觉越野车以某种方式。 但是，这实际上是故意的， 因为就像以前一样， 浏览器只会 做什么你告诉它做的事。 我还没有告诉它断行。 我没有告诉它向下移动，甚至 不过，直觉，我觉得我做到了。 因此，原来我们需要 多一点的标记， 我要去解决这个问题如下。 我要第一个前言本打招呼 什么叫做一个段落标记。 然后我要继续前进 而这个包裹等句话 在另一个段落标记，即使 他们是超级简短的段落。 现在，我要救。 重新载入。 而现在我们有 空间，我们的排序 具有的语义 两个独立的段落。 

这是一切优秀和良好的，但它会 是不错的图像添加到这个页面， 所以我打算去看看 米老鼠在谷歌图片。 而只是为了好玩，我 要抓住这一形象。 我现在要继续前进， 抓住这个图片的URL， 尽管有不同的 如何做到这一点。 现在，我只是去复制网址。 我要回去了我的文字 文件，我要在这里说， IMG SRC =报价引文结束 该URL，超长。 再一个概念 形象是一个有点不同。 真的没有首发的概念 的图像并结束一个图像， 就像一个开始标记结束标记。 所以感觉有点怪异 我语义做到这一点， 有一个近距离图像标签。 这不是不正确。 这是完全正确的， 和它的鼓舞， 但有速记符号。 我可以种同时进行 打开和关闭同一个标签， 而且，这将使浏览器高兴。 因此，这只是一个小 更简洁的东西 在概念真的不 意义的开始和结束。 他们只是在那里，或者他们没有。 

所以我要拯救这个回去 我的“你好，世界”网页，并重新加载。 而且它失控了一下， 由于该图像实际上是 有点大，但没关系。 我可以在一个程序调整其大小。 或者，你知道的。 只是为了演示，我 要实说 那这个东西的宽度应 只有200像素，200点。 让我继续前进，保存 并重新加载，而现在的页 看起来有点更合理。 但是要注意的格局。 嗯，我有种教你一切 在某种意义上的HTML，至少 概念上，因为所有的HTML是为 这些tags--开放标签，标签关闭， 和属性 修改其行为。 和，很明显，每 标签可以具有零个或一个 或两个或多个属性，每个 它做一些事情有点不同。 现在，你怎么知道存在什么？ 你只是听别人 像我告诉你存在， 或者你只是谷歌周围的教程 在HTML，它真的是这么简单。 

确实，当我是一名大学生 几年前，得知HTML， 我的数学教学中的一个 助理刚刚度过 时间一点点的我家教 像半小时，一小时， 然后我在我的方式。 我是在我对制作方法 最可怕的网站不断， 其中，显然，我没有 真正的发展远远超出。 但问题是，一旦你 了解这些简单的ideas-- 如果神秘text--但这些简单的 开始的思想观念 和关闭的思想，保持 一切都很好地平衡， 看的东西了，修改 该标签的行为，这真的所有 就是这么简单。 而事实上，如果我们现在去 类似实际上google.com--， 让我们去的地方多一点 reasonable-- stanford.edu。 我要去查看， 开发人员，查看源代码。 它的丑陋，但notice-- 我会在通知放大 有些东西，这已经熟悉。 这里有这件事， 这是一个浏览器。 这里谈到HTML5。 还有HTML。 显然，有一个 属性我没 使用指定 页面的语言， 这可以帮助自动 翻译之类的东西。 下面是页面的头部。 这里是斯坦福大学的网页的标题。 有一个标记我没有 说说yet-- Meta标记。 这只是排序 背景资料。 它有助于SEO，或 搜索引擎优化， 或谷歌搜索结果等。 但是，如果我们继续找，保持 看，这里的Body标签。 而且还有其他串 标签我们没有谈过呢。 但是，事业部是一个用于 页面的分工。 这就像一个无形的矩形 如果你有种想弱智 将您的页面到 不同的单位在网上。 然后大量的div的我 看，一种叫类， 但我们会回来这一点。 

这是interesting--形式。 所有的表单都在网上。 任何搜索框你 使用过的一种形式。 而且，所以，让我们实际看到的。 形成。 行动。 这种形式的作用，不管是什么 由于历史的原因，就是网址。 方法是“后”。 原来，HTTP请求可以使用 动词“获得，”像我们以前看到的， 或“后”。 并且会看到一个差异 这个瞬间。 让我们真切地看到这是什么。 让我回到斯坦福大学的网页。 什么样的形式。他们说什么呢 一下，你觉得呢？ 什么你跳出来？ 

听众：搜索框。 

戴维·马兰：是的。 于是起来右上方 这里是这个搜索框。 这就是他们如何实现它 - 一 标签这是字面上的开放式支架形式。 然后让我们寻找的东西。 让我们搜索好友 的mine--“尼克Parlante”。 输入。 当然，它去 一个稍微不同的URL。 让我走回到这里。 让我们搜索“的课程。” 该死的。 又到一个不同的URL。 因此，斯坦福大学的加入一些魔法 说他们不带我去的网址 我们在看到 action属性那里。 但这里有个形式，纯粹是实施 这里所该标记的方式，这些标签。 事实上，这里是输入 您要搜索的类型。 这里是对输入 另一种类型的搜索。 这里是字符串本身的输入端。 因此我们的目标是不包 我们周围所有这些标签的头脑 只是去看看。 它只是打开和关闭 标签和期待的事情了。 是吗？ 维多利亚？ 

听众：[听不清] DAVID J. MALAN：这是一个很好的问题。 这是一个有点麻烦看看。 让我回来了 在短短几分钟的问题 当我们看一些所谓的 CSS或级联样式表， 我们可以尝试推断 尽可能从页面。 所以，如果我们现在google.com来看看， 让我们来看看他们的网页是什么样子。 你会they're--今天的可爱。 好。 全做完了。 好吧，查看源文件。 你可能会认为谷歌有 很不错的源代码。 所以，很显然，是怎么回事呢？ 而事实上，这甚至不是HTML。 这就是所谓的JavaScript。 让我们继续下去，下去。 我甚至不知道该页面的开始。 我将使用命令 楼打开支架HTML。 好吧，它就在那里。 我发现页面的开始， 有这么多东西在这里。 

什么是真正回事？ 那么，你知道吗， 我们可以打扫一下。 如果我不是去这个检查 工具栏，这个特殊的诊断工具， 去没有网络， 我们今天继续下去， 但如果我去的元素， 什么是真正好的 是一个浏览器有很多 更好的眼睛比我好。 而浏览器可以读取 网页的那些乱七八糟， 该HTML邮件我们只是 看着，并且它可以 解析它或阅读 分析它，并重新格式化 在一个不错的人性化的方式。 那么，我现在看到 这里该屏幕 元素下，完全相同的内容， 但他们已经缩进的一切， 他们已经着色，但 这是完全相同的文字 我从服务器下载。 

什么现在是很好的，我可以看到 在体内，对instance--通知， 页仍然由 的只是一个头部和一个体， 我可以分层潜水这里。 请注意，谷歌似乎有 到divs--这一个，这一个。 我可以展开。 还有其他的div的一大堆。 所以这是一个有点复杂。 可是等等。 这似乎这么多 可读性强，比较，莫过于此。 为什么谷歌尴尬 本身只是发送 这个巨大的一些代码混乱 排序只是为了实现一些 这乍看上去这么简单吗？ 就像，他们为什么不增加更多的空间？ 他们为什么不按Enter键像我一样？ 怎么看怎么好，我是 在写一个网页。 我敲回车这么努力。 我缩进所以一切 既漂亮又可读。 为什么谷歌不练一样吗？ 

听众：[听不清] DAVID J. MALAN：好。 很公平。 它们不具有一些 人在谷歌手动 再更新主页。 这不是1999年了。 因此，他们有软件。 他们有其他工具 动态他们的HTML生成。 当然，该代码本身 被写了人类， 但现实是， 这是相当公平地说， 浏览器肯定不会 关心代码是如何凌乱的。 但是，还有一个更 令人信服的技术原因 ，谷歌分配他们的HTML 在这样一个草率的编码，看似 铺天盖地的方式，所有挤在一起 用很少的方式 - 非常小 在格式化像我一样的方式。 

听众：[听不清] 

DAVID J. MALAN：更快？ 为什么？ 你是怎么说的，肥姐？ 更快？ 为什么要快？ 听众：[听不清] DAVID J. MALAN：有 没有空间来阅读。 是啊。 所以，想想一个空间是什么。 所以在键盘上每个字符需要 的空间量来表示， 无论是身体，喜欢它 占用太大的空间， 或以某种方式下的 油烟机，需要的内存。 而作为一个aside--，我们将 谈论这个明天...... 键盘上的每一个字符 通常需要8位，或一个字节。 因此，8为零的图案或 的人，或者只是1个字节，因为我们 人类通常会说。 所以这是小，但 它仍然是非零。 它仍然是一些空间量。 因此，如果一个工程师或谷歌命中 空格键只有一次，并且假设 Google--这是超级popular-- 假设一个十亿人 访问他们的主页，每天 或一些数量的人 访问主页 每天十亿倍， 多少额外的字节有 软件工程师只是成本谷歌 击中一次，他或她的空间吧？ 

听众：[听不清] DAVID J. MALAN：还不至于那么糟糕。 只是一个字节次十亿。 所以A-- 听众：8十亿字节。 DAVID J. MALAN：不是8十亿。 8个十亿字节。 但是，1千兆字节。 1千兆字节是衡量单位。 如果他或她做了两 空间，2千兆字节。 三千兆字节。 对？ 它扩展昂贵。 所以，在像谷歌的情况下， 其中，理所当然的，是极端的情况下， 还有一些刚刚出现的其他问题 通过非常合理的决定 或采取很简单的人的行为， 因为它有这样放大效应。 这样的原因之一 这看起来如此压缩 正是因为维多利亚说 - 这是 仅仅通过电脑生成的反正。 所以，没什么大不了的。 让浏览器看着办吧。 但它也故意 没有太多的空间， 由于空间是不必要​​的。 而空间里，真正花钱。 

它要么耗费时间， 因为刚推 那么多的更多的数据出 google.com的总部只有 得到了取一定量 时间，即使是毫秒 或微秒，但是这增加了 在如此多的用户，或者更可能的， 它可能要花钱的。 谷歌可能连接到 这世上有人在，其他人 那些窥视 点，如果他们有 某种金融关系 因此他们的数据费钱， 他们还不如 减少多少数据 他们对随地吐痰 他们的互联网连接。 

于是有趣的事情，不过，最终， 或者也许是令人欣慰的事情， 是，即使这看起来可怕 压倒，在一天结束时， 它仍然是完全相同的原则 这里一个HTML的这个非常简单的页面 页。 所以只是总结等你 有一个官方版本，如果你没有 通过选择以下沿这里，在这里 可能是最简单的网页， 这样的东西用也许以后玩。 

好吧，让我们引入 几个其他的想法了。 我们即将推出 所谓的style标签。 我们可以样式化页面 更有趣的方式。 因此而HTML电子邮件 在所有了解标记 数据，排序，指定到 浏览器如何组织数据， 把它放在哪里，CSS或 级联样式表， 是第二语言 一般获取与HTML混合 正如我们将see--，但我们可以清理 ，最多在moment--的需要 它的最后一英里，而且风格化它。 它得到的颜色恰到好处， 字体大小刚刚好， 定位恰到好处。 这是所有关于美学 或格式化，不是 的基本数据本身。 而最简单的方式来显示 这也许是通过例子。 所以我要去了 我简单的文本文件。 而在短短的一瞬间，我就 走我们走过的过程 中这样做自己。 

我要回到我的文件 在这里，只是重新加载页面 确认是什么样子。 这就是我们现在所在。 我觉得孩子们会喜欢 有一些颜色来此网页。 所以我要在这里上去 到页面的头部。 而我要做的风格，/风格。 然后，在这里面，我要去 告诉我page--的身体 这格式化，在 乍看之下，也许有点 奇怪，但传统。 我会说，背景 本页面的颜色应该是绿色的。 这是很不幸 排序的不是最好的设计。 请注意，以前 在HTML的世界里， 我说的属性 这些键值对。 东西等于报价 引文结束“的东西。” 在世界上的CSS，这是 一些不同的人设计的， 他们决定，在他们 世界，键值对 将字结肠癌的东西。 所以这是同样的想法，虽然。 它关联的值 有一些关键的莫明 影响这个页面的行为。 

你可能已经猜到。 这是什么可能将 即使你从来没有做 看到HTML或CSS过吗？ 听众：改变背景颜色。 戴维·马兰：是啊， 改变背景颜色。 而具体的 身体的背景颜色。 但是，只要该 身体现在是网络 page--它是唯一的事情 下方的标题栏真的 -  它可能会 影响同样的事情。 因此，让我们来看看。 让我们保存此。 去这里并重新加载。 这是非常可怕的。 而且这是怎么回事 这里是一个副作用。 我只是选择了这个图像随机。 为什么是绿的，没有 背后渗透米奇？ 听众：[听不清] DAVID J. MALAN：没错。 事实证明，图像，漂亮 多，我们可能会使用的所有图像， 是矩形的所有rectangles--。 即使米奇有一些曲线 自己和具有背景， 这样的背景下必须要有些东西。 它必须是白色。 它必须是黑色或别的东西。 它可以是透明的。 而事实上，我可以 打开米老鼠这里 在一个叫做Photoshop程序 或类似的东西 而改变这一切的白 背景透明， 因此，绿色将彪炳。 但是，这件事情我需要 问自己或图形艺术家 或在我的设计师 公司，例如， 这样做，尤其是因为我刚刚 借这一个从互联网上。 但是，这是为什么发生这种情况。 

那么还有什么我们可以想干什么？ 好了，我们可能想说我们 真的希望你过得愉快。 而对于强调，我想 使这种强烈的， 所以我会说开强 关闭强后重装。 这是一个有点硬 看投影机上 但也许真的现在 你跳出多一点。 所以，你可以在此添加斜体 方式，在这种方式粗体面。 我们可以改变颜色。 其实，只是踢，我 要继续前进，并做到这一点。 我真的不喜欢我怎么样 段落此并拢， 所以我可能会做这样的事情。 我要告诉浏览器， 改变每段落标记有， 让我们其实say--，你知道吗， 让我们来对齐文本对齐，居中。 再次，我知道这只是 因为有人教给我 或者我看着它在 网上参考。 因此，让我保存这个。 而且啊，现在我 中心的形象出现。 而实际上，你知道吗，如果 我把我的形象到一个段落 tag--所以第三段， 即使它不是文本。 让我们保存并重新加载。 现在这一页已经开始看样 of--我的意思是，它仍然很丑陋， 但至少它看起来像我花 2分钟代替一分钟 进行中。 

所以，逐步，才能使 现在这些审美更改页面？ 我没有真正改变数据的 页面比真正加字等。 我已经添加元数据，如果你愿意。 嘿，浏览器，使 单词“真正”大胆。 但数据不强。 这是元数据。 该数据是“真的”。 所以，我们还是有一定的 相同的概念和以前一样。 现在，当然，这不是在网络上， 所以我要在这里做的最后一个步骤。 

我要去的Hello.html 和公正的突出和复制此。 而现在我要去 进入Cloud9，这 我会带您在短短的时刻。 赔率是，你会很快，如果 没有准备好，在这样的屏幕上。 让我只是给你一个快速 游览什么Cloud9实际上是。 如此反复云9 这种基于云的服务 ，让你我的错觉 具有我们自己的虚拟机 在云中，在技术上 在云中的容器中， 我们有充分的 管理员权限来。 因此在理论上，没有一个 否则在全球拥有 访问我的屏幕 在看现在， 也许除了人 谁跑工地， 因为从技术上他们有 物理访问等等。 

那么，我们在这个环境中看到了什么？ 我要缩小， 因为它是小了点。 让我点满 这里只是一瞬间。 论左边我和你 屏幕上，有一个在左一个文件浏览器。 因此，在神似 到Mac OS和Windows。 这些都是的 文件在我的帐户。 并且默认情况下，如果你的 帐户是像我这样的， 你会看到或很快看到 的helloworld.html和readme.md。 在这里就对了，这是 在我的文本文件要去。 如果你曾经使用过微软 Word或记事本或文字编辑， 这是我的字编辑 文件还将会持续下去。 然后最神秘 这种环境的功能 我们不会真的需要使用的 到这里所谓的终端窗口。 如果你用过DOS从 去年，这是在Linux 或Linux相当于DOS的。 这是一个基于文本的interface-- 没有鼠标点击，拖动无。 所有你能做的就是输入 命令，但是这些命令 可以创建文件，移动文件，打开 目录，目录接近， 做任何多的东西。 但现在，我们只 花时间在这里。 

因此，让我们做到这一点。 如果你在这 环境，你应该 ，如果你创建了一个工作区 已经，继续前进，只是去了 到文件，新建了一会儿。 这会给你一个新的 标签这里在中间。 我just--，让我们 继续前进，做到这一点。 让我们继续前进，现在做文件，另存 并继续前进，把它叫做hello.html的， 不与混淆 的helloworld.html，这 带着新的免费帐户， 这仅仅是一个示例文件。 你会看到它突然出现， 最有可能在左侧， 和标签仍然是开放的。 让我鼓励你现在重新创建 此文件或它们的一些变体。 如果你不能完全看到它的 屏幕上，这是相同的幻灯片 那你可能在另一个选项卡。 

因此，在短期，让你的第一个网页， 保存它，然后在短短的一瞬间， 我会告诉你如何 其实可以查看此。 但是，改变至少有一点。 更改到的HelloWorld 你自己选择的东西， 让你确信这是你的 文件并没有我刚才创建的。 好吧。 而当你ready--没有 当你准备好rush--， 继续前进，保存文件 一旦你做了这些改变。 如果你点击 RUN键向上顶，这 要打开一个新标签，将告诉 你哪个网址您可以访问您的文件， 但它可能会花点时间 报价解除引用“启动Apache”，这 是网络服务器的名称。 所以要小心做的正是 什么是文件中的最终。 所以现在，我会放大操作。 如果我开始打字 开放式支架HTML，通知 它促使我完成我的想法。 如果我完成了我的思想，它 自动给我的结束标记。 但期望是那么我会打 回车，然后将里面 并做头颅内， 然后我身体里面。 和它的起初有点古怪， 因为它做的工作给你， 但要意识到最终 这样可以节省你的按键。 而事实上，一个很常见的特征 编程环境，这些天 既为Web开发像 这和实际的编程， 我们将谈论明天， 这是自动完成的功能， 事情只是让 程序员或设计者 键入较少的击键 完成同样的事情。 有时候，这是很好的，虽然。 有时，它只是恼人。 并再次，一旦你转录 滑动或它们的一些变型中， 你可以点击运行按钮往上顶。 然后在底部 窗，我们会通知你 在什么网址可以访问你的网页。 矿，例如，是在 business-daharvard.c9users.io 等等。 好吧，那么，让我 - 什么问题吗？ 有关刚开任何其他问题 该工作之前，我们增加新的功能？ 让我求婚，只是 让乡亲comfortable-- 因为它是一回事，只是 一味的复制粘贴我做了什么。 但是，仅仅让乡亲搏斗 至少有一个待办事项， 我会打开一些音乐。 我要提出的名单 事情你可能会增加。 你当然可以使用谷歌。 而我们为什么不只是 建议你尝试解决 至少在这里一个具体问题。 因此，在标签而言， 让我重用这个在这里。 

其实，让我把 它在一个文本形式。 比方说，我们可能会在标签中 这里使用在这边，一些标签。 我们已经看到了段落标记。 现在，它会自动完成。 段落标记，锚标记。 比方说，你想 做出更大的东西， 所以你可能like-- 跨度标签可以提供帮助。 嗯，你可能需要一些帮助 对于在短短的时刻。 我们已经看到了格。 你会看到有表。 还有一些所谓的TR，TD。 日，TD。 回过头来，在一个时刻。 还有什么可能会派上用场？ 有强烈的。 有重点，或者说他们。 There's--还有什么 你可能会看中这里？ 好了，我们将采取 在这一起来看一下。 形式，这是我们见过的。 有形式。 有输入和其他几个人。 好吧，让我们做到这一点。 要回答维多利亚的 问题，让我先 只是确保每个人都 能够得到他们的招呼工作。 然后让我介绍 一对夫妇的其他想法。 然后，我们将让乡亲们解决 一些自己的问题。 然后，我们将真正回来 到窗体的这一概念， 我们实际上将重新实现 一起前端接口， 可以这么说，对于谷歌本身。 我们将使用谷歌作为后端，让 他们做的辛勤工作，搜索， 但我们会重新前端 谷歌和搜索表单 他们有自己的主页。 因此，我们会回来的 这些标签在短短的时刻。 

所以这是我 提出刚才。 我们可以程式化添加到 这种风格标签内页， 我们可以风格化背景 颜色，文本对齐， 无论是中心或左​​或右。 但很快你会 或者找一个网页设计师 会发现，这 变得有点笨拙， 因为你在做什么 所谓的混合内容 与呈现体。 你是混合数据 及其美学。 而事实上，如果考虑 有什么事情发生了时间 -  这是一个非常小 网页，当然。 但是，如果我添加内容到这个网页 我添加样式到这个页面， 页面很快得到 长和长。 再假设，我想 具有第二网页 全体这些属性。 假设我的第二个网页为我的 相关网站 - 也是，我想要的一切中心， 我也想要的一切 与绿色背景。 我几乎将不得不 复制和粘贴一些线路 成第二个文件，这感觉很好。 这将解决这个问题。 

但是，如果我想要什么第三页 或第30页或40页？ 现在我将要复制和 粘贴了大量的重复代码 在多个文件中。 所以假设 我决定还是有人告诉我， 哎，我们没有使用 绿色背景了。 我们将开始使用橙色。 你有什么改变？ 好吧，你必须改变这种风格 从绿色到橙色多少地方？ 像30或40位。 这是乏味的。 它们也容易出错。 有许多原因 在这里你不会想诱使 那种痛苦为自己的。 所以就不是很好 如果我们能够采取什么我只是 这两个黄色之间放 标签，这些标签的风格， 它因素出来，把我所有的 风格化到一个中央文件 所有30或40的我的其他文件 借用或以某种方式引用， 没有什么不同的网络 图我们以前在做什么？ 

所以，如果我去这里，我 要真正提出 我们更换 风格标签的东西 所谓的链接标签， 是可怕的，可怕的名字命名， 因为你不使用 链接标记创建什么 我们人类所知道的在Web页面的链接。 为此，您使用的标签？ 如何创建一个网页中的链接？ 听众：在A。 DAVID J. MALAN：在A，或锚 标签，在此之前去了迪斯尼。 这里的链接标签说 this--链接一个名为 styles.css的，在何种关系 将是，它是我的样式表。 因此，这是S在一 CSS--级联样式表。 风格sheet--两个的s中的CSS。 层叠样式表。 这也就意味着，哎，浏览器，访问 找到styles.css的本地服务器上 并把它作为你的样式表， 这意味着文件的内 将是所有的 我们刚刚完成的风格化。 还等什么该文件 可能看起来像就是这个。 我会只是做这是一个快速 例如，因为我们不需要 获得太多进入这里的杂草。 但是，如果我复制这个，就是我建议 是一个程序员创建一个新的文件， 粘贴这些lines-- 在这些线路whoops--粘贴， 保存为styles.css中，然后，在 另一个文件，删除了这一切 和替换它，而不是 此链接标记。 所以，如果我链接HREF =“styles.css的” 的关系应是“样式” 结束标记。 保存。 回到我的HelloWorld。 重新载入。 

从字面上看什么都没有发生。 这是一件好事，因为它 意味着它实际上是所有的工作。 为了证明之多，假设我做一个 错字，我称之为“Styles.css中” 用大写字母S，这是 不正确，然后重新装入。 现在，你可以看到它是行不通的。 现在，为什么？ 好吧，让我们用一个 从早期的技术。 让我继续前进，并在 我的浏览器，在Chrome中，我 将开辟特别 网络选项卡和以前一样， 让我重新加载页面。 你是什​​么人并不感到惊讶，现在看？ 或者，也许你很惊讶地看到它。 无论哪种方式，你怎么看现在？ 听众：[听不清] DAVID J. MALAN：它没有找到。 为什么没有发现？ 那么，Styles.css--资本 S--不存在。 我名不副实了。 简单的拼写错误。 但我现在越来越理解 404，因为服务器是在说，哎， 它没有找到。 从字面上看，我不知道 文件所在。 因此，作为结果，浏览器 告诉您什么是可以的， 页面的原始内容， 这是一个200时，HTML， 但程式化不能 在此后加。 这是什么通过级联的​​意思。 您可以排序的添加 之后，它的排序 细化网页的美观。 你甚至可以覆盖这些 样式还没有其他的样式表文件 如果你想。 它没有发现，虽然，在这种情况下， 因为，当然，我名不副实了。 所以，我必须先解决这个问题。 

因此，让我们继续前进， 提出以下建议。 让我们继续前进，并做到这一点。 或许与开始 您的HelloWorld文件， 让我只邀请一对夫妇 均设有建议。 所以，维多利亚，你想 做一些文字更大，对不对？ 好吧，所以我们可以 不要让文字变大。 我们会每拔断 只有一个问题要解决。 让文字变大。 我不会去打扰 我们在写这个 有子弹的技术就在这里。 所以一些问题。 因此，我们打算尝试 使文字更大。 好吧。 还有什么会有人求婚？ 我们还有什么可能想 在一个网页怎么办？ 让我们拿出一个 东西短名单 然后委托给 组摸不着头脑。 

听众：[听不清] 

DAVID J. MALAN：OK，位置文本 在页面的不同侧面？ 好吧。 别的东西。 

听众：[听不清] 戴维·马兰：是的。 因此，一个GIF只是一个 不同的文件格式。 我们只是用，有什么，一个 PNG或可能是一个JPG？ 我们使用的JPG。 如果你好奇，过度 回答你的问题 是JPG通常用于 照片，因为它支持 数以百万计的颜色或24位色。 一个GIF一般用于一样， 网络爆红这些days--动画， 像GIF动画。 但它发生在使用较小的色 调色板中，只有256种可能的颜色， 但它支持 透明度和动画。 然后还有PNG，它支持 透明度和更多的颜色 但不是动画。 所以这是一个折衷。 所以添加GIF，不过， 在功能上 相当于增加一个PNG或JPG格式。 是啊。 图片来源等于。 所以别的东西。 让我们拿出的东西， 我们送到维多利亚在这里做。 

听众：添加按钮的形式。 DAVID J. MALAN：OK。 因此，添加按钮的形式。 我们会做一个在一起。 所以这将是一个完美的SEGUE 之后这一挑战。 还要别的吗？ 你可能会喜欢做什么？ 该网站给人的感觉非常深刻印象 如果这是我们所能做的。 听众：更改文本的颜色。 DAVID J. MALAN：改变是什么？ 听众：文本的颜色。 DAVID J. MALAN：文本改变颜色。 好吧。 所以，让我们做到这一点。 只是再这样，你是没有，只是 死记硬背，做的正是我在做什么， 我要打开音乐 这里也许五分钟。 欢迎你使用谷歌。 欢迎你来问我，和 我会在你的耳边耳语了伏笔。 欢迎您看 在其他的肩上。 但是，仅仅解决这些问题之一。 但是，我们会做的最后一个， 形成一个，如果我们能一起。 所以，五分钟解决 这些问题中的任一项 使用谷歌，直觉，或任何 您可以使用其他手段。 

[音乐] 好吧。 如果你想无后顾之忧 保持修修补补， 但我会宠一对夫妇 这些答案。 所以从第一个建议 维多利亚是使文字更大。 因此，有几个方法可以做到这一点。 目前我已经恢复 我的屏幕上这个尺寸， 虽然我已经放大 人为刚才看到的东西。 让我们做到这一点。 让我继续前进，抢 一些通用的拉丁文本 只是让我们有一些工作。 所以给我的只是一个瞬间。 我会让三段。 好。 这将是一个更好的例子。 所以对于好奇，在 我hello.html的，我只是 粘贴3无厘头 拉丁段落 只是让我们有一些文字的工作。 和维多利亚的目标是 做一些文字做大。 所以，我可以像以前一样，在这里犹豫。 让我做了正确的方式。 我将有一个链接 标记，指向文件 所谓“styles.css的”的关系 其中又是“样式”。 然后，我要保存 并开辟这个“styles.css的。” 

所以，像以前一样，我有 才能在这CSS文件 实际上覆盖默认 网页的美学， 和默认美学， 当然，是相当平淡。 这有点正常的字体大小，黑色 文字，白色背景，等等。 因此，假设我要打 这一切的文字更大。 我可以做一些事情。 在我styles.css的文件，我 可以说，你知道吗， 适用于以下内容 身体我的网页。 来吧，让 字体大小24点， 这是一个数字我可能 在Microsoft Word中使用。 让我回到我的网站 这里是页和重装， 你可以看到， 它已经大得多。 而且，我们可以得到一个有点疯狂， 就像我们可以在desktop-- 让96分。 重新载入。 而且它变得有点 笨重在这点。 

但我可能是有点更精确。 相反，应用此的 样式表到我的页面的主体， 还有什么会我把它应用到相反， 还有什么其他的标签可能仍然 以同样的方式的功能？ 

听众：p标签？ DAVID J. MALAN：P标记。 这样的头部将不会 正确的，因为头部， 你不能真正 控制的美观。 有两种文本有或没有。 但是，在p tag--我可以在一个小跳水 更深层次的，可以这么说，段落 标签。 而且即使有三种， 这是完全正常的，因为在CSS， 我只是说“P”，这 是指应用以下 要匹配这个任何标记 选择器，选择器刚 作为标记的名称。 所以，无论你看到一个 “P”，应用的字体大小， 让我们使它更 合理again-- 24点。 你知道吗， 只是良好的措施， 让我们的颜色 红只是一瞬间。 现在，如果我重装，现在我们 看到三丑段落。 

但现在假设我是那种 of--我想第一段 在用户跳出。 我不想只是增加 一切的字体大小。 所以，其实我是想找出或 这些段落进行区分。 因此，让我们摆脱了红， 因为这只是样的俗气， 让我们继续前进，使 字体大小12点在默认情况下， 让我们回来的东西 多了几分合理性。 而现在我只是想增加 第一段的字体大小。 我可以在几做到这一点 方法，但这是一种方式 也许最教学在 时刻做到以下几点。 让我继续说，这 段有一个唯一的ID“第一”。 我可以把这个事情我想要的。 我可以称之为“富” 或任何其他的话， 但我要去给它一些 语义上有意义的名字 像“第一”。 这是唯一的标识符， 的ID，我的第一个段落。 

我现在可以做我的样式表 是有点更精确。 与其说，适用 下面的p标签， 我可以说的following-- 应用下面， 或选择，HTML元素 具有的一个独特的ID“第一”。 我怎么想申请呢？ 24点的字体大小。 所以，我有两个选择现在。 一个使所有的 第12点。 但是这一次，特别是因为它涉及 second--说到最后在file-- 这有一个连锁效应。 我只是做了我所有的 段落标记12点， 但是这个现在瀑布和 将覆盖任何元素 在该页面，在其页面中的任何标记 独有的ID​​是报价引文结束“第一”。 在这方面包括hashtag 只是意味着“唯一标识符”。 我不把它放在HTML文件。 我，在这里，只说 报价引文结束“第一”。 

因此，让我重装。 现在我看啊，OK。 我的意思是，它不是 漂亮，但它是一种 像序文到 本书或类似的东西， 其中第一款是更大的。 可以用更加精确 只是第一个字母，但至少 我已经行使更多的控制。 现在maybe--也许我想这样做 偶尔会因为种种原因， 所以我不希望这 适用于只有一个HTML标签。 相反，让我们say--让我们 也可以在下面。 CLASS =“进口”。 而一个ID用于唯一 确定一件事，一个标签， 在网页中，一个类，就是要 在任意数量的元素或标记的使用 在您的网页。 所以它的可重复使用的。 一个ID是不能重复使用。 一类是可重用的。 

你知道吗，不管是什么 哲学reasons-- 我没有完成我的 以为 - 我要说 该第一段和 第二段是很重要的。 所以我打算申请调用的类 “重要”，如果我救我的文件 并重新加载，无 功能影响呢。 不过，我已经添加了一些 元数据文件， 诸如此类的东西分开 从该文件的核心数据， 所以，现在在我的样式表，如果我 而不是说“。重要” - 要知道， 什么这很重要，我 将会使字体颜色，red-- 或者更确切地说，不是字体颜色，只是颜色。 有不一致之处 在CSS中不幸。 并重新加载。 现在注意到的第一件 两个段落是红色的 而第三个，因为我只 应用之类的“重要” 前两个的那些东西。 

所以在IDS中，你有能力 指定非常精确。 带班，你可重用性。 但在这两种情况下，请注意 那种良好的设计原则 在这里我分解出来的所有的 美学我styles.css的文件。 所以，这里没有杂乱。 有没有红色提及或 在这个文件中大胆面向或字体大小。 而我有语义， 有意义的特点我数据， 这里是一些重要的数据。 这里是一些更重要的数据。 此外，这里是 “第一次”我的重要数据。 因此，HTML是所有关于排序 的标签，从字面上看，字 和段落结构在 这些小提示页面，如果你 愿意，你可以 不知何故利用使用 其它技术，如在这种方式的CSS。 

所以在回答维多利亚的问题， 我们可以使文本的那样大。 有这么多其他的方法，但 字体tag--开括号“字体” -  其实是几年前。 而这就是问题所在， 也与只依靠 在线resources-- 他们往往是过时的。 事实上，这是被弃用， 因为世界上实现， 是什么“FONT-SIZE = 7”是什么意思？ 它没有。 等多年，并 此day--侧之一 这里指出的是，它实际上是 令人难以置信的痛苦，有时还 开发对站点 网络，因为微软 和谷歌和Mozilla和 别人不同意往往对如何 解释如HTML规范。 

有HTML的规则手册说 一般所说的每一个标签的意思。 但有时它留下来的 执行的自由裁量权， 微软的自由裁量权和谷歌。 所以你会经常 看到一个网站的东西 看起来在PC上不同 比它在Mac上， 这就是真正的原因， 在一天结束时， 他们没有测试 以及在这两个平台。 但它也因为合理的， 聪明的人会不同意 和公司会不同意，等 编程的挑战之一 针对网络或设计 东西网路 是写你的网站的方式 的作品在每一个网页浏览器。 但是，即使这是不合理的，对不对？ 有这么多这么多版本 浏览器在那里，在某些时候， 你还必须作出判断电话 你必须决定作为一个公司， 尤其是电子商务式 在这里你的网站 尝试使用最新和最伟大 技术给一个很好的用户 经验。 但是，你的用户的一些百分比可能 仍然在使用Internet Explorer 6或7 或8，尤其是取决于 国家，他们来自。 

所以非常普遍 征询的东西 像“网络浏览器的统计数据。” 而如果我们中场休息让我们来看看维基百科 看看如何了最新的这张图 如果有一个。 所以在这里你可以看到 其中，实际的浏览器 是，根据2015年12月， 根据美国政府。 Chrome是在42％的市场份额，其次 通过IE浏览器主要是在企业设置 或PC设置，当然， 其次是火狐， 那么Safari浏览器，然后歌剧院没 使地图这里出于某种原因， 然后其他人。 也许这是在其他。 但更重要的问题is-- 让我们来看看维基百科也有 浏览器版本version-- 

让我们去到浏览器的统计数据。 IE浏览器。 甚至这还不够。 浏览器统计数据。 我的版本。 这不会是正确的。 让我们来看看版本。 浏览器市场份额。 让我们来看看这来了。 好。 这是现在越来越 一点更加有用。 所以在这里，请注意，我们都 不同版本的浏览器。 而且，我的上帝，如果你look--铬 48，铬47，铬31，铬45。 我的意思是，越来越多的浏览器更新， 有时某些更改 在显著 功能方面。 因此在某些时候，该 产品经理或工程师 需要进行decision--你 知道吗，世界上只有1％ 仍在使用IE 7。 与他们的地狱。 我们只是不打算 支持该浏览器。 什么意思不支持？ 这可能意味着，按钮 不要你的网页上工作， 或者它可能意味着 格式是完全关闭。 或者你可能不得不做出 同样的判断调用 移动这些天，在这里，我们 不会支持iOS 5了。 因此，人们只需要升级。 或者，我们不会支持蛋糕 在Android操作系统的Andr​​oid设备， 因为随着天下 - 作为 高科技世界需要向前推进， 它种要拖 世界与它，使他们不 要继续 向下兼容所以他们 可以提供新的和好的特点。 这确实是原因之一 为什么这么多的公司正在推出 自动更新和排序迫使 软件对我们的最新版本。 甚至有企业 像苹果将整理的 强迫你几乎强令 你在市场力量方面 新买的手机，因为他们只是 不会再更新您的旧手机。 所以，你错过了 最新，最大的特点， 因为它是昂贵的它们作为一个 公司保持旧的，按理说 劣质版本的软件。 但净效果是 我们也遭受这一点。 

因此，让我们来看看刚 一对夫妇的最后的东西在这里。 让我们敲断实快一些 其他子弹，如果好奇。 所以，如果你想， 例如，位置 在不同侧面的文字 页面，我打算做一快捷方式， 但有不同的 这样做的方法。 让我继续前进，eliminate-- 简化如下。 让我回到我的 简单，简单的段落。 让我回到我的styles.css的。 而我只是将使用simple-- 你可能已经看到在谷歌 或者回忆先前已经 文本右对齐。 然后刷新页面。 现在，一切似乎 是右对齐， 因为你可能在开销在这里看到。 

我们可以使它看起来多了几分 书状，我们可以说“辩解” 并重新加载。 现在是很好的和两个广场 两侧，这是一种不错的。 我们在这里有另一个目标 是文字的改变颜色。 因此，我们看到，与我的红色文字。 现在添加按钮的形式。 那么，我们为什么不尝试做正是这一点？ 但是，首先让我去一个网站， 我们大多数人每天使用谷歌day--。 让我们来看看 谷歌如何实际工作。 但我会做到这一点。 首先让我来做in--是的， 让我去谷歌第一。 我将不得不去 到谷歌设置， 因为我想禁用 一些所谓的立竿见影的效果。 

所以，你可能会在已经注意到 谷歌这些days--让我回去 并把这个上。 所以，如果我开始搜索 对于“猫”这样， 注意到，不仅做到 我得到自动完成向上 顶，一下子，页面本身 似乎很快改变为好， 这就是谷歌使用的语言 JavaScript调用尝试是有益的。 但不幸的是，它种 的食堂了我们的讨论 什么实际发生 这里的引擎盖下面。 所以，我只是那种迅速 关闭立竿见影的效果。 而且我要点击保存。 现在我要去开 该诊断工具栏，我 保持网络选项卡下开幕。 因此，让我们做到这一点。 让我 -  whoops-- 这个滚动了一点。 让我搜索“猫”。 

而现在notice--实际上， 这是一个很好的机会 一会儿讨论。 请注意，那一刻我类型 - 停止它。 停下来。 好。 请注意，那一刻我键入字母 C，看屏幕的底部。 A- T- S.什么底部 这个画面，我的网络选项卡， 建议正在发生各 一次，我键入字母？ 不幸的是，青蛙很 今天分心或三叶草 或不管他是。 什么是每次我打的时间发生了什么？ 让我清除 缓冲区并再次键入它。 So--哎呦。 我每次键入一个字母，C- A- T-- 所以新行显然继续出现。 什么是每个那些行的代表， 基于我们所看到的和讨论 迄今？ 听众：搜索？ DAVID J. MALAN：搜索，或 更一般地，一个HTTP请求 从我的浏览器到服务器。 那么，为什么我的浏览器发送HTTP 要求我每次键入一个字母？ 

听众：[听不清] 戴维·马兰：是的，它给 我这些自动完成的结果。 等等，其中做这些 搜索结果从何而来？ 好吧，我每次键入 信中，谷歌发送更多 而且越来越多的 我打字的话。 为什么？ 因为他们想给我一个 好，更好的建议， 建议列表，为了什么字 我想真正完成。 因此，这是从字面上说，每 字符键入到谷歌 被发送，并最终在 散装，而且有时候一个人 在为了实现时间 这些自动完成功能时 该数据是，当然，在网络上。 

现在，让我们来看看究竟是什么 当我点击谷歌搜索发生。 然后，我们将利用这个自己。 所以，如果我现在向下滚动到非常 刚刚发生的第一次请求。 请注意以下内容。 它被送到一个相当长的URL-- https://www.google.com/search？ 然后一大堆东西。 现在，让我们真切地看到这 在浏览器选项卡本身。 让我们摆脱工具栏的位置。 下面是搜索结果的页面。 并注意这里的URL。 现在，你可能已经猜到 这是怎么回事的部分。 所以首先，定义。 这显然​​是目标 其中，提交表单。 所以，当我在输入 词“猫”并按下回车键， 显然谷歌发送 我的文字输入到该网址 我已经强调 还有，斜线搜索。 事实证明，在一个URL，任何 之后发生的一个问号是， 正如我们一直在说，一个键值对 被输入到表格或以某种方式 从发送的 浏览器到服务器。 

所以，任何时候你输入型 到Web上的表单 并且我们将它的发送 一直在讨论，通过GET， 这些虚拟之一 信封，内容 那envelope--是，保持 得到身体酿 入类信封 今天，但技术 它实际上是放在URL。 所以，事实上，让我通过这个筛选。 你在哪里看到用户输入？ 你在哪里看到的东西 我自己输入了吗？ 是啊，所以“猫”。 对？ 因此，让我这个提炼 成简单的东西。 我要删除有关的一切 这个网址我不明白， 而我只是要离开 它作为this-- /搜索？Q =猫。 我们会看到其中q 来自于一个时刻， 但感觉就像最低 我提供的信息量。 而现在我要敲回车。 并注意它仍然有效。 我们还是拿回一大堆猫。 因此，谷歌是票友 比这这些天。 这是2016年，1999年没有。 因此，有其他的东西，我的 浏览器发送到服务器。 但是，这是最低限度 所有的必要。 

发生什么了？ 那么，首先让我去前进，去 回到Cloud9，让我继续前进 并关闭我的标签前面。 我会做我的 自己只是片刻。 我要继续前进 并创建新的文件。 而且我打算把它保存为google.html您。 而且我会很quickly-- 我要偷，其实， 有些这段文字只是为了节省时间。 我要粘贴在了这里。 我不会跟打扰 任何程式化这个时候。 我们要称之为“我的谷歌。” 而且我要摆脱 在体内的一切。 而且我要做到以下几点。 让我放大]。 形成action--和我简要地提到 先前已经whoops--我简要 如前所述，一个动作 形式是，将数据发送到。 所以google.com/search。 和方法我想使用 可能是两件事情之一。 它可以是“得”，作为我们不断 讨论，也可以是“后”。 现在，根本 不同的是，如果你使用“获得” 所有的信息 用户提供的URL被发送。 

这是伟大的东西像搜索 发动机和一些其他的应用， 但在什么情况下会 你不想填写表格 并具备信息落得 URL，就像在浏览器的地址栏？ 什么样的形式做你 -  听众：[听不清] 戴维·马兰：是的，像什么？ 听众：密码。 戴维·马兰：是啊，所以你登录 到Facebook或某些网站。 这是一个从用户输入 一种形式，一个文本框， 但你可能不希望它 显示了在浏览器的URL。 为什么？ 我的意思是，也许有一些 在网络上的安全隐患， 但缓慢 - 喜欢，更简单地说，如果有什么 你的室友，你的显著等， 你的孩子，你的配偶看起来 通过您的浏览器历史记录？ 还有就是你的密码正确 有在浏览器的历史记录。 这并不觉得自己是最好的设计。 甚至更多技术上， 假设你想 上传照片到Flickr 或Facebook或wherever-- 即用户输入，即使 这是一个有点interesting--如何 我挤在地址栏的形象呢？ 你有种那种不能。 你有种就可以。 不过，说真的，我是捉襟见肘 想象这样做。 所以，我需要另一种方法 上传照片到网站， 和其它方法被称为“后”。 但现在，我们只说说 “获取”，这是两者的简单。 它只是把所有的 用户输入的URL。 

因此，这里是我创建的形式。 我想要的输入。 你知道吗？ 我要在这里采取了猜测。 我要我的回忆 输入“Q”的“查询”。 我认为这是一个 原创设计，也许，从1999年。 然后该输入的类型 只是将是“文字”。 然后，我将有另一个输入 这并不需要一个名字，因为我们很快就会 看，它的类型是“提交”。 而这将 给我一个特殊的按钮。 就是这样。 

因此，让我继续前进，保存此文件。 我要回到我的 浏览器并转到google.html您。 输入。 而且它是一种疏 至少可以说。 但让我先走 并搜索“猫”。 并注意我目前 在这个Cloud9 URL。 但此刻我点击这个， 你在哪里希望我将结束？ 

听众：谷歌。 

DAVID J. MALAN：谷歌。 因此，让我们点击提交。 事实上我已经重新实现谷歌。 对？ 这是简单的。 它更轻。 我的意思是，我的代码显然要比好 他们从混乱我们前面看到的。 你知道吗？ 我要这个香料一点点。 我没有提到这点。 有标签，如H1，标题1， 在一个页面的最重要的项。 “我的谷歌，”我会叫这个。 让我重装。 它看起来好一点了。 而且，事实上，你知道吗？ 我已经already--我撒谎了。 我说我不会去的风格这一点， 但我要的作风，像以前一样。 而我的身体将是， 让我们说，文本对齐中心。 它看起来更像是谷歌了。 

我需要一个换行符，不过， 对于提交按钮。 而事实证明，你 可以使用段落， 或者你可以更从字面上只是说， 给我一个换行符这里 - 的br标签。 如果我重新加载此，现在去那里。 这是一个有点难看，所以我 可以做多换行， 但让我们不要太贪这里。 所以，现在让我们来看看它是否适用于“狗”。 这似乎为“狗”，正常工作。 所以，这里有什么令人信服的外卖？ One--是不是一个巨大的飞跃， 介绍几个更多的标签， 像输入标签的形式标记。 但更重要 是，我们所做的 正在利用我们的理解 HTTP和事实的 形成最终改变 什么是浏览器的URL， 等等，因此，我们可以 机械地提供输入到一个服务器 通过HTML表单和了解 服务器理解的HTTP， 就像我们的身体的理解一样， 摇我的手，同样的协议， 等我们回到响应 我们期待最终。 

因此，让我们试着做一 最后一件事，现在移动， 我会make--我来补充 此代码的幻灯片。 所以，如果你想鼓捣，你 当然可以把它从那里。 但我要去 进取，做一件事。 我要继续前进， 打开我的索引page-- 我招呼页面之前，这 有很多这样的仿拉丁文字， 或无意义的拉丁文字和has-- 它看起来像这样在这个字体大小。 但让我继续前进，做到这一点。 我要进入​​Cloud9。 而你没有做到这一步。 我只是做我自己。 我要单击共享。 这是一个功能 只是Cloud9，其中 我可以让我的环境公开。 

和公正的缘故 演示，让我这样做。 我打算让我的应用程序公开。 注意它的警告我，我 我相信，我想这样做， 因为这会令所有人 在世界上，无论他们现在在这里 或更高版本观看录像上 互联网能够看到我所看到的。 但是，这是确定。 我会说：“完成”。 让我鼓励你，如果我这样做 这correctly--让我先对它进行测试。 来吧，如果你不mind-- 在您的计算机上的浏览器， 去这个网址，并希望 你会看到我的拉丁文字。 并且要清楚，这是 在我的笔记本电脑上运行没有。 这是在云中。 这是对Cloud9，从字面上看，但 我做了我的工作区公开 使任何人在互联网上 可以访问我的拉丁主页。 

转到同一URL上 您的手机，如果你能。 如果它会花费你，但是，你 可以只查看一个肩膀。 听众：[听不清] DAVID J. MALAN：对不起？ 听众：[听不清] DAVID J. MALAN：只是拉丁词。 就这样。 但是，这是你应该看到的。 

听众：是的。 戴维·马兰：是的。 是啊。 好。 所以，我可以抱你 手机只是一瞬间？ 所以，我希望，如果你访问 它，它看起来几乎无法读取。 这是我still--意思是，这是 不可读，因为拉丁语的。 但它也是不可读 其他什么原因？ 喜欢，有什么不高兴你这个？ 听众：这是小的。 DAVID J. MALAN：这是超级，超级小。 所以，我们怎么能解决这个问题？ 这是超级，超级小 在维多利亚的电话 并且，如果你拉 它自己，可能 小您的手机上，除非你 启用辅助功能设置。 那是什么？ 你可以只捏和 变焦，这是可行的， 但你只能看到 同时几句话。 所以等一下。 我知道如何解决这个问题。 对？ 我可以使用CSS，我可以改变 字体大小从12点到24点。 但是，该副作用， 当然，现在想要是， 台式机或笔记本电脑上， 现在文字的两倍大。 所以它会有种很好 设备之间进行区分， 它原来有 是这样做的方法。 有几个 不同的方法，事实上， 即使用CSS和票友功能 我们不会进入的很详细， 你基本上可以查询 浏览器，并说， 如果你的屏幕比这个更小 许多像素，使用的字体大小。 如果你的屏幕比这个更大 许多像素，使用其他字体大小。 

你可以更炫动。 如果你曾经访问过 网页，在桌面上， 有一个很大的菜单可能关闭的 侧，然后将所有的内容 是的那侧menu-- 这是一种常见的范例。 菜单在左边，内容 右，反之亦然。 无法在移动真正的工作，当你 屏幕只有这么多像素宽。 因此，比较常见的移动是， 你的菜单会突然得到 崩溃了，你必须 点击一个按钮，看看吧， 或网站将会把菜单 它上面并把它下面的内容。 并且可以实现这些 事情以多种方式了。 你可以问你的程序员， 哎，队伍，随时 你看从Android的HTTP请求 装置，微软装置，谷歌 设备，一台苹果设备，使用此 字体大小和使用这个菜单布局， 或者使用此默认更大的布局。 

现在，使用的是什么 今天基本技术 可以在工程师使用 要知道无论是 一个iPhone，Android手机，一台笔记本电脑， 桌面访问公司服务器？ 其中，而他们得到这些信息？ 

听众：页眉？ 

戴维·马兰：是的，HTTP头。 所以每一个HTTP请求从哪里来 他们的客户他们的服务器 包括内部的虚拟 信封，一大堆 HTTP报头的，其中一个是 浏览器和操作系统 甚至，如果你愿意 该级别的细节。 现在，它是一个神秘的前瞻性的字符串，但 存在软件将只 简化了，你可以问问 编程代码 -  PHP，JAVA，C ++， whatever--什么手机是this-- 什么设备是该用户使用？ 然后，你可以说，告诉他们这 该网站的版本，如果它是一个手机。 告诉他们这个版本的 如果它是一个网站的笔记本电脑或台式机。 但是，你甚至不需要 服务器端的复杂性。 你可以做事情，甚至最简单的。 

我要做到这一点。 我要继续前进进入 我Cloud9环境， 我要去添加一个标签 您在谷歌之前看到的。 这就是所谓的元标记。 我从来不记得这一个，所以 我要在这里抄写它。 META NAME =“视口”，然后 内容=“WIDTH =设备宽度，intital 规模= 1“，仅此而已。 

因此，它很可能会成为 就像一个神奇的咒语。 这还不是全部清楚，但这 是与视口， 并且视口的公正身体 网页，所述矩形区域 定义页面的大部分。 而这仅仅是告诉 浏览器，你知道吗？ 使该网页的宽度 有效等于器件的宽度。 换句话说，不要以为 你有排序的无限空间。 假设你只有尽可能多 空间作为装置本身大。 所以现在，如果我重新加载此 在我的浏览器，我看没有变化。 但是，如果我这样做correctly--和 让我过我的fingers--如果所有 重装你的手机，你 看到一个引人注目的变化？ 是啊，是that-- 

听众：[听不清] 戴维·马兰：是的。 好。 所以才更易读现在呢？ 还小，是公平的，但不 如此的渺小，以难以管理。 我当然可以覆盖此 进一步与CSS或在服务器端， 但越来越多的你在做什么 看到的是越来越多的功能 被添加到 客户端environments-- JavaScript的，因为我们将讨论 明天，CSS和HTML--等等 所有这些查询 可以在客户端上完成 这样打扰 服务器少了很多，而不是 以有跟上，为 例如，不断猛攻 新操作系统的 版本，新版本的浏览器。 你可以让浏览器 问设备，有多大你， 然后进行逻辑有点 基于该决定。 但我们会看到更多的机会 逻辑的决定 明天的背景下， 的编程语言。 

因此，任何问题的话， 关于Web开发？ 今天不是网络编程，每 SE，因为大多数的一切，我们做了 很唯美，如果你愿意。 没有决策权 我们写的代码， 所以这就是为什么HTML是一种标记 语言，而​​不是一种编程语言。 但明天我们会采取 咋一看，最终， 在JavaScript中，这是 一个实际的编程 语言，让我们多做一点。 

任何问题？ 好吧，让我提出了两个 机遇可选的功课。 其中is--这些Cloud9 帐户不会过期。 欢迎您使用 他们鼓捣。 这是服务的自由程度。 认识到，如果在创建时 您的工作区，你做公开， 这确实意味着对任何人 互联网可以看到你输入的内容。 因此，也许只考虑 不为难自己 如果你把你的第一个网页 在那里公开网页意外， 但没有人会 知道反正那里寻找。 

而two--让我折腾 了这个网址为好， 特别是如果你来到今天 小比别人不太舒服， 不确定什么是所有这些东西的意思。 要知道，更这段视频的， 这既是入睡的好方法 也笑，同时 这样做，也有 很多societally有趣的 与安全相关的讨论 其中从约翰·奥利弗， 虽然是一个喜剧演员。 

但是，如果没有其他问题， 这给我们带来了招待会。 那么，为什么我打开音乐。 应该有饮料 和小吃外。 我很高兴打成一片的作为 只要人们愿意， 回答问题更一对之一。 但是，否则，欢迎您 在任何时候起飞， 我们将再次见到你 明天早上多一点。 好，谢谢。