Cours d’informatique 4
60
UNIVERSITE IBN TOFAIL Faculté des Sciences Département d’Informatique Kenitra Cours d’informatique 4 SVT/STU-Semestre 4 Chapitre I Langage HTML Chapitre II Les Réseaux Principes fondamentaux Professeur : Jalal LAASSIRI E-mail :[email protected]
Transcript of Cours d’informatique 4
UNIVERSITE IBN TOFAIL Faculté des Sciences
Département d’Informatique
Kenitra
Cours d’informatique 4 SVT/STU-Semestre 4
Chapitre I
Langage HTML
Chapitre II
Les Réseaux Principes fondamentaux
Professeur : Jalal LAASSIRI
E-mail :[email protected]
Table des matières
Introduction au langage HTML ................................................................................................... 3 1. Définitions de quelques termes rattachés au Web .............................................................. 3 2. Structure d’un document HTML ........................................................................................ 4 3- -Présentation de quelques balises de mise en forme du texte : .......................................... 6 4- Les listes avec HTML : .................................................................................................... 10 5- Les liens (<a>): ................................................................................................................ 14 6- Les images : (<img>) ....................................................................................................... 15 7- Les cadres ou les frames : ................................................................................................ 19 8- Les Tableaux : .................................................................................................................. 24
1. Les principales balises ................................................................................................ 24 2. Les principaux attributs ............................................................................................ 25 Les attributs inclus dans <table> : ils agissent sur tout le tableau .......................................... 25 Les attributs inclus dans <tr> : ils agissent sur toute la ligne ................................................. 25 Les attributs inclus dans <td> : ils agissent sur la cellule ...................................................... 26 3. Regroupement de cellules (attributs de la balise <td>) ............................................ 27
9- Les formulaires: ................................................................................................................ 30 1. Introduction .............................................................................................................. 30 2. La balise form et ses attributs .................................................................................. 30 3. L’élément ligne de texte : ......................................................................................... 30 4. La zone de saisie ...................................................................................................... 31 5. Envoyer un formulaire : Les boutons de commande submit et reset ....................... 32 6. La liste déroulante : (<select> .................................................................................. 32 7. Les boutons radio ou les boutons d’option : ............................................................ 33 8. Les cases à cocher .................................................................................................... 34
10- Introduction aux feuilles de styles: ............................................................................... 37 1. Syntaxe CSS: ............................................................................................................ 38 2. Regroupement de propriétés: ................................................................................... 38 3. Le sélecteur class: ..................................................................................................... 38 4. Le sélecteur id .......................................................................................................... 39 5. Autres exemples ....................................................................................................... 40
2
UNIVERSITE IBN TOFAIL Faculté des Sciences
Département d’Informatique
Kenitra
Cours d’informatique 4 SVT/STU-Semestre 4
Chapitre I
Langage HTML
Chapitre II
Les Réseaux Principes fondamentaux
Professeur : Jalal LAASSIRI
E-mail :[email protected]
Introduction au langage HTML
1. Définitions de quelques termes rattachés au Web Le World Wide Web : Conçu par Tim Berners-Lee en 1989, est aujourd'hui le système hypertexte le plus vaste et le plus utilisé : il compte des milliards de documents répartis dans le monde entier, lesquels sont consultés par des millions de personnes à travers le réseau Internet
Un système hypertexte est un système contenant des nœuds liés entre eux par des hyperliens permettant de passer automatiquement d'un nœud à un autre. Un document hypertexte est donc un document qui contient des hyperliens et des nœuds. Un nœud est une "unité minimale d'information".
Lorsque les nœuds ne sont pas uniquement textuels, mais aussi audiovisuels, on peut parler de système et de documents hypermédias.
Un hyperlien ou lien hypertexte C’est une référence dans un système hypertexte permettant de passer automatiquement d'un document consulté à un document lié. Les hyperliens sont notamment utilisés dans le World Wide Web pour permettre le passage d'une page Web à une autre d'un simple clic. Une page Web : Est une ressource du Word Wide Web conçue pour être consultée par des visiteurs à l'aide d'un navigateur Web. Elle a une adresse Web ou une URL. (pour Uniform Resource Locator) Techniquement, une page Web est souvent constituée d'un document en Hypertext Markup Language (HTML) (ou XHTML) et d'images. Cependant, tout type de ressources ou d'assemblage de ressources, textuelles, visuelles, sonores, logicielles, peuvent constituer une page Web. Une URL (pour Uniform Resource Locator) pointe sur une ressource. C’est une chaîne de caractères permettant d’indiquer un protocole de communication et un emplacement pour toute ressource du Web. HTML (pour HyperText Markup Language) C’est un langage informatique permettant de décrire le contenu d’un document (titres, paragraphes, disposition des images, etc.) et d’y inclure des hyperliens.. Les documents HTML sont les ressources les plus consultées du Web. C’est un langage de balisage qui permet d’enrichir le contenu d’un texte.
3
Éditeur HTML (ou éditeur Web) : C’est un logiciel conçu pour faciliter l’écriture de documents HTML et de pages Web en général. Site Web C’est un ensemble de pages Web hyperliées entre elles et mises en ligne à une adresse Web Navigateur Web C’est un logiciel conçu pour consulter le World Wide Web. Techniquement, c'est au minimum un client HTTP. Le terme navigateur web (ou navigateur Internet) est inspiré de Netscape Navigator. D'autres métaphores sont ou ont été utilisées. Le premier terme utilisé était browser, comme en anglais. Par la suite, on a vu fureteur (surtout utilisé au Québec), butineur, brouteur, arpenteur, fouineur ou explorateur (inspiré d'Internet Explorer).
2. Structure d’un document HTML Un document HTML commence toujours par la balise <html> et se termine par
</html>. Cette balise délimite le début et la fin d’un document html. Il contient toujours des informations destinées au navigateur. Ces informations sont
contenues à l’intérieur des balises <head> et </head>. La balise <head> délimite la section d'en-tête du document. À l’intérieur de la balise <head> on peut trouver la balise <title>. La balise <title> permet d’afficher le titre de la page dans le navigateur. Elle se ferme par </title>
A l’intérieur des balises <body> et </body> on retrouve le contenu de votre document. La balise <body> délimite le corps du document.
Exemple
4
Une fois que votre fichier est enregistré avec l’extension .html ou .htm vous pouvez utiliser votre navigateur pour visualiser le résultat de votre page Web, pour ce faire, vous pouvez utiliser les deux manières façons Premières façon
1- Ouvrir votre navigateur Internet Explorer, Dans le menu fichier, choisir la commande Ouvrir
2- Choisir parcourir, puis choisissez le nom de votre page Web, puis cliquez sur OK
Deuxième façon Double cliquer sur l’icône de votre page Web (icône Internet Explorer qui porte le nom de votre page) Voici le résultat affiché en interprétant le code précèdent
Remarquez le titre de la page
Actualiser
Important :
5
Toutes les modifications que vous allez apporter à votre page Web doivent se faire dans votre éditeur de texte.
A chaque modification apportée, votre page doit être enregistrée Si votre page est déjà ouverte ave votre navigateur, il suffit de faire Actualiser dans votre
navigateur pour que les modifications s’affiche par le navigateur.
3- -Présentation de quelques balises de mise en forme du texte :
Définition : Un élément html est un mot clef qui correspond à une commande pour un fureteur. Ainsi l’élément h6 va s’écrire à l’intérieur la balise d’ouverture <h6> et la balise de fermeture </h6> La balise <p> permet de définir un paragraphe. Les balises <h1> à <h6> permettent de définir les titres dans un document html
6
7
Les styles avec HTML Les balises de styles permettent entre autre de modifier la couleur, la taille et le taille du texte d’un document HTML.
style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
style="text-align:center"
Exemple
Alignement du texte ;
<html> <body> <h1 style="text-align:center">Ce titre est au centre</h1> <p style="text-align:left">Ce paragraphe est aligné à gauche </p> <p style="text-align:right">Ce paragraphe est aligné à droite </p> <p style="text-align:center">Ce paragraphe est aligné au centre</p> </body> </html>
8
Voici quelques autres balises pour la mise en forme du texte : Balises Rôles <b> Permet de mettre le texte en GRAS < i> Permet de mettre le texte en italique <u> Permet de mettre le texte en souligné <pre> Permet d’afficher du texte préformaté <big> Permet d’afficher du texte en grand <small> Permet d’afficher du texte en plus petit <sup> Affiche le texte en indice <sub> Affiche le texte en exposant <adress> Insérer une adresse dans un document html <blockquote> Permet de mettre en valeur un paragraphe
9
4- Les listes avec HTML : HTML supporte 3 types de listes :
Les listes numérotées Les listes non numérotées Les listes de définition.
1. Les listes numérotées (<ol> pour ordred list)
L’exemple qui suit permet de définir une liste numérotée
<html> <body> <h3>Une liste numérotée:</h3> <ol> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> </body> </html>
Autres types de listes numérotées :
10
11
<html>
<body> <h3>Une liste numérotée:</h3> <ol type ="1" start ="5"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres majuscules </h4> <ol type ="A"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres minuscules </h4> <ol type ="a"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres romaines </h4> <ol type ="I"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres romaines </h4> <ol type ="i"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> </body> </html>
2. Les listes non numérotées (<ul> pour unordred list)
<html> <body> <h4>Une liste non numérotée:</h4> <ul type="disc"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ul> <h4>Une liste non numérotée:</h4> <ul type ="square"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ul> <h4>Une liste non numérotée:</h4> <ul type ="circle"> <li>Programmation structurée</li> <li>Programmation objet</li> <li>Programmation Web</li> </ul> </body> </html>
12
3. Les listes de définition (<dl> pour list definition>
<html> <body> <h4>Une liste de définition:</h4> <dl> <dt>Style de programmation</dt> <dd>1-Programmation objet</dd> <dd>2-Programmation structurée</dd> </dl> <h4>Une autre liste de définition:</h4> <dl> <dt>Langage de programmation</dt> <dd>C++</dd> <dd>Java</dd> <dt>Bases de données</dt> <dd>Oracle</dd> <dd>Access</dd> <dd>MySql</dd> </dl> </body> </html>
13
5- Les liens (<a>):
Les liens ou les hyperliens nous permettent de nous déplacer à l’intérieur d’une page Web, d’une page Web à une autre à l’intérieur d’un même site Web ou d’un site Web à un autre. La balise qui permet d’écrire un lien est <a> pour ancre. Exemples et syntaxe
<html> <body> <a href ="liste1.html"> cliquer ici pour cet exemple </a> <p> Ouvrir la page dans une nouvelle fenêtre </p> <a href="liste1.html" target="_blank">exemple</a></br> <a href ="http://www.clg.qc.ca"> mon cegep </a></br> <a href="mailto:[email protected]"> me contacter </a> <a href ="D:\00Automne 2009\420-KA8\Ateliers/Atelier1.html"> Cliquer ici pour voir mon Atelier1 qui n'est pas dans le dossier dans lequel se trouve cette page web</a> </body> </html>
Attention :
Si le fichier sur lequel vous voulez faire le lien n’est pas dans votre dossier qui contient votre fichier principal, alors il faut indiquer le chemin d’accès du fichier de lien.
Il est fortement recommander de mettre tous vos fichiers html et toutes vos images dans le même dossier. Ainsi, vous n’allez pas avoir de mauvaises surprises.
Insertion d’un lien à l’intérieur d’une même page : Lorsque vous êtes en bas de page et que vous voulez revenir en haut de celle-ci vous utilisez alors un lien à l’intérieur d’une même page. Une ancre nommée est une position dans une page qui peut être utilisée comme référence. Elle est invisible dans la page Web, seul le créateur de la page connait sa position. Un lien vers une ancre nommée commence toujours par le symbole #
<a name ="debut"> Definition </a> Du texte et du texte <a href="#debut"> retour à la Définition </a>
14
6- Les images : (<img>)
<img src="url" " alt ="du texte" /> url : désigne le nom de l’image avec son emplacement. L’attribut alt indique à l’utilisateur de la page web le texte à afficher si l’image ne s’affiche pas. Exemple
<html> <body> <img src ="chat.jpg" alt ="un petit minou"/> <img src ="chat.jpg" width="100" height="100"/> <img src ="chat.jpg" width="20%" height="50%"/> <img src = "http://www.images-animaux.net/images/chat2.jpg" width="100" height="100"/> </body> </body>
15
Du texte et des images : alignement de l’image par rapport au texte
<html> <body> <p> voici l'image <img src ="chat.jpg" align =" bottom"width="100" height="100"/> d'un petit chat</p> <p> voici l'image <img src ="chat.jpg" align ="middle" width="100" height="100"/>d'un petit chat</p> <p> voici l'image <img src ="chat.jpg" align ="top"width="100" height="100"/>d'un petit chat</p> </body> </html>
Image de fond (background)
<html> <html> <body background="image-fond.jpg"> Du code html </body> </html>
16
Image de lien
<html> <body> <h2> voici une image de lien </h2> <a href="http://www.images-animaux.net/image-chat.html"> <img src ="chat.jpg" align ="middle" width="200" height="100"/> </a> </h2> </body> </html>
La balise <map> La balise <map> permet de créer plusieurs zones sur une même image. On peut donc créer plusieurs liens sur une même image Exemple
<html> <html> <body > <img src ="voiture.gif" width="300" height="300" alt="Ma voiture" usemap ="#voiture" /> <map name="voiture"> <area shape="rect" coords="10,170,30,126" href="http://www.clg.qc.ca" alt = "phare1"/> <area shape="rect" coords="200,190,30,126" href="http://www.picto.qc.ca" alt="phare2" /> <area shape="circle" coords="150,250,20" href="http://www.google.ca" alt="Roue avant" /> </map> </body> </html>
Notez que : <area> se trouve à l’intérieur de la balise map. Cette balise permet de définir une zone à l’intérieur de l’image. Elle prend pour attribut : Shape : qui prend les valeurs : rect : Pour un rectangle, circle .Pour un cercle et poly :Pour un polygone Coords : permet de définir les coordonnées de la zone
Pour un rectangle : Indique les coordonnées des coins supérieurs gauche et inférieur droit de la zone «rect»
Pour un cercle. Indique les coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur «circle»
href : définit la page de destination du lien correspondant à la zone En absence de lien, utiliser l’attribut nohref="nohref"
17
18
7- Les cadres ou les frames : Les frames sont les cadres créés dans la fenêtre de votre navigateur. Chaque cadre peut recevoir un fichier HTML différent. Ce principe est surtout utilisé pour des barres de navigations, des hauts de page. Les frames tendent à se faire plus rares sur Internet. D'abord parce que la mise à jour du site est plus difficile et surtout parce que les frames accroissent sensiblement les temps de chargement pour vos visiteurs. Dans le cas d'une page contenant deux frames, il faut au moins trois fichiers (un fichier par cadre créé - son contenu) : le fichier <frameset>, celui qui répartit les cadres dans la fenêtre deux fichiers HTML pour le contenu de chaque cadre Les attributs de la balise <frameset> :
cols="pixels / %, pixels / %" crée des colonnes dont la largeur peut être spécifiée en pixels ou en pourcentage de la fenêtre totale. Les dimensions pour chaque colonne sont séparées par des virgules. (on note aussi qu'il est possible d'indiquer le signe "*" pour indiquer que la colonne occupe l'espace restant).
rows="pixels / %, pixels / %" crée des cadres horizontaux (lignes). Il n'est pas possible d'utiliser cols et rows dans le même frameset.
framespacing="pixels" indique l'espace entre les deux cadres.
frameborder="pixels" épaisseur de la bordure des cadres.
bordercolor="code héxadécimal" couleur de la bordure des cadres
border="pixels" épaisseur de la bordure entre les cadres.
html> <html> <frameset rows="30%,70%"> <frame> <frame> </frameset> </htm
19
L'attribut rows="hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de division horizontale. L hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;
<html> <frameset cols="30%,70%"> <frame> <frame> </frameset> </html>
20
L'attribut cols="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division verticale. Lhauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%;
Intégration des attributs cols et rows
<html> <frameset rows="30%,70%"> <frame> <frameset cols="30%,70%"> <frame> <frame> </frameset> </frameset> </html>
Utilisation de liens avec les cadres : Contenu du fichier principal
<html> <frameset rows="30%,70%"> <frame src ="baniere.html scrolling ="no" name="cadrehaut"> <frameset cols="30%,70%"> <frame src = "lien.html" name="cadregauche"> <frame src="Q3.html" name="cadreprincipale"> </frameset> </frameset> </html>
21
Pour insérer un fichier html dans un cadre on utilise l’attribut src de la balise frame Voici le contenu de chacune des pages hml insérée dans chacun des cadres. Banniere.html
<html> <body> <h2> voici l'image <img src ="chat.jpg" align ="middle" width="200" height="100"/> d'un chat </h2> </body> </htm
lien.html
<html> <body> <a href ="liste1.html"> Mon atelier0 </a><br/> <a href="liste1.html" target="_blank">Mon atelier1</a></br> <a href ="http://www.clg.qc.ca" target ="new"> Mon cegep </a></br> <a href="mailto:[email protected]"> Me contacter </a> </body> </html>
Q3.html
<html> <body> <p>voici un texte préformaté </p> <pre> Placez votre main sur un poêle une minute et ça vous semble durer une heure. Asseyez vous auprès d'une jolie fille une heure et ça vous semble durer une minute. C'est ça la relativité. </pre> Albert Einsten </body> </html>
Ce qui donne le résultat dans le navigateur :
22
23
8- Les Tableaux : HTML offre la possibilité de créer des tableaux. Un tableau constitue la principale possibilité de maîtriser la mise en page globale d'un document (disposition en colonne, respect des alignements, insertion d'images au milieu du texte. Un tableau est vu comme un ensemble de lignes, chaque ligne étant divisée en cases ou cellules
1. Les principales balises <table></table>
Cette balise est la commande principale pour définir le tableau en entier.
1. <tr></tr> (=table row) définissent chacune des lignes. 2. <td> </td> (=table data) entoure un élément de tableau. 3. <th> </th> (=table header) est un élément de titre. 4. <caption ></caption > permet de faire précéder le tableau d'un titre.
Exemple
<html> <head><title> les tableaux </title></head> <body> <table border =1> <caption> Voici un tableau</caption> <tr> <th> Joueurs </th> <th>Gardiens </th> </tr> <tr> <td> Guillaume Latendresse </td> <td>Yaroslav Halak </td> </tr> <tr> <td> Maxime Lapierre </td> <td>Carey Price</td> </tr> </table> </body> </html>
24
2. Les principaux attributs
Les attributs inclus dans <table> : ils agissent sur tout le tableau <table border=n>
donne au tableau un contour d'épaisseur n; une valeur assez grande de n donne l'illusion du relief.
<table border=2 bordercolor= blue > donne au tableau un contour d'épaisseur 2 et de couleur bleue.
<table width=80%> fixe la largeur du tableau à 80% de la largeur de la fenêtre du navigateur.
<table width=200> fixe la largeur du tableau exactement à 200 pixels quelle que soit la largeur de la fenêtre du navigateur.
<table cellpadding=n> défini l'espace en pixels entre l'objet et le contour d'une cellule
<table cellspacing=n> défini l'épaisseur du trait en pixels entre les cellules
<table bgcolor="#rrggbb"> défini la couleur de fond de tout le tableau.
Les attributs inclus dans <tr> : ils agissent sur toute la ligne <tr align=left | center | right>
tous les contenus des cellules de la ligne ont l'alignement précisé. <tr valign=top | middle | bottom >
tous les contenus des cellules de la ligne sont placés en haut , au centre ou en bas. <tr bgcolor="#rrggbb">
défini la couleur de fond des cellules de cette ligne.
25
Les attributs inclus dans <td> : ils agissent sur la cellule <td align=left | center | right>
la cellule concernée a l'alignement horizontal précisé. <td valign=top | middle | bottom >
agit sur l'alignement vertical; le contenu de la cellule est placé en haut , au milieu ou en bas.
<td bgcolor="#rrggbb"> définit la couleur de fond de la cellule.
<html> <body> <h4>Les fonds de cellules:</h4> <table border="1"> <tr> <td bgcolor="red">Ma première cellule</td> <td>Aucune couleur</td> </tr> <tr> <td background="carres.jpg">Image de fond</td> <td bgcolor="#ffffcc"><span style="color:#0000ff"> Cellule2 </span></td> </tr> <tr bgcolor="#ffffcc"> <td >Couleur de la ligne verte</td> <td style="color:#ff0000">Texte rouge</td> </tr> <tr> <td ><img src ="carres.jpg"Width ="180" height="60"></td> <td style="color:#ff0000"> insertion d'image pour la cellule précedente</td> </tr> </table> </body> </html>
26
3. Regroupement de cellules (attributs de la balise <td>) Regroupement de colonnes : Utiliser l’attribut colspan <html>
<head><title> les tableaux </title></head> <body> <table border ="2"> <caption> Voici une fusion de colonnes pour ce tableaux</caption> <tr> <td colspan ="3" bgcolor="ffffc9" align = "center"> <b><span style="color =red">numéro de compte:1112-999-654 </b></span></td> </tr> <tr> <td> Date de paiement </td> <td> Paiement minimum </td> <td> Paiement </td> </tr> <tr> <td> 09 séptembre 2009 </td> <td align ="right"> 40 $</td> <td> OK </td> </tr> </table> </body> </html>
27
Regroupement de lignes : utiliser l’attribut rowspan
<html> <head><title> les tableaux </title></head> <body> <table border ="2"> <caption> Fusion de lignes pour ce tableaux </caption> <tr > <td width ="300"rowspan="2" align ="center" bgcolor="#ffffcc"> <b>Systèmes d'exploitation</b></td> <td> Linux </td> </tr> <tr> <td> Windows XP </td> </tr> <tr> <td align ="center" width ="300"> <b>Serveur WEb </b></td> <td>Apache </td> </tr> </table> </body> </html>
28
Exercice Dessiner le tableau relatif au code suivant : <html>
<head><title> les tableaux </title></head> <body> <table border ="2" width = "300"> <tr> <td rowspan="2" align ="center"> case 0 </td> <td> case 1 </td> <td> case 2 </td> <td> case 3 </td> </tr> <tr> <td> case 4 </td> <td colspan = "2"> case 5 </td> </tr> </table> </body> </html>
Réponse:
29
9- Les formulaires:
1. Introduction Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant un dialogue avec les internautes. On peut envoyer un formulaire soit à un serveur qui permettra de restituer les données, que l’utilisateur pourra analyser et mettre à jour, dans ce cas une technologie des serveurs est obligatoire (comme par exemple CGI) ; soit directement par courriel à un utilisateur qui disposera du formulaire comme il veut. Dans ce qui suit, seule la méthode pour envoyer un formulaire par courrier est étudiée.
2. La balise form et ses attributs
La balise form est la balise qui permet d’envoyer un formulaire, elle se présente sous la forme suivante : <form method="post" action="mailto:[email protected]" enctype="text/plain"> </form > Attributs de la balise from L’attribut METHOD permet de préciser quelle méthode d’envoi est utilisée. Il existe deux méthodes : POST, qui est la plus utilisée et GET. La différence entre ces deux méthode se situe coté serveur. L’attribut ACTION, permet de préciser l’adresse d’expédition du formulaire. Cette adresse peut être une URL d’un serveur Web ou une adresse de courriel. L’attribut ENCTYPE, qui ne peut être utilisé qu’avec la méthode POST, spécifie l’encodage utilisé pour le contenu du formulaire. text/plain veut dire texte lisible. Pour construire un formulaire, il est important de connaître les éléments d’un formulaire. La balise <form> doit avoir </form>
3. L’élément ligne de texte : La ligne de texte est un espace réservé pour entrer du texte court, comme par exemple, votre nom, prénom, adresse, courriel etc…. la balise permettant de définir une ligne de texte est :input Syntaxe : <input type="text" name="nomzone" size=20 maxlength=40 value = " saisir votre courriel "/> Attributs de la balise input : type indique le type de donnée de la ligne de texte : dans notre cas, il est de type text name, indique le nom de la ligne de texte size indique la taille de la zone de texte
30
maxlength, indique la taille maximale de la ligne de texte value : indique le contenu de la ligne de texte exemple <input type="text" name="email" size="30" maxlength="40" value="[email protected]" />
<html> <body> <form action=""> Nom de l'usager: <input type="text" name="user" /> <br> Mot de passe: <input type="password" name="password" /> </form> </body> </html>
4. La zone de saisie Si vous voulez avoir une zone de saisie plus grande alors, vous devez utiliser la commande : textarea Syntaxe : <textarea name="zone1" rows=4 cols=40>entrez votre commentaire ici </textarea> L’attribut rows permet de définir le nombre de lignes de la zone de texte l’attribut cols permet de définir le nombre de colonnes de la zone de texte
31
Exemple : <textarea name = "commentaire" cols = 30 rows =4 > enterz votre commentaire ici </textarea>
La balise <textarea> doit avoir </textarea> Question : Il existe un attribut WRAP pour cette commande, À quoi sert-il?
5. Envoyer un formulaire : Les boutons de commande submit et reset Pour définir un bouton de commande, on utilise la commande INPUT de la manière suivante : <input type ="submit" name = "bouton1" value = " Envoyer" /> <input type= "reset" name = "bouton2" value =" Annuler " / > Le bouton SUBMIT a pour rôle de transmettre toute l’information contenue dans le formulaire. Le bouton RESET a pour rôle d’annuler l’action entreprise et de mettre les valeurs par défaut du formulaire. Voici ce que donne l’exemple précédent :
6. La liste déroulante : (<select> Pour inclure dans un formulaire HTML une liste déroulante, il faut utiliser la balise SELECT <select name="liste1 " size ="2"> <option value= "Choix 1"> Visual Basic </option> <option value= "Choix 2"> C++ </option> <option value= "Choix 2"> Java </option> </select> Voici le résultat de cette liste :
Attributs de select L’attribut size permet de fixer le nombre d’éléments de la liste qui seront affichés. Par défaut il est égal à 1. Si l’élément a affiché n’est pas indiqué alors la liste affiche le premier élément. L’attribut selected permet de faire afficher l’élément voulu en début de liste, dans notre exemple ‘mathématique est affiché. Remarquez également que SIZE n’étant pas précisé, il est à 1 par défaut
32
<select name="liste2 " > <option > Informatique </option> <option > Physique </option> <option selected > Mathématiques </option> <option > Français </option> </select> Voici le résultat de la liste
La balise <select> doit avoir </select>
7. Les boutons radio ou les boutons d’option : Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif). Pour permettre la définition d’un ensemble de boutons radio, il faut utiliser la balise INPUT comme suit : <input type="radio" name="nom du groupe" value="valeur du bouton" /> Exemple <input type="radio" name="bouton1" value="mathématique" /> Mathématique <input type="radio" name="bouton1" value= "informatique"/> Informatique <input type="radio" name="bouton1" value="Français" /> Français Puisque les boutons d'option, ont comme particularité qu'une seule option à la fois peut être activée,il faut donc que tous les boutons aient le même NAME. Voici le résultat de l’exemple précédent :
Remarque : L’attribut checked permet de sélectionner un bouton un bouton radio par défaut Exemple <input type="radio" name="bouton1" value="mathématique"/> Mathématique <input type="radio" name="bouton1" value= "informatique" checked/> Informatique <input type="radio" name="bouton1" value="Français"/> Français
33
Donne le résultat :
8. Les cases à cocher La différence entre les boutons radio et les cases à cocher est que pour ces dernières (les cases à cocher) plusieurs peuvent être sélectionnées en même temps. Pour inclure des cases à cocher (checkbox ) dans un formulaire, on utilise le même principe que les boutons radio, avec les différences suivantes :
• Le TYPE est checkbox • Toutes les cases doivent avoir des NAME différents
L’option checked est utilisée de la même manière Exemple <input type="checkbox" name="bouton1" value="mathématique"/> Mathématique <input type="checkbox" name="bouton2" value= "informatique" checked/> Informatique <input type="checkbox" name="bouton3" value="Français"/> Français <input type="checkbox" name="bouton4" value="Anglais"/> Anglais Voici le résultat de l’exemple précèdent :
34
Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>les formulaires </title></head> <body> <p>La Ligne de texte: </p> <form action="mailto:[email protected]" method = "post" enctype="text/plain" > <input type="text" name="email" size="30" maxlength="40" value="[email protected]" /> <p>La Zone de texte: </p> <textarea name = "commentaire" cols = "30" rows ="2" > enterz votre commentaire ici </textarea> <p>La liste déroulante: taille =2, valeur par défaut 'Viaual Basic et C++' </p> <select name="liste1 " size ="2" > <option value= "Choix 1"> Visual Basic </option> <option value= "Choix 2"> C++ </option> <option value= "Choix 3"> Java </option> <option value= "Choix 4"> JavaScript </option> </select> <p>La liste déroulante: taille =1, valeur par défaut 'Mathématiques' </p> <select name="liste2 " > <option > Informatique </option> <option > Physique </option> <option selected ="selected"> Mathématiques </option> <option > Français </option> </select><br /> <p>Les boutons Radio </p> <input type="radio" name="bouton1" value="mathématique" /> Mathématique <input type="radio" name="bouton1" value= "informatique" checked ="checked" /> Informatique <p>Les Checkbox </p> <input type="checkbox" name="bouton1" value="mathématique"/> Mathématique <input type="checkbox" name="bouton2" value= "informatique" checked ="checked" /> Informatique <input type="checkbox" name="bouton3" value="Français" /> Français <input type="checkbox" name="bouton4" value="Anglais" /> Anglais <br/><br /> Les boutons de commnades <br /> <input type ="submit" name = "bouton1" value = " envoyer" /> <input type= "reset" name = "bouton2" value =" Annuler " /> </form> <p>
35
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p> </body> </html> Voici le résultat
36
10- Introduction aux feuilles de styles: Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage qui permet de gérer la présentation d'une page Web. Le langage CSS est une recommandation du World Wide Web Consortium (W3C), au même titre que HTML ou XML. Les styles permettent de définir des règles appliquées à un ou plusieurs documents HTML. Ces règles portent sur le positionnement des éléments, l'alignement, les polices de caractères, les couleurs, les marges et espacements, les bordures, les images de fond, etc. Le but de CSS est séparer la structure d'un document HTML et sa présentation. En effet, avec HTML, on peut définir à la fois la structure (le contenu et la hiérarchie entre les différentes parties d'un document) et la présentation. Mais cela pose quelques problèmes. Avec le couple HTML/CSS, on peut créer des pages web ou la structure du document se trouve dans le fichier HTML tandis que la présentation se situe dans un fichier CSS. Avantage: Rend la mise à jours des sites Web facile.
- insertion directement dans le code HTML: <head> <style type="text/css"> body { background-image: url("images/back40.gif") } </style> </head>
- insertion dans un fichier .css et faire un lien vers ce fichier: idéal lorsque le style est applicable à plusieurs pages. <head> <link rel="stylesheet" type="text/css" href="monstyle.css" /> </head>
Le fichier monstyle.css contient les informations de votre "feuille de style: body { background-image: url("images/back40.gif") }
37
1. Syntaxe CSS: Une ligne CSS se présente comme trois éléments: selector { property: value } selector : représente un élément du code HTML (exemple les balises HTMl: body, h1, p ) proprety: la propriété que l'on souhaite changer (color background, font-size, font-family ..) value: représente la valeur de la propriété
Chaque instruction se termine par un point virgule (;) Les accolades déterminent les propriétés d’un sélecteur. Exemple:
p { text-align: center; color: black; font-family: arial,"Courrier New"; }
2. Regroupement de propriétés: On peut appliquer les mêmes valeurs de propriétés à un ensemble de selectors, il suffit de les séparer par une virgule.
h1,h2,h3,h4,h5,h6 { color: green }
3. Le sélecteur class: Il arrive que nous ayons par exemple deux tableaux dans notre page HTML et nous ne voulons pas appliquer les mêmes propriétés à ces deux tableaux. Dans ce cas il faudrait les distinguer dans le code HTML par l'attribut class comme suit: <html> <head> <style type="text/css"> table.one { table-layout: automatic; background-color:blue; } table.two { table-layout: fixed; background-color:green; } </style> </head>
38
<body> <table class="one" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br /> <table class="two" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> </body> </html>
4. Le sélecteur id À la place d’utiliser le sélecteur class, on peut également utiliser le sélecteur id. L’avantage du id par rapport à class est qu’il est unique dans le code HTML Exemple <html> <head>
<style type="text/css"> #par1 { text-align: center; color: red; font-family: arial } #par2 { text-align: right; color: green; font-family: verdana } </style>
</head> <body> <p id="par1"> ce paragraphe est rouge et centré </p>
39
<p id="par2"> ce paragraphe est vert est aligné à droite </p> </body> </html>
5. Autres exemples Couleur de fond (background-color) <html> <head>
<style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparaent} p {background-color: rgb(250,0,255)} </style>
</head> <body> <h1>en-tête h1</h1> <h2>en-tête h2</h2> <p>un paragraphe</p> </body> </html> Image de fond (background) <html> <head>
<style type="text/css"> body { background-image: url('image2.jpg'); background-repeat: no-repeat } </style>
</head> <body> suite du code html </body> </html> Si on veut que l’image se répète sur tourte la page il faut utiliser
40
background-repeat: repeat background-repeat: repeat-y /* répétition verticale seulement */ background-repeat: repeat-x /* répétition horizontale seulement */ l’attribut img <html> <head>
<style type="text/css"> img { width:100px; height:100px; } </style>
</head> <body> <img src="image2.jpg" /> </body> </html> Le texte: <html> <head>
<style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style>
</head> <body> <h1>C’est l’en-tête 1</h1> <h2> C’est l’en-tête 2</h2> <p> c’est un paragraphe</p> </body> </html>
41
42
<html> <head>
<style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style>
</head> <body> <h1>C’est l’en-tête 1</h1> <h2> C’est l’en-tête 2</h2> <h3> C’est l’en-tête 3</h3> </body> </html>
43
UNIVERSITE IBN TOFAIL
Faculté des Sciences, Département d’Informatique
Kenitra
Chapitre II
Les Réseaux Principes fondamentaux
44
Historique:
L'histoire des réseaux et des télécommunications pourrait se résumer à une perpétuelle course
au débit ou à ce que l'on appelle aussi largeur de bande. Pour supprimer la distance, Il faut
transporter une quantité toujours plus grande d'informations sur des distances de plus en plus
importantes. Or, on constate que plus les distances sont grandes plus les débits disponibles
sont faibles. Les informations se déplacent plus vite dans un ordinateur que dans sa
périphérie, plus vite dans sa périphérie qu'entre deux étages, plus vite entre deux étages
qu'entre deux bâtiments, plus vite entre deux bâtiments qu'entre deux villes...
Abolir les distances, c'est lutter contre ces lois et pénaliser le moins possible le débit. Et
réaliser le vieux rêve des réseaux : transférer aussi vite des informations entre deux
ordinateurs situés à 200 km l'un de l'autre qu'à l'intérieur d'un ordinateur !
Le principe du réseau local est apparu dans les années 70 pour interconnecter les équipements
de mini-informatique (terminaux, imprimantes, disques ...). En effet, la plupart des échanges
de données dans une entreprise s'effectuent localement, voire par groupes de travail. C'est
pourquoi, avec la généralisation des micro-ordinateurs à la fin des années 80, le réseau local a
affirmé sa vocation.
I- Protocole de communication
Un protocole est une méthode standard qui permet la communication entre des processus (s'exécutant éventuellement sur différentes machines), c'est-à-dire un ensemble de règles et de procédures à respecter pour émettre et recevoir des données sur un réseau. Il en existe plusieurs selon ce que l'on attend de la communication. Certains protocoles seront par exemple spécialisés dans l'échange de fichiers (le FTP), d'autres pourront servir à gérer simplement l'état de la transmission et des erreurs (c'est le cas du protocole ICMP), ... Si vous vous baladez sur Internet, vous avez dû, à un moment ou à un autre, entendre parler de TCP/IP : Que signifie t-il et comment cela fonctionne ?
TCP/IP est un nom générique qui regroupe en fait un ensemble de protocoles, c'est à
dire des règles de communication.
A – Principe d’une transmission sur le réseau Analogie avec la transmission d’une lettre par la poste :
45
L'adresse IP est une adresse unique attribuée à chaque ordinateur sur Internet (c'est-à-dire qu'il n'existe pas sur Internet deux ordinateurs ayant la même adresse IP). De même, l'adresse postale (nom, prénom, rue, numéro, code postal et ville) permet d'identifier de manière unique un destinataire. Tout comme avec l'adresse postale, il faut connaître au préalable l'adresse IP de l'ordinateur avec lequel vous voulez communiquer. L'adresse IP se présente le plus souvent sous forme de 4 nombres (entre 0 et 255) séparés par des points. Par exemple: 204.35.129.3
Le routage
Quand vous voulez envoyer une lettre par la poste:
- Vous placez votre lettre dans une enveloppe, - sur le recto vous inscrivez l'adresse du destinataire, - au dos, vous écrivez l'adresse de l'expéditeur (la votre).
Ce sont des règles utilisées par tout le monde.
C'est un protocole.
Sur Internet, c'est à peu près la même
chose: chaque message (chaque petit
paquet de données) est enveloppé par IP qui y ajoute différentes informations:
l'adresse de l'expéditeur (vôtre
adresse IP),
l'adresse IP du destinataire,
différentes données
supplémentaires (qui permettent de
bien contrôler l'acheminement du message).
46
Les Ports
Avec IP, nous avons de quoi envoyer et recevoir des paquets de données d'un ordinateur
à l'autre.
Comment savoir à quel logiciel est destiné ce paquet IP ? Le navigateur, le logiciel de radio ou le logiciel d'email ?
Pour envoyer votre lettre, vous la postez dans la boîte aux lettres la plus proche. Ce courrier est relevé, envoyé au centre de tri de votre ville, puis transmis à d'autres centres de tri jusqu'à atteindre le destinataire
C'est un peu la même chose sur Internet !
Vous déposez le paquet IP sur l'ordinateur le plus proche (celui de votre fournisseur d'accès en général). Le paquet IP va transiter d'ordinateur en ordinateur jusqu'à atteindre le destinataire.
Un routeur peut être un ordinateur dédié ou un boîtier chargé de transmettre tous les paquets d’un réseau vers un autre réseau ou internet.
Imaginons maintenant que
nous ayons plusieurs
programmes qui fonctionnent
en même temps sur le même
ordinateur: un navigateur, un
logiciel d'email et un logiciel
pour écouter la radio sur Internet.
Si l'ordinateur reçoit un
paquet IP, comment savoir à
quel logiciel donner ce paquet IP ?
47
Le protocole UDP/IP
UDP/IP est un protocole qui permet justement d'utiliser des numéros de ports en plus des adresses IP (On l'appelle UDP/IP car il fonctionne au dessus d'IP). IP s'occupe des adresses IP et UDP s'occupe des ports.
Avec le protocole IP on pouvait envoyer des données d'un ordinateur A à un ordinateur B.
Avec UDP/IP, on peut être plus précis: on envoie des données d'une application x sur l'ordinateur A vers une application y sur l'ordinateur B.
Par exemple, votre navigateur peut envoyer un message à un serveur HTTP (un serveur Web):
Pour cela, on attribut numéro unique à chaque logiciel dans l'ordinateur appelé numéro de PORT Ainsi, l'adresse IP permet de s'adresser à un ordinateur donné, et le numéro de port permet de s'adresser à un logiciel particulier sur cet ordinateur.
48
Chaque couche (UDP et IP) va ajouter ses informations. Les informations de IP vont permettre d'acheminer le paquet à destination du bon ordinateur. Une fois arrivé à l'ordinateur en question, la couche UDP va délivrer le paquet au bon logiciel (ici: au serveur HTTP).
Les deux logiciels se contentent d'émettre et de recevoir des données ("Hello !"). Les couches UDP et IP en dessous s'occupent de tout.
Ce couple (199.7.55.3:1057, 204.66.224.82:80) est appelé un socket. Un socket identifie de façon unique une communication entre deux logiciels.
Le protocole TCP/IP
On peut donc maintenant faire communiquer 2 logiciels situés sur des ordinateurs différents.
Mais il y a encore de petits problèmes:
Quand vous envoyez un paquet IP sur Internet, il passe par des dizaines
d'ordinateurs (ou routeurs) . Et il arrive que des paquets IP se perdent ou
arrivent en double exemplaires.
Ça peut être gênant : imaginez un ordre de débit sur votre compte bancaire
arrivant deux fois ou un ordre de crédit perdu !
Même si le paquet arrive à destination, rien ne vous permet de savoir si le paquet
est bien arrivé (aucun accusé de réception).
La taille des paquets IP est limitée (environ 1500 octets). Un paquet de 1500
octets est aussi appelé « datagramme »
Comment faire pour envoyer la photo JPEG de sa copine qui fait 115000 octets ? (la photo... pas la copine !).
49
Voici le protocole de communication initié par TCP : Par exemple, pour envoyer le message "Salut, comment ça va ?", (Chaque flèche représente 1 paquet IP):
A l'arrivée, sur l'ordinateur 204.66.224.82, la couche TCP reconstitue le message "Salut,
comment ça va ?" à partir des 3 paquets IP reçus et le donne au logiciel qui est sur le
port 80.
C'est pour cela qu'a été conçu TCP.
TCP est capable:
de faire tout ce que UDP sait faire (ports). de vérifier que le destinataire est prêt à recevoir les données. de découper les gros paquets de données en paquets plus petits pour que IP les
accepte de numéroter les paquets, et à la réception de vérifier qu'ils sont tous bien arrivés,
de redemander les paquets manquants et de les réassembler avant de les donner aux logiciels. Des accusés de réception sont envoyés pour prévenir l'expéditeur que les données sont bien arrivées.
TCP/IP : Conclusion
SYN=1
ACK=1 SYN=1
ACK=1, SYN=0
50
Avec TCP/IP, on peut maintenant communiquer de façon fiable entre logiciels situés sur des ordinateurs différents.
TCP/IP est utilisé par de nombreux logiciels et protocoles :
Dans votre navigateur, le protocole HTTP utilise le protocole TCP/IP pour envoyer et recevoir des pages HTML, des images GIF, JPG et toutes sortes d'autres données.
FTP est un protocole qui permet d'envoyer et recevoir des fichiers. Il utilise également TCP/IP.
Votre logiciel de courrier électronique utilise les protocoles SMTP et POP3 pour envoyer et recevoir des emails. SMTP et POP3 utilisent eux aussi TCP/IP.
Votre navigateur IE (ou autre Mozilla …) utilise le protocole DNS pour trouver l'adresse IP d'un ordinateur à partir de son nom (par exemple, de trouver 216.32.74.52 à partir de 'www.yahoo.com'). Le protocole DNS utilise UDP/IP et TCP/IP en fonction de ses besoins.
Il existe ainsi des centaines de protocoles différents qui utilisent TCP/IP ou UDP/IP.
L'avantage de TCP sur UDP est que TCP permet des communications fiables. L'inconvénient est qu'il nécessite une négociation ("Bonjour, prêt à communiquer ?" etc.), ce qui prend du temps.
Format d’une trame et organisation en couche
51
Dans la trame est empaqueté le datagramme qui empaquette le segment qui empaquette la requette ou donnée de l’application. C’est la trame qui circule sur le réseau physique Autre représentation :
La donnée, c’est le texte ou l’image que vous allez lire ou transmettre qui occupe un certain nombre de bits . Le segment est constitué de la DONNEE + d’un entête TCP ou UDP qui est un mot sur 20 ou 24 octets permettant le contrôle de la transmission (bits SYN, ACK, RST …) et d’assurer l’arrivée à bon « port » de la donnée. TCP fragmente le segment pour qu’il soit compatible avec la longueur max d’un datagramme (d’où la notion de « paquets » dans une transmission IP). Il les ré assemble à la réception des paquets (un paquet –datagramme- fait environ 1500 Octets (même pas 2ko)) Le Datagramme est constitué du SEGMENT + un entête IP sur 20 ou 24 octets qui contient l’adresse IP du destinataire et de l’émetteur, ainsi que les informations pour la gestion de la fragmentation du datagramme. La trame est constituée du DATAGRAMME + entête trame sur 18 octets qui contient des informations d’adressage physique (adresse MAC de la carte réseau), de synchronisation, format, contrôle d’erreur (CRC). C’est la trame qui va circuler sur les lignes physique du réseau (câbles réseau) Note : L’adresse MAC (dans l’entête de la trame) correspond à l’adresse physique de la carte réseau du destinataire ou du routeur, à ne pas confondre avec l’adresse IP qui est une adresse « logique » et permet la structuration en réseau des ordinateurs que nous allons maintenant voir :
Principe de Codage d’une adresse IP
Une adresse IP est une adresse 32 bits, généralement notée sous forme de 4 nombres entiers séparés par des points. On distingue en fait deux parties dans l'adresse IP :
une partie des nombres à gauche désigne le réseau est appelé ID de réseau (en anglais netID),
Les nombres de droite désignent les ordinateurs de ce réseau est appelé ID d'hôte (en anglais host-ID).
RESEAU 1 RESEAU 2
52
Adresse du réseau 1 : 190. 0 . 0. 0 NetId = 190 Il contient 4 ordinateurs 190. 0 . 0 . 1 190. 0 . 0 . 2 190 . 0 . 0 . 3 190 . 0 . 0. 4 Host Id = 0 0 1 0 0 2 0 0 3 0 0 4 Adresse du réseau 2 : 195. 0 . 0 . 0 . NetId = 195 il contient 4 ordinateurs : 195 . 0. 0 . 1 195 . 0. 0 . 2 195 . 0. 0 . 3 195 . 0. 0 . 4 Host id = 0 0 1 0 0 2 0 0 3 0 0 4 Ce qui distingue les ordinateurs du réseau 1 et du réseau 2, ce sont leur NetId (190 pour le réseau 1 et 195 pour le réseau 2) Le nombre d’ordinateurs max du réseau 1 correspond au nombre de combinaison possible du Host ID, soit : 256*256*256 = 16777216 ordinateurs (2^24) (Note : Parmi toutes ces adresses, 2 ne devront pas être utilisées car réservées : 190 0 0 0 et 190 255 255 255 ) Idem pour le réseau 2. Host id ne dois jamais être choisi avec tous les bits à 0 ou tous les bits à 1 car réservé. Combien de réseaux de ce type peut-on avoir ? Réponse : C’est le nombre de combinaisons possibles du Net Id, à savoir : 2^8 = 256 réseaux différents possibles Classe de réseau : Afin de faciliter la recherche d’un ordinateur, les réseaux sont normalisés et organisés en classe. On distingue 3 classes principales de réseaux : Classe A : (le tableau donne le format en BINAIRE)
0 xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
Réseau Ordinateurs
Le nombre max d’ordinateurs d’un réseau de classe A est de 2^24 – 2 = 16777214 Le nombre de réseau de classe A est 2^7 = 128 (126 en pratique, car 0 et 127 sont réservés)
Note : le 1er bit du NetId est un 0 : indique classe A. Exemple : 0 1000011 00000000 00001001 00000001 décimal : 67 0 9 1 (Adresse IP= 67.0.9.1) Classe B : (le tableau donne le format en BINAIRE)
10 xxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
Réseau Ordinateurs
Le nombre max d’ordinateurs d’un réseau de classe B est de 2^16 -2 = 65534 Le nombre de réseaux de classe B est de 2^14 = 16384 Note : les 2 premiers bits du netid sont 10 : indique classe B Exemple : 10 000110 00000011 00001001 00000111
HUB
53
Décimal : 134 3 9 7 (Adresse IP = 134.3.9.7) Classe C : (le tableau donne le format en BINAIRE)
110 xxxxx xxxxxxxx xxxxxxxx xxxxxxxx
Réseau Ordinateurs
Le nombre max d’ordinateurs d’un réseau de classe C est de 2^8 -2 = 254 Le nombre de réseaux de classe C est de 2^21 = 2097152 Note : les 3 premiers bits du netid sont 110 : indique classe C Exemple : 110 00011 00000000 00000011 00000101 195 0 3 9
Le but de la division des adresses IP en trois classes A,B et C est de faciliter la recherche d'un ordinateur sur le réseau. En effet avec cette notation il est possible de rechercher dans un premier temps le réseau que l'on désire atteindre puis de chercher un ordinateur sur celui-ci. Ainsi, l'attribution des adresses IP se fait selon la taille du réseau.
Classe Nombre de réseaux possibles Nombre d'ordinateurs maxi sur chacun
A 126 16777214
B 16384 65534
C 2097152 254
Les adresses de classe A sont réservées aux très grands réseaux (IBM, Zerox, DEC, Hewlett-Packard…), les adresses de classe B aux réseaux de taille moyenne ( microsoft en
fait partie) tandis que l'on attribuera les adresses de classe C à des petits réseaux d'entreprise par exemple. Exercice : compléter le tableau suivant
Aide : vous devez convertir en binaire le premier octet pour déterminer la classe. En fonction de la classe, vous déterminez le netid et le hostId et déduirez donc les adresses min et max du réseau
Classe Adresse IP d’un ordinateur X du réseau
Adresse IP min du réseau
Adresse IP max du réseau
Net Id Host Id de l’ordinateur X
195.0.3.9 195.0.3.1 195.0.3.254 195.0.3 9
140.190.9.12
110.80.0.28
Correction : (on notera que lorsqu’on prend 254 c’est pour ne pas avoir tous les bits de l’Hostid à 1, cas particulier réservé)
Classe Adresse IP d’un ordinateur X du réseau
Adresse IP min du réseau
Adresse IP max du réseau
Net Id Host Id de l’ordinateur X
C 195.0.3.9 195.0.3.1 195.0.3.254 195.0.3 9
B 140.190.9.12 140.190.0.1 140.190.255.254 140.190 9.12
A 110.80.0.28 110.0.0.1 110.255.255.254 110 80.0.28
54
Le premier octet de l’adresse IP nous renseigne sur la classe : 1 <= Classe A <=126 0 0000001 01111110 (Note : 0 et 127 sont réservés*) 128 <= Classe B <=191 10 000000 10111111 192 <= Classe C <= 223 110 00000 11011111 224 <= Classe D <=239 spécifique (certains routeurs , multicast) 240 <= Classe E <=255 expérimental (usage futur)
L'adresse de bouclage (loopback): l'adresse de réseau 127 n'est pas attribuée à une société, elle est utilisée comme adresse de bouclage dans tous les réseaux. Cette adresse sert à tester le fonctionnement de votre carte réseau. Un ping 127.0.0.1 doit retourner un message correct. Le paquet envoyé avec cette adresse revient à l'émetteur. Toutes les adresses de type 127.X.X.X ne peuvent pas être utilisées pour des hôtes. La valeur de 'x' est indifférente.
Adresses IP réservées – Réseaux locaux privés
Il arrive fréquemment dans une entreprise ou une organisation qu'un seul ordinateur soit relié à internet, c'est par son intermédiaire que les autres ordinateurs du réseau accèdent à internet (on parle généralement de Proxy ou de passerelle).
Dans ce cas de figure, seul l'ordinateur relié à internet a besoin de réserver une adresse IP auprès de l'ICANN. Toutefois, les autres ordinateurs ont tout de même besoin d'une adresse IP pour pouvoir communiquer ensemble en interne.
Ainsi, l'ICANN a réservé une poignée d'adresses dans chaque classe pour permettre d'affecter une adresse IP aux ordinateurs d'un réseau local relié à internet sans risquer de créer des conflits d'adresses IP sur le réseau des réseaux. Il s'agit des adresses suivantes :
Adresses IP privées de classe A : 10.0.0.1 à 10.255.255.254, permettant la création de vastes réseaux privés comprenant des milliers d'ordinateurs.
Adresses IP privées de classe B : 172.16.0.1 à 172.31.255.254, permettant de créer des réseaux privés de taille moyenne.
Adresses IP privées de classe C : 192.168.0.1 à 192.168.0.254, pour la mise en place de petits réseaux privés.
Masque de sous réseau Pour identifier le réseau auquel appartient un ordinateur, on utilise un « masque ». Par exemple, si un ordinateur a la config suivante : IP : 134. 3 . 9 .7 Masque : 255.255. 0 .0 En faisant un « ET » logique entre l’IP et le masque, on obtient 134 . 3 . 0 .0 (Exo : Le vérifier en convertissant Ip et masque en binaire et faire l’opération logique)
Lorsqu'on configure un réseau, on parle souvent de masque de sous réseau qui permet à un ensemble d’ordinateurs de communiquer : ils se « verront » ou non à l’intérieur des favoris réseau. Suivant le masque, des restrictions d’accès sont appliquées.
Supposons par exemple que vous souhaitez créer un réseau local privé avec 3 ordinateurs. L’adresse IP que vous choisirez pour vos ordinateurs seront de classe C et parmi les adresses autorisées par l’iCANN, à savoir par exemple :
55
ORDI1 :192.168.0.1 ORDI2 :192.168.0.2 ORDI3 :192.168.0.3 Le masque de sous réseau sera 255.255.255.0 A quoi cela correspond t-il ? Eh bien c'est simple. Ce masque de sous réseau va permettre aux ordinateurs ayant une adresse IP ayant 3 premiers octets identiques de communiquer ensemble (partager des répertoires, imprimer …etc) Supposons maintenant que vous voulez créer un deuxième réseau local avec 4 ordinateurs : ORDI4 :192.168.0.17 ORDI5 :192.168.0.18 ORDI6 :192.168.0.19 ORDI7 :192.168.0.20 Si vous utilisez le même masque que précédemment, tout le monde va se « voir ». En conséquence, il faut modifier le masque et les adresses IP. Voici une possibilité : Masque pour ORDI 1 2 et 3 : (on considère uniquement le dernier octet) IP : 192.168.0.1 et Masque : 255 255 255 240 :
IP192.168.0 0 0 0 0 0 0 0 1
Masque 255.255.255
1 1 1 1 0 0 0 0
Résultat 192.168.0
0 0 0 0 0 0 0 0
Résultat du masque : 192.168.0.0 : correspond à l’adresse du 1er sous réseau Masque pour ORDI 4 à 7 (on considère uniquement le dernier octet) IP : 192.168.0.17 et masque : 255 255 255 240
IP192.168.0 0 0 0 1 0 0 0 1
Masque 255.255.255
1 1 1 1 0 0 0 0
Résultat 192.168.0
0 0 0 1 0 0 0 0
Résultat : 192.168.0.16 : correspond à l’adresse du 2ème sous réseau. Exercices : A- vérifier, en appliquant le masque, que les ordinateurs 2 et 3 appartiennent au 1er réseau (adresse 192.168.0.0) et les ordi 5,6,7 appartiennent au 2ème réseau B- Combien d’ordinateurs pourra-t-on mettre dans le réseau 1 ? le réseau 2 ? Combien y a-t-il de réseaux différents avec cette configuration du masque ? C- On veut maintenant pouvoir mettre 30 ordinateurs max par réseau Quel masque choisirez vous ?
56
Quel est le nombre max de réseau que vous aurez ? Quelle est l’adresse (de base) des 4 premiers réseaux ? D- Donner la classe, le nombre de sous réseaux et d’ordinateurs par sous réseau pour : Ip = 172.18.1.1 Mask = 255.255.240.0. Lister les sous réseaux Eléments de réponses : B- 2^4-2 ordi soit 14 ordinateurs / réseau 2^4 = 16 réseaux. C-Pour 30 ordis, il faut 5 bits mini soit 2^5 -2 = 30 , d’où le dernier octet du masque : 111 0 0 0 0 0 = 224 Le masque est donc : 255 255 255 224 Le nombre max de réseaux est 2^3 = 8 (3 bits à 1 du dernier octet du masque ) Adresse de base réseau 1 : 192.168.0.0 000 0 0 0 0 Adresse de base réseau 2 : 192. 168. 0 . 32 001 0 0 0 0 Adresse de base réseau 3 : 192. 168 .0 . 64 010 0 0 0 0 Adresse de base réseau 4 : 192. 168. 0 . 96 011 0 0 0 0 Note : Une adresse de réseau est toujours de base, en général on dit juste « adresse du réseau » (ou adresse sous réseau) On notera que pour chaque sous réseau, deux adresses sont réservées et ne doivent pas être affecté à un ordi, c’est pour cela qu’on soustrait 2 à chaque fois. Ces deux adresses correspondent à l’adresse du réseau (base) et à l’adresse « brodcast » : Dans notre dernier cas, pour masque 255.255.255.224 : Pour réseau 1 : 192.168.0.0 adresse sous réseau 1 (non affectable) 192.168.0.1 à 192.168.0.30 : affectables pour 30 ordis 192.168.0.31 adresse broadcast (non affectable) L’adresse broadcast est réservée pour l’envoi des informations à l’ensemble des ordinateurs du sous réseau en question.
Pour réseau 2 ; 192.168.0.32 adresse sous réseau 2 (non affectable) 192.168.0.33 à 192.168.0.62 affectables pour 30 ordis 192.168.0.63 adresse broadcast (non affectable) D : nb_réseaux = 16 nb_ordis = 4094 (2^12) Classe B Masque : 255 255 240 0 (255 255 11110000 00000000) Adresse base sous réseau 1 : 172.18.0. 0 ( 172 18 00000000 00000000) Broadcast du sous réseau 1 : 172.18.15.255 ( 172 18 00001111 11111111) Adresse base sous réseau 2 : 172.18.16.0 ( 172 18 0001 0000 00000000)
Compléments
Notion d’adresse physique : adresse MAC
Deux cartes réseaux qui communiquent s'échangent des messages (suite d'octets) appelés trames (« frame » en anglais).
57
Tous les postes connectés au même câble reçoivent le message, mais seul celui à qui il est destiné le lit. Comment sait-il que cette trame lui est adressée ? Il reconnaît l'adresse de destination, contenue dans la trame comme étant la sienne. Comment sait-il qui lui a envoyé la trame ? La trame contient aussi l'adresse de l'émetteur.
L'adresse correspond à l'adresse de la carte réseau. On parle d'adresse physique, d'adresse MAC (Media Access Control)
L'adresse d'une carte réseau correspond à l'adresse d'un poste et d'un seul. Or les postes sont généralement regroupés en réseau. Comment identifier le réseau auquel appartient le poste ?
Il faut une adresse logique qui soit indépendante de l'adresse physique. C'est ce que proposent le protocole IP .
Pourquoi identifier le réseau ?
Pour permettre à 2 postes qui ne sont pas connectés au même réseau de communiquer.
Cela est impossible avec une adresse MAC, il faut une adresse de niveau supérieur, comme nous le verrons un peu plus loin et surtout avec le routage IP.
Le message véhiculé par la trame va contenir une autre adresse destinataire dont un des objectifs sera de définir le réseau destinataire du message. On appelle le message contenu dans une trame un paquet.
Ce qu'il nous faut savoir à ce stade, c'est qu'une machine sait que le paquet n'est pas destiné au réseau si l'adresse réseau de destination est différente de la sienne, dans ce cas elle envoie le paquet à une machine spéciale dont le rôle est d'acheminer les paquets qui sortent du réseau.
Cette machine s'appelle une passerelle (gateway) dans la terminologie IP ou un routeur
Pour pouvoir être correctement transmis, le paquet va être mis dans une trame avec une adresse MAC de destination et une adresse MAC d'émission.
On dit qu'un paquet IP est encapsulé dans une trame.
Mais pour que tout cela fonctionne, il faut un mécanisme qui permettra de passer d'une adresse logique à une adresse physique, et réciproquement.
Résolution d'adresses logiques en adresses physiques
Toute machine sur un réseau IP et Ethernet a donc 2 adresses, une adresse MAC et une adresse IP.
Les processus de niveaux supérieurs utilisent toujours l'adresse IP et donc lorsqu'un processus communique avec un autre processus, il lui envoie un message dont l'adresse destinataire est une adresse IP, mais pour pouvoir atteindre la carte réseau du destinataire, il faut connaître son adresse MAC. Comment faire ?
58
C'est le rôle du protocole ARP (Adress Resolution Protocol) Routage
Dans un réseau une machine ne peut communiquer physiquement qu'avec des machines connectées au même support physique. Pour communiquer avec des machines au delà de ce support il faut des machines charnières (routeurs) qui sont connectées physiquement aux différents supports.
Le rôle d'une machine charnière est de décider si les trames qui lui arrivent doivent ou non la traverser et sur quel support il faut les envoyer.
A partir de quels éléments cette machine peut-elle décider ?
Admettons qu'elle décide à partir des adresses MAC. L'adresse MAC ne contient aucun élément permettant d'identifier l'appartenance d'une machine à un réseau. Donc pour décider le passage ou non d'une trame, la machine charnière doit construire pour chaque support physique sur lequel elle est connectée une table des adresses MAC partageant ce support, et lorsqu'une trame arrive, regarder à quelle table appartient l'adresse destinataire pour envoyer cette trame sur le bon support. C'est ainsi que travaille un pont ou un commutateur de trames.
Mais quelles sont les limites d'une telle méthode ?
Elle n'est valable que pour un petit nombre de réseaux interconnectés. Transposez là sur internet. Il faudrait que les machines charnières gèrent des tables d'adresses comportant autant d'adresses MAC que de machines interconnectées. En effet essayez d'imaginer 2 postes séparés par plusieurs machines charnières et voulant communiquer. C'est impossible à gérer. Le problème vient du fait qu'en utilisant l'adresse MAC on interconnecte des postes et non des réseaux, d'où l'intérêt d'un système d'adressage intégrant la notion de réseau.
Avec IP une machine appartient à un réseau qu'elle connaît grâce à la partie réseau de son adresse. Lorsque cette machine adresse un paquet, elle regarde l'adresse IP du destinataire, si la partie réseau de cette adresse est différente de la sienne, elle transmet son paquet au routeur qu'on lui a désigné (dans IP la terminologie est "gateway" soit "passerelle"). Ce routeur prend sa décision de routage en fonction de la partie réseau de l'adresse du destinataire, les tables d'adresses qu'il gère sont donc largement moins importantes que les tables gérées par des ponts.
Comment cependant faire transiter des paquets entre 2 machines séparées par plusieurs routeurs?
Simplement chaque routeur doit connaître l'adresse du routeur suivant que doit emprunter le paquet pour arriver à destination. Ainsi le paquet arrive en sautant de routeur en routeur jusqu'à destination.
Mais concrètement comment ça marche ? La machine émettrice construit un paquet avec une adresse IP destinataire hors réseau. Elle l'encapsule dans une trame avec comme adresse MAC destinataire l'adresse du routeur. La couche 2 du routeur lit la trame qui lui est adressée et la transmet à la couche 3 IP.
Celle-ci récupère le paquet et s'aperçoit que le paquet ne lui est pas adressé, elle consulte sa table de routage, décide sur quelle nouvelle interface réseau le paquet doit être transmis, encapsule le paquet dans une nouvelle trame, et ainsi de suite jusqu'à destination.
59
Pourquoi s’encombrer de l’adresse MAC ? Le décodage d’une information est 1000 fois plus rapide avec une adresse matérielle qu’une adresse logicielle. La carte réseau ou le routeur décode donc très rapidement une trame avec une adresse MAC et peut savoir très rapidement si le paquet lui est adressé ou non (gain de temps énorme dans le traitement). Exercice D : (liste des sous réseaux) Adr Réseau. Adresse des ordis Adresse brodcast 172.18.0.0 172.18.0.1 - 172.18.15.254 172.18.15.255 172.18.16.0 172.18.16.1 - 172.18.31.254 172.18.31.255 172.18.32.0 172.18.32.1 - 172.18.47.254 172.18.47.255 172.18.48.0 172.18.48.1 - 172.18.63.254 172.18.63.255 172.18.64.0 172.18.64.1 - 172.18.79.254 172.18.79.255 172.18.80.0 172.18.80.1 - 172.18.95.254 172.18.95.255 172.18.96.0 172.18.96.1 - 172.18.111.254 172.18.111.255 172.18.112.0 172.18.112.1 - 172.18.127.254 172.18.127.255 172.18.128.0 172.18.128.1 - 172.18.143.254 172.18.143.255 172.18.144.0 172.18.144.1 - 172.18.159.254 172.18.159.255 172.18.160.0 172.18.160.1 - 172.18.175.254 172.18.175.255 172.18.176.0 172.18.176.1 - 172.18.191.254 172.18.191.255 172.18.192.0 172.18.192.1 - 172.18.207.254 172.18.207.255 172.18.208.0 172.18.208.1 - 172.18.223.254 172.18.223.255 172.18.224.0 172.18.224.1 - 172.18.239.254 172.18.239.255 172.18.240.0 172.18.240.1 - 172.18.255.254 172.18.255.255
