Explication des langages web par Laurel Schwulst :
Workshop PrePostPrint Chercher, manipuler, partager, imprimer, strabic, Antoine Fauchié, 29 juin 2017
« Le même contenu a deux formes différentes mais complémentaires, produites par le même outil : un navigateur web, connecté à internet d’un côté, et capable de générer un PDF de l’autre. Il n’y a pas la nécessité d’utiliser plusieurs logiciels, d’effectuer des opérations complexes pour passer d’une version “numérique” à un fichier imprimable, mais simplement du logiciel le plus utilisé : un navigateur web. »
Schéma réalisé par Raphaël Bastide :
Schéma réalisé par Loraine Furter :
Le HTML (pour HyperText Markup Language) est le langage de balisage conçu pour représenter les pages web. Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques.
Pour faire simple, un fichier .html va permettre de communiquer à votre navigateur Internet comment interpréter tel ou tel type de contenu (ceci sera un titre très important, cela un paragraphe, etc.)
Pour structurer un fichier .html on utilise des balises (il en existe une grande quantité) dans lequel on écrit le contenu de la page.
Dans un fichier .html, les balises sont structurées comme ceci :
< nom-de-la-balise > contenu </ nom-de-la-balise >
hypertexte : Un hypertexte est un document ou un ensemble de documents informatiques qui permet de passer d'une information à l'autre grâce à un système de renvois appelés hyperliens, ou liens hypertextes.
Le CSS (pour Cascading Style Sheets ou Feuille de style en cascade en français) est un langage de programmation déclaratif. Il permet d'attribuer des styles sur les balises en HTML, un peu comme les styles dans Indesign. Pour chaque balise, il est possible d'assigner différentes propriétés et de leur attribuer une valeur.
Dans un fichier .css les styles sont appelés comme ceci :
nom-de-la-balise{propriété : valeur;}
À chaque balise HTML il est possible d’attribuer un id et des class afin de cibler l'élément et lui appliquer des styles CSS spécifiques.
Les class permettent de cibler plusieurs éléments HTML à la fois alors qu'un id est spécifique à un élément du document.
Fichier .html :
< nom-de-la-balise class="nom-de-la-classe" > contenu </ nom-de-la-balise >
Fichier .css :
nom-de-la-balise.nom-de-la-classe{propriété : valeur;}
Fichier .html :
< nom-de-la-balise id="nom-de-l-id" > contenu </ nom-de-la-balise >
Fichier .css :
nom-de-la-balise#nom-de-l-id{propriété : valeur;}
Ici le résultat de cet exemple.
Les media queries sont des extensions du langage de mise en forme CSS permettant de faire varier la composition visuelle des pages web en fonction du support sur lequel elles sont affichées : ordinateur, téléphone, tablette, vidéoprojecteur et papier.
Il existe quatre types de media queries :
Dans un fichier .css, un media print s'écrit comme ceci :
@media print{}
Cette déclaration spéciale entoure toute les autres déclarations et c’est là ça particularité par rapport aux autres déclaration css. Il vous faut donc redéclarer un nouveau style si vous voulez une variation par rapport à la declaration screen par exemple.
Avec la règle @page vous pouvez définir le format et les marges de la page.
Dans un fichier .css, un media screen s'écrit comme ceci :
@media only screen and ("min ou max"-width:"nombre de pixel"px){}
Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage viewport soit inférieure à 1450px :
Pour importer des images, puisque vous ne pouvez pas intervenir sur le html, une solution s'offre à vous qui consiste à utiliser la propriété CSS background-image qui vous permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.
Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe :hover, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
Liste de toutes les pseudo-classe ici
On écrit un pseudo classe comme ceci:
.nom-de-la-classe:pseudo-classe
Il est possible de travailler l’animation de certaines propriétés CSS (en voici la liste). Il faut tout d'abord décrire son animation en haut de votre fichier CSS avec @keyframesen décrivant le nom de votre animation et ses différentes étapes. Ensuite votre animation est appelée dans votre classe par la propriété animation où vous pourrez décrire entre autres le temps, la répétition et la vitesse de votre animation.
Ici une liste de propriétés permettant de faire des animations en CSS.
Pendant cette journée nous allons explorer l'adaptation d'un contenu à différents supports. À partir d’un contenu HTML composé de 10 div, nous appliquerons plusieurs styles CSS en jouant avec les media queries screen et print. Le navigateur interprétera automatiquement le style approprié, selon que nous consultions la page en ligne ou que nous générions une version papier.
Pour commencer, vous pouvez télécharger le dossier zip de la structure HTML en cliquant ici, puis le décompresser pour accéder aux fichiers nécessaires. Vous trouverez un fichier CSS en guise de démo.
Règles du jeu :