Categories
Apprentissage CSS Database Formation HTML PHP SQL Web

Quand PHP dynamise les pages Web

code sur un écran

PHP dynamise les pages web grâce à des variables injectées directement dans le code HTML des pages.
Découvrons ce qui se cache derrière ces variables dites dynamiques…

Les superglobales

Une page web contient de nombreuses données qui peuvent être récupérées en PHP. Pour cela on va utiliser des variables techniques dites superglobales. Elles sont toujours disponibles, quel que soit le niveau où elles sont déclarées.

SuperglobaleDescription
$GLOBALSListe les variables disponibles dans le contexte global de l’application
$_SERVERContient des informations comme les en-têtes, dossier, chemin du script. Informations générées par le serveur
$_REQUESTUn tableau associatif qui contient par défaut le contenu des variables $_GET$_POST et $_COOKIE.
$_POSTContient les variables POST passées via une requête HTTP
$_GETElle contient les variables GET passées via une requête HTTP
$_FILESElle contient les fichiers uploadés au serveur passés par la méthode POST
$_ENVContient les variables d’environnement qui gravitent autour du script PHP : les variables shell, le système d’exploitation…
$_COOKIETableau de cookies envoyés par HTTP
$_SESSIONTableau de valeurs stockées en session, c’est-à-dire n’existant que pour l’utilisateur courant et durant une période limitée (son temps de connexion environ par défaut)

La transmission des données d’une page à l’autre se fait via le protocole HTTP. Deux méthodes sont alors utilisées :
GET : qui permet de récupérer un contenu, transmis par un paramètre get via l’URL.
POST : qui permet d’envoyer plus de contenu. Cette méthode est principalement utilisée pour gérer l’envoi de formulaires (lien avec HTML).

Voyons ces deux superglobales en détail…

Les variables GET

Lors d’une requête GET, on peut créer des variables directement dans l’adresse URL. La transmission se fait alors avec une paire de key=value contenue dans l’URL. Les données sont donc récupérables.
Pour ce faire, à la fin de l’adresse on écrit : url?parametre1=valeur1&parametre2=valeur2

Attention, le ? entre le nom du fichier et la variable est très important car c’est lui qui détermine les variables à transmettre.

Pour récupérer les données, on utilisera ensuite la superglobale $_GET.
Cette variable est un tableau d’objets qui contient toutes les données sous le format key => value .

Les variables POST

La méthode POST est principalement utilisée pour les formulaires. Pour gérer ces données, il faudra avoir 2 pages : une page contenant le formulaire et une autre permettant le traitement des variables.
La superglobale $_POST se comporte exactement comme $_GET : elle revoie un tableau d’objets. Il ne faut donc pas oublier dans le formulaire d’ajouter à chaque input un name !

Par exemple :
Page form.php

<html>
<body>
    <form action="login.php" method="post">
        <input type="email" placeholder="Adresse e-mail" name="email">
        <input type="password" placeholder="Mot de passe" name="password">
        <button type="submit">Connexion</button>
    </form>
</body>
</html>

Page traitement.php

<?php

echo "Votre e-mail est " . $_POST['email']  . ". Vous êtes bien connecté ! Votre mot de passe est secret, mais au cas où, il s'agit de " . $_POST['password'];

?>

Utiliser PHP avec du HTML, c’est possible !

Dans le doc HTML, on va pouvoir considérer les données PHP comme étant des données dynamiques. Il va donc être possible d’ajouter des conditions, ou des boucles directement dans le HTML.
Pour cela, on va inclure les données PHP en les écrivant dans les balises PHP : <?php   ...    ?> .

Les bonnes pratiques :
<?= correspond à <?php echo. Cette notation va permettre d’abstraire encore plus le php !
– au lieu de l’accolade dans les conditions, on va mettre deux points et terminer avec end... .
Par exemple :

<?php foreach($articles as $article => $donnee) : ?>
    <div>
        <a href="article.php?id=<?= $article ?>"><?= $donnee['title'] ?> </a>
        </div>
<?php endforeach ; ?>

On va donc écrire toute la page en HTML. Et s’il y a des variables spécifiques à déclarer en PHP, on va créer un bloc PHP tout en haut du document (avant la déclaration du HTML).

Conseils pratiques :
– avant de mettre les variables PHP dynamiques, écrire d’abord en dur le HTML ce que l’on veut obtenir,
– ne pas oublier d’ouvrir et fermer directement la balise PHP pour éviter les problèmes.

Insertion de fichier

Il est aussi possible d’insérer des fichiers directement dans la page PHP/HTML. Pour cela, on va utiliser la fonction include( ) (ou required() ).

PHP va lire le fichier, prendre tout son contenu pour le copier dans la page HTML. A noter que toute cette partie n’apparaîtra pas dans le code source : le fichier va rester sur serveur, et PHP va l’analyser pour le compiler (tout en restant transparent pour le client !).

Cette fonction d’ajout permet aussi de gérer les fichiers comme les componants externes : on peut faire un fichier contenant juste la navbar, juste le header, juste le footer, etc…
Cela évite d’écrire la même chose de partout, et les changements seront alors plus simples.
Le code PHP de la page web devient donc plus facile à maintenir !

Différence entre include et required

Avec include( ) , si le fichier n’est pas trouvé, on aura un warning (cela n’empêche donc pas le script de s’exécuter).
A noter que les erreurs ne s’affichent pas pour les clients du site, elles s’affichent uniquement en mode développeur.

Avec require( ) , si le fichier n’est pas trouvé, on aura alors une fatal-error entraînant l’arrêt d’exécution du script !

Connexion avec les bases de données

Il est possible de récupérer les données depuis une base de données. Pour cela, il faut créer une connexion à la base de données ($bdd), puis créer une requête comme avec SQL ($response), pour ensuite avoir une réponse ($variablesRecuperees).

Extraire tous les éléments de la base de données
// On créée une connexion à la base de données que l'on stocke dans $bdd
$bdd = new PDO('mysql:host=localhost;dbname=nomDeLaBdd;charset=utf8;port=3306', 'login', 'password');

// On écrit notre requête MySQL. On peut aussi concaténer des variables PHP dedans si besoin !
$request = "SELECT * FROM table";

// On demande à notre base de données, $bdd, d'exécuter la requête. On stocke la réponse de MySQL dans $response 
$response = $bdd->query($request);

// On demande à la réponse de nous retourner TOUTES les données (grâce à fetchAll).
// De plus, ces données seront retournées sous forme de tableau associatif, grâce au paramètre PDO::FETCH_ASSOC. 
$variablesRecuperees= $response->fetchAll(PDO::FETCH_ASSOC);

$variablesRecuperees est alors un tableau associatif. On peut alors extraire toutes les données grâce à un foreach :

