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

INTEGRATION ET SEMANTIQUE : YOUTUBE, FIGURE ET FIGCAPTION

L’alternative YouTube

Si vous ne souhaitez pas vous embêter à créer différents formats de pistes audio ou de vidéo et à gérer le tout en HTML, vous disposez d’une autre alternative : télécharger votre audio ou votre vidéo sur un site comme YouTube, Dailymotion ou Vimeo puis intégrer le contenu sur votre site.

En procédant ainsi, vous êtes certain d’assurer une compatibilité maximale avec n’importe quelle version de chaque navigateur puisque le site hébergeur va lui-même s’occuper de créer les différentes pistes adéquates et gérer la prise en charge.

Pour intégrer une vidéo préalablement postée sur YouTube, par exemple, il vous suffit de vous rendre dans l’onglet « partager » de la vidéo puis de choisir « intégrer ». Vous n’aurez alors plus qu’à copier-coller le code d’intégration dans votre page HTML, à l’endroit voulu.

Code intégration Youtube

On copie colle le code d’intégration YouTube dans notre page web

Notre vidéo s’affiche bien sur notre page web

Bien évidemment, vous pouvez modifier les valeurs des attributs de l’élément HTML iframe ou tout simplement les supprimer, selon comment vous souhaitez afficher votre vidéo sur votre site.

Les éléments figure et figcaption

Les éléments figure et figcaption vont nous aider à marquer sémantiquement du contenu média comme des images, de l’audio ou des vidéos.

En effet, il est très difficile pour un navigateur de savoir « de quoi parle » ou « ce que représente » votre image, votre fichier audio ou vidéo sans plus de détail.

On va utiliser l’élément HTML figure pour indiquer qu’une image, une piste audio ou vidéo n’est pas strictement décorative, mais sert à la compréhension générale de notre page web. On n’utilisera donc pas cet élément si nos contenus ne sont là que pour habiller la page.

On va ensuite utiliser l’élément figcaption à l’intérieur de figure pour accoler une légende à notre contenu.

Les éléments HTML figure et figcaption

On utilise figure et figcaption pour renforcer la sémantique de nos éléments

Chapitre précédent

Chapitre suivant