1. Livres & vidéos
  2. Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web (5e édition)
  3. Le Web
Extrait - Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web (5e édition)
Extraits du livre
Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web (5e édition) Revenir à la page d'achat du livre

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...

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.

images/ARI01.png

Les balises <p></p>...

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....

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...