Un site web utilise l’infrastructure d’Internet, qui est une infrastructure physique.
Un site web, c’est simplement un dossier sur un serveur, auquel on accède grace à un navigateur web qui va se charger, via un URL, d’aller récuperer les fichiers demandées et de les décoder. Voici un lien vers une présentation didactique qui explique le parcours d’une requête depuis votre ordinateur jusqu’au serveur, et vice-versa.
La fonction principale des navigateurs Web est de convertir les réponses des serveurs en formats pouvant être consultés par les utilisateurs. En général, si la réponse est au format HTML, le navigateur la décode et l'affiche, puis procède au décodage des ressources liées, telles que les fichiers CSS, JS, les polices, les images, les vidéos et les sons.
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.
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
<a>contenu</a><b><b.1>contenu</b.1><b.2>contenu</b.2></b><c>contenu</c>
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 commencce, et où ça finit.
<a>contenu</a>
<b>
<b.1>contenu</b.1>
<b.2>contenu</b.2>
</b>
<c>contenu</c>
<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
Une présentation pas à pas de la mise en forme sur le web.
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.
position: static
position: static
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.
position: relative
position: relative;
left: 30px;
top: -30px;
left: 30px;
top: -30px;
position: static
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.
position: relative
position: absolute;
left: 0;
top: 0;
left: 0;
top: 0;
position: static
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.
position: relative
position: fixed;
left: 0;
bottom: 0;
left: 0;
bottom: 0;
position: static
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.
position: relative
position: sticky;
top: 0;
bottom: 0;
top: 0;
bottom: 0;
Le défilement se poursuit, mais l’élément en
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.
Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement Élement
Un élément inline prends la taille de l’élément qui le contient. Il n’a pas de dimension en soi.
Voici un bloc dans texte dans lequel il y a un élément span, qui est par défaut en inline.
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.
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: 1
flex: 1
Flex
La mise en page devient fluide et permet de gérer facilement les éléments.
Guide complet sur CSS Tricks
flex: 1
width: 200px;
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
