Your first web page

Web Basics — HTML & CSS Lesson 1 2:11 English narration · English + 中文 subtitles burned in

space play · ←/→ 5s · j/l 10s · f fullscreen · ,/. speed

Chapters

Transcript

A web page is made with HTML, and HTML is just text — text with tags around it. 网页是用 HTML 做出来的，而 HTML 就是文本——加了标签的文本。

You write the text on one side, and the browser reads it and draws the page on the other. 你在一边写下文本，浏览器读它，然后在另一边把页面画出来。

That is the whole relationship, and every lesson in this course is one more thing you can put on the left to change what appears on the right. 整个关系就是这样，而这门课的每一课，都是往左边多加一样东西，去改变右边出现的样子。

There is nothing to install; you type in the box and press play. 不需要安装任何东西；你在框里打字，然后按播放。

Look closely at one element. 仔细看一个元素。

A tag is a word inside angle brackets, and most tags come as a pair: an opening one at the front, and a closing one at the back with a slash in it. 标签就是尖括号里的一个词，而且大多数标签成对出现：前面一个开始标签，后面一个结束标签，里面多了一条斜杠。

The slash is the only difference between them, and it is what says "this part is finished". 斜杠是它们唯一的区别，它表示“这一部分到此为止”。

Your actual words — the part a visitor reads — goes in between. 而你真正的文字——访客读到的那部分——写在中间。

Here the tag is p, and p makes a paragraph. 这里的标签是 p，p 表示一个段落。

Now write two of them. 现在写两个。

Each paragraph needs its own pair of tags, and the browser stacks them one after another down the page, with a gap in between. 每个段落都需要它自己的一对标签，浏览器会把它们从上到下一个接一个地排下来，中间留出间距。

Here is the part that surprises people coming from a word processor: pressing Enter in your HTML does nothing at all to the page. 下面这一点会让习惯了文字处理软件的人意外：在 HTML 里按回车，对页面毫无影响。

The tag makes the gap, not your keyboard. 是标签制造了那个间距，不是你的键盘。

One mistake accounts for most first-day confusion, so look at it before you start. 第一天的困惑大多来自同一个错误，所以在开始之前先看看它。

If you forget the slash on the second tag, you have written two openings and closed nothing, and the page will not look the way you expect. 如果你在第二个标签上忘了那条斜杠，你写下的就是两个开始标签，什么都没有被关闭，页面看起来就不会是你预期的样子。

Now the two tasks: a paragraph that says Hello comma world, and then a second one under it saying I made this. 现在做那两道题：一个写着 "Hello, world!" 的段落，然后在它下面再写一个，内容是 "I made this."。

Four things to take with you. 带走四点。

One: a web page is text with tags around it. 第一：网页就是加了标签的文本。

Two: a tag is a word inside angle brackets. 第二：标签是尖括号里的一个词。

Three: most tags come in pairs, and the closing one has a slash. 第三：大多数标签成对出现，结束标签里有一条斜杠。

Four: each paragraph needs its own pair of p tags. 第四：每个段落都需要属于它自己的一对 p 标签。

Now try both tasks, and press play after every change. 现在把两道题都试一下，每改一次就按一下播放。