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
Comments
Hey guys, Try this too:
Dear Onee,
Someone has promised to do something here to complete this part, and she has said that she will try her best. I told her that "I'm waiting for your points", and as I promised, so I must wait ;-)
Dear Mohammad,
Don't make me wait too long to read the sequel blog of this. :) :D Have a good time! :)
Dear WMR, Thank you for your nice comment and compliment. Hope it is useful to you and others.
Dear Elen, You are welcome. See, it doesn't need to memorize those formulas or syntaxes, you only copy-paste them. Also if you have a prepared template (in a text file), you may use it anywhere. Thank you
Dear Setareh, It is nice to see that you have tried and finally got it. If you do have a comment-template for yourself, you always can may easily copy-paste to comment boxes (in HTML editor) and change that properties as you like. Thanks for your comment.
Dear Max, Actually I didn't get what you meant and the relationship between the blog and your sentence, so I will be thankful if you clarify me a little more. Thanks
Aha, i checked it. I didn't know about it. Nice one! Thanks for informing us, even if i don't think so i will remember all these to use it :) I am also a little lazy, lol.
I am looking for a parrot on the street but I cant find it.
I would like to learn English.
I finally got it. Thanks
Dear Friends
Thank you for your nice participating, teaching, and encouraging. Also here I would like to thank the friends who have liked this blog, Mishaikh, Noona, Sophia, Hayah, Usra, Blessing, Mary, Mohammad, Onee, Tanjin and Elf. May God bless you all. These days, I'm too busy and even I don't have time to comment on other blogs. In future, I will prepare another blog about other parts of HTML (God willing).
Have fun
Don't give me a fish but teach me how to fish !!
To Ann: You can switch to Desktop View from the menu.
God Bless . . .
-
1
-
2
-
3
-
4
of 4 Next