Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE

Les types d’éléments HTML

En HTML, tout élément est soit de type « block » (bloc), soit de type « inline » (en ligne).

Par exemple, l’élément p est un élément de type block tandis que l’élément strong est un élément de type inline.

Connaître le type d’un élément HTML va être essentiel pour créer et mettre en forme nos pages web car les éléments de type block et inline vont se comporter de façon radicalement différente dans une page et nous n'allons pas forcément pouvoir leur appliquer les mêmes propriétés CSS.

Pour le moment, nous allons découvrir ensemble les différences entre les éléments de type block et inline. Nous verrons plus en détail le côté pratique lorsque nous étudierons le modèle des boîtes.

Les éléments de type block

Un élément de type block va toujours commencer sur une nouvelle ligne et prendre toute la largeur disponible dans la page.

De plus, un élément de type block peut contenir d’autres éléments de type block ainsi que des éléments de type inline.

Illustrons immédiatement visuellement cela en prenant un exemple avec un élément p :

Elément HTML de type block

On crée une bodure autour de p grâce à la propriété CSS border

En créant une bordure, on s’aperçoit qu’un élément HTML block occupe toute la largeur de la page

Essayer ce code

Ici, nous nous sommes contentés de créer une bordure autour de nos éléments p grâce à la propriété CSS border (que nous étudierons plus en détail plus tard).

Comme vous pouvez l’observer, en rajoutant des bordures autour de nos paragraphes on s’aperçoit bien que nos éléments p occupent toute la largeur disponible dans notre page et commencent par défaut sur une nouvelle ligne.

Les éléments HTML de type block les plus communs sont les suivants :

  • L’élément p ;
  • Les éléments h1, h2, etc. ;
  • Les éléments ol et ul ;
  • L’élément form (utilisé pour créer des formulaires) ;
  • L’élément div (que nous étudierons dans la partie suivante).

Les éléments de type inline

Au contraire des éléments de type block, les éléments de type inline ne vont pas commencer sur une nouvelle ligne mais s’insérer dans la ligne actuelle.

Les élément de type inline prennent uniquement la largeur qui leur est nécessaire (c’est-à-dire la largeur de leur contenu).

Par exemple, l’élément HTML strong est un élément de type inline.

Strong est un élément de type inline

On crée une bordure autour de notre élément inline

Un élément HTML de type inline ne va prendre que la largeur qui lui est nécessaire

Essayer ce code

Les éléments HTML de type inline les plus communs sont les suivants :

  • Les éléments strong et em ;
  • L’élément a ;
  • L’élément img ;
  • L’élément span (que nous allons étudier dans la partie suivante).

Rappel sur l’importance de la connaissance des types d’éléments HTML

Une nouvelle fois, la connaissance du type d’un élément HTML et des différences de comportement entre les éléments de type inline ou block va être essentielle pour créer une page web fonctionnelle.

En effet, nous n’allons pas pouvoir agir de la même manière en CSS pour manipuler les éléments de type block et de type inline.

Retenez donc bien cette partie !

Chapitre précédent

Chapitre suivant