Vous êtes sur la page 1sur 82

UNIVERSITE IBN TOFAIL Facult des Sciences Dpartement dInformatique Kenitra

Filires: SMI/SMA Semestre 4 Cours DInformatique IV


Faitpar: Professeur:YoussefFAKHRI FAKHRIYoussef@univibntofail.ac.ma

Anne Universitaire 2010/2011

Sommaire:

Chapitre 1 :Introduction au langage HTML

Chapitre 2 :Les Rseaux: Principes fondamentaux

Chapitre 3 :Initiation Internet

ChapitreI IntroductionaulangageHTML

Table des matires


Introduction au langage HTML ................................................................................................... 3 1. Dfinitions de quelques termes rattachs au Web .............................................................. 3 2. Structure dun document HTML ........................................................................................ 4 3- -Prsentation 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. Llment 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 droulante : (<select> .................................................................................. 32 7. Les boutons radio ou les boutons doption : ............................................................ 33 8. Les cases cocher .................................................................................................... 34 10Introduction aux feuilles de styles:............................................................................... 37 1. Syntaxe CSS: ............................................................................................................ 38 2. Regroupement de proprits: ................................................................................... 38 3. Le slecteur class:..................................................................................................... 38 4. Le slecteur id .......................................................................................................... 39 5. Autres exemples ....................................................................................................... 40

Introduction au langage HTML


1. Dfinitions de quelques termes rattachs au Web
Le World Wide Web : Conu par Tim Berners-Lee en 1989, est aujourd'hui le systme hypertexte le plus vaste et le plus utilis : il compte des milliards de documents rpartis dans le monde entier, lesquels sont consults par des millions de personnes travers le rseau Internet

Un systme hypertexte est un systme contenant des nuds lis entre eux par des hyperliens permettant de passer automatiquement d'un nud un autre. Un document hypertexte est donc un document qui contient des hyperliens et des nuds. Un nud est une "unit minimale d'information". Lorsque les nuds ne sont pas uniquement textuels, mais aussi audiovisuels, on peut parler de systme et de documents hypermdias. Un hyperlien ou lien hypertexte Cest une rfrence dans un systme hypertexte permettant de passer automatiquement d'un document consult un document li. Les hyperliens sont notamment utiliss 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 conue pour tre consulte 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 constitue 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. Cest une chane de caractres permettant dindiquer un protocole de communication et un emplacement pour toute ressource du Web. HTML (pour HyperText Markup Language) Cest un langage informatique permettant de dcrire le contenu dun document (titres, paragraphes, disposition des images, etc.) et dy inclure des hyperliens.. Les documents HTML sont les ressources les plus consultes du Web. Cest un langage de balisage qui permet denrichir le contenu dun texte.

diteur HTML (ou diteur Web) : Cest un logiciel conu pour faciliter lcriture de documents HTML et de pages Web en gnral. Site Web Cest un ensemble de pages Web hyperlies entre elles et mises en ligne une adresse Web Navigateur Web Cest un logiciel conu 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 mtaphores sont ou ont t utilises. Le premier terme utilis tait browser, comme en anglais. Par la suite, on a vu fureteur (surtout utilis au Qubec), butineur, brouteur, arpenteur, fouineur ou explorateur (inspir d'Internet Explorer).

2. Structure dun document HTML


Un document HTML commence toujours par la balise <html> et se termine par </html>. Cette balise dlimite le dbut et la fin dun document html. Il contient toujours des informations destines au navigateur. Ces informations sont contenues lintrieur des balises <head> et </head>. La balise <head> dlimite la section d'en-tte du document. lintrieur de la balise <head> on peut trouver la balise <title>. La balise <title> permet dafficher le titre de la page dans le navigateur. Elle se ferme par </title> A lintrieur des balises <body> et </body> on retrouve le contenu de votre document. La balise <body> dlimite le corps du document.

Exemple

Une fois que votre fichier est enregistr avec lextension .html ou .htm vous pouvez utiliser votre navigateur pour visualiser le rsultat de votre page Web, pour ce faire, vous pouvez utiliser les deux manires faons Premires faon 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 Deuxime faon Double cliquer sur licne de votre page Web (icne Internet Explorer qui porte le nom de votre page) Voici le rsultat affich en interprtant le code prcdent
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 apporte, votre page doit tre enregistre Si votre page est dj ouverte ave votre navigateur, il suffit de faire Actualiser dans votre navigateur pour que les modifications saffiche par le navigateur.

3- -Prsentation de quelques balises de mise en forme du texte :


Dfinition : Un lment html est un mot clef qui correspond une commande pour un fureteur. Ainsi llment h6 va scrire lintrieur la balise douverture <h6> et la balise de fermeture </h6> La balise <p> permet de dfinir un paragraphe. Les balises <h1> <h6> permettent de dfinir les titres dans un document html

Les styles avec HTML Les balises de styles permettent entre autre de modifier la couleur, la taille et le taille du texte dun 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>

Voici quelques autres balises pour la mise en forme du texte : Balises <b> < i> <u> <pre> <big> <small> <sup> <sub> <adress> <blockquote> Rles Permet de mettre le texte en GRAS Permet de mettre le texte en italique Permet de mettre le texte en soulign Permet dafficher du texte prformat Permet dafficher du texte en grand Permet dafficher du texte en plus petit Affiche le texte en indice Affiche le texte en exposant Insrer une adresse dans un document html Permet de mettre en valeur un paragraphe

4-

Les listes avec HTML :

HTML supporte 3 types de listes : Les listes numrotes Les listes non numrotes Les listes de dfinition. 1. Les listes numrotes (<ol> pour ordred list) Lexemple qui suit permet de dfinir une liste numrote

<html> <body> <h3>Une liste numrote:</h3> <ol> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> </body> </html>

Autres types de listes numrotes :

10

<html> <body> <h3>Une liste numrote:</h3> <ol type ="1" start ="5"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres majuscules </h4> <ol type ="A"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres minuscules </h4> <ol type ="a"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres romaines </h4> <ol type ="I"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> <h4> Une liste avec des lettres romaines </h4> <ol type ="i"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ol> </body> </html>

11

2. Les listes non numrotes (<ul> pour unordred list) <html> <body> <h4>Une liste non numrote:</h4> <ul type="disc"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ul> <h4>Une liste non numrote:</h4> <ul type ="square"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ul> <h4>Une liste non numrote:</h4> <ul type ="circle"> <li>Programmation structure</li> <li>Programmation objet</li> <li>Programmation Web</li> </ul> </body> </html>

12

3. Les listes de dfinition (<dl> pour list definition>

<html> <body> <h4>Une liste de dfinition:</h4> <dl> <dt>Style de programmation</dt> <dd>1-Programmation objet</dd> <dd>2-Programmation structure</dd> </dl> <h4>Une autre liste de dfinition:</h4> <dl> <dt>Langage de programmation</dt> <dd>C++</dd> <dd>Java</dd> <dt>Bases de donnes</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 dplacer lintrieur dune page Web, dune page Web une autre lintrieur dun mme site Web ou dun site Web un autre. La balise qui permet dcrire 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 fentre </p> <a href="liste1.html" target="_blank">exemple</a></br> <a href ="http://www.clg.qc.ca"> mon cegep </a></br> <a href="mailto:syacoub@clg.qc.ca"> 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 nest pas dans votre dossier qui contient votre fichier principal, alors il faut indiquer le chemin daccs du fichier de lien. Il est fortement recommander de mettre tous vos fichiers html et toutes vos images dans le mme dossier. Ainsi, vous nallez pas avoir de mauvaises surprises. Insertion dun lien lintrieur dune mme page : Lorsque vous tes en bas de page et que vous voulez revenir en haut de celle-ci vous utilisez alors un lien lintrieur dune mme page. Une ancre nomme est une position dans une page qui peut tre utilise comme rfrence. Elle est invisible dans la page Web, seul le crateur de la page connait sa position. Un lien vers une ancre nomme commence toujours par le symbole # <a name ="debut"> Definition </a> Du texte et du texte <a href="#debut"> retour la Dfinition </a>

14

6-

Les images : (<img>)


src="url" " alt ="du texte" />

<img

url : dsigne le nom de limage avec son emplacement. Lattribut alt indique lutilisateur de la page web le texte afficher si limage ne saffiche 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 limage 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 crer plusieurs zones sur une mme image. On peut donc crer plusieurs liens sur une mme 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 lintrieur de la balise map. Cette balise permet de dfinir une zone lintrieur de limage. 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 dfinir les coordonnes de la zone Pour un rectangle : Indique les coordonnes des coins suprieurs gauche et infrieur droit de la zone rect Pour un cercle. Indique les coordonnes du centre du cercle et la dimension du rayon de ce mme cercle pour la valeur circle href : dfinit la page de destination du lien correspondant la zone En absence de lien, utiliser lattribut nohref="nohref"

17

18

7-

Les cadres ou les frames :

Les frames sont les cadres crs dans la fentre de votre navigateur. Chaque cadre peut recevoir un fichier HTML diffrent. 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 rpartit les cadres dans la fentre deux fichiers HTML pour le contenu de chaque cadre Les attributs de la balise <frameset> : cols="pixels / %, pixels / %" cre des colonnes dont la largeur peut tre spcifie en pixels ou en pourcentage de la fentre totale. Les dimensions pour chaque colonne sont spares par des virgules. (on note aussi qu'il est possible d'indiquer le signe "*" pour indiquer que la colonne occupe l'espace restant). cre des cadres horizontaux (lignes). Il n'est pas possible d'utiliser cols et rows dans le mme frameset. indique l'espace entre les deux cadres. paisseur de la bordure des cadres. couleur de la bordure des cadres paisseur de la bordure entre les cadres.

rows="pixels / %, pixels / %" framespacing="pixels" frameborder="pixels" bordercolor="code hxadcimal" border="pixels"

html> <html> <frameset rows="30%,70%"> <frame> <frame> </frameset> </htm

19

L'attribut rows="hauteur1,hauteur2,...,hauteurN" dfinit la hauteur des diffrentes fentres 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" dfinit la largeur des diffrentes fentres en cas de division verticale. Lhauteur s'exprime en pixels ou en %. Dans ce cas, on veillera ce que le total soit gal 100%; Intgration 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 insrer un fichier html dans un cadre on utilise lattribut src de la balise frame Voici le contenu de chacune des pages hml insre 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:syacoub@clg.qc.ca"> Me contacter </a> </body> </html>

Q3.html <html> <body> <p>voici un texte prformat </p> <pre> Placez votre main sur un pole une minute et a vous semble durer une heure. Asseyez vous auprs 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 rsultat dans le navigateur :

22

23

8-

Les Tableaux :

HTML offre la possibilit de crer des tableaux. Un tableau constitue la principale possibilit de matriser 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 divise en cases ou cellules

1. Les principales balises


<table></table> Cette balise est la commande principale pour dfinir le tableau en entier. 1. 2. 3. 4. <tr></tr> (=table row) dfinissent chacune des lignes. <td> </td> (=table data) entoure un lment de tableau. <th> </th> (=table header) est un lment de titre. <caption ></caption > permet de faire prcder 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 fentre du navigateur. <table width=200> fixe la largeur du tableau exactement 200 pixels quelle que soit la largeur de la fentre du navigateur. <table cellpadding=n> dfini l'espace en pixels entre l'objet et le contour d'une cellule <table cellspacing=n> dfini l'paisseur du trait en pixels entre les cellules <table bgcolor="#rrggbb"> dfini 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 prcis. <tr valign=top | middle | bottom > tous les contenus des cellules de la ligne sont placs en haut , au centre ou en bas. <tr bgcolor="#rrggbb"> dfini 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 concerne a l'alignement horizontal prcis. <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"> dfinit la couleur de fond de la cellule. <html> <body> <h4>Les fonds de cellules:</h4> <table border="1"> <tr> <td bgcolor="red">Ma premire 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 prcedente</td> </tr> </table> </body> </html>

26

3. Regroupement de cellules (attributs de la balise <td>)


Regroupement de colonnes : Utiliser lattribut 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">numro 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 sptembre 2009 </td> <td align ="right"> 40 $</td> <td> OK </td> </tr> </table> </body> </html>

27

Regroupement de lignes : utiliser lattribut 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>Systmes 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> Rponse:

29

9-

Les formulaires:

1. Introduction
Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'lments interactifs permettant un dialogue avec les internautes. On peut envoyer un formulaire soit un serveur qui permettra de restituer les donnes, que lutilisateur 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 mthode pour envoyer un formulaire par courrier est tudie.

2. La balise form et ses attributs


La balise form est la balise qui permet denvoyer un formulaire, elle se prsente sous la forme suivante : <form method="post" action="mailto:syacoub@clg.qc.ca" enctype="text/plain"> </form > Attributs de la balise from Lattribut METHOD permet de prciser quelle mthode denvoi est utilise. Il existe deux mthodes : POST, qui est la plus utilise et GET. La diffrence entre ces deux mthode se situe cot serveur. Lattribut ACTION, permet de prciser ladresse dexpdition du formulaire. Cette adresse peut tre une URL dun serveur Web ou une adresse de courriel. Lattribut ENCTYPE, qui ne peut tre utilis quavec la mthode POST, spcifie lencodage utilis pour le contenu du formulaire. text/plain veut dire texte lisible. Pour construire un formulaire, il est important de connatre les lments dun formulaire. La balise <form> doit avoir </form>

3. Llment ligne de texte :


La ligne de texte est un espace rserv pour entrer du texte court, comme par exemple, votre nom, prnom, adresse, courriel etc. la balise permettant de dfinir 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 donne 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="syacoub@clg.qc.ca" />

<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> Lattribut rows permet de dfinir le nombre de lignes de la zone de texte lattribut cols permet de dfinir 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 dfinir un bouton de commande, on utilise la commande INPUT de la manire suivante : <input type ="submit" name = "bouton1" value = " Envoyer" /> <input type= "reset" name = "bouton2" value =" Annuler " / > Le bouton SUBMIT a pour rle de transmettre toute linformation contenue dans le formulaire. Le bouton RESET a pour rle dannuler laction entreprise et de mettre les valeurs par dfaut du formulaire. Voici ce que donne lexemple prcdent :

6. La liste droulante : (<select>


Pour inclure dans un formulaire HTML une liste droulante, 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 rsultat de cette liste :

Attributs de select Lattribut size permet de fixer le nombre dlments de la liste qui seront affichs. Par dfaut il est gal 1. Si llment a affich nest pas indiqu alors la liste affiche le premier lment. Lattribut selected permet de faire afficher llment voulu en dbut de liste, dans notre exemple mathmatique est affich. Remarquez galement que SIZE ntant pas prcis, il est 1 par dfaut

32

<select name="liste2 " > <option > Informatique </option> <option > Physique </option> <option selected > Mathmatiques </option> <option > Franais </option> </select> Voici le rsultat de la liste

La balise <select> doit avoir </select>

7. Les boutons radio ou les boutons doption :


Les boutons d'option, aussi appels boutons radio, ont comme particularit qu'une seule option la fois peut tre active (le "ou" exclusif). Pour permettre la dfinition dun 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="mathmatique" /> Mathmatique <input type="radio" name="bouton1" value= "informatique"/> Informatique <input type="radio" name="bouton1" value="Franais" /> Franais Puisque les boutons d'option, ont comme particularit qu'une seule option la fois peut tre active,il faut donc que tous les boutons aient le mme NAME. Voici le rsultat de lexemple prcdent :

Remarque : Lattribut checked permet de slectionner un bouton un bouton radio par dfaut Exemple <input type="radio" name="bouton1" value="mathmatique"/> Mathmatique <input type="radio" name="bouton1" value= "informatique" checked/> Informatique <input type="radio" name="bouton1" value="Franais"/> Franais

33

Donne le rsultat :

8. Les cases cocher


La diffrence entre les boutons radio et les cases cocher est que pour ces dernires (les cases cocher) plusieurs peuvent tre slectionnes en mme temps. Pour inclure des cases cocher (checkbox ) dans un formulaire, on utilise le mme principe que les boutons radio, avec les diffrences suivantes : Le TYPE est checkbox Toutes les cases doivent avoir des NAME diffrents Loption checked est utilise de la mme manire Exemple
<input type="checkbox" name="bouton1" value="mathmatique"/> Mathmatique <input type="checkbox" name="bouton2" value= "informatique" checked/> Informatique <input type="checkbox" name="bouton3" value="Franais"/> Franais <input type="checkbox" name="bouton4" value="Anglais"/> Anglais

Voici le rsultat de lexemple prcdent :

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:syacoub@clg.qc.ca" method = "post" enctype="text/plain" > <input type="text" name="email" size="30" maxlength="40" value="syacoub@clg.qc.ca" /> <p>La Zone de texte: </p> <textarea name = "commentaire" cols = "30" rows ="2" > enterz votre commentaire ici </textarea> <p>La liste droulante: taille =2, valeur par dfaut '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 droulante: taille =1, valeur par dfaut 'Mathmatiques' </p> <select name="liste2 " > <option > Informatique </option> <option > Physique </option> <option selected ="selected"> Mathmatiques </option> <option > Franais </option> </select><br /> <p>Les boutons Radio </p> <input type="radio" name="bouton1" value="mathmatique" /> Mathmatique <input type="radio" name="bouton1" value= "informatique" checked ="checked" /> Informatique <p>Les Checkbox </p> <input type="checkbox" name="bouton1" value="mathmatique"/> Mathmatique <input type="checkbox" name="bouton2" value= "informatique" checked ="checked" /> Informatique <input type="checkbox" name="bouton3" value="Franais" /> Franais <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 rsultat

36

10-

Introduction aux feuilles de styles:

Les feuilles de styles (en anglais "Cascading Style Sheets", abrg CSS) sont un langage qui permet de grer la prsentation d'une page Web. Le langage CSS est une recommandation du World Wide Web Consortium (W3C), au mme titre que HTML ou XML. Les styles permettent de dfinir des rgles appliques un ou plusieurs documents HTML. Ces rgles portent sur le positionnement des lments, l'alignement, les polices de caractres, les couleurs, les marges et espacements, les bordures, les images de fond, etc. Le but de CSS est sparer la structure d'un document HTML et sa prsentation. En effet, avec HTML, on peut dfinir la fois la structure (le contenu et la hirarchie entre les diffrentes parties d'un document) et la prsentation. Mais cela pose quelques problmes. Avec le couple HTML/CSS, on peut crer des pages web ou la structure du document se trouve dans le fichier HTML tandis que la prsentation 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: idal 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 prsente comme trois lments: selector { property: value } selector : reprsente un lment du code HTML (exemple les balises HTMl: body, h1, p ) proprety: la proprit que l'on souhaite changer (color background, font-size, font-family ..) value: reprsente la valeur de la proprit Chaque instruction se termine par un point virgule (;) Les accolades dterminent les proprits dun slecteur. Exemple: p { text-align: center; color: black; font-family: arial,"Courrier New"; }

2. Regroupement de proprits:
On peut appliquer les mmes valeurs de proprits un ensemble de selectors, il suffit de les sparer par une virgule. h1,h2,h3,h4,h5,h6 { color: green

} 3. Le slecteur class:
Il arrive que nous ayons par exemple deux tableaux dans notre page HTML et nous ne voulons pas appliquer les mmes proprits 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 slecteur id
la place dutiliser le slecteur class, on peut galement utiliser le slecteur id. Lavantage du id par rapport class est quil 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-tte h1</h1> <h2>en-tte 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 limage se rpte sur tourte la page il faut utiliser 40

background-repeat: repeat background-repeat: repeat-y background-repeat: repeat-x lattribut 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>Cest len-tte 1</h1> <h2> Cest len-tte 2</h2> <p> cest un paragraphe</p> </body> </html>

/* rptition verticale seulement */ /* rptition horizontale seulement */

/>

41

<html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>Cest len-tte 1</h1> <h2> Cest len-tte 2</h2> <h3> Cest len-tte 3</h3> </body> </html>

42

ChapitreII LesRseaux Principesfondamentaux

Historique: L'histoire des rseaux et des tlcommunications pourrait se rsumer une perptuelle course au dbit 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 dbits disponibles sont faibles. Les informations se dplacent plus vite dans un ordinateur que dans sa priphrie, plus vite dans sa priphrie qu'entre deux tages, plus vite entre deux tages qu'entre deux btiments, plus vite entre deux btiments qu'entre deux villes... Abolir les distances, c'est lutter contre ces lois et pnaliser le moins possible le dbit. Et raliser le vieux rve des rseaux : transfrer aussi vite des informations entre deux ordinateurs situs 200 km l'un de l'autre qu' l'intrieur d'un ordinateur ! Le principe du rseau local est apparu dans les annes 70 pour interconnecter les quipements de mini-informatique (terminaux, imprimantes, disques ...). En effet, la plupart des changes de donnes dans une entreprise s'effectuent localement, voire par groupes de travail. C'est pourquoi, avec la gnralisation des micro-ordinateurs la fin des annes 80, le rseau local a affirm sa vocation.
IProtocole de communication

Un protocole est une mthode standard qui permet la communication entre des processus (s'excutant ventuellement sur diffrentes machines), c'est--dire un ensemble de rgles et de procdures respecter pour mettre et recevoir des donnes sur un rseau. Il en existe plusieurs selon ce que l'on attend de la communication. Certains protocoles seront par exemple spcialiss dans l'change de fichiers (le FTP), d'autres pourront servir grer 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 gnrique qui regroupe en fait un ensemble de protocoles, c'est dire des rgles de communication. A Principe dune transmission Analogie avec la transmission dune lettre par la poste : sur le rseau

44

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'expditeur (la votre).
Ce sont des rgles utilises par tout le monde. C'est un protocole.

Sur Internet, c'est peu prs la mme chose: chaque message (chaque petit paquet de donnes) est envelopp par IP qui y ajoute diffrentes informations: l'adresse de l'expditeur (vtre adresse IP), l'adresse IP du destinataire, diffrentes donnes supplmentaires (qui permettent de bien contrler l'acheminement du message).

L'adresse IP est une adresse unique attribue chaque ordinateur sur Internet (c'est--dire qu'il n'existe pas sur Internet deux ordinateurs ayant la mme adresse IP). De mme, l'adresse postale (nom, prnom, rue, numro, code postal et ville) permet d'identifier de manire unique un destinataire. Tout comme avec l'adresse postale, il faut connatre au pralable l'adresse IP de l'ordinateur avec lequel vous voulez communiquer. L'adresse IP se prsente le plus souvent sous forme de 4 nombres (entre 0 et 255) spars par des points. Par exemple: 204.35.129.3

Le routage

45

Pour envoyer votre lettre, vous la postez dans la bote 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 mme chose sur Internet ! Vous dposez le paquet IP sur l'ordinateur le plus proche (celui de votre fournisseur d'accs en gnral). Le paquet IP va transiter d'ordinateur en ordinateur jusqu' atteindre le destinataire.

Un routeur peut tre un ordinateur ddi ou un botier charg de transmettre tous Les Ports les paquets dun rseau vers un autre rseau ou internet.

Avec IP, nous avons de quoi envoyer et recevoir des paquets de donnes d'un ordinateur l'autre. Imaginons maintenant que nous ayons plusieurs programmes qui fonctionnent en mme temps sur le mme ordinateur: un navigateur, un logiciel d'email et un logiciel pour couter la radio sur Internet. Si l'ordinateur reoit un paquet IP, comment savoir quel logiciel donner ce paquet IP ?

Comment savoir quel logiciel est destin ce paquet IP ? Le navigateur, le logiciel de radio ou le logiciel d'email ?

46

Pour cela, on attribut numro unique chaque logiciel dans l'ordinateur appel numro de PORT

Ainsi, l'adresse IP permet de s'adresser un ordinateur donn, et le numro de port permet de s'adresser un logiciel particulier sur cet ordinateur.

Le protocole UDP/IP UDP/IP est un protocole qui permet justement d'utiliser des numros 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 donnes d'un ordinateur A un ordinateur B.

Avec UDP/IP, on peut tre plus prcis: on envoie des donnes 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):

47

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 dlivrer le paquet au bon logiciel (ici: au serveur HTTP). Les deux logiciels se contentent d'mettre et de recevoir des donnes ("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 faon unique une communication entre deux logiciels.

Le protocole TCP/IP
On peut donc maintenant faire communiquer 2 logiciels situs sur des ordinateurs diffrents. Mais il y a encore de petits problmes: 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 gnant : imaginez un ordre de dbit sur votre compte bancaire arrivant deux fois ou un ordre de crdit perdu ! Mme si le paquet arrive destination, rien ne vous permet de savoir si le paquet est bien arriv (aucun accus de rception). La taille des paquets IP est limite (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 !).

48

Voici le protocole de communication initi par TCP : Par exemple, pour envoyer

le message "Salut, comment a va ?", (Chaque flche reprsente 1 paquet IP):


SYN=1

ACK=1 SYN=1 ACK=1, SYN=0

A l'arrive, sur l'ordinateur 204.66.224.82, la couche TCP reconstitue le message "Salut, comment a va ?" partir des 3 paquets IP reus et le donne au logiciel qui est sur le port 80.

C'est pour cela qu'a t conu TCP. TCP est capable:


de faire tout ce que UDP sait faire (ports). de vrifier que le destinataire est prt recevoir les donnes. de dcouper les gros paquets de donnes en paquets plus petits pour que IP les accepte de numroter les paquets, et la rception de vrifier qu'ils sont tous bien arrivs, de redemander les paquets manquants et de les rassembler avant de les donner aux logiciels. Des accuss de rception sont envoys pour prvenir l'expditeur que les donnes sont bien arrives.

TCP/IP : Conclusion

49

Avec TCP/IP, on peut maintenant communiquer de faon fiable entre logiciels situs sur des ordinateurs diffrents. 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 donnes. 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 diffrents qui utilisent TCP/IP ou UDP/IP. L'avantage de TCP sur UDP est que TCP permet des communications fiables. L'inconvnient est qu'il ncessite une ngociation ("Bonjour, prt communiquer ?" etc.), ce qui prend du temps.

Format dune trame et organisation en couche

50

Dans la trame est empaquet le datagramme qui empaquette le segment qui empaquette la requette ou donne de lapplication. Cest la trame qui circule sur le rseau physique Autre reprsentation :

La donne, cest le texte ou limage que vous allez lire ou transmettre qui occupe un certain nombre de bits . Le segment est constitu de la DONNEE + dun entte TCP ou UDP qui est un mot sur 20 ou 24 octets permettant le contrle de la transmission (bits SYN, ACK, RST ) et dassurer larrive bon port de la donne. TCP fragmente le segment pour quil soit compatible avec la longueur max dun datagramme (do la notion de paquets dans une transmission IP). Il les r assemble la rception des paquets (un paquet datagramme- fait environ 1500 Octets (mme pas 2ko)) Le Datagramme est constitu du SEGMENT + un entte IP sur 20 ou 24 octets qui contient ladresse IP du destinataire et de lmetteur, ainsi que les informations pour la gestion de la fragmentation du datagramme. La trame est constitue du DATAGRAMME + entte trame sur 18 octets qui contient des informations dadressage physique (adresse MAC de la carte rseau), de synchronisation, format, contrle derreur (CRC). Cest la trame qui va circuler sur les lignes physique du rseau (cbles rseau) Note : Ladresse MAC (dans lentte de la trame) correspond ladresse physique de la carte rseau du destinataire ou du routeur, ne pas confondre avec ladresse IP qui est une adresse logique et permet la structuration en rseau des ordinateurs que nous allons maintenant voir :

Principe de Codage dune adresse IP Une adresse IP est une adresse 32 bits, gnralement note sous forme de 4 nombres entiers spars par des points. On distingue en fait deux parties dans l'adresse IP :

une partie des nombres gauche dsigne le rseau est appel ID de rseau (en anglais netID), Les nombres de droite dsignent les ordinateurs de ce rseau est appel ID d'hte (en anglais host-ID). RESEAU 1 RESEAU 2

51

HUB

Adresse du rseau 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 rseau 2 : 195. 0 . 0 . 0 il contient 4 ordinateurs : 195 . 0. 0 . 1 Host id = 0 0 1 . NetId = 195 195 . 0. 0 . 2 0 0 2

195 . 0. 0 . 3 0 0 3

195 . 0. 0 . 4 0 0 4

Ce qui distingue les ordinateurs du rseau 1 et du rseau 2, ce sont leur NetId (190 pour le rseau 1 et 195 pour le rseau 2) Le nombre dordinateurs max du rseau 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 utilises car rserves : 190 0 0 0 et 190 255 255 255 ) Idem pour le rseau 2. Host id ne dois jamais tre choisi avec tous les bits 0 ou tous les bits 1 car rserv. Combien de rseaux de ce type peut-on avoir ? Rponse : Cest le nombre de combinaisons possibles du Net Id, savoir : 2^8 = 256 rseaux diffrents possibles Classe de rseau : Afin de faciliter la recherche dun ordinateur, les rseaux sont normaliss et organiss en classe. On distingue 3 classes principales de rseaux : Classe A : (le tableau donne le format en BINAIRE) 0 xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx Rseau Ordinateurs Le nombre max dordinateurs dun rseau de classe A est de 2^24 2 = 16777214 Le nombre de rseau de classe A est 2^7 = 128 (126 en pratique, car 0 et 127 sont rservs) Note : le 1er bit du NetId est un 0: indique classe A. Exemple : 0 1000011 00000000 00001001 00000001 dcimal : 67 0 9 1 (Adresse IP= 67.0.9.1) Classe B : (le tableau donne le format en BINAIRE)
10 xxxxxx xxxxxxxx xxxxxxxx xxxxxxxx Rseau Ordinateurs

Le nombre max dordinateurs dun rseau de classe B est de 2^16 -2 = 65534 Le nombre de rseaux 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

52

Dcimal :

134

(Adresse IP = 134.3.9.7)

Classe C : (le tableau donne le format en BINAIRE)


110 xxxxx xxxxxxxx xxxxxxxx xxxxxxxx Rseau Ordinateurs

Le nombre max dordinateurs dun rseau de classe C est de 2^8 -2 = 254 Le nombre de rseaux de classe C est de 2^21 = 2097152 Note : les 3 premiers bits du netid sont 110 : indique Exemple : 110 00011 00000000 00000011 00000101 195 0 3 9

classe

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 rseau. En effet avec cette notation il est possible de rechercher dans un premier temps le rseau que l'on dsire atteindre puis de chercher un ordinateur sur celui-ci. Ainsi, l'attribution des adresses IP se fait selon la taille du rseau.

Classe Nombre de rseaux possibles A 126 B 16384 C 2097152

Nombre d'ordinateurs maxi sur chacun 16777214 65534 254

Les adresses de classe A sont rserves aux trs grands rseaux (IBM, Zerox, DEC, Hewlett-Packard), les adresses de classe B aux rseaux de taille moyenne ( microsoft en fait partie) tandis que l'on attribuera les adresses de classe C des petits rseaux

d'entreprise
Exercice : complter le tableau suivant

par

exemple.

Aide : vous devez convertir en binaire le premier octet pour dterminer la classe. En fonction de la classe, vous dterminez le netid et le hostId et dduirez donc les adresses min et max du rseau Classe Adresse IP dun ordinateur X du rseau 195.0.3.9 140.190.9.12 110.80.0.28 Adresse IP min du rseau 195.0.3.1 Adresse IP max du rseau 195.0.3.254 Net Id Host Id de lordinateur X 9

195.0.3

Correction : (on notera que lorsquon prend 254 cest pour ne pas avoir tous les bits de lHostid 1, cas particulier rserv) Classe Adresse IP dun ordinateur X du rseau C 195.0.3.9 B 140.190.9.12 A 110.80.0.28 Adresse IP min du rseau 195.0.3.1 140.190.0.1 110.0.0.1 Adresse IP max du rseau 195.0.3.254 140.190.255.254 110.255.255.254 Net Id Host Id de lordinateur X 9 9.12 80.0.28

195.0.3 140.190 110

53

Le premier octet de ladresse IP nous renseigne sur la classe : 1 <= Classe A <=126 0 0000001 01111110 (Note : 0 et 127 sont rservs*) 128 <= Classe B <=191 10 000000 10111111 192 <= Classe C <= 223 110 00000 11011111 224 <= Classe D <=239 spcifique (certains routeurs , multicast) 240 <= Classe E <=255 exprimental (usage futur) L'adresse de bouclage (loopback): l'adresse de rseau 127 n'est pas attribue une socit, elle est utilise comme adresse de bouclage dans tous les rseaux. Cette adresse sert tester le fonctionnement de votre carte rseau. 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 utilises pour des htes. La valeur de 'x' est indiffrente. Adresses IP rserves Rseaux locaux privs Il arrive frquemment dans une entreprise ou une organisation qu'un seul ordinateur soit reli internet, c'est par son intermdiaire que les autres ordinateurs du rseau accdent internet (on parle gnralement de Proxy ou de passerelle). Dans ce cas de figure, seul l'ordinateur reli internet a besoin de rserver une adresse IP auprs de l'ICANN. Toutefois, les autres ordinateurs ont tout de mme besoin d'une adresse IP pour pouvoir communiquer ensemble en interne. Ainsi, l'ICANN a rserv une poigne d'adresses dans chaque classe pour permettre d'affecter une adresse IP aux ordinateurs d'un rseau local reli internet sans risquer de crer des conflits d'adresses IP sur le rseau des rseaux. Il s'agit des adresses suivantes :

Adresses IP prives de classe A : 10.0.0.1 10.255.255.254, permettant la cration de vastes rseaux privs comprenant des milliers d'ordinateurs. Adresses IP prives de classe B : 172.16.0.1 172.31.255.254, permettant de crer des rseaux privs de taille moyenne. Adresses IP prives de classe C : 192.168.0.1 192.168.0.254, pour la mise en place de petits rseaux privs.

Masque de sous rseau Pour identifier le rseau 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 lIP et le masque, on obtient 134 . 3 . 0 .0 (Exo : Le vrifier en convertissant Ip et masque en binaire et faire lopration logique)

Lorsqu'on configure un rseau, on parle souvent de masque de sous rseau qui permet un ensemble dordinateurs de communiquer : ils se verront ou non lintrieur des favoris rseau. Suivant le masque, des restrictions daccs sont appliques.

Supposons par exemple que vous souhaitez crer un rseau local priv avec 3 ordinateurs. Ladresse IP que vous choisirez pour vos ordinateurs seront de classe C et parmi les adresses autorises par liCANN, savoir par exemple :

54

ORDI1 :192.168.0.1 ORDI2 :192.168.0.2 ORDI3 :192.168.0.3 Le masque de sous rseau sera 255.255.255.0 A quoi cela correspond t-il ? Eh bien c'est simple. Ce masque de sous rseau va permettre aux ordinateurs ayant une adresse IP ayant 3 premiers octets identiques de communiquer ensemble (partager des rpertoires, imprimer etc) Supposons maintenant que vous voulez crer un deuxime rseau 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 mme masque que prcdemment, tout le monde va se voir . En consquence, il faut modifier le masque et les adresses IP. Voici une possibilit : Masque pour ORDI 1 2 et 3 : (on considre uniquement le dernier octet) IP : 192.168.0.1 IP192.168.0 Masque 255.255.255 Rsultat 192.168.0 0 1 0 et Masque : 255 255 255 240 : 0 1 0 0 1 0 0 1 0 0 0 0 0 0 0 0 0 0 1 0 0

Rsultat du masque : 192.168.0.0

: correspond ladresse du 1er sous rseau

Masque pour ORDI 4 7 (on considre uniquement le dernier octet) IP : 192.168.0.17 et masque : 255 255 255 240 IP192.168.0 0 0 0 0 0 0 1 1 Masque 1 1 1 1 0 0 0 0 255.255.255 Rsultat 0 0 0 1 0 0 0 0 192.168.0 Rsultat : 192.168.0.16 : correspond ladresse du 2me sous rseau. Exercices : A- vrifier, en appliquant le masque, que les ordinateurs 2 et 3 appartiennent au 1er rseau (adresse 192.168.0.0) et les ordi 5,6,7 appartiennent au 2me rseau B- Combien dordinateurs pourra-t-on mettre dans le rseau 1 ? le rseau 2 ? Combien y a-t-il de rseaux diffrents avec cette configuration du masque ? C- On veut maintenant pouvoir mettre 30 ordinateurs max par Quel masque choisirez vous ? rseau

55

Quel est le nombre max de rseau Quelle est ladresse (de base) des 4 premiers rseaux ?

que

vous

aurez ?

D- Donner la classe, le nombre de sous rseaux et dordinateurs par sous rseau pour : Ip = 172.18.1.1 Mask = 255.255.240.0. Lister les sous rseaux Elments de rponses : B2^4-2 ordi soit 14 ordinateurs / rseau 2^4 = 16 rseaux. C-Pour 30 ordis, il faut 5 bits mini soit 2^5 -2 = 30 , do le dernier octet du masque : 111 0 0 0 0 0 = 224 Le masque est donc : 255 255 255 224 Le nombre max de rseaux est 2^3 = 8 (3 bits 1 du dernier octet du masque ) Adresse de base rseau 1 : 192.168.0.0 000 0 0 0 0 Adresse de base rseau 2 : 192. 168. 0 . 32 001 0 0 0 0 Adresse de base rseau 3 : 192. 168 .0 . 64 010 0 0 0 0 Adresse de base rseau 4 : 192. 168. 0 . 96 011 0 0 0 0 Note : Une adresse de rseau est toujours de base, en gnral on dit juste adresse du rseau (ou adresse sous rseau) On notera que pour chaque sous rseau, deux adresses sont rserves et ne doivent pas tre affect un ordi, cest pour cela quon soustrait 2 chaque fois. Ces deux adresses correspondent ladresse du rseau (base) et ladresse brodcast : Dans notre dernier cas, pour masque 255.255.255.224 : Pour rseau 1 : 192.168.0.0 192.168.0.1 192.168.0.31 adresse sous rseau 1 (non affectable) 192.168.0.30 : affectables pour 30 ordis adresse broadcast (non affectable)

Ladresse broadcast est rserve pour lenvoi des informations lensemble des ordinateurs du sous rseau en question.

Pour rseau 2 ; 192.168.0.32 adresse sous rseau 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_rseaux = 16 nb_ordis = 4094 (2^12) Classe B Masque : 255 255 240 0 (255 255 Adresse base sous rseau 1 : 172.18.0. 0 ( 172 18 Broadcast du sous rseau 1 : 172.18.15.255 ( 172 18 Adresse base sous rseau 2 : 172.18.16.0 ( 172 18
Complments

11110000 00000000 00001111 0001 0000

00000000) 00000000) 11111111) 00000000)

Notion dadresse physique : adresse MAC Deux cartes rseaux qui communiquent s'changent des messages (suite d'octets) appels trames ( frame en anglais).

56

Tous les postes connects au mme cble reoivent le message, mais seul celui qui il est destin le lit. Comment sait-il que cette trame lui est adresse ? Il reconnat 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 rseau. On parle d'adresse physique, d'adresse MAC (Media Access Control) L'adresse d'une carte rseau correspond l'adresse d'un poste et d'un seul. Or les postes sont gnralement regroups en rseau. Comment identifier le rseau auquel appartient le poste ? Il faut une adresse logique qui soit indpendante de l'adresse physique. C'est ce que proposent le protocole IP . Pourquoi identifier le rseau ? Pour permettre 2 postes qui ne sont pas connects au mme rseau de communiquer. Cela est impossible avec une adresse MAC, il faut une adresse de niveau suprieur, comme nous le verrons un peu plus loin et surtout avec le routage IP. Le message vhicul par la trame va contenir une autre adresse destinataire dont un des objectifs sera de dfinir le rseau 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 rseau si l'adresse rseau de destination est diffrente de la sienne, dans ce cas elle envoie le paquet une machine spciale dont le rle est d'acheminer les paquets qui sortent du rseau. 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 mcanisme qui permettra de passer d'une adresse logique une adresse physique, et rciproquement. Rsolution d'adresses logiques en adresses physiques Toute machine sur un rseau IP et Ethernet a donc 2 adresses, une adresse MAC et une adresse IP. Les processus de niveaux suprieurs 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 rseau du destinataire, il faut connatre son adresse MAC. Comment faire ?

57

C'est Routage

le

rle

du

protocole

ARP

(Adress

Resolution

Protocol)

Dans un rseau une machine ne peut communiquer physiquement qu'avec des machines connectes au mme support physique. Pour communiquer avec des machines au del de ce support il faut des machines charnires (routeurs) qui sont connectes physiquement aux diffrents supports. Le rle d'une machine charnire est de dcider si les trames qui lui arrivent doivent ou non la traverser et sur quel support il faut les envoyer. A partir de quels lments cette machine peut-elle dcider ? Admettons qu'elle dcide partir des adresses MAC. L'adresse MAC ne contient aucun lment permettant d'identifier l'appartenance d'une machine un rseau. Donc pour dcider le passage ou non d'une trame, la machine charnire doit construire pour chaque support physique sur lequel elle est connecte 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 mthode ? Elle n'est valable que pour un petit nombre de rseaux interconnects. Transposez l sur internet. Il faudrait que les machines charnires grent des tables d'adresses comportant autant d'adresses MAC que de machines interconnectes. En effet essayez d'imaginer 2 postes spars par plusieurs machines charnires et voulant communiquer. C'est impossible grer. Le problme vient du fait qu'en utilisant l'adresse MAC on interconnecte des postes et non des rseaux, d'o l'intrt d'un systme d'adressage intgrant la notion de rseau. Avec IP une machine appartient un rseau qu'elle connat grce la partie rseau de son adresse. Lorsque cette machine adresse un paquet, elle regarde l'adresse IP du destinataire, si la partie rseau de cette adresse est diffrente de la sienne, elle transmet son paquet au routeur qu'on lui a dsign (dans IP la terminologie est "gateway" soit "passerelle"). Ce routeur prend sa dcision de routage en fonction de la partie rseau de l'adresse du destinataire, les tables d'adresses qu'il gre sont donc largement moins importantes que les tables gres par des ponts. Comment cependant faire transiter des paquets entre 2 machines spares par plusieurs routeurs? Simplement chaque routeur doit connatre 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 concrtement comment a marche ? La machine mettrice construit un paquet avec une adresse IP destinataire hors rseau. 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 adresse et la transmet la couche 3 IP. Celle-ci rcupre le paquet et s'aperoit que le paquet ne lui est pas adress, elle consulte sa table de routage, dcide sur quelle nouvelle interface rseau le paquet doit tre transmis, encapsule le paquet dans une nouvelle trame, et ainsi de suite jusqu' destination.

58

Pourquoi sencombrer de ladresse MAC ? Le dcodage dune information est 1000 fois plus rapide avec une adresse matrielle quune adresse logicielle. La carte rseau ou le routeur dcode donc trs rapidement une trame avec une adresse MAC et peut savoir trs rapidement si le paquet lui est adress ou non (gain de temps norme dans le traitement). Exercice D : (liste des sous rseaux) Adr Rseau. 172.18.0.0 172.18.16.0 172.18.32.0 172.18.48.0 172.18.64.0 172.18.80.0 172.18.96.0 172.18.112.0 172.18.128.0 172.18.144.0 172.18.160.0 172.18.176.0 172.18.192.0 172.18.208.0 172.18.224.0 172.18.240.0 Adresse des ordis Adresse brodcast 172.18.0.1 - 172.18.15.254 172.18.15.255 172.18.16.1 - 172.18.31.254 172.18.31.255 172.18.32.1 - 172.18.47.254 172.18.47.255 172.18.48.1 - 172.18.63.254 172.18.63.255 172.18.64.1 - 172.18.79.254 172.18.79.255 172.18.80.1 - 172.18.95.254 172.18.95.255 172.18.96.1 - 172.18.111.254 172.18.111.255 172.18.112.1 - 172.18.127.254 172.18.127.255 172.18.128.1 - 172.18.143.254 172.18.143.255 172.18.144.1 - 172.18.159.254 172.18.159.255 172.18.160.1 - 172.18.175.254 172.18.175.255 172.18.176.1 - 172.18.191.254 172.18.191.255 172.18.192.1 - 172.18.207.254 172.18.207.255 172.18.208.1 - 172.18.223.254 172.18.223.255 172.18.224.1 - 172.18.239.254 172.18.239.255 172.18.240.1 - 172.18.255.254 172.18.255.255

59

ChapitreIII InitiationInternet

TABLE DES MATIERES


INITIATION A INTERNET ....................................................................................................62 I. Gnralits :.......................................................................................................................62 II. Accs Internet...............................................................................................................62 III. Les navigateurs Web.......................................................................................................62 III.1. Description de Internet Explorer et Netscape Navigator.........................................63 III.2. Options Internet .......................................................................................................66 III.3. La barre d'adresses...................................................................................................71 III.4. L'indicateur d'accs..................................................................................................71 III.5. La barre de dfilement .............................................................................................72 III.6. La barre d'tat ..........................................................................................................72 IV. Structure dune page Web : ............................................................................................72 V. Recherche de linformation : les moteurs de recherche...................................................74 VI. Transfert de fichiers : Aspirer un site .............................................................................75 VII. Prsentation des adresses lectroniques :......................................................................75 VIII. Messagerie lectronique : Eudora et Outlook Express ................................................76 VIII.1. Prsentation thorique du courrier lectronique ...................................................76 VIII.2. Exemple De logiciel de gestion de messagerie : Outlook Express.......................77

61

INITIATION A INTERNET

I. Gnralits :
Internet est un rseau dinformations contenues dans des fichiers stocks sur diffrents ordinateurs. On estime des dizaines de millions le nombre de machines connectes Internet. Pour faciliter laccs linformation, des liens reliant les diffrents fichiers stocks sont mis en place grce la technologie de lhypertexte. Cest le fameux WWW (Word Wide Web) qui forme une toile mondiale. En cliquant sur un hyperlien, vous aller une page prcise sur un site Web prcis. Vous accdez ainsi la plus grande bibliothque du monde par un simple clic de souris. A l'origine, l'Internet part d'une exprience conduite en 1960 par le Ministre de la Dfense des Etats-Unis (DoD, Department of Defense). Ce dernier a souhait crer un rseau informatique qui restera oprationnel mme en cas de destruction partielle. Ce rseau (crer en collaboration troite avec des chercheurs scientifiques et universitaires amricains) baptis ARPANET, prfigure le rseau Internet d'aujourd'hui. En 1985, la NSF (National Science Foundation) cre le NSFNET, fond sur les protocoles ARPANET. Le NSFNET met en place un rseau national, accessible gratuitement par tous les organismes scientifiques et universitaires amricains. En mme temps, des rseaux rgionaux sont constitus pour relier chaque institution au rseau national. Les chercheurs passrent de ARPANET au NSFNET.

II. Accs Internet


Pour accder un rseau Internet deux possibilits se prsentent : Se raccorder un rseau faisant partie de lInternet et dans ce cas on peut accder aux diffrentes machines qui y sont lies. Se raccorder un rseau de transport, ne faisant pas partie de lInternet et dans ce cas on a besoin dun fournisseur daccs. Cest le cas de rseau tlphonique par exemple. Pour tre connect Internet, il faut un modem et un logiciel daccs. Le fournisseur daccs (Maroc Tlcom, Wanadoo ) fournit un identificateur et un mot de passe ainsi que les autres paramtres de connexion. Le modem (MOdulateur/DEModulateur) est un priphrique qui convertit les signaux numriques dun ordinateur en signaux analogiques. Le premier critre de choix dun modem est sa rapidit transfrer les informations. Les modems sont dots de vitesses diffrentes, et leurs performances sont values en bps ou bits par seconde. Un modem 56 Kbps transmet et rceptionne les donnes une vitesse atteignant au maximum 56 000 bits par seconde. Sans entrer dans les dtails techniques, sachez quon peut travailler plus ou moins correctement partir de 28 800 bits par seconde.

III. Les navigateurs Web


Un navigateur Web est un programme possdant une interface graphique compose de boutons de navigation, d'une barre d'adresse, d'une barre d'tat et dont la majeure partie de la surface sert afficher les pages web.

62

NCSA Mosaic est le premier navigateur avoir t dvelopp au dbut des annes 90. De par sa simplicit d'utilisation, l'interface de type pointer et cliquer a contribu mettre le Web la porte du grand public. Parmi les nombreux navigateurs disponibles, les plus connus sont Microsoft Internet Explorer et Netscape Navigator, tous deux dvelopps partir de NCSA Mosaic. III.1. Description de Internet Explorer et Netscape Navigator

III.1.1. La barre de menus

Situe tout en haut de la fentre du navigateur, la barre de menus prsente toutes les fonctionnalits lies une page Web, comme la possibilit de l'enregistrer sur le disque dur ou d'augmenter la taille du texte d'une page.

III.1.2. La barre d'outils


Cest la range dicnes gnralement juste en bas de la barre de menus. Elle vous aide explorer le Web. Etant donn que les barres d'outils de Navigator et Explorer diffrent lgrement l'une de l'autre, nous nous pencherons en premier lieu sur leurs caractres communs :

63

Barre doutils Internet explorer

Barre doutils Netscape Navigator

Prcdent(e) vous renvoie la page prcdemment visite (si son icne est active). Suivant(e) vous permet de revenir la page que vous venez de changer. Accueil/Dmarrage vous transfre vers la page d'accueil de votre choix. Si vous n'en avez slectionn aucune, ce bouton vous renvoie la page d'accueil par dfaut, gnralement le site Web de Microsoft ou Netscape. Recharger ou Actualiser recharge la page Web, comme son nom l'indique. Parfois tous les lments d'une page Web ne se chargent pas compltement du premier coup, suite une interruption du transfert des fichiers. De mme, lorsque vous tlchargez une page Web, les donnes sont mises en mmoire cache, ce qui signifie qu'elles sont temporairement sauvegardes sur votre ordinateur. Lorsque vous souhaitez rouvrir la page, cette dernire est rcupre par votre navigateur Web dans la mmoire cache au lieu d'tre redemande au serveur. Arrter interrompt le chargement de la page en cours par le navigateur. Rechercher effectue une connexion au moteur de recherche par dfaut (par exemple celui de Microsoft qui sappelle MSN), proposant un ensemble d'outils de recherche. Favoris ou Signets prsente une liste dans laquelle vous pouvez enregistrer les liens vers les adresses des sites Web que vous souhaitez visiter nouveau. Une fois que vous avez ajout une adresse votre liste, il suffit de cliquer dessus pour retourner la page Web correspondante, ce qui vite de la retaper. Pour pouvoir mieux organiser les fichiers favoris lexplorer Internet permet de crer des dossiers en suivant la dmarche suivante : Dans la barre de menus slectionner Favoris, puis cliquer sur le sous menue organiser favoris, vous obtiendrez la fentre suivante :

64

En cliquant sur Crer un dossier, il est possible de crer un dossier o lon cre un lien avec des sites spcifiques un thme prcis. Par exemple dans le dossier Lien on a crer un lien avec les sites Web : Hotmail, Personnaliser les liens, Windows . Dans cette fentre il est possible de renommer ou de supprimer un dossier en utilisant les boutons Renommer ou Supprimer ou encore de dplacer un lien vers lun des dossiers existants. Par exemple pour dplacer le lien du page Web MSN.com, il suffit de slectionner le lien MSN.com et cliquer sur le bouton Dplacer vers. Vous obtiendrez la fentre suivante :

IL suffit donc de slectionner le dossier o lon placera le lien site Web MSN.com.

65

Application 1:

Lancer Internet : 1-Ajouter Aux favoris le site web Google.com 2- Crer un dossier dans Favoris portant le nom Recherche 3- Dplacer le lien site Web Google.com au dossier Recherche , puis renommer ce dossier par Moteur de Recherche III.2. Options Internet De nombreuses options Internet sont disponibles pour mieux grer la scurit, la police, entre autres Pour y accder, il suffit de slectionner le sous menu Options Internet du menu Outil. La fentre ci dessous saffiche :

III.2.1. Onglet Gnral :


Cet Onglet contient les zones suivantes :

66

Page de dmarrage : il est possible de choisir la page utiliser comme page de dmarrage parmi les pages : Page actuelle, Page par dfaut et Page vierge. Fichier Internet temporaires et Cookies : Gnralement Les pages Web consultes, lors dune navigation, sont stockes dans un dossier pour un affichage ultrieur plus rapide. Pour supprimer tous les fichiers Internet temporaires contenu dans votre disque dur ainsi que tout les lments disponibles hors connexion, cliquer sur le bouton Supprimer les fichiers, il apparatra une boite de dialogue pour confirmer cette requte. Historique : Le dossier historique contient les liens avec les pages que vous avez rcemment affich, afin dy accder rapidement. Pour supprimer les fichiers de ce dossier il suffit de cliquer sur le bouton Effacer lHistorique. Langues : Dans certains site Web proposent des contenues multilingues, pour ajouter une langue, cliquer sur le bouton Langue, la fentre suivante apparatra, cliquer sur le bouton Ajouter.

- Dfinir la langue ajouter dans la fentre (ci-dessous) qui apparait.

67

Application 2 :

Lancer Explorer Internet Ajouter la langue Arabe.

III.2.2. Longlet contenu :

Pour effectuer un contrle daccs des pages web afficher (control parental par exemple), slectionner longlet Contenu puis cliquer sur le bouton Activer, On aura laffichage de la fentre suivante :

68

En slectionnant une catgorie (Violence par exemple), il est possible dajuster la barre de dfilement pour spcifier la tolrence de lexplorateur internet vis--vis des sites que les utilisateurs visitera.

III.2.3. Longlet Connexion :

69

Pour configurer une connexion Internet, Cliquer sur le bouton Configurer ... de longlet Connexion, La fentre Assistant Nouvelle Connexion apparaitra. Pour crer une nouvelle connexion il suffit de suivre la procdure suivante (exemple de connexion avec modem classique 56 Kbps) :

1 .

70

N.B : Dans les tapes 5, 6 et 7 Tapez les caractristiques donnes par votre fournisseur daccs Internet (Menara ici).
Application 3 :

Configurer une connexion un modem ADSL au fournisseur Menara et une connexion Internet par rseau III.3. La barre d'adresses

Un champ nomm Emplacement , Atteindre ou Adresse figure juste sous la barre d'outils. C'est cet endroit que vous tapez l'adresse du site Web que vous souhaitez visiter. Une fois votre saisie effectue, appuyez sur la touche Entre ou Retour pour accder au site. Si vous cliquez sur le petit triangle droite en regard du champ Adresse, une liste droulante s'affiche contenant les adresses des sites que vous avez prcdemment tap dans cette barre. Pour retourner sur un site, il vous suffit de le choisir dans la liste. III.4. L'indicateur d'accs

Les navigateurs Navigator et Explorer affichent tout deux une petite image dans le coin suprieur droit de l'cran. Lorsqu'elle est en mouvement, elle indique en gnral que le logiciel du navigateur, appel client, accde aux donnes du serveur. Votre navigateur tlcharge les fichiers vers votre ordinateur, puis il les affiche sur votre cran. La vitesse de traitement dpend d'un certain nombre de facteurs : le dbit de votre modem et de celui de votre fournisseur d'accs Internet ; la taille des fichiers en cours de tlchargement ; la disponibilit du serveur ;

71

le volume de frquentation sur Internet. Les caractristiques de la machine client sont insuffisants (Microprocesseur, Mmoire RAM, vitesse et espace disque dur, )

III.5. La barre de dfilement La barre verticale droite de votre navigateur vous permet de faire dfiler ventuellement une page Web dans sa totalit. Si une page Web est trop large pour apparatre en totalit sur votre cran, une barre de dfilement horizontale s'affiche en bas de la fentre de votre navigateur. Elle s'utilise de la mme manire que la barre de dfilement verticale. III.6. La barre d'tat

Situe en bas de votre navigateur Web, elle affiche l'tat d'avancement de vos actions, comme l'adresse du site auquel vous vous connectez, l'tat de la connexion avec l'ordinateur hte et la taille des fichiers tlcharger et dautres types dinformations (surtout pour lexplorateur Internet). Pour une navigation astucieuse Comme avec la plupart des logiciels, il existe bien des faons d'accomplir une tche. Voici quelques fonctionnalits supplmentaires pour faciliter la navigation : Au fur et mesure que vous parcourez les pages et les sites Web, votre navigateur conserve la trace de votre parcours. Pour afficher ce parcours : Dans Netscape Navigator, slectionnez Historique dans la liste droulante du menu Communicator. Dans Internet Explorer, cliquer sur le bouton Historique de la barre d'outils. De cette manire, vous accdez un historique de toutes les pages Web parcourues durant une priode dtermine. Pour se retrouver dans une page, il vous suffit de cliquer sur son adresse.

Application 4 :

Lancer Internet : 1- En cliquant sur licne Internet Explorer dans Bureau, 2- En cliquant sur Internet Explorer dans la zone de lancement rapide de la barre de taches. 3- En cliquant sur Programme puis sur Internet Explorer dans le menu dmarrer.

IV. Structure dune page Web :


Une page Web est un document lectronique crit dans un langage informatique appel HTML (Hypertext Markup Language). Chaque page Web dispose d'une adresse unique,

72

appele URL ou Uniform Resource Locator, permettant d'identifier son emplacement sur le rseau. Un site Web comporte une ou plusieurs pages Web, selon sa conception. Les pages Web d'un site sont relies entre elles par un ensemble d'hyperliens. Un simple clic suffit pour passer de l'un l'autre. Le Web vous permet de naviguer de page en page la recherche d'informations, selon vos centres d'intrt.

La page accueil En parcourant le World Wide Web, vous rencontrerez bien souvent le terme page d'accueil. Cette page est considre comme le point de dpart d'un site Web. Tout comme la table des matires d'un livre ou d'un magazine, la page d'accueil prsente le contenu du site. Selon sa conception, un site se compose d'une ou plusieurs pages, ou de quelques pages longues. S'il ne contient que peu d'informations, la page d'accueil peut tre la seule disponible. Comment identifier les liens du reste du texte ? Les liens ont une couleur diffrente de celle du reste du texte, et s'affichent la plupart du temps en caractres bleus et souligns. Lorsque vous passez avec votre curseur au-dessus d'un lien de type texte ou image, l'icne en forme de flche se transforme en main. Le texte de l'hyperlien renseigne souvent sur l'information laquelle il conduit. Lorsque vous revenez une page abritant un lien que vous avez dj emprunt, le texte de ce dernier est souvent de couleur diffrente. De cette manire, vous savez que vous tes dj pass par ce lien. Cela ne vous empche pas de le rutiliser.
Application 5 :

1. Dans le navigateur Internet Explorer, lancer le site Web de lUniversit IBN TOFAIL Kenitra en tapant dans la barre dadresses le texte suivant : http://www.univibntofail.ac.ma/ 2. Donner le nombre de pages Web contenues dans ce site.

73

V. Recherche de linformation : les moteurs de recherche


Les moteurs de recherche sont des programmes qui permettent dinterroger une immense banque de donnes contenant des URL indexes par mots cls. Ils se divisent en deux catgories : les annuaires tels que Google, Yahoo..! permettent une identification efficace de l'information gnrale. ils regroupent les sites Web sous des catgories identiques, telles que le tourisme au Maroc, les universits au monde ou les beaux arts. Au terme de votre recherche, vous parvenez une liste de sites Web relatifs au terme de dpart.

les index tels que AltaVista. permettent la recherche d'informations plus spcifiques, telles que les donnes sur la ville de Marrakech ou la biographie de Picasso.

N.B. : La syntaxe exacte employe par chaque moteur varie. C'est vous de vous familiariser avec les particularits de chacun.
Application 6 :

Lancer le moteur de recherche Google, en saisissant dans la zone dadresse ladresse suivante: www.google.com -Taper dans la zone de recherche le mot cl : Tourisme au Maroc, puis cliquer sur recherche Google. -Rpter les mmes oprations avec le moteur de recherche www.yahoo.fr - Comparer les rsultats des deux moteurs. Lancer le moteur de recherche Altavista en tapant dans la barre dadresse : www.altavista.fr et chercher des informations sur lUniversit Hassan II. - Enregistrer la page daccueil de lUniversit dans le dossier portant votre nom.

74

VI. Transfert de fichiers : Aspirer un site


Avec le Web, le tlchargement de fichiers se rsume un simple clic de souris. En gnral, le tlchargement fait rfrence la mthode par laquelle vous accdez linformation dun ordinateur distant. Pour tlcharger un fichier, cliquer laide du bouton droit de la souris sur le lien du fichier souhait et slectionnez enregistrer la cible sous. Dans certains cas, un message vous demande denregistrer le fichier sur votre disque dur si non le fichier est tlcharg automatiquement sur votre bureau selon la configuration de votre navigateur. Dans la majorit des cas les fichiers que vous tlchargez sont compresss. Dans ce cas vous devez disposez dun utilitaire pour les dcompresser.
Compression et extraction de fichiers :

On peut utiliser un logiciel de compression de fichier, tel que le WinZip ou Winrar. quon peut tlcharger depuis le site suivant : http://www.telecharger.com Ce site donne la possibilit de tlcharger des documents, des fichiers de musique, des images, des logiciels. Il rassemble une panoplie de logiciels gratuits tlcharger sur le Net.
Application 7 :

Charger le site tlcharger en tapant : http://www.telecharger.com dans la barre dadresse, Chercher laide du moteur du site un aspirateur de site, en tapant dans la zone de saisie : Aspirateur , Chercher le logiciel Webcopier dans la liste des aspirateurs qui saffiche, Suivez les instructions pour le tlcharger.

Application 8 :

1. Lancer Webcopier, 2. Excuter New du menu File puis suivez les instructions de lassistant. Donner les paramtres dun site que vous souhaitez aspirer, le site www.commentcamarche.net par exemple. 3. Lorsque Webcopier termine, vous pouvez naviguer sur tout le site sans connexion Internet.

VII. Prsentation des adresses lectroniques :


Les adresses lectroniques sont gnralement constitues de deux parties principales : Exemple : Etudiant@hotmail.com En premier vient le nom de lutilisateur (tudiant) qui fait rfrence la boite aux lettres du destinataire dans cet exemple. Ensuite apparat le caractre arobase @. Puis vient le nom dhte (Hotmail). Ce dernier se rapporte au serveur de messagerie. Il sagit bien souvent du

75

nom dune entreprise ou dune socit. Il est suivi dun point (.) puis de deux ou trois lettres (.com dans cet exemple) indiquant le nom de domaine. La liste suivante rsume la signification de quelques suffixes : Com : pour les activits commerciales. Org : pour les organisations internationales. Edu : pour les tablissements denseignement et les Universits. Net : pour les organisations de gestion de rseau Internet. Gov : pour les organismes gouvernementaux. Mil : pour les entits militaires. Ces suffixes sont parfois complts ou remplaces par un suffixe gographique pour tous les pays autres que les Etats Unis dAmrique. Exemples : ma pour le Maroc, fr pour la France, de pour lAllemagne, uk pour la Grande Bretagne, etc.

VIII. Messagerie lectronique : Eudora et Outlook Express


Le courrier lectronique fait partie des nouvelles possibilits de communication quoffre Internet et constitue le service le plus utilis. Internet est en effet un rseau reliant des ordinateurs dans le but d'changer des informations de natures diverses. Internet est bas sur l'utilisation de protocoles informatiques permettant la communication entre systmes informatiques varis (PC, Mac, Unix). Il existe diffrents modes de connexion Internet : Par ligne spcialise reliant directement au rseau (haut dbit), Par Modem (RTC, ADSL ou autres) via les lignes tlphoniques classiques. Plusieurs protocoles de communication entre ordinateurs peuvent tre utiliss sur Internet: HTTP (Hyper Text Transfert Protocol), (ex : pages Web : www qui utilisent le langage HTML), FTP: File Transfert Protocol: changes de fichiers informatiques entre ordinateurs (ex: rapatriement de logiciels), Telnet: connexion distance sur un ordinateur. (ex : consultation des catalogues des bibliothques, Groupes de discussion (newsgroups ou forums de discussion): permettent de communiquer sur un sujet donn (poser des questions, avoir des rponses ces questions), Courrier lectronique et listes de diffusion: permet d'envoyer (messages sortants) ou recevoir (messages entrants) des messages lectroniques. IRC (ou tchat) permet dchanger des images, de la parole ou mme des vidos en dynamique. VIII.1. Prsentation thorique du courrier lectronique

a) Minimum requis pour accder au courrier lectronique

Un ordinateur reli Internet (PC, Mac ou station Unix), une adresse lectronique de type nom@organisation.abbreviation_du_pays (fr pour France), un serveur de courrier auquel vous avez un accs autoris.

76

b) Qu'est ce qu'un courrier lectronique ???.... Que contient un courrier lectronique ???

