Comment utiliser des images pour vos titres de page Web HTML5 et CSS3 - mannequins

En règle générale, vous devez utiliser des polices standard pour le contenu principal des pages Web HTML5 et CSS3. avoir un nombre limité de polices n'est pas un gros problème. Parfois, cependant, vous voulez utiliser des polices dans vos titres. Vous pouvez utiliser un éditeur graphique, comme GIMP, pour créer des images textuelles, puis les incorporer dans vos pages.

Voici le processus d'utilisation d'une police spéciale:

1. Planifiez votre page.

   Lorsque vous utilisez des graphiques, vous perdez un peu de flexibilité. Vous devez savoir exactement ce que les titres devraient être. Vous devez également savoir quel titre affichera à quel niveau. Plutôt que de compter sur le navigateur pour afficher vos titres, vous créez des graphiques dans votre outil graphique et vous les placez directement dans la page.

2. Créez vos images.

   Vous pouvez utiliser la magnifique fonctionnalité Logos dans GIMP (choisissez Xtns ➩ Script-fu ➩ logos) pour créer votre texte.

3. Spécifiez les tailles de police directement.

   Dans l'image, il est judicieux de spécifier les tailles de police en pixels, car ici vous parlez vraiment d'un nombre spécifique de pixels. Vous créez du "texte virtuel" dans votre éditeur graphique, alors faites le texte quelle que soit la taille que vous voulez qu'il soit dans la page finie.

4. Utilisez n'importe quelle police.

   Vous n'avez pas à vous soucier de savoir si l'utilisateur a la police car vous n'envoyez pas la police, juste une image composée avec la police.

5. Créez une image distincte pour chaque titre.

   Cet exercice comporte deux images - un niveau 1 et un niveau 2. Comme vous créez directement des images, vous devez garder une trace de la façon dont l'image communique son niveau de titre.

6. Considérez le niveau du titre.

   Veillez à ce que les valeurs de niveau 2 soient un peu plus petites ou moins accentuées que le niveau 1. Autrement dit, si vous avez des images qui seront utilisées dans un en-tête, elles doivent utiliser une police plus grande que les images utilisé dans un niveau de titre moins souligné. Habituellement, cela est fait en ajustant la taille de la police dans vos images.

7. Construisez la page comme vous le feriez normalement.

   Après avoir créé ces images spéciales, créez une page Web régulière. Placez les balises

   et

   exactement aux mêmes endroits que vous le faites habituellement.

8. Mettez les balises

   dans les en-têtes.

   Plutôt qu'un texte ordinaire, placez les tags d'image dans les balises

   et

   . Voir le code à venir imageTitles. html si vous êtes un peu confus.

9. Placez le texte du titre dans l'attribut alt.

   L'attribut alt est particulièrement important ici parce que si l'utilisateur a des graphiques désactivés, le texte apparaît toujours comme un titre de style approprié.Les personnes avec des connexions lentes voient le texte avant le chargement des images, et les personnes utilisant des lecteurs de texte peuvent toujours lire le texte alt de l'image.

Voici le code utilisé pour générer les en-têtes basés sur l'image:

imageTitles. html



Cette page décrit des vaches célèbres dans l'histoire



La plupart des gens ne savent pas que le bétail a pris part à la bataille. Ils n'ont pas bien sûr. Je viens de faire ça.

Cette technique est un bon compromis entre les graphiques personnalisés et le HTML ordinaire comme suit:

• Vous avez un grand contrôle de vos images. Si vous maîtrisez votre outil graphique, vous pouvez faire de n'importe quel type d'image un titre. Il n'y a littéralement aucune limite excepté vos qualifications et créativité.

• La page conserve sa structure. Vous avez toujours des balises de titre en place, il est donc facile de voir que vous voulez dire qu'une image particulière fait office de titre. Vous pouvez toujours voir l'organisation de la page dans le code HTML.

• Vous avez un texte de remplacement. Les attributs alt seront activés si les images ne peuvent pas être affichées.

• La signification sémantique des titres d'image est préservée. Les balises alt fournissent une autre fonctionnalité intéressante. S'ils reproduisent le texte de l'image, ce texte est toujours disponible pour les lecteurs d'écran et les moteurs de recherche, de sorte que le texte n'est pas enterré dans l'image.

Cette technique est idéale pour les titres ou autres zones, mais remarquez que le texte du titre a été répété dans l'étiquette. Ceci est important car vous ne voulez pas perdre le texte. Les outils de moteur de recherche et les lecteurs d'écran ont besoin du texte.

Ne soyez pas tenté d'utiliser cette technique pour de plus grandes quantités de texte. Cela entraîne des problèmes:

• Le texte n'est plus consultable. Les moteurs de recherche ne peuvent pas trouver de texte s'il est enfoui dans des images.

• Le texte est plus difficile à changer. Vous ne pouvez pas mettre à jour votre page avec un éditeur de texte. Au lieu de cela, vous devez télécharger l'image, la modifier et la télécharger à nouveau.

• Les images nécessitent beaucoup plus de bande passante que le texte. N'utilisez pas d'images si elles ne sont pas ajoutées à votre page. Vous pouvez faire le cas pour quelques images de titre, mais il est plus difficile de justifier que votre page entière soit stockée en tant qu'image juste pour utiliser une police particulière.