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 PARTIES FIXES DE NOTRE SITE

Explication du schéma de travail

Comme notre projet de création de site personnel en HTML et en CSS n’est pas d’une difficulté absolue, nous allons pouvoir alterner les étapes HTML / CSS pour chaque page afin de rendre ce tutoriel plus concret et plus intéressant pour vous.

En effet, nos pages auront des designs et des codes différents les unes des autres, à l’exception de certaines parties « fixes ». On va donc pouvoir travailler sur chaque page séparément.

Commençons déjà par créer nos quatre pages HTML qui vont constituer notre site.

Nous allons appeler ces pages :

  • index.html ;
  • experiences-pro.html ;
  • hobbies.html ;
  • contact.html.

On peut également d’ores-et-déjà créer une page style.css que nous remplirons plus tard.

Pour simplifier le tout, je vous invite à mettre tous ces fichiers dans le même dossier comme ceci :

Notre site en HTML et en CSS va contenir quatre pages

Comme vous pouvez le voir, j’ai également créé un dossier « imgs » dans le dossier contenant les différentes pages de notre site.

Nous placerons toutes les images de notre site dans ce sous-dossier.

Création du header, footer et menu

Nous allons déjà commencer par créer les parties « fixes » de notre site, c’est-à-dire les parties qui vont être identiques sur chaque page de notre site.

Généralement, ce seront le haut de page avec le menu ainsi que le pied de page.

Nous allons créer ces parties dans la page index.html, puis nous copierons et collerons le code dans les autres pages de notre site.

Notez que cette façon de procéder n’est toutefois pas optimale.

En pratique, nous écririons les codes correspondant à notre haut de page, menu et pied de page dans des fichiers différents et nous inclurions ces fichiers grâce au PHP.

Cependant, je pars du principe pour cet exercice que vous ne connaissez que le HTML et le CSS. Nous allons donc être obligé de procéder en copiant et en collant.

Voici donc le code correspondant à ces parties :

Les parties redondantes de notre site HTML et CSS

On commence, comme à notre habitude, par créer la structure minimale d’une page en HTML afin que celle-ci soit valide.

Nous profitons déjà ici de créer le lien vers notre fichier CSS grâce à l’élément link et on précise également un meta name="viewport" pour mettre nos pages à l’échelle.

Notez également qu’on ajoute un attribut lang à notre élément html. Cela va donner une indication aux moteurs de recherche sur la langue utilisée dans nos pages web. Pour le français, le code est « fr-FR ».

Ensuite vous remarquez qu’on utilise trois éléments HTML header, nav et footer à l’intérieur de notre élément body.

Ces éléments sont des éléments HTML structurants qui sont apparus avec HTML5.

Les éléments structurants du HTML5

Le rôle des éléments structurants est de diviser le contenu d’une page en différentes parties selon un ordre logique.

Ces éléments sont de type block et peuvent ainsi remplacer certains de nos éléments div.

Voici la liste complète des éléments HTML structurants ainsi que leur cas d’utilisation. Je vous encourage fortement à vous aussi les utiliser.

Nom de l’élément Cas d’utilisation
header Utilisé pour définir le haut de page (menu exclus)
nav Utilisé pour définir le menu principal de navigation d’une page
section Représente une section dans une page, c’est-à-dire un groupement thématique de contenu
article Représente une partie de page qui se suffit à elle même, comme un post sur un blog par exemple
aside Représente une section de page indirectement liée aux autres, comme une mini-biographie d’un auteur sur un blog par exemple
footer Utilisé pour définir le pied d’une page HTML

Vous pouvez noter plusieurs choses à propos de ces éléments structurants.

Premièrement, chaque élément structurant va agir comme entité à part entière.

Cela signifie qu’on va par exemple pouvoir définir un titre h1 à l’intérieur de chacun de nos éléments structurants dans une page, mais également qu’un élément section par exemple peut lui-même contenir un élément header, un élément nav, un élément aside, etc.

De plus, certains de ces éléments peuvent se contenir l’un l’autre. Par exemple, un élément section peut contenir différents éléments article mais un élément article peut également contenir différents éléments section si cela fait du sens.

Au final, il faut bien vous interroger à l’avance sur le sens que vous voulez donner à vos pages et bien définir leurs contenus pour bien les structurer.

Utiliser les éléments structurants du HTML5 dans nos pages

Dans notre cas, nous nous contentons d’écrire un titre dans notre élément header.

L’en-tête des pages HTML de notre site perso

Faites bien attention à ne pas confondre les éléments header et head ! L’élément header sert bien à définir l'en-tête du contenu « visible » de notre page et se situe dans l’élément body.

Ensuite, nous créons notre menu à l’intérieur de notre élément nav.

Le menu de notre site perso

