Comment ajouter un titre web cohérent avec son image

Comment ajouter un titre web cohérent avec son image

ce qu’il faut savoir

• En HTML, placez une balise div autour de l’image et ajoutez un attribut de style div.
• Définissez la largeur div sur la largeur de l’image, ajoutez la propriété text-align, ajoutez un espace entre l’image et le titre, puis ajoutez le titre du texte.

Cet article vous montre comment ajouter un titre à votre image Web et vous assurer que le titre reste avec votre image, peu importe où vous le déplacez sur votre page Web.

Étapes pour les légendes d’image HTML

Les légendes sont importantes car elles ajoutent des informations supplémentaires à vos éléments visuels Web.

1. Ajoutez des images à vos pages Web.

2. Dans le HTML de votre page, placez une balise div autour de l’image :

   <

3. Ajoutez l’attribut style à la balise div :

   

4. Définissez la largeur de la div sur la même largeur que l’image, à l’aide de l’attribut width style :

   

5. Pour les titres légèrement plus petits que le texte environnant, ajoutez une propriété font-size au style div :

   

6. Les sous-titres sont plus beaux s’ils sont centrés sous l’image, ajoutez donc l’attribut text-align à l’attribut style :

   

7. Enfin, ajoutez un peu d’espace supplémentaire entre l’image et le titre en ajoutant un attribut de style à l’image à l’aide de l’attribut de style padding-bottom :

   

8. Ajoutez ensuite une légende de texte juste en dessous de l’image :

   c’est mon titre

Téléchargez la page Web sur votre serveur et testez-la dans votre navigateur.

Conseils de sous-titre

Les dimensions CSS peuvent avoir de nombreuses métriques différentes, vous devez donc généralement inclure le type de métrique. Par exemple:

Cependant, les dimensions des images HTML sont toujours en pixels, vous n’avez donc pas besoin de mesurer.

Si la largeur de la div est définie plus large que la largeur de l’image, le titre peut apparaître à côté de l’image.Si c’est ce que vous voulez, ajoutez un
Balisez directement avant le titre et après la balise d’image.

Merci de nous en informer!

Recevez les dernières nouvelles technologiques publiées quotidiennement

abonnement

Dites-nous pourquoi !

D’autres détails ne sont pas assez difficiles à comprendre