搜索
有爱,有技术,有你^_^)y
╱人◕‿‿◕人╲订下契约(注册新用户)

合作站点账号登陆

QQ登录

只需一步,快速开始

快捷导航
查看: 2423|回复: 35
收起左侧

[综合] web教程中文化计划

[复制链接]

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
发表于 2014-1-10 22:18:56 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有账号?╱人◕‿‿◕人╲订下契约(注册新用户)

x
本帖最后由 月夜猫妖 于 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.
学习编写网页,使用HTMLCSS,并且通过学习本教程,你将能够写出你自己的网络站点。
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>”标签让我们的文本变得更加粗壮(咳咳,是变为黑体字)。

评分

参与人数 2宅魂 +3 宅币 +37 活跃 +2 收起 理由
_Nozomi + 30
kiyouka + 3 + 7 + 2 果断支持~

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~
回复

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-10 22:19:17 | 显示全部楼层
欢迎各位接力
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-11 21:26:57 | 显示全部楼层
Part2
来源:
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
HTML and CSS
HTML与CSS
HTML stands for HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext!
HTML意思是超文本标记语言,超文本意味着包含文本与链接。当你点击一个文本,它带你转向一个新的页面,你就是点击在了超文本上。
A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.
标记语言是一种被用于让文本做更多不仅仅是显示其本身的编程语言,它能让文本变为图片、链接、标签、列表或更多。HTML是一种我们将要学习的标记语言。
What makes webpages pretty? That's CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS in later courses.
如何让网页更加漂亮?答案是使用CSS——层叠样式表。你可以把它想象成覆盖在HTML构成的骨架上的皮肤或者补充。我们将先学习HTML然后再学习CSS。
The first thing we should do is set up the skeleton of the page.
首先我们应该去制作网页的骨架。
a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML).
a. 始终把“<!DOCTYPE html>”放在第一行,这是告诉浏览器何种语言被读取(这里的例子中是HTML)。
b. Always put <html> on the next line. This starts the HTML document.
b. 始终把“<html>”放在第二行,这是HTML的起始声明。
c. Always put </html> on the last line. This ends the HTML document.
c. 始终把“</html>”放在最后一行,这是HTML的结束声明。
Instructions
操作指南
01. Go ahead and put the three lines mentioned above into test.html, which is now blank.
01. 同意并把上述三行添加到“text.html”,“text.html”是现在空白的地方。
02. In between the second and last line (between the <html> and the </html>), feel free to write whatever message you like.
02. 在第二行与最后一行间(“<html>”与“</html>”间)填入你想要的任何内容。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-14 07:54:38 | 显示全部楼层
有人看吗?给个回复ok?
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-16 20:31:09 | 显示全部楼层
part3:
来源:
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
Basic terminology
基础术语
To learn more HTML, we should learn how to talk about HTML. Already you have seen we use <>s a lot.
为了更多地学习HTML我们因该学习如何谈论HTML。之前你看到我们使用了很多“<>”。
01. Things inside <>s are called tags.
01. 在“<>”之间的被称为标签(标记)
02. Tags nearly always come in pairs: an opening tag and a closing tag.
02. 标签总是与最近的成对存在:一个开始,一个结束
Example of opening tag: <html>
开始的范例标签:<html>
Example of closing tag: </html>
结束的范例标签:</html>
You can think of tags as being like parentheses: whenever you open one, you should close it. Tags also nest, so you should close them in the right order: the most recently opened tag should be the first one closed, like in the example below.
你可以认为标签的使用就像是括号:无论何时你使用了左括号,你都需要使用一个右括号与它配对,标签也一样。所以你应该让它们以正确的顺序配对:结束标签会与最近的开始标签配对,就像下头的例子一样。
<first tag><second tag>Some text!</second tag></first tag>
The last exercise taught us how to set up our HTML file. Everything we do now will go between <html> and </html>.
最新的例子告诉我们如何创建我们的HTML文档。我们将在“<html> ”与“</html>”间填写代码。
Practice makes perfect! One more time:
再来一次熟能生巧:
01. Put in the <!DOCTYPE HTML> tag.
01. 输入“<!DOCTYPE HTML>”标签
02. Put in the <html> opening and closing tags.
02. 输入“<html>”的起始、结束标签
03. Between the <html> tags, write whatever you like.
03. 在“<html>”的两个标签间输入任何你喜欢的东西。
04. Press Save & Submit Code to see what you've written appear on the page!
04. 单击“Save & Submit Code”看你写出的页面。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-16 20:31:27 | 显示全部楼层
求关注求支持
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-16 20:50:40 | 显示全部楼层
part4:
来源:
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
Make the head
编写头部
Everything in our HTML file will go between the opening <html> and closing </html> tags.
我们的任何一个HTML文件都将内容写在“<html>”的两个标签间(“<html>”与“</html>”间)。
There are always two parts to the file: the head and body. Let's focus on the head.
在文档中始终有两个部分:头部与主体。先学习头部。
a. It has an opening and a closing tag.
a. 它有开始与结束标签。
b. The head includes important information about the webpage, such as its title.
b. 头部包含很多网页的重要信息,比如标题
c. The title is the words we see in the tab (for example, the title of this page is "Introduction to HTML").
c. 标题是我们在标签中看到的词(例如,这个页面的标题是“HTML入门”)。
Instructions
操作指南
01. Add a <head> opening and </head> closing tag. See the Hint for more.
01. 添加“<head>”标签(“<head>”与“</head>”)。注意暗示(将标签添加在大量换行符间)。
02. Between the <head> tags, add in opening <title> and closing </title> tags.
02. 在“<head>”标签间添加“<title>”标签(“<title>”与“</title>”)。
03. In between the <title> tags, write the title of your webpage: Bad to the Bonez Webpage Inc. You'll be able to see the title at the top of your browser window: click and open in a new tab to see!
03. 在“<title>”标签间写入你网页的标题“Bad to the Bonez Webpage Inc.”你会看到标题显示在你的浏览器窗口的顶部:检查并打开在一个新标签中查看。
04. Press Save & Submit Code!
04. 点击“Save & Submit Code”。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-16 21:11:29 | 显示全部楼层
打滚卖萌求支持
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-16 21:12:11 | 显示全部楼层
part5:
来源:
http://www.codecademy.com/zh/cou ... fb998b470000202dc8b
Paragraphs in the body
主题中的段落
We have set up a lot of the basic things for your HTML file for you.
我们教授了很多HTML的基本事项给你。
We have learned about opening and closing tags. When we put content between the tags, the entire bit is called an element.
我们学习了开始与结束标签。当我们填写内容到标签中,内容及囊括它的标签被称作为元素。
element = <opening tag> + content + <closing tag>
元素=起始标签+内容+结束标签
Notice we have both title tags now, but we need <body> tags. The content in the body is what will be visible on the actual page. The body goes inside the html tags, but not inside the head tags, like this:
注意,我们已经有了“<title>”标签,但是我们需要“<body>”标签(“<body>”与“</body>”)。在“<body>”标签中的内容是我们可以在页面中看到的。“<body>”在“<html>”标签间,但不在“<head>”间,就像这样:
<html>
    <head></head>
    <body></body>
