<Exercise
task="The HTML code uses a !_script_! tag to specify the JavaScript file !_scripts.js_! for the dynamic behavior of the page.\n'HTML代码使用! _script_ !标签指定JavaScript文件! _scripts.js_ !对动态页面的行为。'"
code_file="index.html"
level="1" >
<CodeHint_2 />
</Exercise>
<Exercise
task="The CSS file !_styles.css_! defines the visual styles of the web page.\n'CSS文件! _styles.css_ !定义了视觉风格的网页。'"
code_file="styles.css"
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="This !_font_size_! CSS style for example defines the font size in the body of the web page.\n'这个! _font_size_ !CSS样式例如定义了字体大小体内的网页'"
code_file="styles.css"
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="The JavaScript file !_scripts.js_! defines the dynamic behavior of the web page.\n'JavaScript文件! _scripts.js_ !定义了动态行为的网页。'"
code_file="scripts.js"
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="This JavaScript code for example makes the web page show the current date and time.\n'“这JavaScript代码例如使web页面显示当前日期和时间。'"
code_file="scripts.js"
level="1" >
<CodeHint_1 />
<Run success="As you see the web page displays the current date and time. Let's modify it a bit.\n'当你看到的web页面显示当前日期和时间。让我们修改它一个bit.的'"/>
</Exercise>
<Exercise
task="Modify the HTML code at the blue arrow to show '_Current Time_'. Then run.\n'修改HTML代码的蓝色箭头显示的'_Current Time_'。然后运行,'"
code_file="index.html"
level="5" >
<CodeHint_3 />
<ExpectedCode
fail="Just change the text '_My Website_' to '_Current Time_'.\n'就改变文本的'_My Website_’的'_Current Time_''">
<![CDATA[<h1>Current Time]]>
</ExpectedCode>
<Run success="Awesome!" />
</Exercise>
<Exercise
task="Change the !_font_size_! to !_2em_!. Then run."
code_file="styles.css"
level="5" >
<CodeHint_1 />
<ExpectedCode
fail="Just change the line to !_font-size: 2em_!.">
<![CDATA[font-size: 2em]]>
</ExpectedCode>
<Run success="Good job! You have customized the web page. Use the blue button below to open the web page in a real browser as well." />
</Exercise>
<Exercise
task="Congratulations, you've learned about the basic structure of a website in this lesson! Now play with the code a bit on your own. Change the text which is shown and run it as often as you like. Then continue with the next lesson." >
</Exercise>
</Lesson>
<Lesson
section="Use HTML to code web pages"
title="Tags"
example="<h1>"
description="In this lesson you'll get to know HTML, the markup language for describing web pages.">
<Exercise
task="Press Run to view the website below. The website is described as HTML code, which a web browser can display as a document."
level="1" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>$code_hint$
<body>$code_hint_2$
<h1>My first Heading</h1>$code_hint_3$
<p>This is a paragraph</p>$code_hint_4$
$code_hint_5$
</body>
</html>$code_hint_1$
]]>
</SourceCode>
<Run success="Great! Below you can see how a web browser displays the HTML code as a web page. Let's continue." />
</Exercise>
<Exercise
task="The blue arrow points to a HTML tag, which is a keyword surrounded by angle brackets. Press on the blue arrow, then continue."
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="HTML tags normally come in pairs like. The first tag in a pair is the opening tag, the second tag is the closing tag and is written with a slash. The whole text including both tags is called an element."
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="The text between the opening and closing !_body_! tags describes the visible page content. Each HTML tag describes different document content."
level="1" >
<CodeHint_2 />
</Exercise>
<Exercise
task="The text between the !_h1_! tags describes a heading."
level="1" >
<CodeHint_3 />
</Exercise>
<Exercise
task="The text between the !_p_! tags describes a paragraph."
level="1" >
<CodeHint_4 />
<Run success="As you see our web page has one header and one paragraph. Let's add more content next." />
</Exercise>
<Exercise
task="Add a second paragraph with the the text '_This is another paragraph_'."
level="4" >
<CodeHint_5 />
<ExpectedCode
fail="Just add the code !_<p>This is another paragraph</p>_!.">
<![CDATA[<p>This is another paragraph</p>]]>
</ExpectedCode>
<Run success="Good job!" />
</Exercise>
<Exercise
task="Congratulations, you've learned HTML basics in this lesson! Now play with the code a bit on your own. Change the text which is shown and run it as often as you like. Then continue with the next lesson." >
</Exercise>
</Lesson>
<Lesson
title="Text"
example="<b>Bold</b>"
description="In this lesson you'll learn about text formatting tags.">
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<p>
Some text. $code_hint$Some more text.
</p>
</body>
</html>
]]>
</SourceCode>
<Run success="There's only a heading and some text yet. Let's continue." />
</Exercise>
<Exercise
task="Add a !_br_! tag at the blue arrow to add a line break inside the text."
level="4" >
<CodeHint />
<ExpectedCode
fail="Add the tag !_<br>_! at the blue arrow.">
<![CDATA[<br>]]>
</ExpectedCode>
<Run success="Awesome!