Bienvenue! Nous sommes donc arrivés au bout. Il y a toute une année de travail fructueux à venir, de nombreuses idées intéressantes ont été esquissées et il ne reste plus qu'à les concrétiser 🙂 Vous pouvez suivre le cours des événements et voir comment la liberté de pensée s'exprime en action - abonnez-vous le blog, je vous assure - cela ne prendra pas beaucoup de temps ...

Aujourd'hui, ma tâche est de savoir si le code source correct qui a réussi le test affecte quelque chose et, si oui, dans quelle mesure. Et comme toujours, j'attends vos avis à ce sujet dans les commentaires.

L'année dernière, dans mes publications, j'ai accordé beaucoup d'attention à un terme tel que validité, il est temps de déterminer lesquels sont. avantages d'un HTML valide... Plus tôt, avec vous, nous avons découvert comment vérifier la validité, ainsi que les canaux et quelques autres points intéressants.

Quatre principaux facteurs en faveur d'un site Web valide

Premièrement, nous pouvons dire avec une certitude à cent pour cent que les pages qui ont réussi le test du validateur s'afficheront correctement dans absolument tous les navigateurs modernes - et ce n'est pas moins important que. D'accord, ce n'est pas très agréable de voir une mise en page avec des éléments déformés devant vous. Et il est peu probable que le visiteur revienne sur un tel blog, où son auteur méprise l'apparence et.

Deuxièmement, même si vous pensez logiquement, en supprimant les balises inutiles et autres « poubelles », nous réduisons le poids des pages et par conséquent le temps de chargement des pages, et les navigateurs passent moins de temps à traiter ces pages. Vous savez, il existe un tel dicton : « Moins de mots, plus d'action », si vous le reformulez et l'appliquez à la construction de sites, vous obtenez quelque chose comme « Moins de balises - plus de mots ».

Et ce ne sont pas des vains mots, tous ceux qui ont déjà rencontré des problèmes avec Yandex ont reçu une réponse du support technique : améliorer le site et travailler dessus. Par exemple, dans la barre d'outils Yandex Webmaster, vous pouvez trouver de l'aide pour la section, qui contient des recommandations pour la création de sites.

Si vous étudiez attentivement ce document, le paragraphe 3 « Mise en page » énonce ce qui suit :

Essayez de garder votre mise en page à la hauteur

Troisièmement, si vous êtes engagé dans la création de sites Web pour les commander ou les promouvoir, alors vous devez probablement connaître les langages HTML et CSS, et si oui, alors pourquoi créer délibérément des erreurs ? De plus, les clients confient parfois une tâche à l'entrepreneur : utiliser un code valide, et par conséquent, les prix seront beaucoup plus élevés pour le travail effectué.

Et, enfin, quatrièmement, le facteur psychologique joue un rôle important. Il est bon de savoir que le travail effectué répond à certains critères et normes, dans notre cas, les normes du World Wide Web Consortium. Et comme vous le savez, la psychologie est une bonne chose ! Alors ne l'ignore pas.

Eh, ça fait tellement plaisir de voir une telle inscription

Dans un de mes articles précédents, j'en ai parlé. Cependant, tout le monde ne sait pas qu'en plus validateur pour HTML, il y a validateur pour CSS aussi.

Sens Validité CSS Identique au HTML : presque sans importance. De même avec HTML si tu écris CSS invalide, alors il n'y aura pas de problèmes (à moins, bien sûr, qu'il y ait des erreurs grossières), cependant, un code valide est toujours bon. Un tel code est clair et structuré, il est facile à comprendre, ce qui est également important, surtout lors de la correction, et surtout par d'autres personnes. Aussi Validité CSS accélère le processus de traitement et, par conséquent, la vitesse de chargement des pages.

Et enfin, compte tenu du respect généralement rare de la validité, un code valide impose toujours le respect, ce qui est important si vous le faites de manière professionnelle.

À vérifier la validité du CSS, vous devez utiliser ceci Service W3: http://jigsaw.w3.org/css-validator/.

