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 ======
===== Attributes =====
==== Setup ====

Continue using jsfiddle with the same code from the previous screen. Here it is again.
<code>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></code>
  * Some basic formatting can be done using html tags - we've seen <html><p></html>, <html>em</html>, <html>strong</html> and <html>sup</html>.
  * More complex formatting is available using attributes. Attributes are parameter:value pairs inside tags, and they apply to everything between the tags.

==== Colour ====

  * As an example, let's make the words 'pet dog' red by adding <html>style="color:red"</html> inside the <html><em></html> tag as follows.
<code><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></code>
  * Run the code to check the result.
  * We are applying a style, hence <html>style=""</html>.
  * Inside the inverted commas is the specific style, designated by the parameter:value pair, where <html>color</html> is the parameter (the colour of the text) and <html>red</html> is the value we wish to use.
  * Notice the <html>:</html> used to separate the parameter and the value.

==== Tag: Span ====

  * We can select a section of text to style by using <html><span></html>. Let's make the text 'wagging his tail' blue.
<code><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></code>
  * Run the code to see whether you did it correctly.

==== Rule: Multiple Parameters ====

  * You can change two styles at the same time by separating them with a <html>;</html> as follows.
<code><em style="color:red; font-weight:700;">pet dog</em></code>
  * Now the red text should also be bold because it has a higher <html>font-weight</html>. 300 is very faint and 900 is very heavy.
  * The <html>;</html> marks the end of a single <html>parameter:value</html> pair so when the browser encounters more text inside the inverted commas, it knows to expect a new pair.

==== Indent ====

  * We can indent the first line of a paragraph with <html>text-indent</html>.
<code><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></code>

==== Alignment ====

  * 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.
<code><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></code>
  * There are many other style attributes, but most are more commonly applied to headings.

[[web_development:text:headings|Next: Headings]]
Tech School

User Tools

Site Tools

Page Tools
