Wednesday, February 4, 2015

Use of colors in HTML

we can use RGB colors in web pages to make the page more colorful.
Syntax of RGB color code is rgb(rr,gg,bb)


As an example to show green color using RGB code we can write as following, rgb(0,255,0)


You can get RGB code of a color by using “Adobe Photoshop” or any image processing software. But in HTML we us corresponding hexadecimal value of a RGB color code.
Example : for red color 
  • RGB value = (255,0,0)
  • Hex value = #ff0000


But most web browsers support 17 main colors.
They are 
  1. Aqua
  2. Black
  3. Blue
  4. Fuchsia
  5. Gray
  6. Green
  7. Lime
  8. Maroon
  9. Navy
  10. Olive
  11. Orange
  12. Purple
  13. Red
  14. Sliver
  15. Teal
  16. White
  17. Yellow
we can use them without hex value.
We can use following HTML code 
<HTML>
<HEAD>
<TITLE>Colors</TITLE>
</HEAD>
<BODY>
<H1><FONT color=”red”>This is in red color</FONT></H1>
<H2><FONT color=#0000FF >This is in green</FONT></H2>
<P><FONT color=”blue”>This is some text</FONT></P>
</BODY>
</HTML>



The output will be,

How to use background colors.


<HTML>
<HEAD>
<TITLE>Colors</TITLE>
</HEAD>
<BODY BGCOLOR=”orange”>
<H1><FONT color=”red”>This is in red color</FONT></H1>
<H2><FONT color=#0000FF >This is in green</FONT></H2>
<P><FONT color=”blue”>This is some text</FONT></P>
</BODY>
</HTML>


output,


Fonts in HTML

Use of different font styles


We can change font style using “font” tag
General syntax of a font tag
<FONT size=value color=colour face=font types></FONT>
We can use many font types by using commas.
Example:
<FONT face=Courier New,Times New Roman> This is Some text</FONT>
Here if first font is not available then browser show the text using second font.


How to change font size
General Syntax : <FONT size=value ></FONT>
Can change according to 2 methods.
1.use of numbers
We can use numbers from 1 to 7
1 for smallest 7 for largest and 3 for normal size
Then 1 and 2 are smallest size,3 is normal size and 4 to 7 are large size.
2.Use of relative values
Use +1 to +6 for increasing values and -1 to -6 for decreasing values

Example,
<FONT size=2 >This is font size 2</FONT>
<FONT size=7 >This is font size 7 (larger)</FONT>
<FONT size=+3 >This is relative font size +3</FONT>


Complete code,
<HTML>
<HEAD>
<TITLE>Fonts</TITLE>
</HEAD>
<BODY >
<P><FONT face=Courier New,Times New Roman > This is Some text</FONT><br/>
<FONT face=Times New Roman,Courier New,Georgia size=5> This is Some text</FONT><br/>
<FONT size=2 face=Courier New>This is font size 2</FONT><br/>
<FONT size=7 >This is font size 7 (larger)</FONT><br/>
<FONT size=+3 >This is relative font size +3</FONT><br/>
<FONT size=-1 >This is relative font size -1</FONT></P>
</BODY>
</HTML>



Output,