How to Add Comments? And Color Styles in HTML

Html color Styles

Share This Post

Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on google

HTML | Comments

The comment tag (<!– Comment –>) has been used to place comments in the HTML code. It has been a fine practice of coding so that programmer and the reader can get help to understand the code that what code is saying. Notice that there is an exclamation point (!) in the beginning tag, but not in the closing tag. It is very useful to understand the difficult code. The comment tag is helpful when coder is debugging the codes. HTML comments that are displayed in the web browser, but they can  be used document to your HTML source code.

  • It is simple piece of code which get erased (disregard) by web browsers that will not displayed by browser.
  • It helps the programmer and reader to understand the piece of code used for specially in difficult source code.

Syntax:

<!– Comments here –>

Kinds of HTML Comments: There are three kinds of comments in HTML they are:

  • Single-line comment
  • Multi-lines comment
  • Using <comment> tag

Singleline comments  narrates on only one line at a time. Singleline comments can begin in any column of the given line and finishes at a new line or carriage line. The // character sequence marks  signifies the text following it as a singleline comment. Here’s an example

<html> 
  
<head> 
    <title> 
        Single line comment 
    </title> 
</head> 
  
<body> 
  
    <!-- Paragraph element -->
    <p>This is pargraph</p> 
</body> 
  
</html>

Multiline comments  should be  used for large text descriptions of code or comment out piece of code when debugging applications. Comments are ignored by the compiler. Syntax. /* comment */ Parameters. Comment                                Example

<html> 
<head> 
    <title> 
        Multi-line comment 
    </title> 
</head> 
  
<body> 
      
    <!-- The multi-line comment is useful 
        to comment multiple line 
          
        Paragraph element  -->
          
    <p>This is Pargraph</p> 
</body> 
  
</html> 

Using <comment> tag: There are few browsers that support <comment> tag, Internet Explorer is one of them. The comment tag is used to place comments in the source code. Comments are not displayed in the browsers. You can use comments which briefly explain your code, which can help you when edit the source code at a later date. This is  helpful in that case if you have a lot of code.

Example

<html> 
<head> 
<title> 
 HTML comment tag 
</title> 
</head>  
  
<body> 
    <p> 
        This is <comment>not</comment> 
        Internet Explorer. 
    </p> 
</body> 
      
</html>

HTML | Color Styles

Colors  will be making the page more attractive. There are different styles which can be used to create new colors by combination of different colors. HTML colors are specified by prebuilt color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Hexadecimal Style : In this style, we will explain the color in 6 digits hexadecimal number (from 0 to F). It is denoted by ‘#’. The very starting two digits indicate red color, following two green color and the end two blue color.

Examples : If we  allow  ‘h1’ tags of purple color.

h1{ color:#00FF00;}

RGB Style [Red Green Blue] : In this  given 3 numbers  will indicate the amount of red, green and blue colors respectively required in mixing the color. The range of each color varies from 0 to 255.
Example: If we can allow ‘h1’ tags of green color.

h1 {color:rgb(0, 255, 0);}

Note: rgb(0, 0, 0) = Black color and rgb(255, 255, 255) =White color.

RGBA Style [Red Green Blue Alpha] : This style will allow to make the color transparent according to our need. Alpha indicates the degree of transparency. The range of green, blue and red varies from 0 to 255 and that of alpha is from 0 to 1.

Example: If we want allow ‘h1’ tags of green color.

h1{color:rgba(11, 99, 150, 1);}

HSL colors : Here ‘H’ will stand for hue, ‘S’ being Saturation and ‘L’ being Lightness. HSL color values are specified as:
Syntax:

hsl(hue, saturation, lightness)

  • Hue will be color of the image itself. It’s range is from 0 to 360. 0 being for red, 120 being for green and 240 being for blue.
  • Saturation is the intensity/purity of the hue. 0% is being a shade of gray and 100% is being full color.
    Lightness is the color space’s brightness. 0% is being black, 100% is being white.

Example : If we display hue on the above example given in example 1.

h1{color:#00FF00;

  background-color: hsl(200, 20%, 40%);

  color: hsl(300, 30%, 90%);}

In total we are having  4096 vast color combinations , we have the range :-red, green and blue from 00 to FF each so we have 16*16*16 different combinations of colors. Then being hue, saturation and lightness we should achieve even more attractive and large number of colors.

Background Color

You can change the background color for HTML elements:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color

You can change the color of text:

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

You can change the color of borders:

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Color Values

In HTML, colors can also defined to use RGB principles, HEX principles, HSL principles, RGBA principles, and HSLA principles.

The next three <div> elements has their background color set with RGB, HEX, and HSL values:

RGB (255, 99, 71)         #ff6347        hsl (9, 100%, 64%)Rgb (255, 99, 71, 0.5)        hsl (9,100%, 64%, 0.5)   

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Digital Marketing

How to begin and originate your own online business

State, labor, property, and entrepreneurship are traditionally deemed the four significant powers of creation. Although the Internet ought revolutionized. Moreover, there is immeasurable news for

YouTube images
Digital Marketing

Why no one talks about YouTube anymore

According to the people, thoughts the golden age of youtube is completed He’s remaining on the head of his seat as his twin sibling and

Do You Want To Boost Your Business?

drop us a line and keep in touch

small_c_popup.png

Subscribe to our Newsletter