喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station 棒棒哒纯文字二次元技术社区

正文

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.
学习编写网页,使用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>”标签让我们的文本变得更加粗壮(咳咳,是变为黑体字)。

回复

我又来灌水了

作者:月夜猫妖
查看回复

我又来灌水了

作者:Daooo
我又来灌水了。挽尊。。。。
查看回复

风音洛洛

作者:月夜猫妖
查看回复

主题中的段落

作者:月夜猫妖
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>”。我们将内容写入标签间。
查看回复

打滚卖萌求支持

作者:月夜猫妖
打滚卖萌求支持
查看回复

编写头部

作者:月夜猫妖
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”。
查看回复

求关注求支持

作者:月夜猫妖
求关注求支持
查看回复

基础术语

作者:月夜猫妖
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”看你写出的页面。
查看回复
上一页
下一页
0%
站点地图友情链接:
喵宅苑
喵空间社区程序
喵宅苑 静态版
宅喵RPG地图编辑器
络合兔
Lanzainc
技术宅
小五四博客
莉可POI
Mithril.js
枫の主题社
Project1
午后少年
机智库
七濑胡桃
xiuno
幻想の日常
魂研社
Nothentai
0xffff
欲望之花
泽泽社长
淀粉月刊
HAYOU