More Formatting!

Making things stand out.

Introduction

In this section we'll learn a bit more about modifications we can make to our content.

Special Characters

Sometimes we would like to include characters in our text which normally are part of HTML code (eg < and >). Or we would like to make use of characters which are not on our keyboard (eg. † or ♣). We include these by way of character codes

&codename;
or
&#codenumber;

A character code begins with an ampersand ( & ) followed by the code (which may be a name or a numeric value) and ends with a semicolon ( ; ). If we use the codenumber then we also place a hash ( # ) in front of the code number.

charactercodes.html

  1. <body>
  2. <p>Clubs is the character code for a clubs symbol - &clubs; or &#9827;</p>
  3. <p>Dagger is the character code for a dagger symbol - &dagger; or &#8224;</p>
  4. </body>
Character Codes

Clubs is the character code for a clubs symbol - ♣ or ♣

Dagger is the character code for a dagger symbol - † or †

Here are some useful character codes:

Symbol Name Number
< lt 60
> gt 62
& amp 38
© copy 169
» raquo 187
« laquo 171
½ frac12 189

But there are many more:

Preformatted Text

Normally, newlines and spaces in our HTML code are ignored. This is a good thing as it allows us to space out our HTML to make it easy to read the code. Sometimes we would like some of our content so show up exactly as we have it in the code however. To achieve this we may use the pre tag, which stands for preformatted.

<pre> content </pre>

preformatted_text.html

  1. <body>
  2. <pre>
  3. This is     a     sentence with
  4.         some bizarre formatting.
  5. </pre>
  6. </body>
Preformatted Text
This is     a     sentence with

        some bizarre formatting.
						

Preformatted can be useful. In another tutorial we'll learn about CSS which offers other means to achieve the same output but a bit cleaner (though a little bit more work).

Comments

Sometimes as developers we would like to leave comments in the HTML to remind us about things. We don't want them to display in the browser as they are for our benefit, not the end users. We do this by way of comment tags. A comment follows the following format:

<!-- comment here -->

comments.html

  1. <body>
  2. <p>And the Lord spake, saying, 'First shalt thou take out the Holy Pin.
  3. Then, shalt thou count to three. No more. No less. Three shalt be the number
  4. thou shalt count, and the number of the counting shall be three. Four shalt
  5. thou not count, neither count thou two, excepting that thou then proceed to
  6. three. Five is right out. Once at the number three, being the third number
  7. to be reached, then, lobbest thou thy Holy Hand Grenade of Antioch towards
  8. thy foe, who, being naughty in My sight, shall snuff it.'</p>
  9. <!-- Maybe this would be better as a list but we won't
  10. learn how to do those until section 9 -->
  11. <p><i>Monty Python and the Holy Grail</i></p>
  12. </body>
Comments

And the Lord spake, saying, 'First shalt thou take out the Holy Pin. Then, shalt thou count to three. No more. No less. Three shalt be the number thou shalt count, and the number of the counting shall be three. Four shalt thou not count, neither count thou two, excepting that thou then proceed to three. Five is right out. Once at the number three, being the third number to be reached, then, lobbest thou thy Holy Hand Grenade of Antioch towards thy foe, who, being naughty in My sight, shall snuff it.'

Monty Python and the Holy Grail

Comments may be on a single line, or over multiple lines. They may be on a line, which also has code, before or after the html code.

Good Usage

Some people like to put comments all over their code but this is generally frowned upon. It clutters your code and makes it harder to read. (This goes against our goal that code should always be as clean and easy to read as possible)

Sometimes comments are used to make a remark about the content. Sometimes comments are used to identify different parts of your code (eg, this is a menu, this is the footer, etc). Sometimes comments are used to hide a section of your HTML while you are testing something. All of these are valid uses of comments but remember to do so sparingly.

Summary

&codename;
Include a character by it's character code name.
&#codenumber;
Include a character by it's character code number.
<pre> </pre>
Display content exactly as it appears in the code (including spaces and newlines).
<!-- -->
A comment which is not rendered within the browser.
No new concepts introduced in this section.

Activities

Now let's make our content a little more interesting.

  • Discover some other character codes and experiment with them.
  • Take a paragraph of text and add random spaces and newlines to it. See how it looks when enclosed with p tags. Now change them to pre tags and observe the difference.
  • Put some comments in your code. See that they don't display in your browser. Now use comments to hide a section of your content.

As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.