>> 道格·劳埃德：所以我们花了 about--如果我的数学是正确的，
我认为看back--我想 我们花了大约35视频聊天
关于C的各个方面，也许 多一点，也许少一些。
而且，我们也没有覆盖 一切都在C，但我们
涵盖的一大块 语言，它的绝大多数，
肯定是常见的用途。
现在我们要谈 关于另一种语言，HTML。
而且我们要覆盖 它只是一个视频。
>> 但是，这将是确定。
这是怎么回事真正成为 东西你要用来获取。
现在，你有 一个语言基础，
它实际上是很容易 开始学习别人。
因此，我们要开始 步骤一点点回来
和粉饰基本 这些语言之间的差异
和那种不打扰您了。
有很多真正伟大的 在互联网上资源，
我们将开始指导你 对因为互联网
信息的巨大的资源库。
所以它不是像你会 是必然失去了
由不具有信息 涵盖的视频。
你仍然可以得到 你需要的一切和使用
你已经过知识 建立了通过了解Ç
做这些的学习曲线 其他语言其实很多平坦。
我承诺。
>> 但是，让我们来谈谈一种语言 这对每一个网站真正的基础
页面，这是HTML。
HTML是超文本标记语言。
HTML是一种语言，但它是 不是一种编程语言。
>> HTML没有变量。
它不具有逻辑或 功能之类的东西。
我们不能做任何 在HTML编程本身。
有时你会听到 人们形容自己
为HTML编程，这 不完全准确。
我们不能写HTML程序。
>> HTML只是用来标记文本。
这就是所谓的标记语言。
而这是什么does--这个markup-- 我们使用标签在HTML和这些tags--
这markup--语义 定义了页面的结构
并且使得纯文本 之间存在的标记来解释
通过以不同的方式浏览器。
也许这是最好的解释 此通过举例说明的方式。
>> 这里是一个非常简单的HTML页面，而不是 一个HTML程序，再次，一个HTML页面。
我们知道这是一个 HTML页面，因为我们已经
界一切与HTML标签。
因此，这是一个HTML标签的模样。
它的尖括号之间。
同时注意，在我们上方 HTML和在最底层，
我们已经做了之后是什么 显然很多其他的HTML，
我们有尖括号斜线HTML。
所以排序是这样的边界 区别什么是HTML的，哪些不是。
当然，传统上，只 当你写的所有的C程序
与点C扩展， 所有的HTML文件
将结束与圆点的HTML扩展。
但还有更多的事情在这里。
我们不只是这些HTML标签。
我们显然有这 东西叫做头标记。
嗯，好吧，那是什么？
>> 嗯，也许这是最好的 由主体的方式区分，
体作为网页的内容。
所以，也许head标签定义的东西 这不是在浏览器窗口恰当，
但以某种方式很重要我们 网页被渲染正确。
例如，内部的 head标签，我们有标题标签。
>> 所以，标题为hello世界， 这实际上将是什么
显示在Chrome浏览器中的标签 或者Safari或Firefox--
无论浏览器，您prefer--那 什么会出现在标题。
而标签之前它会显示 在您的整个浏览器窗口
你只能有一个页面 在一次浏览器窗口中打开。
所以这将是 我的网页在选项卡标题
或浏览器窗口吧，你好世界。
和则内容我 网页将成为世界，你好。
因此，让我们来看看什么样的一些 像这样的事情可能看起来像。
这是一个非常简单的HTML页面。
所以，我在这里我CS50 IDE和 我放大一点点。
而我只是要 开拓你好点HTML
并告诉你，这是相当多 我们以前看到的网页内容。
我简单的HTML，head标签， 标题标签，身体等。
我已经缩进是干净的。
>> 然后，我可以做我的 IDE只是预览页面。
还有，我们走了。
我的网页的内容是世界的， 你好，我看不到任何东西
在从头部标签那里。
它的主体的刚的内容。
世界，你好。
又一次身体刚 说，世界，你好。
另一部分缺失。
>> 所以，这一切真的是。
这是一个非常简单的基本的HTML页面。
现在，我已经缩进我的HTML 是非常好的，组织，
但我实际上并不需要。
我可以使它看起来很丑陋。
而这将仍然工作。
这将是完全相同的网页。
我刚刚摆脱了 所有的白色空间。
>> 事实证明，白色的空间数据。
所以，当我们发送数据 发送端到接收端，从服务器
到客户端，数据的成本钱。
所以，摆脱空白 实际上是一个好主意
如果你是人谁提供 了大量的网络内容。
这是一个坏主意，如果你是 人谁是学习这些东西
你想拥有 它很好地组织。
这是一个更容易比这个来解析。
但它的功能相同。
>> 缩进之类的东西 实际上并不重要的HTML。
所有的事情就是打开的标签和 结束标记以正确的顺序。
请注意，这里发生了什么，虽然。
该标记为我们提供了一种方法， 传达额外信息
关于我们所编写的。
你好，世界部分是 解释为标题。
与世界，你好部分是 解释为内容
或者应该是什么 可见在我的网页。
>> 有超过这些不同的百 标签和很多伟大的资源
在网上找到他们。
我们要说说 在这段视频中几个人，有的
的真正根本的东西。
但我们不打算谈 这一切，因为它
将是详尽这样做。
>> 另一件事可以做，不过， 是开放的开发工具。
如果你回想一下 我们的视频HTTP，
我解释了如何打开 了开发者工具。
在Chrome中它通常是F12键 打开开发人员工具栏中。
那么而不是选择网络 选项​​卡，你可以选择的元素选项卡。
如果你加载一个网页 页面，你会真正
看到创建网页的HTML。
所以你可以学到很多关于HTML 通过查看您喜爱的网站
并看到他们是如何打造的 各条他们，你喜欢。
因此，也许有这个很酷 图案或类似的东西。
他们如何使用HTML做呢？
那么你可以打开你的开发者 工具和悬停在该元素
看看到底是什么HTML使得它。
所以这是一个非常 学习HTML的好办法，
我强烈建议 你这样做既可以学习HTML
并且还学会了一点 一些选项位
在提供给您 开发工具，
肯定会派上用场 你开始做更深入的网络
编程。
>> 因此，让我们来看看一个 夫妇普通的HTML标签。
我们会跳，看看 什么这些标签也将呈现
如通过查看我的IDE的一些文件。
因此，这里有三个非常基本的标签 调整文本的视觉外观。
有'S B标签，我的标签，和U标签。
分别是什么，他们做的是 使它们之间的文本加粗，
斜体，下划线和。
因此，让我们看看这看起来 像我的IDE实际的网页上。
>> 所以，在这里我的IDE我有一个 文件名为​​BIU点HTML。
BIU点HTML摆明 粗体，斜体，下划线。
我会打开它。
>> 我们会看到，在这里我 有这样的文字为B标记大胆。
本文是我的标签斜体。
而本文为U标签下划线。
这是什么将会是什么样的？
好了，我的一切 要做的就是在这里走了过来
到我的浏览器，我的文件浏览器，点击 预览，这是会发生什么吧。
>> 在B之间的文本 标签确实是现在大胆。
在I之间的文本 标签确实是现在斜体。
而在U之间的文本 标签确实是现在强调。
所以，这是相当不错的。
现在，我们知道如何使文本 看起来多了几分花哨
或绘制强调某些事情。
另一对夫妇共同的标签这里 段落标签，P和标题标签，
我在这里呈现为HX。
>> 这些P标签中，这些段落标记， 打破你的文字成几段。
这是不够的，只是 按Enter键并留下空间，
因为一个计算机只会 做你告诉它做
而忽略白 空间的大部分。
因此，我们不能只打回车 并希望我们的电脑
解释，我们希望 开始一个新的段落。
我们必须非常明确地说，这 是paragraph--这是another--
通过在集合P标记封闭每个。
>> 而且我们也有这些选择 用于h标签，这些标题标签。
我们有六个不同级别 标头，一，二，三，
四，五，和六个，这是 逐渐变大的，以及较大
头。
他们变得越来越小， 更小和越来越小。
因此，我们有一个顶层的头，一个第二 级别标题，等等，等等。
>> 让我们来看看，也许一些 p标签和一些标题标签
在网页上的动作。
所以，在这里我的IDE我有一个名为 PH点HTML，PH值是段落
和标题标签。
打开了。
有很多事情在这里 因为我已经把一些LOREM
存有，这里有的只是随机文本。
因此，我将缩小一点点 因为有这么多的事情。
但是请注意，我在很 顶部这里我有一个H1的水平之一，
头标记。
然后，我有一个段落，这只是 一串随机text-- LOREM ipsum--
只是默认的标准填写文本。
所以，我有那里面的两个段落 一级标题，然后向下跌破我
有一个二级标题在这里24行， 第二级别标题，和另外两个
段落。
那么，这是什么样子 如果我在预览中查看它？
让我们来看看。
>> 这样会注意到 这里第一层报头
还算是有点大 比第二电平头。
因此，我们使用H1标签。
并注意p标签可以让我们 打破东西伸到段落。
如果我们已经摆脱了这些p标签的 实际上只是把进入或退货
在我们所希望的会 是不同的段落，
他们都只是踩住在一起， 那就没有这个漂亮的段落
分离空间的上方和下方。
所以这就是款 标签和标题标签
通常用来做绘制 关注我们的网页的部分
以这种方式。
>> 接下来是我们使用一些标签 建立在我们的网页列表。
因此，我们必须无序 lists-- ULs--这只是
项目符号列表，有序 指的是一般numbered--
OLs--和内任一 其中的一个，我们需要有
套如何指示列表项，李。
因此，我们有开放的UL标签 我们把项目里面它。
然后，当我们与完成 这一点，我们可以关闭UL标记。
>> 并且类似地，我们可以有 有序或编号列表
放列表项的里面。
因此，让我们一起来看看 在几列
并且他们会 呈现为对CS50 IDE。
所以，我在这里我的IDE中 文件调用列表点HTML。
让我们一起来看看。
>> 在这里，通知我有一个无序 列出与五样东西在里面。
然后，我有一个有序的列表， 我已经改变了标签一点点，
对？
我说的开始等于六人。
原来，有一个有序列表我 可以设置起点的地方
我want--默认情况下，这将是埃德蒙顿 只需添加这个所谓的属性
我的OL标签。
所以，这个列表 启动六计数。
该编号列表，这样的元素 应该是六，七，八，九，十，
因为有五个要素 在列表中，而不是一个，
二，三，四，五，其中 是，如果我说了OL的情况下
没有指定起始属性。
>> 所以，我们只能预览此这样你就可以 从某种意义上什么是怎么回事。
还有，我们走了。
还有我的名单。
前五个要素 无序或项目符号列表。
而接下来的五个要素 是一个独立的有序列表
从六个开始。
所以这就是我们如何能够 建立使用HTML列表。
另一件事你可能 想与HTML
在建的表 行和列的信息
在一个演示信息 特别是有组织的方式。
要做到这一点与HTML，我们可以有一个 表定义开始开括号
表。
然后在那个表我们 可能有一组行，TR标签
以指示每一行。
然后TD标签去TR标签内 指定的行中的列。
>> 为什么叫TD，而不是TC？
那么，TD代表表中的数据。
通常你把 您的信息在那里。
所以这就是为什么它是TD，而不是TC。
这是一个有点混乱。
>> 所以，你有table标签和 你的表标签内
你有一个行数，红素的。
而每行内有 TDS为列数
你想拥有 在该特定行。
让我们来看看一个非常 简单表了在CS50的IDE。
>> 所以，我这里有一个文件 所谓表点的HTML。
让我们一起来看看 是什么样子。
有很多事情在这里，但 如果你发现我有一个表打开。
我开始与表的定义。
然后在我的第一排我明显 有四列，一个，两个，三个，
四人。
然后我做与​​此列。
>> 然后，我开始另一行和 做二，四，六，八。
完成该行。
做另一行，三，六，九，12。
然后最后一行，四， 八，十二，虽然它的
一个小隔断在这里，16。
>> 我完成了该行。
我的表完成。
然后，我做我的HTML。
这是什么样子？
好吧，这不是真的太多地看到。
我已经清楚地组织了我的信息 在某种程度上更有组织的方式。
但它不是超级靓这里。
而且我们要处理 当我们谈论的CSS。
我们会重新审视这个想法 我们做什么，使一个table--
也许更好一点格式化吗？
但我仍然有四排， 每一个都具有四列，
真是什么这相当于是一个 很简单，四乘四乘
表。
>> 短短几年更多的标签，我们来谈谈。
让我们来谈谈 概念HTML表单。
所以，你可能已经在看到了这一点 登录到一个网页的上下文中。
通常你在你的用户名输入。
你输入你的密码， 你是好去。
这将是一个形式的开始。
>> 跳过div中第二。
我们也有输入端， 一种适合的形式中。
这些是元素 你实际上输入进去，
或者你的单选按钮 滴答，或者检查
那你列举出箱。
因此，这些去的形式里面。
他们包括：基本 形式中的每一行
如果你的表单格式完全正确。
再有就是对这个概念 一个div，它并没有真正
适合任何特定类别 标签像那些我已经
在做之前。
它只是排序标定 开始的一些任意division--
div--页面。
有没有视觉突破。
有没有线。
它没有掀起为 自动独立块。
你不得不设置样式 该办法做到这一点。
>> 只是有点它说我想要一个 一块在我的网页空间，
我正要打电话 它这个师我的网页。
我们可以把里面的东西 的div，而事实上，
当我们头以上 IDE在第二，我们将
看到我把我的 形成一个div中。
>> 所以，我在这里我的IDE中 文件名为​​DIV形成点的HTML。
让我们打开它。
请注意，就像我说的， DIV是一种武断的。
对？
它并不真正意味着什么。
所以，我有一个任意 我的网页的第一部。
然后，而不是另一个分区 后来，开始在八通线，
我有这样的形式。
而形式里面我有一个 输入数量，形式等领域。
所以，我有他的名字是场A-- 这并不真正意味着什么
右now--，显然 需要的文字，另外一个，
需要一个密码，另一个是一个电台 按钮，另外这是一个复选框，
而另一个是一个提交按钮。
那么，这是什么 实际上所有的模样？
好吧，让我们一起来看看。
我们将在我们的预览窗口中打开它。
注意，这个任意 第一division--有
在这里没有目视间隔。
它并没有真正做什么，对不对？
>> 然后，我有我的形式。
而且我没有做任何特殊格式。
所以形式仅仅是一个 信息大排。
如果我有不同格式的我的形式， 我可能是一行一行行。
但我没有做任何造型。
同样，我们不是在谈论此处的CSS。
我们只是在谈论的HTML。
>> 那么在我的文字形式，我可以类型 - 记得类型的文本形式
这样我就可以把我的名字。
而在我的密码我 可以输入我的密码。
而由于该字段 是的输入密码，
你不知道我的密码。
这是所有的点。
>> 我也可以选择勾一 单选按钮或勾选复选框。
或者，我可以提交我的形式。
而我什么都没有做， 所以，当我提出我的表格，
页面只是刷新。
不过，我也许可以配置我 提交按钮做别的事情。
我们会看到什么，我们可以做的 在PHP的一个未来的视频。
但是，这建立了一个非常 简单的表格，我们
可以用它来让用户互动， 信息提交到我们的网站。
>> 前一个最后的评论，我们 转移到某些其他的标记
要看看这个 输入标签一次。
请注意，我已经强调 在红色标签的末端。
我们到目前为止看到的所有其他标签都有 有开始和结束，一开口
标签和关闭标签。
>> 但是，一个输入标签没有。
有说去没有文本 在输入标记之间。
所有的信息 我们打​​算传达
包裹，作为部分 该输入的属性。
请注意，我们必须输入姓名度等于x。
类型等于年。
这真是所有 信息我们所需要的。
>> 这被称为自结束标记。
它不需要一开口和一 接近，因为所有的信息
包含内 标签和它的属性。
所以有时候你会看到这一点，太。
所以要知道，如果你有一个 标签是完全独立的，
它打开和关闭本身 左侧的开角托架
和斜线角度 支架右侧。
我们会看到另一个那些 现在用图像标记为好。
>> 在我们讨论的图像，我们 需要谈论的超链接。
如果我们希望我们的网页是 互动性和移动在我们身边，
这将是很好能够 点击其中的一个
什么通常一直是一个链接。
这实际上是我们如何建立 在我们的网页的超链接。
有意思的是 还有另一个HTML标记
称为链接，这不是一个超链接。
一个在这里代表锚，和 这就是我们如何表示的超链接。
>> A HREF等于X表示去 网页十，所有的一切都
开放式的标记之间 和关闭标签
是发生了什么事情是，强调 蓝色的文字，看起来像一个链接
我们所熟悉的。
下面，我们有一个形象的标签，这 是一个自闭的标签显示
位于X的形象， 你也许能够改变
该图像通过指定 宽度和高度
在和其他属性 这点点点出现。
>> 在最底部这里 我们有一个非常有趣的
寻找标记，不 关闭标签。
这是感叹号！DOCTYPE HTML。
因此，HTML一直以来，一直围绕 20世纪90年代初建立的网页，
而它的消失经历了 自那时以来，多次修改。
最近一次是在2014年 它进行了修订
所谓HTML5也就是现在的电流 排序事实上的HTML标准的。
>> 为了表示我们的网络 网页使用HTML5编写的，
这就是我们如何开始。
它可以省略，但 什么是基本
方法是，你不能使用任何的标签 这是HTML5的标签，这些新的标签。
所以，我们总是开始 如果我们使用的是HTML5。
和所有的标签，我们已经讨论过 以前不是HTML5标签。
但是这将表明 HTML5标签将出席。
因此，我们必须感叹 DOCTYPE HTML，这
是在一开始我们 的HTML文件，然后该点之后
我们实际上有我们的HTML开放 标记和从那里继续。
>> 最后一个是一个注释标记， 这看起来略有不同，也。
它与角度开始了 支架感叹破折号
破折号，但没有右括号。
在这两个元件之间存在 是你写你的意见。
让我们来看看图片 和意见，并在CS50的IDE的链接。
>> 所以，我这里有一个名为图像链接 点HTML，我要去开拓。
并注意我有几个 评论在这里我的HTML注释。
所以，就像在C和其他 编程语言，
HTML只是作为一个标记语言 它必须有意见的能力。
所以我显然会 把瑞克阿斯特利的图片
地方本格之间 标签，这个任意分割。
显然，该文件是 位于里克点JPEG，这
如果我们头回过来 我的文件树的第二个，
是存在于一个文件 当前目录。
所以这是确定。
我可以引用它。
>> 然后，我可以有内部链接。
因此，在第11行注意到这里 我HREF为hello点HTML。
所以，仅仅是指你好点HTML 存在于当前目录。
而且我也可以有外部 仅通过指定的HTTPS链接
以表明我不是说 关于我的当前目录中的文件。
我说的是一个真实存在的文件 互联网，我有地方上
以请求使用HTTP协议。
>> 因此，让我们来看看什么 此页可能看起来像
并准备瑞克的照片 阿斯特利，以显示你的屏幕上。
因此，我将预览此。
还有里克·阿斯特利的 最高层在这个任意
师我把它排在首位。
然后，向下跌破我 有我的链接，对不对？
>> 我有一个链接，你好点HTML。
如果我点击的是，我得到 移到此页
是我们非常熟悉的 一开始我们的节目。
如果我再弹出的页面打开，如果我 流行的图像链接打开一次，
我也可以去外部 到CS50的网站。
还有我们see--我会 缩小一点点这里 -
我们将看到CS50的网站排序 嵌入在页面中的中间。
所以，我能够使内部 链接和外部链接。
>> 与HTML的最后一个规则 我们要在这里谈论
是你的HTML应该得到很好的形成。
在C语言中，我们谈了很多关于 事物的各种语法。
在HTML语法真的 围绕着标签。
你打开每个标签需要关闭。
而事实上，每个标签打开 应该被关闭以相反的顺序。
>> 所以，如果你打开​​一个大胆的标记，斜体 标签，然后下划线标记
做所有的三来一 特别是集文字，
你应该关闭它们以相反的顺序。
所以，如果你打开​​了大胆的， 斜体，下划线，你
要关闭下划线，斜体，粗体。
这种类型的封装是什么 保持HTML漂亮的和有组织的。
>> 不像C，虽然语法错误不会 实际上削弱你的HTML可能。
你的HTML可能是没有得到很好的 形成，但仍然工作。
所以，这些错误 可以按幻灯片通过。
这取决于你真的要提高警惕。
有时，他们会失败，但 有时你可以逃脱它。
>> 它可以是一个真正的 困难的任务，不过，
跟踪，当你打开的 一个标签，当你关闭它，
特别是在你的HTML 文件变得越来越大。
你会想一些帮助。
而且还有在线 验证工具，您
可以用它来看看你的网站 网页，看看它是否是良构的HTML。
而且你一定要 看看那些
并开始使用它们作为你 开始做了一些工作，HTML，
编写HTML，只等你拿 关于组织的一些好习惯
在一个好办法HTML和 良好的作风和确保
你没有做任何事情， 可以创建一个语法错误
会导致你有点 有问题的道路。
>> 我是道格·劳埃德。
这是CS50。