Pour cela, nous utilisons de façon classique un élément ul pour définir notre menu en soi et des éléments li pour chaque élément de notre menu.

Dans nos éléments li, nous créons des liens avec des éléments a afin que nos éléments de menu renvoient bien vers les autres pages de notre site.

Nous précisons déjà des attributs class pour nos éléments li afin de préparer le terrain pour la mise en forme en CSS.

De même, nous insérons un div qui englobe notre menu. Celui-ci nous permettra plus tard de centrer le menu dans notre page en CSS.

Finalement, nous plaçons une ligne de texte dans l’élément footer.

Le footer de notre site perso

Vous pouvez ici, si vous le souhaitez, insérer des liens vers vos réseaux sociaux, etc.

Voilà tout pour les éléments « fixes » de notre site. Vous pouvez ici copier ce contenu et le coller dans vos quatre pages HTML, en modifiant juste le contenu de l’élément title afin d’avoir un titre qui reflète le contenu de chaque page.

Voici le résultat si vous l’affichez dans votre navigateur :

Parties fixes de notre site perso affichées en HTML

Evidemment, sans CSS, ce n’est pour le moment pas très engageant, mais patience !

Mise en forme CSS générale de notre site

Afin de rendre ce tutoriel immédiatement intéressant pour vous, nous pouvons déjà commencer à mettre en forme en CSS les parties fixes de notre site.

Cependant, retenez une nouvelle fois qu’il est généralement déconseillé de travailler comme cela en temps normal, sous peine d’avoir un code mal construit et de perdre beaucoup de temps au final dans la majorité des cas.

Ici, je me permets de faire cela car je connais exactement tous les codes utilisés dans cet exercice à l’avance.

Commençons avec les styles généraux et ceux de nos header et footer.

Utilisation du CSS pour styliser notre site

On commence par définir des polices d’écriture pour notre site.

On effectue également un reset CSS des marges intérieures et extérieures de notre élément body afin d’avoir le même rendu sur tous les navigateurs (certains ajoutent automatiquement une petite marge).

Ensuite, on centre nos titres h1 et on les met en forme.

On effectue également une mise en forme minimale du header et du footer de notre site.

Pour le menu, le code est un peu plus long. On commence déjà par mettre les éléments de notre menu en ligne et par enlever les puces devant les éléments de liste.

On met nos éléments li en ligne

On va ensuite également effectuer un reset des marges de notre élément de liste ul.

On effectue un reset CSS des marges de l’élément HTML ul

On étend notre élément nav et on lui donne une couleur de fond :

On change la couleur de fond en CSS de notre élément HTML nav

Ensuite, nous allons mettre en forme nos éléments de lien, c’est-à-dire nos éléments a.

On modifie l’apparence de nos éléments HTML a

On commence par enlever le trait de soulignement avec la propriété text-decoration.

Ensuite, on change la couleur des textes pour qu’ils soient bien lisibles, ainsi que la taille et on met l’écriture en majuscules avec la propriété text-transform.

Finalement, on change le type de nos éléments a en inline-block afin de leur appliquer un gros padding. Cela va avoir pour effet d’aérer notre menu tout en gardant tout l’espace autour du texte cliquable.

Ensuite, on veut centrer notre menu dans notre page. Pour cela, nous allons devoir appliquer un display : table et un margin : 0 auto au div intermédiaire que nous avions créé.

On centre notre menu HTML en CSS

Arrivé ici, nous avons fait le plus gros du travail. Il ne nous reste plus qu’à ajouter un style spécifique pour chacun de nos éléments de menu.

Nous allons simplement appliquer une bordure en haut des éléments de menu ainsi qu’une couleur de fond en semi-transparence lors du survol de l’élément en question :

On applique des styles spécifiques à chaque élément de notre menu

Comme la bordure déplace nos éléments de menu de sa hauteur lors du survol, on ajoute une marge intérieure spécifique lors du survol des éléments de menu pour contrebalancer l’effet de la bordure.

On contrebalance l’effet de la bordure en CSS au survol du menu

Voilà tout pour notre menu, et pour les parties fixes de notre site.

Voilà à quoi cela ressemble pour le moment :

Le header, menu et footer de notre site terminés en HTML et en CSS

Concernant l’aspect responsive de notre site, nous allons faire très simple pour le moment en nous contenant de réduire les dimensions et écarts entre nos différents éléments afin que le site s’affiche également bien sur mobile.

On se permet de faire comme cela car nos éléments de menu prennent peu de place. Pour créer un véritable menu responsive, je vous invite à regarder l’exercice qui y est consacré sur ce site.

Création de règles CSS pour gérer l’aspect responsive de notre site

En voilà donc le résultat sur Smartphone :

Notre site HTML et CSS est maintenant en partie responsive

Chapitre précédent

Chapitre suivant