CSS : Changer la police. Définissez la couleur du texte. L'attribut color de la balise font

La mise en page d'un site Web de haute qualité a pour objectif principal de rendre les informations contenues dans la page aussi lisibles et pratiques que possible pour l'utilisateur. Et travailler avec du texte en utilisant HTML est la compétence principale et de base que vous devez posséder lorsque vous travaillez avec des sites Web. Cet article explique comment modifier la taille du texte à l'aide du Web Markup Language.

Formater le texte en HTML - c'est très simple

Quiconque a rencontré au moins une fois le besoin de créer ou de modifier des sites Web, la première chose qu'il s'est demandé était de savoir comment formater le texte afin qu'il réponde aux exigences souhaitées. Il existe de nombreuses façons d'accomplir cette tâche, et la plus simple est de le faire directement dans le cadre du site lui-même en utilisant un langage de balisage. Une fois que vous aurez compris comment modifier la taille de la police en HTML, cela ne posera aucune difficulté à l’avenir.

Dans ce document, nous parlerons en détail de la façon dont les polices sont formatées dans les documents HTML.

Principes généraux d'édition de texte sur des pages Web

Tout d’abord, nous devons comprendre quelles possibilités HTML nous offre pour formater le texte. Il existe trois caractéristiques principales d'une police : il s'agit de la police de caractères (la caractéristique qui détermine apparence lettres et signes), couleur et taille. La lisibilité de tout document dépend de la manière dont ces caractéristiques sont combinées.

Les caractéristiques du texte dans le balisage HTML sont modifiées à l'aide de balises et d'attributs. Une balise est le composant principal du langage, sa principale unité logique, et l'attribut est utilisé pour définir une valeur spécifique pour chaque élément de page marqué avec la balise.

Il convient également de rappeler que l'affichage du texte peut varier lors de l'utilisation de différents navigateurs. Par conséquent, avant de terminer le travail sur le site, vous devez vous assurer que les informations s'affichent correctement dans tous les principaux navigateurs utilisés. Par exemple, la taille de la police en HTML lors de l'utilisation de l'ancien Versions Internet L'Explorateur peut différer des versions plus récentes.

Étiqueter

Les principales balises utilisées lors du formatage du texte sur une page Web sont Et .

Balise jumelée est responsable de toutes les caractéristiques du texte formaté, qui sont spécifiées à l'aide des attributs correspondants. Cette balise est la plus compréhensible et la plus pratique à utiliser lors de la mise en page des pages.

Puisque nous sommes principalement intéressés par la façon de modifier la taille de la police en HTML, nous devrons utiliser l'attribut size.

Cela ressemble à ceci :

Le texte va ici

Valeur de taille police HTML spécifié en unités numériques de 1 (le plus petit) à 7 (le plus grand). La valeur moyenne est traditionnellement considérée comme étant de 3 (correspondant à la taille 13,5 de la police Times New Roman).

Par conséquent, si vous ajoutez le code suivant au corps du document, lorsque vous ouvrirez la page dans le navigateur, vous verrez comment la taille du texte change en fonction de la valeur définie.

Taille de police 1

Taille de police 2

Taille de police 3

Taille de police 4

Taille de police 5

Taille de police 6

Taille de police 7

En plus des valeurs numériques absolues, des valeurs relatives peuvent également être utilisées. Cette balise est également utilisée à cet effet. La taille de la police HTML, comme mentionné ci-dessus, est définie par défaut sur 3, donc sur cette base, vous pouvez ajouter ou soustraire des valeurs numériques entières pour obtenir le résultat souhaité. Voici à quoi cela ressemble :

Le texte va ici

Avec cette valeur, la taille de la police sera de 6. Vous pouvez tester son fonctionnement dans votre navigateur et expérimenter différentes combinaisons de valeurs numériques.

Utiliser une balise Vous pouvez modifier la taille et la couleur de la police en HTML. Pour changer la couleur, utilisez l'attribut color et le code couleur hexadécimal.

Déposer Les changements nécessaires les attributs se suivent dans l'ordre dans le corps d'une balise , il n'est pas nécessaire de les séparer par des signes de ponctuation.

Étiqueter

Cette balise a un plus large éventail de capacités et de caractéristiques que . Il est généralement utilisé en conjonction avec CSS pour modifier et styliser certaines parties du document.

Pour cette balise, les valeurs sont définies à l'aide de l'attribut style. Voici à quoi cela ressemble dans le code :

Le texte va ici