<?php foreach ($variablesRecuperees as $variableRecuperee) : ?>
  <h1>
      L'élément est <?= $variableRecuperee['champs'] ?>
  </h1>
<?php endforeach; ?>
Extraire un seul élément

Il est possible d’extraire un seul élément de la base de données.
Pour cela, il existe deux façons de faire :

1 – en cherchant via l’id de l’élément (ou en incluant des variables précises)
Par exemple :

$idMovie = 34; // cet ID peut venir de GET par exemple !
$request = "SELECT * FROM movies WHERE id = " . $idMovie;

// ou encore

$search = "science-fiction"; // Ce paramètre peut venir de GET si on a cliqué sur le lien d'une catégorie, ou de POST pour un moteur de recherche par exemple !
$request = "SELECT * FROM movies WHERE category LIKE '%" . $search . "%'";

2 – via une requête paramétrée

$response = $bdd->query($request);

// Si on n'attend qu'un élément (par exemple: un film trouvé par ID), on utilise fetch :
$variableRecuperee = $response->fetch(PDO::FETCH_ASSOC);

PHP aide à dynamiser les pages web en injectant des données qui sont modifiables en fonction contexte.
Mais PHP est avant tout un langage de programmation orienté objet !
Nous découvrirons la POO avec PHP dans les prochains cours !

Categories
Apprentissage CSS Découverte Formation HTML Javascript Web

Les bibliothèques logicielles

Les bibliothèques logicielles (libraries en anglais) sont là pour aider le développeur à coder un site plus rapidement. Les libraries sont donc des facilitateurs de travail. En effet, elles permettent en très peu de lignes de code d’ajouter de multiples fonctions lors du développement d’un site (ou application) web.

Je vais donc vous faire une liste (non exhaustive) des différentes bibliothèques logicielles – basées sur JavaScript – que j’ai vu lors de la formation.

jQuery

Une des bibliothèques logicielles les plus connues pour JavaScript est jQuery. Et son slogan illustre très bien ce qu’une library apporte au développeur :

write less, do more

jQuery

Ajouter jQuery consiste à charger un script supplémentaire dans le fichier HTML.
C’est un fichier qui a déjà plein de fonctions écrites et dont on pourra se servir pour nos propres scripts (on ajoute donc ce script avant le script de notre propre fichier JS).

Tout comme en JavaScript, jQuery permet de cibler des éléments du DOM pour leur ajouter une action (événement, modification du CSS, etc.). Il permet aussi d’ajouter des animations pré-construites permettant de dynamiser encore plus le site.

jQuery UI

Cette bibliothèque logicielle permet entre-autre de venir compléter jQuery.
En effet, cette library apporte des interactions avec l’utilisateur, des widgets et des effets pré-construits qui ciblent plus particulièrement les formulaires (mais peuvent aussi être utilisées autrement !).
Elle propose aussi des thèmes dont on peut s’inspirer.

Bootstrap

J’en ai déjà parlé, Boostrap est un framework CSS.
Et c’est aussi une library JavaScript.
Elle fonctionne avec les scripts jQuery et PoperJS et permet d’ajouter de nombreux components aux pages HTML.
Ces derniers sont dynamiques, ils utilisent des classes spéciales ; ce qui évite donc d’ajouter des scripts perso.

FancyBox

Cette bibliothèque permet de créer un zoom en cliquant sur une image ou une vidéo et de faire un déroulé d’images.
Elle fonctionne simplement : les images sur toute la page sont de basse qualité. Puis quand on clique dessus, un effet zoom se déclenche et ouvre une image de qualité supérieure.
Cette library permet d’optimiser les temps de chargement des pages contenant de nombreux fichiers multimédias.

Masonry

Cette bibliothèque permet, lorsqu’il y a des images de tailles différentes, de réorganiser les éléments pour les placer de la meilleure façon.
Cette library recalcule donc les tailles de toutes les images.

Isotope

C’est une bibliothèque qui permet de faire du tri visuel dans les éléments.
(Elle permet aussi d’ajouter une mise en page d’images.
)

Hammer.js

Cette bibliothèque permet de gérer des gestures tactiles : elle créée de nouveaux événements entièrement dédiés au tactile.

Autres librairies 

  • Animate CSS et Anime JS
    Ces deux bibliothèques logicielles permettent d’ajouter des animations très poussées sur un site.
  • Leaflet
    C’est une library qui permet d’ajouter de la cartographie sur un site.
  • PixiJS
    Cette bibliothèque permet de faire de la gestion 2D pur les images, les jeux. C’est un moteur de rendus qui utilise les canvas.
    (elle est assez complexe à prendre en main, je la recommande à des développeur plus aguerris !).
  • AOS (Animate On Scroll)
    Comme son acronyme le mentionne, cette library permet d’ajouter des animations lors d’un scroll.
  • Container player
    C’est une bibliothèque qui permet d’ajouter des vidéos en background.
  • Progressively
    Cette library permet tout simplement de charger progressivement les images.

Voici donc un petit tour d’horizon des différentes libraries que j’ai pu voir lors de ma formation.
Si vous en connaissez ou utilisez d’autres, venez les partager en commentaires ! 🙂

Categories
Apprentissage CSS Formation Framework HTML Web

Bootstrap

Qu’est ce que c’est ?

Logo Bootstrap

Bootstrap est un Framework CSS.
Les frameworks sont des règles préétablies dans lesquelles on peut venir piocher. Ils permettent de simplifier la reprise du code par quelqu’un d’autre et de gagner du temps.

La base

Bootstrap est basé sur un principe de grilles.
On ne réfléchit plus en termes d’espacement, mais de colonnes de la grille à utiliser.
Bootstrap est basé sur 12 colonnes (car il y a de nombreux multiples possibles). Et entre les colonnes, il y a ce qu’on appelle des gouttières (ce sont les espacements entre les colonnes).

Par exemple, pour placer un élément sur toute la largeur de la page, on lui dit d’occuper 12 colonnes. Pour en placer 2, il faudra indiquer à chaque élément d’occuper 6 colonnes (ou en fonction de la disposition, par exemple 25% /75% deviendront 4 colonnes / 8 colonnes).

Les composants

Dans Bootstrap, il y a des composants : ce sont des outils CSS et JavaScript qui permettent d’ajouter directement dans la page de petits éléments (barres de recherche, pop up stylisé, etc.) déjà fonctionnels. L’inconvénient, c’est qu’on se retrouve rapidement avec les mêmes composants de partout (tous les sites se ressemblent alors !)
Il faut donc modifier le CSS pour styliser chaque élément à sa façon.

L’installation

Bootstrap est un fichier de style à charger.
Le téléchargement peut se faire sur le site de Bootstrap puis [Download].