</html>
Instructions
操作指南
01. Between the title tags, give your page a name. It can be anything!
01. 给予你的页面一个名称在“<title>”标签间。这可以是任何东西。
02. Underneath the closing </head> tag, put in the opening and closing <body> tags.
02. 在“<head>”结束标签(“</head>”)下方写入“<body>”标签(“<body>”与“<body>”)
03. Inside the body, create two paragraphs! Each paragraph requires opening and closing tags: <p> and </p>. We put content in between the tags.
03. 在“<body>”标签间添加两个段落,每个段落都需要起始于结束标签:“<p>”与“</p>”。我们将内容写入标签间。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-16 21:19:27 | 显示全部楼层
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

4

主题

15

好友

5284

积分

序章

积分
5284
发表于 2014-1-16 21:41:05 | 显示全部楼层
我又来灌水了。挽尊。。。。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-16 23:30:52 | 显示全部楼层
Daooo 发表于 2014-1-16 21:41
我又来灌水了。挽尊。。。。

能否给个评论或者帮忙翻译?
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

4

好友

1493

积分

Continue

积分
1493
发表于 2014-1-17 00:47:51 | 显示全部楼层
我能说,翻译的真的很烂么

对不起楼主
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

36

主题

24

好友

5247

积分

序章

积分
5247
 楼主| 发表于 2014-1-17 09:04:58 | 显示全部楼层
最终叹息 发表于 2014-1-17 00:47
我能说,翻译的真的很烂么

对不起楼主

咱水平不高真是抱歉啊,咱的目的只是为了看教程的时候不用去查字典而已
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

18

好友

1354

积分

Continue

积分
1354
发表于 2014-1-17 12:43:35 | 显示全部楼层
楼主,我觉得你就是神,因为咱英语实在烂到掉渣
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

本版积分规则

小黑屋|手机版|技术宅(Z站|基宅) ( 粤ICP备18082987号-1 )

GMT+8, 2025-7-11 02:55 , Processed in 0.127179 second(s), 27 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表