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

LES VERSIONS HTML ET CSS

Qu'est-ce qu'une "version" ?

Vous devez savoir qu'au cours de ces 20 dernières années, le web a beaucoup évolué et s'est complexifié.

En effet, l'amélioration des performances, aussi bien au niveau des composants physiques qu'en terme de vitesse de connexion a permis progressivement de créer des sites web de plus en plus évolués.

Les langages tels que le HTML et le CSS se sont donc également modifiés et enrichis durant ce temps.

Cependant, l'évolution n'a pas été linéaire ni continue pour l'utilisateur final.

Par exemple, en 1991 est sortie la première version de HTML, l'HTML1. Directement suite à cela, le créateur du HTML a travaillé de son côté pour continuer à améliorer ce langage. Une fois les améliorations jugées suffisantes et suffisamment nombreuses, il a partagé publiquement la nouvelle "version" de son langage, le HTML2, en 1994.

Chaque nouvelle version d'un langage introduit de nouvelles fonctionnalités et change parfois totalement la syntaxe ou l'enjeu de ce langage.

HTML5 et CSS3

Le logo officel du HTML5 et celui du CSS3

Durant ce cours, nous allons travailler avec les dernières versions stables en date du HTML et du CSS : le HTML5 et le CSS3.

Le HTML5 et le CSS3 ont apporté de nouvelles fonctionnalités et ouvert de nouvelles possibilités intéressantes.

Entre autres, le HTML5 simplifie grandement l'insertion de contenus audio et vidéo et améliore la sémantique (la distinction des différents contenus est meilleure que jamais).

Pour sa part, le CSS3 nous apporte une bonne gestion des ombres et des dégradés, ainsi que la possibilité de créer des bordures arrondies.

Durant tout ce tutoriel, lorsque nous parlerons de HTML ou de CSS, nous ferons référence aux versions HTML5 et CSS3 sauf mention explicite.

Chapitre précédent

Chapitre suivant