Une autre méthode, plus simple, permet de ne pas télécharger Bootstrap (et donc d’alléger la page !) : ajouter directement au fichier HTML un lien vers le fichier Boostrap.
Toujours sur le site de Bootstrap, cliquez sur [Get Started] puis dans la section [Quick Start], récupérez le lien CSS à mettre dans le head du fichier HTML :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Il faut bien mettre ce lien avant celui de notre propre fichier de style CSS. En effet, nos règles CSS sont déclarées en dernier, elles seront donc prioritaires. Ce qui permettra de contrer celles de Bootstrap.

Comment fonctionne Bootstrap ?

Bootstrap permet de faire de la mise en page directement dans le fichier HTML (et avec très peu de règles CSS à ajouter).

Il y a des class prédéfinies que l’on peut ajouter au HTML. Elles permettent d’intégrer automatiquement des fonctionnalités aux balises ciblées.
On rajoute donc des class seulement s’il y a des modifications a apporter sur la balise.
La règle de nommage des class est : .nomdelaregle-taille-valeur

Bon à savoir : par défaut, tous les éléments Bootstrap ont des padding de 15px (les gouttières sont alors de 30px).

Breakpoints

Bootstrap intègre des breakpoints, permettant de rendre la page responsive automatiquement :
xs ou xtrasmall (< 576px) : .col-
Attention, cela correspond au mobile-first. Il sera donc la valeur par défaut (depuis la version 4 de Bootstrap)
sm ou small (>=576px) : .col-sm-
md ou medium (>=768px) : .col-md-
lg ou large (>=992px) : .col-lg-
xl ou xtralarge (>=1200px) : .col-xl-

Containers

Bootstrap est composé de deux containers généraux :
container fluid qui occupe toute la page

<div class="container-fluid"> </div>

container qui occupe la page avec un maximum de 1170px

<div class="container"> </div>

On utilise ensuite la notation des colonnes sur des éléments suivants.

Flex

Bootstrap est basé sur du flex. Il ne faut donc pas oublier de donner comme règle aux parents la class row (fait devenir flex sans prendre en compte l’espacement des cotés).
L’architecture des balises sera alors :
– grand parent => container
– parent => row
– enfant => col
Attention : il ne faut pas d’enfant row après un parent row.

Comme Bootstrap applique le style flex à la page, les class permettent d’appliquer toutes les règles du flex (elles sont toutes listées sur le site Bootstrap)

Alignement horizontal
justify-content-start
justify-content-center
justify-content-end

Le nomage se fait de la façon suivante :
.{propriété}-{breackpoint}-{valeur}
Par exemple :

<div class="row justify-content-start justify-content-lg-center"> </div>
Alignement vertical
 align-items-start
 align-items-center
 align-items-end

Par exemple :

<div class="row align-items-start align-items-lg-center"> </div>
Ordre les éléments
 order-2
 order-md-1

Ce qui permet de changer d’ordre et de le faire aussi en fonction de la taille de l’écran.

Saut de colonne

offset-nb : permet de placer un nombre (nb) de colonnes vides avant mon élément
offset-taille-nb : idem, en fonction de la taille de l’écran

Cela permet de faciliter la mise en page, car les calculs d’espacement se font tout seuls. cet outil gère automatiquement les espaces que doit avoir chaque élément et l’espace entre eux.

Remplacement du visible

C’est l’équivalent du display. il est noté d.

d-none : l’élément est caché
d-block : il est affiché

L’élément peut s’afficher ou se cacher en fonction de la taille de l’écran : d-lg-none ou d-lg-block

Espacement (padding / margin)

Le nommage se fait de la façon suivante :
.{propriété}{coté}-{breackpoint}-{taille}

Par exemple :

<div class="pr-md-0"> </div>

– propriété :
m margin
p padding

– coté :
a toutes les directions
t en haut
r à droite
l à gauche
b en bas
x horizontal (gauche et droite)
y vertical (haut et bas)

– breakpoint (cf. plus haut)
(rien) à partir de la taille mobile
sm
md
lg
xl

– taille
0
1 (0.25rem)
2 (0.5rem)
3 (1rem)
4 (1.5rem)
5 (3rem)

A savoir : il y a un gros gap entre 4 et 5. Il est donc possible de rajouter des règles CSS.
Pour rappel : l’unité de mesure rem est fonction de la taille du body.


Règles générales

Sans écrire une seule règle de CSS, on a déjà une mise en page en blocs avec des tailles différentes, etc.

Toutes les règles de mise en forme sont sur le site de Bootstrap.


Divers

Il est possible de modifier graphiquement les titres.
Il existe des classes qui permettent qu’un titre ressemble à un autre titre :

<h1 class="h2"> titre h1 qui ressemble à des h2 </h1>
<h2 class="h4"> titre h2 qui ressemble à des h4 </h2>
Categories
Apprentissage CSS Formation HTML Web

Un peu de « Responsive »

Le Responsive, qu’est ce que c’est ?

Aujourd’hui, nous utilisons beaucoup plus nos smartphones que nos ordinateurs. Nous nous sommes donc rendu compte que l’affichage sur ces 2 types d’écrans ne pouvaient pas être le même.

To be Responsive, or not to be ?

Le principe du Responsive est donc de créer du contenu qui va s’adapter à la taille de l’écran de l’utilisateur (il est possible alors de le faire varier un peu).
La logique, depuis ces dernières années, est de créer les pages en « mobile first ». C’est à dire les développer pour un affichage sur smartphones. Puis d’adapter le contenu pour les ordinateurs.
De plus, il faut garder à l’esprit que dans 94% des cas on utilise son mobile en mode portrait !

Comment ça marche ?

Dans un premier temps, et ce depuis HTML5, pour que les règles « Responsive » (ou Media Query) soient prises en compte, il faut obligatoirement ajouter dans le <head> de la page la meta suivante :

<meta name=”viewport” content=”width=device-width, initial-scale=1”/>

Dans un deuxième temps, dans le fichier CSS, on écrit toutes nos règles pour un affichage sur mobile. Puis à la fin on vient rajouter les nouvelles règles qui seront uniquement valables pour les autres tailles d’écran.

@media (taille écran) [
   selecteur {
      propriété1: valeur;
      ...
   }
   ...
}

On indiquera uniquement les propriétés qui sont modifiées par taille d’écran.
Les tailles d’écran (ou breakpoint) sont les suivantes :

Media Queries (tailles d’écrans)

Il est possible de cumuler les règles de « média query ». On a alors des créneaux de tailles d’écran. Et les règles ne s’appliqueront alors que pour ce créneau.
Par exemple :

