' ou ' Les balises ' peuvent également être utilisées, mais il est recommandé d'utiliser le ' ' étiqueter. Ensuite, attribuez un ' entête ” pour appliquer des styles CSS sur la section d'en-tête. Après cela, ajoutez le '

” étiquetez-le et attribuez-lui une classe de “ titre » pour afficher le contenu « Welcome to Linuxhint ! » :

classe = 'entête' >

< h1 classe = 'titre' > Bienvenue sur Linuxhint ! < / h1 >

< / en-tête>

Après cela, sélectionnez le ' ” tag class et attribuez les styles suivants :

---

---

.entête {

image de fond : url ( '../bg.jpg' ) ;

arrière-plan- taille : couverture;

répétition d'arrière-plan : pas de répétition ;

couleur : fumée blanche;

position d'arrière-plan : haut ;

rembourrage : 0px 20px 20px 20px ;

}

L'explication du code ci-dessus est mentionnée ci-dessous:

• Tout d'abord, définissez l'image ' bg.jpg ' comme arrière-plan pour la section d'en-tête en utilisant le ' image de fond ' propriété.
• Ensuite, le « taille d'arrière-plan ' et ' Répétition du fond ” sont utilisées pour définir la taille de l'image et arrêter la répétition de l'image, respectivement.
• Après cela, définissez la couleur du texte et la position de l'image en haut à l'aide de ' couleur ' et ' position d'arrière-plan ' propriétés.
• Au final, le « rembourrage ” La propriété est utilisée pour définir un espace entre le contenu de l'en-tête et la bordure.

Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :

La sortie ci-dessus indique que la section d'en-tête est créée et que les styles CSS lui sont appliqués.

Étape 2 : Créer une barre de navigation

L'en-tête peut également contenir une barre de navigation dans la plupart des cas. Pour la création de la barre de navigation le code HTML ' ” La balise peut être très utile. C'est pourquoi, ajoutez des éléments de barre de navigation en utilisant ' ” balises et attribuez une classe de “ loi ” :

classe = 'entête' >



< un classe = 'loi' href = '#' >Accueil< / un >

< un classe = 'loi' href = '#' >Services< / un >

< un classe = 'loi' href = '#' >À propos de nous< / un >

< un classe = 'loi' href = '#' >Contactez-nous< / un >

< un classe = 'loi' href = '#' >Nouveautés< / un >

< / non>

< Br >< Br >

< h1 classe = 'titre' > Bienvenue sur Linuxhint ! < / h1 >

< / en-tête>

Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :

La sortie ci-dessus montre que les éléments de la barre de navigation ' Maison ”, “ Prestations de service ”, “ À propos de nous ”, “ Contactez-nous ' et ' Nouvelles Arrivées ' a été créé.

Étape 3 : appliquer des styles aux éléments de la barre de navigation

Pour styliser les éléments de la barre de navigation, sélectionnez le ' loi ” et attribuez les propriétés de styles CSS suivantes :

.loi {

décoration de texte : aucune ;

couleur : blanc;

bloc de visualisation;

rembourrage : 15 px ;

Police de caractère- taille : grand;

flotteur : gauche ;

marge : 0px 20px ;

}

L'explication du code ci-dessus est:

• Premièrement la ' texte-décoration ' est définie sur 'aucun' pour supprimer le style prédéfini du ' ' étiqueter.
• Pour améliorer la visibilité du texte pour l'utilisateur, le ' blanc ' et ' grand ” les valeurs sont fournies au “ couleur ' et le ' taille de police ' propriété.
• Après cela, le « afficher ' et ' flotter ' les propriétés aident le ' ” balises à apparaître sur la même ligne.
• Au final, le « rembourrage ' et ' marge ” Les valeurs des propriétés sont utilisées pour créer un espace entre chaque balise “ ”.

Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :

La sortie ci-dessus montre que les éléments de la barre de navigation sont maintenant stylés.

Étape 4 : Ajouter un effet de survol aux éléments de la barre de navigation

Comme dans la sortie ci-dessus, l'effet de survol n'est pas disponible sur l'élément de la barre de navigation. Pour ajouter les deux, sélectionnez le ' titre ” classe qui est assignée au “

' étiqueter. Après cela, ajoutez le ' :flotter » sélecteur avec le « loi ” class pour appliquer l'effet de survol sur les éléments de la barre de navigation :

.act : survolez {

frontière : 2px blanc uni ;

couleur : bleuviolet;

}

.titre {

texte- aligner : centre;

marge: 18 % 0px ;

}

L'explication du code ci-dessus est fournie ci-dessous:

• Tout d'abord, définissez le ' frontière ' d'un solide de type 2px et attribuez un blanc ' couleur ”. Parallèlement, définissez le ' bleuviolet ” couleur uniquement lorsque la souris est survolée par l'utilisateur sur les éléments de la barre de navigation.
• Ensuite, sélectionnez le ' titre ' classe et définissez son alignement sur ' centre ” et laissez une marge pour que la section paraisse plus grande.

Après avoir exécuté le code ci-dessus, l'aspect final de l'en-tête ressemble à ceci :

La sortie ci-dessus indique que l'en-tête est créé à l'aide de HTML et CSS.

Conclusion

Dans le fichier HTML, la balise '

' est utilisée pour créer une section pour l'en-tête. Après cela, les utilisateurs peuvent appliquer des propriétés CSS telles que le rembourrage et les images d'arrière-plan pour améliorer la section d'en-tête. Il s'applique à tous les éléments d'en-tête tels qu'une barre de navigation. Pour créer une barre de navigation, les utilisateurs peuvent utiliser la balise '