Cette vidéo, de formation HTML CSS gratuite pour débutants, va vous expliquer l’intérêt des éléments DIV et SPAN. On commencera à constituer un « template » de site internet avec l’en-tête, le corps et le pied de page. Ceci, afin d’introduire des nouvelles balises du HTML5 : header, main et footer.
>> Les éléments de type BLOCK et INLINE
Bienvenue dans notre série de formation continue sur HTML-CSS ! Dans cette vidéo, nous explorons en profondeur le monde du développement web en examinant les éléments div et span. Si vous nous rejoignez maintenant, ne vous inquiétez pas – vous pouvez rattraper les étapes précédentes dans nos vidéos précédentes.
Préparation des fichiers
Avant de plonger dans la leçon, il est essentiel de préparer nos fichiers. J’ai déjà mis en place le fichier « div-span.html » ainsi que sa feuille de style CSS correspondante nommée « div-span.css ». En reliant notre page HTML à son fichier CSS à l’aide de la balise <link>, nous sommes prêts à commencer à explorer les éléments div.
Comprendre div et span
Les éléments div et span servent de conteneurs plutôt que de conférer un sens sémantique au contenu. Tout au long de notre formation, nous allons fréquemment imbriquer ces éléments les uns dans les autres pour faciliter la mise en page des documents HTML. Les éléments div sont de niveau bloc, tandis que les éléments span sont en ligne.
Création d’un modèle de base
Imaginons que nous créons un modèle de site web de base avec un en-tête, une section de contenu principal et un pied de page. Pour commencer, nous créons un élément div pour l’en-tête et lui attribuons une classe nommée « header ». Dans ce div, nous pouvons inclure des éléments de navigation à l’aide de la balise <p>.
Styliser le div de l’en-tête avec une couleur de fond, comme « aquamarine », assure qu’il se démarque visuellement. De même, nous créons un div pour la zone de contenu principal, en le stylisant avec une couleur de fond comme « saumon foncé ». Ce div contiendra nos paragraphes de contenu principal.
Création du pied de page
Enfin, nous ajoutons un div pour le pied de page, lui attribuant la classe « footer ». Dans ce div, nous pouvons inclure des éléments de navigation ou tout autre contenu supplémentaire pour la section de pied de page. En stylisant le pied de page avec une couleur de fond plus sombre, comme « gris ardoise foncé », nous améliorons son attrait visuel.
Introduction de l’élément span
À présent, permettez-moi de vous présenter brièvement l’élément span. Contrairement à div, span est utilisé pour styler des portions de texte en ligne. En enveloppant du texte dans un élément span, nous pouvons appliquer des styles spécifiques pour mettre en valeur ou souligner ce texte.
Passage aux éléments HTML5 sémantiques
Bien que les éléments div et span soient couramment utilisés, HTML5 introduit des éléments sémantiques tels que header, main et footer. Ces éléments sémantiques confèrent une signification plus claire à la structure de nos pages web.
Implémentation des éléments sémantiques
Nous remplaçons les éléments div par des balises sémantiques – header, main et footer – pour respecter les meilleures pratiques de HTML5. Cela améliore la lisibilité et l’accessibilité de notre code.
Mise à jour du CSS
Après avoir effectué la transition vers des éléments sémantiques, il est crucial de mettre à jour notre CSS en conséquence. En ciblant les nouvelles balises sémantiques dans notre fichier CSS, nous nous assurons que notre style reste cohérent avec la structure HTML mise à jour.
Conclusion
Dans ce segment vidéo, nous avons exploré l’importance d’utiliser des éléments HTML5 sémantiques en développement web. En passant des éléments div aux balises sémantiques telles que header, main et footer, nous améliorons la structure et l’accessibilité de nos pages web.
Restez à l’écoute pour notre prochaine vidéo, où nous plongerons plus profondément dans les concepts des éléments block et inline. Comprendre ces concepts fondamentaux élargira davantage vos connaissances et votre compétence en HTML et CSS.
Cela conclut ce segment de notre série de formation HTML-CSS. Merci de nous avoir accompagnés, et nous vous attendons avec impatience dans la prochaine vidéo.
Sur ce, nous vous disons au revoir jusqu’à la prochaine fois. Continuez à coder, et n’oubliez pas de mettre en pratique ce que vous avez appris pour renforcer vos compétences. À bientôt !
