Salutations à tous les lecteurs de cet article et abonnés de mon blog ! Je souhaite consacrer la publication d'aujourd'hui à un sujet sans connaissance duquel vos ressources Internet ne seront ni lisibles ni attrayantes : « Comment définir une police en HTML ». Le sujet en lui-même est simple et je suis sûr que vous le maîtriserez rapidement.

Cependant, il ne faut pas oublier que les langages Web sont riches en toutes sortes d’outils de conception de polices que, idéalement, vous devez connaître. Après avoir lu l'article, vous maîtriserez en toute confiance le formatage du texte, apprendrez à définir différents styles, types de styles de police et de décorations, ainsi qu'à modifier la taille et la couleur des phrases et des lettres individuelles. Commençons!

Les polices sont différentes

La majeure partie des panneaux, de la presse et de la littérature, des sites Web et autres services utilisent polices standards. Bien qu'ils soient confortables, ils sont depuis longtemps devenus ennuyeux et n'attirent pas l'attention. C'est pourquoi de nombreux designers modifient légèrement le type de design ou créent complètement de nouveaux styles. Les polices les plus connues et les plus influentes sont :

• Helvétique ;
• Futura ;
• Garamond;
• Bodoni ;
• Bembo;
• Rockwell ;
• Times New Roman.

Leurs principales différences résident dans leurs relations avec certaines familles. Il existe des familles serif (serif), sans serif, décoratives, italiques et monospaces.

Je tiens également à souligner qu'il existe 5 tailles de police.

Commençons par le langage HTML et ses « capacités créatives »

Nom d'abord entête

P. sous-titre avec une lettre rouge !

Ici se trouve d'abord paragraphe actuel exemple. Pour plus de clarté ces mots sera écrit en italique.

Permettez-moi de vous rappeler que l'attribut aligner = "centre" définit le texte à afficher au centre.

Et maintenant, le moment est venu pour le CSS de montrer ses compétences

Malgré l'ensemble des diverses balises fournies par HTML, CSS est un outil plus pratique et plus flexible pour concevoir l'apparence des polices.

Les principales propriétés utilisées pour formater le contenu sont : Police de caractère et ses composants : décoration de texte.

Regardons-le d'abord Police de caractère. Ce paramètre universel, grâce auquel vous pouvez définir plusieurs valeurs en même temps. De plus, chaque paramètre fonctionne avec ses propres mots-clés.

Nom de la propriété	Mots clés
famille de polices	Peut être installé en tant que familles de polices standard : · sans empattement (sans-serif); · antique (serif); · décoratif (fantastique) ; · italique (cursif) ; · monospace (monospace), Il en va de même pour les styles standards existants (Arial, Calibri, etc.).
taille de police	Pour définir la taille absolue des symboles, les notations suivantes sont utilisées : xx-small, x-small, small, medium, large, x-large, xx-large. Vous pouvez également spécifier une valeur unique.
poids de la police	Responsable de la saturation du style du texte. Change de plage ou est spécifié à l'aide des mots normal, gras, plus clair ou plus gras.
variante de police	Spécifie la représentation des lettres en utilisant mots clés: petites majuscules, normales ou héritées.
le style de police	Définit le parent normal, oblique, italique ou hérite.
police-étirement	Indique la densité des lettres. Les valeurs suivantes peuvent être spécifiées : ultra-condensé, ultra-expansé, extra-condensé, extra-expansé, semi-condensé, semi-expansé, normal, expansé, condensé et hérité.

Propriété décoration de texte aide à décorer le texte éléments supplémentaires, comme le soulignement ( souligner), barré ( ligne à travers), surligné ( surligner), et hérite également des paramètres du parent ( hériter) ou annuler toute inscription ( aucun).

Il est maintenant temps de passer au deuxième exemple. J'ai pris le code précédent et je l'ai stylisé en utilisant CSS. Ainsi, le titre a été décoré d'une ombre (en utilisant la propriété texte-ombre) et avec un contour autour de ( frontière-couleur). En même temps, j’ai agrandi un mot. Je voulais aussi utiliser le paramètre opacité pour définir la transparence du sous-titre.

