Pour que les pages de votre site s'affichent correctement dans tous les navigateurs et sur tous types d'appareils, vous devez veiller à paramétrer le bon encodage. Le non-respect de certaines conditions, dont nous discuterons en détail aujourd'hui, peut conduire au fait que le texte se transforme en un ensemble de caractères dénués de sens et tout simplement impossibles à lire (krakozyabry).
Pourquoi des textes merdiques sont-ils affichés à la place du texte normal ?
Chaque page de votre site doit avoir un encodage spécifique. À propos du codage utilisé ce moment doit être communiqué au navigateur en passant des en-têtes spéciaux. Dans ces en-têtes vous devez préciser l'encodage qui correspond à celui que vous utilisez dans le corps des documents mis en ligne sur le site (sur ses pages).
Les navigateurs modernes peuvent déterminer eux-mêmes l'encodage du document si le webmaster a oublié de le spécifier explicitement. Il arrive parfois que des incohérences apparaissent entre « l’opinion » du navigateur et la réalité, d’où l’apparition d’un ensemble de caractères illisibles. Un ensemble d'absurdités peut prendre différents types, parfois ce sera facile symboles étranges, semblables aux hiéroglyphes anciens, et parfois juste des questions ou des questions à l'intérieur des diamants noirs. Dans l'ensemble, le type de conneries affichées par le navigateur n'est pas si important, mais ce qui est important, c'est qu'une personne ne puisse pas les lire.
Si vous êtes confronté au problème d'un encodage mal spécifié et voyez sur votre site Web quelque chose que vous ne pouvez pas lire, utilisez tout d'abord un décodeur spécial développé dans le studio d'Artemy Lebedev. Pour ce faire, copiez simplement le texte que vous souhaitez décrypter, collez-le dans le champ spécial et cliquez sur « Décrypter ». Si le décodage réussit, vous verrez le texte déjà lisible, ainsi que l'encodage d'origine et le chemin que le programme a dû parcourir pour afficher le résultat.
Tout cela est plutôt nécessaire pour les utilisateurs avancés, pour qui les informations reçues peuvent aider d'une manière ou d'une autre. Peut-être que le résultat des actions du programme vous donnera une idée et vous comprendrez d'où viennent les conneries sur votre site et corrigerez rapidement la situation. Et si les manipulations effectuées ne vous disent rien du tout, alors passons à autre chose.
Comment choisir le bon encodage
Dans cet article, nous n'entrerons pas dans les détails des types d'encodages et en quoi ils diffèrent les uns des autres, car... Nous ne voulons surcharger ni nous ni vous informations inutiles, et pour les besoins de l’article d’aujourd’hui, ce n’était pas le cas. Il convient seulement de noter que sur un site en langue russe, il ne sert absolument à rien d'installer le codage Windows-1251, qui est décrit de manière exhaustive dans le merveilleux article Wikipédia. Même si tous les textes seront rédigés exclusivement en russe et qu'il n'y aura aucune inclusion de caractères non standard. Au lieu de cela, il vous suffit de choisir le codage universel UTF-8, en le prenant pour acquis, sans vous déranger avec des informations inutiles.
Le fait est qu’il ne sert à rien de choisir pour votre site un encodage qui ne prend en charge que les caractères des langues slaves, comme le russe, l’ukrainien, le biélorusse, le serbe, le macédonien et le bulgare. Pourquoi se limiter dans un premier temps et se condamner à problèmes possibles plus loin. Que ferez-vous si vous devez insérer un caractère qui n’est pas pris en charge ?
UTF-8 (de l'anglais Unicode Transformation Format) est un format de transformation Unicode à huit bits qui a reçu une reconnaissance mondiale et a été standardisé précisément pour éviter les problèmes liés à l'apparition de charabia et à la confusion avec des textes illisibles. D'où nous pouvons conclure avec certitude que dans ce cas, vous devez choisir le plus grand des deux maux et dormir paisiblement, sans entrer dans les détails, car tout est clair ici. Regardez la taille de Jupiter et de Vénus à titre de comparaison.
Méthodes de base pour définir le codage correct
Très souvent, les problèmes d'encodage du site surviennent non pas parce qu'aucune des conditions dont nous allons vous parler n'est remplie, mais il suffit de ne pas en remplir une seule pour que le texte de votre site commence à s'afficher de manière incorrecte. Après avoir défini le codage à l'aide de toutes les méthodes ci-dessus, le problème sera résolu avec une probabilité de 99,9 %. Nous sommes arrivés à cette conclusion sur la base de nombreuses années d'expérience de travail avec des sites Web sur diverses plates-formes d'hébergement, en utilisant le plus différents systèmes administration et paramètres du serveur.
Encodage en .htaccess - AddDefaultCharset
Tout d'abord, vous devez définir l'encodage par défaut de toutes les pages du site à l'aide d'une directive htaccess très utile - AddDefaultCharset, qui est littéralement traduit de En anglais signifie "Ajouter un codage par défaut". Cela se fait très simplement :
AddDefaultCharset UTF-8
Si tu ne sais pas ce que c'est , puis créez simplement fichier texte dans le bloc-notes, puis en utilisant Commandant total renommez-le en un fichier sans titre avec l'extension HTACCESS ( - c'est exactement à quoi devrait ressembler le nom complet de votre fichier). Après cela, téléchargez le fichier nouvellement créé dans le répertoire racine de votre site (au même endroit où se trouve le fichier exécutable principal, par exemple index.php). Et n'oubliez pas d'insérer la ligne avec l'encodage par défaut que nous venons de fournir.
Encodage à l'aide d'un méta-jeu de caractères
Les balises méta sont capables d'envoyer des informations sur la page au navigateur sous la forme d'en-têtes spéciaux, dont l'un correspond exactement à ce dont nous avons besoin - jeu de caractères. En général, les balises méta peuvent avoir jusqu'à 4 attributs différents :
- contenu;
- http-équiv;
- nom;
- schème.
En fait, sur les quatre attributs présentés, un seul est requis : contenu, mais il y a des exceptions. Par exemple, dans notre cas, nous utiliserons une version abrégée de l'entrée et nous définirons l'encodage à l'aide de la balise méta exactement comme ceci :
L'ancien format d'enregistrement est depuis longtemps tombé dans l'oubli et il ne sert plus à rien de l'utiliser :
Comme vous le savez, les balises méta sont généralement placées à l'intérieur du conteneur. tête. Tout le monde, sans exception, le sait probablement déjà. Faites cette opération et nous passerons à l’élément suivant de notre liste.
Encodage de fichiers à l'aide de la fonction PHP d'en-tête
Cette méthode ne convient qu'à ceux qui ont un site Web implémenté en utilisant le langage de programmation le plus populaire du moment, principalement axé sur la création de sites Web - PHP (Hyper Text Preprocessor). Pour résoudre le problème posé dans cet article, nous utiliserons la merveilleuse fonction header() intégrée, conçue pour transmettre des en-têtes, similaires aux balises méta, mais avec la légère différence que l'action est effectuée à partir d'un script PHP, et non via Sortie de code HTML.
Définir l'encodage UTF-8 pour un fichier à l'aide de la fonction entête() assez simple - il vous suffit de coller le code donné au tout début de la page, mais bien sûr à l'intérieur du scope PHP, qui est noté ainsi :ou alors -.
Header("Type de contenu : text/html; charset=utf-8");
Le plus point important voici que nous avons le droit de transmettre des en-têtes uniquement s'il n'y a eu aucune sortie du script auparavant. C'est pourquoi nous insérons ce code tout en haut de la page. Vous devez le faire judicieusement et bien comprendre ce qui se passe, car vous pouvez être sûr que vous insérez un en-tête au début du fichier, mais vous ne savez peut-être pas que ce fichier est utilisé dans un autre fichier dans lequel il est tiré à l'aide de la fonction exiger ou inclure déjà après certaines informations s’affichait à l’écran. Par conséquent, si vous ne comprenez pas très bien de quoi nous parlons maintenant, il vaut mieux passer à l'étape suivante et y revenir si les 3 précédentes n'ont pas permis de définir le bon encodage des pages de votre site.
Enregistrer les fichiers dans le bon encodage
L’une des raisons probablement les plus courantes de l’apparition de fissures sur un site Web est le codage incorrect des fichiers eux-mêmes utilisés pour générer le document final. Le plus souvent, ce problème se pose chez les programmeurs débutants qui font tout juste leurs premiers pas dans la maîtrise de l'art. Lorsque l'un des systèmes d'administration actuellement populaires est sélectionné comme moteur de site, ce problème peut se produire dans des cas très rares, mais s'il est utilisé, cela se produit dans presque un cas sur trois.
Comme nous l'avons convenu précédemment, le codage que nous utilisons sur tous les sites en langue russe, même les plus sophistiqués, est UTF-8, nous encoderons donc tous les fichiers qui composent le moteur du site dans le même format. Et pour modifier l'encodage du fichier lui-même, téléchargé sur le serveur, l'habituel bloc-notes fourni par le système d'exploitation Windows ne suffira bien sûr pas. Il est donc préférable d'utiliser programme tiers, distribué gratuitement - Notepad++, téléchargeable sans problème depuis le site officiel.
Après avoir terminé avec succès le processus d'installation simple, vous devrez attribuer ce programme comme éditeur par défaut, effectuer quelques réglages à votre goût et modifier l'encodage du fichier incorrectement affiché de la même manière que celui indiqué dans la capture d'écran. Ceux. vous devez sélectionner "Encoder en UTF-8 (pas de nomenclature)". Un bon signe Si tel était le cas, aucune des options ne sera initialement sélectionnée et vous serez invité à « Convertir en UTF-8 (pas de nomenclature) ». Si vous voyez cela, assurez-vous qu'il ne reste que quelques secondes avant de résoudre le problème d'encodage.
De plus, je veux juste dire que vous devez choisir exactement sans nomenclature. DANS sinon, si vous encodez simplement en UTF-8 (avec BOM), alors des octets supplémentaires seront créés au début du fichier. Ils essaient de ne pas utiliser BOM - Byte Order Mark sur le Web lors de l'encodage au format UTF-8, car cela conduit à des erreurs en interférant avec l'interprétation correcte de PHP.
Eh bien, maintenant que tout actions nécessaires terminé, vous verrez très probablement un texte facile à lire sur les pages de votre site Web et respirerez facilement :)
Un des plus problèmes communs auquel un débutant est confronté Webmestre(et pas seulement les débutants), ceci problèmes de codage sur le site. Même pour moi, cela apparaît constamment lors de la création de sites Web " abracadabra"Mais heureusement, je sais parfaitement comment résoudre ce problème, alors j'ai tout mis en ordre en quelques secondes. Et dans cet article je vais essayer de vous apprendre tout aussi rapidement résoudre les problèmes liés au codage sur le site.
La première chose à noter est que tous les problèmes liés à l'apparition d'« abracadabra » sont associés à une inadéquation entre l'encodage du document et l'encodage défini par le navigateur. Disons qu'un document dans Windows-1251, mais pour une raison quelconque, le navigateur affiche UTF-8. Et la source d'un tel écart peut être les raisons suivantes.
Première raison
La balise méta est mal écrite type de contenu. Attention, il doit toujours contenir l'encodage dans lequel votre document est rédigé.
La deuxième raison
Il semble que la balise méta soit écrite comme vous le souhaitez et que le navigateur affiche exactement ce que vous voulez, mais pour une raison quelconque, il y a toujours des problèmes d'encodage. Le coupable ici est presque certainement que le document lui-même a un codage différent. Si vous travaillez dans Bloc-notes++, puis en bas à droite se trouve le nom de l'encodage du document courant (par exemple, ANSI). Si vous mettez une balise méta UTF-8, et le document lui-même est écrit en ANSI, puis effectuez la conversion en UTF-8(via le menu " Encodages" et point " Convertir en UTF-8 sans BOM").
Troisième raison
Quatrième raison
Et enfin, la dernière raison populaire est problème d'encodage dans la base de données. Tout d’abord, assurez-vous que toutes vos tables et champs sont écrits dans le même encodage, qui correspond à l’encodage du reste du site. Si cela ne résout pas le problème, immédiatement après vous être connecté au script, exécutez la requête suivante :
FIXER LES NOMS "utf8"
Au lieu de " utf8" il peut y avoir un codage différent. Après cela, toutes les données de la base de données devraient sortir avec le codage correct.
Dans cet article, j'espère avoir expliqué, au minimum, 90% des problèmes liés à l'apparition de « charabia » sur le site. Vous devez désormais résoudre en un rien de temps un problème aussi courant et simple qu'un codage incorrect.
Lors de la création d'un site Web, les webmasters débutants se posent souvent des questions : quel encodage utiliser pour le site Web, en quoi UTF-8 diffère de Windows-1251 et comment le saisir dans le jeu de caractères META des pages HTML du site. Les réponses à toutes ces questions se trouvent dans cet article.
Qu’est-ce que l’encodage de site et comment ça marche ?
Le codage peut être présenté sous la forme d'un tableau composé de différentes lettres, chiffres et autres symboles compréhensibles par l'homme, qui sont codés d'une certaine manière. Lorsque vous ouvrez un fichier texte contenant des pages HTML, l'ordinateur lit dans l'en-tête du fichier dans quel encodage il a été enregistré et affiche le texte dans l'encodage approprié, convertissant les données informatiques sous une forme compréhensible pour les humains en comparant ces données avec le table d'encodage. Si les informations de codage de l'en-tête du fichier correspondent au codage dans lequel les données sont stockées dans la page HTML, l'utilisateur voit les lettres, chiffres et autres symboles qui lui sont familiers. S'il y a une divergence, l'utilisateur se voit alors présenter un ensemble de caractères incompréhensible, cela se produit particulièrement souvent dans les versions plus anciennes. programmes de messagerie. Si un utilisateur reçoit une lettre avec un charabia incompréhensible, alors simplement en passant par différents encodages, il est généralement possible de deviner et de sélectionner celui dans lequel la lettre est écrite, et par conséquent, un ensemble de caractères incompréhensibles se transforme en un jeu de caractères compréhensible par l'homme. texte.
La même chose se produit avec les pages HTML du site. Si le document a été enregistré, par exemple, en codage UTF-8 et que le document lui-même contient une balise META indiquant qu'il s'agit d'un encodage Windows-1251, alors le navigateur comparera à nouveau les données enregistrées dans le fichier avec le tableau d'encodage. spécifié et comme les caractères sont codés différemment selon -, le navigateur affichera un ensemble de caractères incompréhensible au lieu du texte habituel, ou certaines lettres peuvent être en forme normale, et d'autres lettres ou symboles peuvent être affichés, par exemple sous forme de points d'interrogation. Tout ce qui précède s'applique également à l'affichage des noms de fichiers.
Création nouveau document V éditeur de texte Il est préférable de s'assurer immédiatement que le bon encodage est sélectionné. Les éditeurs modernes vous permettent de convertir du texte document ouvert d'un encodage à un autre, et le Bloc-notes standard permet de sélectionner l'encodage uniquement lors de l'enregistrement du fichier.
Les encodages les plus courants
Grâce au paragraphe précédent, vous savez déjà ce qu'est l'encodage et pourquoi il est si important de l'écrire correctement dans le code des pages du site. Voyons maintenant lequel des nombreux encodages est le meilleur à choisir pour le futur site. Puisque le plus courant et le plus compréhensible à maîtriser a toujours été le bloc opératoire Système Windows, la plupart des développeurs Web ont créé des pages HTML dans le codage Windows-1251 (ANSI), qui était utilisé par défaut. Mais Windows-1251 n'est pas très supporté un grand nombre de lettres et symboles, et les développeurs souhaitent utiliser diverses flèches, cœurs, carrés et autres symboles dans leurs textes, y compris la nécessité de combiner des mots de différentes langues dans un seul document, il a donc longtemps été remplacé par l'UTF-8 plus étendu et la plupart des développeurs utilisent cet encodage.
Problèmes d'encodage non seulement dans la page HTML
Un site Web, qu'il s'agisse simplement d'un ensemble de documents HTML statiques ou de documents complexes scripts dynamiques générer des pages à la volée, hébergées sur un serveur web, qui fonctionne également avec un encodage spécifique. Et si le serveur fournit des informations dans un encodage et que vos pages ou scripts sont enregistrés dans un encodage différent, des problèmes peuvent survenir lors de l'affichage des pages dans le navigateur de l'utilisateur. De nombreux hébergements vous permettent de modifier les paramètres et de sélectionner l'encodage en fonction de celui utilisé dans les fichiers du site via le panneau de configuration, ou vous pouvez l'écrire dans le fichier .htaccess si l'hébergement utilise le populaire serveur Web Apache.
Presque aucun site Web moderne ne peut se passer d’une base de données Données MySQL et cela peut également causer des problèmes d'encodage. Si les fichiers du site sont enregistrés dans un encodage et que les informations de la base de données le sont dans un autre, alors sur la page, la partie des informations sorties de la base de données peut être affichée sous la forme des mêmes points d'interrogation ou d'autres symboles incompréhensibles. . Pour éviter des problèmes d'encodage, il doit en être de même pour le serveur web, la base de données MySQL, dans les scripts, dans les pages HTML du site et dans la balise META, qui est écrite dans le code HTML. S'il y a des problèmes avec l'affichage du texte, vérifiez tout ce qui précède pour trouver le problème.
Jeu de caractères META du document HTML
Pour indiquer au navigateur et moteurs de recherche dans quel encodage les pages du site sont enregistrées, le META Charset est écrit dans leur code.
Pour l'encodage Windows-1251 :
Titre de la page
Texte de la page
Pour l'encodage UTF-8 :
Titre de la page
Texte de la page
Vous savez maintenant ce qu'est l'encodage du site et où rechercher les problèmes si le texte ne s'affiche pas correctement dans n'importe quelle partie du site.
La copie de l'article est interdite.
Décodeur à découvrir codage déposer et décoder les caractères. Pour ce faire, ouvrez votre navigateur et suivez le lien http://www.artlebedev.ru/tools/decoder/. Ce décodeur a été créé pour décoder les messages E-mail pour aider les utilisateurs à lire ce qui n'est pas clair messages électroniques.
Découvrir codage texte, copiez-le dans le presse-papier, puis cliquez dans le champ du décodeur bouton de droite souris et sélectionnez la commande "Coller". Ensuite, cliquez sur le bouton « Décrypter ». Le texte décodé apparaîtra dans le champ, et en dessous de la page, l'encodage source et l'encodage dans lequel le texte a été recodé seront indiqués.
Télécharger programme spécial pour déterminer l'encodage, ainsi que pour transcoder du texte, par exemple, le programme Tcode. Pour ce faire, suivez le lien http://it.sander.su/download.php, cliquez sur le lien TCode, attendez qu'il se charge déposer. Une fois le téléchargement terminé, décompressez l'archive dans n'importe quel dossier et exécutez fichier exécutable.
Coller le texte de déposer, pour lequel vous devez savoir codage, ou sélectionnez le bouton « Ouvrir le fichier » dans la barre d'outils. Ensuite, cliquez sur le bouton en bas de l'écran « Recoder ». Texte de déposer sera automatiquement recodé au bon codage. L'encodage d'origine sera affiché dans la barre d'état et le pourcentage de reconnaissance des caractères sera également affiché. En survolant cette ligne, vous pouvez déterminer quels symboles ne constituaient pas un programme.
Installez AkelPad, qui peut reconnaître les encodages de fichiers. Pour ce faire, suivez le lien http://akelpad.sourceforge.net/ru/download.php et sélectionnez la version requise Pour le chargement. Après l'installation, lancez le programme. Coller le texte de déposer pour déterminer le codage.
Sélectionnez le menu "Encodage" et la commande "Définir" codage"ou appeler cette commande raccourci clavier Alt+F5. Une fenêtre apparaîtra dans laquelle sera indiqué l'encodage source, et offrira également la possibilité de transcoder le texte en celui nécessaire à la lecture du texte. codage.
Sources:
Parfois, le fichier ou la page Web requis ne s'ouvre pas et, lorsqu'il est affiché, seul symboles étranges. Il arrive parfois qu'un éditeur de texte ou un navigateur ne puisse pas déterminer les éléments nécessaires. codage. Dans ce cas, vous devez le sélectionner vous-même à l'aide de utilitaires supplémentaires.
Tu auras besoin de
- Éditeur de texte qui fonctionne avec un grand nombre encodages ou programme de décodage.
Instructions
Si un fichier s'est ouvert de manière incorrecte dans un éditeur, ce n'est pas du tout qu'il a un nom incorrect. codage. Cela vaut la peine d'essayer le même fichier dans le programme. L'un des utilitaires qui, dans la plupart des cas, détermine avec précision le jeu de caractères requis est Éditeur de bloc-notes++.
Il existe également ceux qui sont capables de déchiffrer des textes russes dans différents encodages. Sans aucun doute, le leader est l'application Stirlitz pour Windows. Il connaît presque tous les codes et connaît de nombreuses méthodes de translittération. De plus, ce programme est capable d'effectuer des opérations de transformation de texte à partir de format original dans n'importe quel autre.
Sous Linux, pour ouvrir n'importe quel fichier contenant un nom inconnu codage, vous pouvez en utiliser commandes de console transformations ou programmes prêts à l'emploi. Sous QT, il existe une application appelée QTexTransformer, qui vous aidera à déterminer les encodages et à effectuer les transformations appropriées. Sous Linux, il existe de nombreux modules linguistiques écrits en Perl. Par exemple, Lingua DetectCharset ou DetectCyrillic (pour détecter les caractères cyrilliques). S'affiche bien Fichiers Windows programme de tapis de souris. Pour convertir, vous pouvez également utiliser la console « econv path_to_file », qui déterminera indépendamment le courant codage et le convertit dans les paramètres régionaux actuels.
Conseil utile
Gère bien le choix de l'encodage requis traitement de texte Mot. Même si le fichier n'a pas été ouvert dans d'autres éditeurs, la fonction « Sélection automatique » y fonctionnera.
Sources:
- L'un des décodeurs de texte les plus connus en 2019
Probablement tout le monde a rencontré au moins une fois un problème tel qu'un codage mal défini. Vers l'électronique Boites aux lettres une lettre arrive avec des caractères « illisibles » au lieu des lettres russes ordinaires, ou on vous remet un document texte, mais il n'est pas possible de le lire, car il est rempli de « gribouillages » incompréhensibles. Tous ces cas sont des exemples d'encodage mal défini, c'est-à-dire que l'expéditeur a utilisé un encodage lors de la création d'un message ou d'un document et que vous essayez d'ouvrir le texte dans un autre.
Tu auras besoin de
- Ordinateur en marche système opérateur, accès Internet, éditeur de texte (par exemple, AkelPad)
Instructions
Il existe plusieurs façons de le déterminer. L'un d'eux - services spéciaux par définition codant en . Par exemple, allez sur le site Web http://charset.ru/, insérez « illisible » dans le champ spécial et cliquez sur le bouton « Décoder ».
Essayez de détecter automatiquement l'encodage à l'aide d'un éditeur de texte. Le fait est que de nombreux éditeurs de texte (par exemple, AkelPad) peuvent reconnaître automatiquement l'encodage « illisible ». Pour ce faire, sélectionnez menu principal"Encodages" - "Définir l'encodage" ou appuyez sur ALT+F5 (dans l'éditeur de texte AkelPad).
Sources:
Texte dans le fichier e-mail, sur une page Web, peut être saisi dans n’importe quelle langue et stocké dans divers encodages informatiques. Il ne s’agit pas seulement de la diversité des codages modernes, plus ou moins ordonnés, mais aussi du stockage de documents ayant avant tout une valeur historique. Il existe également des cas où un document a été enregistré plusieurs fois dans des encodages différents. Si le texte s'ouvre sous la forme d'un ensemble de caractères incompréhensible, il doit être présenté sous une forme lisible.
15.03.2016
Pas encore
Salut tout le monde!
Nous continuons à étudier Les bases du HTML. Dans cette leçon, nous examinerons comment spécifier l'encodage HTML pour un site (page web).
Cette leçon est très importante car ne pas savoir comment spécifier l'encodage d'une page Web peut rendre votre page illisible. Vous demandez : « Comment se fait-il qu’ils ne puissent pas ? »
Laissez-moi vous montrer à quoi ressemble mon blog avec un encodage incorrect :
Donc, Encodage HTML
– ce sont des tableaux de correspondance entre codes et symboles alphabétiques. Autrement dit, notre ordinateur de codage transformera le code en lettres claires et lisibles.
Pour indiquer au navigateur dans quel codage se trouvent les caractères de la page Web, vous devez écrire entre les balises
Voici une balise méta :
Veuillez noter que le code contient le mot « nom de codage ». Ici, vous devez spécifier l'encodage HTML.
Il s'agit généralement de utf-8 ou Windows-1251.
Encodage pourutf-8:
CodagePour Windows-1251:
Si vous oubliez d'indiquer au navigateur dans quel encodage se trouve un site ou une page Web, le navigateur tentera de déterminer automatiquement l'encodage, mais il n'y parviendra pas toujours correctement. Au final, le résultat sera le même que celui que j'ai montré sur la photo ci-dessus.
Passons à la pratique.
Comment créer un document HTML avec
encodage utf-8
« Tous les programmes » => « Accessoires » => « Bloc-notes »
:
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html>
</p><p> <head></head> Voici la balise méta :</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>
<html>
<head>
<title>Ma première page HTML sur StepkinBlog..<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html>
</p><p>Cliquez dans le bloc-notes <span>"Fichier" => "Enregistrer sous..."</span>:</p>
<p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-3.png' width="100%" loading=lazy loading=lazy></p><p><br>Où l'élément « Encodage : » est spécifié « UTF-8 ». <br>Cliquez sur "Enregistrer" :</p>
<p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-4.png' width="100%" loading=lazy loading=lazy></p><p>Agrandir l'image ?</p>
<h3><span>Comment créer un document HTML avec l'encodage Windows-1251</span></h3>
<p>Ouvrez un bloc-notes standard. <span><i>« Tous les programmes » => « Accessoires » => « Bloc-notes »</i>
</span>.<br>Ensuite, collez-le dans le bloc-notes. <a href="https://rokwell.ru/fr/zabyl-zashchitnyi-kod-nokia-kakoi-standartnyi-parol-nokia-dlya/">code standard</a> HTML :</p><p>
<html>
<head>
<title>Ma première page HTML sur StepkinBlog..<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html>
</p><p>Nous indiquons maintenant dans quel encodage la page Web est enregistrée. Pour ce faire, placez entre les balises <head></head> Voici la balise méta :</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</p><p>Voici à quoi cela devrait ressembler (ligne n°4) :</p><p>
<html>
<head>
<title>Ma première page HTML sur StepkinBlog..<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html>
</p><p>Cliquez dans le bloc-notes <span>"Fichier" => "Enregistrer sous..."</span>:</p>
<p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-5.png' width="100%" loading=lazy loading=lazy></p>
<p>À l'endroit où se trouve l'élément « Nom du fichier », écrivez le nom de la page Web en latin et avec l'extension « .html ». Je pense que vous vous en souvenez dès vos premières leçons. <br>Lorsque l'élément « Encodage : » est spécifié, indiquez « ANSI ». <br>Cliquez sur "Enregistrer" :</p>
<p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-6.png' width="100%" loading=lazy loading=lazy></p>
<p>C'est tout!</p>
<p>La plupart des webmasters choisissent le codage UTF-8. Je ne vous en dirai pas les raisons, car j'ai peur de vous surcharger d'informations qui ne sont pas encore nécessaires à votre stade de connaissance du HTML.</p>
<p>Par exemple, dans le bloc-notes, définissez le code :</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Et précisez « ANSI » lors de la sauvegarde :</p>
<p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-6.png' width="100%" loading=lazy loading=lazy></p>
<p>Comme c’est incorrect, le résultat sera le suivant :</p>
<p>Enregistrez correctement vos pages Web pour éviter des résultats comme celui-ci</p>
<p>Post précédent <br></span>
<span>Entrée suivante <br></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<footer>
<div class="td-post-source-tags">
</div>
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://rokwell.ru/kodirovka-html-stranicy-reshenie-problem-nepravilnoi-kodirovkoi-veb-stranicy/" content="https://rokwell.ru/kodirovka-html-stranicy-reshenie-problem-nepravilnoi-kodirovkoi-veb-stranicy/" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span>
<meta itemprop="name" content="Кодировка HTML-страницы. Решение проблем неправильной кодировкой веб-страницы">
</span>
<meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i2.wp.com/makeasite.ru/wp-content/uploads/2015/09/utf-8-and-windows-1251-compare.jpg">
<meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer>
</article>
<style>
.ads-border {
overflow: hidden;
}
.ads-content {
width: 930px;
display: block;
}
@media(max-width: 1140px) {
.ads-content {
width: 910px;
}
}
@media(max-width: 1018px) {
.ads-content {
width: 970px;
}
}
@media (max-width: 767px) {
.ads-content {
width: 134%;
}
}
@media (max-width: 479px) {
.ads-content {
width: 100%;
height: 490px;
}
}
</style>
<div class="ads-block">
<h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">ARTICLES LIÉS</span></h4>
<div class="ads-border">
<div class="ads-content">
<div id="fofuny1" style="height:90px;width:690px;" align="center"></div>
</div>
</div>
</div>
<style>
#mc-container {
padding: 10px;
}
</style>
<dblock></dblock>
</div>
</div>
<div class="td-pb-span4 td-main-sidebar" role="complementary">
<div class="td-ss-main-sidebar">
<aside class="widget widget_text" id="text-23">
<div class="block-title"><span>Utile</span></div>
<div class="textwidget" align="center"><div id="fofuny2" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-24">
<div class="block-title"><span>Publicité</span></div>
<div class="textwidget" align="center"><div id="fofuny3" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-25">
<div class="textwidget">
<p style="text-align: center;">
</p>
</div>
</aside>
<aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4">
<div class="block-title"><span>Nouveau</span></div>
<dblock></dblock>
<div class="rpwe-block ">
<ul class="rpwe-ul">
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/obzor-i-testirovanie-smartfona-nokia-xl-dual-sim-nokia-xl-otzyvy-harakteristiki-ceny-i-foto-oper/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/ru.gecid.com/data/medals/tested_250x250_en.gif" alt="Nokia XL : avis, spécifications, prix et photos Le système d'exploitation est le logiciel système qui gère et coordonne le travail des composants matériels de l'appareil" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/obzor-i-testirovanie-smartfona-nokia-xl-dual-sim-nokia-xl-otzyvy-harakteristiki-ceny-i-foto-oper/" title="Nokia XL : avis, spécifications, prix et photos Le système d'exploitation est le logiciel système qui gère et coordonne le travail des composants matériels de l'appareil" rel="bookmark">Nokia XL : avis, spécifications, prix et photos Le système d'exploitation est le logiciel système qui gère et coordonne le travail des composants matériels de l'appareil</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/chto-delat-posle-ustanovki-windows-ustanavlivaem-programmy-programmy-dlya/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/spec-komp.com/my-img/WPI_SPEC-KOMP.COM_edition.jpg" alt="Que faire après avoir installé Windows ?" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/chto-delat-posle-ustanovki-windows-ustanavlivaem-programmy-programmy-dlya/" title="Que faire après avoir installé Windows ?" rel="bookmark">Que faire après avoir installé Windows ?</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/bios-ne-vidit-zagruzochnuyu-fleshku-pochemu-bios-ne-vidit-zagruzochnuyu-fleshku-s-windows-bios/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/fb.ru/misc/i/gallery/29703/705709.jpg" alt="Pourquoi le BIOS ne voit pas de clé USB amorçable avec Windows Le BIOS ne voit pas de clé USB amorçable, comment y remédier" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/bios-ne-vidit-zagruzochnuyu-fleshku-pochemu-bios-ne-vidit-zagruzochnuyu-fleshku-s-windows-bios/" title="Pourquoi le BIOS ne voit pas de clé USB amorçable avec Windows Le BIOS ne voit pas de clé USB amorçable, comment y remédier" rel="bookmark">Pourquoi le BIOS ne voit pas de clé USB amorçable avec Windows Le BIOS ne voit pas de clé USB amorçable, comment y remédier</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/kak-opredelit-est-li-u-vashego-ipad-sertifikat-rostesta-chto-takoe-rostest-dlya-iphone/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/08.img.avito.st/1280x960/3369497008.jpg" alt="Qu'est-ce que Rostest pour iPhone et quels sont ses avantages ?Iphone n'est pas Rostest, quelle est la différence ?" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/kak-opredelit-est-li-u-vashego-ipad-sertifikat-rostesta-chto-takoe-rostest-dlya-iphone/" title="Qu'est-ce que Rostest pour iPhone et quels sont ses avantages ?Iphone n'est pas Rostest, quelle est la différence ?" rel="bookmark">Qu'est-ce que Rostest pour iPhone et quels sont ses avantages ?Iphone n'est pas Rostest, quelle est la différence ?</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/kak-sozdat-stranicu-v-vk-bez-nomera-telefona-kak-zaregistrirovatsya-vkontakte/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/internetaccessmonitor.ru/uploads/posts/2017-04/1491339386_bezymyannyy1.png" alt="Comment s'inscrire sur VKontakte sans numéro de téléphone ?" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/kak-sozdat-stranicu-v-vk-bez-nomera-telefona-kak-zaregistrirovatsya-vkontakte/" title="Comment s'inscrire sur VKontakte sans numéro de téléphone ?" rel="bookmark">Comment s'inscrire sur VKontakte sans numéro de téléphone ?</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/ne-zaryazhaetsya-telefon-kak-reshit-problemu-s-podzaryadkoi-akkumulyatora-chto/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/vebtech.ru/wp-content/uploads/2018/02/htc_u11_2.jpg" alt="Comment résoudre le problème de charge de la batterie" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/ne-zaryazhaetsya-telefon-kak-reshit-problemu-s-podzaryadkoi-akkumulyatora-chto/" title="Comment résoudre le problème de charge de la batterie" rel="bookmark">Comment résoudre le problème de charge de la batterie</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/obhodim-proverku-akkaunta-google-frp-posle-sbrosa-nastroek-smartfona-hard-reset/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/korki.lol/wp-content/uploads/2016/05/android-apps-services-3.jpg" alt="Pourquoi Google Play Market ne fonctionne-t-il pas (Google Play Market) Erreur de serveur, il n'y a pas de connexion et indique que vous devez vous connecter à votre compte Pourquoi rien ne fonctionne" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/obhodim-proverku-akkaunta-google-frp-posle-sbrosa-nastroek-smartfona-hard-reset/" title="Pourquoi Google Play Market ne fonctionne-t-il pas (Google Play Market) Erreur de serveur, il n'y a pas de connexion et indique que vous devez vous connecter à votre compte Pourquoi rien ne fonctionne" rel="bookmark">Pourquoi Google Play Market ne fonctionne-t-il pas (Google Play Market) Erreur de serveur, il n'y a pas de connexion et indique que vous devez vous connecter à votre compte Pourquoi rien ne fonctionne</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/youtube-com-activate-pereiti-na-stranicu-o-prilozhenii-youtube-dlya-novyh-modelei-televizorov/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/rem-komp.ru/wp-content/gallery/youtube-activate-code/thumbs/thumbs_1568645097161.png" alt="À propos de l'application YouTube pour les nouveaux modèles de Smart TV" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/youtube-com-activate-pereiti-na-stranicu-o-prilozhenii-youtube-dlya-novyh-modelei-televizorov/" title="À propos de l'application YouTube pour les nouveaux modèles de Smart TV" rel="bookmark">À propos de l'application YouTube pour les nouveaux modèles de Smart TV</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="https://rokwell.ru/fr/sony-xperia-sp---tehnicheskie-harakteristiki-vtoroi-pilot-obzor/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/mobile-review.com/review/image/sony/xperia-sp/pic/03.jpg" alt="Sony Xperia SP - Spécifications" loading=lazy loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://rokwell.ru/fr/sony-xperia-sp---tehnicheskie-harakteristiki-vtoroi-pilot-obzor/" title="Sony Xperia SP - Spécifications" rel="bookmark">Sony Xperia SP - Spécifications</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
<div class="td-footer-wrapper td-footer-template-3">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12">
</div>
</div>
<div class="td-pb-row">
<div class="td-pb-span3 logo-footer">
<div class="td-footer-info">
<div class="footer-logo-wrap"><a href="https://rokwell.ru/fr/"><img class="td-retina-data" src="/logo/logo.png" data-retina="/logo/logo.png" alt="Site sur l'informatique" title="Site sur l'informatique" / loading=lazy loading=lazy></a></div>
<div class="footer-text-wrap"></div>
<div class="footer-social-wrap td-social-style-2"></div>
</div>
<aside class="widget widget_text" id="text-16">
<div class="textwidget">
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div>
</aside>
</div>
<div class="td-pb-span9 footer-discription">
<aside class="widget widget_text" id="text-5">
<div class="textwidget">
<p>
<font size="2" color="grey">
</font>
</p>© Site Web sur la technologie informatique, 2024</div>
</aside>
</div>
</div>
</div>
</div>
<div class="td-sub-footer-container">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12 td-sub-footer-menu">
<div class="td-sub-footer-main">
<div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="https://rokwell.ru/fr/feedback/">Retour</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="https://rokwell.ru/fr/sitemap.xml">Plan du site</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">À propos du site</a></li>
</ul></div> </div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("span.ancored").replaceWith(function () {
$this = jQuery(this);
href = $this.attr("title");
text = $this.html();
return '<a href="' + href + '">' + text + '</a>';
} )
} )
</script>
<link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' />
<link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' />
<script type='text/javascript' src='/assets/jquery.form.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/scripts.js'></script>
<script type='text/javascript' src='/assets/front.min.js'></script>
<script type='text/javascript' src='/assets/imagesloaded.min.js'></script>
<script type='text/javascript' src='/assets/masonry.min.js'></script>
<script type='text/javascript' src='/assets/jquery.masonry.min.js'></script>
<script type='text/javascript' src='/assets/rsvp.js'></script>
<script type='text/javascript' src='/assets/tagdiv_theme.js'></script>
<script type='text/javascript' src='/assets/comment-reply.min.js'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ;
</script>
<script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script>
<script type='text/javascript' src='/assets/wp-embed.min.js'></script>
<style type='text/css'>
/*** Shortcodes Ultimate - box elements ***/
/* Common styles
---------------------------------------------------------------*/
.su-clearfix:before,
.su-clearfix:after {
display: table;
content: " ";
}
.su-clearfix:after { clear: both; }
/* Tabs + Tab
---------------------------------------------------------------*/
.su-tabs {
margin: 0 0 1.5em 0;
padding: 3px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #eee;
}
.su-tabs-nav span {
display: inline-block;
margin-right: 3px;
padding: 10px 15px;
font-size: 13px;
min-height: 40px;
line-height: 20px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
color: #333;
cursor: pointer;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.su-tabs-nav span:hover { background: #f5f5f5; }
.su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; }
.su-tabs-nav span.su-tabs-disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}
.su-tabs-pane {
padding: 15px;
font-size: 13px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
background: #fff;
color: #333;
}
.su-tabs-vertical:before,
.su-tabs-vertical:after {
content: " ";
display: table;
}
.su-tabs-vertical:after { clear: both; }
.su-tabs-vertical .su-tabs-nav {
float: left;
width: 30%;
}
.su-tabs-vertical .su-tabs-nav span {
display: block;
margin-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.su-tabs-vertical .su-tabs-panes {
float: left;
width: 70%;
}
.su-tabs-vertical .su-tabs-pane {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.su-tabs-nav,
.su-tabs-nav span,
.su-tabs-panes,
.su-tabs-pane {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-tabs-nav span { display: block; }
.su-tabs-vertical .su-tabs-nav {
float: none;
width: auto;
}
.su-tabs-vertical .su-tabs-panes {
float: none;
width: auto;
}
}
/* Spoiler + Accordion
---------------------------------------------------------------*/
.su-spoiler { margin-bottom: 1.5em; }
.su-spoiler .su-spoiler:last-child { margin-bottom: 0; }
.su-accordion { margin-bottom: 1.5em; }
.su-accordion .su-spoiler { margin-bottom: 0.5em; }
.su-spoiler-title {
position: relative;
cursor: pointer;
min-height: 20px;
line-height: 20px;
padding: 7px 7px 7px 34px;
font-weight: bold;
font-size: 13px;
}
.su-spoiler-icon {
position: absolute;
left: 7px;
top: 7px;
display: block;
width: 20px;
height: 20px;
line-height: 21px;
text-align: center;
font-size: 14px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
.su-spoiler-content {
padding: 14px;
-webkit-transition: padding-top .2s;
-moz-transition: padding-top .2s;
-o-transition: padding-top .2s;
transition: padding-top .2s;
-ie-transition: padding-top .2s;
}
.su-spoiler.su-spoiler-closed > .su-spoiler-content {
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: none;
opacity: 0;
}
.su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; }
.su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; }
.su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; }
.su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; }
.su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; }
.su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; }
.su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; }
.su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; }
.su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; }
.su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; }
.su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; }
.su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; }
.su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; }
.su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; }
.su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; }
.su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; }
.su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; }
.su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; }
.su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; }
.su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; }
.su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; }
.su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; }
.su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; }
.su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; }
.su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; }
.su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; }
.su-spoiler-style-default { }
.su-spoiler-style-default > .su-spoiler-title {
padding-left: 27px;
padding-right: 0;
}
.su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; }
.su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; }
.su-spoiler-style-fancy {
border: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
color: #333;
}
.su-spoiler-style-fancy > .su-spoiler-title {
border-bottom: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f0f0f0;
font-size: 0.9em;
}
.su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; }
.su-spoiler-style-fancy > .su-spoiler-content {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.su-spoiler-style-simple {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.su-spoiler-style-simple > .su-spoiler-title {
padding: 5px 10px;
background: #f0f0f0;
color: #333;
font-size: 0.9em;
}
.su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; }
.su-spoiler-style-simple > .su-spoiler-content {
padding: 1em 10px;
background: #fff;
color: #333;
}
/* Quote
---------------------------------------------------------------*/
.su-quote-style-default {
position: relative;
margin-bottom: 1.5em;
padding: 0.5em 3em;
font-style: italic;
}
/*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */
.su-quote-style-default:before,
.su-quote-style-default:after {
position: absolute;
display: block;
width: 20px;
height: 20px;
background-image: url('../images/quote.png');
content: '';
}
.su-quote-style-default:before {
top: 0;
left: 0;
background-position: 0 0;
}
.su-quote-style-default:after {
right: 0;
bottom: 0;
background-position: -20px 0;
}
.su-quote-style-default .su-quote-cite {
display: block;
text-align: right;
font-style: normal;
}
.su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; }
.su-quote-style-default .su-quote-cite a { text-decoration: underline; }
/* Pullquote
---------------------------------------------------------------*/
.su-pullquote {
display: block;
width: 30%;
padding: 0.5em 1em;
}
.su-pullquote-align-left {
margin: 0.5em 1.5em 1em 0;
padding-left: 0;
float: left;
border-right: 5px solid #eee;
}
.su-pullquote-align-right {
margin: 0.5em 0 1em 1.5em;
padding-right: 0;
float: right;
border-left: 5px solid #eee;
}
/* Row + Column
---------------------------------------------------------------*/
.su-row {
clear: both;
zoom: 1;
margin-bottom: 1.5em;
}
.su-row:before,
.su-row:after {
display: table;
content: "";
}
.su-row:after { clear: both; }
.su-column {
display: block;
margin: 0 4% 0 0;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.su-column-last { margin-right: 0; }
.su-row .su-column { margin: 0 0 0 4%; }
.su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; }
.su-row .su-column:first-child { margin-left: 0; }
.su-column-centered {
margin-right: auto !important;
margin-left: auto !important;
float: none !important;
}
.su-column img,
.su-column iframe,
.su-column object,
.su-column embed { max-width: 100%; }
@media only screen {
[class*="su-column"] + [class*="su-column"]:last-child { float: right; }
}
.su-column-size-1-1 { width: 100%; }
.su-column-size-1-2 { width: 48%; }
.su-column-size-1-3 { width: 30.66%; }
.su-column-size-2-3 { width: 65.33%; }
.su-column-size-1-4 { width: 22%; }
.su-column-size-3-4 { width: 74%; }
.su-column-size-1-5 { width: 16.8%; }
.su-column-size-2-5 { width: 37.6%; }
.su-column-size-3-5 { width: 58.4%; }
.su-column-size-4-5 { width: 79.2%; }
.su-column-size-1-6 { width: 13.33%; }
.su-column-size-5-6 { width: 82.66%; }
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-column {
width: 100% !important;
margin: 0 0 1.5em 0 !important;
float: none !important;
}
.su-row .su-column:last-child {
margin-bottom: 0 !important;
}
}
/* Service
---------------------------------------------------------------*/
.su-service {
position: relative;
margin: 0 0 1.5em 0;
}
.su-service-title {
display: block;
margin-bottom: 0.5em;
color: #333;
font-weight: bold;
font-size: 1.1em;
}
.su-service-title img {
position: absolute;
top: 0;
left: 0;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.su-service-title i {
position: absolute;
top: 0;
left: 0;
display: block !important;
width: 1em;
height: 1em;
text-align: center;
line-height: 1em;
}
.su-service-content { line-height: 1.4; }
/* Box
---------------------------------------------------------------*/
.su-box {
margin: 0 0 1.5em 0;
border-width: 2px;
border-style: solid;
}
.su-box-title {
display: block;
padding: 0.5em 1em;
font-weight: bold;
font-size: 1.1em;
}
.su-box-content {
background-color: #fff;
color: #444;
padding: 1em;
}
.su-box-style-soft .su-box-title {
background-image: url('../images/styles/style-soft.png');
background-position: 0 0;
background-repeat: repeat-x;
}
.su-box-style-glass .su-box-title {
background-image: url('../images/styles/style-glass.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-bubbles .su-box-title {
background-image: url('../images/styles/style-bubbles.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-noise .su-box-title {
background-image: url('../images/styles/style-noise.png');
background-position: 0 0;
background-repeat: repeat-x;
}
/* Note
---------------------------------------------------------------*/
.su-note {
margin: 0 0 1.5em 0;
border-width: 0px;
border-style: solid;
}
.su-note-inner {
padding: 1em;
border-width: 0px;
border-style: solid;
box-shadow: 3px 3px 6px #d0d0d0;
}
/* Expand
---------------------------------------------------------------*/
.su-expand { margin: 0 0 1.5em 0; }
.su-expand-content { overflow: hidden; }
.su-expand-link {
margin-top: 0.5em;
cursor: pointer;
}
.su-expand-link:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
.su-expand-link a,
.su-expand-link a:hover,
.su-expand-link a:active,
.su-expand-link a:visited,
.su-expand-link a:focus {
display: inline;
text-decoration: none;
background: transparent;
border: none;
}
.su-expand-link-style-default .su-expand-link a,
.su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; }
.su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; }
.su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; }
.su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; }
.su-expand-link-style-button .su-expand-link a {
display: inline-block;
margin-top: 0.2em;
padding: 0.2em 0.4em;
border: 2px solid #333;
}
.su-expand-link-more { display: none; }
.su-expand-link-less { display: block; }
.su-expand-collapsed .su-expand-link-more { display: block; }
.su-expand-collapsed .su-expand-link-less { display: none; }
.su-expand-link i {
display: inline-block;
margin: 0 0.3em 0 0;
vertical-align: middle;
color: inherit;
}
.su-expand-link img {
display: inline-block;
width: 1em;
height: 1em;
margin: 0 0.3em 0 0;
vertical-align: middle;
}
/* Lightbox content
---------------------------------------------------------------*/
.su-lightbox-content {
position: relative;
margin: 0 auto;
}
.mfp-content .su-lightbox-content,
#su-generator .su-lightbox-content { display: block !important; }
.su-lightbox-content-preview {
width: 100%;
min-height: 300px;
background: #444;
overflow: hidden;
}
.su-lightbox-content h1,
.su-lightbox-content h2,
.su-lightbox-content h3,
.su-lightbox-content h4,
.su-lightbox-content h5,
.su-lightbox-content h6 { color: inherit; }
/* Common margin resets for box elements
---------------------------------------------------------------*/
.su-column-inner > *:first-child,
.su-accordion > *:first-child,
.su-spoiler-content > *:first-child,
.su-service-content > *:first-child,
.su-box-content > *:first-child,
.su-note-inner > *:first-child,
.su-expand-content > *:first-child,
.su-lightbox-content > *:first-child { margin-top: 0; }
.su-column-inner > *:last-child,
.su-tabs-pane > *:last-child,
.su-accordion > *:last-child,
.su-spoiler-content > *:last-child,
.su-service-content > *:last-child,
.su-box-content > *:last-child,
.su-note-inner > *:last-child,
.su-expand-content > *:last-child,
.su-lightbox-content > *:last-child { margin-bottom: 0; }
</style>
<script>
(function(){
var html_jquery_obj = jQuery('html');
if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {
var path = '/assets/style2.css';
jQuery.get(path, function(data) {
var str_split_separator = '#td_css_split_separator';
var arr_splits = data.split(str_split_separator);
var arr_length = arr_splits.length;
if (arr_length > 1) {
var dir_path = '/wp-content/themes/Newspaper';
var splited_css = '';
for (var i = 0; i < arr_length; i++) {
if (i > 0) {
arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
}
//jQuery('head').append('<style>' + arr_splits[i] + '</style>');
var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,'');
} );
splited_css += "<style>" + formated_str + "</style>";
}
var td_theme_css = jQuery('link#td-theme-css');
if (td_theme_css.length) {
td_theme_css.after(splited_css);
}
}
} );
}
} )();
</script>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html>
