Dès que vous commencez à créer des pages Web avec HTML, vous commencez à travailler avec le dimensionnement. Pour que votre site ressemble à celui que vous souhaitez, et qu'il correspond probablement à un design créé par vous ou un autre designer, vous souhaiterez modifier la taille du texte sur ce site ainsi que d'autres éléments de la page. Pour ce faire, vous pouvez commencer à chercher une balise HTML "size", mais vous la trouverez rapidement manquante.
La balise de taille HTML n'existe pas en HTML. Pour définir la taille de vos polices, de vos images ou de votre mise en page, vous devez utiliser des feuilles de style en cascade. En fait, tout changement visuel que vous devez apporter au texte d'un site ou à un autre élément doit être géré par CSS! HTML est pour la structure seulement.
La balise la plus proche d'une balise de taille HTML est l'ancienne balise de police, qui comportait bien un attribut de taille. Soyez averti que cette balise est obsolète dans les versions actuelles de HTML et pourrait ne plus être prise en charge par les navigateurs! Vous ne voulez pas utiliser la balise font dans votre code HTML! Au lieu de cela, vous devriez apprendre le CSS pour redimensionner vos éléments HTML et styler votre page Web en conséquence.
Tailles de police
Les polices sont sans doute la chose la plus facile à dimensionner avec CSS. Plutôt que de simplement redimensionner ce texte, CSS vous permet d’être plus précis sur la typographie de votre site Web. Vous pouvez définir la taille de la police, la couleur, la casse, le poids, l'interligne, etc. Avec la balise de police, vous pouvez uniquement définir la taille, puis uniquement sous forme de nombre relatif à la taille de police par défaut du navigateur, qui diffère pour chaque client.
Pour que votre paragraphe ait une taille de police de 12 pt, utilisez la propriété de style font-size:
h3 {font-size = 24px; }
Ce style définirait la taille de la police des éléments headiing3 de 24 pixels. Vous pouvez l'ajouter à une feuille de style externe et tous les H3 de votre site utiliseraient ce style.
Si vous souhaitez ajouter des styles typographiques supplémentaires à votre texte, vous pouvez les ajouter à cette règle CSS:
h3 {taille de la police: 24px; couleur: # 000; poids de la police: normal; }
Cela définirait non seulement cette taille de police pour les caractères H3, mais aussi la couleur noire (ce que signifie le code hexadécimal de # 000) et le poids à "normal". Par défaut, les navigateurs affichent les en-têtes 1 à 6 en caractères gras. Ce style remplace donc le texte par défaut et réduit le texte en caractères gras.
Tailles d'image
Les images peuvent être délicates pour définir les tailles car vous pouvez réellement utiliser le navigateur pour redimensionner l'image. Bien sûr, redimensionner les images avec le navigateur est une mauvaise idée car cela ralentit le chargement des pages et les navigateurs effectuent souvent un redimensionnement médiocre, ce qui donne un mauvais rendu des images. Au lieu de cela, vous devez utiliser un logiciel graphique pour redimensionner les images, puis écrire leur taille réelle dans votre page Web HTML.
Contrairement aux polices, les images peuvent utiliser HTML ou CSS pour définir la taille. Vous définissez la largeur de l'image et la hauteur. Lorsque vous utilisez HTML, vous ne pouvez définir la taille de l'image qu'en pixels. Si vous utilisez CSS, vous pouvez utiliser d'autres mesures, notamment les pouces, les centimètres et les pourcentages. Cette dernière valeur, les pourcentages, est très utile lorsque vos images doivent être fluides, comme dans un site Web réactif.
Pour définir la taille de votre image à l'aide de HTML, utilisez les attributs height et width de la balise img. Par exemple, cette image aurait un carré de 400x400 pixels:
height = "400" width = "400" alt = "image" />
Pour définir la taille de votre image à l'aide de CSS, utilisez les propriétés de style height et width. Voici la même image, en utilisant CSS pour définir la taille:
style = "hauteur: 400px; largeur: 400px;" alt = "image" />
Tailles de mise en page
La taille la plus courante que vous définissez dans une présentation est la largeur, et la première chose dont vous aurez besoin pour décider consiste à utiliser une disposition à largeur fixe ou un site Web réactif. En d'autres termes, allez-vous définir la largeur comme un nombre exact de pixels, pouces ou points? Ou allez-vous définir la largeur de votre mise en page de manière flexible en utilisant ems ou pourcentages? Pour définir la taille de votre mise en page, vous utilisez les propriétés CSS de largeur et de hauteur, comme vous le feriez dans une image.
Largeur fixe:
style = "width: 600px;">
Largeur du liquide:
style = "width: 80%;">
Lorsque vous décidez de la largeur de votre mise en page, gardez à l'esprit les différentes largeurs de navigateur que vos lecteurs pourraient utiliser et les différents périphériques qu'ils vont également utiliser. C'est la raison pour laquelle les sites Web réactifs, qui peuvent modifier leur disposition et leur dimensionnement en fonction de différents appareils et tailles d'écran, constituent la meilleure pratique actuelle.
