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

STRUCTURE D’UNE PAGE HTML

Structure minimale d’une page en HTML

Pour qu’une page HTML soit déclarée valide, elle doit obligatoirement comporter certains éléments et suivre un schéma précis.

Vous devez toujours faire votre maximum pour que vos pages de code soient valides. Cela améliorera votre référencement et limitera grandement les problèmes d’ergonomie et les bugs de votre site.

Voici donc ci-dessous le code minimum pour créer une page HTML valide. Nous allons dans la suite de ce chapitre expliquer le rôle de chaque élément et attribut.

Chaque page en HTML doit disposer d'une structure minimale afin d'être valide

Le doctype

Tout d’abord, nous devrons toujours démarrer une page HTML en précisant le doctype de notre document. Comme son nom l’indique, le doctype sert à préciser le type du document.

Faites bien attention à l’écriture du doctype : vous pouvez remarquer que la balise représentant le doctype commence par un point d’exclamation. Ceci est un cas unique.

Dans la balise doctype, on va préciser le langage utilisé, à savoir le HTML dans notre cas.

L’élément html

Après le document, nous devons également mentionner un élément html. Cet élément est composé de deux balises <html> et </html> et va représenter notre page HTML en soi. On va donc insérer tout le contenu de notre page (et donc les autres éléments) à l’intérieur de celui-ci.

Les éléments head et body

A l’intérieur de l’élément html, nous devons à nouveau indiquer deux éléments : head et body.

L’élément head va contenir des meta informations relatives à la page, c’est-à-dire des informations générales dont la page va avoir besoin pour fonctionner, comme le titre de la page ou encore le type d’encodage utilisé.

L’élément body va lui contenir tout le contenu « visible » de la page : les textes, images, liens, vidéos, etc.

Les éléments title et meta

Finalement, nous allons devoir indiquer au moins deux autres éléments à l’intérieur de notre élément head : l’élément title, qui va contenir le titre de la page et un élément meta avec son attribut charset qui va nous permettre de définir l’encodage de la page.

L’encodage est très important pour que tous nos caractères, notamment les accents, s’affichent normalement dans notre page. Pour nous autres, français, nous utiliserons la valeur utf-8.

Notez que vous devrez également régler l’encodage de votre éditeur de texte sur utf-8 afin que tous les caractères s’affichent bien par la suite dans votre navigateur.

Ca y est, nous venons de créer notre première page en HTML. Celle-ci est pour le moment vide et ne possède qu’un titre, mais c’est déjà un bon début ! Pas d’inquiétude : nous allons la remplir ensemble au fil des prochains chapitres.

L’imbrication d’éléments

Un autre concept qu’il vous faut comprendre absolument pour coder en HTML est la façon dont le HTML traite ses éléments.

Vous l’avez probablement remarqué : ci-dessus, nous avons placé des éléments HTML à l’intérieur d’autres éléments (par exemple, les éléments title et meta ont été placés à l'intérieur de l'élément head).

On appelle cela l’imbrication. L’imbrication est l’une des fonctionnalités du HTML qui fait toute sa force (nous découvrirons réellement pourquoi plus tard, avec l’étude du CSS).

Cependant, comme toujours, on ne peut pas imbriquer des éléments HTML n’importe comment et il faut suivre des règles précises.

Ainsi, nous n’avons absolument pas le droit de « croiser » les balises des éléments ou, pour le dire plus clairement : le premier élément déclaré doit toujours être le dernier refermé, tandis que le dernier ouvert doit toujours être le premier fermé.

Par exemple, vous voyez que notre premier élément déclaré est l’élément html, qui contient les éléments head et body. L'élément html devra donc être le dernier élément refermé.

Faites bien attention à distinguer les éléments contenus dans d’autres et ceux qui sont au même niveau hiérarchique. Par exemple, ici, title et meta sont deux éléments « enfants » de l'élément head (car ils sont contenus à l'intérieur de celui-ci), mais sont deux « frères » : aucun des deux ne contient l’autre.

Le schéma ci-dessous présente toutes les situations valides d'imbrication d'éléments :

Attention à respecter l'odre d'imbrication des éléments en HTML : premier ouvert, dernier refermé

Chapitre précédent

Chapitre suivant