When typing a Blog Post, the font colors can be changed using the
tool provided in the rich-text Post Editor. Unfortunately, there is no
icon or tool to add highlighting to the text. However, as we shall
discuss, it is possible to add highlights to the text and choose a color
to appear behind a word or lines of text. This tutorial will also
explain how to enclose the text within a box with a colored background.
Text Highlighting
Create the post as you normally would using the “Compose” mode. If there are some words that you want to highlight, switch to the “Edit HTML” mode and insert the following tags before and after the TEXT TO BE HIGHLIGHTED. Here are some examples of common color highlights and codes to be inserted:-
1. Yellow highlight
TEXT TO BE HIGHLIGHTED
2. Green highlight
TEXT TO BE HIGHLIGHTED
3. Blue highlight
TEXT TO BE HIGHLIGHTED
Note: You can insert other color codes to change the background color to something of your choice. How to do that is to type any word and change the font color. View it in “Edit HTML” mode to extract the color code.
Text in Box with Colored Background
We can place a group of text within a box by using the Table HTML codes. A simple Table code looks like this:-
The above code will give you a box of 200px width, a border of 1px and a background color:-
You can do away with the border by changing border value to "0". Change the background to a different color by inserting the relevant color code from our Color Code Chart. Instead of having a color, you can have a background image in the box. For more details on this and the various Table HTML attributes, refer to Tables – HTML Basics and Tutorial.
@ Copyright 2012 Pradeep Lodhi (ethical hacker)
Text Highlighting
Create the post as you normally would using the “Compose” mode. If there are some words that you want to highlight, switch to the “Edit HTML” mode and insert the following tags before and after the TEXT TO BE HIGHLIGHTED. Here are some examples of common color highlights and codes to be inserted:-
1. Yellow highlight
<span style="background-color: rgb(255, 255, 0);">TEXT TO BE HIGHLIGHTED</span>
|
|---|
TEXT TO BE HIGHLIGHTED
2. Green highlight
<span style="background-color: rgb(51, 204, 0);">TEXT TO BE HIGHLIGHTED</span>
|
|---|
TEXT TO BE HIGHLIGHTED
3. Blue highlight
<span style="background-color: rgb(51, 204, 255);">TEXT TO BE HIGHLIGHTED</span>
|
|---|
TEXT TO BE HIGHLIGHTED
Note: You can insert other color codes to change the background color to something of your choice. How to do that is to type any word and change the font color. View it in “Edit HTML” mode to extract the color code.
Text in Box with Colored Background
We can place a group of text within a box by using the Table HTML codes. A simple Table code looks like this:-
<table border="1" cellpadding="1" width="200"><tbody><tr>
<td bgcolor="#33ffcc">TEXT IN COLORED BOX </td></tr></tbody></table> |
|---|
The above code will give you a box of 200px width, a border of 1px and a background color:-
| TEXT IN COLORED BOX |
You can do away with the border by changing border value to "0". Change the background to a different color by inserting the relevant color code from our Color Code Chart. Instead of having a color, you can have a background image in the box. For more details on this and the various Table HTML attributes, refer to Tables – HTML Basics and Tutorial.
@ Copyright 2012 Pradeep Lodhi (ethical hacker)
No comments:
Post a Comment