本帖最后由 月夜猫妖 于 2014-1-10 22:20 编辑
教程中文化计划Web Fundamentals网页教程Learn the building blocks of webdevelopment with HTML and CSS, and create your own website by the end of thecourse.学习编写网页，使用HTML与CSS，并且通过学习本教程，你将能够写出你自己的网络站点。Part1：来源：Why learn HTML?为何要学习HTML?Every webpage you look at is written in alanguage called HTML. You can think of HTML as the skeleton that gives everywebpage structure. In this course, we'll use HTML to add paragraphs, headings,images and links to a webpage.每一个你看到的网页都是用HTML编写的。你可以把HTML想象成每个网页结构的骨骼。我们将会使用HTML向网页添加段落、标题、图片和链接。In the editor to the right, there's a tabcalled test.html. This is the file we'll type our HTML into. See the code withthe <>s? That's HTML! Like any language, it has its own special syntax(rules for communicating).右边的编辑区，是一个被称之为“test.html”的区域。这是一个将被我们编写入HTML得文件。看到“<”与“>”之间的代码了吗？那就是HTML！就像其他语言一样，它有它自己的编写规则（语法）。When we press Save & Submit Code, theresults tab will act like an Internet browser (e.g. Chrome, Firefox, InternetExplorer). A browser's job is to transform the code in test.html into arecognizable webpage! It knows how to lay out the page by following the HTMLsyntax.当我们按下“Save & Submit Code”时，这些代码将会像网络浏览器那样工作。一个浏览器的工作就是把“test.html”中的代码翻译为可以看到的网页。它指导如何遵从HTML的规则（语法）布置网页。Instructions操作指南01. To the right, we have a test.html file.01. 向右边看，我们有一个“test.html”文件。02. Change the text on line 2 (the bitbetween *本站禁止HTML标签噢* and </strong>) to anything you like!02. 将“line 2”的中的文本（“ *本站禁止HTML标签噢* ”与“</strong>”标签间）改变为任何你想要的。03. Hit Save & Submit Code, and you'llsee how the test.html file would look in a browser. Did you see that? The *本站禁止HTML标签噢* </strong> tags made our text bold!03. 点击“Save & Submit Code”，你将看到“test.html”在浏览器中的样子。你看到了吗？“ *本站禁止HTML标签噢* ”与“</strong>”标签让我们的文本变得更加粗壮（咳咳，是变为黑体字）。
part19:
来源：
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
Link me!
链接我
Great! There's only one problem: your webpage is like a house with no doors. There's no way to get in or out! We'll fix that by adding a couple of links.
很好，这只剩下一个问题了：你的页面想一个没有门的房子。这儿没有路进出。我们将要通过一对链接来修复它。
Once you successfully add your links and hit Run, you've finished! Revel in the glory of your newly created webpage.
一旦你成功地添加了链接并使之有效，你就完工了。回味一下你新创建的网页。
If it still looks a little basic to you, don't worry. We'll soon teach you CSS to make your webpages look sharp!
对你来说它是否一直看起来像一个基础标题，别担心。我们马上会告诉你使用CSS来让你的网页看起来漂亮。
Instructions
操作指南
Add at least two links to your webpage. You can turn an image or a bit of text into a link; you can even turn part of the text inside your *本站禁止HTML标签噢* tags into a link!
添加两个链接到你的页面。你可以用图片或一段文本来添加链接；你能使用“ *本站禁止HTML标签噢* ”标签内容的一部分来添加链接。
Check out the Hint if you've forgotten how the *本站禁止HTML标签噢* tag works.
如果你忘记了“ *本站禁止HTML标签噢* ”标签的用处，点击“Hint”。
[查看全文]
part18:
来源：
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
A picture's worth a thousand words
一图顶千言
Nice work! Your page is still looking a bit spare, though. Better add an image or two to spruce things up a bit.
做得好。你的页面看起来还是有些空，最好添加一到两张图片来让它漂亮点。
Remember, to insert an image from the web you will need to right-click and select "Copy image URL." Then use this URL in your *本站禁止HTML标签噢* tag.
记住，想要添加一张网络图片到网页，你需要使用鼠标右键选择“复制图片链接地址”，然后在你的“ *本站禁止HTML标签噢* ”标签中使用这个地址。
Instructions
操作指南
Insert an *本站禁止HTML标签噢* tag between your *本站禁止HTML标签噢* tags. Feel free to put it anywhere! (We think it'd look best after your *本站禁止HTML标签噢* tag, but before your *本站禁止HTML标签噢* tags.) You can make the src attribute point to any image you like.
在“ *本站禁止HTML标签噢* ”标签间添加“ *本站禁止HTML标签噢* ”标签。它可以放在任何地方（我们认为它最好在“ *本站禁止HTML标签噢* ”之后，“ *本站禁止HTML标签噢* ”之前）。你能使用“src”属性指向任何你想要的图片。
[查看全文]
part17:
来源：
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
Tell us about yourself
告诉我们关于你的事情
Your page is coming along, but it's not telling us much yet.
你的页面就要完成了，但是现在它没有告诉我们更多信息。
You could use a paragraph or two telling your readers what your interests are, what you do for a living, how much you love learning HTML, and so on.
你需要使用一段或者两段文本来告诉你的读者关于你的信息，例如你的兴趣、你以何为生，你多喜爱学习HTML或者其他。
Instructions
操作指南
Insert three *本站禁止HTML标签噢* tags after your *本站禁止HTML标签噢* tag (but before your closing </body> tag!). Write a little bit about yourself in each of the three paragraphs. You can say whatever you want! It's your webpage.
在“ *本站禁止HTML标签噢* ”标签后添加三个“ *本站禁止HTML标签噢* ”标签（但是需要在“ *本站禁止HTML标签噢* ”的结束标签前）。写一个关于你这三段内容的标题。你能写任何你想的内容，这是你的网页。
[查看全文]
part16:
来源：
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
It's better with a header
有一个标题是极好的
Your webpage could use an *本站禁止HTML标签噢* header between the body tags to let everyone know that the page is about you.
你需要在“ *本站禁止HTML标签噢* ”标签间用一个“ *本站禁止HTML标签噢* ”标签来告诉每一个到访者关于你。
Instructions
操作指南
Create an *本站禁止HTML标签噢* tag inside your body tags. Between your opening *本站禁止HTML标签噢* and closing </h1> tags, type your name for all to see!
在“ *本站禁止HTML标签噢* ”标签间添加一个“ *本站禁止HTML标签噢* ”标签，在“ *本站禁止HTML标签噢* ”标签间写入你的名字。
[查看全文]
part15:
来源：
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
Every house needs a frame
每个房屋都需要一个框架
An HTML page is sort of like a house: it needs a certain number of essential structures in order to work.
一个HTML页面与一个房屋有些相似：为了使其有效，它需要一些基本的架构。
Just like a house, an HTML page needs a frame. In this case, your frame is made of <!DOCTYPE>, *本站禁止HTML标签噢* , *本站禁止HTML标签噢* , and *本站禁止HTML标签噢* tags.
就像房屋，一个html页面需要一个框架。在这里，你的框架是使用“<!DOCTYPE>”、“ *本站禁止HTML标签噢* ”、“ *本站禁止HTML标签噢* ”和“ *本站禁止HTML标签噢* ”标签制作的。
Instructions
操作指南
Your webpage is blank as the day it was born! Let's add five things:
你的网页就像它出生时那样是空白的，让我们向内添加五件东西：
01. The <!DOCTYPE> tag
01. “<!DOCTYPE>”标签
02. Your *本站禁止HTML标签噢* tags
02. “ *本站禁止HTML标签噢* ”标签
03. Your *本站禁止HTML标签噢* tags
03. “ *本站禁止HTML标签噢* ”标签
04. *本站禁止HTML标签噢* tags (with any title you like!) between your head tags
04. 在你的“ *本站禁止HTML标签噢* ”标签间添加“ *本站禁止HTML标签噢* ”标签（同时填入任何你想要的标题）
05. Your *本站禁止HTML标签噢* tags
05. “ *本站禁止HTML标签噢* ”标签
[查看全文]
part14:
来源：
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
What you'll be making
你将要干什么
Before we ask you to write a bunch of code, we think it's helpful for you to see exactly what you'll be making in this project.
我们告诉你如何编写一串代码前，我们认为这将有助于你准确地看清在工程中你将要干什么。
Check out the index.html file and the Result tab for an example—we've made our very own webpage.
查看“index.html”文件与预览框（范例结果框）中的范例——我们制作的属于我们的网页。
Instructions
操作指南
Hit Save & Submit Code to start building your own!
通过点击“Save & Submit Code”开始构建属于你的网站。
[查看全文]