Comme vous pouvez le voir, le code CSS (font-size) est utilisé ici et la taille est définie à l'aide de points (pt, point). La valeur standard est de 12 points, qui peut être modifiée en augmentant ou en diminuant d'un nombre entier.

Modification de la taille de la police lors du formatage des titres

Vous devez souvent réduire ou augmenter la taille de la police en HTML lors de la modification des titres. Dans ce cas, la tâche n'est pas seulement de modifier la taille, mais aussi de sélectionner logiquement une certaine part texte et attribuez-le comme majuscule pour bloc de texte.

Dans ce cas, il est conseillé d'utiliser des balises

—

. Étiqueter

- C'est le titre du premier niveau. Il sera affiché en grand dans le navigateur et les balises de

avant

utilisé pour mettre en évidence les sous-titres.

En-tête de premier niveau

Les paramètres spécifiques de cette balise sont définis à l'aide de CSS - de cette façon, vous pouvez définir une taille, une couleur et une police de texte spécifiques.

Nous avons donc examiné les principaux moyens de modifier la taille de la police en HTML. Ces informations sont suffisantes pour créer une page Web claire et facile à lire.

Pour plus de commodité, prenez note des recommandations suivantes :

  • Lors de la conception, vous ne devez pas vous limiter au HTML. Une fois que vous maîtrisez les bases de la création d’un site Web, vous pouvez commencer à apprendre le CSS. Cela ouvrira de nouveaux horizons dans la création de pages Web.
  • Il ne faut pas négliger le test du site Web finalisé dans différents navigateurs et sur différentes plateformes. Comme mentionné ci-dessus, les paramètres de texte peuvent différer considérablement, en particulier lors de l'utilisation de versions obsolètes de navigateurs.
  • Vous devez toujours utiliser des espaces et des tabulations lorsque vous écrivez du code. Cela facilite la lecture et la compréhension.
  • Les commentaires de code ne sont pas seulement un outil de compréhension, mais aussi un signe de bonnes manières entre développeurs.

Comment changer la taille de la police en HTML sur un site Web.

Notre vie est composée de petites choses du quotidien qui, d'une manière ou d'une autre, affectent notre bien-être, notre humeur et notre productivité. Je n'ai pas assez dormi - j'ai mal à la tête ; J'ai bu du café pour améliorer la situation et me remonter le moral - mais je suis devenu irritable. Je veux vraiment tout prévoir, mais je ne peux tout simplement pas. De plus, tout le monde autour, comme d'habitude, donne des conseils : gluten dans le pain - ne vous en approchez pas, cela vous tuerait ; Une barre de chocolat dans votre poche est un chemin direct vers la perte des dents. Nous collectons les questions les plus courantes sur la santé, la nutrition, les maladies et y apportons des réponses qui vous permettront de mieux comprendre ce qui est bon pour votre santé.

De l'auteur : Bienvenue sur les pages du blog Webformyself. Dans cet article, je voudrais répondre à la question de savoir comment définir une police en HTML. Certaines personnes s’y prennent encore mal, il est donc important d’examiner la question de manière plus approfondie.

Comment la police était définie auparavant

Auparavant, HTML utilisait une balise de police appariée spéciale, qui servait de conteneur pour modifier les paramètres de police, tels que la police de caractères, la couleur et la taille. Aujourd’hui, cette approche est fondamentalement fausse. Pourquoi? Les standards du Web précisent que l'apparence d'une page ne doit pas être spécifiée dans le balisage HTML. De plus, la balise n'est entièrement prise en charge que dans une très ancienne version de HTML - HTML 3.

Définir correctement la police en HTML

Aujourd'hui, il vaut la peine d'utiliser exclusivement les capacités CSS. Ce langage a été créé précisément pour déterminer l'apparence à travers lui. De plus, CSS possède de nombreuses autres propriétés qui affectent l’apparence du texte. Examinons un peu chacun d'eux :

Le style de police. Définit le style du texte. Prend les valeurs suivantes :

Variante de police. La propriété spécifie comment l'orthographe des lettres minuscules doit être interprétée. N'a que deux significations :

Normal – comportement normal.

Petites majuscules : toutes les lettres minuscules sont converties en lettres majuscules et leur taille est légèrement réduite par rapport à la police normale.

Poids de la police. Détermine la gras du texte. La valeur peut être spécifiée par des mots-clés ou une valeur numérique. Examinons toutes les options :

Normal – texte normal

Gras – texte en gras

Plus gras – apparaîtra plus gras que l’élément parent.