@media (min-width:768px) and (max-width:960px) {
    // règles à appliquer uniquement pour les écrans ayant un largeur entre 768 et 960px
}

A noter qu’il est préférable de mettre les règles « Responsive » à partir des breackpoint (min-width), comme ça elles s’appliqueront pour toutes les tailles à partir de celle définie.

Pour aller un peu plus loin

Ratio de taille d’écran

On peut aussi mettre des règles en fonction d’un ratio de pixels de la taille d’écran :

@media (-webkit-min-device-pixel-ratio: 2) {
   // règles à appliquer
}

Par exemple pour les images, lorsque l’on augmente la taille de l’écran, la qualité de l’image peut devenir meilleure (haute def.)

Impression

Pour paramétrer précisément des impressions, on peut utiliser :

@media print { 
   // règles spécifiques pour l'impression
}

C’est dans le cas où l’utilisateur imprime la page (billetterie, facturation, devis, etc.). On peut indiquer des valeurs par défaut pour l’impression : noir & blanc pour diminuer l’utilisation des cartouches, imprimer uniquement ce qui est nécessaire, etc.

Categories
Apprentissage CSS Formation HTML Web

Animation des pages

Animation, vous avez dit animation ?

Animation ? Vous avez dit animation ?
Et oui, avec le CSS, il est possible d’animer des pages en donnant aux éléments du mouvement.

Qu’est ce qu’une animation en CSS ?

Il existe 3 concepts d’animations en CSS :

  • les transitions qui permettent le passage d’un état A à un état B. Elles nécessitent alors une action de l’utilisateur et se déclenchent seulement après,
  • les animations pour lesquelles l’action de l’utilisateur n’est pas nécessaire pour permettre le passage d’un état A à un état B,
  • et les transformations qui modifient l’aspect d’un élément.

A noter qu’il est aussi possible de mixer ces 3 concepts.

Pour les animations et les transitions, le passage d’un état A vers un état B peut donc se faire de 4 façons différentes :

  • linear : permet d’aller de façon constante de A vers B
  • ease-in : l’animation va lentement au début puis s’accélère dans le temps
  • ease-out : permet d’aller rapidement au début puis de ralentir
  • ease-in-out : l’animation va lentement puis rapidement puis ralenti.

Les transitions

Les transitions permettent de passer de manière fluide d’un état à un autre.
En CSS, une transition regroupe 4 paramètres :

transition-property : {propriété} ;
transition-duration : {valeur} ;
transition-timing-function : {valeur} ;
transition-delay : {valeur} ;

Dans le fichier CSS, il est possible d’écrire les propriétés les unes à la suite des autres. Ou bien en une seule ligne :

transition : {transition-property} {transition-duration} {transition-timing-function} {transition-delay}

La transition se met dans l’élément initial. Ce qui permet ensuite d’avoir la même façon d’être à l’aller et au retour.
Par exemple :

.mydiv {
      opacity : 0.25 ;
      color : #FFFFFF ;
      transition : opacity 0.5s ease-in 1s, color 1s 0.5s ;
}

.mydiv :hover {
      opacity : 1 ;
      color : #BBBBBB ;
}

Les animations

On considère une animation comme étant un passage d’un état à un autre sans intervention de l’utilisateur.
Elles doivent alors être déclarées avant d’être utilisées.

Il y a deux types de déclarations :

  • Lorsque l’on passe de l’état A à l’état B directement
from {
      // propriétés
}

to {
    // propriétés
}
  • Ou bien, lorsque l’on passe par plusieurs étapes entre les 2 états. On indique alors un pourcentage de temps écoulé avant que l’animation ne se lance (va de 0 à 100%)
0% {
      // propriétés
}
35% {
      // propriétés
}
100% {
      // propriétés
}

Les différentes propriétés que l’on peut appliquer à une animation sont les suivantes :

animation-name : {monAnimation};
animation-duration : {temps};
animation-delay : {temps};
animation-iteration-count : {nombre};
animation-direction : {valeur}; 
animation-mode : {valeur};
  • animation-name : permet de récupérer l’animation déclarée auparavant
  • animation-duration : indique combien de temps dure l’animation (en secondes)
  • animation-delay : c’est le délai avant le lancement de l’animation (en secondes)
  • animation-iteration-count : indique combien de fois l’animation s’exécute (soit un nombre soit à l’infini (infinite))
  • animation-direction : défini comment se passe l’animation.

Ses valeurs sont alors :
    normal   : va de 0 à 100% puis recommence à l’infini
reverse    : va de 100 à 0% puis recommence à l’infini
alternate : s’anime dans les 2 sens (effet yoyo)
alternate-reverse

  • animation-mode : détermine comment l’animation se comporte

Ses valeurs sont alors :
    none   : arrête l’animation, ne respecte plus ses règles et reprend les règles de l’élément
backwards : va reprendre les règles définies à 0%
forwards : va reprendre les règles définies à 100%
both  : va reprendre les règles du moment où l’animation s’est arrêtée

Dans le fichier CSS, on peut aussi écrire une animation sur une seule ligne :

animation : {animation-name} {animation-duration} {animation-delay} {animation-iteration-count} {animation- direction} {animation- mode}

Les transformations

Les transformations modifient l’état d’un élément. Il existe différents types de transformations.

L’élément peut se déplacer dans l’espace (en pixel, les valeurs peuvent être négatives) en utilisant la propriété translate.

transform : translate(x,y); 
            translateX(valeur);
            translateY(valeur) ;

On peut aussi changer l’échelle de l’élément (qui est par défaut de 1) en le faisant soit grandir, soit rapetisser. On utilisera alors la propriété scale.

transform : scale(x,y) ;    
            scaleX(valeur) ;
            scaleY(valeur) ;

Il est aussi possible de faire faire des rotations à un élément (selon l’axe des X, des Y ou des Z). On utilisera la propriété rotate (dont la valeur est en degrés).

transform : rotateX(valeur) ;
            rotateY(valeur) ;
            rotateZ(valeur) ;  

A noter que 360° correspond à un tour complet.

Enfin, on pourra déformer un élément sur son axe des X ou des Y en utilisant la propriété skew (sa valeur est en degrés).

transform : skew(valeur) ;
            skewX(valeur) ;
            skewY(valeur) ;         

Il y a la possibilité de mettre plusieurs transformations sur un même élément. Il faudra alors mettre un espace entre chaque.
Par exemple:

transform : scale(2) translate(20px) ;

Toutes les transformations se font par rapport au point d’origine de l’élément.
Il est alors possible de changer ce point en utilisant : transform-origin .

Categories
Apprentissage CSS Formation HTML Web

Flexbox

Flexbox est un module de « boites » CSS qui a été conçu pour aider la mise en page des pages web.
Les éléments sont alors considérés comme des boites (ou blocs) que l’on peut facilement disposer sur une ligne ou une colonne.

