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 DIV ET SPAN

Valeur sémantique

Commençons par rappeler une nouvelle fois le rôle du HTML : structurer du contenu et lui donner du sens.

Les éléments HTML nous servent justement à donner du sens à un contenu en indiquant s’il doit être considéré comme un paragraphe ou un titre, comme important ou non, etc.

A ce titre, les éléments HTML div et span sont un peu spéciaux puisqu’ils ne possèdent aucune valeur sémantique, c’est-à-dire qu’ils ne servent pas à donner du sens à un contenu.

Le fait que ces deux éléments n’apportent pas de sens à un contenu peut faire penser qu’ils vont à l’encontre même du rôle du HTML. C’est à moitié vrai, et c’est la raison pour laquelle on évitera tant que possible de s’en servir généralement.

Toutefois, ces éléments, comme vous vous en doutez, n’ont pas été créés pour rien. Les éléments div et span vont nous servir de conteneurs et grandement faciliter la mise en forme d’une page HTML à des niveaux différents.

La différence entre ces deux éléments est que le premier est de type block tandis que le second est de type inline.

Utilisation de l’élément HTML div

L’élément HTML div est un élément de type block. Cet élément va souvent être utilisé comme conteneur pour plusieurs autres éléments HTML.

Ainsi, nous pourrons appliquer des styles CSS directement à notre élément div afin de faciliter la mise en forme de notre page.

Il est très commun d’attribuer un attribut class à un élément div afin de pouvoir le cibler plus facilement.

Prenons immédiatement un exemple pratique :

Utilisation de l’élément HTML div

On applique nos styles CSS à notre div directement

Notre div et les éléments qu’il contient héritent des styles CSS

Essayer ce code

Ici, nous avons créé un div autour de nos deux paragraphes. Ensuite, nous appliquons les styles CSS directement à notre div.

Utilisation de l’élément HTML span

L’élément HTML span est un élément de type inline.

Cet élément va souvent servir de conteneur pour du contenu textuel. Cet élément va s’avérer pratique dans certains cas où nous aimerions mettre en forme une portion de texte à l’intérieur d’un élément sans pouvoir la cibler de façon simple.

L’élément span sera souvent utilisé avec un attribut class afin de pouvoir le cibler plus facilement en CSS.

Utilisation de l’élément HTML span

On applique nos styles CSS à notre span directement

Ici, nous appliquons une couleur de fond verte à notre élément div portant la valeur « green », puis une couleur de fond bleue plus spécifiquement à notre élément span.

Le texte contenu dans notre élément span est modifié par le CSS

Essayer ce code

Chapitre précédent

Chapitre suivant