CATALOGUE Code & Data Formation XHTML/CSS Apprendre XHTML & CSS

Introduction à la mise en page avec les feuilles de style

Retour à la formation
Chapitre 5 Leçon 1
Précédent
Suivant

Apprenez à distinguer les éléments de type bloc et les éléments de type en ligne en HTML et découvrez comment les manipuler avec des feuilles de style.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous abordons les concepts fondamentaux de la mise en page en HTML à l'aide des feuilles de style (CSS). Nous expliquons d'abord la différence entre les éléments de type bloc et les éléments de type en ligne. Un élément de type bloc occupe toute la largeur disponible et commence toujours sur une nouvelle ligne, comme les paragraphes (<p>) et les divisions (<div>). En revanche, un élément de type en ligne n’occupe que l’espace nécessaire à son contenu et peut s'insérer au sein d’un paragraphe, comme les balises <span> ou <a>.

Nous explorons ensuite comment utiliser les propriétés CSS pour manipuler ces éléments, notamment la largeur, les bordures, les marges, et les espacements internes. Nous illustrons également l'utilisation de la propriété display pour alterner entre les types de rendu bloc et en ligne en CSS. Finalement, un exercice pratique est inclus afin de consolider ces connaissances par une application directe sur un projet HTML.

Objectifs de cette leçon

Les objectifs de cette vidéo sont les suivants :

  • Comprendre la différence entre éléments de type bloc et éléments de type en ligne.
  • Savoir manipuler ces éléments en utilisant des propriétés CSS.
  • Appliquer la propriété display pour alterner entre les types de rendu.

Prérequis pour cette leçon

Il est recommandé d'avoir des connaissances de base en HTML pour tirer le meilleur parti de cette leçon.

Métiers concernés

Les compétences développées dans cette leçon sont particulièrement utiles pour des métiers tels que :

  • Développeur Web Front-end
  • Intégrateur Web
  • Designer Web

Alternatives et ressources

Pour la manipulation des éléments HTML, vous pouvez également utiliser des outils comme Bootstrap ou des frameworks CSS comme Tailwind CSS pour des fonctionnalités avancées.

Questions & Réponses

Un élément de type bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible, tandis qu'un élément de type en ligne occupe seulement l'espace nécessaire à son contenu et peut se trouver à l'intérieur d'un paragraphe sans démarrer une nouvelle ligne.
Pour appliquer une largeur spécifique à un élément de type en ligne en CSS, il faut d'abord changer son mode de rendu en élément de type bloc ou inline-block en utilisant la propriété display, par exemple display: inline-block; pour lui attribuer une largeur.
Utiliser la propriété 'display: inline' sur un élément de type bloc permet de le faire apparaître sur la même ligne que le contenu adjoint, sans qu'il ne prenne toute la largeur disponible. Cela peut être utile pour des ajustements de mise en page spécifiques.