Flexbox doit être appliqué à l’élément parent pour que l’élément enfant direct puisse en hériter.
Son appel se fait de la façon suivante :

.parent {
    display : flex ;
}
.enfant {
   propriété : valeur ;
}

Quelles sont ses propriétés ?

Il existe différentes propriétés de Flexbox pour mettre en forme les éléments. Et il est important de bien les placer (dans l’élément parent ou enfant) pour que les règles s’appliquent correctement.

Propriétés de l’élément parent

Les propriétés suivantes sont à mettre dans l’élément parent.

visualisation de justify-content

Répartition horizontale
Elle permet de répartir les éléments enfants sur l’axe horizontal.

justify-content : flex-start; : commence au début du parent.
justify-content : flex-end; : commence par la fin du parent.
justify-content : center; : centre horizontalement par rapport au parent.
justify-content : space-evenly; : réparti dans tout l’espace du parent.

visualisation de align-items

Répartition verticale
Elle permet de répartir les éléments enfants sur l’axe vertical.
align-items : flex-start; : commence en haut du parent.
align-items : flex-end; : commence en bas du parent.
align-items : center; : centre verticalement par rapport au parent.
align-items : stretch; : réparti sur l’axe vertical du parent.

Visualisation de flex-direction

Répartition des éléments entre eux
Elle permet de répartir les éléments enfants les uns par rapport aux autres.
flex-direction : row;: les éléments se répartissent sur une ligne dans l’ordre croissant d’écriture.
flex-direction : row-reverse; : ils se répartissent sur une ligne dans l’ordre décroissant d’écriture.
flex-direction : column; : les éléments se répartissent sur une colonne dans l’ordre croissant d’écriture.
flex-direction : column-reverse; : ils se répartissent sur une colonne dans l’ordre croissant d’écriture.

visualisation de flex-wrap

Répartition sur plusieurs lignes
C’est l’empaquetage : les éléments se répartissent en ligne.
flex-wrap: nowrap; : tous les éléments sont sur une seule ligne avec un espace équivalent (la taille initiale des éléments n’est plus prise en compte).
flex-wrap: wrap; : permet de créer plusieurs lignes. En fonction de leur taille, les éléments passent à la ligne lorsqu’il n’y a pas assez de place.
flex-wrap: wrap-reverse; : c’est la même fonction que précédemment, sauf que la ligne se créée au-dessus.

Propriétés de l’élément enfant

Certaines propriétés sont à mettre dans l’élément enfant.
La plus utilisée est la suivante :

Taille
Cette propriété permet de pouvoir ajuster la taille d’un élément précis (après avoir appliqué un flex-grow au préalable).

flex-grow : nombre;
visualisation de flex-grow

C’est un ratio : tous les éléments ont initialement une taille de « 1 ».  Si on applique un flex-grow de 2 sur un élément, cela veut dire que cet élément a 2 fois la taille des autres éléments.

Il existe d’autres propriétés qui sont consultables sur le site css-tricks ou sur celui de MDN.


Pour aller plus loin

Ce module n’est pas encore reconnu par tous les navigateurs, il faut donc ajouter des préfixes pour chaque propriété utilisée (ces derniers sont amenés à disparaître lorsque la règle sera bien intégrée par les navigateurs – vérifiable sur le site shouldiprefix.com).

Les préfixes sont les suivants :
-webkit- :  pour Chrome et Safari (sachant que Chrome est le navigateur le plus utilisé en France !)
-ms- : Internet Explorer, Microsoft Edge
-moz- : Firefox
-o- : pour les anciennes versions d’Opera

Par exemple :

balise {
   -webkit-justify-content : center ;
   -ms-justify-content : center ;
   justify-content : center ;
}
Categories
Apprentissage CSS Formation Web

Un peu de CSS (suite)

Logo CSS 3

Un peu de CSS (la suite !)…
Les cours sur le CSS se suivent et ne se ressemblent pas ! 😉

Après avoir vu les bases de mises en page en CSS, nous abordons dans la suite du post les notions pour agencer les éléments sur la page.

L’occupation de l’espace

En CSS, il est possible de définir quel espacement / place occupera un élément sur la page. Pour cela, on utilise la propriété « display » que l’on peut alors appliquer à n’importe quel élément.
Ses différentes valeurs sont :
display : block; : l’élément occupe tout l’espace (c’est le cas des balises div ou p par exemple).
display : inline; : l’élément occupe juste l’espace nécessaire et permet que les éléments soient les uns à côté des autres (c’est le cas des balises span par exemple).
display : initial; : l’élément reprend sa valeur par défaut.
display : inherit; : l’élément prend la valeur de ses parents (il en hérite !)
display : inline-block; : combine les propriétés du inline et du block. Sur l’espacement déterminé par le inline, il est alors possible de modifier les espacements autour grâce aux propriétés du block.
display : none; : cache l’élément.
display : flex; : apparu avec HTML5, il permet de créer de nouvelles façons de mettre en page (nous verrons ce sujet plus tard !).

La flottaison des éléments

Sur les balises de type block (ou lorsque l’on ajoute un display : block; à un élément), il est possible de modifier la position de l’élément avec la propriété « float ».
Avec cette propriété, on peut alors mettre les « blocks » en ligne et faire en sorte qu’ils se placent les uns à côté des autres.
Ses valeurs sont :
float : none; : retour à l’état initial.
float : left; : les éléments se placent les uns à côté des autres en partant de la gauche, jusqu’à la ligne suivante.
float : right; : ils se placent les uns à côté des autres en partant de la droite, jusqu’à la ligne suivante.
clear : both; : casse la ligne de flottaison (retour à la ligne).

Pour que la flottaison ne s’applique qu’à l’enfant, il est important de rajouter à l’élément parent la propriété suivante : overflow : auto;

Les espacements

De base, tous les éléments sont les uns à côté des autres. Une bordure vient ensuite agrandir la taille de base des éléments. Cette bordure créée des espacements que l’on peut styliser en leur appliquant une dimension (généralement en pixel).
Le padding est un espacement interne. Il s’ajoute à la taille de l’élément. De plus, il ajoute de l’espacement à l’intérieur de l’élément et garde donc les propriétés de cet élément.
Le margin est un espacement externe. Il s’ajoute aussi à la taille de l’élément. Comme il ajoute de l’espacement à l’extérieur de l’élément, il ne garde pas les propriétés de cet élément.

Il est aussi possible de spécifier une dimension pour chaque côté (top, right, bottom, left) séparément, ou deux à deux (top+bottom, right+left) ou la même dimension pour tous les côtés.

Calculs mathématiques

