The validator also indicates where the error is located:

This way you can find and fix HTML errors. But sites consist not only of markup code, but also CSS, so we also check the cascading style sheets of the web resource.

Checking CSS code for validity

The W3c validator can also check the CSS code for validity. You can do this at this link. The principle of operation is the same: specify the URL of the site, or select a file on your computer and click on the "Check" button.

Unlike the same HTML validator, the CSS validator is in Russian.

CSS errors and warnings

When checking CSS code for validity, the service issues a large number of errors and warnings. I got 23 errors and 281 warnings. At first glance, it may seem that this is a lot and may even be scary, however, most of the indicated errors and warnings are shown only because the service does not know certain properties that apply to different browsers.

In my case, most of the 281 warnings are CSS properties to display normally in different browsers:

The service positions such tags as “unknown vendor extension”. Therefore, if, when checking your CSS files, you see a large number of such errors, then do not be alarmed. It's okay.

I will not list the most common errors and ways to eliminate them, since everyone's solutions may be different and you need to look at the HTML code itself to understand what is wrong.

If you cannot eliminate some error, then share the problem in the comments to the lesson, maybe we will find a solution together.

I hope that the lessons that came out during this week were useful for you and helped in solving certain problems.

Well, now, goodbye!

2016-12-29

We animate the buttons and check the site for the validity of the HTML and CSS code

Hello dear visitor!

Today we will consider, using the example of a created web page, how you can check the site for validity, namely, for compliance with the established specifications of the HTML and CSS languages.

In addition, before checking, we will make some revision of the CSS stylesheet in the part related to "animating" the sidebar buttons, where we will make static buttons interactive, changing their appearance depending on their state - passive, active and pressed.

• Making buttons volumetric
• Making buttons interactive
• Do you need validation
• How to validate HTML code
• How to validate CSS code
• Site source files

Making buttons volumetric

In the previous article, we styled the main content area to match the layout of the home page. At the same time, at the moment there are buttons in the sidebar that are static and look like a regular flat brown rectangle with rounded corners.

Below is a fragment of a sidebar with such buttons.

In order to "animate" the buttons, we first give them some volume with the help of CSS styles. And we will do this using the linear gradient property, which was previously used in the design of the rotator, search and subscription blocks.

We define the linear gradient values \u200b\u200bas follows:

1. Color shades will be set from bottom to top, starting with a darker color than the main color of the button. To determine which color to use at the beginning of the gradient, we use the tool of a graphics editor, in this case photoshop.

To do this, with an open design layout document, select the "Color Picker", move the cursor over the required area of \u200b\u200bthe button, define the main color and then use the "Color Picker" tools to select a darker color of the same brown shade. In our case, let's take a color with the value "653939". How this can be done is clearly shown in the screenshot below.

2. Next, define the stop position of the gradient where the initial, darker color will transition to the main one. Place the stop position approximately in the middle. At the same time, in order to make a more saturated color, we will move the stop position up a little, and define its value, say, 70% of the height.

3. The last thing to do to assign properties to the gradient is to define a lighter color than the base color that will color the buttons at the top. This is done in the same way as when defining the initial gradient color. In this case, we will take the value of this color as "b88686".

3. Based on the received data, add a linear gradient to the previously generated CSS properties of the buttons.

