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

LE VIEWPORT ET L'UTILISATION DES POURCENTAGES

Présentation du viewport

Le « viewport » correspond à la taille de la fenêtre web de vos visiteurs.

Une première méthode, très simple, pour commencer à optimiser son site web pour un affichage sur mobile ou tablette est d’utiliser et de manipuler le viewport.

En HTML5, nous pouvons prendre « contrôle » de la taille de la fenêtre grâce à l’élément meta et aux attributs name et content.

On va demander à ce que nos pages web s’adaptent à la taille de la fenêtre de chacun de nos visiteurs, afin que notre contenu la remplisse.

Cela ne va évidemment pas toujours fournir un résultat parfait, mais ce sera déjà un bon début !

Voilà ce qu’il faut écrire :

Utilisation de meta et de son attribut viewport

Le code width=device-width va faire en sorte que la page s’adapte à la taille de l’écran de votre visiteur avec les éléments HTML prenant la place disponible.

Le code initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée par le navigateur.

Regardez le résultat avec et sans utilisation de meta viewport de notre code HTML pour un affichage sur mobile :

Utilisation de la meta viewport

Utilisation des valeurs en pourcentage en CSS

En plus de l'emploi de l'élément meta, nous pouvons utiliser des valeurs en pourcentages en CSS pour définir les tailles de certains éléments plutôt que des valeurs en pixels.

Si votre code est bien pensé et bien construit, cela aura pour effet de redimensionner les différents éléments de vos pages en même temps que la fenêtre va se rétrécir ou s'agrandir.

Lorsque vous utilisez cette méthode, pensez bien que les tailles exprimées sont un pourcentage de la taille de l'élément parent des éléments que vous ciblez actuellement.

Ainsi, si vous définissez une taille égale à 100% pour votre élément body, puis ensuite une largeur de 50% pour un div enfant direct du body, la taille du div sera toujours égale à 50% de celle du body.

Si maintenant vous définissez à nouveau une largeur égale à 50% pour les paragraphes à l'intérieur de votre div, les paragraphes occuperont 50% de la largeur du div

Utilisation de valeurs en pourcentage en CSS

On utilise des valeurs relatives en CSS afin que notre page se redimensionne avec la fenêtre

Il faut faire attention lorsqu'on utilise des pourcentages en CSS : la taille dépend toujours de celle des éléments parents

Limites de ces deux premières méthodes

Le fait d'utiliser la meta name="viewport" et des tailles relatives dans votre code CSS devrait déjà vous fournir une bonne base pour adapter votre site web aux différentes tailles d'écran.

Cependant, parfois, ces deux premières méthodes ne seront pas suffisantes. En effet, selon comment sont construites vos pages, vous voudrez peut être les réagencer totalement selon la taille de l'écran de vos visiteurs.

Par exemple, pour un affichage sur mobile, on préférera souvent enlever du contenu et afficher nos différents éléments en longueur plutôt qu'en largeur.

La meilleure méthode pour faire tout cela va être d'utiliser une nouvelle fois la règle CSS @ ainsi que ce qu'on appelle les "media queries".

Chapitre précédent

Chapitre suivant