Un site Web se compose de trois parties principales qui sont en tête, corps et pied de page. Ces parties sont créées par la combinaison de nombreux autres éléments tels que le cap, le paragraphe, les images, et plus. Plus précisément, l'en-tête est la partie la plus importante de toute page Web car elle contient toutes les informations liées à la page Web, y compris le titre, la description et le logo.

Dans ce manuel, nous discuterons du «" étiqueter. Alors, commençons!

Tag d'en-tête HTML

HTML fournit le «”Tag, qui est utilisé pour définir le titre et le cap du contenu connexe sur une page Web. Vous pouvez également ajouter un titre, un paragraphe, un logo, une image et des liens dans l'en-tête.

Syntaxe

La syntaxe de l'étiquette d'en-tête est:

Éléments HTML

Les éléments que vous souhaitez inclure dans l'en-tête doivent être ajoutés entre les étiquettes d'en-tête d'ouverture et de fermeture.

Passons à l'exemple où nous apprendrons à créer un en-tête.

Exemple: comment créer un en-tête?

Dans le fichier HTML, nous utiliserons d'abord le «”Tag pour créer un en-tête. Après cela, ajoutez un titre "

»Et quatre liens en utilisant le«”Tag à l'intérieur du«" étiqueter. Dans le "href", ajouter "#»Et définissez le lien de la page que vous souhaitez ajouter. Ensuite, attribuez les noms des liens comme «Maison","À propos","Contactez-nous", et "politique de confidentialité". Ces noms de liens apparaîtront sur l'en-tête de la page Web.

Html

Linuxhint

Maison
À propos
Contactez-nous
politique de confidentialité

Dans l'image ci-dessous, vous pouvez voir que l'en-tête est créé:

Vous pouvez également styliser l'en-tête en utilisant CSS. Voici la méthode pour le faire.

Dans le CSS, nous utiliserons «entête«Pour accéder à l'en-tête créé en HTML. Ici, utilisez le «alignement de texte«Valeur de la propriété comme«centre«Pour aligner l'en-tête et les liens au centre de la page. Nous allons également définir la couleur d'arrière-plan de l'en-tête comme «RVB (80, 80, 79)»Et définissez la couleur de la rubrique comme«RVB (206, 158, 34)". Nous allons ajuster la taille de la police à «30px". Après cela, définissez le rembourrage comme «30px".

CSS

entête
Texte-aligne: Centre;
Contexte: RVB (80, 80, 79);
Couleur: RVB (206, 158, 34);
taille de police: 30px;
rembourrage: 30px;

L'image suivante montre que l'en-tête est stylé avec succès:

Maintenant, nous allons styliser les liens.

Liens de style

Pour ce faire, tout d'abord, utilisez "un»Pour accéder aux liens. Ici, nous allons définir la valeur du «textaine-décoration«Propriété comme«aucun«Pour effacer la décoration par défaut des liens. Après cela, définissez la marge-gauche comme «40px», Marge à droite comme«30px», Et la marge comme«50px". En fin de compte, nous allons définir la couleur des liens comme «RVB (206, 158, 34)»:

un
Décoration du texte: aucune;
marge-gauche: 40px;
marge-droite: 30px;
marge: 50px;
Couleur: RVB (206, 158, 34)

Voici le résultat qui démontre que l'en-tête est stylé avec succès:

En-tête avec logo

Vous pouvez également ajouter un logo à l'en-tête de la page Web. Pour cela, vous devez ajouter une image de logo dans le fichier HTML et la définir sur l'en-tête à l'aide de CSS.

Exemple

Ici, nous allons créer un div à l'intérieur de la balise d'en-tête et nommer la classe Div comme «image". La partie restante de l'en-tête est la même que l'exemple précédent:

…

Dans le CSS, nous utiliserons «.image«Pour accéder au div et ajouter une image de logo en utilisant le«arrière-plan" propriété. Dans le "URL ()», Nous allons ajouter le chemin de l'image comme«URL (logo.png)". Ici, nous utiliserons "sans répétition«Pour éviter la répétition de l'image. En fin de compte, nous définirons la largeur du logo comme «250px"Et la hauteur comme"100px»:

.image
Contexte: URL (logo.png) sans répétition;
Largeur: 250px;
hauteur: 100px;

En utilisant le code ci-dessus, la sortie suivante est obtenue, et on peut voir que le logo est ajouté dans le coin supérieur gauche de l'en-tête:

En-tête avec image

Il est également possible de créer un en-tête avec l'image d'arrière-plan. Créons-le.

Exemple

Tout d'abord, nous ajouterons l'image dans le fichier HTML, comme l'exemple précédent, puis ajouterons le chemin d'accès de l'image dans l'URL () que «image.jpg"Et utilisez un"sans répétition«Valeur pour éviter la répétition de l'image. Après cela, utilisez la propriété de position d'arrière-plan pour définir la position de l'image comme «centre»Et la propriété de la taille de l'arrière-plan comme«couverture”Pour définir l'image dans l'ensemble de l'en-tête. Enfin, définissez la hauteur de l'image comme «250px»:

.image
Contexte: URL (image.jpg) sans répétition;
Position d'arrière-plan: Centre;
taille arrière: couverture;
hauteur: 250px;

Voici le résultat qui démontre que l'image est ajoutée dans l'en-tête:

C'est ça! Nous avons expliqué l'étiquette d'en-tête en détail.

Conclusion

Dans HTML, le «»La balise est utilisée pour créer l'en-tête de page Web. Dans la partie d'en-tête de la page Web, le titre, le paragraphe court, le logo, l'image d'arrière-plan et la barre de navigation peuvent être ajoutés. Dans ce manuel, nous avons discuté de la balise et avons fourni un exemple en créant et en coiffant l'en-tête de la page Web.