You have added a line break inside the text. Let's add some formatted text next." />
</Exercise>
<Exercise
task="Add opening and closing !_b_! tags at the blue arrow to define bold text."
level="3" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<p>
Some text.<br>
Some more text.<br>
$code_hint$
</p>
</body>
</html>
]]>
</SourceCode>
<CodeHint />
<ExpectedCode
fail="Add the code !_<b></b>_! at the blue arrow.">
<![CDATA[<b></b>]]>
</ExpectedCode>
</Exercise>
<Exercise
task="Add the text '_Some bold text._' between the !_b_! tags."
level="3" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<p>
Some text.<br>
Some more text.<br>
<b>$code_hint$</b>
</p>
</body>
</html>
]]>
</SourceCode>
<CodeHint />
<ExpectedCode
fail="Add the code !_<b>Some bold text.</b>_! at the blue arrow.">
<![CDATA[<b>Some bold text.</b>]]>
</ExpectedCode>
<Run success="Great! The !_b_! tag is used to define bold text." />
</Exercise>
<Exercise
task="Now use an !_i_! tag to add the italic text '_Some italic text._'."
level="4" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<p>
Some text.<br>
Some more text.<br>
<b>Some bold text.</b><br>
$code_hint$
</p>
</body>
</html>
]]>
</SourceCode>
<CodeHint />
<ExpectedCode
fail="Add the code !_<i>Some italic text.</i>_! at the blue arrow.">
<![CDATA[<i>Some italic text.</i>]]>
</ExpectedCode>
<Run success="Awesome job!" />
</Exercise>
<Exercise
task="Congratulations, you've learned basic text formatting with HTML 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="Images"
example="<img src="myimage.png">"
description="In this lesson you'll learn to include images in your web pages.">
<Files
template="simple_project"
template2="simple_project_images"
project_name="My Website">
<CodeFile name="index.html" />
</Files>
<Exercise
task="Press Run to view the website below. It contains an image."
level="1" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<img$code_hint$ src="img/android.jpg$code_hint_1$">
$code_hint_2$
</body>
</html>
]]>
</SourceCode>
<Run success="Great! Let's learn how images work in HTML." />
</Exercise>
<Exercise
task="The !_img_! tag is used to include an image."
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="The !_src_! attribute defines the image. Here the file !_img/android.jpg_! of this website project is used."
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="Add a second image with the file !_img/html.jpg_!."
level="4" >
<CodeHint_2 />
<ExpectedCode
fail="Add the code !_<img src="img/html.jpg">_!.">
<![CDATA[<img src="img/html.jpg">]]>
</ExpectedCode>
<Run success="Great!" />
</Exercise>
<Exercise
task="Congratulations, you've learned to include images 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="Links"
example="<a href="www.google.com">...</a>"
description="In this lesson you'll learn to include hyperlinks in your web pages.">
<Files
template="simple_project"
template2="simple_project_images"
project_name="My Website">
<CodeFile name="index.html" />
</Files>
<Exercise
task="Press Run to view the website below. It contains a hyperlink that you can click on to open another web page."
level="1" >
<SourceCode>
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<h1>My Website</h1>
<a$code_hint$ href="http://www.google.com$code_hint_1$">Google$code_hint_2$</a>
$code_hint_3$
</body>
</html>
]]>
</SourceCode>
<Run success="Great! Click on the '_Google_' link in this web page. Let's learn how links work in HTML." />
</Exercise>
<Exercise
task="A hyperlink is defined with the !_a_! tag in HTML."
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="The !_href_! attribute of the !_a_! tag specifies the destination web page of the link. Here it is '_http://www.google.com_'."
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="The text between the opening and closing !_a_! tags is shown in the web page."
level="1" >
<CodeHint_2 />
</Exercise>
<Exercise
task="Add a second link to '_http://www.android.com_' with the the text '_Android_'."
level="4" >
<CodeHint_3 />
<ExpectedCode
fail="Add the link with the !_a_! tag !_<a href="http://www.android.com"></a>_!.">
<![CDATA[<a href="http://www.android.com">]]>
</ExpectedCode>
<ExpectedCode
fail="Add the text '_Android_' between the opening and closing !_a_! tags.">
<![CDATA[<a href="http://www.android.com">Android</a>]]>
</ExpectedCode>
<Run success="Awesome! Test your newly added hyperlink." />
</Exercise>
<Exercise
task="To use an image as a link add an image with the file !
Back to home |
File page
Subscribe |
Register |
Login
| N