Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Web Development Lesson 2 - Text ======
===== Formatting Text =====
==== Objectives ====
In this exercise, you'll learn some more HTML tags and how to use them to make sections of your text stand out.

==== Setup ====

Continue to use the jsfiddle from the previous lesson. If you need it again, here it is.
<code>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></code>

==== Bold ====

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

<code><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></code>
    * What do you think <html><strong></html> does? It makes the text between the tags **bold**.

==== Italic ====

  * In the second paragraph, make 'pet dog' italic.
  * Add <html><em></html> before 'pet' and <html></em></html> after 'dog'.
<code><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></code>
  * Click 'Run' and check the result.
  * <html><em></html> is short for "emphasise" and by default makes the enclosed text //italic//.

==== Superscript ====

  * Make 'mountains' superscript in the second paragraph.
  * Add <html><sup></html> before 'mountains' and <html></sup></html> afterwards.
<code><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></code>
  * Click 'Run' to see what <html><sup></html> does.
  * <html><sup></html> is short for superscript.
  * <html><sub></html> is short for subscript, which puts the text below the line. Try it if you like.

==== Rule: Nesting Tags ====
  * It's possible to apply more than one tag to text. Notice that the <html><em></html> tag pair is inside the <html><p></html> tag pair.
  * We can do the same for //em// and **strong**. Let's italicise the word 'ball'.
<code><strong>he likes to chase a <em>ball</em></strong></code>
  * Click 'Run' to see the result. The word 'ball' should be both bold and italicised.
  * You cannot mix the tag order. <html><strong><em></strong></em></html> is incorrect. The results will be unpredictable.

[[en:web_development:text:attributes|Next: Attributes]]
Tech School

User Tools

Site Tools

Page Tools