Nom d'abord entête

Sous-titre translucide !

Ici se trouve d'abord paragraphe actuel exemple. Pour plus de clarté ces mots sera écrit en italique.

Certains sites attirent les utilisateurs non pas avec des animations, ni avec des images ou des photographies, ni avec des vidéos, mais uniquement avec leur contenu textuel. Le texte fait partie intégrante du contenu de nombreux sites populaires. Dans les leçons précédentes, nous avons examiné les propriétés CSS qui vous permettent de changer la couleur du texte, d'y ajouter une ombre, de l'aligner et d'y ajouter un soulignement, un surlignement ou même un barré. Cette leçon examinera quelles sont les familles de polices et comment modifier la police de texte par défaut.

Différence entre les familles de polices Sans-serif et Serif

site Web - police sans empattement

site Web - police serif

Familles de polices en CSS

DANS Polices CSS divisée en familles, chaque famille est constituée d'un ensemble de polices qui ont caractéristiques générales. Il n'existe que cinq familles de polices :

• sans-serif - polices sans-serif, elles sont considérées comme mieux lisibles sur un écran d'ordinateur que les polices de la famille serif.
• serif est une famille de polices serif. Beaucoup de gens les associent à des articles de journaux. Les empattements sont des traits et des tirets décoratifs le long des bords des lettres.
• monospace est une famille de polices dont les caractères ont la même largeur fixe. Ces polices sont principalement utilisées pour afficher des exemples de code de programme.
• cursive - polices qui imitent le texte manuscrit.
• fantasy - polices artistiques et décoratives. Ils sont peu répandus, ne sont pas disponibles sur tous les ordinateurs et sont rarement utilisés dans la conception de sites Web.

La propriété font-family vous permet de modifier la police par défaut. Il contient généralement une liste de polices interchangeables séparées par des virgules et appartenant à la même famille. Si le nom de la police comprend plusieurs mots, il doit être spécifié entre guillemets. Le nom de famille est généralement indiqué à la fin de la liste :

Corps (famille de polices : Verdana, Helvetica, Arial, sans-serif ; )

Regardons comment le navigateur traite la liste des polices spécifiées dans notre propriété font-family :

1. Il vérifie d'abord si la police Verdana est installée sur votre ordinateur et, si c'est le cas, l'utilise comme police pour le texte à l'intérieur de l'élément (dans notre cas, à l'intérieur de l'élément )
2. Si Verdana n'est pas installé, il recherche la police Helvetica. Quand recherche réussie l'utilise à l'intérieur .
3. Si Helvetica n'est pas installé, il recherche la police Arial. S'il est disponible sur l'ordinateur, il l'applique en interne .
4. Enfin, si aucune des polices spécifiées n'est trouvée, la première police de la famille sans-serif trouvée par le navigateur de l'ordinateur est utilisée. De cette façon, le navigateur peut déterminer indépendamment la police appropriée de la famille.

Propriété CSS famille de polices

Paragraphe utilisant la police Times New Roman.

Paragraphe utilisant la police Arial.

Essayer "

Remarque : Lorsque vous sélectionnez une seule police spécifique, il est important de comprendre que le navigateur ne l'affichera que si la police est installée sur l'ordinateur de l'utilisateur. Si la police n'est pas trouvée, le texte sera affiché dans la police "Times New Roman", qui est la police par défaut dans tous les navigateurs.

La taille de la police sur le site Web peut être définie comme suit : Aide HTML, et en utilisant CSS. Considérons les deux options.

Définition de la taille de la police à l'aide de HTML

La taille de la police sur la page peut être déterminée à l'aide de la balise Police de caractère HTML. Dans l'article, nous avons déjà regardé le tag Police de caractère et ses attributs. L'un des attributs de cette balise est taille, qui vous permet de définir la taille de la police. Il s'applique de la manière suivante :

Générateur de site Web "Nubex"