Si on ne peut pas déterminer de façon exacte une valeur d’espacement, il est possible de la calculer directement dans la propriété (par exemple 1/3 ou 1/5, etc.). On utilise alors la fonction « calc ».
Par exemple : width : calc(100% / 3);

Il existe une propriété qui permet de supprimer tous les espacements internes : box-sizing : border-box;
On ajoute alors cette propriété à tous les éléments au début du fichier CSS, ce qui permet de rajouter du « padding » et des bordures dans que leurs tailles soient prises en compte dans le calcul de la largeur totale.

Les bordures

Chaque élément détient une bordure (qui agrandit aussi la taille de l’élément). On peut aussi styliser :
– son épaisseur avec border-width : valeur; (ici la valeur est définie de la même manière que pour les espacements)
– son style :
border-style : none;  il n’y a pas de trait
border-style : solid;  la bordure est un trait plein
border-style : dotted;  c’est un trait pointillé
border-style : dashed;  ici c’est un trait en petits tirets
border-style : double;  la bordure est un double trait plein
– sa couleur avec border-color : value; (ici la valeur est définie comme pour les couleurs).

Il est aussi possible d’écrire toutes les propriétés pour les bordures sur une seule ligne (à condition que les 4 côtés aient les mêmes caractéristiques) :

border : width style color;
Le positionnement

Chaque élément peut voir son positionnement modifié grâce à la propriété « position ».
position : static; : c’est la position de base de l’élément.
position : relative; : elle permet de déplacer l’élément horizontalement par rapport à lui-même, tout en conservant son espace initial. Il faut alors indiquer dans une seconde ligne de combien de pixels on déplace l’élément et si on le déplace à gauche ou à droite.

position : relative;
left : 10px;

position : absolute; : l’espace alloué à l’élément est libéré. L’élément vient alors se positionner par rapport au premier élément parent qui est en position relative.
position : fixed; : l’élément se positionne de façon fixe par rapport au navigateur. Ce qui permet que lorsque l’on scroll l’élément reste toujours visible !

Mise en forme

On peut appliquer une mise en forme spéciale sur les éléments.

ombres

Il est possible d’ajouter une ombre externe autour de l’élément. On applique alors la propriété box-shadow. Cette dernière aura 4 valeurs  (dans l’ordre de déclaration) :
– décalage sur l’axe horizontal en pixel
– décalage sur l’axe vertical en pixel
– flou de l’ombre, du contour
– indication de combien de pixels s’étend l’ombre par rapport à la taille de l’élément
– couleur de l’ombre
Pour faciliter la visualisation de l’ombre et sa déclaration, on passera par un éditeur tel que CSSMatic.

arrondis

On peut créer des bords arrondis pour les éléments (ayant une couleur de fond ou une bordure). On utilise alors :

border-radius : valeur;

À noter : il est aussi possible de créer un rond à partir d’un élément carré en lui mettant un « border-radius » à 50%.

dégradés

Il est possible d’appliquer aussi une couleur de fond dégradée (qui passe d’une couleur à une autre)

background : linear-gradient(to right, couleur1 0%, couleur2 100%);
polices spéciales

On peut utiliser des polices spéciales que l’on viendra ajouter directement en haut du fichier CSS, on parle généralement de @font-face.
Il est important de bien vérifier que la typographie choisie est bien libre de droit (ou qu’elle a bien été payée !) avant de l’utiliser sur sa page.
De plus il faut noter qu’il existe différents formats de typographie. Et tous ne sont pas obligatoirement reconnus sur les navigateurs. Les principaux formats rencontrés sont :
TTF / OTF / WOFF / WOFF 2.0 / SVG / EOT

Il existe 2 façon de récupérer des typographies :
– en utilisant un générateur en ligne qui permet de convertir une police donnée dans différents formats (on peut citer par exemple : Font Squirrel).
On ajoutera la police dans le fichier CSS de la façon suivante :

@font-face {
    font-family : "Name";
    /* règles récupérées via le générateur */
}

– en utilisant les polices proposées par Google Fonts.
Ici, il suffit de choisir sa police, la sélectionner puis de la Customize (choisir uniquement les tailles que l’on souhaite charger). Ensuite, en cliquant sur « Embed », les liens à ajouter s’affiche. Google Fonts donne la possibilité de rajouter le lien, soit dans le fichier HTML (dans le <head>) soit dans le fichier CSS (on selectionnera uniquement la ligne commençant par @import que l’on mettra en haut du fichier CSS).

Il existe aussi une police spécifique aux icônes que l’on peut trouver sur Material Design Icons.
Dans ce cas, on insère directement le lien de référence dans le <head> du fichier HTML :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Puis, toujours dans le fichier HTML, on insère l’icone à l’endroit prévu en utilisant une nouvelle balise :

<i class="material-icons"> android </i>

Dans le cas ci-dessus, c’est l’icone « android » qui s’affichera. Il suffit donc de changer le nom entre les balises pour modifier l’icone affichée.


Il existe aussi des façons plus rapides pour désigner les éléments sur le fichier CSS. Nous en avons vu 2 différentes.

Les sélecteurs avancés

Pour faciliter la désignation des éléments (et donc éviter de mettre des class de partout !), il existe différents sélecteurs avancés qui permettent de sélectionner les éléments par rapport à leur hiérarchie.

  • Cible directe : parent > enfant
    Permets de sélectionner les enfants directs du parent.
  • Sélecteur adjacent : élément1 + élément2
    Sélectionne uniquement l’élément 2 qui est tout de suite après l’élément 1 (même s’il y a plusieurs éléments 2 après l’élément 1).
  • Sélecteur successeur : élément1 ~ élément2
    Permets de sélectionner tous les éléments 2 qui suivent l’élément 1 pour un même parent.
  • Cibler certains enfants:
    le 1er enfant : parent :first-child
    le dernier enfant : parent :last-child
    le n-ième enfant : parent :nth-child(no) (le no correspond à la place ciblée).
    A noter : l’espace avant les deux-points correspond à un lien de parenté. Sans espace, c’est alors l’élément direct qui est ciblé.
  • Ciblage par rapport à un type de balise
    balise :first-of-type : cible le 1er type de la balise
    balise :last-of-type : cible le dernier type de la balise.
Les pseudo-classes

On peut aussi donner des états différents en fonction de ce que fait l’utilisateur sur la page. Il en existe 5 différents :
élément:focus {   }
Lorsque l’utilisateur sera focalisé sur un champ de formulaire, ce dernier changera d’état selon les propriétés ajoutées.
élément:hover {   }
Dès que l’utilisateur passe la souris sur l’élément, celui-ci change d’état.
élément:active {   }
Au moment où l’utilisateur clique sur l’élément, il change d’état. Cela s’arrête lorsque l’utilisateur lâche le « click ».
élément:disable {   }
tant que la « réponse » précédente n’a pas été donnée, l’élément reste non accessible (grisé).
élément:normal-state {   }
C’est l’état initial de l’élément.