Le courrier lectronique est galement appel: ml, courriel, e-mail. Un courrier lectronique contient: l'adresse de son correspondant (toujours), le sujet (ou objet) du courrier (optionnel), le corps du courrier (texte transmettre) (toujours), un fichier informatique attach (optionnel). Les avantages du courrier lectronique par rapport aux moyens de communication classiques sont nombreux. Cet outil permet notamment de: joindre un correspondant mme si celui ci est occup ou indisponible, faire parvenir des documents lectroniques directement utilisables par son correspondant (ce n'est pas le cas avec le fax), de lire son courrier de partout.

Ce moyen de communication prsente cependant des inconvnients: un manque de confidentialit (sauf si on fait appel des procdures de cryptage), un caractre fortement impersonnel.

Il est possible daccder au courrier lectronique de diffrentes manires: sous Unix (sans interface graphique), ce qui ncessite la connaissance des commandes Unix (mail, mail -f...) qui ne sont pas toujours trs simples pour les nophytes, en utilisant une interface graphique de type Eudora ou Netscape Messenger. Dans ce cas, les courriers lectroniques sont grs par un serveur de courrier qui est le plus souvent distinct de la machine sur laquelle vous rdigez ou lisez vos messages.

Les courriers que lutilisateur reoit (on parle de messages entrants) ou envoie (messages sortants) partir de son ordinateur personnel transitent et sont stocks sur un serveur de courrier. VIII.2. Exemple De logiciel de gestion de messagerie : Outlook Express

