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 commentaires
  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

Création des autres pages de notre site CV en HTML et CSS

Quatre pages, un design

La création des autres pages de notre site va être beaucoup plus rapide.

En effet, nous allons récupérer le schéma général de notre première page et emprunter le design de celle-ci pour créer nos autres pages.

Le but de cet exercice, encore une fois, n’est pas d’en mettre « plein la vue » question CSS, mais simplement de créer un site agréable et fonctionnel.

La page experiences-pro.html

Dans la page experiences-pro.html, nous allons détailler nos expériences professionnelles.

Pour cela, on peut par exemple décrire l’activité de nos anciens employeurs, créer un lien vers leur site web, décrire les tâches que nous avons effectuées, etc.

Pour ma part, je vais détailler seulement deux expériences professionnelles.

Je souhaite pour chacune d’entre elles afficher une photo à gauche qui me servira de lien et un texte à droite.

Je vais donc utiliser deux éléments section entre les éléments nav et footer, que je vais ensuite diviser en deux avec deux div.

Voilà donc le code HTML complet de cette page :

Le code HTML de notre deuxième page web

Rien de bien particulier ici. Vous pouvez remarquer qu’on utilise, comme dans la page précédente, des div class="sec" afin de récupérer une partie du code CSS créé précédemment.

Côté CSS, ça va être également très court. Nous allons réutiliser le design général de notre page d’index pour cette page.

Le code CSS de la deuxième page de notre site personnel

Ici, on demande donc à notre div représentant la partie gauche de la section d’occuper 45% de l’espace disponible et de flotter, tandis que le div représentant la partie droite occupera 50% (plus la marge de 5%).

Ensuite, on donne une taille en pourcentage à nos images afin que celles-ci se redimensionnent automatiquement avec la fenêtre, mais on leur demande de ne jamais excéder 400px de large (ce qui est la taille de base de nos images) afin que celles-ci ne pixellisent pas.

Le code CSS correspondant au div class="sec" est évidemment également réutilisé puisque nous n’avons qu’une page CSS.

Voilà finalement le résultat :

Deuxième page de notre site personnel HTML et CSS terminée

La page hobbies.html

Pour la page de loisirs, nous allons à nouveau utiliser le même schéma général.

Nous allons donc utiliser un nouvel élément section par loisir, et afficher à chaque fois une image et un petit texte.

Simplement, cette fois-ci, nous allons alterner la place de l’image et du texte.

Voici donc le code HTML de cette page (sans les parties fixes cette fois-ci) :

Code HTML de la troisième page de notre site

On réutilise les div class="sec", div class="rightexp" et div class="leftexp" utilisés précédemment.

Dans notre deuxième section, nous inversons simplement l’ordre d’écriture des div rightexp et leftexp afin de changer la position de notre texte et de l’image.

En CSS, c’est une nouvelle fois très court et très simple, puisqu’on réutilise évidemment le code écrit précédemment :

Code CSS de la troisième page de notre site personnel

Et voilà donc le résultat final pour cette page :

Résultat final HTML et CSS de la troisième page de notre site

La page contact.html

Il ne nous reste plus qu’à nous occuper de la page de contact.

Comme nous ne connaissons pas le PHP, nous ne pouvons pas encore créer de formulaires d’envoi de mail.

Nous allons donc simplement nous contenter d’écrire notre mail, en remplaçant le « @ » par un « [at] » pour éviter que des robots polluent notre messagerie.

En HTML, nous avons donc tout simplement ceci (sans les parties fixes) :

Code HTML de la page de contact de notre site personnel

Et en CSS, nous avons donc ça :

 Code CSS de la page de contact de notre site personnel

Voilà donc le résultat final pour cette page très épurée.

 Résultat final HTML et CSS de la page de contact de notre site personnel

Chapitre précédent

Chapitre suivant