The Tutorial-Wizards Easiest Tutorials On The Web

HTML Basic – Changing the colour of text ‘Making Pretty Text’

Author: Dan1601

Aim: Learning to use the tags to change the appearance of text.

Requirements: The previous tutorial would be helpful, but isn't necessary.

Howto:

  • Remember the plain old text from our 'Hello World' example from the previous tutorial? Plain text is pretty boring, so lets add something interesting to it. We can use the <font> tags to change the appearance of the text enclosed in them.
  • To change the colour of the text, we can add the color="" term to the tag. The colour we want the text to be will go inbeween the quotation marks. Eg. <font colour="blue">.
  • The <font> tags also support HTML colour codes. These codes usually start with a # and are followed ny 6 numbers or letters. This 6 digit code would simply replace the name of the colour in the <font> tag. (Here is a small list of HTML Colour Codes).
  • Lets change the colour of the text in our hello world file from the previous tutorial. To make the body text display in yellow, we will add the <font color="yellow"> tag around it. Here is what it will look like: (I have highlighted the added tags in red)
    <html>
    <head><title>My First Hello World File</title>
    </head>
    <body>
    <font color="yellow">Hello World</font> <!-- Don't forget to close the font tag! -->
    </body>
    </html>

    Of course, any colour can be used, so don't feel limited by the colour names, you can also look up colours on the HTML colour code list, which I linked to just above.
  • Of course, with the font tag, we can change the font. To do this, we need to add the style="" term to the font tag. There are many fonts that you can use, but it is reocmmended that you only use basic fonts that browsers naturally support. Here's an example:
    <html>
    <head><title>My First Hello World File</title>
    </head>
    <body>
    <font color="yellow" style="impact">Hello World</font>
    </body>
    </html>

    It doesn't matter if this goes before, or after the colour="" term, as long as they are separated by a space.
  • Now, lets change the size of the text! To do this, all we need to do is add size="" term to the <font> tag.
    <html>
    <head><title>My First Hello World File</title>
    </head>
    <body>
    <font color="yellow" style="impact" size="5">Hello World</font>
    </body>
    </html>

    Simple, right?
  • For headings, the font tag probably isn't the most efficient thing to use. Instead of using the font tag, we're going to use a header tag. This tag is simple to use; all you do is surround your heading with a <h(size of heading)> tag. The heading sizes you can use range from 1 to 6, 1 being the largest, most prominent heading, and 6 being a much smaller subheading. This tag can also be used with the font tags, but it isn't necessary.
  • If you haven't already, save your .html file, and see how you've changed the text. Experiment a little to see how different attributes changes the text, and find a good combination that suits the purpose you are using the text for.

Troubleshooting:

  • The color tag doesn't work! - Make sure you are spelling it the American-English way, without the 'u'. This also applies for any other words that the Americans have removed letters from.
  • What's that <!-- --> thing you've got in the Hello World example? - That's a 'comment'. Your browser will omit anything between the comment marks. It's mainly used for documentation purposes.
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

Trackbacks are disabled.