input: {

height : 30px;

margin-bottom : 10px;

border-radius : 5px;

background : # a76d6d;

text-align : center;

font-weight : bold;

color : #fff;

float : right;

background-image

It can be noted that when determining the extreme colors, stop positions are not indicated here, since at values \u200b\u200bof 0% and 100% this is not necessary.

Now, let's refresh the browser and see the result.

As you can see, the buttons have acquired a slight bulge. Now you can start "revitalizing" them.

Making buttons interactive

In order to fully work with the buttons, we will make them interactive, which will visually reflect their three main states, passive (the button is in its initial state), active (the cursor is hovering over the button) and pressed (when the cursor is hovering, the mouse button is pressed and held).

And this will be done using a combination of shadow and border properties. The essence of this technique is that by changing the color of the shadow and borders from different sides, you can achieve an imitation of the change in the state of the buttons.

First, let's do this for the passive state and try to portray it so that the buttons rise above the surface.

We'll choose the colors of the borders and shadows in the same way as in the previous cases.

The CSS code after the appropriate additions will take the form.

input: {

height : 30px;

margin-bottom : 10px;

border-radius : 5px;

background : # a76d6d;

text-align : center;

font-weight : bold;

color : #fff;

float : right;

background-image : linear-gradient (to top, # 653939, # a76d6d 50%, # b88686);

box-shadow : 2px 2px 4px 0px # 422a2a;

border-width : 2px;

border-style : solid;

border-color : #ddbebe # 241616 # 241616 #ddbebe;

It can be noted here that borders are represented by a combination of properties that determine the thickness (border-width with the value 2px ), a style (border-style) with a value that specifies a solid border and colors (border-color) on each of the four sides.

Let's update the browser and see how the buttons will now look.

As you can see, the buttons seem to be raised in this state.

Now let's try to make the buttons look like a pressed state. To do this, we will remove the shadow, and change the color of the borders. In this case, we will use a special pseudo-class selector: hover corresponding to the active state.

The CSS for the active state of the buttons will look like this.

input: hover {

box-shadow : none;

border-color : # a76d6d # a76d6d # a76d6d # a76d6d;

In this case, we will change the color of the borders again and add a shadow, only in this case it will be internal and without displacement. The pseudo-class selector will also change to: active, corresponding to the pressed state.

The CSS code for the pressed state will be as follows.

input: active {

box-shadow : 0px 0px 7px 2px # 422a2a inset;

border-color : # 777 #fff #fff # 777;

The "Search" button is shown below for comparison, where you can clearly see how it changes its appearance depending on the state.

Fig. 8 Passive state

This is where we finished the layout of the main page and brought it to a form that matches the design layout. And now we must, as before at each stage, check it for cross-compatibility in different browsers. But before that, let's check the page for validation, since the state of the code can, to some extent, affect cross-consistency. Therefore, now we will perform this very necessary operation.

Do you need validation

Validation is the verification of code against established standards. Distinguish between validation for correctness of HTML and CSS code. It is clear that in one case the HTML code is checked, in the other the CSS code.

Probably, many will find it strange the question of whether validation is needed. But if you look on the Internet, you can see that there are many who believe that valid code is optional, that this is a waste of time, since browsers work well even with all kinds of errors.

Of course, in many cases, sites can work well on invalid code, but cross-consistency in such cases will definitely not be guaranteed. After all, there are standards for the programming languages \u200b\u200bthemselves, but for the fact that browsers correct errors in the same way, such a standard, of course, does not exist and cannot be. And therefore, different browsers can handle errors in different ways, which can lead to different display of pages.

And in general, it is not clear why some people have such a figurative attitude towards their work, according to the principle "it will do just that." Therefore, if someone thinks that he does not need to check the code for validity, then this is his right, and he can hardly be convinced of the opposite, and there is no need.

Now let's move on to directly checking the validity of the codes, first HTML, then CSS.

How to validate HTML code

In fact, the code validation check itself is quite simple, as can now be seen. But, the elimination of errors usually takes a certain amount of time. Of course, if the code consists of several lines, then difficulties can arise here. But, if there are hundreds and thousands of them, then you may have to work hard, it all depends on how well the code was compiled. Therefore, it is better to do this more often with a joint cross-matching check.

Here we will consider the simplest and most common option for checking for validity - this is the use of the "W3C Consortium" site, which, with the support of browser developers, develops specifications for web page codes.

To check the HTML code, just follow the link https://validator.w3.org/, where a page with a field for entering the address of the page being checked will open.

screenshot 51

After pressing the "Check" button, we will receive the check result.

In this case, the HTML code is valid, but there is a recommendation to use the lang attribute with the value "ru" , since the page uses Russian.

The lang attribute is intended for browsers to display certain characters, such as quotation marks, correctly, depending on the language being used. Therefore, it will not be superfluous for us to include it in the HTML code. And we will do this in the html tag so that this attribute can affect the entire document.

How to make this addition is shown in the following table.

"ru" >

. . .

And now, if we do a second check, we can see that the code has become fully valid without any comments.

In this way, we checked the file posted on the Internet. But when the page has not yet been posted on the web, you can check its validity in other ways, this is either upload the file using the browse button, or use the form to directly copy the HTML code.

The screenshot shows the last option, when the web page code is copied directly into the form for validation.

After performing the check, we get a similar result, and the checked code will also be shown here. In the event that errors are found, they will be highlighted to simplify the search, which greatly simplifies the work to eliminate them.

How to validate CSS code

We've covered HTML validation checking. The CSS code is checked in exactly the same order. Only in this case, you need to use another validator page, which for this case is located at http://jigsaw.w3.org/css-validator/.

Let's open it and, just like the previous time, enter the address of the page to be checked, and then press the "Check" button.

The result of this check is shown in the screenshot.

As you can see, our CSS code is fully compliant with the specification without any errors, which is a good result.

The order of the other verification methods for this case completely coincides with similar checks for HTML-code. Therefore, we will not repeat ourselves here, and this is where we will end the consideration of validation checks.

After that, we will check our page for cross-matching and making sure that it is displayed the same on all browsers, this will complete the layout of the site's main page.

And, we will deal with this immediately after the New Year holidays.

And in conclusion, you can wish everyone a Happy New Year! And wish you health, love, joy, prosperity and, of course, great success in creating your own website for the possibility of successful work on the Internet in the New Year!

Site source files

The source files of the site with the updates that were made in this article can be downloaded from the attached additional materials.