Web Development Lesson 2 - Letter

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