" />
</Exercise>
<Exercise
task="Set the !_text-decoration_! style to !_underline_!."
code_file="styles.css"
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the CSS style !_text-decoration: underline;_!.">
<![CDATA[text-decoration: underline;]]>
</ExpectedCode>
<Run success="Awesome! Let's change the font size next." />
</Exercise>
<Exercise
task="Set the !_font-size_! style to !_2em_!."
code_file="styles.css"
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the CSS style !_font-size: 2em;_!.">
<![CDATA[font-size: 2em;]]>
</ExpectedCode>
<Run success="Perfect! Let's change the font style as well." />
</Exercise>
<Exercise
task="Set the !_font-style_! style to !_italic_!."
code_file="styles.css"
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the CSS style !_font-style: italic;_!.">
<![CDATA[font-style: italic;]]>
</ExpectedCode>
<Run success="Good job! You have changed the text style by setting different CSS styles." />
</Exercise>
<Exercise
task="Congratulations, you've learned about CSS text styles 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 JavaScript and DOM maninpulation to code the dynamic behavior of your web pages"
title="JavaScript How To"
example="<script>...</script>"
description="In this lesson you'll learn how to include JavaScript in your web page to code its dynamic behavior.">
<Files
template="simple_project"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="scripts.js" />
</Files>
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<script>$code_hint$
alert$code_hint_1$("Hello from JavaScript!"$code_hint_2$);
</script>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="scripts.js">
<![CDATA[
]]>
</SourceCode>
<Run success="The web page opens an alert dialog with a message. Let's learn how to do this." />
</Exercise>
<Exercise
task="The HTML code contains a !_script_! tag which defines JavaScript code that is executed when the web page is loaded."
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="The code calls the built-in JavaScript function !_alert_! which opens the dialog."
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="Change the message of the dialog to something else."
level="3" >
<CodeHint_2 />
<Run success="Good job!" />
</Exercise>
<Exercise
task="We now use a !_src_! atribute in the !_script_! tag to include the external JavaScript file !_scripts.js_! instead of including the JavaScript code directly in HTML."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<script src="js/scripts.js$code_hint$"></script>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="scripts.js">
<![CDATA[
$space$
alert("Hello from JavaScript!");$code_hint$
]]>
</SourceCode>
<CodeHint />
</Exercise>
<Exercise
task="The JavaScript file !_scripts.js_! contains the !_alert_! function call."
code_file="scripts.js"
level="1" >
<CodeHint />
<Run success="As you see the external JavaScript code is still executed when the page is displayed." />
</Exercise>
<Exercise
task="Congratulations, you've learned how to include JavaScript in your web page 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="Events"
example="onclick="showDialog()""
description="In this lesson you'll learn to react to user events in your web page.">
<Files
template="simple_project"
template2="simple_project_images"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="scripts.js" />
</Files>
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<img src="img/android.jpg"$code_hint$>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="scripts.js">
<![CDATA[
]]>
</SourceCode>
<Run success="The web page contains an image. Let's implement an action when it is clicked." />
</Exercise>
<Exercise
task="Add an attribute !_onclick="alert('Android')"_! to the !_img_! tag. The !_onclick_! attribute defines JavaScript that is executed when the element is clicked."
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the code !_onclick="alert('Android')"_! at the blue arrow.">
<![CDATA[onclick="alert('Android')"]]>
</ExpectedCode>
<Run success="Good job! Now tap on the image." />
</Exercise>
<Exercise
task="Change the !_alert('Android')_! call to !_showDialog()_! to call your own JavaScript function."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<img src="img/android.