Je vais vous dire tout de suite que contrairement HTML, faire CSS valide beaucoup plus simple, car il n'y a la plupart du temps que des bévues, sauf celles qu'il vaut mieux éviter complètement.

Permettez-moi de résumer. Il n'est pas du tout nécessaire de valider le code, mais je recommande fortement de le faire, car un tel site sera plus facile à indexer par les moteurs de recherche ( Validité HTML), plus rapide à travailler, plus facile à éditer et respecté par les professionnels.

Bienvenue sur le blog gratuit du webmaster ! La dernière fois, j'ai parlé de la façon de vérifier, et aujourd'hui, je propose de continuer le sujet de la validation des pages Web. Vérifions les feuilles de style en cascade (CSS) et les documents HTML avec des feuilles de style par rapport aux normes Internet généralement acceptées.

Le langage de style CSS a été développé par le World Wide Web Consortium (W3C), une organisation qui développe et met en œuvre des normes technologiques sur Internet.

CSS (de l'anglais. Feuilles de style en cascade - feuilles de style en cascade) est un langage formel conçu pour décrire l'apparence d'un document à l'aide d'un langage de balisage.

Il existe un service très utile pour vérifier les styles que le W3C propose. Allons à la page principale du CSS Validation Service et vérifions la validité du CSS.

Traditionnellement, je vais vérifier mon blog pour un bon exemple. Nous suivons le lien, une nouvelle fenêtre s'ouvre, qui ressemble à ceci :

Une agréable surprise nous attend ici, tout est en russe ! De plus, il y a la possibilité de choisir n'importe quelle autre langue parmi plus de 20 disponibles. La page contient des onglets proposant de sélectionner une option de vérification :

1. Vérifiez par URI - spécifiez simplement l'adresse de la page ;
2. Vérifiez le fichier téléchargé - vous devez sélectionner un fichier CSS local ;
3. Vérifiez le texte tapé - vous devez entrer le code CSS pour vérifier l'exactitude.

Des fonctionnalités supplémentaires vous permettent de spécifier des paramètres d'analyse avancés. Voici un bref résumé de chacun d'eux :

• Profil - répertorie toutes les fonctionnalités et possibilités de mise en œuvre sur une plate-forme spécifique. La sélection par défaut suit la norme CSS3 de niveau 3 la plus couramment utilisée.
• Alertes - définition des détails des rapports : toutes ou les alertes les plus importantes, un rapport régulier, sans afficher d'avertissements. Le service peut émettre deux types de messages : des erreurs et des avertissements. Si le CSS coché ne correspond pas à la recommandation, c'est une erreur. Les avertissements diffèrent des erreurs en ce qu'ils ne sont pas spécifiques à des problèmes de spécification.
• Environnement - Spécifiez où les styles sont appliqués, comme sur un appareil portable, un écran, un téléviseur ou une page d'impression. Il est recommandé de tester tous les environnements de style.
• Extensions de fournisseur - il est souhaitable de laisser la valeur par défaut, il est possible d'afficher uniquement les erreurs ou uniquement les avertissements. Les fournisseurs de navigateurs implémentent parfois des propriétés CSS expérimentales, en utilisant des préfixes pour les prendre en charge : -moz- (pour Firefox), -webkit- (pour Chrome), -ms- (pour Internet Explorer), -o- (pour Opera) et autres.

Je précise l'adresse URL, configure les paramètres de vérification supplémentaires et clique sur le bouton "Vérifier" pour commencer. Hourra ! Résultat du contrôle CSS : aucune erreur trouvée !

Malheureusement, nous n'avons pas pu éviter les avertissements liés à une extension de fournisseur inconnu. Ce n'est pas grave, le validateur CSS est un utilitaire gratuit, fiable et utile, mais comme tout logiciel, il peut être défectueux.

L'essentiel est que les styles ne contiennent pas d'erreurs et que les extensions du fournisseur, très probablement, ne soient tout simplement pas incluses dans la spécification et provoquent des avertissements, mais le navigateur traite les données correctement.

Notez que la liste des avertissements contient le numéro de ligne dans laquelle la propriété inconnue a été trouvée. Si des erreurs sont trouvées, vous verrez un tableau avec une propriété et une description du problème. Par exemple, la page d'accueil Yandex a le résultat de vérification suivant :

Vous trouverez ci-dessous des informations sur le CSS correctement vérifié. Ne vous précipitez pas pour le copier et l'utiliser sur votre site Web ! Oui, dans la version donnée du CSS correct, il n'y a pas d'erreurs ni de propriétés dont l'utilisation provoque des avertissements, le code passera à 100% la vérification complète. Mais l'effet est obtenu en supprimant ces propriétés, de sorte que le site peut rencontrer des problèmes d'affichage ou que les attentes peuvent ne pas correspondre à la réalité.

Ce service est hébergé et maintenu sur le serveur W3C, mais en même temps ce n'est pas un outil de validation CSS officiel.

En option, utilisez le validateur combiné - il valide l'ensemble du document, combinant les validateurs HTML et CSS et d'autres outils utiles sur une seule page.

Lors du développement de sites Web, reportez-vous aux dernières spécifications et références des feuilles de style en cascade. Je recommande d'utiliser le validateur CSS et de vérifier votre site, partagez les résultats dans les commentaires !

2016-12-29

Nous animons les boutons et vérifions le site pour la validité du code HTML et CSS

Bonjour cher visiteur !

Aujourd'hui, nous allons examiner, à l'aide de l'exemple d'une page Web créée, comment vérifier la validité du site, c'est-à-dire la conformité aux spécifications établies des langages HTML et CSS.

De plus, avant de vérifier, nous effectuerons une révision de la feuille de style CSS dans la partie relative à "l'animation" des boutons de la barre latérale, où nous rendrons les boutons statiques interactifs, en changeant leur apparence en fonction de leur état - passif, actif et enfoncé.

• Rendre les boutons en trois dimensions
• Rendre les boutons interactifs
• Avez-vous besoin d'une validation
• Comment valider le code HTML
• Comment valider le code CSS
• Fichiers sources du site

Rendre les boutons en trois dimensions

Dans l'article précédent, nous avons stylisé la zone de contenu principale pour qu'elle corresponde à la mise en page de la page d'accueil. Dans le même temps, pour le moment, il y a des boutons dans la barre latérale qui sont statiques et ressemblent à un rectangle brun plat régulier avec des coins arrondis.

Vous trouverez ci-dessous un extrait d'une barre latérale avec ces boutons.

Afin d'"animer" les boutons, donnons d'abord du volume à l'aide de styles CSS. Et nous allons le faire en utilisant la propriété de gradient linéaire, qui était auparavant utilisée dans la conception des blocs rotateurs, de recherche et d'abonnement.

Les valeurs de gradient linéaire sont définies comme suit :

1. Nous allons définir les nuances de couleurs de bas en haut, en commençant par une couleur plus foncée que la couleur principale du bouton. Pour déterminer quelle couleur utiliser au début du dégradé, on utilise l'outil d'un éditeur graphique, en l'occurrence Photoshop.

Pour ce faire, avec un document de mise en page de conception ouvert, sélectionnez le "Sélecteur de couleurs", déplacez le curseur sur la zone souhaitée du bouton, définissez la couleur principale puis utilisez les outils "Sélecteur de couleurs" pour sélectionner une couleur plus foncée de la même teinte brune. Dans notre cas, prenons une couleur avec la valeur "653939". La capture d'écran ci-dessous montre clairement comment cela peut être fait.

2. Ensuite, définissez la position d'arrêt du dégradé où la couleur initiale plus foncée passera à la couleur principale. Placez la position d'arrêt approximativement au milieu. Dans le même temps, afin de créer une couleur plus saturée, nous déplacerons un peu la position d'arrêt vers le haut et définirons sa valeur, disons 70% de la hauteur.

3. La dernière chose à faire pour attribuer des propriétés au dégradé est de définir une couleur plus claire que la couleur de base qui colorera les boutons du haut. Cela se fait de la même manière que lors de la définition de la couleur initiale du dégradé. Dans ce cas, nous prendrons la valeur de cette couleur comme "b88686".

3. Sur la base des données reçues, ajoutez un dégradé linéaire aux propriétés CSS précédemment générées des boutons.

saisir: {

la taille : 30px;

marge-bas : 10px;

rayon-frontière : 5px;

Contexte : # a76d6d;

aligner le texte : centre;

police-poids : audacieux;

Couleur : #fff;

flotter : à droite;

image de fond

On peut noter que lors de la détermination des couleurs extrêmes, les positions d'arrêt ne sont pas indiquées ici, car aux valeurs de 0% et 100%, cela n'est pas nécessaire.

Maintenant, rafraîchissons le navigateur et voyons le résultat.

Comme vous pouvez le voir, les boutons ont acquis un léger renflement. Vous pouvez maintenant commencer à les « revitaliser ».

Rendre les boutons interactifs

Afin de travailler pleinement avec les boutons, nous allons les rendre interactifs, ce qui reflétera visuellement leurs trois états principaux, passif (le bouton est dans son état initial), actif (le curseur survole le bouton) et enfoncé (quand le le curseur survole, le bouton de la souris est enfoncé et maintenu).

Et nous allons le faire en utilisant une combinaison de propriétés d'ombre et de bordure. L'essence de cette technique est qu'en changeant la couleur de l'ombre et des bordures de différents côtés, vous pouvez obtenir une imitation du changement d'état des boutons.

Tout d'abord, faisons cela pour l'état passif et essayons de le représenter de manière à ce que les boutons s'élèvent au-dessus de la surface.

Nous choisirons les couleurs des bordures et des ombres de la même manière que dans les cas précédents.

Le code CSS après les ajouts appropriés prendra la forme.

saisir: {

la taille : 30px;

marge-bas : 10px;

rayon-frontière : 5px;

Contexte : # a76d6d;

aligner le texte : centre;

police-poids : audacieux;

Couleur : #fff;

flotter : à droite;

image de fond : linéaire-gradient (vers le haut, # 653939, # a76d6d 50%, # b88686) ;

boîte ombre : 2px 2px 4px 0px # 422a2a;

largeur de la bordure : 2px;

style de bordure : solide;

couleur de la bordure : #ddbebe # 241616 # 241616 #ddbebe;

On peut noter ici que les frontières sont représentées par une combinaison de propriétés qui déterminent l'épaisseur (border-width avec la valeur 2px), un style (border-style) avec une valeur qui spécifie une bordure unie et des couleurs (border-color) sur chacun des quatre côtés.

Mettons à jour le navigateur et voyons à quoi ressembleront maintenant les boutons.

Comme vous pouvez le voir, les boutons dans cet état semblent s'être levés.

Essayons maintenant de faire en sorte que les boutons ressemblent à un état enfoncé. Pour ce faire, nous allons supprimer l'ombre et changer la couleur des bordures. Dans ce cas, nous utiliserons un sélecteur spécial de la pseudo-classe : hover correspondant à l'état actif.

Le CSS pour l'état actif des boutons ressemblera à ceci.

saisir: flotter {

boîte ombre : rien;

couleur de la bordure : # a76d6d # a76d6d # a76d6d # a76d6d;

Dans ce cas, nous changerons à nouveau la couleur des bordures et ajouterons une ombre, seulement dans ce cas, elle sera interne et sans décalage. Le sélecteur de pseudo-classe deviendra également : actif, correspondant à l'état enfoncé.

Le code CSS pour l'état pressé sera le suivant.

saisir: actif {

boîte ombre : 0px 0px 7px 2px # 422a2a encart;

couleur de la bordure : # 777 #fff #fff # 777;

Le bouton "Rechercher" est présenté ci-dessous à titre de comparaison, où vous pouvez clairement voir comment il change d'apparence en fonction de l'état.

Fig. 8 État passif

C'est là que nous avons terminé la mise en page de la page principale et l'avons amenée à une forme qui correspond à la mise en page de conception. Et maintenant il faut, comme avant à chaque étape, vérifier sa compatibilité croisée dans les différents navigateurs. Mais avant cela, vérifions la page pour validation, car l'état du code peut dans une certaine mesure affecter la cohérence croisée. Par conséquent, nous allons maintenant effectuer cette opération très nécessaire.

Avez-vous besoin d'une validation

La validation est la vérification du code par rapport aux normes établies. Distinguer entre la validation de l'exactitude du code HTML et CSS. En même temps, il est clair que dans un cas le code HTML est vérifié, dans l'autre le code CSS.

Beaucoup trouveront probablement étrange la question de savoir si la validation est nécessaire. Mais si vous regardez sur Internet, vous pouvez voir que nombreux sont ceux qui pensent que le code valide est facultatif, que c'est une perte de temps, car les navigateurs fonctionnent bien même en présence de toutes sortes d'erreurs.

Bien sûr, dans de nombreux cas, les sites peuvent bien fonctionner sur du code invalide, mais la cohérence croisée dans de tels cas ne peut pas être garantie. Après tout, il existe des normes pour les langages de programmation eux-mêmes, mais pour le fait que les navigateurs corrigent les erreurs de la même manière, une telle norme, bien sûr, n'existe pas et ne peut pas exister. Et par conséquent, différents navigateurs peuvent gérer les erreurs de différentes manières, ce qui peut entraîner un affichage différent des pages.

Et en général, on ne sait pas pourquoi certaines personnes développent une telle attitude figurative envers leur travail, selon le principe « ça fera juste ça ». Par conséquent, si quelqu'un pense qu'il n'a pas besoin de vérifier la validité du code, c'est son droit, et il peut difficilement être convaincu du contraire, et ce n'est pas nécessaire.

Passons maintenant à la vérification directe de la validité des codes, d'abord HTML, puis CSS.

Comment valider le code HTML

En substance, le contrôle de validation du code lui-même est assez simple, comme on peut le voir maintenant. Mais, l'élimination des erreurs prend généralement un certain temps. Bien entendu, si le code se compose de plusieurs lignes, des difficultés ne peuvent pas survenir ici. Mais s'il y en a des centaines et des milliers, vous devrez peut-être travailler dur, tout dépend de la qualité de la compilation du code. Par conséquent, il est préférable de le faire plus souvent avec un contrôle de cohérence croisé conjoint.

Ici, nous examinerons la variante la plus simple et la plus courante de la vérification de la validité - il s'agit de l'utilisation du site "W3C Consortium", qui, avec le soutien des développeurs de navigateurs, développe des spécifications pour les codes des pages Web.

Pour vérifier le code HTML, il suffit de suivre le lien https://validator.w3.org/, où une page s'ouvrira avec un champ pour saisir l'adresse de la page en cours de vérification.

capture d'écran 51

Après avoir appuyé sur le bouton « Vérifier », nous recevrons le résultat du contrôle.

Dans ce cas, le code HTML est valide, mais il est recommandé d'utiliser l'attribut lang avec la valeur "ru", puisque la page utilise le russe.

L'attribut lang est destiné aux navigateurs pour afficher correctement certains caractères, tels que les guillemets, en fonction de la langue utilisée. Par conséquent, il ne nous sera pas superflu de l'inclure dans le code HTML. Et nous allons le faire dans la balise html pour que cet attribut puisse affecter l'ensemble du document.

Comment faire ce module complémentaire est indiqué dans le tableau suivant.

"ru" >

. . .

Et maintenant, si nous effectuons une deuxième vérification, nous pouvons voir que le code est devenu complètement valide sans aucun commentaire.

De cette façon, nous avons vérifié un fichier publié sur Internet. Mais lorsque la page n'a pas encore été publiée sur le web, vous pouvez vérifier sa validité par d'autres moyens, c'est soit télécharger le fichier à l'aide du bouton Parcourir, soit utiliser le formulaire pour copier directement le code HTML.

La capture d'écran montre la dernière option, lorsque le code de la page Web est copié directement dans le formulaire pour validation.

Après avoir effectué la vérification, nous obtenons un résultat similaire et le code vérifié sera également affiché ici. Dans le cas où des erreurs sont trouvées, elles seront mises en évidence pour simplifier la recherche, ce qui simplifie grandement le travail pour les éliminer.

Comment valider le code CSS

Nous avons couvert la vérification de la validation HTML. La validation du code CSS se déroule exactement dans le même ordre. Seulement dans ce cas, vous devez utiliser une autre page de validation, qui pour un tel cas se trouve à http://jigsaw.w3.org/css-validator/.

Ouvrons-le et, comme la fois précédente, entrons l'adresse de la page en cours de vérification, après quoi nous appuyons sur le bouton "Vérifier".

Le résultat de cette vérification est affiché dans la capture d'écran.

Comme vous pouvez le voir, notre code CSS est entièrement conforme à la spécification sans aucune erreur, ce qui est un bon résultat.

L'ordre des autres méthodes de vérification pour ce cas coïncide complètement avec des vérifications similaires pour le code HTML. Par conséquent, nous ne nous répéterons pas ici, et c'est ici que nous terminerons la réflexion sur les contrôles de validation.

Après cela, nous vérifierons la correspondance croisée de notre page et nous assurerons qu'elle s'affiche de la même manière sur tous les navigateurs. Nous terminerons alors la mise en page de la page principale du site.

Et nous nous en occuperons immédiatement après les vacances du Nouvel An.

Et en conclusion, vous pouvez souhaiter à tous une bonne année ! Et je vous souhaite santé, amour, joie, prospérité et, bien sûr, beaucoup de succès dans la création de votre propre site Web pour la possibilité de travailler avec succès sur Internet au cours de la nouvelle année!

Fichiers sources du site

Les fichiers sources du site avec les mises à jour qui ont été faites dans cet article peuvent être téléchargés à partir de la pièce jointe matériaux additionnels.

Après avoir créé un site et l'avoir rempli avec tout ce dont vous avez besoin, le site doit être vérifié pour les erreurs. Pour trouver les fautes d'orthographe en html et css, le validateur W3 - World Wide Web Consortium, qui se traduit par : World Wide Web Consortium, vous aidera. Il trouve toutes les erreurs et indique où elles se trouvent, ainsi que des options pour leur élimination.

Pourquoi corriger le code avec le validateur W3C

En fait, il n'y a pas beaucoup d'avantages à cela et ils sont tous conditionnels, mais malheureusement, chaque site devrait avoir un nombre minimum d'erreurs, idéalement pas une seule. Quoi que vous décidiez si vous en avez besoin, voici ses avantages :

• La vitesse de chargement de la page augmentera, mais légèrement, cela ne sera même pas perceptible.
• Le site affichera le même dans chaque navigateur.
• Lors de l'ajout d'un site à l'annuaire, faites attention à la maîtrise de l'écriture html et css.

Pas beaucoup d'avantages, mais corrigé erreurs html et css l'utilisation du validateur W3C en vaut la peine !

Comment corriger les erreurs avec le validateur

Le principe de correction d'erreur du validateur n'est pas difficile et tout le monde peut le manipuler ! Nous suivons les liens vers, s'il est difficile de comprendre l'anglais, je vous conseille d'utiliser un traducteur, ou d'utiliser par ça, qui affichera le type d'erreurs en russe. Prenons un exemple de correctif de validateur :

1.Tapez dans le champ le nom de votre site en entier.


2. Dans la liste, nous commençons à regarder où et quelle est l'erreur et ce qui est nécessaire pour l'éliminer.


Comme vous pouvez le voir sur les photos, mon erreur est dans le lien, j'ai trouvé ce problème dans le plugin des boutons de partage. Souvent, vous devez fouiller dans tous les fichiers pour trouver une erreur.

3.Ajoutez l'élément à la ligne où l'erreur a été trouvée et vérifiez à nouveau avec le validateur.
Si le bug est corrigé, tant mieux. Sinon, il faut chercher plus loin.