Plus légères – les lettres auront moins d’audace que leur parent.

C'est si simple. De plus, il est possible de définir la valeur sous forme de nombres de 100 à 900, 900 étant le plus gras. Par exemple, la valeur normale correspond à 400 et la valeur en gras correspond à 700.

Malheureusement, la plupart des navigateurs ne reconnaissent pas ces valeurs numériques et ne peuvent utiliser que deux valeurs : normale et grasse. Pour l'expérience, j'ai créé 9 paragraphes et donné à chacun un poids de texte différent - de 100 à 900. Ensuite, j'ai ouvert cette page Web dans différents navigateurs et aucun d'entre eux n'affichait des styles différents. Conclusion : il vaut mieux ne pas utiliser de valeurs numériques.

Taille de police. Cette propriété spécifie la taille des lettres. La taille peut être spécifiée en diverses valeurs relatives et absolues. Le plus souvent, la taille est spécifiée en pixels, en unités em relatives et en pourcentages. Si vous souhaitez en savoir plus sur la définition de la taille en CSS, lisez celui-ci, où tout est décrit plus en détail.

Famille de polices. Peut-être la propriété la plus fondamentale qui détermine la famille ou le nom spécifique de la police utilisée. Si vous utilisez un nom spécifique, vous devez vous assurer que la police spécifiée peut être trouvée sur les ordinateurs de tous les utilisateurs. Pour plus de fiabilité, vous devez spécifier une option alternative ou une famille entière séparée par des virgules. Les polices sont réparties dans les familles suivantes :

Chaque famille répond à des besoins différents. Par exemple, la fantaisie est souvent utilisée pour concevoir divers en-têtes, et le monospace est utilisé pour générer du code machine, etc. Vous pouvez connaître plus précisément les noms des polices, par exemple dans un éditeur de texte ou dans Photoshop.

Notation abrégée

Tout ce dont nous avons discuté ci-dessus peut être très facilement écrit sur une seule ligne en utilisant la merveilleuse propriété font, qui rassemble tous les paramètres. Vous devez l'écrire dans l'ordre suivant :

Police : style de police | variante de police | poids de la police | taille de police | famille de polices;

Police : style de police | police - variante | police - poids | taille de police | famille de polices ;

Si vous n'avez pas besoin de spécifier un paramètre, celui-ci est simplement omis. Seules la taille et la famille de police sont requises ici ; tout le reste est facultatif s’il n’est pas nécessaire. L'utilisation de la notation abrégée vous permet de réduire considérablement le code en CSS. Utilisez-le car c'est une bonne optimisation pour le site.

Comment définir la police en HTML sur différents éléments

Donc, pour une raison quelconque, nous nous sommes laissés emporter par la description de toutes les propriétés de la police. Il s’agit d’une information très importante, mais comment la poser correctement ? Utilisez les bons sélecteurs pour atteindre les bons éléments. Ci-dessous, je propose quelques exemples :

p a( famille de polices : Verdana, sans-serif; )

Pour les données tabulaires, de nombreux paramètres de police sont définis : lettres majuscules réduites, style gras, taille de police et nom.

Vous permet de surligner du texte en italique, italique ou vice versa, de donner au texte une apparence standard. 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
Nom du document

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 :

Nom du document

Redimensionnez en utilisant des pourcentages.

Redimensionnez en utilisant les pixels.

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



27/11/14 88,7K

En HTML, la taille de la police joue un rôle important. Il permet d'attirer l'attention de l'utilisateur sur des informations importantes publiées sur la page du site. Bien que non seulement la taille des lettres soit importante, mais aussi leur couleur, leur épaisseur et même leur famille.

Balises et attributs lorsque vous travaillez avec des polices HTML

Le langage hypertexte dispose d'une large gamme d'outils pour travailler avec les polices. Après tout, le formatage du texte est la tâche principale du HTML.

Raison de la création Langage HTML Un problème est survenu avec les navigateurs affichant les règles de formatage du texte.


Examinons les balises utilisées pour travailler avec les polices HTML et leurs attributs. Le principal est le tag . A l'aide des valeurs de ses attributs, vous pouvez définir plusieurs caractéristiques de la police :
  • color – définit la couleur du texte ;
  • size – taille de la police en unités conventionnelles.

Les valeurs d'attribut positives de 1 à 7 sont prises en charge.

  • face – utilisé pour définir la famille de polices de texte qui sera utilisée à l'intérieur de la balise . Plusieurs valeurs sont supportées, séparées par des virgules.

