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

INSERER DES IMAGES EN HTML

Les différents formats d’image

Comme vous le savez certainement, vous pouvez enregistrer vos images sous différents formats. Les formats les plus utilisés sont :

  • Le JPG ou JPEG ;
  • Le PNG ;
  • Le GIF ;
  • Le BITMAP.

Chaque format possède ses propres spécificités et il faut donc faire bien attention au choix du format lorsqu’on enregistre une image.

Le format JPEG (pour Joint Photographic Expert Group), ou plus communément JPG est un format qui permet généralement de compresser le poids d’une image par dix tout en conservant une très bonne qualité.

Généralement, nous choisirons ce format pour enregistrer des photos.

Le PNG (Portable Network Graphic) est un format qui a été créé à l’origine pour remplacer le format GIF. Le grand intérêt de ce format est qu’il gère la transparence. Celui-ci a un très bon taux de compression tout en conservant une bonne qualité d’image.

Nous utiliserons généralement ce format pour enregistrer nos images qui ne sont pas des photographies.

Le GIF (Grahpic Interchange Format) est un vieux format d’images que je ne recommande plus d’utiliser aujourd’hui, sauf dans le cas d’images animées.

Finalement, le BITMAP (ou BMP) est un format qui possède une très bonne prise en charge par tous les navigateurs et éditeurs.

Cependant, la compression des images est assez mauvaise, ce qui donne au final des images très lourdes et donc longues à charger.

Pour cette raison, je vous déconseille également d’utiliser le BITMAP pour enregistrer vos images.

Le poids des images

Dans la partie précédente, j’ai beaucoup parlé de « poids des images ». En effet, vous devez considérer ce facteur lors du développement de votre site web.

Toute image possède un poids généralement exprimé de kilo-octets. Plus une image est lourde, plus elle va demander de ressources de la part du serveur et du navigateur pour être chargée.

En effet, lors de la mise en ligne de votre site web, vous allez louer un espace serveur chez un hébergeur afin d’y envoyer toute l’architecture de votre site.

Le problème est que vous disposez d’un espace serveur et d'un débit limités. Il vous faudra donc déjà faire attention à ne pas le saturer avec des images inutilement lourdes.

Ensuite, selon la qualité de la connexion de vos utilisateurs et du navigateur utilisé, certaines images, si elles sont trop lourdes, risquent de mettre longtemps à s’afficher complètement.

Cela aura un effet négatif sur votre site puisque des visiteurs vont le quitter plutôt que de patienter. Cette problématique est véritablement à considérer aujourd’hui avec l’essor de l’Internet mobile car les connexions sont beaucoup moins puissantes sur mobile.

Pour conserver des poids d’images minimaux tout en vous assurant des images d’une qualité convenable, pensez donc bien à les enregistrer au bon format et également à les recadrer à la bonne taille avant de les envoyer sur votre serveur.

Ainsi, elles consommeront moins de ressources lors de leur affichage. Cela peut vous paraître un peu flou pour le moment mais, pas d’inquiétude, nous reparlerons de ces problématiques plus en détail plus tard dans ce cours.

Insérer des images en HTML

Nous arrivons enfin au moment que vous attendiez, je suppose : l’insertion d’images en HTML à proprement parler.

L’insertion d’images en HTML va se faire au moyen de l’élément HTML img. Cet élément est représenté par une balise orpheline.

Au sein de l’élément img, nous allons obligatoirement devoir préciser deux attributs : les attributs src et alt.

L’attribut src (pour source) va prendre comme valeur l’adresse de l’image (adresse relative ou absolue) tandis que l’attribut alt (pour alternative) va contenir un texte alternatif décrivant l’image. Ce texte va être affiché si l’image ne peut pas l’être pour une raison ou pour une autre, et est également très utile pour les non-voyants.

Voyons maintenant comment tout cela fonctionne en pratique. On va commencer par enregistrer une image dans le même dossier que notre page HTML. Pour ma part, mon image s’appelle « sunset.png » et possède une largeur et une hauteur de 150 pixels.

Une nouvelle fois, choisissez un nom d’image sans espace ni caractère spécial. Cela évitera des problèmes potentiels.

L’attribut src va fonctionner de la même manière que href. Ainsi, si vous enregistrez votre image dans un dossier différent de votre page HTML, pensez bien à en tenir compte dans la valeur donnée à src.

On utilise l’élément HTML img pour insérer une image dans notre page web

Notre image s’affiche bien grâce à l’élément HTML img et ses attributs src et alt

Comme vous pouvez le voir, notre image s’affiche bien à sa taille d’origine, c’est-à-dire 150*150 pixels pour moi.

Nous verrons plus tard comment modifier la taille d’une image mais encore une fois, si vous le pouvez, essayez de redimensionner l’image en soi avant de l’utiliser dans une page web. Cela consommera moins de ressources.

Comme je vous l’ai précisé, on peut aussi préciser une adresse absolue comme valeur pour notre attribut src.

Par exemple, si je souhaite afficher une image provenant d’un autre site, j’utiliserai évidemment une adresse absolue.

Voici ci-dessous un exemple avec la première image que j’ai trouvé sur Google en cherchant « Pixar Ratatouille ».

Pour insérer une image provenant d’un autre site dans notre page web, nous utilisons une adresse absolue

Notre

Vous pouvez essayer avec n’importe quelle image sur le web, cela fonctionnera. Faites cependant attention à bien récupérer l’URL complète de l’image ainsi qu’aux droits d’auteur !

Notez également qu'il est généralement déconseillé d'utiliser des images provenant d'autres sites car si ces sites les suppriment, elles ne s'afficheront plus non plus sur le vôtre.

Chapitre précédent

Chapitre suivant