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

LES TITRES ET LES PARAGRAPHES EN HTML

Pourquoi définir des titres et des paragraphes ?

Une nouvelle fois, rappelez vous que le HTML est un langage de balisage.

Le seul et unique rôle du HTML est de nous permettre de créer un document structuré en différenciant d’un point de vue sémantique les différents éléments d’une page.

Le but de tout ceci est que les navigateurs et les ordinateurs puissent comprendre la structure de notre document et son flux afin de l’afficher de la meilleure manière.

L’un des effets secondaires d’une bonne utilisation du HTML en tant que langage de balisage est un meilleur référencement sur des moteurs de recherche comme Google par exemple.

Il va donc être essentiel de différencier nos titres de nos paragraphes en HTML, ainsi que les parties de contenu plus ou moins importantes, etc.

Les titres en HTML

Il existe six niveaux hiérarchiques de titres ("heading" en anglais) définis par les éléments h1, h2, h3, h4, h5 et h6. L'élément h1 représente un titre très important, h2 un titre important, h3 un titre d'importance moyenne, etc.

L'élément h nous permet de créer des titres en HTML

Essayer ce code

Les titres en HTML sont affichés en gras et avec des tailles différentes par défaut

Comme vous pouvez le voir, le navigateur comprend bien qu’il s’agit de titres d’importances diverses et les traite donc différemment par défaut, en leur attribuant une mise en forme différente (très grand et très gras pour un titre de niveau h1, puis de plus en plus petit jusqu’à h6).

Encore une fois, n’utilisez pas un élément de type "h" pour écrire un texte en grand et en gras ! Utilisez le pour définir un titre dans votre page. Nous nous chargerons de la mise en forme du contenu plus tard, grâce au CSS.

Notez que « h » signifie « heading », soit l’équivalent du mot « titre » en français. Les éléments en HTML portent souvent l'initiale de ce qu'ils représentent, en anglais.

Théoriquement, si vos pages sont bien construites, vous ne devriez que rarement dépasser le niveau h3.

h1 va représenter le titre principal de votre page. Vous n’avez le droit qu’à un seul élément h1 par section de page (nous verrons plus tard ce que cela signifie). En revanche, vous pouvez créer autant de titres h2, h3, etc. que nécessaire.

Les éléments h1, h2, etc. et l'élément title

Faîtes bien attention à ne pas confondre les éléments h1, h2, etc. et l'élément title, qui sont complètement différents !

Les éléments h1, h2, etc. servent à définir des titres à l’intérieur de la page, tandis que l’élément title sert à définir le titre de la page, qui va s’afficher dans la barre haute de votre navigateur.

Les paragraphes en HTML

Pour créer des paragraphes en HTML, nous allons utiliser l’élément p.

On peut créer autant de paragraphes que l’on souhaite dans une page. A chaque nouveau paragraphe, il faut utiliser un nouvel élément p.

Pour chaque nouveau paragraphe, un retour à la ligne va être créé automatiquement et affiché par votre navigateur (exactement comme c’était le cas avec les titres).

L’élément p est très simple à utiliser, n’hésitez pas à essayer par vous même !

Pour créer des paragraphes en HTML, on utilise l'élément p

Les titres et les paragraphes vont prendre toute la ligne en HTML

Essayer ce code

Chapitre précédent

Chapitre suivant