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

INDENTATION ET COMMENTAIRES

Des bonnes pratiques, pourquoi faire ?

Avant d’aller plus loin dans notre apprentissage du HTML et du CSS, il me semblait essentiel de d’ores-et-déjà vous parler de certaines bonnes pratiques de développeurs.

En effet, si vous faîtes l’effort de les respecter dès maintenant, vous verrez que ça deviendra très vite un automatisme.

Les bonnes pratiques sont là pour nous aider à coder plus proprement et plus lisiblement, donc pour nous faciliter la vie, pas le contraire !

Nous allons dans cette partie parler d’indentation et de commentaires HTML.

L’indentation

Indenter correspond à créer des retraits en début de ligne de façon cohérente et logique.

Vous l’avez certainement remarqué dans les codes précédents : j’accentue plus au moins le retrait à gauche de chacune de mes lignes de code.

Indenter va nous permettre d’avoir un code plus propre et plus lisible, donc plus compréhensible. Indenter permet également de plus facilement détecter les erreurs potentielles dans un code.

Le but de l’indentation est de nous permettre de discerner plus facilement les différents éléments ou parties de code. Regardez plutôt les deux exemples suivants.

Avec indentation :

Un exemple de code HTML bien indenté

Sans indentation :

Un code HTML non indenté

J’espère que vous serez d’accord pour dire que le premier code est plus clair que le second.

Concernant l’indentation, il n’y a pas de règle absolue, notamment par rapport à la taille du retrait de chaque ligne.

Pour ma part, je me contente de retourner à la ligne et d’effectuer une nouvelle tabulation à chaque fois que j’ouvre un nouvel élément dans un autre.

Par exemple, ci-dessus, vous pouvez voir que j’ai effectué une tabulation pour écrire la balise ouvrante de mon élément head, contenu dans mon élément html.

J’ai ensuite effectué une nouvelle tabulation à l’intérieur de l'élément head pour écrire mon élément title.

En revanche, je n’ai pas crée de nouvelle tabulation pour l'élément meta étant donné que cet élément n’est pas contenu dans title (ce n’est pas un élément enfant de l'élément title) mais est au même niveau hiérarchique que lui (on parle d’élément frère).

Vous pouvez observer la même chose avec les éléments head et body par rapport à l’élément html : j’ai décalé head et body avec le même écart par rapport à html car ces deux éléments sont frères (aucun des deux n’est contenu dans l’autre).

Les commentaires

Les lignes de commentaires vont être des lignes de texte que l’on va écrire au milieu de notre code, afin de donner des indications sur ce que fait le code en question.

Les commentaires seront invisibles pour vos visiteurs, ils ne servent qu’aux développeurs créant ou lisant le code.

Les commentaires vont être très utile dans deux situations :

  1. Dans le cas d’un gros / long projet, afin de bien se rappeler soi même pourquoi nous avons écrit tel ou tel code, ou encore pour se repérer dans le code ;
  2. Si l’on souhaite distribuer son code, ou si l’on travaille à plusieurs, cela fait beaucoup plus professionnel et permet aux autres développeurs de comprendre beaucoup plus rapidement et facilement le code distribué.

Les commentaires peuvent être mono-ligne ou multi-lignes. Pour écrire un commentaire en HTML, nous allons nous y prendre de la façon suivante :

Syntaxe et écriture d’un commentaire en HTML

Essayer ce code


Faîtes bien attention à la syntaxe des commentaires : il y a un point d’exclamation au début mais il n’y en a pas à la fin.

Même si vous ne voyez pas forcément l’intérêt de commenter dès maintenant, je vous garantis que c’est souvent ce qui sépare un développeur moyen d’un bon développeur. Faites donc l’effort d’intégrer cette bonne pratique dès à présent, cela vous sera bénéfique dans le futur.

Mise en garde

Vous vous rappelez lorsque je vous ai dit que vos commentaires n’étaient pas affichés aux yeux de vos visiteurs ?

C’est vrai, mais faîtes bien attention, car cela ne veut pas dire qu’il est impossible pour un visiteur de voir ce que vous avez écrit en commentaire.

En effet, tous vos visiteurs peuvent voir à tout moment, s’ils le souhaitent, non seulement le contenu de vos commentaires mais aussi l’intégralité de votre code HTML.

Pour cela, il suffit simplement d’activer les outils pour développeurs dont dispose chaque navigateur puis de faire un clic droit sur la page et « d’inspecter l’élément ».

Cela est valable pour n’importe quel site. Regardez par exemple avec le site Wikipédia. Une fois les outils pour développeurs activés, il suffit d’un clic droit…

Une fois les outils pour développeurs activés, on peut inspecter n’importe quel code HTML

Et le contenu HTML de la page est affiché dans une console !

Le code HTML est visible par tous

Faîtes donc bien attention à ne jamais écrire d’informations sensibles au sein de vos commentaires, comme des codes ou mots de passe par exemple.

Chapitre précédent

Chapitre suivant