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

DEFINIR L’IMPORTANCE DES TEXTES

L’importance des textes

Lorsque vous concevez une page web, et écrivez du texte, certaines parties de ce texte vont être plus importantes que d’autres.

Cela va par exemple être le cas pour les mots ou phrases clefs sur lesquels vous souhaitez être bien référencé dans les moteurs de recherche.

Nous allons pouvoir signifier à un moteur de recherche (et au navigateur) que telles ou telles parties d’un texte doivent être considérées comme très importantes ou juste importantes grâce au HTML.

L’élément strong

L’élément HTML strong va être utilisé pour signifier qu’un contenu est très important et doit être considéré comme tel par les moteurs de recherche.

En résultat, le navigateur affichera le contenu à l’intérieur de l’élément strong en gras. Encore une fois, n’utilisez pas strong pour mettre un texte en gras ! Utilisez strong pour marquer un texte qui vous semble très important. Nous utiliserons le CSS pour gérer le poids d’un texte.

L'élément HTML strong sert à indiquer qu'un texte est important

Le navigateur affiche le texte dans strong en gras

Essayer ce code

L’élément em

L’élément HTML em (pour emphasis ; « emphase » en français) sert à indiquer qu’un texte doit être considéré comme relativement important, mais avec moins d’importance qu’un texte dans un élément strong.

Le résultat visuel par défaut de l’emphase est la mise en italique du texte contenu dans l’élément.

L'élément HTML em sert à indiquer qu'un texte est assez important

Le navigateur affiche le texte à l'intérieur de l'élément em en italique

Essayer ce code

L’exemple ci-dessus vous montre également que l’on peut véritablement placer nos commentaires n’importe où dans notre code HTML (ici, j’en ai placé un à l’intérieur même de notre paragraphe).

L’élément mark

L’élément HTML mark va nous permettre de faire ressortir un contenu en le marquant.

Le contenu n’est pas forcément important en soi mais va être important à un moment T pour un utilisateur X.

Par exemple, lorsque vous effectuez une recherche sur un site ou sur un moteur de recherche, les mots que vous allez rentrer dans votre recherche sont importants pour vous.

Ces mêmes mots vont généralement être mis en relief dans les résultats retournés suite à votre recherche. Souvent, on utilisera l’élément mark dans ces cas là.

Il reste difficile à votre niveau de vous montrer l’intérêt de cet élément car on l’utilise généralement de façon dynamique et donc avec d’autres langages comme le JavaScript. Retenez simplement qu’il existe pour le moment.

Généralement, le texte contenu dans l’élément mark sera automatiquement surligné en jaune par le navigateur (nous pourrons changer ce comportement en CSS).

L'élément HTML mark nous permet de mettre en relief un texte sans notion d'importance

La navigateur va surligner le texte à l'intérieur de l'élément HTML mark

Essayer ce code

Chapitre précédent

Chapitre suivant