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

回复

我似乎记得

作者:月夜猫妖
GRzhan 发表于 2014-1-28 00:34 我似乎记得Codecademy是可以把翻译好的资料传上去的? LZ基本上翻译得没错唔 mark
咱不知道有这么回事,3q,如若可以麻烦代传
查看回复

我似乎记得

作者:GRzhan
我似乎记得Codecademy是可以把翻译好的资料传上去的? LZ基本上翻译得没错唔 mark 以后可以分享给要学HTML的朋友。
查看回复

太感谢了

作者:挂着铃铛的兔
太感谢了 明年学
查看回复

干得漂亮

作者:月夜猫妖
part13: 来源: http://www.codecademy.com/zh/cou ... fb998b470000202dc8b 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”完成课程。
查看回复

图片与连接

作者:月夜猫妖
part12: 来源: http://www.codecademy.com/zh/cou ... fb998b470000202dc8b 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”。
查看回复

点击图片

作者:月夜猫妖
part11: 来源: http://www.codecademy.com/zh/cou ... fb998b470000202dc8b 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=”后填入你最爱网站的地址。
查看回复

本帖最后由

作者:月夜猫妖
[i=s] 本帖最后由 月夜猫妖 于 2014-1-24 06:32 编辑 part10: 来源: http://www.codecademy.com/zh/cou ... fb998b470000202dc8b Adding images 添加图片 You can add images to your websites to make them look fancy. 你能添加图片到你的网站让他们看起来不错。 We use an image tag, like so: <img>. This tag is a bit different from the others. Instead of putting the content between the tags, you tell the tag where to get the picture using src. It's also different because there is no ending tag. It has / in the tag to close it: <img src="url" />. 我们使用图片标签(“<img>”)。这个标签与其他的有一点不同。你需用用“src”来告诉标签从哪获取图片而不是在两个标签间添加内容。它还有一个不同那就是它没有结束标签,它在标签中使用“/”来结束,就像:“<img src="url" />”。 Check out the tag to the right—it adds a picture of a rubber duck to the page! (You can see it by clicking on the Preview button.) 查看标签,它在页面上添加了一张橡胶鸭的图片(你能通过点击“Preview”按钮来看到它(事实上没有这个按钮,如果用谷歌浏览器你能直接看到,前提是网络不错))。 See the web address (or URL) after src=? It's "http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg". That tells the <img> tag where to get the picture from! 看看在“src=”后的网址(或统一资源定位符)是什么? 是“http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg”。它告诉“<img>”标签在哪获取图片。 Every image on the web has its own image URL. Simply right-click on an image and choose "Copy image URL." Paste that URL in quotes after src= to insert with your <img> tag. 每一个在网上的图片都有自己的地址(统一资源定位符),通过在图片上点击右键选择“复制图片地址”并粘贴到“src=”后的方式添加你的“<img>”标签。 Instructions 操作指南 Add a second image below the first one. (Make sure it's before the closing <body> tag!) 在第一个图片标签下添加第二个(确保它在“<body>”标签中)。 If you can't think of a good picture, use this ninja: http://s3.amazonaws.com/codecade ... nja_zpsa5dbe37a.jpg 如果你找不到好的,用这个忍者图: “http://s3.amazonaws.com/codecade ... nja_zpsa5dbe37a.jpg
查看回复

中场休息

作者:月夜猫妖
part9: 来源: http://www.codecademy.com/zh/cou ... fb998b470000202dc8b Mid-lesson breather 中场休息 You've done an awesome job! Here's a quick summary of things we've learned: 你获得了令人惊奇的成就,这儿有一个关于我们学习过内容的概要: 01. HTML is used to give websites structure. 01. HTML用于编写网站。 02. We open HTML files using a browser, and the browser renders (shows us) the file. 02. 我们使用浏览器打开HTML文件,浏览器读取文件(显示给我们看)。 03. HTML files have a <head> and a <body> (just like you!) 03. HTML文件拥有“<head>(头)”与“<body>(身体)”(就像你一样)。 04. In the head, we have the <title> tags, and we use these to specify the webpage's name. 04. 在头部,我们有“<title>”标签,我们使用它为网页命名。 05. How to make headings and paragraphs. 05. 如何给予段落标题。 Instructions 操作指南 01. Add a title between the <title> tags. 01. 在“<title>”标签间添加标题 02. Create a <h3> sized heading in the body. Make your heading say anything you want! (Just don't forget to close it.) 02. 在“<body>”标签间写“<h3>”标题并写入你想要的内容(不要忘记配对)。 03. Create three paragraphs using <p> tags and fill them with content (e.g. about cars, your pet, favorite city to travel—whatever you like!) 03. 通过“<p>”标签写入段落并赋予其内容(例如:关于车的,你宠物的,最想去旅行的城市——任何你想的)。
查看回复
上一页
下一页
0%
站点地图友情链接:
喵宅苑
喵空间社区程序
喵宅苑 静态版
宅喵RPG地图编辑器
络合兔
Lanzainc
技术宅
小五四博客
莉可POI
Mithril.js
枫の主题社
Project1
午后少年
机智库
七濑胡桃
xiuno
幻想の日常
魂研社
Nothentai
0xffff
欲望之花
泽泽社长
淀粉月刊
HAYOU