Taille peut prendre des valeurs de 1 à 7 (la valeur par défaut est 3, ce qui correspond à 13,5 points pour la police Times New Roman). Une autre option pour spécifier l'attribut est « +1 » ou « -1 ». Cela signifie que la taille sera modifiée par rapport à la base de 1 point plus ou moins, respectivement.

Cette méthode est assez simple à utiliser et est indispensable si vous devez modifier la taille de la police d'un petit morceau de texte. Sinon, il est recommandé de styliser le texte en utilisant CSS.

Définir la taille de la police à l'aide de CSS

En CSS, vous pouvez modifier la taille de la police en utilisant la propriété taille de police, qui s'applique comme suit :

Dans l'exemple ci-dessous, la taille de la police est définie en pixels. Mais il existe d'autres façons de définir la taille :

• grand, petit, moyen- définir la taille absolue (petite, moyenne, grande). Les valeurs extra-small (x-small, xx-small), extra-large (x-large, xx-large) peuvent également être utilisées.
• plus grand, plus petit- définir la taille relative (plus petite ou plus grande par rapport à l'élément parent).
• 100% - la taille relative est définie (en pourcentage par rapport au parent). Par exemple : h1 ( font-size: 180%; ) Cela signifie la taille de la balise H1 sera de 180 % de la taille de police de base.
• Autres options pour définir la taille relative :
  • 5ex- signifie que la taille sera de 5 hauteurs de lettres Xà partir de la police de base ;
  • 14pts- 14 points ;
  • 22px- 22 pixels ;
  • 1vw- 1% de la largeur de la fenêtre du navigateur ;
  • 1vh- 1% de la hauteur de la fenêtre du navigateur ;

Permet de surligner du texte en italique, italique ou vice versa pour rendre le texte vue générale. Cette propriété n'a que trois valeurs :

• normal - texte standard avec un style normal, c'est-à-dire ni italique ni italique
• italique - style italique
• oblique - style oblique

Paragraphe avec la valeur normale.

Paragraphe avec valeur en italique.

Paragraphe avec le sens oblique.

Essayer "

Les polices italiques étaient traditionnellement des versions stylisées de polices basées sur la calligraphie, tandis que les polices de style obliques étaient créées en ajoutant simplement une légère inclinaison aux caractères. La plupart des polices ne contiennent pas de jeu de caractères italiques, c'est pourquoi le navigateur utilise souvent un algorithme incliné pour les caractères de texte. Cela signifie que dans de nombreux cas, vous ne verrez pas de différence entre les valeurs italiques et obliques.

Taille de police

Changer la taille de la police dans un élément - bonne façon le mettre en valeur visuellement et lui donner une signification, ou vice versa, montrer que cette information ne devrait pas attirer une attention accrue.

Pour modifier la taille de la police, utilisez la propriété font-size. Il existe plusieurs façons de spécifier la taille de la police, examinons les plus courantes :

Pixels

Les valeurs de pixels sont souvent utilisées car cette approche permet un contrôle très fin de la taille. La valeur numérique se termine caractères alphabétiques px, qui doit venir immédiatement après le nombre (il ne doit y avoir aucun espace entre le nombre et px).

Corps (taille de police : 14 px ; )

Intérêt

La taille de police par défaut dans les navigateurs est de 16 px. Ainsi, une valeur de 100 % équivaut à 16 px et 200 % équivaut à 32 px. Si vous définissez une règle qui indique tout le texte à l'intérieur d'un élément valeur 75 % de la taille par défaut (cela correspondra à 12 px), puis définissez une autre règle qui définit la valeur à 75 % pour son élément enfant, la taille de la police dans cet élément sera alors de 9 px (c'est-à-dire 75 % de 12 px). ).

Corps (taille de police : 100 % ; )

E.M.

L'unité em vous permet de modifier la taille de la police par rapport à la taille de la police de l'élément parent. Étant donné que la taille de police par défaut dans les navigateurs est de 16 px, vous pouvez utiliser des règles similaires à celles utilisées pour les valeurs en pourcentage.

Corps (taille de police : 14 px ; ) h2 (taille de police : 1,2em ; )

Dans l'exemple, nous définissons l'élément la taille de la police est de 14 px, et pour tous les éléments

- 1,2em. Cela signifie que la taille de la police des titres de deuxième niveau sera multipliée par 1,2. Dans notre cas, la taille de tous les en-têtes

sera une taille de police de 1,2 élément , ce qui signifie 1,2 fois plus grand que 14px et est approximativement égal à 17px. (La taille réelle sera de 16,8, mais la plupart des navigateurs l'arrondiront à 17.)

Remarque : Les pourcentages et les ems sont essentiellement deux manières différentes d'atteindre le même objectif. Ils offrent tous deux la possibilité de définir la taille par rapport à la taille de la police de l'élément parent.

Mots clés

CSS propose sept mots-clés qui vous permettent d'attribuer une taille de police par rapport à la taille par défaut (16 px) : xx-small, x-small, small, medium, large, x-large et xx-large.

P (taille de police : petite ; )

Medium est la taille de police par défaut dans les navigateurs. Les valeurs restantes réduisent ou augmentent la taille de la police selon différents facteurs. La plus petite taille de police xx-small est d'environ 9 pixels, chaque taille suivante est environ 20 % plus grande que la précédente :

Redimensionnez en utilisant des pourcentages.

Redimensionnez en utilisant les pixels.

Redimensionner à l'aide du mot-clé x-small.

Il semblerait, pourquoi connaître les balises HTML pour le texte, si désormais presque tous les panneaux d'administration en ont une pratique qui les définit automatiquement ?

Le fait est que le formatage du contenu sur un site Web est fondamentalement différent du travail dans des applications bureautiques. Ici, il ne suffit pas simplement de donner au texte une apparence attrayante, car non seulement l'affichage d'une page Web, mais aussi sa promotion dans les moteurs de recherche dépendent d'une conception correcte.

Balises et attributs HTML : syntaxe de base

Tout texte a code caché, qui « explique » à l’ordinateur quoi et comment afficher à l’écran. Toutes les informations sont enregistrées à l'aide d'un ensemble d'éléments universels.

Essentiellement, les balises de texte HTML sont des commandes qui ajoutent ou modifient certains blocs à une page. apparence. Le format d'enregistrement correct ressemble à ceci :

Veuillez noter que toutes les balises ne sont pas appariées. Par exemple,
(saut de ligne) ou

---

(ajout ligne horizontale) n'a pas du tout besoin d'être fermé.

Pourquoi vous ne pouvez pas copier des articles de Word et d'autres programmes dans l'éditeur de site Web

Bien que moderne programmes de bureau utilisez les mêmes balises HTML pour le texte, dans 99% des cas le code natif est inutilisable pour les pages web. Même si le document s'affiche normalement dans l'application elle-même, une fois inséré sur un site Web, le formatage peut être perdu. De plus, en raison de grande quantité balises et attributs supplémentaires, les moteurs de recherche ne peuvent pas analyser correctement le contenu de la page. Ce qui, à son tour, rend difficile la promotion de votre ressource.

Pour obtenir un code propre et pertinent, vous devez d'abord effacer le texte des balises HTML créées par un éditeur classique. Il y a plusieurs moyens de le faire:

1. « Exécutez » l'article via le Bloc-notes et insérez-le ensuite seulement sur le site. L'application efface tout le code HTML, vous devrez donc à nouveau formater le texte (à l'aide des outils de l'éditeur ou manuellement).
2. Rédigez et publiez des articles à l'aide de LiveWriter. L'éditeur de blog populaire génère immédiatement code correct. Et dans un onglet séparé, vous pouvez voir à quoi ressemblera le texte sur le site.
3. Utilisez HTML Cleaner. Ce service en ligne ne détruit pas l'intégralité du code, mais uniquement les fragments inutiles. À l'aide de filtres, vous choisissez les balises que vous souhaitez enregistrer. Il existe également un puissant éditeur visuel pour le formatage, qui ajoute des commandes déjà optimisées au code.

Paragraphes

Cet élément est présent dans presque tous les articles. Chaque paragraphe doit être situé à l'intérieur d'un tel conteneur - cela simplifie le formatage et vous permet d'enregistrer style uniforme sur toutes les pages du site. Pour plus de commodité, l'étiquette

Écrivez toujours avec nouvelle ligne.

Alignement

La balise HTML distincte « Alignement du texte » n'a plus été utilisée depuis longtemps. Au lieu de cela, un attribut ALIGN générique a été créé. Pour changer de position bloc de texte sur la page, vous devez sélectionner l'une des 3 valeurs - CENTRE, DROITE ou GAUCHE. Vous pouvez définir l’alignement d’autres éléments, tels que les titres, de la même manière.

Dans certaines situations, d'autres balises sont utilisées pour l'alignement, par exemple, vous pouvez positionner à l'aide de l'élément

.... Pourquoi une balise distincte est-elle utile ? Contrairement à l'attribut, il fonctionne avec n'importe quel contenu, y compris les photos, vidéos, flash, etc.

Titres et sous-titres

Le système de sous-titres vous permet de créer une structure de contenu logique. Lorsque le texte est divisé en blocs significatifs, il est beaucoup plus facile pour le lecteur de se concentrer et d'absorber. nouvelle information. Les moteurs de recherche analysent également les titres pour comprendre pour quelles requêtes promouvoir la page. C’est pourquoi les experts SEO recommandent d’y utiliser des mots-clés d’actualité.

HTML utilise six niveaux de sous-titres - de

avant

. Il existe une hiérarchie claire dans ce système :

• ...

  . Article principal, produit dans une boutique en ligne, etc.). Il ne peut y en avoir qu'un dans le texte

  . En règle générale, il contient le mot-clé principal.

• ...

  . Les sous-titres de deuxième niveau divisent le texte en blocs significatifs. Par exemple, si vous évaluez des ordinateurs portables, vous pouvez effectuer plusieurs

  avec les noms des différents modèles.

• ...

  . Le troisième niveau est nécessaire si le texte est compris entre deux

  est également décomposé en petits blocs. Dans notre exemple, il pourrait s'agir de critères d'évaluation - « Performances », « Mémoire », « Carte vidéo », etc. pour chaque modèle.

• ,

  ,

  . En pratique, ils sont extrêmement rares. Mais le principe général est le même : ils doivent être « imbriqués » dans un bloc avec un sous-titre de niveau supérieur.

Assurez-vous de maintenir la hiérarchie correcte. En revenant à notre exemple, cela signifie que vous ne pouvez pas saisir immédiatement les noms de modèles comme

ou

. Et plus encore, utilisez des sous-titres de différents niveaux pour des blocs de sens homogène (par exemple, mettez en avant un ordinateur portable qui a pris la dernière place du classement en utilisant

).

Voici un diagramme qui vous aidera à comprendre et à mémoriser instantanément la structure correcte des titres en HTML.

Listes

Il est préférable de formater toutes les listes et instructions sous forme de listes, en utilisant des balises HTML spéciales pour le texte ( erreur typique- juste quelques paragraphes

Qui commencent par un trait d'union ou un chiffre).

La structure de ces blocs est très simple. Tout d’abord, nous déterminons le type de liste – à puces ou numérotées.

Tous les éléments se trouvent entre les balises d'ouverture et de fermeture. Chaque élément de la liste commence sur une nouvelle ligne et a le format . Le nombre d'éléments n'est pas limité.

Le choix et ses attributs

Que peut-on changer en utilisant cette police et cette couleur - et sans ajouter de nouvelles classes au CSS. Ceci est très pratique lorsque vous devez mettre en évidence une seule phrase ou un seul fragment.

possède plusieurs attributs :

• Affronter. Vous permet de changer la police du texte. Vous pouvez lister plusieurs options séparées par des virgules (Tahoma, Verdana). Si l'utilisateur n'a pas installé la première police, le système utilise simplement une alternative.
• Taille. Pour agrandir ou réduire le texte, saisissez une valeur comprise entre 1 et 7 entre guillemets.
• Couleur. Selon le design, vous pouvez choisir l'une des teintes standards (rouge, vert, bleu) ou saisir un code pour la couleur de votre choix.

N'utilisez pas de paragraphes formatés avec , au lieu de sous-titres. Il est préférable de définir les mêmes paramètres de conception avec la bonne balise.

Façons de surligner du texte

Un texte monotone est fatiguant, même découpé en paragraphes. Pour attirer l'attention et aiguiser l'intérêt du lecteur, points clés Il est recommandé de mettre en évidence graphiquement. Voici quelques commandes qui vous aideront à faire face à cette tâche.

... . Une balise HTML extrêmement populaire. Le texte en gras attire immédiatement le regard et il est donc pratique de l'utiliser pour mettre en évidence des points et des faits importants.

Beaucoup de gens confondent les balises Et . Il n'y a pas de différence visuelle, mais ils fonctionnent différemment. Le premier change simplement l’apparence du texte, tandis que le second fait office d’« index » et met en évidence les fragments les plus importants (mots-clés du sujet et expressions pour le référencement).

... . L'italique élégant et strict est idéal pour la conception de termes scientifiques, de mots étrangers et d'une variété de citations. Dans les publications sérieuses, les noms des œuvres d'art sont également mis en évidence en italique.

... . Peut-être qu’aucune autre balise HTML n’a suscité autant de controverses. Le texte souligné est rarement utilisé car cette méthode Les surlignages ont toujours été attribués à des hyperliens. Si tu utilises dans les articles, veuillez noter que cela ne convient qu'aux fragments courts - pas plus d'une ligne.

... . Un tag intéressant qui permet de réaliser une pièce, très pertinent en publicité - par exemple, pour souligner le contraste entre l'ancien et le nouveau prix.

... . Le moyen le plus simple d’augmenter la taille de la police sans aucune option supplémentaire.

... . Elle fonctionne sur le même principe que la balise précédente. Le texte situé à l'intérieur est réduit par rapport au texte principal.

^... . Le nom correct pour ce format est exposant. Cette balise est principalement destinée aux diplômes mathématiques et aux notes de bas de page. Il réduit la taille de la police et déplace le texte sélectionné vers le haut.

_... . Les indices se trouvent souvent dans diverses formules. Le fragment sélectionné est situé sous le texte principal.

Des conteneurs significatifs

Étant donné que certains blocs ont été trouvés dans de nombreux textes, des balises spéciales ont commencé à être créées pour eux. Cela simplifie le formatage, car si chaque type de contenu a son propre ensemble de styles, il suffit de mettre en évidence un morceau de texte et d'indiquer les informations qu'il contient.

... . Balise pour ajouter des codes informatiques. Indispensable dans les articles sur la programmation avec exemples - les commandes ne sont pas exécutées, mais affichées sous forme de texte brut.

... . Conçu pour formater des citations - par exemple, des extraits clés d'une interview.

. Place une partie du texte dans un bloc séparé. Par défaut, la sélection comporte davantage de remplissage à gauche, mais vous pouvez également modifier la taille, le style de police et la couleur du texte en CSS.

...

. Une balise supplémentaire qui contient des informations sur l'auteur, y compris des liens.

Ligne de démarcation

---

Une simple ligne peut être utilisée pour marquer la fin logique d’une grande section.

---

ne s'applique pas aux balises appariées. Cela signifie que l'élément de format de fermeturepas besoin.

À l'aide de l'attribut WIDTH, vous pouvez raccourcir le délimiteur en spécifiant taille appropriée en pixels ou en pourcentage de la largeur de la fenêtre.

En apprenant à utiliser correctement les balises pour formater le texte en HTML, vous rendrez non seulement vos articles plus faciles à lire, mais augmenterez également votre efficacité SEO.