Hands-on Lab: Intro to HTML (JSFiddle)动手实验：HTML 入门（JSFiddle）

Estimated time needed: 30 minutes
所需估计时间：30 分钟

In this lab, we will explore all the components of an HTML file viz, HTML markup, CSS styling and JavaScript code.
在这个实验室中，我们将探讨 HTML 文件的各个组成部分，即 HTML 标记、CSS 样式和 JavaScript 代码。

Learning Objectives 学习目标

1. Get comfortable with JSFiddle.
   熟悉 JSFiddle。
2. Fiddle with HTML.  篡改 HTML。
3. Fiddle with CSS.  调整 CSS。
4. Fiddle with JavaScript.  摆弄 JavaScript。

What is JSFiddle? 什么是 JSFiddle？

JSFiddle is a playground for novice and experienced web developers alike. It is an online web application which allows anyone to play around with HTML, CSS, and JavaScript. As you make changes, you can see the impact of those changes live.
JSFiddle 是新手和经验丰富的网页开发者的游乐场。它是一个在线网页应用程序，允许任何人随意操作 HTML、CSS 和 JavaScript。当你进行更改时，你可以实时看到这些更改的影响。

You need to know a few things before effectively making use of JSFiddle.
您在使用 JSFiddle 之前需要了解一些事项。

Refer to the screenshot below.
参考下面的截图。

1. The HTML area is the place where you type all the HTML tags and the web page text.
   HTML 区域是您输入所有 HTML 标签和网页文本的地方。
2. The CSS area is the place where you type in all the CSS styling information.
   CSS 区域是您输入所有 CSS 样式信息的地点。
3. The JavaScript area is the place where you type in the JavaScript code to make your web page interactive.
   JavaScript 区域是您输入 JavaScript 代码以使您的网页交互的地方。
4. The preview area is the place where your web page would be displayed as it would on a web browser.
   预览区域是您的网页在网页浏览器中显示的地方。
5. The most important one for you is the “Run” button. Whenever you make any changes in any area, you must click the “Run” button to refresh the preview area.
   您最重要的按钮是“运行”按钮。无论您在任何区域进行任何更改，都必须点击“运行”按钮以刷新预览区域。
6. And the best thing about JSFiddle is that no matter what you do, you can’t break anything here!
   JSFiddle 最好的地方是无论你做什么，你在这里都不会破坏任何东西！
7. Your exercises are given below. Try them out.
   您的练习如下。请尝试。
8. Open a new browser tab. Copy the url given below in the address bar of the new tab, press Enter or return to open it and follow the rest of the instructions.
   打开一个新的浏览器标签页。将以下 URL 复制到新标签页的地址栏中，按 Enter 或 return 打开，并按照剩余的说明操作。

https://jsfiddle.net/u7oxzgmj/13/

Exercise 1: Fiddle with HTML. 练习 1：摆弄 HTML。

HTML provides the text content and the markup of a web page.
HTML 提供网页的文本内容和标记。

1. In the HTML area, line number 10 has the main heading of the page.
   在 HTML 区域，第 10 行是页面的主要标题。
   1. Replace Tom with your name.
      将汤姆的名字替换成你的名字。
      
   2. Click on the “Run” button.
      点击“运行”按钮。
      
   3. You should see the new heading with your name in the preview area.
      您应该在预览区域看到带有您名字的新标题。
      
2. Line number 13 defines a paragraph using <p> tag. Line number 14 has the text displayed inside the paragraph.
   第 13 行定义了一个段落，使用 <p> 标签。第 14 行显示了段落内的文本。
   1. Replace the text with any text of your choice.
      替换文本为任意文本。
      
   2. Click on the “Run” button.
      点击“运行”按钮。
      
   3. You should see the new text reflected in the preview area.
      您应该在预览区域看到新文本的反映。
      
3. Line number 16 defines a division using <div> tag. Line number 17 and 18 have the text displayed inside the div.
   第 16 行使用 <div> 标签定义了一个分区。第 17 行和第 18 行显示了 div 内的文本。
   1. Replace the text with any text of your choice.
      替换文本为任意文本。
      
   2. Click on the “Run” button.
      点击“运行”按钮。
      
   3. You should see the new text reflected in the preview area.
      您应该在预览区域看到新文本的反映。
      

Exercise 2: Fiddle with CSS. 练习 2：玩转 CSS。

CSS provides styling information (such as colors, fonts, and sizes) to the browser. The browser uses this information to customize the view.
CSS 为浏览器提供样式信息（如颜色、字体和大小）。浏览器使用这些信息来自定义视图。