Voici donc toutes les bases de mise en forme utilisables en CSS.
La prochaine notion que j’ai ensuite abordée lors de ma formation est FLEXBOX.
À voir lors du prochain post…! 😉

Categories
Apprentissage CSS Formation HTML Web

Un peu de CSS

Un peu de CSS (Cascading Style Sheets)… pour styliser les éléments !

Logo CSS3

Dans les années 1996, un nouveau langage descriptif a été mis en place pour améliorer l’affichage des pages HTML : le CSS.
En ciblant les balises HTML, le CSS permet de leur apporter de nouvelles propriétés (couleur, hauteur, largeur, couleur de fond, etc.).

Au final, la page HTML s’affichera non plus comme une suite de ligne, mais comme une page mise en forme de façon agréable à regarder  !

Comment l’ajouter ?

Il y a différentes façons de rajouter du CSS à une page HTML.
Par exemple, il est possible de l’ajouter directement dans le code HTML en utilisant sur les balises ciblées l’attribut « style ».

<balise style = "propriété1 : valeur1; propriété2 : valeur2; ..."> </balise>

Celle qui sera favorisée sera d’externaliser le fichier. Pour cela, on rajoute une balise <link> dans le <head> de la page HTML.

<head>
   <link rel="stylesheet" href="style.css">
</head>

Et comment ça marche ?

Sur le fichier externe .css, l’objectif est de cibler les balises HTML visées par le changement de mise en forme.
Si le ciblage n’est pas assez pointu, on utilisera le principe de « classes ». C’est un attribut (class) que l’on donne aux éléments pour les distinguer des autres. Il permet aussi de regrouper des éléments qui n’ont pas de balise commune.

<balise class="nom"> </balise>

.nom {   }

À noter qu’il est possible d’ajouter différentes classes a un élément HTML.

Les différentes façons de cibler les éléments sont les suivantes :
– une balise

balise {   }

– une classe

.class {   }

– un identifiant

#id {   }

Il est possible de cibler les éléments en fonction de leur lien de parenté. Pour cela, on écrit chaque élément avec un espace :

<div class="principal">
   <p> blabla <span> blabla </span></p>
   <span> blabla </span>
</div>
.principal p span {   }
/* on cible les balises span contenues dans les balises p qui appartiennent à la class "principal" */

Pour cibler deux (ou plus) éléments différents, on les écrit avec une virgule entre chaque.

balise1, .class, balise2 {   }

Les propriétés CSS

Couleur

