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 commentaires
  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

LA LARGEUR (WIDTH) ET LA HAUTEUR (HEIGHT) EN CSS

Types d'éléments HTML et valeurs par défaut

Tout élément HTML possède une largeur et une hauteur. La hauteur par défaut d’un élément HTML est déterminée par son contenu. Ainsi, un paragraphe, selon qu’il occupe une ou deux lignes, ne possèdera pas la même hauteur par défaut.

La largeur d’un élément, en revanche, est avant tout déterminée par son type : en effet, les éléments de type block occuperont par défaut tout l’espace disponible. Les éléments de type inline, en revanche, n’occuperont que la largeur nécessaire à leur contenu.

Modifier la hauteur et la largeur d’un élément

Pour modifier la hauteur par défaut d’un élément, nous allons utiliser la propriété height.

Cette propriété peut prendre des valeurs absolues, relatives (utiles dans le cas d’un site responsive) ou la valeur « auto » (la hauteur sera calculée automatiquement par le navigateur).

Pour modifier la largeur par défaut d’un élément, nous allons cette fois-ci utiliser la propriété width. Cette propriété peut prendre les mêmes valeurs que la propriété height.

Regardez par exemple l’exemple suivant où l’on définit la largeur et la hauteur de notre élément div. On lui donne également une couleur de fond afin de bien voir sa taille.

On crée un élément div en HTML

On définit la hauteur et la largeur de notre div avec height et width

La hauteur et la largeur de notre div a bien changé

Essayer ce code

Hauteur, largeur et modèle des boîtes

Pour régler efficacement la hauteur et la largeur d’un élément, il faut avant tout bien avoir compris le modèle des boîtes.

En effet, vous devez bien vous rappeler que vous ne définissez que la hauteur et la largeur du contenu de l’élément en soi. Les tailles des marges intérieures, extérieures et des bordures viendront s’ajouter à cette hauteur et à cette largeur afin de former la taille totale de l’élément.

Si vous ne faîtes pas attention, vous risquez de créer des éléments plus grands au final que leurs éléments parents, ce qui est généralement considéré comme une mauvaise pratique en HTML et en CSS.

On crée un div et des paragraphes pour tester width et height

On définit la largeur de notre paragraphe, puis on lui ajoute un padding et une border

Au final, notre paragraphe est plus large que son div parent

Essayer ce code

Dans l’exemple ci-dessus, j’ai donné une largeur égale à 400px au pargraphe portant l'attribut class="para1". Cependant, j’ai également défini des marges intérieures de 60px de chaque côté ainsi qu’une bordure de 5px.

Mon élément p fait donc au final 400 + 2*60 + 2*5 = 530px de large, soit 30px de plus que le div, son élément parent , ce qui fait qu'il déborde !

Chapitre précédent

Chapitre suivant