Le langage du web
Le HTML, le CSS et le JS s’occupent de deux choses différentes, car le web ne fonctionnait à l’origine qu’à travers le HTML. Le reste est arrivé plus tard.
Le premier site web, réalisé par Tim Berners-Lee pour faciliter l’échange entre les chercheur·euse·s du CERN (Organisation européenne pour la recherche nucléaire), 1993
Les langages
HTML
HyperText Markup Language
C’est la structure sémantique et le contenu de la page. Elle est constitué de balises qui indiquent le type de contenu qu’elles contiennent, et du contenu. Les balises peuvent s’imbriquer
On a besoin de balises pour indiquer au navigateur le début et la fin d’un bloc. Il faut s’imaginer que le code est lu en une ligne. Il faut – un peu comme un majuscule et un point – des repères pour savoir où ça commence, et où ça finit.
<b>
<b.1>contenu</b.1>
<b.2>contenu</b.2>
</b>
<c>contenu</c>
CSS
Cascading Style Sheet
Permet la mise en forme du HTML, en manipulant, à l’aide de sélecteurs, des élements spécifiques.
JS
Javascript
C’est ce qui permet l’interactivité dans une page (hormis les événements de survol, réalisable en CSS). Elle se charge après, et peux modifier le CSS et le HTML.
Mettre en forme le contenu
Le positionnement
Une grande partie de la complexité de la conception web réside dans la manière dont le positionnement des éléments est géré, en particulier par rapport à la conception graphique. Cependant, avec les bonnes méthodes, il est possible de tirer parti de fonctionnalités qui rendent la conception fluide et précise.
La position static est la valeur par défaut pour tous les éléments HTML et ne modifie pas la manière dont l'élément affecte le flux du document.
La position relative, tout comme la position statique, ne modifie pas la manière dont l'élément affecte le flux du document, mais contrairement à la position statique, elle crée un nouveau contexte, ce qui signifie que l'élément n'est pas simplement positionné par défaut.
left: 30px;
top: -30px;
La position absolute, quant à elle, supprime l'élément HTML du flux du document, ce qui signifie que ni sa taille ni son positionnement n'interfèrent avec les autres éléments HTML. Sa position est définie par rapport à l'élément parent positionné le plus proche (s'il existe) ou par rapport au document.
right: 0;
top: 0;
La position fixed, tout comme la position absolute, supprime l'élément HTML du flux du document, mais contrairement à la position absolute, son positionnement est relatif à l'écran. C’est le bloc visible depuis le début de la présentation.
right: 0;
bottom: 0;
La position sticky agit de la même manière que la position relative et ne modifie donc pas la façon dont l'élément affecte le flux du document. Mais contrairement à la position relative, l'élément sera fixé à une position définie à l'écran, dans le parent positionné le plus proche (s'il y en a un) ou dans le document.
top: 0;
sticky reste selon les valeurs top données.La propriété Display
Par défaut, les éléments HTML sont organisés dans le flux du document de deux manières différentes : soit en block, soit en inline. Cette valeur est définie par la propriété CSS display.
La valeur block positionne les éléments verticalement les uns par rapport aux autres, en commençant par le coin supérieur gauche. Il s'agit du comportement par défaut de la plupart des éléments HTML conteneurs, comme le div
La valeur inline positionne les éléments les uns par rapport aux autres, horizontalement, en commençant par le coin supérieur gauche. Par défaut, lorsque l'élément parent est rempli sur toute sa largeur, l'élément enfant suivant est repositionné à gauche, sous la première ligne. Cette disposition transpose la disposition de l'écriture dans le code et constitue donc le comportement par défaut des éléments de texte (caractères unicode) ou span.
C’est un élément qui s’inscrit dans une chaîne de caractère, un peu à la manière du style de caractère dans un logiciel de mise en page.
Grid et flex
Cependant, ces deux types de mise en page par défaut sont assez restrictifs dans de nombreux cas, et le langage CSS offre désormais de nombreuses autres possibilités, dont certaines sont particulièrement bien adaptées aux mises en page complexes : flex et grid.
Ces deux types de mise en page sont définis au niveau de l'élément parent, puis influencent le positionnement des éléments enfants en fonction d'autres valeurs définies par le développeur. Ces valeurs sont nombreuses et peuvent avoir une influence très fine sur le positionnement des éléments, même si elles peuvent parfois être complexes à utiliser au premier abord.
Flex
flex est utilisé dans tous les autres contextes, c'est-à-dire dans tous les contextes où la taille des éléments est plus flexible que dans une grille. Schématiquement, le positionnement flexible est unidimensionnel.
Flex
La mise en page devient fluide et permet de gérer facilement les éléments.
Guide complet sur CSS Tricks
Grid
grid est utilisé dans tous les contextes où des éléments doivent être positionnés sur une grille, avec un certain nombre de colonnes et/ou de lignes de tailles définies. Schématiquement, le positionnement en grille est bidimensionnel.
On définit, en addition de display: grid, la disposition que l'on souhaite pour les éléments à l'intérieur. Ici, on utilise grid-template-columns: 1fr 1fr 50px;. On peut aussi l'écrire grid-template-columns: repeat(2, 1fr) 50px;, ce qui signifie : 2 colonnes qui prennent tout l'espace disponible, et 1 colonne de 50px.
Grid
C’est un outil puissant, mais il faut prendre le temps de l’appréhender. Des générateur permettent de créer facilement des grilles.
Guide complet sur CSS Tricks
Le site de la DCA propose, à chaque nouveau chargement, une composition entièrement générée avec la propriété grid
Le site de la DCA propose, à chaque nouveau chargement, une composition entièrement générée avec la propriété grid