Cette vidéo pour apprendre le HTML CSS, va vous montrer comment réaliser un gabarit de page sur deux colonnes. Un template qui se compose de l’entête, du corps principal, d’une barre latérale et d’un pied de page. On adaptera l’affichage sur une colonne pour la version mobile. Pour réaliser cet exercice de révision, on utilisera la mise en page avec Flexbox.
Ce tutoriel a pour objectif de vous montrer comment nous allons créer un modèle de page web basique. Cet exercice nous permettra de passer en revue certains concepts, en mettant l’accent sur une mise en page classique de page web comprenant un en-tête, un corps, une barre latérale et un pied de page. Nous veillerons à ce que le modèle soit réactif, s’adaptant de manière transparente aussi bien aux smartphones qu’aux écrans plus larges.
Ce guide détaillé vous guide à travers le processus de création d’un modèle de page web réactif, couvrant la structure HTML, la stylisation CSS et les requêtes médias pour la réactivité. Que vous soyez débutant cherchant à apprendre les bases ou un développeur expérimenté cherchant un rappel, ce tutoriel fournit des informations précieuses sur la construction de mises en page de page web efficaces.
Configuration des Fichiers HTML et CSS
Pour commencer, j’ai créé un fichier HTML nommé « 18-template-page.html » et je l’ai lié à un fichier CSS. Avec nos fichiers prêts, plongeons-nous dans la construction de notre modèle.
Construction de la Structure
Tout d’abord, nous établirons la structure de base de notre modèle. Nous commencerons par l’en-tête, en utilisant la balise <header>, et à l’intérieur, nous créerons éventuellement un menu. Ensuite, un conteneur <div> avec la classe « container » contiendra le contenu principal et une barre latérale. Nous utiliserons la balise <main> pour le contenu principal, y compris les titres et les paragraphes. Ensuite, nous implémenterons la barre latérale en utilisant la balise <aside>, généralement utilisée pour le contenu supplémentaire. Enfin, le pied de page, contenu dans la balise <footer>, conclura notre structure.
Stylisation de l’En-tête
Passons maintenant à la stylisation de nos éléments en utilisant CSS. En commençant par l’en-tête, nous ajouterons une couleur de fond, définirons la couleur du texte en blanc et ajusterons la hauteur pour une meilleure visibilité. Pour assurer un alignement approprié dans la fenêtre, nous ajusterons les marges et le rembourrage en conséquence.
Stylisation du Conteneur
Ensuite, nous styliserons le conteneur en définissant une largeur maximale pour éviter les problèmes sur les écrans plus petits, en ajoutant une couleur de fond pour plus de clarté et en le centrant sur la page. Nous ajusterons également le rembourrage pour améliorer l’espacement à l’intérieur du conteneur.
Stylisation de la Barre Latérale et du Pied de Page
De même, nous styliserons la barre latérale et le pied de page, en ajoutant des couleurs de fond, en définissant la couleur du texte en blanc et en ajustant le rembourrage et la hauteur pour plus de cohérence.
Rendre le Modèle Réactif
Pour assurer la réactivité, nous utiliserons des requêtes médias. Pour les écrans plus larges que 780 pixels, nous organiserons le contenu principal et la barre latérale en colonnes à l’aide de Flexbox. Cela permet une meilleure mise en page sur les écrans plus grands tout en maintenant une mise en page en une seule colonne pour les appareils plus petits.
Conclusion
Avec ces étapes, nous avons créé un modèle de page web basique et réactif, offrant une expérience utilisateur cohérente, que ce soit sur un smartphone ou un grand écran. N’hésitez pas à vous abonner pour plus de tutoriels, et restez à l’écoute pour notre prochaine vidéo !
