|
阅读：0回复：35
web教程中文化计划
[i=s] 本帖最后由 月夜猫妖 于 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 <strong> and </strong>) to anything you like! 02. 将“line 2”的中的文本（“<strong>”与“</strong>”标签间）改变为任何你想要的。 03. Hit Save & Submit Code, and you'llsee how the test.html file would look in a browser. Did you see that? The<strong></strong> tags made our text bold! 03. 点击“Save & Submit Code”，你将看到“test.html”在浏览器中的样子。你看到了吗？“<strong>”与“</strong>”标签让我们的文本变得更加粗壮（咳咳，是变为黑体字）。 |
|
|
沙发#
发布于：2014-03-20 12:52
英语盲对这个正感兴趣
英语盲对这个正感兴趣，太感谢LZ了，爱莫能助，只能给予精神上的至此了加油！(o^^)oo(^^o) |
|
|
地板#
发布于：2014-01-28 22:41
这只剩下一个问题了
part19:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-LceTK/0/6?curriculum_id=50579fb998b470000202dc8b 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 <p> tags into a link! 添加两个链接到你的页面。你可以用图片或一段文本来添加链接；你能使用“<p>”标签内容的一部分来添加链接。 Check out the Hint if you've forgotten how the <a> tag works. 如果你忘记了“<a>”标签的用处，点击“Hint”。 |
|
|
4楼#
发布于：2014-01-28 22:28
一图顶千言
part18:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-LceTK/0/5?curriculum_id=50579fb998b470000202dc8b 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 <img> tag. 记住，想要添加一张网络图片到网页，你需要使用鼠标右键选择“复制图片链接地址”，然后在你的“<img>”标签中使用这个地址。 Instructions 操作指南 Insert an <img> tag between your <body> tags. Feel free to put it anywhere! (We think it'd look best after your <h1> tag, but before your <p> tags.) You can make the src attribute point to any image you like. 在“<body>”标签间添加“<img>”标签。它可以放在任何地方（我们认为它最好在“<h1>”之后，“<p>”之前）。你能使用“src”属性指向任何你想要的图片。 |
|
|
5楼#
发布于：2014-01-28 22:18
告诉我们关于你的事情
part17:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-LceTK/0/4?curriculum_id=50579fb998b470000202dc8b 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 <p> tags after your <h1> 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. 在“<h1>”标签后添加三个“<p>”标签（但是需要在“<body>”的结束标签前）。写一个关于你这三段内容的标题。你能写任何你想的内容，这是你的网页。 |
|
|
6楼#
发布于：2014-01-28 22:05
有一个标题是极好的
part16:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-LceTK/0/3?curriculum_id=50579fb998b470000202dc8b It's better with a header 有一个标题是极好的 Your webpage could use an <h1> header between the body tags to let everyone know that the page is about you. 你需要在“<body>”标签间用一个“<h1>”标签来告诉每一个到访者关于你。 Instructions 操作指南 Create an <h1> tag inside your body tags. Between your opening <h1> and closing </h1> tags, type your name for all to see! 在“<body>”标签间添加一个“<h1>”标签，在“<h1>”标签间写入你的名字。 |
|
|
7楼#
发布于：2014-01-28 21:56
每个房屋都需要一个框架
part15:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-LceTK/0/2?curriculum_id=50579fb998b470000202dc8b 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>, <head>, and <body> tags. 就像房屋，一个html页面需要一个框架。在这里，你的框架是使用“<!DOCTYPE>”、“<html>”、“<head>”和“<body>”标签制作的。 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 <head> tags 03. “<head>”标签 04. <title> tags (with any title you like!) between your head tags 04. 在你的“<head>”标签间添加“<title>”标签（同时填入任何你想要的标题） 05. Your <body> tags 05. “<body>”标签 |
|
|
8楼#
发布于：2014-01-28 21:55
你将要干什么
part14:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-LceTK/0/1?curriculum_id=50579fb998b470000202dc8b 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”开始构建属于你的网站。 |
|
|
9楼#
发布于：2014-01-28 21:27
我似乎记得
GRzhan 发表于 2014-1-28 00:34 咱不知道有这么回事，3q，如若可以麻烦代传 |
|
|
10楼#
发布于：2014-01-28 00:34
我似乎记得
我似乎记得Codecademy是可以把翻译好的资料传上去的？
LZ基本上翻译得没错唔 mark 以后可以分享给要学HTML的朋友。 |
|
|
12楼#
发布于：2014-01-26 11:56
干得漂亮
part13:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-HZA3b/2/5?curriculum_id=50579fb998b470000202dc8b Congratulations! 恭喜你 Well done! You now know the basics of creating a web page. If you're feeling lucky, go ahead and tackle the Build Your Own Webpage project. 干得漂亮，你现在已经知道编写网页的基础知识了，如果你感觉不错，那么就去建立你自己的网页工程吧。 Instructions 操作指南 Click Save & Submit Code to complete the course. 点击“Save & Submit Code”完成课程。 |
|
|
13楼#
发布于：2014-01-26 11:51
图片与连接
part12:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-HZA3b/2/4?curriculum_id=50579fb998b470000202dc8b Images and links 图片与连接 Good work! Let's make sure you really understand images and links before we move on to the review. 很好，在复习前让我们确认一下你是否真的理解图片与链接。 Instructions 操作指南 01. Between the <body> tags, add two images using the <img> tag. One should be a link; the other should not. The link can go anywhere you want. 01. 在“<body>”标签间通过使用“<img>”标签添加两张图片，一个需要连接，另一个不需要，链接地址可以是任何你想要的。 02. After your two images, create a link that's just a line of text. It can link anywhere you want. 02. 在图片后添加一行带有链接的文本，链接地址随意。 Check the Hint if you need help. 如果你需要帮助点击“Hint”。 |
|
|
14楼#
发布于：2014-01-26 11:44
点击图片
part11:
来源： http://www.codecademy.com/zh/courses/web-beginner-en-HZA3b/2/3?curriculum_id=50579fb998b470000202dc8b Click that image 点击图片 Good work! Now you know how to add images to your website. But what if you want to click on that image to lead you somewhere else? 干得好，现在你已经知晓如何把图片添加到你的网站。但是如果你想通过点击这张图片把你带到其他地方该怎么做？ The <a> tag is the one used to make hyperlinks (or just links) on webpages. These are the words or images you click to go to a new page! “<a>”标签是一个用于给网页添加超文本链接（或者只是链接）的标签。（通过使用这个标签，）你能通过点击那些图片或文本去新的页面。 Just like <img>, <a> has an attribute that tells the link where to go. Instead of src, <a> uses href, like so: 就像“<img>”标签一样，“<a>”标签通过一个属性来告知链接到何处。它使用“href”来替代（“<img>”中的）“src”。就像下面那样： <a href="http://www.codecademy.com">Learn to code!</a> src stands for "source." It tells the <img> link where the picture comes from! “src”意思是“来源”，这告诉“<img>”标签图片在何处。 href stands for "hypertext reference." Remember when we said that hypertext (that is, links) is text you can click on? Well, href tells that link where to go! The text after href is the web address, and the text between <a> and </a> is the text you click on. “href”意思是“超文本链接”牢记我们所说的超文本（就是链接）是否就是一段你能点击的文本？好的，“href”告诉链接到何处，在“href”后的文本是网址，就是你在“<a>”标签间所能点击的那段文本被点击时链接的地址。 Instructions 操作指南 Here's how to turn an image into a link: put a <a href="URL"> tag before your <img> tag and a </a> tag after them. In the quotes after href=, put in your favorite website address! 这是如何把图片变为链接的方法：添加“<a href="URL">”在“<img>”标签前并在之后填上“</a>”，在“href=”后填入你最爱网站的地址。 |
|
上一页
下一页