Seul le texte situé entre les parties de la balise de police appariée est formaté. Le reste du texte s'affiche police standard, installé par défaut.


En HTML également, il existe un certain nombre de balises appariées qui spécifient une seule règle de formatage. Ceux-ci inclus:
  • — définit la police grasse en HTML. Étiqueter similaire en action au précédent;
  • — la taille est plus grande que la taille par défaut ;
  • — taille plus petite Police de caractère;
  • — texte en italique (italique). Étiquette similaire ;
  • — texte souligné;
  • - barrée;
  • — afficher le texte uniquement en minuscules ;
  • - en majuscule.

Texte brut

Vignette

Vignette

Plus que d'habitude

Moins que d'habitude

Italique

Italique

Avec trait de soulignement

Barrée

Capacités des attributs de style

En plus des balises décrites, il existe plusieurs autres façons de modifier la police en HTML. L’une d’elles consiste à utiliser l’attribut style générique. A l'aide des valeurs de ses propriétés, vous pouvez définir le style d'affichage des polices :

1) font-family – la propriété définit la famille de polices. Il est possible de lister plusieurs valeurs.
Le changement de la police en HTML vers la valeur suivante se produira si la famille précédente n'est pas définie sur système opérateur utilisateur.

Syntaxe d'écriture :

famille de polices : nom de police [, nom de police [, ...]]

2) taille de la police – la taille est définie entre 1 et 7. C'est l'un des principaux moyens d'augmenter la police en HTML.
Syntaxe d'écriture :

taille de police : taille absolue | taille relative | sens | intérêt | hériter

Vous pouvez également définir la taille de la police :

  • En pixels ;
  • En termes absolus ( xx-petit, x-petit, petit, moyen, grand);
  • En pourcentages ;
  • En points (pt).

Taille de police : 7

Taille de la police : 24 px

Taille de la police : x-large

Taille de la police : 200 %

Taille de la police : 24 pts


3) font-style – définit le style d’écriture de la police. Syntaxe:

style de police : normal | italique | oblique | hériter

Valeurs:

  • normal – orthographe normale ;
  • italique – italique ;
  • oblique – police inclinée vers la droite ;
  • hériter – hérite de l’orthographe de l’élément parent.

Un exemple de comment changer la police en HTML en utilisant cette propriété :

style de police: hériter

style de police : italique

style de police : normal

style de police : oblique


4) font-variant – traduit tout lettres majuscules en majuscules. Syntaxe:

variante de police : normal | petites capitalisations | hériter

Un exemple de comment changer la police en html avec cette propriété :

variante de police : hériter

variante de police : normale

variante de police : petites majuscules


5) font-weight – vous permet de définir l’épaisseur du texte (saturation). Syntaxe:

poids de la police : gras|plus gras|plus clair|normal|100|200|300|400|500|600|700|800|900

Valeurs:

  • gras – définit la police HTML en gras ;
  • plus audacieux – plus audacieux par rapport à la normale ;
  • plus léger – moins saturé par rapport à la normale ;
  • normal – orthographe normale ;
  • 100-900 – définit l'épaisseur de la police en équivalent numérique.

poids de la police : gras

poids de la police : plus gras

poids de la police : plus léger

poids de la police : normal

poids de la police : 900

poids de la police : 100

Propriété de police HTML et couleur de police

La police est une autre propriété du conteneur. En lui-même, il combinait les valeurs de plusieurs propriétés destinées au changement de polices. syntaxe de police :

police : taille de police famille de polices | hériter

En outre, la valeur peut être définie sur les polices utilisées par le système dans les inscriptions sur divers éléments contrôles:

  • légende – pour les boutons ;
  • icône – pour les icônes ;
  • menu - menu ;
  • message-box – pour les boîtes de dialogue ;
  • small-caption – pour les petits contrôles ;
  • barre d'état – police de la barre d'état.

police:icône

police: légende

police:menu

police: boîte de message

petite légende

police: barre d'état

police:italique 50px gras "Times New Roman", Times, serif

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 sur applications bureautiques. Ici, il ne suffit pas de donner au texte une apparence attrayante, car conception correcte Non seulement l'affichage d'une page Web en dépend, mais aussi sa promotion dans les moteurs de recherche.

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 certains blocs à une page ou modifient leur 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 modifier la position d'un 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, et le second sert d'« index » et met en évidence les fragments les plus importants (thématiques mots clés 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.

ARTICLES LIÉS