Quotes & Colors
In this blog, we are going to discuss quotes and colors in HTML.
Photo by Patrick Tomasso on Unsplash
QUOTES
Quotes are an effective way to give your blog entries more substance, authority, and interaction.
Quotes makes our paragraphs interesting and attract more viewers.
There are HTML codes specifically made to make presenting quotes in an efficient manner easier.
There are various ways through which we can show highlighted quotes in different ways.
Quotation
Blockquote
Address
Quotation
The quotation elements in HTML are used to insert quoted texts on a web page, which are portions of texts different from the normal texts on the page.
It is an opening and closing tag.
It is represented by <q>.
It puts the text in quotes to highlight the text.
INPUT:
<html> <head> </head> <body> <p>The quick brown fox jumps over the lazy dog<br></p> <p><q>The quick brown fox jumps over the lazy dog</q></p> </body> </html>OUTPUT:
Blockquote
Unlike a quote, it does not put the text in a quote; it provides additional space for the text present inside this code.
Represented by <blockquote>.
It is an opening and closing tag.
INPUT:
<!DOCTYPE html> <html> <head> </head> <body> <p>The quick brown fox jumps over the lazy dog<br></p> <blockquote>The quick brown fox jumps over the lazy dog</blockquote></p> </body> </html>OUTPUT:
Address tag
It is the special tag that is used to indicate the address.
It is represented by <address>.
It is an opening and closing tag.
INPUT:
<!DOCTYPE html> <html> <head> </head> <body> <address> <p> Address:<br> 710-B, Advant Navis Business Park,<br> Sector-142, Noida Uttar Pradesh – 201305 </p> </address> </body> </html>OUTPUT:
HTML Colors
There are various ways in which we can apply colors to the background:
Background color
Text Color
Border Color
Background Color:
It is used to set the background color of the web page.
It comes under inline styling.
In style tags, it is represented by <background-color>.
We can change the amount of background that has to be colored by using it in <div>, <p>, and <span>.
INPUT:
<!DOCTYPE html> <html> <head> </head> <body> <h1> Background Color</h1> <div style="background-color: magenta;"> Div with magenta background </div> <span style="background-color: crimson;"> Span with crimson background </span> <p style="background-color: orange;"> Paragraph with orange </p> </body> </html>OUTPUT:
Text color:
Used to define the color of the text written.
It is also part of inline styling.
In the style tag, it is represented by <color>.
INPUT:
<!DOCTYPE html> <html> <head> </head> <body> <h1> Background Color</h1> <div style="color: magenta;"> Div with magenta </div> <span style="color: crimson;"> Span with crimson </span> <p style="color: orange;"> Paragraph with </p> </body> </html>OUTPUT:
Border Color:
There are various ways to apply the border to the image.
We will try inline styling.
Represented by <border>.
Here we can define the size of the border, dotted or continuous border, and color of the border.
INPUT:
<!DOCTYPE html> <html> <head> <title>Border Color</title> </head> <body> <h1>Border Color</h1> <div style= "border: 1px solid black; border-color: green;"> This div has a green border </div> </body> </html>OUTPUT:
Link Color:
Used in the anchor tag.
Highlight the link present on the page.
It is part of inline styling.
Representation format: <a href="#" style="color: link-color;">
INPUT:
<!DOCTYPE html> <html> <head> <title>Border Color</title> </head> <body> <h1>Border Color</h1> <h3> Link Color</h3> <a href="#" style="color: blue;"> Link has a blue color </a> <a href="#" style="color: #ff6347;"> Link has a tomato color </a> </body> </html>
OUTPUT:
Color-Values
There are various ways in which we can define the color by there values.
RGB: Red, Green, and Blue
HEX: Hexadecimal color values
HSL: Hue, Saturation, Lightness
RGBA: Red, Green, Blue, Alpha
RGB Color Value
It stands for red, green, and blue.
We can adjust values from 0 to 255.
The range of color options available for us is 16,777,216.
For black, all color parameters are set to 0 (rgb(0, 0, 0)).
For instance, specifying rgb(0, 255, 0) results in green.
For white, all parameters are set to their maximum (rgb(255, 255, 255)).
INPUT:
<!DOCTYPE html> <html> <head> <title>RGB values</title> </head> <body> <h1> Background Color</h1> <div style="background-color:rgb(255, 0, 255);"> Div having background color with rgb value </div> <span style="color: rgb(0, 128, 0);"> Green text color using rgb values </span> <h1> Border Color</h1> <div style="border: 1px solid black; border-color: rgb(0, 128, 0);"> Green border using rgb values </div> </body> </html>OUTPUT:
RGBA Color Values
RGBA (Red, Green, Blue, Alpha) is a color model similar to RGB but with an added alpha parameter representing transparency.
Alpha is used to show Transparency.
The alpha value, which ranges from 0 to 1.
INPUT:
<!DOCTYPE html> <html> <head> <title>RGBA values</title> </head> <body> <h1> Text Color</h1> <p style="color:rgba(255, 0, 0, 1);"> RED color is used with rgba values </p> </body> </html>OUTPUT:
HEX Color Value
The hexadecimal value is expressed as #rrggbb.
Where rr stands for red, gg for green, and bb for blue, using values between 00 and ff, which are similar to decimal values from 0 to 255.
Through this method, a wide range of 16,777,216 colors is achievable, granting a precise and extensive palette for web design.
For instance, #ff0000 indicates a red color as red is set to its maximum value (ff), while green and blue are set to 00.
Conversely, #00ff00 represents green since green is set to its highest value (ff), and red and blue are at 00.
To showcase black, all color parameters should be set to 00, like #000000, and for white, set all parameters to ff, like #ffffff.
INPUT:
<!DOCTYPE html> <html> <head> <title>HEX color values</title> </head> <body> <h1> Link Color</h1> <a href="#" style="color: #0000FF;"> Link has a blue color with HEX color values </a> <a href="#" style="color: #FF6347;"> Link has a tomato color with HEX color values </a> </body> </html>OUTPUT:
HSL Value
HSL represents colors by defining their hue, saturation, and lightness.
The hue signifies the type of color (red, blue, green, etc.).
Saturation refers to the intensity or purity of the color.
Lightness determines the brightness or darkness.
INPUT:
<!DOCTYPE html> <html> <head> <title>HSL color values</title> </head> <body> <h1> Background Color</h1> <span style="background-color: hsl(348, 83%, 47%);"> Span element crimson background </span> </body> </html>OUTPUT:
