Lists, colors and background colors tutorial in HTML

Programming has a lot of fans and many people are working in this field  and day by day they try their best to add to their knowledge in this regard, to do this, there are different programming languages, one of which is HTML programming languages, which in the following, we are going to deal with this language as well as several different possibilities that exist in it, each of the features in this language has many points that are you should master to be able to design the right content.

One of the best ways to learn the features in programming languages ​​is to pay attention to the different examples that exist for writing in that language, with the help which you can easily increase your mastery in various fields, we are going to discuss several different features that exist in this language in the rest of this article, but before that, it is necessary to give a brief explanation about HTML for a better understanding.

What is HTML?

HTML stands for  Hyper Text Markup Language  and gives the browser information about how to display content so that it can accurately represent the goals of the site owner; simply put, it consists of a series of elements that ultimately describe  the structure of a web page, HTML elements can label pieces of content such as "this is a heading," "this is a paragraph," "this is a link," etc.

One of the features of this language that can help a lot of different programmers is that you can group a set of related items in lists; this case has many  applications

Consider the following example as well.

An Unordered HTML List

Coffee
Tea
Milk

An Ordered HTML List

Coffee
Tea
Milk

Here are some of the different lists available.

- Unordered List:

One of the different types of lists that exist is Unordered HTML List, in which, to create this list, you first need to use  the ul tag

The result of the above example will be as follows.

An unordered HTML list

Coffee
Tea
Milk

- Ordered List:

Another type of list that exists is Ordered HTML List; as the name implies, the items are ordered in this type of list, and the thing about them is that the ordered list starts with  the ol tag, and each item in the list starts with the li tag. Also, the items in the list are numbered by default, now consider the following example to understand it better.

The result of the above example will be as follows.

An ordered HTML list

Coffee
Tea
Milk

- Description Lists:

You may want to make a list of different terms in which you describe each of the available terms; in this case, you need to use this type of list; to create this type of list, you need to pay attention to the following points,

the dl tag

defines the description list, the dt tag defines the term (name), and the dd tag describes each term; now, it is time to pay attention to an example that is given in this regard to help you get the point.

The result of the above example will be as follows.

A Description List

Coffee

- black hot drink

Milk

- cold white drink

Each of the different types of lists that exist has different uses, and it is necessary to choose one of them depending on the type of items on the list.

Colors:

Colors are another feature of this language that can make content attractive which  can attract lots of users to the website, also in the real world, there are lots of examples that show us the importance of this item, for instance, in designing of different shops, you can see a lot of different color combinations, or you can see different designing methods for writing store name, while

creating content for a site

these are the colors that can cause the content to be more attractive so that it is considered as an important factor because with the help of

an attractive web design

You can achieve your goal as soon as possible; HTML colors are specified with predefined color names or RGB, HEX, HSL values, RGBA, or HSLA. Now consider the following example, which we will do to mention in more detail in the following part.

As you know, colors can be used in different cases, which we are going to mention some of which in the following.

Text Color:

As the title of this section indicates, you may want to colorize the text to make the user pay more attention to a specific part of the text or to distinguish apart from other parts of content, all of them is possible only by using this item which is being used extensively in creating various contents, there is an example below which is better to be considered.

The result of the above example is as follows.

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Border Color:

As you know, borders alone can have a significant effect on the attractiveness of content, so imagine using this feature to add color and finally

create a colored border

This can have a huge effect in attracting more attention to your content; it is time to consider an example for a better understanding.

Background Color:

In this language, it is possible to set a background with the color you want for each of the elements in it, which can also have

a great impact on attracting different users to the content

produced; imagine that one of the available elements is very important. You want to make users pay more attention to the element you want; to achieve this goal, it is enough to use a colored background for the element.

The result of the above example is as follows.

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

As we have mentioned, you can use this feature as a programmer to increase the attractiveness of the created content to a great extent. You need to have the necessary mastery of these items, and there are predefined colors in this language that we will mention briefly below.

RGB and RGBA Colors:

An RGB color value represents RED, GREEN, and BLUE light sources; an RGBA color value is an extension of RGB with an Alpha channel (opacity); in the following, we will explain each one separately.

RGB Color Values:

RGB (red, green, blue)

Each parameter defines the intensity of the color with a value between 0 and 255 which means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, RGB (255, 0, 0) is displayed as red because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, RGB (0, 255, 0), is displayed as green because green is set to its highest value (255), and the other two (red and blue) are set to 0.

In order to display black, set all color parameters to 0, like this: rgb (0, 0, 0).

To display white, set all color parameters to 255, like this: RGB (255, 255, 255), now consider-following example.

The result of the above example is as follows.

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Shades of Gray:

Shades of gray are often defined by using equal values for all three parameters; now, look at the example below to find out more about this part.

The result of the above example is as follows.

rgb(60, 60, 60)

rgb(100, 100, 100)

rgb(140, 140, 140)

rgb(180, 180, 180)

rgb(200, 200, 200)

rgb(240, 240, 240)

RGBA Color Values:

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with

rgba(red, green, blue, alpha)

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

Consider-following example in this regard.

HEX Colors:

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

HEX Color Values:

a color can be specified by using a hexadecimal value in the form:

#rrggbb, where RR (red), gg (green), and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255), for example, # ff0000 is displayed as red because red is set to its highest value (ff), and the other two (green and blue) are set to 00, another example, # 00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00, to display black, set all color parameters to 00, like this: # 000000, to display white, set all color parameters toff, like this: #ffffff.

Consider-following example in this regard.

The result of the above example is as follows.

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

Shades of Gray:

Shades of gray are often defined using equal values for all three parameters, now consider the following example in this regard.

The result of the above example will be as follows.

#404040

#686868

#a0a0a0

#bebebe

#dcdcdc

#f8f8f8

HTML HSL and HSLA Colors:

HSL stands for hue, saturation, and lightness, HSLA color values are an extension of HSL with an Alpha channel (opacity), in the following, we are going to explain each of these cases separately so that you can understand the subject more by looking at the given examples.

HSL Color Values:

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:  hsl(hue, saturation, lightness), hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue, saturation is a percentage value, 0% means a shade of gray, and 100% is the full color, and lightness is also a percentage value, 0% is black, and 100% is white.

The result of the above example is as follows.

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation:

Saturation

can be described as the intensity of a color, 100% is pure color, no shades of gray, 50% is 50% gray, but you can still see the color, 0% is completely gray, you can no longer see the color, here consider the following example.

The result of the above example is as follows.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)  hsl(0, 40%, 50%)  hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Less saturation means less color with HSL colors, and 0% is completely gray.

Lightness:

The lightness of a color

can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Consider the following example.

The result of the above example is as follows.

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

With HSL colors, 0% lightness means black, and 100 lightness means white.

Shades of Gray:

Shades of gray are often defined by setting the hue and saturation to 0 and adjusting the lightness from 0% to 100% to get darker / lighter shades; now consider the following example.

The result of the above example is as follows.

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

HSLA Color Values:

HSLA color values

are an extension of HSL color values with an Alpha channel which specifies the opacity for color, and HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha), the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all), now consider the following example.

Last word:

In general, there are various features in this programming language, each of which has a wide world that you need to spend a lot of time to be able to master each of the features that exist; in this article, we have mentioned different lists as well as using colors for different occasions. As a result, we have prepared important points that we hope can be useful for you.