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

DEFINITIONS ET ROLES DU HTML ET DU CSS

Le HTML, ou HyperText Markup Language

HTML est l’abréviation de HyperText Markup Language, soit en français « langage de balisage hypertexte ».

Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu.

Grâce au HTML, on va par exemple pouvoir indiquer au navigateur que tel texte doit être considéré comme un simple paragraphe ou que tel autre est un titre.

Le code HTML ci-dessous par exemple indique que l’on souhaite créer un grand titre (grâce à l’élément h1) et un paragraphe (grâce à l’élément p).

Le HTML nous permet de structurer une page en donnant du sens au contenu

Le HTML va également nous permettre d’insérer différents types d’éléments dans nos pages web : du texte, des liens, des images, etc.

Le CSS, ou Cascading StyleSheets

CSS est le diminutif de Cascading StyleSheets, ou feuilles de styles en cascade.

Le CSS a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles.

Le CSS va nous permettre par exemple de définir la taille, la couleur ou l’alignement d’un texte.

Nous allons donc utiliser le CSS sur notre code HTML, afin d’enjoliver le résultat visuel final.

Le code ci-dessous par exemple indique que les titres h1 écrits en HTML doivent avoir une couleur rouge et une taille de 14px tandis que les paragraphes doivent être bleus et soulignés.

Le CSS nous permet de modifier la couleur ou la taille de nos textes

N’utilisez jamais le HTML pour la mise en forme !

Voilà une chose que je vais vous répéter encore et encore au fil de ces premiers chapitres : vous ne devez jamais utiliser le HTML pour faire le travail du CSS.

En effet, si vous affichez la page en HTML créée ci-dessus sans le CSS, vous pouvez remarquer que le contenu qui a été déclaré comme étant un titre s’affiche en grand et en gras, tandis que la taille de la police de notre paragraphe est plus petite.

Le navigateur applique un style par défaut à notre code HTML

Certains débutants en déduisent donc « pour mettre un texte en grand et en gras, il suffit de créer un titre ». Sortez vous cela immédiatement de la tête !

Le HTML est un langage qui a été créé pour structurer des pages et pour donner du sens au contenu. Le principe même du HTML est d’indiquer aux navigateurs que tel texte est bien un titre et tel autre est bien un simple paragraphe.

Si le titre s’affiche en grand et en gras ici, c’est tout simplement dû au traitement par défaut de celui-ci par votre navigateur : le navigateur a détecté un titre, et va donc par défaut lui attribuer une grande taille et un poids de police plus lourd.

Si vous faussez le tout en déclarant par exemple des titres qui n’en sont pas, vous pervertissez le rôle du HTML et cela va impacter fortement la qualité de votre page web, sa validité et votre référencement global.

Une nouvelle fois, pour mettre un texte en grand ou en petit, en gras ou en italique, en rouge ou en bleu… nous utiliserons le langage CSS qui a été créé pour cela.

Nous mettons en forme notre code HTML avec l'aide du CSS

Essayer ce code

Chapitre précédent

Chapitre suivant