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

COMMENTAIRES ET INDENTATION EN CSS

Les commentaires, le retour

Tout comme nous avons vu qu’on pouvait écrire des commentaires en HTML, nous allons également pouvoir commenter notre code CSS.

Les commentaires n’influent une nouvelle fois en rien sur le code et ne sont pas visibles par les utilisateurs.

Commenter le code CSS n’est pas une option : cela va très vite devenir indispensable car vous allez vous rendre compte que les fichiers CSS s’allongent très très vite.

Il est donc essentiel de bien organiser et de bien commenter son code CSS afin de ne pas faire d’erreur en appliquant par exemple deux styles différents à un même élément.

La syntaxe des commentaires en CSS est totalement différente de celle des commentaires en HTML.

Nous écrirons de la même manière un commentaire mono-ligne ou multi-lignes en CSS.

Commenter son code en CSS est très important. Voici la syntaxe d’un commentaire en CSS

Dans l’exemple ci-dessus, notez que les étoiles en début de ligne pour mon commentaire multi-lignes ne sont absolument pas nécessaires (à part pour la première ligne, évidemment) : ce n’est que de la décoration afin de bien voir que l’on commente.

Vous pouvez également remarquer une utilisation intéressante des commentaires et qui est très commune en CSS : le fait de commenter une déclaration CSS.

En effet, vous voudrez parfois supprimer momentanément une déclaration CSS, pour effectuer des tests par exemple. Plutôt que de l’effacer complètement, vous pouvez la commenter.

Ainsi, la déclaration CSS ne sera plus prise en compte. Vous n’aurez ensuite plus qu’à enlever le commentaire pour la « réactiver ».

L’indentation en CSS

Indenter en CSS est également très important afin de conserver le plus de clarté possible dans son code et de paraître professionnel si un jour vous devez le distribuer.

En terme de règles, nous indenterons en général d’une tabulation les différentes déclarations concernant un sélecteur donné.

Pour plus de lisibilité, nous retournerons également à la ligne après chaque déclaration. Notez que cela augmentera de façon très minime le temps d’exécution du code et donc le temps d’affichage de la page.

Cependant, en phase de développement tout au moins, il est essentiel de conserver un code aéré et propre. Vous pourrez toujours le compresser par la suite ; de nombreux outils existent sur le web pour cela.

Chapitre précédent

Chapitre suivant