Télécharger l'article
Télécharger l'article
En HTML, il est très facile de mettre du texte en gras, et il y a plusieurs balises à connaitre si vous cherchez des options supplémentaires. Encore mieux, vous pouvez prendre quelques minutes pour apprendre quelques notions de base de CSS et l'ajouter directement à votre document HTML. Cette méthode est plus rapide que d'ajouter une feuille de style CSS complète, et cela vous donnera plus de contrôle sur l’épaisseur exacte du texte affiché en gras.
Étapes
-
<strong>Utilisez la balise strong</strong>. En HTML5, la norme privilégiée, la balise « strong » est la balise recommandée pour du texte important. Elle presque toujours affichée en gras dans les navigateurs.
- Placez le texte que vous voulez mettre en gras entre ces balises: <strong> texte en gras ici </strong>.
-
Utilisez des balises de titre à la place lorsque c’est approprié. Les « Titres » sont généralement placés en haut de la page web ou au début d'une nouvelle section. Habituellement, les titres sont affichés en gras et sont plus grands que la police ordinaire, mais cela peut varier. Il y a six balises de titre différentes, depuis <h1> à <h6>. Suivez ces directives lorsque vous les utiliserez:
- La balise h1, écrite <h1> Votre titre ici </h1> est le titre le plus important, en général c’est le texte le plus grand en haut de la page.
- <h2> La balise h2 </h2> est pour le second titre le plus important, et ainsi de suite jusqu'à <h6> h6, le plus petit </h6>.
- Utilisez-les avec parcimonie, seulement pour organiser votre page [1] X Source de recherche . Les utilisateurs devraient être en mesure de parcourir rapidement les titres et de trouver le sujet qu'ils cherchent.
- À l’heure de créer des sous-titres, descendez seulement d’un niveau à la fois. Autrement dit, ne sautez pas de <h1> à <h3>. Cela aide la page HTML à préserver son formatage lorsqu'elle est transférée à un autre format [2] X Source de recherche .
-
<b>Utilisez la balise « b » en dernier recours</b>. La balise <b> est toujours prise en charge en HTML5, mais <strong> est préféré dans la plupart des situations. Utilisez la balise <b> uniquement lorsque le texte devrait être en caractères gras pour des raisons de style, pas pour le mettre en valeur. Par exemple, des mots-clés ou des mots de vocabulaire dans un passage, ou les noms de produit dans une revue [3] X Source de recherche .
- Comme avec la plupart des balises, <b> place le texte concerné entre une balise de début et une balise de fin </b>.
Publicité
-
Sachez quand utiliser du CSS. Le CSS est une façon plus puissante et plus cohérente de mettre en forme votre page web. Cela en fait le moyen idéal pour définir l’aspect de votre page, tandis que le HTML est conçu pour définir le sens de votre page. C’est tout à fait normal d’utiliser des balises HTML lorsque vous voulez mettre en valeur du texte important, mais le CSS vous donnera plus de contrôle sur l'aspect visuel de votre texte en gras.
- Essayez d'ouvrir une simple page HTML avec différents navigateurs, et vous verrez peut-être des différences dans l'affichage. Le CSS indique au navigateur la façon exacte d’afficher le texte concerné par une balise donnée, afin de minimiser la quantité de variation.
-
Ajoutez une balise <span> à votre texte. Si vous ne connaissez pas encore le CSS, utiliser du « CSS en ligne » est une bonne façon de débuter. Alors que vous pouvez l'utiliser pour modifier des balises telles que <p> ou <h1>, parfois vous voudrez modifier du texte qui ne se trouve pas déjà entre des balises [4] X Source de recherche . Dans ce cas, placez le texte entre des balises <span></span>. Elles n’auront aucun effet par elles-mêmes, mais cela nous donnera quelque chose avec quoi travailler. Voici l'exemple que nous allons utiliser:
- <span>J'ai appris comment mettre ce texte en gras avec du CSS en ligne.</span>
-
Ajoutez l'attribut « style ». Les attributs en HTML sont écrits directement dans la balise, à l'intérieur des crochets < >. L'attribut « style » est nécessaire pour insérer du CSS dans la balise HTML, donc nous allons insérer style= dans la balise « span »:
- <span style=> J'ai appris comment mettre ce texte en gras avec du CSS en ligne.</span>
- Il n'y a pas de raison d'ajouter l'attribut « style » sans préciser le style. Nous allons juste étape par étape pour que cela soit plus facile à suivre.
-
Ajoutez la propriété « font-weight ». Les propriétés CSS sont ajoutées dans le cadre de l'attribut « style ». Dans notre cas, nous allons utiliser la propriété « font-weight », qui détermine l’épaisseur de la police. Cette propriété unique peut être utilisée pour afficher du texte en gras (extraépais), du texte mince ou même pour indiquer que le texte devrait être affiché avec une épaisseur normale. Ajoutez "font-weight:" après le signe « = », comme ceci.
- <span style="font-weight: "> J'ai appris comment mettre ce texte en gras avec du CSS en ligne.</span>
- Encore une fois, ce n'est pas fini et cela n’aura aucun effet.
- N'oubliez pas les guillemets avant et après font-weight: .
-
Ajoutez la valeur « bold ». La seule chose que nous devons faire maintenant est ajouter une valeur pour « font-weight », entre font-weight: et le guillemet final. Il y a de nombreuses options différentes pour les différentes tailles d’ « épaisseur », mais la valeur bold est la plus facile à utiliser [5] X Source de recherche .
- <span style="font-weight:bold"> J'ai appris comment mettre ce texte en gras avec du CSS en ligne. </span>
-
Faites l’expérience avec d'autres valeurs. Le CSS vous donne beaucoup plus d'options que le HTML, vous ne vous sentirez donc pas limité. Voici plusieurs solutions de rechange pour la valeur « bold [6] X Source de recherche ».
- <span style="font-weight:bolder"> Le texte « bolder » sera toujours plus épais que l’élément parent. </span> Par exemple, si vous mettez tout un paragraphe en « bold », puis que vous utilisez « bolder » sur une seule phrase à l'intérieur de ce paragraphe, elle sera encore plus épaisse.
- <span style="font-weight:normal"> Le texte « normal » sera affiché normalement même si le « span » est à l’intérieur d’une balise « bold ». </span>
- <span style="font-weight:900"> Vous pouvez utiliser à la place un nombre entre 100 et 900 pour définir l'épaisseur. 400 est un texte normal, tandis que du texte en gras utilise une épaisseur de 700 par défaut. </span> [7] X Source de recherche
Publicité
Conseils
- À l’heure d’utiliser la propriété « font-weight » en CSS, utilisez uniquement des valeurs numériques qui sont des multiples de 100. Les valeurs qui se situent entre les deux seront arrondies [8] X Source de recherche .
- Une feuille de style CSS embarquée ou externe est encore un meilleur moyen pour mettre du texte en gras, puisqu'elle vous permet de modifier et de changer facilement l'intégralité d'un document en une seule fois.
- Chaque police a seulement certaines « font-weights » disponibles. Avec du CSS, la « font-weight » disponible la plus proche à la quantité spécifiée sera utilisée. Cela signifie que vous ne verrez pas toujours de différence entre deux polices plus épaisses que la normale.
Publicité
Références
- ↑ http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
- ↑ http://www.hobo-web.co.uk/headers/
- ↑ http://www.quackit.com/html/codes/bold/
- ↑ http://reference.sitepoint.com/html/core-attributes/style
- ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
- ↑ http://www.quackit.com/css/properties/css_font-weight.cfm
- ↑ http://www.w3schools.com/cssref/pr_font_weight.asp
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
À propos de ce wikiHow
Cette page a été consultée 101 405 fois.
Publicité