Editions ENI Livres | Vidéos | e-Formations
Le Web
Qu’est-ce que le Web ?
Tous les utilisateurs d’Internet ont l’habitude d’aller sur leurs sites favoris ou sur un moteur de recherche pour accéder au contenu qui les intéresse.
En tant qu’utilisateur, lorsque vous utilisez notre navigateur web (Edge, Chrome, Firefox, Safari, Opera...), vous êtes du côté client. Les informations, les textes et les images qui sont affichés sur le navigateur côté client viennent d’un ordinateur, situé quelque part sur la planète : le serveur.
1. Côté serveur : HTTP, FTP, langages, SQL
Ce que l’on appelle un serveur est simplement un ordinateur sur lequel sont installés certains outils ou programmes qui vont lui permettre de disposer de nouvelles fonctionnalités. Cet ordinateur est obligatoirement relié à Internet et autorise d’autres ordinateurs à lui poser des questions.
Le protocole de communication utilisé pour le Web est HTTP (Hypertext Transfer Protocol, protocole de transfert hypertexte).
Petite parenthèse sur le mot hypertexte, puisque ce mot fait également partie de l’acronyme HTML (Hypertext Markup Language). Lorsque l’on parle d’hypertexte, cela signifie que l’on a une certaine quantité d’informations (aujourd’hui ce n’est plus uniquement du texte), qui est stockée dans ce que l’on appelle un nœud. Tous les nœuds sont en relation avec d’autres nœuds pour parcourir les informations. Nous verrons plus loin que les nœuds pour le HTML sont écrits à partir de balises.
C’est grâce à ce protocole que des règles sont établies pour permettre la communication entre le client et le serveur. D’où la présence de « http »...
Les langages et leur utilité
1. HTML
Nous n’allons pas rentrer dans les détails de l’historique et l’évolution du langage HTML. Ce qu’il faut savoir sur ce langage, c’est qu’il s’écrit avec des balises qui fonctionnent souvent par paire, indiquant respectivement le début de l’action de la balise et sa fin.
Une balise est constituée d’un mot, « p », « b », « table », « input », etc. qui est précédé d’un signe inférieur (<) et suivi d’un signe supérieur (>) pour identifier le contenu auquel ces balises s’appliquent.
Il existe de nombreuses balises avec un rôle bien précis pour chacune. Ces mots, « p » ou « b » ou d’autres, indiquent la fonction de la balise.
Par exemple, la balise <b> permet de mettre le texte en gras (en anglais : bold) et la balise <p> permet de créer un paragraphe. Elles fonctionnent toutes de la même manière, avec une balise d’ouverture indiquant le début de l’action et une balise de fermeture indiquant la fin du gras ou la fin du paragraphe. Ici, un paragraphe contenant le texte : Toto va à la plage.
<p>Toto va à la plage</p> La balise de fermeture se retrouve après la balise d’ouverture. Pour un texte mis en gras en ajoutant la balise <b>, il faudra ensuite ajouter la balise </b> pour indiquer la fin du gras. De la même manière, il faudra fermer le paragraphe avec la balise de fermeture </p>. La balise de fermeture comprend le signe divisé « / » (en anglais slash) qui est ajouté avant le nom de la balise pour la différencier de la balise d’ouverture.
Ce qui donne par exemple :
<p>Toto va à <b>la plage</b></p> Dans cet exemple, le paragraphe contient la phrase entière, mais seuls les deux mots « la plage » seront écrits en gras.
Résultat : Toto va à la plage
Pour approfondir cet exemple, il faut noter l’imbrication des balises, à la façon de poupées russes les unes à l’intérieur des autres.
Les balises <p></p> englobent tout le texte, les balises <b></b> sont à l’intérieur du paragraphe.
Il n’est JAMAIS autorisé d’avoir une balise dont la balise d’ouverture se trouve à l’intérieur d’une paire de balises et la balise de fermeture se trouve à l’extérieur de cette même paire.
Erreur :
<p>Toto va à <b>la </p>plage</b> Ainsi, il existe des balises qui fonctionnent souvent par deux, qui s’imbriquent les unes dans les autres et qui ont une fonction particulière.
Mais toutes les balises ne fonctionnent pas par paire. Regardons par exemple la balise <br /> (broken row) qui va « casser la ligne », autrement dit permettre le retour à la ligne sans créer de saut de ligne supplémentaire, ou bien la balise <img />, qui va afficher une image. Dans ces deux cas, c’est...
Les formats d’images
Même s’il est possible de créer de magnifiques visuels en HTML5 et CSS3, il sera toujours indispensable d’utiliser des fichiers images permettant d’agrémenter la page, d’illustrer un texte avec un schéma, ou simplement de mettre une photo.
Il existe de nombreux formats d’images. Certains formats sont plutôt utilisés dans le monde de l’impression car ils ont une très bonne définition mais sont très lourds. Quand on s’intéresse au Web, il est certain que l’on souhaite utiliser des images de bonne qualité, mais si possible les plus légères possible.
Il existe deux méthodes pour créer une image sur un ordinateur.
1. Format Bitmap
Ceux qui connaissent l’anglais auront compris d’après le nom qu’il s’agit d’une carte ou d’un plan (map) constitué de 1 et de 0 (bit).
Pour cela, imaginons un quadrillage représentant un tableau de 100 cases sur 100 cases, soit l’équivalent d’une image de 100 pixels sur 100 pixels.
Chaque case peut avoir une valeur qui sera soit 0, soit 1. Si l’on remplace maintenant le 1 par du blanc et le 0 par du noir, nous obtenons une image Bitmap, en noir et blanc, qui équivaut à ce que l’on voyait sur les ordinateurs au siècle passé.
Heureusement, nous ne sommes pas restés au noir et blanc.
Après n’avoir utilisé qu’un bit par pixel, la norme a évolué pour accepter un octet par pixel (un octet, octo, huit). Autrement dit, il n’y a plus seulement un bit par pixel, mais 8 bits.
Un octet est une unité de mémoire de l’ordinateur qui sait mémoriser une valeur comprise entre 0 et 255. On remarque parfois que certains curseurs ne nous permettent de choisir qu’une valeur comprise entre 0 et 255. Dans ce cas, on sait que l’ordinateur utilise un octet de mémoire pour ce paramètre.
Dans cette configuration, le fichier Bitmap contient au maximum 256 couleurs (de 0 à 255).
Suite à cela, le format a encore évolué pour cette fois-ci utiliser non pas un octet, mais trois octets, puis quatre.
Les trois octets sont répartis entre les trois couleurs de base utilisées par les écrans : le rouge, le vert et le bleu. Dans cette configuration, nous avons donc une couleur qui est définie par 256 niveaux de rouge différents, combinés à 256 niveaux de vert différents et autant de bleu.
On arrive ainsi à plus de 16 000 000 de couleurs, ce qui permet de rendre de très jolies photos ou dessins, avec des dégradés précis, du contraste et une profondeur dans les couleurs très appréciable.
Nous voici donc avec trois octets pour gérer les couleurs. Il peut y en avoir plus, mais cela n’est pas intéressant pour un affichage sur le Web.
Vous verrez peut-être des images avec non pas un octet pour le rouge le vert et le bleu, mais deux octets par couleur. C’est ce qui va être appelé une image 16 bits par couche, où une couche est donc une couche de rouge, une autre de vert et une dernière de bleu. Ces images ont une quantité de couleurs vertigineuse. Écrivez...
Les navigateurs et leurs outils
Cette partie va aborder un outil qui est très important et pratique pour développer, il s’agit de la fenêtre d’aide au développement. Certaines des explications de cet outil demandent de connaître un minimum le CSS et JavaScript, dans la mesure où il va nous aider à corriger nos erreurs et faciliter le travail. Même si à ce niveau du livre tout ne sera pas totalement compréhensible, l’idée est de présenter ici l’outil et de penser à l’utiliser à n’importe quelle étape du livre !
Selon le système d’exploitation sur lequel on travaille, on pourra utiliser certains navigateurs. L’idéal étant pour un webmaster d’en utiliser plusieurs, les plus courants, et de tester s’il n’y a pas de différence d’affichage d’un navigateur à l’autre.
Les navigateurs les plus répandus sont Chrome, Firefox, Edge, Opera et Safari.
Aujourd’hui, les dernières versions des navigateurs sont toutes relativement respectueuses des règles énoncées par le W3C pour définir le Web, si bien qu’on n’a plus trop de grosses surprises en passant d’un navigateur à un autre. Par contre, tel navigateur va savoir lire les fichiers MP3 et tel autre préférera un autre format audio, comme OGG. Il faudra donc, si on souhaite mettre un peu de son sur le site, utiliser le navigateur qui lit le format MP3 et avoir notre fichier audio au format MP3, mais il faudra également avoir le navigateur qui lit les fichiers OGG et notre son converti au format OGG pour pouvoir tester si tout fonctionne correctement sur chaque navigateur.
Une des fonctionnalités que l’on trouve dans tous les navigateurs récents est un accès facilité à une zone du code.
Une page HTML, lorsqu’elle est finie, fait régulièrement plus de cent lignes. Et quand on cherche un endroit précis dans cette page, même si le code est bien écrit, il peut falloir un certain temps pour retrouver la ligne de code qui nous intéresse. Aujourd’hui, quand on regarde une page d’un site web, on a accès à une fonction permettant d’examiner l’élément.
Si on clique avec le bouton droit de la souris en ayant le pointeur de la souris à un endroit précis d’une page HTML, dans le menu contextuel qui apparaît on aura l’option Inspecter l’élément ou Examiner l’élément ou peut-être Procéder à l’inspection de l’élément. Cela va ouvrir une fenêtre d’aide au développement, ancrée dans la partie basse du navigateur. Elle permet d’avoir accès à beaucoup d’informations contenues dans la page courante.
On trouvera dans la partie droite de cette fenêtre d’aide au développement les styles...
