====== 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.

My Story
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.
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.

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

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.

* What do you think does? It makes the text between the tags **bold**. ==== Italic ==== * In the second paragraph, make 'pet dog' italic. * Add before 'pet' and after 'dog'. 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. * Click 'Run' and check the result. * is short for "emphasise" and by default makes the enclosed text //italic//. ==== Superscript ==== * Make 'mountains' superscript in the second paragraph. * Add ^{before 'mountains' and} afterwards. 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. * Click 'Run' to see what ^{does.
* ^{is short for superscript.
* _{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 tag pair is inside the tag pair.
* We can do the same for //em// and **strong**. Let's italicise the word 'ball'.
he likes to chase a ball
* Click 'Run' to see the result. The word 'ball' should be both bold and italicised.
* You cannot mix the tag order. is incorrect. The results will be unpredictable.

[[en:web_development:text:attributes|Next: Attributes]]}}}