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

VALIDATION ET COMPATIBILITE DU CODE HTML

Les problèmes relatifs aux navigateurs

Si vous apprenez à coder aujourd’hui, en 2015, vous pouvez vous estimer plutôt chanceux. En effet, le web a atteint une certaine maturité et possède désormais des règles bien définies.

Cependant, sachez que cela n’a pas toujours été le cas, loin s’en faut !

Il y a quelques années seulement de cela, le web était beaucoup plus décousu qu’aujourd'hui et les règles n’étaient pas encore fixées.

Les différents navigateurs de l’époque se livraient une guerre sans merci et comme il n’y avait pas encore d’autorité suffisamment puissante, ces mêmes navigateurs implémentaient de différentes façons certains codes et utilisaient leurs propres normes.

Ainsi, certains éléments ou attributs HTML par exemple n’étaient pas supportés par certains navigateurs et on devait donc créer des codes différents afin que chaque navigateur affiche le résultat voulu.

Aujourd’hui, cette époque est derrière nous. Cependant, il convient tout de même de prendre certaines précautions : nous avons vu précédemment que l’attribut « download » pour télécharger un fichier n’était pas pris en charge par Safari par exemple.

Pensez donc bien à toujours vérifier que votre code fonctionne normalement sur les navigateurs les plus utilisés par vos visiteurs.

Les problèmes viendront heureusement très souvent des vieilles versions d’Internet Explorer (< 9) qui ont quasiment disparu depuis quelques années.

Les entités HTML

Le HTML possède des caractères réservés. Par exemple, vous ne pouvez pas écrire les signes « < » et « > » tels quels dans vos pages web, tout simplement car le navigateur pensera que vous venez d’ouvrir une balise d’élément.

Pour remédier à ce problème, nous allons devoir remplacer ces caractères réservés par des entités.

Les entités vont être des suites de caractères représentant un caractère réservé en HTML.

Voici les trois entités à connaître :

Nom de l’entité Résultat visuel
&lt; <
&gt; >
&amp; &

Vous vous rappelez également lorsque je vous ai dit qu’il n’existait pas en HTML de possibilité simple de conserver les espaces au sein de notre code ?

Ce n’était pas tout à fait vrai. Nous allons pouvoir utiliser l’entité &nbsp (pour « non-breaking space ») pour ajouter des espaces en HTML.

Voyons immédiatement un exemple d’utilisation de ces entités :

Les entités HTML

Les entités HTML en pratique

Essayer ce code

Tester la validité de son code

Vous devez toujours vous efforcer d’écrire un code valide. Cela évitera des bugs potentiels et votre site sera au final mieux référencé sur les moteurs de recherche.

Pour vérifier la validité d’un code HTML ou CSS, le w3c (World Wide Web Consortium), c’est-à-dire l’organisme qui gère l’évolution des langages comme le HTML et le CSS entre autres, a mis à disposition des validateurs de code, gratuits.

Vous pouvez trouver les validateurs HTML et CSS aux adresses suivantes :

Chapitre précédent

Chapitre suivant