Il y a 3 possibilités de renseigner une couleur :
– son nom en anglais (par ex. : red)
– sa valeur hexadécimale (par ex. #FF0000)
– la notation RGB. Cette notation représente le spectre lumineux et indique l’intensité du rouge R, du vert G et du bleu B (par ex. RGB(255,0,0).

Il est possible de récupérer les valeurs des couleurs spéciales grâce à un color picker (disponible sur Google).

On peut aussi gérer l’opacité de la couleur en ajoutant au mode RGB une 4ème valeur « A ». Cette valeur va de 1 : opaque à 0 : transparent.
On la note : RGBA(255, 0, 0 0.5) <– ici le rouge aura une opacité de 50%.

Attention : l’opacité est une valeur décimale, il faut bien penser à mettre un point et non pas une virgule !

Typographie

Il existe différentes propriétés que l’on peut utiliser pour gérer la typographie des textes.

– la couleur de texte (avec la même notation que vue précédemment).

color : valeur;

– le type de famille de typologie. Il est important de penser à mettre différentes typologies au cas où le navigateur ne puisse pas en charger certaines. Il est possible de retrouver les typologies prises en charge par la plupart des navigateurs sur internet : voir les « safe font« .

font-family : helvetica, sans-serif;

– la taille de la typographie.

font-size : 12px;

Il existe différentes unités de mesure : pixels, points, pourcentage.
Avec CSS3, une nouvelle unité de mesure est apparue : em. Elle donne une proportion par rapport à la taille de l’élément parent (1em correspond à une unité de la taille du parent).

– l’épaisseur des lettres.

font-weight : bold;   /*écriture en gras */
font-weight : bolder;  /*écriture en plus gras */

– la décoration du texte.

text-decoration : underline;  /* souligné */
text-decoration : line-through;  /* barré */

– mettre le texte en italique.

font-style : italic;

– changer la casse du texte.

text-transform : uppercase;  /*majuscule */
text-transform : lowercase;  /*minuscule */
Arrière-plan

En CSS, on peut ajouter directement une image de fond.

background-image : url("fichier.png");

Il est possible d’indiquer sa position.

background-position : x y;  /* x correspond à la longueur et y à la largeur */

La position peut aussi être généraliste en utilisant comme valeurs : left (à gauche), right (à droite), center (centré), top (en haut), bottom (en bas).

La taille de l’image peut être ajustée.

background-size : x y;  /* x correspond à la longueur et y à la largeur */

Les valeurs x et y sont exprimées en pixels ou en pourcentage.
La taille peut s’ajuster automatiquement en gardant le ratio d’origine en utilisant « auto » comme valeur.

Il est aussi possible de faire en sorte que l’image se répète.

background-repeat : valeur;

Ici les valeurs sont les suivantes :
– repeat : l’image se répète sur toute la largeur et la longueur de la page.
– repeat-x : l’image se répète uniquement de façon horizontale.
– repeat-y : l’image se répète uniquement de façon verticale.
– no-repeat : l’image ne se répète pas.

Il est possible de faire chevaucher plusieurs images de fond.

background-image : url("image1.png"), url("image2.png");

Dans ce cas, l’image 1 s’affichera en premier et l’image 2 s’affichera  derrière.

Pour simplifier l’écriture, on peut écrire toutes les propriétés sur une seule ligne.

background : url("image.png") position / size repeat ;

Voici les premiers concepts sur CSS que j’ai appris lors de ma formation.
Je continuerai dans les prochains posts… Le CSS est très fourni et demande d’acquérir de nombreuses notions ! 🙂

Categories
Apprentissage CSS HTML Web

Changement de langage

Je poursuis mon apprentissage dans l’optique de devenir développeuse web… Et pour ça, j’ai changé de langage !
En effet, pour pouvoir coder les sites web il faut impérativement que je connaisse les langages adaptés au web : notamment HTML et CSS.

Langage HTML

Le HTML (HyperText Markup Language ou Langage de balisage d’hypertexte) a été créé en même temps que le World Wild Web, dans les années 1990. Ce n’est pas un langage de programmation. Il permet d’écrire du texte en hypertexte. Ainsi que de mettre en forme du contenu grâce à des balises. Ces balises définissent où mettre des titres, des sous-titres, du texte en gras. Elles définissent aussi où ajouter des éléments interactifs (photos, vidéos, liens, etc.). La visualisation d’une page écrite en HTML se fait uniquement via un navigateur.
Après de nombreuses évolutions, ce langage de balisage propose depuis 2014 une version plus aboutie : le HTML5.

Langage CSS

Le CSS (Cascading Style Sheets ou Feuilles de style en cascade) est apparu en même temps que le HTML. C’est une feuille de style qui définit comment les éléments de la page HTML doivent être affichés sur l’écran (police de caractère, couleur, alignement, etc.). 

Vers 2010, le langage évolue vers sa 3ème version : CSS3.

Le CSS est complémentaire au HTML, ils fonctionnent de concert. C’est pour cette raison qu’il est important de les étudier en même temps.
Il est bon de noter que ces 2 langages sont améliorés et approuvés au fil de temps par le W3C (World Wild Web Consortium, thème que j’aborderai dans un prochain post !).

Leur apprentissage

Pour ce faire, j’ai suivi un cours sur OpenClassrooms : Apprenez à créer votre site web avec HTML5 et CSS3
Dans ce cours, j’ai appris les fondamentaux pour créer une page web. Et j’ai créé un CV fictif pour mettre en application ce nouvel apprentissage : celui de Marie Curie ! 😉
Ce cours permet de donner de bonnes bases sur ces deux langages. Il est simple et permet de mettre rapidement en application ce qu’on a appris.

Mon conseil 

Lors de l’apprentissage de ces 2 langages, l’important est de prendre des notes. En effet, lorsqu’on débute, il est difficile de se souvenir de toutes les balises. Or l’utilisation et le positionnement de ces balises sont très importants pour avoir un code lisible et structuré.
Il est impératif d’avoir un dossier commun contenant le fichier .html, .css, les images et polices spéciales. Sinon la page html ne s’affichera pas correctement !


Je vous mets mes deux codes qui permettent d’afficher le CV de Marie Curie que j’ai réalisé. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylecv.css" />
        <title>Mon CV - Marie Curie</title>
    </head>

    <body>
        <nav class="lisere">
            <p>
                
            </p>
        </nav>
        
    	<header>
           <a href="marie_curie.jpeg"><img src="marie_curie_mini.jpg" class="image" alt="portrait de marie curie" title="cliquez pour agrandir la photo !" /></a> <!-- image-->
            <div class="titre"> <!-- titre-->
                <h1>Marie Curie</h1>
                1867-1934<br/>
      		    Première femme a avoir reçu le prix Nobel de Chimie pour ses travaux sur le polonium et le radium.
            </div>
    	</header>


    	<section id="corps">
            <div class="experience">
    	       <h2>Son Expérience</h2>
    	       <ul>
                    <li><strong>1893</strong> : Obtention de la licence en Sciences Physiques</li>
        			<li><strong>1894</strong> : Obtention de la licence en Sciences Mathématiques</li>
        			<li><strong>1896</strong> : Première au concours d'agrégation pour l'enseignement des jeunes filles - section Mathématiques</li>
        			<li><strong>1897-1903</strong> : Thèse intitulée Recherches sur les substances radioactives</li>
        			<li><strong>1903</strong> : Prix Nobel de Physique (reçu conjointement avec Pierre Curie, son mari, et Henri Becquerel)</li>
        			<li><strong>1911</strong> : Prix Nobel de Chimie (<a href="https://fr.wikipedia.org/wiki/Marie_Curie#/media/Fichier:Marie_Sk%C5%82odowska-Curie's_Nobel_Prize_in_Chemistry_1911.jpg">diplôme accompagnant le prix Nobel</a> )</li>
        		</ul>
            </div>
            <div class="competence">
        		<h2>Ses Compétences</h2>
        		<ul>
                    <li>Mathématiques</li>
        			<li>Physique</li>
        			<li>Chimie</li>
        			<li>Découverte du polonium</li>
        			<li>Découverte du radium</li>
                    <li>Liste non exhaustive !</li>
                </ul>
            </div>
            <div class="formation">
        		<h2>Sa Formation</h2>
        		<ul>
                    <li><strong>1883</strong> : diplôme de fin d’études secondaires avec la médaille d’or</li>
        		    <li><strong>1891</strong> : études de Physique à la Faculté des Sciences de Paris</li>
                </ul>
            </div>
    	</section>

    </body>
</html>
/* polices spéciales */

@font-face 
{
	font-family: "gothic";
	src: url("Elementary_Gothic.otf") format("opentype"),
		 url("Elementary_Gothic.ttf") format("truetype");
}

@font-face
{
	font-family: "summertime";
	src: url("SummertO.ttf") format("truetype");
}

/* En Tête */

header
{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	height: 10%;
	max-width: 90%;
	position: relative;
	left: 10%;
}

.image  /* image avec bordure et ombre */
{
	margin: auto;
	border: 6px navy double;
	box-shadow: 8px 4px 6px blue;
	width: 60%;
	height: 60%;
}

.titre
{
	margin: auto;
	text-align: center;
	color: gray;
	font-size: 1em;
	font-style: italic;
}

h1  /* titre de couleur différente, centré et avec police spéciale */
{
	font-family: "gothic", Impact, Georgia, Verdana, sans-serif;
	font-weight: bold;
	color : gray;
	text-align: center;
}

/* Liseré */

.lisere   
{
	position: absolute;
	left: 1px;
	top: 1px;
	width: 10%;
	height: 100%;
	background: url("fondchimie.png") repeat-y center;
	border-right: 1px teal solid;
	border-radius: 6px/8px;

}

/* Corps de Texte */

body
{
	font-family: Arial, "Times New Roman", sans-serif;
}


#corps
{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	max-width: 90%;
	position: relative;
	left: 10%;
}

div
{
	margin: top;
	width: auto;
	min-width: 33%;
}

ul  /*ne pas afficher les puces*/
{
	list-style-type: none;
}

h2  /* mise en forme titre h2*/
{
	font-family: "summertime", Impact, sans-serif;
	font-size: 2em;
	font-style: italic;
	color: teal;
	text-align: center;
}

/* style des liens */
a
{
	color: blue;
}
a:hover
{
	text-decoration: underline;
	color: aqua;
}


/* affichage sur des écrans plus petits que 1024px */

@media screen and (max-width: 1024px)
{
	.lisere
	{
		display: none;	/* suppression du liseré */
	}

	#corps
	{
		display: flex;
		flex-direction: column;
	}
}