VIII.2.1. Lire les messages (centre de messages)


Cliquer sur Bote de rception (cadre gauche suprieur) pour lire les messages dits entrants La partie droite de la fentre se divise alors en deux zones : La partie haute contient la liste des messages prsents dans la "bote de rception". La partie basse contient le corps du message slectionn dans la partie haute

77

Cliquer dans la partie haute (zone dite listes des messages) sur un courrier que vous dsirez lire, celui-ci s'affiche alors dans la partie basse (zone dite corps du message) Un nouveau message est prcd par l'icne (message non lu) et l'intitul du mail est affich en caractres gras. Sinon il s'affiche normalement et est prcd de l'icne (message lu). Lorsque vous cliquez sur un nouveau message celui-ci se transforme en message lu aprs une dure de 5 secondes (dure par dfaut). Vous pouvez aussi double-cliquer sur l'intitul du message pour le lire dans une fentre spare.
c) Ecrire un message

Pour crire un message, Cliquer dans la barre doutils sur le bouton Crer un Une nouvelle fentre s'affiche l'extrieur de l'application. Elle est contient les zones suivantes :

78

Zone Informations sur le message : la ligne "A : ...." doit contenir le nom et l'adresse mail du destinataire ou des destinataires du message. Dans le cas o il y a plusieurs destinataires, entrez les adresses de tous les correspondants spars par un point-virgule. La ligne "Cc : ...." signifie "Copie Carbone" et vous permet d'envoyer une copie du message un ou plusieurs correspondants. Faites comme dans la ligne "A :" La ligne "Cci : ...." signifie "Copie Carbone invisible" et a le mme effet que "Cc :" mais la diffrence que chaque personne qui reoit le message en "Cci:" a l'impression d'tre unique destinataire du message. la ligne "Objet : ...." doit contenir le thme du message.

