1 - WEB et HTML

1 - Navigateurs

2 - Notepad++

3 - 1er balises

4 - Internet/Web

Cette partie présente une introduction à l'HTML et présente surtout du vocabulaire qui pourra être utile par la suite.

I – Navigateur et langages

Le navigateur reçoit des instructions (un code HTML, CSS …) et l’interprète en affichant (correctement ou non) du texte, des images, des vidéos …

Les navigateurs sont nombreux et possèdent tous des qualités et des défauts par rapport aux autres. Les plus connus actuellement sont certainement Firefox de Mozilla, Chrome de Google et Edge de Microsoft (le successeur d’Internet Explorer). Safari reste une référence sur les machines Apple.

La plupart des navigateurs mobiles sont des versions adaptées à ce support des logiciels précédents. On notera que la consultation du Web sur mobile est en train de dépasser celle sur ordinateur. Il va donc falloir s'adapter à ce support et vérifier que le site créé soit bien lisible sur ce format ou le format tablette.

On donnera un rapide aperçu de l’HTML et du CSS :

HTML (HyperText Markup Language) fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et d’organiser le contenu. HTML sert à définir clairement le type de données que vous allez afficher à l’écran.

HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
HTML 2 : cette version du HTML apparaît en 1994 et cette fois les règles sont établies par une organisation,le W3C .
HTML 3 : cette version date de 1996 et on y trouve plusieurs ajouts (tableaux, applets, scripts,…)
HTML 4 : apparaît en 1998 et propose plusieurs améliorations (dont l'utilisation de frames) et surtout, cette version permet d’utiliser le CSS : la forme de la page n’a plus à être mélangée avec son contenu.
HTML 5 : La dernière version pour l’instant.

CSS (Cascading Style Sheets, aussi appelées Feuilles de style) permet lui de gérer l’apparence des données précédentes : la couleur, la taille, le positionnement … Il est apparu en 1996.

CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc.
CSS 2 : apparue en 1999 cette version rajoute de nombreuses options.
CSS 3 : la dernière version, qui apporte des fonctionnalités comme les bordures arrondies, les dégradés, les ombres, flex etc.

On notera qu'à l'époque, on codait le fond et la forme dans le même fichier. On peut aujourd'hui clairement séparer les deux et continuer à mélanger les deux revient à mettre de côté tous les avantages offerts par le CSS. Par contre, de nombreux sites amateurs, conçus avant cette séparation continuent à exister sur le Web et restent compatibles avec les navigateurs actuels. C'est toute la force de ce langage.

II – Le logiciel à utiliser

Un code HTML n’est qu’une suite de données : une suite très codifiée d’ordres alphanumériques. L’ordinateur ne peut en aucun cas « comprendre » le code : il le déchiffre caractère par caractère contrairement à un humain. Par conséquent, la moindre erreur rend l’instruction incompréhensible pour lui..

Le code HTML n’est au final qu’un simple texte. Le bloc-note peut suffire pour créer ce code. Mais nous allons utiliser Notepad++ qui présente de multiples avantages dans l’édition et le suivi des multiples pages de code.

Une fois le code tapé, il faut en vérifier l’exécution à l’aide d’un navigateur. Attention cependant, un même code peut s’afficher différemment en fonction du navigateur.

Exemple avec la page d'accueil de la partie ICN avec (dans l'ordre) Edge, Firefox et IE11 .

Edge :

Firefox :

IE :

Comme on peut le voir, un même code n'est pas interprété de la même façon.

01° Ouvrir Notepad++. Choisir un encodage UTF-8 ainsi que HTML comme langage (chercher dans les menus).

02° Notez sur plusieurs lignes le texte que vous voulez afficher :

Phrase sur la première ligne.

Phrase sur la deuxième ligne.

Contenu permettant la mise en emphase.

Ceci est une partie importante.

Là, je veux vraiment que personne ne le manque.

Si votre navigateur affiche mal les accents :

Vous avez tapé du texte dans Notepad++.

03° Enregistrez le fichier sous format .html et exécutez le (soit en double cliquant sur votre fichier ou à travers le menu Exécution de Notepad++) pour voir le résultat.

