Monday 10 August 2020

#8 HTML Colors


HTML Color are specified with predefined colors name , or with RGB ,HEX ,HSL, RGBA , or HSLA values.

Color Names

In HTML , a color can be specified by using a color name .

eg. 


RGB and RGBA Colors

An RGB color value represent RED , GREEN , and BLUE light Sources.
An RGBA color value is an extension of RGB with an Alpha channel (opacity).

rgb(red,green,blue)
Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

📌This means that there are 256 x 256 x 256 = 16777216 possible colors!

eg.


rgba(red,green,blue,alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0(not transparent at all).

eg.


HEX Colors

A hexadecimal color is specified with: #RRGGBB , where the RR(red), GG(green)  and BB(blue) hexadecimal integers specify the components of color.

#rrggbb
where rr(red) , gg(green) and bb (blue) are hexadecimal values 00 and ff . 

eg.

HSL and HSLA Colors

HSL stands for hue , saturation , and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity)

hsl(hue, saturation, lightness)

📌Hue is a degree on the color wheel from 0 to 360. 
 0     is  red 
 120 is  green 
 360 is  blue 

📌Saturation is a percentage value, 0% means shade of gray , 50% is 50% gray, 100% is white.

📌Lightness is also percentage value , 0% is black, 50% means 50% light, 100% is white.

eg.

⭐Different percent of Saturation with 0 hue and 50% of lightness.

⭐Different percent of lightness with 0 hue and 100% of saturation.

⭐Shades of gray hsl(0,0%,X)        ❗x is 20% ,30%,40%,50%...


hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

eg.

-------------------------------------------------------------------------------------------

❗Here is the link of some website of HTML Color Code :- 

❗ It is hard to remember all the color code so whenever you need just google it . 😁
❗ Example of above as How to use color in background , text , border etc. in the Next blog..

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Next we will learn about Standard CSS used in HTML ...

Keep Learning and practice , practice , practice !!!

Follow me on Codepen 🔗https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE ...
Posted by at No comments:
Location: Kotma, Madhya Pradesh, India

Sunday 26 July 2020

#7 HTML Text Formatting , Quotation & HTML Comments


In HTML , the following text formatting are :-
  • <b> - It is use to bold the text i.e. it is use to highlight the text .
        eg.   <b>Hello, This is bold text.</b>  -> Hello, This is bold text.
  • <strong> - It is use to bold the text with more importance.
  eg.<strong> Hello, This is strong text.</strong>  -> Hello, This is strong text.
  • <i> - The text inside the tag will be displayed in italics.
        eg.<i> Hello, This is italic text.</i>  -> Hello, This is italic text.
  • <em> - It is same as <i>with  Emphasized text.
        eg.<em> Hello, This is emphasized text.</em>  -> Hello, This is emphasized text.

       ❗ Difference between <i> and <em> is that screen reader will                          pronounce the word in <em> with an emphasis , using verbal stress.
  • <mark> - The text should be marked or highlighted.
       eg.<a> This is <mark> mark </mark> text.</a>  -> This is mark text.
  • <small> - The text inside tag displayed smaller .
         eg. <small> This is small text. </small> -> This is small text.
  • <del> - Browser will usually strike a line through deleted text.
        eg.<a>This is <del> deleted</del> text. </a>  -> This is deleted text. 
  • <ins> - Browser will usually underline through inserted text.
         eg.<a>This is <ins> inserted</ins> text. </a>  -> This is inserted text.
  • <sub> - Subscript text
         eg.<a>This is <sub> subscripted</sub> text. </a>  -> This is  subscripted text.
  • <sup> - Superscript text
         eg.<a>This is <sup> superscripted</sup> text. </a>  -> This is superscripted text.


More other text formatting tags are available in HTML we will discussed it later with examples.. 😊 


HTML Quotation 


  • <blockqoute> - This element defines a section that is quoted from another                         source. 
  • <q> -  This element defines short quotation.
  • <abbr> - It defines abbreviation or acronym.
  • <address> and <cite> - Both the tags display text in italics but they are used                                 in address and giving a title to a creative work.
  • <bdo> - This tag is use to override the current text direction. 
    Examples of above elements in Codepen (link below👇)


HTML Comments

Comments are not displayed by the browser, but they can help document your HTML source code.

eg.  <!-- This is comment--> , comment is written inside <!--  _______   -->

❗ Comment are also used for debugging HTML by comment out the lines of error code ... 😂


=================================================


 Next we will learn  HTML Colors .....

 Keep learning !!! 

 LIKE , COMMENT , SHARE , SUBSCRIBE ....
Posted by at No comments:

Sunday 28 June 2020

#6 HTML Paragraphs

The <p> tags define a paragraph in HTML.

 A paragraph always starts on a new line, and browsers automatically add some margin before and after a paragraph.

 The content of paragraph written inside the <p>..</p> tag.

 example :

 <p>This is a simple paragraph contains 

        many lines and browsers automatically add some margin before and after          this  paragraph.

     the browser ignores the spaces                  and a line break      and display the content
  like a simple paragraph......
</p>

Other important tags which helps in writing a text content:-

  • <pre> tag - It defines preformatted text.  Inside this  tags the text                              formatted same will be displayed on browser..

       Example :-

      <pre>
               This is an example of pre tag.

              It defines preformatted text.

             Hello,
                     welcome to this blog !!!

                    thanks to visit this blog ....😊

     </pre>

  • <br> tag - defines a line break. Using <br> we can break a line without                      using new paragraph (<p> tag).  <br> is empty HTML element                  that doesn't contain end tag....
       Example:-
                    
                      <p> This is an example of <br> br-tag </p>


============================================================

Codepen link is here:- 🔗https://codepen.io/arwazkhan189/pen/NWxaPW

Next we will learn HTML Text Formatting..........😊

Keep learning !!!



Posted by at No comments:

Monday 22 June 2020

#5 HTML Headings

HTML Headings are the titles or subtitles that you want to display on screen.

 There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading).
Examples :-

<h1>Heading 1</h1>                  Heading 1

<h2>Heading 2</h2>                  Heading 2

<h3>Heading 3</h3>                                                        Heading 3

<h4>Heading 4</h4>                                                                       Heading 4

<h5>Heading 5</h5>                                                                                               Heading 5
<h6>Heading 6</h6>                                                                                                                               Heading 6

Codepen link is here:- 🔗https://codepen.io/arwazkhan189/pen/yLeMRQm 

 Previous codepen links:-

Next we will going to learn About HTML Paragraphs ....... addio 😁
Posted by at No comments:
Subscribe to: Posts (Atom)