Zone Mise en page du message.

Permet de mettre en forme le message (Taille, police, Style, alignement, ) Zone Corps du message Permet de saisir le message envoyer son correspondant Remplir les diffrents champs, crire votre message, vrifier son orthographe, ajouter ventuellement des lments joints (fichiers envoyer avec votre message), puis

cliquer sur le bouton Envoyer (barre doutils). La fentre se ferme.


d) Rpondre un message

Cliquer dans la liste des messages sur le message auquel vous voulez rpondre Celui-ci s'affiche automatiquement dans la zone de message. Cliquer sur le bouton Rpondre. La nouvelle fentre saffiche, (semblable celle contenant le nouveau message), elle contient automatiquement ladresse e-mail de votre correspondant.

79

La zone infrieure de cette fentre contient le message original de votre correspondant. Ceci permet de garder un historique de la discussion, et de faire savoir son correspondant quon a bien reu son message. Vous pouvez garder tout ou partie du message original. Ajouter ensuite votre rponse puis cliquer sur le bouton Envoyer. La fentre est alors automatiquement ferme. Les messages que vous venez denvoyer sont placs dans un premier temps dans la boite d'envoi en attendant que le message soit transfr votre correspondant, puis sont stocks automatiquement dans lments envoys aprs avoir t rellement envoys.
Application 9 :

Lancer Outlook express, Configurez votre compte (Hotmail), et envoyez un message vousmme en y incluant un fichier joint de votre choix.

80