On constate que le HTML sait afficher du texte (quelle surprise !) Par contre, le navigateur n’a pas compris que vous vouliez partir à la ligne. Il affiche les phrases à la suite des autres : votre code n’est pour l’instant constitué que de texte, il manque les instructions d’affichage : le fait d’avoir fait des passages à la ligne dans le fichier HTML ne change rien à l’affaire : le navigateur ne les « voit » pas. Pour lui, c’est un peu comme si vous aviez tout tapé sur la même ligne.

III – Les premières balises : les balises texte de base

Les balises et leurs chevrons < >, voilà ce qui va structurer le code et donner des informations à votre navigateur.

En HTML, les indications sont toujours définies par des balises.

Les balises d’instructions ou d’informations vont souvent par paire : la première indique l’instruction à suivre et à partir de où elle commence, et le seconde signale la fin de l’instruction. La seconde contient d’ailleurs un slash ( / ) supplémentaire pour bien la distinguer de la première.

04° Modifiez la première ligne de votre code comme indiqué ci-dessous, sauvegardez et relancez pour voir ce que cela change. Le surligneur n’est là que pour comprendre qu’on a une balise de début et une balise de fin.

<h1>Phrase sur la première ligne.</h1>

Voilà quelques exemples de balises :

<h1> fermée par </h1> : les balises de titre principal.
fermée par : les balises de paragraphes.
fermée par : les balises d’emphase (une mise en relief, une insistance)
fermée par : les balises de mise en exergue plus forte (renforcement)
fermée par : cette balise marque un passage spécifique, que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention.

Il existe beaucoup de balises différentes que nous allons utilisées. Chacune d’elle apporte au navigateur soit une information sur le contenu (texte, image, vidéos, fichiers, liens …), soit la nature du contenu (titre, liste d’éléments, paragraphe normal, élément important … ).

05° Utiliser les balises suivantes sur une ligne à la fois pour voir la différence de traitement :

<h1>Phrase sur la première ligne.</h1>

Phrase sur la deuxième ligne.

Contenu permettant la mise en emphase.

Ceci est une partie importante.

Là, je veux vraiment que personne ne le manque.

06° Remplir le tableau suivant :

Balise	<h1>	<p>	<em>	<strong>	<mark>
Passage à la ligne ?
Augmentation de la taille ?
Italique ?
Gras ?
Surligné ?

Il existe également de plus vielles balises pour mettre en gras ou en italique. C’est encore de l’anglais : les balises pour bold et pour italic. Nous expliquerons la différence avec et plus loin dans le chapitre.

Parfois, on désire afficher une liste. Nous disposons alors de deux types possibles de liste : la liste ordonnée (avec des numéros) et la liste normale (pas ordonnée, sans numéro).

