La saturation est une augmentation de l'épaisseur des lignes de police et, par conséquent, du contraste. Il existe généralement quatre types de poids : léger, normal, gras et gras. Cependant, avec en utilisant HTML Vous ne pouvez définir que des styles normaux et gras. Pour mettre du texte en gras, deux balises sont utilisées : Et .
Style de police gras Forte mise en évidence du texte
Style italique
Une police italique n'est pas seulement une inclinaison de caractères individuels ; pour certaines polices, il s'agit d'une refonte complète un nouveau style, imitant l'écriture manuscrite. L'italique du texte est déterminé par deux balises : Et .
Style de police italique Sélection de texte
Il convient de noter que les balises Et , ainsi que Et bien que similaires dans leurs effets, ils ne sont pas entièrement équivalents et interchangeables. Première balise - est une balise de balisage physique et définit le style gras du texte et la balise - avec une balise de balisage logique et met en évidence le texte marqué. Cette division des balises en logiques et formatage physiqueétait initialement destiné à rendre le HTML universel, y compris indépendant du périphérique de sortie. Théoriquement, si vous utilisez, par exemple, un navigateur vocal, alors le texte formaté à l'aide de balises Et , sera marqué différemment. Cependant, il s'est avéré que dans navigateurs populaires le résultat de l'utilisation de ces balises est équivalent.
L'exemple 7.5 montre l'utilisation de balises Et pour formater les textes.
Exemple 7.5. Mots clés Et
Où sont les cookies et le clair de lune ?! - s'exclama le Bad Boy.
Résultat cet exemple montré sur la fig. 7.5.
Bonjour, chers lecteurs du blog ! Cet article parlera de balises de formatage du texte. Exemples frappants mettent en surbrillance le texte en gras ou en italique. Nous examinerons également l’impact de certaines balises sur l’optimisation interne du site et les règles de rédaction de celles-ci. Vous pouvez lire à ce sujet dans l’article donné. À propos, vous pouvez trouver des éléments de conception de texte similaires dans de nombreux éditeurs de texte, par exemple dans Word.
Les balises sont divisées en 2 types : en bloc et en ligne. Lorsque vous utilisez le premier, vous pouvez modifier le contenu d'une partie du texte (lignes, fragments individuels ou mots), tandis que les seconds le sont. Les balises de formatage que nous examinerons dans cet article sont principalement en minuscules.
Règles et ordre d'écriture des balises
Vous savez déjà ce que sont les balises d'ouverture et de fermeture. Sinon, lisez l'article donné au tout début de ce document. En bref, il existe deux types de balises : simples (par exemple, transfert vers nouvelle ligne) et conteneur (par paires). Ainsi, toutes les balises de formatage du texte sont jumelé. Cela signifie que tout élément a une balise d'ouverture et de fermeture, et la surbrillance doit être placée entre elles. Par exemple, sélection correcte la phrase ressemblera à ceci : Fragment sélectionné
Lorsque le navigateur traite ce fragment, vous verrez le texte suivant : Fragment sélectionné. D'ailleurs, toutes les balises ne sont pas affichées dans le flux RSS ().
L’essentiel lors de l’écriture de balises est de penser à les fermer. Sinon, tout le texte de la page sera surligné en gras (dans l'exemple avec la balise ). Mais il existe des cas où vous devez mettre en évidence un certain fragment à la fois en gras et en italique. Mais aucune balise n’effectue cette action. Il n'y a qu'un seul moyen de sortir de cette situation : utiliser deux balises en même temps. Peu importe dans quel ordre vous les utilisez. Par conséquent, écrire du texte avec des balises comme celle-ci :
Fragment sélectionné
ou comme ça :
Fragment sélectionné
Vous recevrez toujours Fragment sélectionné italique et gras à la fois. Cependant, il est préférable d’utiliser la première option, car au départ c’était la seule et la bonne. N'oubliez pas non plus que chaque navigateur peut traiter les balises différemment (), en fonction des paramètres. Passons maintenant aux balises de formatage elles-mêmes.
Texte en gras et en italique - balises , , Et
Le plus Tags populaires formater le texte - le mettre en surbrillance audacieux Et italique. Ils sont généralement utilisés pour donner de l'importance à un fragment. Le premier cas sert à sélectionner un fragment contenant informations utiles ou mots clés. L'italique a le même objectif que le texte en gras, mais l'information est moins importante car l'italique est moins visible à l'arrière-plan du corps du texte que le texte en gras.Considérons d'abord mettre le texte en gras. Il y a deux balises utilisées pour cette action - Et . Différences dans apparence Non. Cependant, étant donné que chaque navigateur peut interpréter chaque élément différemment, vous pourrez peut-être constater des différences. Voici à quoi ressemble le texte dans les balises Et sous une forme déjà traitée par le navigateur :
Texte dans les balises fortes
Texte dans les balises b
Et voici à quoi ressemblent ces deux lignes dans le code source de la page :
Texte dans les balises fortes Texte dans les balises b
On peut observer la même situation dans le cas de balises italiques Et . Essayez de trouver les différences entre les deux exemples :
Texte dans les balises em
Texte dans les balises I
Et ici source:
Texte dans les balises em Texte dans les balises I
Ainsi, les balises gras et italiques considérées ne sont en fait pas différentes, mais alors pourquoi avons-nous besoin, par exemple, de la balise s'il y a ? Après tout, ce dernier ne contient qu’un seul caractère (sans compter les parenthèses) et est donc plus facile à écrire. Et le fait est que les balises Et influence . Si vous entourez des mots-clés avec ces balises, cela aura un effet bénéfique sur la promotion du site Web. L'essentiel est de ne pas en faire trop - le texte doit contenir au maximum 5 % de texte en gras dans la balise. , et la même quantité d'italique dans la balise .
Si vous souhaitez simplement mettre en évidence un point du texte, utilisez la balise ou . En général, je pense que les moteurs de recherche considèrent également le texte de ces balises comme plus important, mais optimisation interne ils ont encore moins d'influence que Et .
Balises pour surligner du texte avec une ligne - , Et
Examinons maintenant quelques balises qui utilisent un tiret dans la conception du texte. Le plus célèbre pour toi éditeurs de texte — étiqueter
ou souligner. Cette balise n'a pas d'impact sur le classement (pour autant que je sache), mais mettre en évidence du texte et attirer l'attention dessus sera utile. J'ai donné un exemple d'utilisation de cette balise juste au dessus. Deux autres balises similaires dans leur objectif - Et . Les deux remplissent la fonction de supprimer du texte. Vous pouvez utiliser cette balise dans n'importe quelle situation : si vous mettez à jour un document (ou plutôt une partie de celui-ci), vous pouvez rayer l'ancien et en ajouter un nouveau ; si vous allez écrire quelque chose qui s'écarte du sujet du matériel ; quelque chose qui ne correspond pas aux normes morales et éthiques.
Les différences entre ces deux balises résident uniquement dans leur en écrivant, de sorte qu'il est préférable d'utiliser le premier, car premièrement, c'est plus pratique à écrire, et deuxièmement, votre page contiendra moins de code HTML, et les moteurs de recherche adorent cela.
Étiqueter et attributs - paramètres de police du texte
Considérons maintenant une balise qui n'est pas utilisée sans attributs. En l'utilisant, vous pouvez définir les paramètres d'un morceau de texte spécifique. De manière générale, il est désormais préférable d'utiliser des (feuilles de style en cascade), car... en les utilisant, vous pouvez réduire considérablement tout le code HTML de la page. Alors, regardons cette même balise . Tout existe pour lui trois attributs :
- affronter- la police elle-même. Par exemple, Arial, Courier ou Verdana. Vous pouvez en citer plusieurs, car tous les utilisateurs ne disposent pas d'un ensemble complet de polices, et en ayant écrit plusieurs dans attribut de visage, le navigateur pourra choisir lequel utiliser, ou plutôt lequel est présent dans le système ;
- taille— un attribut indiquant la taille du texte. Peut être exprimé comme dans unités conventionnelles, et en pixels ;
- couleur- couleur du texte. Cet attribut peut être utilisé à la fois dans les codes de couleur HTML et dans les codes de mots. Les premiers ont la forme #FFFFFF (où F est n'importe quel chiffre ou lettre de A à F), et les seconds sont écrits avec des mots simples (par exemple, rouge).
Voici à quoi ressemble le texte dans la balise en utilisant chaque attribut :
Ce texte fait 6px
Ce texte est rouge Ce texte est en police Arial Ce texte est rouge et taille 5pxEt voici ce que vous verrez après avoir traité le code écrit : 
Bloquer les éléments de conception de texte - titres -, paragraphe
, paragraphe
Enfin, nous examinerons les éléments de bloc, qui sont utilisés dans presque tous les documents. Ce sont des balises de titre et de paragraphe. Considérons le premier. Il existe 6 types de titres et chacun a sa propre balise. Chaque type n'a que son propre numéro de série et est enregistré à l'aide de balises
, ,..., . Voici à quoi ressemblent tous les en-têtes une fois traités :
. Voici à quoi ressemblent tous les en-têtes une fois traités :
Le numéro après le titre du mot correspond au numéro dans la balise
Parlons maintenant de la balise de surbrillance du paragraphe
La fonction de cette balise est de séparer le texte entre un autre texte identique et une ligne vide. Si vous regardez le code source d'un document, vous pouvez voir ce qui suit :
Les rectangles verts contiennent un paragraphe, les rectangles rouges en contiennent un autre. Et voici à quoi ressemble ce code après traitement par le navigateur (la flèche pointe vers une ligne vide) :
En conséquence, nous obtenons une séparation assez notable d'un paragraphe d'un autre, ce qui est bénéfique - la lecture devient plus pratique.
C'est la fin de l'article sur balises de formatage de document. Il y en a beaucoup plus que ce que j'ai décrit dans ce document. C'est juste qu'il y a beaucoup à dire sur certains d'entre eux, c'est pourquoi des articles séparés avec une revue complète leur seront consacrés !
Salutations, amis.
Après une autre longue pause, je me suis rappelé que je n’avais pas écrit une seule ligne depuis longtemps. Bien sûr, il y a des raisons à cela, car il y aura toujours une raison de trouver une excuse, n'est-ce pas ? En fait, je fais le cours vidéo tous les jours, ce que j'ai déjà mentionné à plusieurs reprises, mais pour l'instant je n'en dirai pas plus, vous découvrirez tout bientôt.
Donc, puisque rien ne m'est venu à l'esprit d'écrire. J'ai décidé de consulter les statistiques pour voir ce qui intéresse les utilisateurs de RuNet concernant HTML, WordPress, DLE et des sujets similaires. Et devine quoi? Il y a encore quelque chose à écrire. Toutes les questions que j'ai trouvées semblent avoir des réponses, mais pas toujours sous une forme compréhensible. Et en général, c'est devenu intéressant d'écrire quelque chose comme ça.
Aujourd'hui, nous allons parler de HTML. À savoir, nous parlerons de la façon de surligner du texte en gras et en italique, et nous parlerons également de la surbrillance avec de la couleur.
Rendre le texte en gras.
Pour mettre du texte en gras, vous n’avez pas besoin de faire quoi que ce soit d’extraordinaire avec les styles CSS ni de trouver d’autres complications. HTML possède déjà cette fonctionnalité. Dans le même temps, nous pouvons non seulement mettre en évidence le texte en gras, mais également le mettre en valeur en utilisant le surlignage. L'accent peut être mis sur les moteurs de recherche ou sur tout navigateur ou programme spécial. L'essentiel est de ne pas en faire trop en mettant l'accent sur le texte d'un article ou sur une page contenant des informations, car cela peut avoir un effet néfaste, au moins sur la promotion de cette page HTML.
Ainsi, pour simplement mettre du texte en gras, on peut utiliser la balise . Cette balise fait référence à des éléments de balisage physique, tout en mettant le texte en gras sans y mettre d'accent. Cette balise est une balise appariée, ce qui signifie qu’elle possède à la fois une balise d’ouverture et une balise de fermeture. De plus, puisque l'élément est en ligne, il doit se trouver dans un élément de bloc, par exemple
Exemple de code :
vignette
Résultat:
vignette
Dans ce cas, nous avons simplement surligné le texte en gras et c’est tout.
Mais cela arrive, nous devons donc non seulement mettre en évidence le texte, mais nous concentrer sur lui. Pour cela nous pouvons utiliser la balise de balisage logique . Non seulement le texte mis en évidence avec cette balise a plus de poids pour les moteurs de recherche. Mais en théorie ça devrait être différent du tag dans les navigateurs vocaux, par exemple par intonation. Cependant, je ne peux ni confirmer ni infirmer cette information, est-ce vrai ?
Dans ce cas, tout est exactement comme dans le cas d'une simple mise en évidence en gras, seulement nous mettons l'accent, et pas seulement la mise en évidence.
Exemple de code :
Résultat:
Tout est assez simple, n'est-ce pas ?
Mettre le texte en italique.
Dans ce cas, tout n’est pas plus compliqué que dans le premier. Et notre situation est absolument la même. Nous pouvons surligner du texte avec deux options en HTML. Encore une fois, en utilisant soit une balise de balisage physique, soit une balise logique, avec laquelle nous nous concentrons à nouveau sur le texte sélectionné.
Pour rendre le texte en italique nous utiliserons la balise . Cet élément est apparié et en ligne, ce qui nous indique que nous devons utiliser à la fois une balise d'ouverture et une balise de fermeture. Ils devraient également l'utiliser à l'intérieur d'un élément de bloc. Et dans ce cas, l’élément de bloc le plus approprié est la balise de paragraphe.
Exemple de code :
texte en italique
Résultat:
texte en italique
Et bien sûr, on peut souligner le texte en même temps en le surlignant en italique à l'aide de la balise . Cet article est le même que , sauf que le texte est en italique et non en gras.
Exemple de code :
le texte sur lequel nous nous sommes concentrés
Résultat:
le texte sur lequel nous nous sommes concentrés
Et la dernière chose dont je voudrais parler aujourd'hui est la surbrillance du texte avec de la couleur.
Malheureusement, nous n'avons pas de balise pour surligner le texte avec de la couleur en HTML. Mais néanmoins, il n'y a rien de compliqué dans cette méthode.
Ainsi, pour mettre en évidence une certaine partie du texte avec de la couleur, nous pouvons envelopper la partie souhaitée du texte avec une balise , qui est une balise générique utilisée dans un élément de bloc. Dans notre cas, l'élément block est la balise Mais ajoute pas assez. Vous devez également spécifier le paramètre de style, qui vous permettra d'ajouter des propriétés CSS au texte requis, et spécifier la propriété elle-même (couleur), qui vous aidera à définir une couleur spécifique. Enfin, fournissez une valeur pour la propriété color. Mais la question peut se poser : « Que dois-je indiquer ? Vous devez spécifier le code HTML de la couleur dans laquelle nous voulons « peindre » le texte. Des codes de couleurs HTML peuvent être trouvés. Maintenant, pour que ce soit plus clair, regardons un exemple. Exemple de code.
texte à surligner couleur
Dans ce cas, nous soulignons un mot : avec couleur. Je tiens également à noter que la balise est jumelé et nous devons le fermer là où la propriété devrait se terminer.
Résultat:
texte à surligner
De ces manières simples, nous pouvons manipuler le texte de notre page. Je tiens également à souligner que tout ce dont nous venons de parler fonctionne aussi bien sur WordPress que sur DLE, puisque tout moteur utilise HTML pour afficher les pages. C'est pourquoi le HTML peut être considéré comme la base de tout site Web, quel que soit le CMS dont vous disposez.
J'espère avoir tout expliqué clairement.
Bonne chance, les amis. Bientôt... Il y aura des nouvelles intéressantes...
L’un des moyens les plus simples de mettre en évidence un mot ou une phrase dans un texte consiste à utiliser un style de lettre différent. C'est ainsi que vous pouvez mettre en valeur un mot ou une phrase en utilisant le gras. Les pages vous permettent facilement de surligner des mots en utilisant différents styles : italique, souligné, gras.
Police en gras pour mettre en évidence l'essentiel
Les mots surlignés en caractères gras semblent les plus brillants et les plus accrocheurs. De tels mots et expressions attirent immédiatement le regard. Ainsi, afin d'apprendre à surligner rapidement dans le texte les bons endroits, vous devez vous rappeler du code HTML spécial. La police grasse est définie à l’aide d’une balise appariée.
Avant le mot, l'expression ou la phrase qui doit être mis en évidence, une balise d'ouverture est placée . Après la dernière lettre du texte à surligner, une balise fermante est placée. Tout ce qui se trouve entre ces deux balises apparaîtra en gras lorsqu'il sera affiché dans le navigateur.
Autres options de surbrillance
Nous avons donc découvert que vous pouvez surligner du texte en utilisant un style différent. Nous avons décidé qu'il était plus simple et en même temps efficace d'utiliser le gras Police HTML. Parlons maintenant des autres options de sélection.
Ainsi, vous pouvez surligner le texte en italique à l'aide d'une balise associée , soulignez-le avec . C'est le plus des moyens simples mettre en surbrillance le texte.
Il existe également des balises moins connues et utilisées qui peuvent être utilisées pour mettre en évidence des mots et des phrases dans un texte. Ainsi, pour rayer le texte, il suffit d'utiliser . Une balise associée aidera à rendre le texte à espacement fixe . Si vous devez créer un exposant, utilisez , inférieur - .
Dans ce cas, comme auparavant, le texte dont vous avez besoin doit se trouver entre les balises d'ouverture et de fermeture. Comme vous pouvez le constater, il n'y a rien de compliqué, l'essentiel est de mémoriser ces codes ou de les noter.
Utiliser plusieurs polices
Si vous souhaitez rendre votre texte plus expressif, vous pouvez utiliser plus que de simples polices grasses. Le balisage HTML vous permet de mettre en évidence un mot en utilisant plusieurs styles en même temps. Ainsi, vous pouvez mettre un mot en gras, barré et italique à la fois.
Dans le même temps, vous devez vous rappeler une chose : toutes les balises doivent être fermées séquentiellement. Par exemple, entrée correcteça pourrait être comme ça :
- le texte sélectionné.
Si vous fermez les balises dans un ordre différent, le texte ne sera pas mis en surbrillance de manière incorrecte. Un exemple d'entrée erronée :
- le texte sélectionné.
Dans ce cas, le navigateur sera confus et ne comprendra pas exactement ce que vous attendez de lui.
À propos, on peut noter ici que les trois options de style - gras, souligné et italique - sont mémorisées assez facilement si vous connaissez les touches de raccourci dans Word. Là, le style est défini en utilisant les mêmes touches de lettres tout en maintenant Ctrl enfoncé.
Comme vous pouvez le constater, vous pouvez utiliser non seulement des polices italiques ou grasses. Le balisage HTML vous permet de surligner des mots aussi facilement que Word classique.
conclusions
Pour mettre en valeur le texte, non seulement une variété de couleurs et de nuances sont largement utilisées, Différentes tailles et le type de police, mais aussi son style. De plus, c'est à l'aide d'un contour différent que tel ou tel fragment de texte peut être magnifiquement et facilement mis en valeur.
Pour modifier le style de police, vous devez utiliser n'importe quelle balise que vous connaissez. La police grasse d'une page HTML est la police la plus claire et la plus visible, et est donc le plus souvent utilisée pour mettre l'accent.
Aujourd'hui, je vais vous expliquer comment mettre les mots en gras sur un site Web en utilisant HTML et CSS. Cette conception est utilisée lorsque vous devez mettre en valeur certaines informations Sur la page. Et nous ne parlons pas seulement des gros titres, mais aussi de en mots simples, phrases dans le texte. Ceci est mis en œuvre tout simplement.
Pour mettre en évidence certains textes en gras, utilisez des Balises HTML — Et . Par exemple le code suivant :
| Texte brut. Vignette. Texte en gras fort. |
Texte brut.
Vignette.
Texte en gras fort.
La sortie donne l'image suivante :
Les deux dernières options se ressemblent visuellement, mais elles sont légèrement différentes l'une de l'autre. Étiqueter spécifie une simple mise en évidence stylistique du mot en gras, alors que En même temps, cela ajoute une certaine signification sémantique « renforcée » (importante). Autrement dit, la dernière ligne n'est pas seulement du texte en gras, mais une sorte de une information important. En principe, pour les moteurs de recherche, il est recommandé d'utiliser .
Vous pouvez également voir les polices grasses écrites en HTML à l'aide de styles :
Exemple de texte en gras.
Exemple de texte avec audacieux en un mot.
Sur le site, il s'affiche ainsi :
Bien que le code de texte en gras pour HTML fonctionne correctement, cela ne doit pas être fait de cette façon. Tous les styles de conception doivent être inclus dans le fichier CSS. Donc, dans l'exemple ci-dessus, vous deviez utiliser les balises
ET spécifiez la classe appropriée, puis spécifiez sa conception dans la feuille de style. Ce sont les règles de formatage du code. Donc, pour les polices grasses en HTML, utilisez la balise .
Texte gras en CSS
Pour créer une police grasse en CSS, utilisez la propriété font-weight. Il est utilisé pour indiquer la « saturation » d’un fragment de texte. Les valeurs peuvent aller de 100 à 900, mais les plus couramment utilisées sont :
- gras - 700 par défaut ;
- normal - 400 par défaut.
Il existe également des options de valeur plus grasse et plus claire, qui modifient la police en fonction du parent pour qu'elle soit respectivement plus ou moins grasse.
Pour mettre du texte en gras en CSS, vous devez définir un style sur tel ou tel élément, par exemple :
Texte brut avec point culminant audacieux dans le centre.
fort ( poids de la police : gras ; )
Ici, je voudrais noter une petite nuance qui m'a été dite - si vous créez pour un élément nouvelle classe, il est alors conseillé d'utiliser un nom plus ou moins « compréhensible ». Par exemple, dans l'exemple ci-dessus, le style class="my-bold-font" semble plus logique que class="new-font", car on peut en partie comprendre son but. C’est un plus pour ceux qui regarderont et utiliseront votre mise en page à l’avenir.
Dans le prochain article, je vous parlerai des polices grasses intéressantes que j’ai réussi à trouver.