_img/android.jpg_! inside the !_a_! tags."
level="4" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<a href="http://www.android.com">
$code_hint$
</a>
</body>
</html>
]]>
</SourceCode>
<CodeHint />
<ExpectedCode
fail="Add the code !_<img src="img/android.jpg">_! at the blue arrow.">
<![CDATA[<img src="img/android.jpg">]]>
</ExpectedCode>
<Run success="Great! Click on the image to follow the link." />
</Exercise>
<Exercise
task="Congratulations, you've learned about links 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="Lists"
example="<ul>...</ul>"
description="In this lesson you'll learn to include bullet lists in your web pages.">
<Exercise
task="Press Run to view the website below. It contains a list."
level="1" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<ul>$code_hint$
<li>Google</li>$code_hint_1$
$code_hint_2$
</ul>
</body>
</html>
]]>
</SourceCode>
<Run success="Great! There's only on list item in this bullet list yet. Let's add some more." />
</Exercise>
<Exercise
task="The !_ul_! tag is used to define a list in HTML."
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="Each list item is defined with an !_li_! tag."
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="Add a second list item with the text '_Android_'."
level="4" >
<CodeHint_2 />
<ExpectedCode
fail="Add the list item with !_<li>Android</li>_!.">
<![CDATA[<li>Android</li>]]>
</ExpectedCode>
<Run success="Awesome! You have added a second list item." />
</Exercise>
<Exercise
task="Congratulations, you've learned about lists 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 CSS to define the visual appearance of your web pages"
title="CSS How To"
example="<style>...</style>"
description="In this lesson you'll learn how to include CSS in your web page to define its visual styles.">
<Files
template="simple_project"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="styles.css" />
</Files>
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1 style$code_hint$="color: Red$code_hint_1$;">My Website</h1>
<p>A paragraph.<p>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="styles.css">
<![CDATA[
]]>
</SourceCode>
<Run success="As you see this web page has a red heading. Let's see how this works." />
</Exercise>
<Exercise
task="The !_h1_! tag has an inline !_style_! attribute which sets CSS styles."
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="Now change the CSS !_color_! style to !_Blue_!."
level="3" >
<CodeHint_1 />
<ExpectedCode
fail="Just change !_Red_! to !_Blue_!.">
<![CDATA[color: Blue]]>
</ExpectedCode>
<Run success="Awesome! Now the heading is blue." />
</Exercise>
<Exercise
task="Instead of a !_style_! attribute we use a !_style_! tag now, which can define styles for several tags of the web page."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<style$code_hint$>
h1$code_hint_1$ { color: Blue$code_hint_2$; }
$code_hint_3$
</style>
</head>
<body>
<h1>My Website</h1>
<p>A paragraph.<p>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="styles.css">
<![CDATA[
]]>
</SourceCode>
<CodeHint />
</Exercise>
<Exercise
task="Our internal style sheet defines a rule set for !_h1_! tags."
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="The rule set sets the CSS !_color_! style to !_Blue_!."
level="1" >
<CodeHint_2 />
<Run success="Our heading is still blue." />
</Exercise>
<Exercise
task="Now add a second rule set for !_p_! tags which sets the CSS !_color_! style to !_Green_!."
level="4" >
<CodeHint_3 />
<ExpectedCode
fail="Just add the CSS code !_p { color: Green; }_!.">
<![CDATA[p { color: Green; }]]>
</ExpectedCode>
<Run success="Good job! The paragraph text is green now." />
</Exercise>
<Exercise
task="Instead of defining a !_style_! tag directly inside the HTML page, we now use a !_link_! tag to link to the external CSS file !_styles.css_! for the styles."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css$code_hint$" rel="stylesheet">
</head>
<body>
<h1>My Website</h1>
<p>A paragraph.<p>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="styles.css">
<![CDATA[
$space$
h1 { color: Blue; }$code_hint$
p { color: Green; }
]]>
</SourceCode>
<CodeHint />
</Exercise>
<Exercise
task="The CSS file !_styles.css_! contains the CSS rule sets for !_h1_! and !_p_!."
code_file="styles.css"
level="1" >
<CodeHint />