Web Development Lesson 2 - Text

In this exercise, you'll learn some more HTML tags and how to use them to make sections of your text stand out.

Continue to use the jsfiddle from the previous lesson. If you need it again, here it is.

My Story
<p>My friend Pablo has a pet dog called Sam who likes to have his tummy scratched. When they go to the park, he likes to chase a ball. He rolls in the dirt so Pablo has to wash him when they get home.</p>
<p>On Sundays they drive to the mountains where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home.</p>

• Let's try another HTML tag. Add <strong> before “he likes to chase a ball.” and </strong> after “he likes to chase a ball.” so that the first paragraph looks like this.

<p>My friend Pablo has a pet dog called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a ball</strong>. He rolls in the dirt so Pablo has to wash him when they get home.</p>

• What do you think <strong> does? It makes the text between the tags bold.

• In the second paragraph, make 'pet dog' italic.
• Add <em> before 'pet' and </em> after 'dog'.

<p>My friend Pablo has a <em>pet dog</em> called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a ball</strong>. He rolls in the dirt so Pablo has to wash him when they get home.</p>

• Click 'Run' and check the result.
• <em> is short for “emphasise” and by default makes the enclosed text italic.

• Make 'mountains' superscript in the second paragraph.
• Add <sup> before 'mountains' and </sup> afterwards.

<p>On Sundays they drive to the <sup>mountains</sup> where he runs around smelling the grass and wagging his tail. He gets so tired that he sleeps all the way home.</p>

• Click 'Run' to see what <sup> does.
• <sup> is short for superscript.
• <sub> is short for subscript, which puts the text below the line. Try it if you like.

• It's possible to apply more than one tag to text. Notice that the <em> tag pair is inside the <p> tag pair.
• We can do the same for em and strong. Let's italicise the word 'ball'.

<strong>he likes to chase a <em>ball</em></strong>

• Click 'Run' to see the result. The word 'ball' should be both bold and italicised.
• You cannot mix the tag order. <strong><em></strong></em> is incorrect. The results will be unpredictable.

Next: Attributes