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 ESPACES ET LES RETOURS À LA LIGNE EN HTML

La problématique

Les plus curieux d’entre vous auront, je suppose, déjà fait le test : vous pouvez ajouter autant d’espaces que vous le voulez au sein d’un paragraphe ou d’un titre ou effectuer des retours à la ligne dans votre code, ceux-ci ne seront jamais affichés visuellement dans votre navigateur.

Pour créer des espaces ou des reoutrs à la ligne en HTML, il faut utiliser des éléments

Les espaces et les retours à la ligne ne sont pas affichés

En effet, pour effectuer des retours à la ligne ou marquer des espaces en HTML, nous allons à nouveau devoir utiliser des éléments.

Pensez bien à nouveau que le navigateur ne comprend pas ce que vous écrivez : il ne comprend que les éléments et traite votre contenu par rapport aux éléments que vous lui avez indiqué.

Les retours à la ligne en HTML

Pour effectuer un retour à la ligne en HTML nous allons devoir utiliser l’élément br qui est représenté par une unique balise orpheline.

Le nom de l'élément br est l'abréviation de « break », l’équivalent de « casser » en anglais (dans le sens de « casser une ligne »).

On peut utiliser autant d’éléments br que l’on souhaite au sein d’un titre ou d’un paragraphe par exemple.

On utilise l'élément break (br) pour créer des retours à la ligne en HTML

Les retours à la ligne sont créés grâce à br

Essayer ce code

Les changements de thématique en HTML

Parfois, au sein d’un article par exemple, vous aborderez des thématiques différentes que vous voudrez séparer.

Dans ce cas là, il peut être intéressant d’utiliser l’élément hr plutôt que br. L'élément hr a justement été créé pour définir un retour à la ligne avec changement de thématique. Tout comme br, cet élément est représenté par une balise orpheline.

L'élément hr sert à séparer du texte contenant différentes thématiques

On peut séparer des contenus de thématiques différentes avec l'élément hr en HTML

Essayer ce code

Gestion des espaces en HTML

Il n’existe pas à proprement parler d’élément permettant de gérer les espaces en HTML.

Cependant, on va pouvoir utiliser l’élément pre qui sert à préformater un texte.

Le texte écrit à l’intérieur de cet élément va conserver la mise en forme que nous allons lui donner.

L'élément pre va préformater un texte en HTML

L'élément pre nous permet de respecter la mise en forme du texte de départ

Essayer ce code

Attention tout de même à ne pas abuser de cet élément et à ne l’utiliser que si vous n’avez pas d’autre choix car celui-ci ne comporte aucune signification d’un point de vue sémantique.

Chapitre précédent

Chapitre suivant