Web Development Lesson 2 - Text

Continue using jsfiddle with the same code from the previous screen. Here it is again.

My Story
<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 <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.</p>
<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>

• Some basic formatting can be done using html tags - we've seen <p>, em, strong and sup.
• More complex formatting is available using attributes. Attributes are parameter:value pairs inside tags, and they apply to everything between the tags.

• As an example, let's make the words 'pet dog' red by adding style="color:red" inside the <em> tag as follows.

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

• Run the code to check the result.
• We are applying a style, hence style="".
• Inside the inverted commas is the specific style, designated by the parameter:value pair, where color is the parameter (the colour of the text) and red is the value we wish to use.
• Notice the : used to separate the parameter and the value.

• We can select a section of text to style by using <span>. Let's make the text 'wagging his tail' blue.

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

• Run the code to see whether you did it correctly.

• You can change two styles at the same time by separating them with a ; as follows.

<em style="color:red; font-weight:700;">pet dog</em>

• Now the red text should also be bold because it has a higher font-weight. 300 is very faint and 900 is very heavy.
• The ; marks the end of a single parameter:value pair so when the browser encounters more text inside the inverted commas, it knows to expect a new pair.

• We can indent the first line of a paragraph with text-indent.

<p style="text-indent:30px;">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>

• Let's try something different. Sometimes you'll want text at the right of the screen instead of the left. Let's move the first paragraph to the right.

<p style="text-align:right;">My friend Pablo has a <em style="color:red">pet dog</em> called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.</p>

• There are many other style attributes, but most are more commonly applied to headings.

Next: Headings