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

SQUELETTE HTML ET MISE EN FORME CSS DE NOTRE PAGE D'ACCUEIL

Le résultat final

Afin que vous compreniez dès le début pourquoi on fait telle ou telle chose, et que ce tutoriel vous soit le plus bénéfique, je vais déjà vous montrer le résultat auquel on souhaite parvenir.

Notre page index.html mise en forme en CSS

La meta description et les sections

Nous allons à présent nous attaquer au code HTML spécifique à la page index.html.

Nous allons commencer par rajouter un élément meta name="description" dans l’élément head de notre page.

La meta description va être un petit texte qui va être affiché dans les résultats de recherche des moteurs de recherche (Google par exemple), sous le titre de votre site.

La meta description ne doit pas excéder 160 caractères (en valeur de l’attribut content) et devrait contenir des mots clefs et expliciter le contenu de votre page.

Je ne le répèterai pas, mais nous ferons évidemment de même avec nos autres pages.

J’aimerais afficher quatre sections dans ma page index.html :

  • une première section de présentation ;
  • une deuxième section où je détaille mon parcours et mes expériences professionnelles ;
  • une troisième section où je présente mes compétences ;
  • une dernière partie contenant des recommandations de mes anciens employeurs.

Pour faire cela, nous allons utiliser quatre éléments HTML section et allons placer le tout à l’intérieur d’un élément article, car le tout peut faire office de CV et donc se suffit à lui même.

Nous allons placer l’élément article juste sous l’élément nav.

On utilise un élément HTML article

La section présentation de notre site HTML

Dans la première partie de présentation, j’aimerais afficher ma photo à gauche et un texte de présentation à droite.

Je vais donc découper cette section en deux avec deux éléments div.

Section de présentation de mon site personnel en HTML

Une nouvelle fois, je rajoute un div class="sec" et des attributs class et id à mes éléments div et section car je sais que je vais ensuite en avoir besoin en CSS pour la mise en page.

Comme toutes mes images sont dans mon sous dossier « imgs », je pense bien à en tenir compte dans la valeur de mon attribut src.

La section expériences de notre site HTML

La deuxième section de ma page d’accueil va contenir mon parcours scolaire et mes expériences professionnelles.

Là encore, je vais séparer ma section en deux avec des dates sur la gauche et les expériences correspondant aux dates sur la droite.

Cependant, ici, afin que les dates soient bien alignées par rapport aux expériences, nous allons utiliser un div intermédiaire de plus à chaque fois pour englober la date et l'expérience correspondante ensemble.

Section expériences de mon site personnel en HTML

J’expliquerai mieux le pourquoi de chaque div lorsque nous passerons au CSS. Pour l’instant, je veux simplement vous montrer l’intérêt et l’efficacité d’une bonne réflexion avant de se lancer dans un projet.

La section compétences de notre site HTML

La troisième section de ma page doit présenter mon niveau de compétences relativement à certains sujets. Ici, je vais utiliser plus ou moins la même mise en forme que pour ma section précédente à l’exception près qu’on va vouloir afficher deux compétences sur la même ligne.

On va donc avant tout séparer la section en deux parties, puis ensuite mettre en forme chaque partie sur le même schéma que précédemment.

Section compétences de mon site personnel en HTML

La section recommandations de notre site HTML

Finalement, la dernière section de ma page d’accueil va contenir des témoignages et des recommandations de mes anciens employeurs, professeurs ou clients.

On va vouloir mettre des extraits de recommandations et les recommandations complètes en tant que fichiers à télécharger.

On va donc une nouvelle fois séparer notre section en deux sur le même schéma que notre première section.

Section recommandation de mon site personnel en HTML

Voilà tout pour notre page index.html. Ce sera déjà pas mal pour commencer !

Mise en forme CSS de notre page index.html

Il est maintenant temps de passer à la mise en page en CSS de la page qu’on vient de créer.

Nous allons déjà commencer par définir la largeur de nos sections, ainsi que la hauteur minimale et les marges intérieures et extérieures.

Mise en page de l’élément HTML section en CSS

Ensuite, nous allons rajouter des marges gauche et droite à nos div class="sec" afin de centrer un peu le contenu des sections.

On précise ici des valeurs en pourcentage afin de simplifier le passage en responsive par la suite.

On centre le contenu de nos sections en CSS

Nous allons après devoir organiser chacune de nos sections.

Nous allons déjà faire flotter tous nos div de sous-section. En effet, rappelez vous que nous avons utilisé des div pour "couper" chacune de nos sections en deux (ou en quatre).

Nous allons maintenant faire flotter tous ces div afin que les contenus se placent côte à côte.

Nous avons séparé nos sections en deux avec div class="left" et div class="right".

Dans ce cas, on veut que la sous section gauche occupe 30% de l’espace disponible et la section droite les 70% restants.

On divise nos sections grâce à de div et au CSS

Ici, la section compétence est un peu particulière puisqu’on la découpe en deux puis à nouveau en deux.

Dans ce cas, on veut que chacune des quatre parties de section occupe 25% de l’espace disponible.

On applique donc un width : 50% aux div qui coupent la section en deux et à nouveau 50% pour les div qui recoupent en deux.

On découpe nos éléments sections en CSS

Arrivé ici, on se heurte à un problème : nos div de section contiennent des enfants flottants. Or, en CSS, tout parent non flottant qui possède des enfants flottants va collapser.

Pour empêcher ce comportement, nous allons utiliser le clearfix CSS suivant sur le div parent en question :

On utilise un clearfix CSS pour éviter que des éléments collapsent

Vous pouvez déjà observer le résultat dans votre navigateur : tout est bien placé !

Notre page index.html est pratiquement terminée

Cela n’est pas un miracle : c’est dû au fait que nous avons construit notre code HTML avec une idée précise de ce que nous souhaitions obtenir.

Il ne nous reste plus qu’à ajouter un peu de couleur et des délimiteurs.

Pour cela, je vous propose de reprendre le thème du menu en utilisant finalement nos id de section :

Ajout de couleurs pour notre page d’accueil HTML en CSS

Nous arrivons finalement au résultat voulu :

Page index.html entièrement terminée en HTML et stylisée en CSS

Ce qui est parfait, dans notre cas, est qu’on peut redimensionner notre page à loisir : comme nous avons utilisé des valeurs relatives en CSS au bon moment et comme notre code est bien organisé, nous n’avons même pas à créer de règles supplémentaires pour gérer l’aspect responsive !

Comme notre page a été bien créée en HTML et en CSS, elle est responsive par défaut

Chapitre précédent

Chapitre suivant