1. In the CSS area, line number 2 controls the background color of the web page.
   在 CSS 区域，第 2 行控制网页的背景颜色。
   1. Replace ‘tan’ with ‘grey’.
      将“tan”替换为“灰色”。
      
   2. Click on the “Run” button.
      点击“运行”按钮。
      
   3. You should see the new color reflected in the preview area.
      您应该在预览区域看到新颜色的反映。
      
   4. Blue, red, green, lightblue, and yellow are all valid colors. Fiddle with them.
      蓝色、红色、绿色、浅蓝色和黄色都是有效颜色。玩转它们。
      
2. Line number 6 controls the font used to display the text in the paragraph (<p>) element.
   行号 6 控制用于在段落（ <p> ）元素中显示文本的字体。
   1. Replace ‘arial’ with ‘times’.
      将‘arial’替换为‘times’。
      
   2. Click on the “Run” button.
      点击“运行”按钮。
      
   3. You should see the new font reflected in the preview area.
      您应该在预览区域看到新字体已反映出来。
      
3. Line number 13 controls how wide the div should be.
   第 13 行控制 div 的宽度。
   1. Change the width to 400px.
      将宽度更改为 400 像素。
   2. Click on the “Run” button.
      点击“运行”按钮。
      
   3. You should see a wider div.
      你应该看到一个更宽的 div。
      

Exercise 3: Fiddle with JavaScript. 练习 3：玩转 JavaScript。

JavaScript makes a web page interactive. When you click on the “Wish” button, the page displays an alert that says “Hello how are you doing?”
JavaScript 使网页具有交互性。当您点击“愿望”按钮时，页面会显示一个提示框，上面写着“你好，最近怎么样？”

Note: If the alert does not appear, then please allow pop up for this website by changing your browser settings
注意：如果警报没有出现，请通过更改浏览器设置允许此网站的弹出窗口

1. In the JavaScript area, line number 2 defines the message that is displayed whenever the “Wish” button is clicked.
   在 JavaScript 区域，第 2 行定义了每次点击“愿望”按钮时显示的消息。
   1. Replace the message with “Good Day”.
      将消息替换为“Good Day”。
      
   2. Click on the “Run” button.
      点击“运行”按钮。
      
   3. Click on the “Wish” button in the preview area.
      点击预览区域的“愿望”按钮。
      
   4. You should see a pop-up alert with your new message.
      您应该会看到一个弹出警告，显示您的新消息。
      
   5. Try with “Hola, como estas”. By the way, that is “Hello, how are you doing” in Spanish.
      尝试使用“Hola, como estas”。顺便说一句，这在西班牙语中是“Hello, how are you doing”。
2. Line number 5 has a function named showtime. It displays the current time.
   第 5 行有一个名为 showtime 的函数。它显示当前时间。
   1. In the HTML area, line number 21 has the word ‘Wish’. Replace it with ‘Show Time’.
      在 HTML 区域，第 21 行有单词“Wish”。将其替换为“Show Time”。
      
   2. Replace ‘hello()’ in line number 20 with ‘showtime()’.
      将第 20 行中的‘hello()’替换为‘showtime()’。
   3. Click on the “Run” button.
      点击“运行”按钮。
      
   4. In the preview area, you will now see a button named ‘Show Time’.
      在预览区域，您现在将看到一个名为“显示时间”的按钮。
      
   5. Click on it. A message with the current time should pop up.
      点击它。应弹出一个显示当前时间的消息。
      

Next Steps 下一步

Try fiddling with the code. You cannot break it. When you think you have really messed up, just click here or right click, copy the link, and paste it on a new browser window. It will open a new tab with the original HTML document so you can start fiddling from the beginning.
尝试修改代码。你无法将其破坏。当你认为你真的搞砸了，只需点击此处或右键点击，复制链接，并将其粘贴到新的浏览器窗口中。它将打开一个新标签页，显示原始 HTML 文档，这样你就可以从头开始修改。

Author(s) 作者（们）

Ramesh Sannareddy

Other Contributor(s) 其他贡献者

Rav Ahuja  拉夫·阿胡贾

Source: https://author-ide.skills.network/render?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZF9pbnN0cnVjdGlvbnNfdXJsIjoiaHR0cHM6Ly9jZi1jb3Vyc2VzLWRhdGEuczMudXMuY2xvdWQtb2JqZWN0LXN0b3JhZ2UuYXBwZG9tYWluLmNsb3VkL0lCTURldmVsb3BlclNraWxsc05ldHdvcmstQ0QwMTAxRU4tU2tpbGxzTmV0d29yay9sYWJzL2RlbW9zL2pzZmlkZGxlLWRlbW8ubWQiLCJ0b29sX3R5cGUiOiJpbnN0cnVjdGlvbmFsLWxhYiIsImF0bGFzX2ZpbGVfaWQiOjI0NDk1LCJhZG1pbiI6ZmFsc2UsImlhdCI6MTczMjA4OTkwOX0.BvaeZxeqedCzddgsQU3RIuPttRKixkqnUAmAdch5l00