Web Design 1 - HTML Lesson 13 - Special characters, Blockquote

Special Characters

In your HTML code there will be times you want to use a special character - as in foreign languages, or other types of symbols such as mathematical ones

To do this you cannot just type them into your code. Why not? One reason is that certain characters are set aside to mean something in the programming code. For example - what if you need to show a this < in your page? In the code it indicates something else to the browser.

There are codes that tell the browser to display the characters. For instance - in order to get the tag symbol to appear in my code I entered: 


This put the less than sign into the page. 

Another popular code is to create a non-breaking space. You may have noticed that if you put more than one space between words in your code that when it displays there is only one. How do you add extra spaces if you want them? Just put in the code for a non-breaking space: 


These can be strung together if you need several spaces: 


Where can you find these codes? 

There are many online sources - but W3C Schools has pretty thorough lists.



An additional style that you might like to use on a page is the blockquote element.

Usually we set this to be indented a little bit and have a special style to help it stand out on the page.
Here is one example of the code:
- we are setting a background color, a color border on the left, some padding so the text is not right up against the side of the box, and a margin to add white space around the outside

In your content section you simply add the code in where the text should show up:

<blockquote>commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla conseuat massa quis enim. </blockquote>

The resulting screen may look something like this:

Assignment for Lesson 13
  1. Add 3 special characters to your page

  2. Add a blockquote section to your style and use it in your content page

  3. Challenges: try mixing up the characters and trying some unusual ones, use your own style design on the blockquote section