Welcome to the profile and comments decorating class !! (^_^)
As I sometimes drop by a few members' profiles, about 95% of active EC members, have not utilized the facilities of their profiles to make their profiles better and more attractive. Only less than 1% of them, have applied HTML as a tool, to change the size, color, and font of their literature. As you know, all comments (of profiles and blogs) are written by a black simple font (Tahoma) with a fixed size. So I decided to introduce HTML as a tool which is so easy to learn, so simple to use, and so powerful to make an attractive and beautiful profile. Also it can be useful in designing websites and moderating them in desired style. In fact by this work, we want to create diversity in our comments, our profiles and all our literature. Beside beauty, it can be helpful in better learning, less being tired, better concepts conveying and so forth.
I don't want to make you tired more and directly I'm going to start some introductions. After that you will learn a few useful and practical tricks to change the features (such as color, font, and size) of your texts via the HTML editor. HTML stands for Hyper Text Markup Language and it is a kind of language for describing web documents. In following figure, a visualization of an HTML page structure is illustrated. As it can be seen in this figure, the text between <body> and </body>, (the white part) describes the visible page content which you see on your browser screen. The text between <h1> and </h1> describes a heading and finally, the text between <p> and </p>, describes a paragraph. I will say my points in a so simple way and only the points related to change the text properties (such as color, font, and size), will be mentioned.
Have you ever pushed the HTML button at the top-right of your comment box ?? , actually you can use the following points wherever your comment box has HTML button. Now please copy the sentence written below and scroll down your screen to comment box and then paste it there.
I would like to learn English.
Now push the HTML button at the top right of your box (with light pink background color) and you may see the following sentence:
<p>I would like to learn English.</p>
In fact, it is the simplest paragraph with its own HTML defaults (font: Tahoma, color: black, size: 10pt). From the start of the text till pressing the Enter key and going to the next line, is considered as a paragraph. <p> means the start of paragraph and </p> shows the end of it. Now please type <h1> instead of <p> at the first and </h1>, instead of </p>. Again push the HTML button and return to the visual mode. You may see the following sentence in the visual mode of the comment box:
I would like to learn English.
Actually you have converted the sentence from a paragraph to a heading. Your sentence which you wanna change its properties, is either a paragraph or a heading. Now I am going to say that how the properties of a paragraph or heading can be changed. It is so simple and only 1, 2, 3 :) . There are several ways in HTML to do that, but here we use Inline method. In the following sentences be careful about all signs such as ("), (:), (;), or ('), even if only one of them was deleted, your desired sentences would not be appeared in the visual mode.
A. How to Change the Text Color
1- If you want to change the color of the whole paragraph, you must add a statement to the first tag <p>. Now please copy-paste the following sentence in the HTML editor (the HTML button is pushed down).
<p style="color: #0000ff;">I would like to learn English.</p>
Now if you push the HTML button and return to the visual mode, you will notice:
I would like to learn English.
2- If you want to change the color of a word or a sentence between the Paragraph, you should add some statements before and after that word or sentence. suppose we want to change color of "to learn" in previous sentence, then you should do like this:
<p>I would like <span style="color: #0000ff;">to learn</span> English.</p>
See, "to learn" is located between two statements, then the HTML visual output is:
I would like to learn English.
Was it too hard !? :) of course no, it is just a piece of cake !! Different colors can be achieved by changing the Hex numbers "#0000ff" (i.e. Hex number is a number in base of 16, including 0 up to 9 and a, b, c, d, e, f). The different Hex numbers for getting different colors, would be seen in below. These numbers contain 6 hex digits. The right hand, middle, and left hand pair digits, determine the proportion of blue, green, and red colors respectively. You can make more colors by changing them. The Hex number for black color is #000000 and for white color is #ffffff. To change the color of heading, you must replace two "p" to "h1", that's all !!
B. How to Change the Text Font
1- Here also to change the font of the whole paragraph, a statement must be added to the first tag <p>, copy-paste this sentence to comment box in HTML editor mode:
<p style="font-family: 'times new roman';">I would like to learn English.</p>
So you will have the following output in visual mode:
I would like to learn English.
2- To change the font of a word or a sentence between the Paragraph, you should add some statements before and after that word or sentence. For example we will change the font of "to learn" in this way:
<p>I would like <span style="font-family: 'times new roman';">to learn</span> English.</p>
The visual output will be:
I would like to learn English.
As you see, only the font of "to learn" was changed from "Tahoma" to "Times New Roman". It is just A, B, C. :) . To have other desired font, you may put the name of a desired supported standard font, instead of "times new roman". The default font is "Tahoma". Names of the fonts are the same as your blog box font names. For instance you can write: 'Andale Mono', 'Arial', 'Arial Black', 'Book Antiqua', 'Comic Sans MS', 'Courier New', 'Georgia', 'Helvetica', 'Impact', 'Tahoma', 'Terminal', 'Times New Roman', and 'Trebuchet MS'. If you want to change the heading font, you must substitute two "p" with "h1".
C. How to Change the Font Size
1- To change the font size of the whole paragraph, again we have another statement must be put in the first tag. If we copy-paste the following sentence to HTML editor.
<p style="font-size: 20px;">I would like to learn English.</p>
Then its visual output is:
I would like to learn English.
2- If you want to change the font size of a word or a sentence between the paragraph, you must do like this:
<p>I would like <span style="font-size: 20px;"> to learn</span> English.</p>
The visual output is:
I would like to learn English.
See, only the size of "to learn" has been changed. The default value of the paragraph font size is 10pt. to change the size only you should change that size value to desired size. Again here to change the font size of a heading, all "p" must be replaced with "h1". The default value of the heading font size is 20pt.
D. How to Combine Properties
1- If we want to change several properties (like font size, font, and color) simultaneously for the whole paragraph or heading:
<p style="font-size: 20px; font-family: 'times new roman'; color: #0000ff;">I would like to learn English.</p>
So as the result, in visual mode we have:
I would like to learn English.
2- For a word or a sentence between the paragraph or heading:
<p>I would like <span style="font-size: 20px; font-family: 'times new roman'; color: #0000ff;">to learn</span> English.</p>
And it results in visual mode:
I would like to learn English.
There are other properties which I will say them later (in part 2). Hope it is useful and helpful to you.
******* Please comment on this blog only in changed text format (at least one property) !! *******
***************************** Don't run away :) , Please try !! *****************************
Thank you so much