Chapitre 1
Introduction
1
Qu’est ce qu’un Réseau Informatique
Un ensemble d’ordinateurs, de téléphones, Imprimantes, Tablettes et d’autres terminaux
liés entre eux pour échanger de l’information.
Types de Réseaux Informatiques
LAN: Local Area Network ou Réseau Local en français
C’est un Réseau Local dans le même bâtiment
Au plus 100 ordinateurs proches les uns des autres
Exemple: Réseau dans une salle d’enseignement ou
dans une faculté
MAN: Metropolitain Area Network ou Réseau Métropolitain
Un ensemble de réseaux locaux reliés dans une même ville
WAN: Wide Area Network ou Réseau Etendu
Un ensemble de LAN reliés dans un même pays ou dans le monde entier
2
Topologies des Réseaux Informatiques
3
Internet est un Réseau de Réseaux: WAN
4
Notion de Client/Serveur
Dans un réseau Internet plusieurs ordinateurs jouent le rôle de serveurs,
D’autres jouent le rôle de clients
Un serveur stocke dans son disque dur des données telle que des bases de
données, des sites ou des pages web, etc.…
Un ordinateur client mené d’une connexion internet peut demander une
information de la part du serveur en lui envoyant une requête (demande,
question) contenant l’adresse du serveur et le nom du fichier demandé.
Le serveur cherche la donnée ou le fichier demandé dans son disque dur
et le renvoi au client.
5
6
Le protocole http
HTTP signifie HyperText Transport Protocol.
Il gère le dialogue entre le client et le serveur .
Une adresse URL (Uniform Resource Locator) est donnée pour chaque
document.
Exemple: [Link]
Un document demandé par le client peut être:
Une image
Un vidéo
Un son (musique)
Un site ou une page web
7
Si le document demandé est une page web:
Le serveur renvoi au client le code source de la page web (le
programme html).
Le client interprète le code et affiche le résultat à l’aide d’un navigateur
web (Google chrome, Internet Explorer, Mozilla Firefox,…).
8
Chapitre 2
Le Langage
HTML HyperT
ext Markup Language
9
Introduction
HTML est un langage de description de pages web.
Détermine l’apparence qu’elles auront sur l’écran
d’un utilisateur.
Utilise des balises (tags)
Exécuté par le logiciel client (Google Chrome,
Netscape, Internet Explorer, Mozilla Firefox, etc.) installé
sur le poste du côté client.
10
Notion de balisage
Chaque instruction écrite en html, pour appliquer une tache (action), est
délimitée entre deux marqueurs (appelés) balises.
Chaque balise est encadrée elle-même par un signe inférieur «<» un signe
supérieur « > »: <nom_de_balise>
La balise est soit ouvrante indiquant le début de l’instruction, soit fermante
indiquant la fin de l’instruction (le nom de la balise est précédé par un signe
« / »:
<nom_de_balise> balise ouvrante
</nom_de_balise> balise fermante
11
Structure d’un document html
Chaque document HTML commence par la balise <html> et se termine
par la balise </html>.
On peut considérer 2 parties principales dans un document HTML :
La partie entête délimitée par <head> et </head>
La partie corps du document délimité par <body> et </body>
12
<html>
<head>
<meta name="description" content="…" />
<meta name="keywords" content="mot-clé 1,
mot-clé 2, mot-clé 3" />
<title> Voici le titre du document </title>
</head>
<body>
Voici le corps du document.
</body>
</html>
13
Les commentaires
Pour insérer un commentaire dans un programme html, on
le met entre le signe <!-- et le signe -->.
<!-- Votre Commentaire ici -->
Un commentaire ne sera pas exécuté par le navigateur web,
il est mis juste pour mettre une explication pour les lignes
de code.
Une balise HTML et ses paramètres peuvent être
indifféremment écrits en majuscules ou en minuscules.
14
Le corps du document (<BODY>)
Cette balise détermine le corps du document, c'est ici que vous
allez intégrer vos titres, textes, images, tableaux, liens,…
<body>
…….
Ici ce que vous voulez afficher sur l’écran du visiteur de votre
site
…….
</body>
15
Le tag <BODY> a de nombreux attributs:
BGCOLOR: Couleur du fond de l'écran.
TEXT: Couleur du texte.
LINK: Couleur des liens.
VLINK: Couleur des liens visités.
ALINK: Définit la couleur des liens activés, c'est à dire quand on
clique sur le lien.
BACKGROUND: L'image utilisée comme fond d'écran.
16
<HTML>
<HEAD>
<TITLE> Ma première page</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE" TEXT="BLACK"
LINK="BLUE" VLINK="GREEN" ALINK="RED">
Bonjour le monde
</BODY>
</HTML>
17
18
<HTML>
<HEAD>
<TITLE> Ma première page</TITLE>
</HEAD>
<BODY BGCOLOR="red" TEXT=" WHITE "
LINK="BLUE" VLINK="GREEN" ALINK="RED">
Bonjour le monde
</BODY>
</HTML>
19
20
Mise en forme de texte
1. Les paragraphes.
La balise <BR /> effectue un retour à la ligne (simple espace).
Correspond à la touche «entrer» du clavier.
Il n’y a pas de balise </BR>. Un signe «/ » est ajouté avant le signe « > »
pour fermer la balise: <BR />
La balise <P> exprime le début d'un paragraphe, c'est à dire un double
espace et se ferme par la balise </P>.
21
La balise <P> possède l'attribut ALIGN qui sert à aligner le texte.
<p align= " ">
l'attribut ALIGN peut prendre l’un des 3 valeurs :
LEFT: Aligne le texte sur la marge de gauche. Align= "left"
RIGHT: Aligne le texte sur la marge de droite. Align= "Right"
CENTER: Centre le texte entre les marges. Align= "Center"
22
Exemple avec les balises <br> et <p>.
<html>
<head>
<title></title>
</head>
<body>
Ceci est un<BR />
exemple
<P Align= "Right">
avec les balises P et BR et Alignement à droite
</P>
</body>
</html>
23
24
1. Les titres.
Il y a six niveaux de taille de TITRE de:
<H1> (le plus important) à
<H6> (le plus petit).
Il possède lui aussi l'attribut ALIGN (RIGHT ou LEFT
ou CENTER).
Un retour à la ligne s’effectue automatiquement. Pas
besoin d’utiliser la balise <br /> ici.
25
Exemple de codes avec chaque balise de TITRE.
<H6>Titre de niveau 6</H6>
<H5>Titre de niveau 5</H5>
<H4>Titre de niveau 4</H4>
<H3>Titre de niveau 3</H3>
<H2>Titre de niveau 2</H2>
<H1>Titre de niveau 1</H1>
26
3. Les Lignes horizontales (<HR>).
Utilisées pour séparer les différentes parties du document.
La balise <HR /> permet d’insérer une ligne horizontale.
Elle possède plusieurs attributs :
ALIGN: Permet d'aligner la ligne horizontale (RIGHTouLEFT ou CENTER).
WIDTH: Spécifie la largeur de la ligne (en pixels ou % de la fenêtre).
SIZE: Epaisseur de la ligne (de 1 à 10).
NOSHADE: S'il est présent, l'effet d'ombre (3d) est annulé.
COLOR: Spécifie la couleur de la ligne.
27
Exemple d’insertion de lignes horizontales.
<HR WIDTH=100 ALIGN = LEFT>
<HR WIDTH=150 COLOR="blue" ALIGN = LEFT>
<HR WIDTH=200 COLOR="#008000" NOSHADE ALIGN = LEFT>
28
4. Les polices des caractères.
La balise <FONT>: Elle possède plusieurs attributs :
FACE: Permet de définir par ordre de priorité, les noms des polices (Arial,
Courrier, Times New Roman ..).
SIZE: Permet de définir la taille de la police de 1 à 7 (valeur par défaut: 3).
A noter qu'il peut être utilisé de deux manières :
Absolue ex : SIZE=2
Relative ex : SIZE= +2
COLOR: Permet de définir la couleur du texte (soit avec le nom de la
couleur ou la valeur hexadécimale correspondante).
29
Exemple 1:
<FONT FACE="Comic Sans Ms, arial" >
Police Comic Sans Ms - Taille par défaut (3)
</FONT>
Exemple 2:
<FONT FACE="Impact, verdana" SIZE=2 COLOR="green">
Police Impact - Taille 2 - Couleur :Verte
</FONT>
30
5. Mettre en gras, Italique et souligné
<B> et </B> pour mettre un texte en Gras
<I> et </I> pour mettre un texte en Italique
<U> et </U> pour souligner un texte
Exemple:
<I><B> Bonjour</B> le <U>Monde</U></I>
Bonjour le Monde est en italique
Bonjour est en gras
Monde est souligné
31
Les listes
1. Listes ordonnées (numérotées)
La balise <OL> permet de créer une liste ordonnée
(numérotée 1,2,3,…, I, II, III,…, A, B, C,…, a, b, c,…, i, ii, iii,…).
S'incrémente (+1) automatiquement.
La balise <LI> définie un élément (item) de la liste.
La balise <LH> indique le titre de la liste. Elle remplace la
première balise <li> si nécessaire (optionnel).
32
Exemple d'une liste ordonnée avec 3 éléments.
<OL>
<LI>Premier élément </li>
<LI>Deuxième élément </li>
<LI>Troisième élément </li>
</OL>
33
Les attributs de la balise <OL>
TYPE=
A : Marqueurs en majuscules.
a : Marqueurs en minuscules.
I : Marqueurs en chiffres romains (majuscules).
i : Marqueurs en chiffres romains (minuscules).
1 : Marqueurs en nombres (choix par défaut).
START=n : Valeur de départ du marqueur.
34
Exemple d'une liste en chiffres romains (majuscules) démarrant au chiffre 2.
<OL TYPE=I START=2>
<LI>item 1</li>
<LI>item 2 </li>
<LI>item 3 </li>
</OL>
35
2. Listes non ordonnées (Listes à puces).
La balise <UL> permet de créer une liste à puces.
La balise <LI> représente un élément de la liste (item).
36
Exemple d'une liste non ordonnée avec 3 items.
<UL>
<LI>item 1 </LI>
<LI>item 2 </LI>
<LI>item 3 </LI>
</UL>
<UL>
On peut ajouter un titre au début <LH> TITRE DE LA LISTE </LH>
de la liste en utilisant la balise
<LI>item 1 </LI>
<LH> au lieu de <LI>
<LI>item 2 </LI>
<LI>item 3 </LI>
</UL>
37
38
Les attributs de la balise <UL>
TYPE=
DISC: Puce en forme de disque plein.
CIRCLE : Puce en forme de disque vide.
SQUARE : Puce en forme de carré.
39
Exemple d'une liste avec des puces en forme de disque vide (circle ).
<UL TYPE=CIRCLE>
<LI>item 1 </LI>
<LI>item 2 </LI>
<LI>item 3 </LI>
</UL>
40
3. Liste de Menu
La balise <MENU> permet de créer une liste de
menu.
Exemple d'une liste menu avec 3 items.
<MENU>
<LI>item 1</LI>
<LI>item 2 </LI>
<LI>item 3 </LI>
</MENU>
41
4. Liste de définition.
La balise <DL> permet de créer une liste de termes et des
définitions correspondantes.
<DT> représente le terme.
<DD> la définition du terme.
42
Exemple d'une liste de définition avec 2 termes et 2 définitions pour
chaque terme.
<DL>
<DT>Terme 1</DT>
<DD>def 1 </DD>
<DD>def 2 </DD>
<DT>Terme 2</DT>
<DD>def 1 </DD>
<DD>def 2 </DD>
</DL>
43
44
5. Combiner les types de listes (Listes Imbriquées).
<OL TYPE=I> <!– liste ordonnée de type chiffres romains majuscules-->
<LI> Elément 1
<UL Type=SQUARE> <!– liste à puce de type carré-->
<LI> Elément 1.1</LI>
<LI> Elément 1.2 </LI>
</UL>
</LI>
<LI> Elément 2
<DL> <!– liste de définition -->
<DT>Terme 1 </DT>
<DD>définition 1 </DD> <DD>définition 2 </DD>
</DL>
</LI>
45
</OL>
46
6. Créer vos propres puces.
Soit vous passez par l'attribut SRC="[Link]" si par exemple le fichier
graphique de vos puces personnalisées se nomme [Link], mais cet
attribut est spécifique à [Link].
Soit vous remplacez la balise <LI> par la balise <IMG> en définissant votre
image comme un simple fichier gif. Cette solution est la meilleure car elle
est valable pour tous les navigateurs, attention de faire un <BR />
après chaque ligne.
47
Exemple d'une liste non ordonnée avec un fichier gif.
<UL>
<IMG SRC= "[Link]" BORDER=0 WIDTH=16
HEIGHT=16 />Elément 1
<BR>
<IMG SRC= "[Link]" BORDER=0 WIDTH=16
HEIGHT=16 /> Elément 2
</UL>
48
49
Les images.
La balise <img> permet d’insérer une image.
<img SRC=« chemin_image» ALT=« texte » HSPACE=«
xx » VSPACE=« yy » BORDER=« zz » width=« ss »
height=« hh » />
Comme la balise <BR />, la balise <IMG /> se ferme dans la
balise ouvrante elle-même en ajoutant le signe « / » avant
le signe « > »
50
Les Attributs de la balise <img>
SRC= «chemin_image»: le chemain où se trouve
l’image (c:\dossier\nom_fichier.jpg). Si l’image est dans le
même dossier que la page web, il suffit d’écrire le nom du fichier seulement.
Alt= «texte»: texte qui s’affiche si l’image ne peut pas
être affichée.
HSPACE= « xx » espacement entre l’image et la
bordure horizontale.
VSPACE= « yy » espacement entre l’image et la
bordure verticale.
BORDER= « zz » bordure de l’image
WIDTH= « ss » largeur de l’image
HEIGHT= « hh » hauteur de l’image
51
Exemple
<html>
<head>
<title></title>
</head>
<body>
<img SRC="[Link]" ALT="Tunisie" HSPACE="10"
VSPACE="10" BORDER="5" width="200"
height="200" />
</H1>
</body>
</html>
52
53
Chapitre 3: Les tableaux, les
liens hypertextes et les
formulaires
54
Les tableaux
<TABLE> qui indique au navigateur la création d'un tableau.
</TABLE> pour le fermer
<TR> </TR> créer/insérer une ligne.
<TD> </TD> créer/insérer une cellule (colonne).
<TH> </TH> définit l'en-tête de chaque colonne (remplace la balise <td>
pour la première ligne (<tr>) si nécessaire.
<Caption> affiche un titre pour le tableau.
55
<Caption> possède l’attribut:
Align =
top (au dessus du tableau) ou
bottom (au dessous du tableau)
Exemple: <Caption Align=top>
56
Alignement
Le contenu d’une table, cellule ou ligne peut être
aligné:
Horizontalement:
•Right
•Left
•Center
Ou verticalement
•Top
•Middle
•Bottom
•Baseline
57
Left
(défaut)
Align
Right
Aligner les
éléments
du tableau. Center
(td, th et tr)
VAlign Middle
Top
BASELINE
Bottom
58
Fusion de cellules
On peut fusionner deux ou plusieurs cellules:
Horizontalement (sur les colonnes): colspan= x
Verticalement (sur les lignes): rowspan= x
•X est le nombre des cellules à fusionner
59
Des lignes
Sur une Rowspan
Colonnes
Fusionner
les lignes
et
colonnes.
Des colonnes (td, th)
Sur une Colspan
Lignes
60
Attributs de mise en page et d'espacement
(valable pour <TABLE>, <TD> et <TH>).
WIDTH: Largeur du tableau ou d'une cellule, en pixels ou
pourcentage de la fenêtre du navigateur.
HEIGHT: Hauteur du tableau ou d'une cellule, en pixels ou
pourcentage de la fenêtre du navigateur.
BORDER: Taille en pixels de la bordure du tableau.
CELLPADDING: Espace en pixels entre la bordure et le contenu de
la cellule du tableau.
61
CELLSPACING: Espace en pixels entre les cellules du tableau.
BGCOLOR: Couleur de font d'une cellule.
BORDERCOLOR: Couleur de la bordure du tableau.
BORDERCOLORLIGHT: Couleur aux points
culminants(dominants) de la bordure du tableau (effet 3d).
BORDERCOLORDARK: Couleur de l'ombre de la bordure du
tableau (effet 3d).
BACKGROUND: Image d'arrière plan du tableau ([Link]
seulement). 62
Exemple d'un tableau avec certains de ces attributs.
<TABLE BORDER=2 BORDERCOLOR="BLUE" BORDERCOLORDARK="AQUA" WIDTH=300 HEIGHT=150>
<TR>
<TD BGCOLOR="PINK">Cellule 1</TD>
<TD>Cellule 2</TD>
<TD>Cellule 3</TD>
</TR>
<TR>
<TD>Cellule 4</TD>
<TD BGCOLOR="YELLOW">Cellule 5</TD>
<TD>Cellule 6</TD>
</TR>
<TR>
<TD>Cellule 7</TD>
<TD>Cellule 8</TD>
<TD BGCOLOR="MAROON">Cellule 9</TD>
</TR>
</TABLE> 63
Les liens hypertextes
La balise <A> permet d'établir un lien hypertexte vers:
Vers l'extérieur (vers un autre site Web)
Vers une autre page du même site
A l'intérieur de la même page web
Ses attributs sont:
HREF : Source du document à atteindre.
TARGET : Où le document doit être ouvert.
64
Liens externes
On donne l’adresse URL du site, du fichier ou de la page web à
ouvrir:
<A href=«URL »> Texte </A>
URL peut être:
[Link] pour ouvrir le site [Link]
[Link] nom_du_site.com, pour télécharger des fichiers
Nom_fichier.exe pour, proposer un fichier exe à télécharger
Nom_fichier.zip, pour proposer un fichier zip à télécharger
65
Les Liens internes
1. Liens internes dans une même page web.
Les liens internes permettent de se déplacer à l'intérieur d'une même page
web.
Deux étapes:
1. Définir la cible d’un lien (l’ancre) c’est-à-dire l’emplacement où vous
voulez aller:
<A NAME=« nom_du_lien"></A>
2. Associer un lien à une ancre.
<A HREF="#nom_du_lien">Texte</A>
66
2. Liens internes vers une page différente.
Il est très facile de créer des liens entre des pages HTML.
a) Lien vers une page située dans le même dossier.
ex : <A HREF=« nom_page.htm">Cliquez ici</A>
b) Lien vers une page dans un dossier différent.
ex : <A HREF=« nom_dossier/nom_page.htm">Cliquez ici</A>
c) Lien vers une ancre d'une autre page dans le même dossier.
ex : <A HREF=« nom_page.htm#ancre">Cliquez ici</A>
d) Lien vers une ancre d'une autre page dans un dossier différent.
ex : <A HREF=« nom_dossier/nom_fichier.htm#ancre">Cliquez ici</A>
67
Les formulaires
La création des formulaires se réalise grâce à plusieurs champs dans lesquels
le visiteur entre une information ou opte pour un choix.
La balise <FORM> ouvre votre formulaire,
La balise </FORM> ferme votre formulaire
68
1. Champs de saisie.
<INPUT TYPE="text" ... > permet à l'utilisateur de saisir une seule
ligne de texte.
Elle a les attributs suivants :
NAME: Définit le nom de la donnée (obligatoire).
SIZE: Définit la taille visible du champ en nombre de caractères.
MAXLENGHT: Taille maximale de caractères autorisés.
VALUE: Définit le texte par défaut à l'intérieur du champ.
69
2. Boîte de texte multi-lignes
<TEXTAREA> et </TEXTAREA> : création d’une boîte de texte
multi-lignes
Utilisée pour:
laisser un commentaire
laisser un message
On peut mettre un texte par défaut entre <Textarea> et
</Textarea>
70
Ses attributs sont :
NAME : Définit le nom de la donnée.
ROWS : Définit le nombre de lignes dans la boîte de saisie.
COLS : Définit le nombre de colonnes (en caractères) par ligne.
READONLY : Spécifie que la boîte multi-lignes est en mode lecture
seulement (l’utilisateur ne peut pas modifier le texte).
71
Exemple
<TEXTAREA NAME="COMMENTAIRE" COLS=30 ROWS=4>
Tapez votre commentaire
</TEXTAREA>
72
3. Listes de choix: <SELECT>
La balise <SELECT> présente une liste de propositions.
Soit sous forme de liste déroulante (1 seul choix possible)
Soit sous forme de menu (plusieurs choix possibles)
La balise <OPTION> à l’intérieur de la balise <SELECT> pour définir
les choix.
</SELECT> pour fermer la liste de choix.
73
Ses attributs sont:
NAME: Définit le nom de la donnée (le nom de la liste).
SIZE: S'il a comme valeur 1(valeur par défaut), c'est une liste déroulante si
SIZE supérieur à 1 c'est une liste de choix avec une barre de défilement.
MULTIPLE: Ce choix est valable uniquement si SIZE est supérieur à 1.
Dans ce cas on peut effectuer plusieurs choix en même temps (en utilisant
la touche Ctrl).
74
La balise <OPTION> comporte deux attributs :
VALUE: Nom de la donnée pour le choix.
SELECTED: S'il est présent dans la balise <OPTION> le choix est alors
sélectionné par défaut.
75
Exemple 1: Sous forme de liste déroulante
Veuillez Choisir votre Filière
<SELECT NAME="filiere">
<OPTION VALUE="LAGS">Licence Appliquée en Gestion </OPTION>
<OPTION VALUE="LFGS"> Licence Fondamentale en Gestion </OPTION>
<OPTION VALUE="LAEM"> Licence Appliquée en Economie </OPTION>
<OPTION VALUE="LFEM"> Licence Fondamentale en Economie </OPTION>
</SELECT>
76
Exemple 1: Sous forme de Menu
Veuillez Choisir Vos Intérêts:
<SELECT NAME="interet" SIZE=3 MULTIPLE>
<OPTION VALUE=« SP">Sport </OPTION >
<OPTION VALUE=« Int">Internet</OPTION >
<OPTION VALUE=« Flm">Films</OPTION >
<OPTION VALUE=« Lec">Lecture</OPTION >
<OPTION VALUE=« Shp">Shopping</OPTION >
</SELECT>
77
2. Les cases à cocher et les boutons radios
La Balise <INPUT> permet aussi de représenter une liste de cases à cocher
(plusieurs choix possibles) ou une liste de boutons radios (1 seul choix
possible).
Ses attributs sont:
TYPE=
"checkbox" (cases à cocher) ou,
"radio" (bouton radio).
NAME : Définit le nom de la donnée (obligatoire).
VALUE : Nom de la donnée pour le choix.
CHECKED: S'il est présent dans la balise <INPUT>, le bouton sera coché par
défaut.
78
Exemple d'une liste de 3 cases à cocher
Cette liste se positionne verticalement du fait que la balise <BR>
a été insérée après chaque choix.
<INPUT TYPE="checkbox" NAME="pays" VALUE="TN"> Tunisie<BR>
<INPUT TYPE="checkbox" NAME="pays" VALUE="ALG"> Algérie<BR>
<INPUT TYPE="checkbox" NAME="pays" VALUE="FR"> France<BR>
On ramarque que:
NAME est le même
VALUE est différent
79
Exemple d'une liste à 2 boutons radios
A noter que le 2ème choix est coché par défaut
<INPUT TYPE="radio" NAME="genre" VALUE="H"> Homme
<INPUT TYPE="radio" NAME="genre" VALUE="F" CHECKED> Femme
On ramarque que:
NAME est le même
VALUE est différent
80
La balise <DIV>.
La balise <DIV> permet de définir l'alignement de plusieurs éléments
(titres, textes, images, filets, ...).
Elle possède l'attribut ALIGN qui prend 3 valeurs (RIGHT ou LEFT ou
CENTER), elle peut donc remplacer la balise <CENTER>, qui elle permet
de centrer plusieurs éléments sur une page.
</DIV> pour fermer la balise.
81
Exemple 1 :
<DIV ALIGN=LEFT> Votre texte ici </DIV>
A noter que depuis la version 4.0 du HTML, la balise <DIV> se diversifie, en
effet elle accepte l'attribut STYLE (feuilles de styles, sujet qui sera abordé
plus tard).
Exemple 2 :
<DIV STYLE="color:green"> Votre texte ici </DIV>
82