喵宅苑 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>”标签让我们的文本变得更加粗壮(咳咳,是变为黑体字)。

回复

英语盲对这个正感兴趣

作者:zxingwei1990
英语盲对这个正感兴趣,太感谢LZ了,爱莫能助,只能给予精神上的至此了加油!(o^^)oo(^^o)
查看回复

楼主好人

作者:墨笺
楼主好人
查看回复

这只剩下一个问题了

作者:月夜猫妖
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 <p> tags into a link! 添加两个链接到你的页面。你可以用图片或一段文本来添加链接;你能使用“<p>”标签内容的一部分来添加链接。 Check out the Hint if you've forgotten how the <a> tag works. 如果你忘记了“<a>”标签的用处,点击“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 <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”属性指向任何你想要的图片。
查看回复

告诉我们关于你的事情

作者:月夜猫妖
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 <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>”的结束标签前)。写一个关于你这三段内容的标题。你能写任何你想的内容,这是你的网页。
查看回复

有一个标题是极好的

作者:月夜猫妖
part16: 来源: http://www.codecademy.com/zh/cou ... fb998b470000202dc8b 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>”标签间写入你的名字。
查看回复

每个房屋都需要一个框架

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

你将要干什么

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