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 IMAGES EN HTML ET EN CSS

Rappel : insérer une image en HTML

Nous avons vu précédemment dans ce cours qu’il fallait utiliser l’élément img pour insérer une image dans un fichier HTML.

Pour rappel, l’élément img est représenté par une balise orpheline et possède deux attributs obligatoires : l'attribut src, qui sert à indiquer le chemin (relatif ou absolu) de l’image, et l'attribut alt qui sert à décrire l’image, dans le cas où l'utilisateur ne pourrait pas la voir.

Commençons donc par placer une image dans le même dossier que notre fichier HTML et essayons de l’afficher. Pour ma part, mon image s’appelle « coucher-soleil.png ».

Utilisation de l’élément img en HTML

On insère une image en HTML avec img

Mon image, sans surprise, s’affiche convenablement.

Maintenant, nous allons apprendre à ajuster et positionner cette image dans notre page web grâce au CSS.

Redimensionner une image en CSS

Pour redimensionner une image en CSS, nous allons utiliser les propriétés width (pour la largeur) et height (pour la hauteur).

Une petite astuce ici : en ne modifiant que l’un des deux paramètres de l’image, le second va se mettre automatiquement à l’échelle.

On redimensionne notre image en CSS avec width et height

Nous avons changé la largeur de notre image avec width

En revanche, si vous souhaitez modifier la largeur et la hauteur, faites bien attention à ne pas trop « casser » les proportions initiales de l’image pour un rendu visuel optimal.

Positionner une image en CSS

L’élément img est un élément HTML de type inline. Cela signifie que nos images, si elles en ont la place, vont se positionner à côté d’autres contenus HTML.

Les élément HTML img sont de type inline

Nous redimensionnons nos images

Nos deux images se placent côte à côte

Souvent, lorsque l’on crée un site, nous voudrons changer ce comportement par défaut et faire en sorte que nos images se positionnent sur leur propre ligne.

Nous avons trois manières simples de faire cela : soit en encadrant notre image avec un élément de type block, soit en utilisant la propriété display, soit en utilisant les propriétés CSS float et clear.

Première méthode, on peut déjà commencer par placer nos images au sein d'un élément div ou p, tous deux de type block :

On place nos éléments img dans des éléments block

Nos images sont dans des éléments block

Deuxième méthode, on peut utiliser la propriété display :

On peut changer le type de nos images

On utilise display pour modifier le type de nos images

Nos images s’affichent comme des éléments de type block

Dernière méthode, nous pouvons encore utiliser les propriétés float et clear :

On utilise float et clear sur nos éléments img

Grâce aux propriétés CSS float et clear, nos images occupent leur propre ligne

Créer un cadre autour de nos images

Afin d’améliorer l’esthétique de nos images, nous pouvons utiliser les propriétés vues dans la partie concernant le modèle des boîtes pour créer un cadre autour de nos images et les faire ressortir.

Mise en forme d’une image en CSS

On utilise les propriétés du modèle des boîtes pour mettre en page notre image

Notre image ressort du reste de la page grâce au CSS

Ici, nous commençons par définir une bordure grise et fine autour de notre image grâce à la propriété CSS border.

Ensuite, nous utilisons la propriété padding afin d'éloigner notre image en soi de sa bordure, et ainsi de créer un cadre blanc autour de notre image.

Finalement, nous créons une ombre centrée et très diffuse autour de notre image avec la propriété box-shadow. Cela nous permet de faire ressortir notre image et sa bordure du reste de la page.

Chapitre précédent

Chapitre suivant