Si la liste est ordonnée (comme les explications de montage d'un meuble), on la crée avec des balises <ol> et </ol>, ol pour Ordered List.

Si la liste n’est pas ordonnée (comme une liste d'achats), on la crée avec des balises <ul> et </ul>, ul pour Unordered List.

Les éléments d’une liste sont à donner entre des balises <li> et </li>.

Voilà un exemple de liste ordonnée :

<ol>

<li>Rentrer en classe</li>

<li>Travailler</li>

<li>Sortir de la classe</li>

</ol>

On voit bien que la première ligne signale l’ouverture d’une nouvelle liste ordonnée.

Les trois lignes suivantes précises à chaque fois la nature des éléments de la liste.

La dernière ligne précise la fermeture de la liste ordonnée.

On obtient en fonction du navigateur et du CSS derrière :

Accueil
Partie 1
Partie 2

Autre exemple :

Exemple de liste ordonnée : pour équilibrer une équation de combustion

<ol>

<li>On équilibre le carbone C</li>

<li>On équilibre l’hydrogène H</li>

<li>On équilbre l’oxygène O</li>

</ol>

On obtient en fonction du navigateur et du CSS derrière :

Exemple de liste ordonnée : pour équilibrer une équation de combustion

On équilibre le carbone C
On équilibre l’hydrogène H
On équilbre l’oxygène O

Exemple de liste non ordonnée : les éléments composant un atome sont

<ul>

<li>Proton(s)</li>

<li>Neutron(s)</li>

<li>Electron(s)</li>

</ul>

On obtient en fonction du navigateur et du CSS derrière :

Proton(s)
Neutron(s)
Electron(s)

07° Rajouter une liste ordonnée et une liste non ordonnée sur votre page.

Remarque 1 : Si vous annotez correctement vos balises, vous pouvez cliquer sur elles dans Notepad++ et les deux balises parentes se colorient. C’est pratique pour comprendre l’imbrication des éléments.

Remarque 2 : Vous pouvez cliquer sur l’icône + ou – en début de ligne pour replier ou déplier le code de la balise. Ainsi, on peut gagner en visibilité sur la structure d’une page en repliant les balises dont on ne désire pas connaître.

08° Rajouter une balise mark sur l’un des mots de l’un de vos paragraphes .

Normalement, vous devriez avoir un code du type :

Ceci est la phrase sur laquelle je veux mettre un élément en balise mark

Et qui devrait rendre quelque chose comme :

Ceci est la phrase sur laquelle je veux mettre un élément en balise mark

Remarque 3 : On ne peut donc pas ouvrir et fermer les balises dans n’importe quel ordre :

On commence par donc il faut finir par .

Ainsi … … … est une structure correcte : englobe bien .

Par contre, … … … n’est pas une structure correcte : et sont imbriquées l’une dans l’autre sans que l’une englobe l’autre.

Il reste à voir comment insérer un commentaire qui sera présent dans le code mais qui ne sera pas affiché à l’écran.

Les commentaires dans un fichier HTML sont indiqués par … des chevrons. Les voici :

Le début du commentaire est codé par <!--.

La fin de la zone de commentaire est codée par -->.

09° Rajouter un commentaire signalant où se trouve le début de votre code et un autre pour signaler le début de votre liste. Le commentaire devrait apparaître en vert dans Notepad++ et ne devrait pas apparaître sur la page affichée par le navigateur.

Et si nous tentions d’expliquer sur le site ce que nous venons d’apprendre ?

10° Rajouter le texte suivant dans votre code et observer le résultat :

Pour insérer un paragraphe, il faut taper Mon paragraphe et voilà, c'est tout simple

...CORRECTION...

Et oui : le navigateur interprète votre texte

taper Mon paragraphe

comme une balise de début et une balise de fin de paragraphe. Ainsi, il le voit comme un code et pas comme un simple texte à afficher.

Conclusion : il existe certains caractères que vous ne pourrez pas afficher dans votre page simplement en les tapant dans Notepad++ : les chevrons en sont un exemple.

Autre exemple : imaginons que vous vouliez afficher du texte dans lequel plusieurs espaces se suivent :


					1 espace_2 espaces__3 espaces___4 espaces____5 espaces_____6 ?
					1 espace 2 espaces  3 espaces   4 espaces    5 espaces     6 ?

Vous devriez vouloir utiliser un code du type : :

1 espace_2 espaces__3 espaces___4 espaces____5 espaces_____6 ?

1 espace 2 espaces 3 espaces 4 espaces 5 espaces 6 ?

11° Utiliser le code présenté juste au dessus dans Notepad++ puis regarder le résultat obtenu via le navigateur de votre choix.

...CORRECTION...

Raté : l’espacement n’est pas conservé. Le navigateur ne garde qu’un seul espace entre deux caractères affichables (les lettres, les chiffres et les caractères de ponctuation en gros).

Comment faire ? Et bien, si on veut utiliser les caractères spéciaux de l’HTML, il faut les noter différemment si on désire que le navigateur les interprète comme code ou plutôt qu’il les affiche simplement à l’écran comme un simple caractère.

Donc, certains caractères posent problème à l’HTML car ils font partie de sa gestion du code. Plutôt que de les noter au clavier, nous allons écrire un code HTML qui veut dire : si tu lis ce code, affiche le caractère correspondant.

Voilà la correspondance pour les caractères spéciaux à gérer :

Nom FR	En Anglais	Caractère	Code HTML	Code décimal	Code Hexa
Inférieur	Lower than	<	<	<	<
Supérieur	Greater than	>	>	>	>
Esperluette	Amperstand	&	&	&	&
Espace insécable	Non-Breaking Space

On vous donne la version texte HTML (<), la version décimale (<) ou la version hexadécimale (<).

Voilà donc trois versions du code à écrire pour afficher correctement le code HTML à l’écran sans que le navigateur ne l’interprète :

Version 1 : Pour insérer un paragraphe, il faut taper Mon paragraphe et voilà, c'est tout simple

Version 2 : Pour insérer un paragraphe, il faut taper Mon paragraphe et voilà, c'est tout simple

Version 3 : Pour insérer un paragraphe, il faut taper Mon paragraphe et voilà, c'est tout simple

On notera qu’on place un # devant les deux derniers codes pour préciser que le code est numérique. On place en plus un x devant le code hexa.

12° Essayer les trois versions puis rajouter respectivement des balises mark, em et strong autour de ce qui doit s’afficher sous la forme et .

Vous devriez avoir un affichage du type :

...CORRECTION...

Version 1 : Pour insérer un paragraphe, il faut taper Mon paragraphe et voilà, c'est tout simple

Version 2 : Pour insérer un paragraphe, il faut taper Mon paragraphe et voilà, c'est tout simple

Version 3 : Pour insérer un paragraphe, il faut taper Mon paragraphe et voilà, c'est tout simple

Attention, certains caractères sont très similaires à l’affichage mais ne seront pas interprétés correctement par votre navigateur. Voici quelques caractères spéciaux et notamment les caractères de guillemets. Vous remarquerez que les caractères (décimaux) 8249 et 8250 ressemblent très fortement aux chevrons (inf et sup) utilisés pour les balises HTML.

Nom FR	En Anglais	Caractère	Code HTML	Code décimal	Code Hexa
Euro	Euro	€	€	€	€
Dièse	Number sign	&		#	#
Guillemet française simple ouvrant		‹	&lsaquo;	‹
Guillemet française simple fermant		›	&rsaquo;	›
Guillemets française double ouvrant		«	«	«
Guillemets française double fermant		»	»	»
Guillemets anglaise double ouvrant		“	&daquo;	“
Guillemets anglaise double fermant		”	&daquo;	”
Guillemets double	Double quotes	"	"	"	"
Guillemet simple	Single quote	'		'	'

13° Créer une page où vous présentez un super article que vous voulez vendre. Il faudra mettre le prix en euros et ainsi utiliser le code permettant d'afficher le symbole.

Au fait, comment fonctionne ce code hexadécimal ?

Rappel : LE CODE HEXADECIMAL

Le principe est de compter en base 16.

Le 0 vaut 0

le 1 vaut 1

le 2 vaut 2

le 3 vaut 3

le 4 vaut 4

le 5 vaut 5

le 6 vaut 6

le 7 vaut 7

le 8 vaut 8

le 9 vaut 9

Et ensuite, c'est embêtant, car il n'existe plus de chiffres différents...

Alors, on utilise des lettres :

le a vaut 10

le b vaut 11

le c vaut 12

le d vaut 13

le e vaut 14

le f vaut 15

Ainsi, le nombre 12 en décimal se note (12)₁₀ pour bien comprendre qu'on est en base 10.

En hexadécimal, en base 16 donc, on aurait simplement (c)₁₆.

Lorsqu’on a plusieurs chiffres hexadécimaux à la suite c’est plus compliqué :

Le plus à droite est à multiplier par 1.

Le suivant est à multiplier par 16.

Le suivant est à multiplier par 256 (ou 16 puissance 2).

Le suivant est à multiplier par 4096 (ou 16 puissance 3).

A titre d’exemple, regardons les deux codes numériques de l’euro : &#8364; et €

On voit que le code est 8364 en base 10 et 20ac en hexadécimal. Vérifions :

Nombre M =	2	0	a	c
La case code	4096	256	16	1
On obtient	2*4096	0*256	10*16	1121

Cela donne 2x4096 + 0x256 + 10x16 + 12 = 8192 + 0 + 160 + 12 = 8364 !

Voilà pourquoi il existe deux codes disponibles : il y a un code où le nombre est écrit en décimal et un code où le code est écrit en hexadécimal.

Si vous voulez laisser des espaces entre certaines parties (passer une ligne en gros), il va falloir créer une présentation CSS adaptée. Pour l’instant, nous ne savons pas gérer le CSS. Nous allons donc employer les gros moyens : nous allons voir notre première balise orpheline.

Qu’est-ce qu’une balise orpheline ? C’est une balise solitaire : on n’a pas besoin de refermer l’instruction avec une seconde balise.

Pour forcer le passage à la ligne, il suffit de rajouter:  .

Je vous autorise à l’utiliser pour l’instant mais nous la mettrons de côté (sauf cas particulier) lorsque nous aborderons le CSS.

14°Placer quelques balises   (orphelines attention) de façon à avoir quelques passages à la ligne.

Résumons :

Le saut de ligne n’est pas implanté de base dans la reconnaissance du texte. Pour faire sauter le texte, il faut fermer par une balise titre, paragraphe ou ligne. Dans le pire des cas, on peut utiliser une balise  .

Les balises ,  et  permettent de signaler l’importance d’une partie du texte.

Les balises  permettent de signaler qu’on désire un paragraphe. Le début du texte est donc sur une nouvelle ligne et la fermeture de la balise entraîne un passage à la ligne.

Les balises <h1> à <h6> indiquent la présence d’un titre, h1 représentant un titre plus important sémantiquement que h6.

Les balises <ol> et <li> permettent de créer des listes ordonnées.

Les balises <ul> et <li> permettent de créer des listes non ordonnées.

Certains caractères spéciaux sont à gérer si on veut les faire afficher sur l’écran : on utilise un code d’affichage plutôt que les signes sup, inf, & et l’espace.

Si on veut afficher < à l'écran, il faut taper < dans le texte du paragraphe.

Le passage à la ligne se fait automatiquement au début ou à la fin d’une balise  ou <h1/>. On peut rajouter des lignes à l’aide de l’aide de la balise orpheline   mais on gérera plus tard l’espace entre les paragraphes à l’aide du CSS.

Finalement les balises  permettent d’insérer des commentaires qui ne seront ni affichés ni interprétés.

Nous avons maintenant les connaissances de base nous permettant de voir comment structurer notre première page html.

C'est dans le chapitre suivant.

IV – Internet et Web

Partie optionnelle : c'est assez technique. Un résumé global sera fait en classe entière.

Attention : cette partie contient beaucoup d'approximations, de petits mensonges ... de façon à simplifier les explications. Cela permet d'avancer plutôt que de pinailler sur trop de détails.

Internet est composé de l’ensemble des communications permettant l’utilisation des messageries, des navigateurs web et des logiciels de communication.

Il ne faut donc pas confondre Internet et le Web. Le Web constitue l’ensemble des pages affichées par les navigateurs mais il ne s’agit donc que d’une partie des communications qui s’opèrent sur Internet.

A la navigation sur les sites, il faut rajouter les messageries via email, les messageries instantanées, les communications visuelles, le peer-to-peer …

1.1 - Adresse IP

Pour communiquer, il faut connaître l’adresse I.P de l’ordinateur concerné. IP veut dire Internet Protocol.

Cela vous mène jusqu’à la machine voulue.

Les adresses version 4 (Ipv.4) sont composées de 4 octets qui comportent chacun 8 bits. On obtient donc un espace total de 32 bits valant 0 ou 1.

Les octets sont séparés par des points :

Exemple d’adresse IP v4 en binaire :

1010 1100

0000 1000

1111 1110

0000 0010

Comme noter l’octet avec ses 8 bits est un peu long à taper et source d’erreur, on ne donne habituellement pas la valeur de l’octet en binaire mais en décimal : un nombre compris entre 0 et 255 (souvenez-vous de l’histoire de 2 à la puissance 8 donnant 256 possibilités).

Même adresse IP v4 en décimal :

172

254

15° Pourriez-vous vérifier que l’octet de gauche 1010 1100 correspond bien à 172 ?

Un peu d'aide avec un cas presque similaire :

Pour transformer un nombre binaire en nombre en base 10 (notre base naturelle puisqu’on a 10 doigts), il faut savoir que :

Le bit le plus à droite est nommé le bit de poids faible car il code uniquement 1.
Le bit juste d’à côté code 2.
Celui d’encore après code 4
...

Voilà un exemple pour un nombre binaire de 8 bits (on appelle cela un octet), M = 1010 1011.

Nombre M =	1	0	1	0	1	0	1	1
Les bits codent	128	64	32	16	8	4	2	1
On obtient donc	128		32		8		2	1

D'ou la valeur de M en base 10 : M = 128 + 32 +8 + 2 + 1 = 171.

On peut donc écrire que M = ( 171 ) ₁₀ = ( 1010 1011 ) ₂

Si vous bloquez, vous pouvez faire un tour dans la partie FICHES, vous y trouverez une fiche sur le binaire :

Binaire

Avec 32 bits, on a 2³² adresses IPv4 différentes, soit plus de 4 milliards. Néanmoins, avec l’augmentation du nombre d’objets connectés, les adresses Ipv4 arrivent à saturation : il va finir par ne plus y avoir assez d’adresses différentes !

Les adresses IP version 6 ou Ipv.6 vont prendre le relais.

Les adresses IP version 6 ou Ipv.6 vont prendre le relais : il s’agit d’une adresse sur 16 octets (128 bits). L’adresse est donc 4 fois plus grande que l’IPv4. En terme de nombre d'adresses disponibles, on aura alors 2¹²⁸ possibilités : plus de 3.10³⁸ possibilités. Si vous voulez vraiment un nombre, cela correspond à plus de 300 milliards de milliards de milliards d'adresses. Quelqu'un, dont je ne connais pas l'identité, a calculé que cela revient à avoir 1500 appareils possédant une adresse unique par m². En espérant que ce soit assez !

Une adresse Ipv6 est composée de 8 associations de 2 octets séparés par des doubles points :

Exemple d’adresse IP v6 en binaire :

1010110000001000 : 1010110000001000 : 1010110000001000 : 1010110000001000 : 0000000000000000 : 0000000000000000 : 0000000000000000: 0000000000000000

C’est un peu long à taper et à lire …

On donne plutôt chaque association de 2 octets(16 bits) par sa valeur en hexadécimal. Pourquoi ? En décimal 2¹⁶ donne 65536 valeurs possibles. Un peu moins long qu’un mot binaire de 16 bits mais ça commence à faire beaucoup de chiffres néanmoins.

Exemple d’adresse IP v6 en décimal : 44040 : 44040 : 44040 : 44040 : 0 : 0 : 0 : 0

On utilisera plutôt l’hexadécimal.

Exemple d’adresse IP v6 en hexadécimal : AC08 : AC08 : AC08 : AC08 : 0000 : 0000 : 0000 : 0000

Il existe encore d'autres règles, comme le fait de pouvoir remplacer une fois un groupe d'adresses 0 à la suite par :: de façon à limiter la place de cette adresse. Renseignez vous si vous le voulez, pour une introduction, c'est déjà bien suffisant.

On pourra omettre les doublets à zéro en partant de la droite. L’adresse précédente sera donc envoyée comme :

Exemple d’adresse IP v6 en hexadécimal : AC08 : AC08 : AC08 : AC08 ::

Les ordinateurs pourront compléter automatiquement puisqu’une adresse correcte comporte 8 doublets.

Exemple 2 d’adresse IP v6 en hexadécimal : AC08 : AC08 : AC08 : 0000 : 0000 : 0000 : 0000 : AC08

On peut alors utiliser : AC08 : AC08 : AC08 :: AC08

Nul besoin de comprendre le code hexadécimal pour parvenir à lire ou écrire une adresse. Nous reparlerons néanmoins de l’hexadécimal plus loin dans le chapitre. On le rencontre un peu trop souvent en informatique pour ignorer comment on peut le retranscrire en décimal.

On notera qu’un programme peut communiquer avec un serveur situé sur la même machine que lui : il utilise alors l’adresse localhost qui est fixée usuellement à l’adresse Ipv4 127.0.0.1 bien qu’elle puisse prendre n’importe quelle valeur entre 127.0.0.1 et 127.255.255.255. La communication ne passe alors pas du tout par Internet ou le réseau local : elle reste interne à l'ordinateur. En Ipv6, c’est devenu ::1.

Le réseau local est habituellement accessible via les adresses IP comprises entre 192.168.1.1 (adresse courante de la machine donnant accès à Internet, votre Box chez vous) à 192.168.1.254. Certains fournisseurs d’accès choisissent plutôt 192.168.0.1 à 192.168.0.254.

Voilà l’exemple des adresses à fournir pour une communication sur le réseau local entre plusieurs machines. reseau local

Si l’ordinateur 1 veut contacter l’ordinateur 2, il envoie un message vers 192.168.1.10. En théorie, il envoit une requête au serveur local qui va lui renvoyer le message !

Si l’ordinateur 1 veut contacter l’ordinateur 1, il peut envoyer l’adresse 127.0.0.1 tout simplement.

L’ordinateur 2 peut contacter le numéro 1 en utilisant l’adresse locale sur le réseau local(192.168.1.20).

L’adresse 0.0.0.0 n’est pas légale en tant qu’adressage Internet mais elle peut être utilisée localement par une application. Dans le contexte d’un adressage Internet reçu, 0.0.0.0 veut dire que l’adresse n’est pas valide, pas atteignable ou autre.

Dans le cadre d’une utilisation locale, 0.0.0.0 veut dire n’importe quelle adresse valide du localhost : cela veut dire qu'on émet sur tous les ordinateurs et que tous sont destinataires du message. Dans le contexte de l’ordinateur 1 ci-dessus, 0.0.0.0 sera interpété comme 192.168.1.20 ou 90.47.225.174.

16° Allez sur un site permettant de déterminer votre IP pour trouver votre IP sur Internet et votre IP sur le réseau local. Vous pourriez tester par exemple http://www.mon-ip.com/.

A l’aide de votre adresse, on peut trouver un nombre important de données sur votre ordinateur, votre adresse Ip, le fournisseur d’accès … Par contre, on ne peut pas savoir directement qui vous êtes, ni votre adresse. Votre fournisseur peut lui faire très facilement le lien entre une adresse IP et son client. Mais il faut lui en faire la demande.

Lancer une recherche sur "Mon Ip", vous devriez trouver nombre de sites qui vous permettront de voir ce qu'on peut obtenir d'une adresse IP.

1.2 - Firewall et ports de communication

Une fois qu’on a trouvé l’ordinateur, encore faut-il savoir où adresser votre demande dans l’ordinateur…

Imaginer votre ordinateur comme un immense building commercial. Il regorge de sociétés différentes. C’est bien pour cela que lorsqu’on écrit à une organisation, on signale l’adresse de l’immeuble ET le nom de la société. Le facteur apporte le courrier d’une société jusqu’au bon accueil, et en profite pour prendre le courrier à envoyer qu’on lui donne à l’accueil. Ensuite, le personnel de l’accueil va traiter le courrier reçu et transmet les lettres dans les bons services.

C’est pareil pour votre ordinateur : il peut recevoir du courrier par un nombre important de ports, qu’on distingue par un numéro. Imaginez la liaison entre Internet et votre ordinateur comme une façade d’immeuble : par quelle fenêtre lancer le message ?

Sur l’exemple ci-dessous, j’ai pris le port 80 (typiquement celui utilisé par les navigateurs pour communiquer avec un serveur), 135, 1801 et 49664.

Lorsque votre ordinateur discute avec le serveur d’un site, il utilise le port 80 du serveur. L’adresse utilisée par votre ordinateur pour se connecter à l’autre est donc quelque chose comme 90.47.225.174 :80. Le chiffre après l’adresse et le : désigne le port qui doit être utilisé pour recevoir le message ou pour émettre.

17° Ouvrir la console ( touche Windows+R, cmd sur un système Windows) et lancer la commande netstat –ano. Vous allez obtenir la liste des connexions actives : le protocole utilisé (nous verrons cela juste après) ; l’adresse locale puis l’adresse distante utilisée et enfin le numéro d’identification du programme responsable de la connexion (PID pour Process IDentifier).

Vous remarquerez qu’après chaque adresse se trouve bien un autre nombre après le :.

Les connexions sont donc bien établies à travers un port précis, suivant un protocole précis par un programme précis.

Et voici à quoi sert le fameux Firewall (ou Pare-Feu en français). C’est un programme installé en profondeur qui va autoriser ou non la communication entre émission (ordinateur vers extérieur) ou en réception (extérieur vers ordinateur).

18° Ouvrez votre navigateur pour qu'il soit sur un site externe. A l’aide du gestionnaire des tâches (CTRL-ALT-SUPP), vous pouvez retrouver le programme responsable d’une connexion à l’aide de son PID. Faites donc cela avec une connexion externe utilisant le port 80 vers une adresse externe.

On remarquera que le PID 3692 correspond à Firefox. Une connexion est établie entre un serveur distant (54.230.197.18 :80) et une adresse interne (192.168.1.20 :54051).

Résumons : un programme possédant un PID peut établir des communications en utilisant une adresse et un port.

Quel est le rôle du Firewall ? Surveiller tout cela.

Il autorise les communications semblant légales (Firefox tentant de sortir avec une adresse externe utilisant un port 80 par exemple).

Si on reprend l’image de l’immeuble, le firewall va même plus loin : lorsqu’on tente d’envoyer un message par un port, il peut :

Accepter la communication selon des conditions précises (programme connu principalement)
Refuser la communication et le signaler.
Faire comme si la fenêtre n’existe pas : on est alors totalement dissimulé, la communication tentant de rentrer ne renvoie même pas d’erreur, elle croit simplement n’avoir pas trouvé sa destination.

Il reste néanmoins un élément que nous n’avons pas encore vu : TCP. C’est quoi ça ?

1.3 - Protocole de communication

Comme pour les humains, les unités informatiques ont besoin d’utiliser un langage commun pour se comprendre. Si un facteur martien débarque chez vous, vous risquez d’avoir du mal à communiquer avec vous. C’est pareil entre deux ordinateurs : pour qu’ils puissent communiquer, il faut leur dire comment communiquer.

C’est ce qu’on appelle un PROTOCOLE, un ensemble de règles que respecteront les deux ordinateurs afin d’échanger des informations.

On trouve les protocoles de haut niveau : ce sont les protocoles fortement prédéfinis : on peut très facilement les utiliser (si on étudie la documentation) mais on ne peut pas les modifier. S’ils correspondent à l’utilisation qu’on veut faire, c’est bien, sinon ils ne servent à rien. Parmi ceux-ci :

Le protocole HTTP (Hypertext Transfer Protocol) utilise le port 80 du côté serveur. Vous devriez commencer à comprendre pourquoi Firefox utilise le port 80 !

Le protocole FTP (File Transfert Protocol) utilise le port 21. C’est le protocole utilisé par les logiciels permettant de télécharger des fichiers.

Le protocole POP3 (Post Office Protocol) utilise le port 110. C’est le protocole utilisé par les courriels / emails.

Il existe également des protocoles de bas niveau : ce sont des protocoles plus difficiles à utiliser puisqu’il faut les configurer assez fortement. L’avantage est qu’on peut faire à peu près ce qu’on veut.

L’UDP (User Datagram Protocol) est le plus basique : on ne vérifie pas vraiment que la connexion est établie, on envoie et on verra ! Bref, il est rapide mais pas très sur. Si vous avez vraiment besoin de ne pas perdre de paquets d’informations en route, autant utiliser l’autre. Lorsqu’on transmet des signaux vocaux, c’est ce protocole qu’on utilise.

Le TCP (Transmission Control Protocol) est plus lent car il y a trois phases : on établit la connexion (et on vérifie qu’elle existe bien), on envoie les données puis on signale la fin de la transmisson.

Oui mais on ne voit nulle trace d’autres choses que UDP et TCP dans la console ? Firefox n’utilise pas le http ? Si si. Mais en fait les protocoles de haut niveau utilisent les protocoles de bas-niveau pour fonctionner. En gros, ce sont des protocoles de bas niveau prédéfini. Et rien ne vous permet pour l'instant de distinguer deux protocoles TCP entre eux.

Ainsi, nous avons vu qu’il existe de nombreuses façons de communiquer (différents protocoles) et différentes applications (navigateurs, communications instantanées.

Le Web n’est donc qu’une partie de l’Internet. Il s’agit de la partie constituée par l’ensemble des pages des différents types.

Le navigateur utilise le protocole http pour communiquer avec le serveur qui lui envoie les informations concernant les données à afficher à l’écran.