- 2013-12-22 - Licence Fondamentale d'Informatique
samedi 28 décembre 2013

Les types d'attaque

Introduction

Les hackers utilisent plusieurs techniques d'attaques. Ces attaques peuvent être regroupées en trois familles différentes :
  • Les attaques directes.
  • Les attaques indirectes par rebond.
  • Les attaques indirectes par réponses.
Nous allons voir en détail ces trois familles.


Les attaques directes

C'est la plus simple des attaques. Le hacker attaque directement sa victime à partir de son ordinateur. La plupart des "script kiddies" utilisent cette technique. En effet, les programmes de hack qu'ils utilisent ne sont que faiblement paramétrables, et un grand nombre de ces logiciels envoient directement les packets à la victime.

Si vous vous faites attaquer de la sorte, il y a de grandes chances pour que vous puissiez remonter à l'origine de l'attaque, identifiant par la même occasion l'identité de l'attaquant.


Les attaques indirectes par rebond

Cette attaque est très prisée des hackers. En effet, le rebond a deux avantages :
  • Masquer l'identité (l'adresse IP) du hacker.
  • Eventuellement, utiliser les ressources de l'ordinateur intermédiaire car il est plus puissant (CPU, bande passante...) pour attaquer.
Le principe en lui même, est simple : Les packets d'attaque sont envoyés à l'ordinateur intermédiaire, qui répercute l'attaque vers la victime. D'où le terme de rebond.

L'attaque FTP Bounce fait partie de cette famille d'attaque.
Si vous êtes victime de ce genre d'attaque, il n'est pas facile de remonter à la source. Au plus simple, vous remontrez à l'ordinateur intermédaire.


Les attaques indirectes par réponse

Cette attaque est un dérivé de l'attaque par rebond. Elle offre les même avantages, du point de vue du hacker. Mais au lieu d'envoyer une attaque à l'ordinateur intermédiaire pour qu'il la répercute, l'attaquant va lui envoyer une requête. Et c'est cette réponse à la requête qui va être envoyée à l'ordinateur victime.

Là aussi, il n'est pas aisé de remonter à la source...


Conclusion

Lorsque vous vous faites attaquer, cela peut se faire en direct ou via un ou plusieurs ordinateurs intermédiaires. Le fait de comprendre l'attaque va vous permettre de savoir comment remonter au hacker. 

Analyseurs réseau (sniffers)

L'analyse de réseau

Un « analyseur réseau » (appelé également analyseur de trames ou en anglais sniffer, traduisez « renifleur ») est un dispositif permettant d'« écouter » le trafic d'un réseau, c'est-à-dire de capturer les informations qui y circulent.
En effet, dans un réseau non commuté, les données sont envoyées à toutes les machines du réseau. Toutefois, dans une utilisation normale les machines ignorent les paquets qui ne leur sont pas destinés. Ainsi, en utilisant l'interface réseau dans un mode spécifique (appelé généralement mode promiscuous) il est possible d'écouter tout le trafic passant par un adaptateur réseau (une carte réseau ethernet, une carte réseau sans fil, etc.).

Utilisation du sniffer

Un sniffer est un formidable outil permettant d'étudier le trafic d'un réseau. Il sert généralement aux administrateurs pour diagnostiquer les problèmes sur leur réseau ainsi que pour connaître le trafic qui y circule. Ainsi les détecteurs d'intrusion (IDS, pour intrusion detection system) sont basés sur un sniffeur pour la capture des trames, et utilisent une base de données de règles (rules) pour détecter des trames suspectes.
Malheureusement, comme tous les outils d'administration, le sniffer peut également servir à une personne malveillante ayant un accès physique au réseau pour collecter des informations. Ce risque est encore plus important sur les réseaux sans fils car il est difficile de confiner les ondes hertziennes dans un périmètre délimité, si bien que des personnes malveillantes peuvent écouter le trafic en étant simplement dans le voisinage.
La grande majorité des protocoles Internet font transiter les informations en clair, c'est-à-dire de manière non chiffrée. Ainsi, lorsqu'un utilisateur du réseau consulte sa messagerie via le protocole POP ou IMAP, ou bien surfe sur internet sur des sites dont l'adresse ne commence pas par HTTPS, toutes les informations envoyées ou reçues peuvent être interceptées. C'est comme cela que des sniffers spécifiques ont été mis au point par des pirates afin de récupérer les mots de passe circulant dans le flux réseau.

Les parades

Il existe plusieurs façons de se prémunir des désagréments que pourrait provoquer l'utilisation d'un sniffer sur votre réseau :
  • Utiliser des protocoles chiffrés pour toutes les communications dont le contenu possède un niveau de confidentialité élevé.
  • Segmenter le réseau afin de limiter la diffusion des informations. Il est notamment recommandé de préférer l'utilisation de switchs (commutateurs) à celle des hubs (concentrateurs) car ils commutent les communications, c'est-à-dire que les informations sont délivrées uniquement aux machines destinataires.
  • Utiliser un détecteur de sniffer. Il s'agit d'un outil sondant le réseau à la recherche de matériels utilisant le mode promiscuous.
  • Pour les réseaux sans fils il est conseillé de réduire la puissance des matériels de telle façon à ne couvrir que la surface nécessaire. Cela n'empêche pas les éventuels pirates d'écouter le réseau mais réduit le périmètre géographique dans lequel ils ont la possibilité de le faire.

Plus d'informations


Usurpation d'adresse IP (Mystification / Spoofing)

L'usurpation d'adresse IP

L'« usurpation d'adresse IP » (également appelé mystification ou en anglaisspoofing IP) est une technique consistant à remplacer l'adresse IP de l'expéditeur d'un paquet IP par l'adresse IP d'une autre machine. 
Cette technique permet ainsi à un pirate d'envoyer des paquets anonymement. Il ne s'agit pas pour autant d'un changement d'adresse IP, mais d'unemascarade de l'adresse IP au niveau des paquets émis. 
Ainsi, certains tendent à assimiler l'utilisation d'un proxy (permettant de masquer d'une certaine façon l'adresse IP) avec du spoofing IP. Toutefois, le proxy ne fait que relayer les paquets. Ainsi même si l'adresse est apparemment masquée, un pirate peut facilement être retrouvé grâce au fichier journal (logs) du proxy. 

Attaque par usurpation

La technique de l'usurpation d'adresse IP peut permettre à un pirate de faire passer des paquets sur un réseau sans que ceux-ci ne soient interceptés par le système de filtrage de paquets (pare-feu). 
En effet, un système pare-feu (en anglais firewall) fonctionne la plupart du temps grâce à des règles de filtrage indiquant les adresses IP autorisées à communiquer avec les machines internes au réseau. 
Franchissement d\



Ainsi, un paquet spoofé avec l'adresse IP d'une machine interne semblera provenir du réseau interne et sera relayé à la machine cible, tandis qu'un paquet contenant une adresse IP externe sera automatiquement rejeté par le pare-feu. 
Cependant, le protocole TCP (protocole assurant principalement le transport fiable de données sur Internet) repose sur des liens d'authentification et d'approbation entre les machines d'un réseau, ce qui signifie que pour accepter le paquet, le destinataire doit auparavant accuser réception auprès de l'émetteur, ce dernier devant à nouveau accuser réception de l'accusé de réception. 

Modification de l'en-tête TCP

Sur internet, les informations circulent grâce au protocole IP, qui assure l'encapsulation des données dans des structures appelées paquets (ou plus exactement datagramme IP). Voici la structure d'un datagramme : 

VersionLongueur d'en-têteType de serviceLongueur totale
IdentificationDrapeauDécalage fragment
Durée de vieProtocoleSomme de contrôle en-tête
Adresse IP source
Adresse IP destination
Données



Usurper une adresse IP revient à modifier le champ source afin de simuler un datagramme provenant d'une autre adresse IP. Toutefois, sur internet, les paquets sont généralement transportés par le protocole TCP, qui assure une transmission dite « fiable ». 
Avant d'accepter un paquet, une machine doit auparavant accuser réception de celui-ci auprès de la machine émettrice, et attendre que cette dernière confirme la bonne réception de l'accusé. 

Les liens d'approbation

Le protocole TCP est un des principaux protocoles de la couche transport du modèle TCP/IP. Il permet, au niveau des applications, de gérer les données en provenance (ou à destination) de la couche inférieure du modèle (c'est-à-dire le protocole IP). 
Le protocole TCP permet d'assurer le transfert des données de façon fiable, bien qu'il utilise le protocole IP (qui n'intègre aucun contrôle de livraison de datagramme) grâce à un système d'accusés de réception (ACK) permettant au client et au serveur de s'assurer de la bonne réception mutuelle des données. 
Les datagrammes IP encapsulent des paquets TCP (appelés segments) dont voici la structure : 

0123456789101112131415
Port Source 
Numéro d'ordre
Numéro d'accusé de réception
Décalage 
données
réservéeURGACKPSHRSTSYNFIN 
Somme de contrôle 
Options 
Données
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
16171819202122232425262728293031
Port destination
Numéro d'ordre
Numéro d'accusé de réception
fenetre
Pointeur d'urgence
optionsremplissage
Données




Lors de l'émission d'un segment, un numéro d'ordre (appelé aussi numéro de séquence) est associé, et un échange de segments contenant des champs particuliers (appelés drapeaux, en anglais flags) permet de synchroniser le client et le serveur. 
Ce dialogue (appelé poignée de mains en trois temps) permet d'initier la communication, il se déroule en trois temps, comme sa dénomination l'indique:
  • Dans un premier temps, la machine émettrice (le client) transmet un segment dont le drapeau SYN est à 1 (pour signaler qu'il s'agit d'un segment de synchronisation), avec un numéro d'ordre N, que l'on appelle numéro d'ordre initial du client.
  • Dans un second temps la machine réceptrice (le serveur) reçoit le segment initial provenant du client, puis lui envoie un accusé de réception, c'est-à-dire un segment dont le drapeau ACK est non nul (accusé de réception) et le drapeau SYN est à 1 (car il s'agit là encore d'une synchronisation). Ce segment contient un numéro de séquence égal au numéro d'ordre initial du client. Le champ le plus important de ce segment est le champ accusé de réception (ACK) qui contient le numéro d'ordre initial du client, incrémenté de 1.
  • Enfin, le client transmet au serveur un accusé de réception, c'est-à-dire un segment dont le drapeau ACK est non nul, et dont le drapeau SYN est à zéro (il ne s'agit plus d'un segment de synchronisation). Son numéro d'ordre est incrémenté et le numéro d'accusé de réception représente le numéro de séquence initial du serveur incrémenté de 1.

. La machine spoofée va répondre avec un paquet TCP dont le drapeau RST (reset) est non nul, ce qui mettra fin à la connexion. 

Annihiler la machine spoofée

Dans le cadre d'une attaque par usurpation d'adresse IP, l'attaquant n'a aucune information en retour car les réponses de la machine cible vont vers une autre machine du réseau (on parle alors d'attaque à l'aveugle, en anglais blind attack). 
La machine spoofée répond au ACK par un RST



De plus, la machine « spoofée » prive le hacker de toute tentative de connexion, car elle envoie systématiquement un drapeau RST à la machine cible. Le travail du pirate consiste alors à invalider la machine spoofée en la rendant injoignable pendant toute la durée de l'attaque. 

Prédire les numéros de séquence

Lorsque la machine spoofée est invalidée, la machine cible attend un paquet contenant l'accusé de réception et le bon numéro de séquence. Tout le travail du pirate consiste alors à « deviner » le numéro de séquence à renvoyer au serveur afin que la relation de confiance soit établie. 
Pour cela, les pirates utilisent généralement le source routing, c'est-à-dire qu'ils utilisent le champ option de l'en-tête IP afin d'indiquer une route de retour spécifique pour le paquet. Ainsi, grâce au sniffing, le pirate sera à même de lire le contenu des trames de retour... 
Recherche des numéros de séquence



Ainsi, en connaissant le dernier numéro de séquence émis, le pirate établit des statistiques concernant son incrémentation et envoie des accusés de réception jusqu'à obtenir le bon numéro de séquence. 

Plus d'information

Introduction aux attaques

Introduction aux attaques

Tout ordinateur connecté à un réseau informatique est potentiellement vulnérable à une attaque.
Une « attaque » est l'exploitation d'une faille d'un système informatique (système d'exploitation, logiciel ou bien même de l'utilisateur) à des fins non connues par l'exploitant du systèmes et généralement préjudiciables.
Sur internet des attaques ont lieu en permanence, à raison de plusieurs attaques par minute sur chaque machine connectée. Ces attaques sont pour la plupart lancées automatiquement à partir de machines infectées (par des virus,chevaux de Troievers, etc.), à l'insu de leur propriétaire. Plus rarement il s'agit de l'action de pirates informatiques.
Afin de contrer ces attaques il est indispensable de connaître les principaux types d'attaques afin de mettre en oeuvre des dispositions préventives.
Les motivations des attaques peuvent être de différentes sortes :
  • obtenir un accès au système ;
  • voler des informations, tels que des secrets industriels ou des propriétés intellectuelles ;
  • glâner des informations personnelles sur un utilisateur ;
  • récupérer des données bancaires ;
  • s'informer sur l'organisation (entreprise de l'utilisateur, etc.) ;
  • troubler le bon fonctionnement d'un service ;
  • utiliser le système de l'utilisateur comme « rebond » pour une attaque ;
  • utiliser les ressources du système de l'utilisateur, notamment lorsque le réseau sur lequel il est situé possède une bande passante élevée

Types d'attaques

Les systèmes informatiques mettent en oeuvre différentes composantes, allant de l'électricité pour alimenter les machines au logiciel exécuté via le système d'exploitation et utilisant le réseau.
Les attaques peuvent intervenir à chaque maillon de cette chaîne, pour peu qu'il existe une vulnérabilité exploitable. Le schéma ci-dessous rappelle très sommairement les différents niveaux pour lesquels un risque en matière de sécurité existe :
Risques en matière de sécurité
Il est ainsi possible de catégoriser les risques de la manière suivante :
  • Accès physique : il s'agit d'un cas où l'attaquant à accès aux locaux, éventuellement même aux machines :
    • Coupure de l'électricité
    • Extinction manuelle de l'ordinateur
    • Vandalisme
    • Ouverture du boîtier de l'ordinateur et vol de disque dur
    • Ecoute du trafic sur le réseau
  • Interception de communications :
    • Vol de session (session hijacking)
    • Usurpation d'identité
    • Détournement ou altération de messages
  • Dénis de service : il s'agit d'attaques visant à perturber le bon fonctionnement d'un service. On distingue habituellement les types de déni de service suivant :
    • Exploitation de faiblesses des protocoles TCP/IP
    • Exploitation de vulnérabilité des logiciels serveurs
  • Intrusions :
    • Balayage de ports
    • Elévation de privilèges : ce type d'attaque consiste à exploiter une vulnérabilité d'une application en envoyant une requête spécifique, non prévue par son concepteur, ayant pour effet un comportement anormal conduisant parfois à un accès au système avec les droits de l'application. Les attaques par débordement de tampon (en anglaisbuffer overflow) utilisent ce principe.
    • Maliciels (virus, vers et chevaux de Troie
  • Ingénierie sociale : Dans la majeure partie des cas le maillon faible est l'utilisateur lui-même ! En effet c'est souvent lui qui, par méconnaissance ou par duperie, va ouvrir une brêche dans le système, en donnant des informations (mot de passe par exemple) au pirate informatique ou en exécutant une pièce jointe. Ainsi, aucun dispositif de protection ne peut protéger l'utilisateur contre les arnaques, seuls bon sens, raison et un peu d'information sur les différentes pratiques peuvent lui éviter de tomber dans le piège !
  • Trappes : il s'agit d'une porte dérobée (en anglais backdoor) dissimulée dans un logiciel, permettant un accès ultérieur à son concepteur.
Pour autant, les erreurs de programmation contenues dans les programmes sont habituellement corrigées assez rapidement par leur concepteur dès lors que la vulnérabilité a été publiée. Il appartient alors aux administrateurs (ou utilisateurs personnels avertis) de se tenir informé des mises à jour des programmes qu'ils utilisent afin de limiter les risques d'attaques.
D'autre part il existe un certain nombre de dispositifs (pare-feusystèmes de détection d'intrusionsantivirus) permettant d'ajouter un niveau de sécurisation supplémentaire.

Effort de protection

La sécurisation d'un système informatique est généralement dite « asymétrique », dans la mesure où le pirate n'a qu'à trouver une seule vulnérabilité pour compromette le système, tandis que l'administrateur se doit de corriger toutes les failles.

Attaques par rebond

Lors d'une attaque, le pirate garde toujours à l'esprit le risque de se faire repérer, c'est la raison pour laquelle les pirates privilégient habituellement lesattaques par rebond (par opposition aux attaques directes), consistant à attaquer une machine par l'intermédiaire d'une autre machine, afin de masquer les traces permettant de remonter à lui (telle que son adresse IP) et dans le but d'utiliser les ressources de la machine servant de rebond.
Cela montre l'intérêt de protéger son réseau ou son ordinateur personnel, il est possible de se retrouver « complice » d'une attaque et en cas de plainte de la victime, la première personne interrogée sera le propriétaire de la machine ayant servi de rebond.

Avec le développement des réseaux sans fils, ce type de scénario risque de devenir de plus en plus courant car lorsque le réseau sans fil est mal sécurisé, un pirate situé à proximité peut l'utiliser pour lancer des attaques !
jeudi 26 décembre 2013

Cours technologies et programmation web








Faculté des sciences de Monastir


Cours technologies et programmation web


LFI3



Plan

Chapitre I: Le Web statique
Définir Internet
Définir World-Wide Web
Apprendre le langage HTML
Créer une page Web statique (TP)
Tester les limites et les inconvénients du Web statique (TP)

Chapitre II: Le Web dynamique
Connaître les solutions pour pallier les défauts du HTML
Différencier entre les LPCC et les LPCS
Apprendre le langage PHP
Créer une page Web dynamique (TP)















     Chapitre I : Le Web statique
1)    Définition

-          Internet :
Internet est un système d'interconnexion de machines qui constitue un réseau informatique mondial, utilisant un ensemble standardisé de protocoles de transfert de données.

-          Le Web :
Le World-Wide Web (ou WWW, ou Web) n’est qu'une des applications d’Internet : distincte d’autres applications comme le courrier électronique, la messagerie instantanée, et le partage de fichiers en pair à pair. Tel qu’il est un ensemble de pages en HTML mélangeant du texte, des liens, des images, adressables via une URL et accessibles via le protocole HTTP.
Historique : Web a été inventé par Tim Berners-Lee plusieurs années après Internet, mais c’est lui qui a rendu les médias grand public attentifs à Internet. Depuis, le Web est fréquemment confondu avec Internet.
– Internet voit le jour dans les années 60
– Le WWW ne sera conçu qu'au début des années 90
-          URL :
Le sigle URL (de l'anglais Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), auquel se substitue informellement le terme adresse web, désigne une chaîne de caractères utilisée pour adresser les ressources du World Wide Web.

-          HTTP :
 L'HyperText Transfer Protocol,  littéralement « protocole de transfert hypertexte », est un protocole de communication client-serveur développé pour le World Wide Web.

-          HTML :
Le langage HTML (ou Hyper Text Markup Language) Fonctionne sous différentes plateformes (Mac OS, ipad, Linux, Androïd, MS Windows, etc) et il est Standard du World Wide Web Consortium

2)      HTML
-          Un document HTML comprend deux parties:
·          L’en-tête marqué par la balise < HEAD>.
·         Le corps du document marqué par la balise < BODY>.

A)     La structure de base
<html>           // Ceci est le début d'un document de type HTML.
                             <head> // Ceci est le début de la zone d'en-tête
<title> Cours HTML </title> // Ceci est le début du titre de la page.
</head> // Ceci est la fin de la zone d'en-tête.

<body>  // Ceci est le début du document proprement dit
Page d’accueil de cours html
</body> // Ceci est la fin du document proprement dit.
</html>     // Ceci est la fin d'un document de type HTML.
Remarque :
·         Seules les balises <HTML> et <BODY> sont obligatoires dans une page Web.
·          Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>.
·          Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire
<HTML>, <html>, <Html>, etc.

B)      Exemples des balises
       <TITLE> : titre d’une page
<BR> : passage à la ligne suivante
<H1> à <H6>: taille du texte
<CENTER> : pour centrer le contenu
<B> : caractères gras
<FONT> : police de caractère
<FORM> : formulaire
<FRAME> : cadre

 <IMG> : image
 <TABLE> : tableau
 <TH> : légende de ligne ou de colonne
 <TR> : ligne d’un tableau
 <TD> : colonne d’un tableau
 <P> : séparation des paragraphes
 <OL> : liste numérotée
<BR> : Aller à la ligne

C)      Police, taille de la police, couleur

-          La balise <FONT> sert à définir les caractéristiques des textes dans une page HTML.
-          Ces caractéristiques se définissent à l’aide des attributs de la balise FONT :
·         La police de caractère: <FONT face=" Arial"> Le nom de la police doit être indiqué entre guillemets
·          La taille de la police: <FONT size="-1"> L’attribut « size » prend des valeurs allant de -7 à +7.
·          La couleur de la police : <FONT color="blue"> Cet attribut permet de paramétrer la couleur du texte ou d’une portion de texte.
·          Alignement du texte: <FONT align="center"> L’attribut « align » prend comme valeur : « right », « left », « center ».

D)     Mettre en caractère gras, italique
-          Il suffit de mettre le texte entre les balises appropriées:
<B>Mise en caractères gras</B>
<I>Mise en italique</I>

-          Celles-ci peuvent être additionnées à volonté :
<B><I>Mise en caractères gras et italique</I></B>
<I><B>Mise en caractères gras et italique</B></I>

E)      Les tableaux
-          Syntaxe d’un tableau 
<table border = ‘’1’’>
<tr>
<td> case 1 </td>
<td> case 2 </td>
</tr>
<tr>
<td> case 3 </td>
<td> case 4 </td>
</tr>
</table>

-          Les attributs des tableaux
·         Border : taille bordure du tableau
·         Bordercolor : couleur de la bordure
·         Bgcolor : couleur de fond du tableau
·         Cellpadding : espace de remplissage entre les données et le quadrillage
·         Cellspacing : espace entre les cellules du tableau
·         Width : largeur des cellules
Les attributs se cumulent :
<table border="1" cellpadding="1" cellspacing="0" width="100%" bordercolor="#000000" bgcolor="#0099FF">
-          Ligne d’un tableau
La balise <TR> marque chaque nouveau début de ligne, sa balise fermante </TR> marque chaque fin de ligne.
Les attributs de cette balise sont:
·         Bgcolor : couleur de fond
·         Valign: Permet de préciser l'alignement vertical du contenu de chaque ligne.
o   Valign="top " : Le contenu de chaque cellule est justifié vers le haut. Il s'agit de la valeur par défaut.
o    Valign ="middle" : Le contenu de chaque cellule est centré verticalement.
o   Valign ="bottom" : Le contenu de chaque cellule est centré vers le bas.

-          Colonne d’un tableau
La balise <TD> définit chaque cellule d'un tableau.
Ses attributs sont :
·         Bgcolor: Background
·         Colspan="valeur": Spécifie le nombre de colonnes occupées par la cellule. La valeur par défaut est 1.
·         Rowspan="valeur": Spécifie le nombre de lignes occupées par la cellule. La valeur par défaut est 1.
·         Valign
o   Height: Spécifie la hauteur de la cellule.
o   Width: Spécifie la largeur de la cellule.



F)      Liste numérotée

-          Syntaxe d’une liste avec numérotation
<ol >  (ou <ol = type =’A’>)
<li> entrée 1 </li>
<li> entrée 2 </li>
<li> entrée 3 </li>
<li> …. </li>
</ol>

G)      Liste Non numérotée
Syntaxe d’une liste sans numérotation
<ul>
<li> entrée 1 </li>
<li> entrée 2 </li>
<li> entrée 3 </li>
<li> … </li>
</ul>

H)     Insertion d’images
-          Syntaxe d’insertion d’une Image
<img src=’adresse_web_image’ alt=’text alternatif’>
-          Les attribues :
§  BORDER=b, où b indique la taille, en pixels, de la bordure.
§  ALIGN=option, où option peut être RIGHT, LEFT, MIDDLE, BOTTOM ou TOP, permet de spécifier l’alignement de l’image.
§   HEIGHT=h WITDH=w sont les attributs qui permettent de forcer la taille d’une image (en pourcentage ou en pixels).

I)        Les liens hypertextes
-          Syntaxe d’un lien hypertexte
<a href=’adresse_web’> texte servant de lien </a>
ð  Lorsque l’on clique sur texte servant de lien , on va a l’adresse (url) adresse_web .
ð  Autres attributs  de la balise <a> :
Target=’cible’ pour ouvrir l’url cible
Target=’_blank’ pour une nouvelle fenêtre.
-          Caractéristiques du lien :
o    Absolu : adresse_web a un chemin complet (obligatoire pour un lien situé sur un autre site Web )
o    Relatif : adresse_web a un chemin définie par rapport à la page actuelle (préférable sur son site)

-          Exemples de lien
o   <a href= ‘documents/un_doc.pdf’> un lien internet avec chemin relatif </a>
o   <a href= ‘http://fr.wikipedia.prg/’> un lien externe avec chemin absolu </a>
o   <a href= ’http://fr.wikipedia.prg/’ target=’_blank’> un lien externet avec chemin absolu ,qui s’ouvre dans une nouvelle fenetre </a>
o   <a href= ‘page.html#section3’> un lien interne ,pointant sur l’ancre section3 de la page  page.html</a>
o   <a href=’mailto :maraoui.mohsen@gmail.com< Mohsen Maroui</a>

J)       Commentaire :
Commenter le code, avec les balises < !--  -->
Exemple :
< !—ceci est un commentaire -->


3)    Les feuilles de styles (CSS)
-          CSS signifie "Cascading Style Sheet".
a)        Modelé fondamental de CSS :

Selector {Property :value ;}
Selector : à quelle(s) balise(s) HTML la propriété s’applique (par exemple ‘body’)
Property : la propriété par exemple la couleur d’arrière-plan ‘background-color’
Value : la valeur de la propriété de couleur d’arrière-plan, par exemple le rouge ‘#FF0000

                Exemple :
                .body {background-color :#FF0000 ;}
b)      Appliquer CSS a un document HTML
b.1) Méthode 1 : Dans la ligne (l’attribue style)
-           
<html >
<head>
<title> exemple </title>
                </head>
                                <body style=’background-color :#FF0000 ; ‘>
                                               <p> Cette page est rouge </p>
                                </body>
</html>

B.2) Méthode 2 : Internet (l’element style)
-          Cette façon de procéder est de loin la plus commune et la plus logique. D'abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l'on rejoint ainsi l'essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu.

<html >      
<head>
<title> exemple </title>
<style type=’text/css’>
                                      Body { background-color :#FF0000 ; }
                       </style>
</head>
       <body>
                       <p> Cette page est rouge </p>
       </body>
</html>
Remarque :
·         La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.
•     L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css).

b.3) Méthode 3 : Externe (un lien vers une feuille de style)
Defaut.html
<html >      
<head>
<title> Mon document </title>
<link rel=’stylesheet’ type=’text/css’ herf=’style/style.css’ />
</head>
       <body>
                       <h1> Ma premiere feuille de style </h1>
       </body>
</html>

Style.css
       Body { background-color :#FF0000 ; }

-          Compléments CSS
·         font-family : comme serif (Times), sans-serif (Arial ou Helvetica) ou monospace (Courier).
·         font-size : exprimées en points (par exemple font- size:16pt), en pixels (font-size:20px), ou par des termes génériques (xx-small, x-small, small, medium, large, x-large, xx-large).
·         font-style : Permet de mettre en italiques (italic), en oblique, ou de revenir à normal. 
·         font-weight : Les valeurs principales sont bold (pour mettre en caractères gras), et normal.
           
c)     Les formulaires
-          Objectifs des formulaires web :
·         Permettre à l’utlisateurice de saisir des paramètres.
·         Envoyer les valeurs saisies pour chaque paramètre au serveur.
·         Accéder à une page dynamique générée par le serveur selon les valeurs des paramètres.

a)     La balise principale

Le formulaire est délimité dans le code HTML par le conteneur : <FORM> </FORM>, c'est-à-dire que toutes les balises de base propres aux formulaires devront être contenues entre ce couple de balises. A l'intérieur de ce conteneur pourra aussi figurer les autres balises HTML pour la mise en forme (fontes, couleurs, tableaux, images...).
La balise <FORM> possède des attributs permettant de choisir le nom du formulaire nécessaire en cas d'utilisation de JavaScript pour la vérification des champs de saisies avec NAME, de spécifier l'adresse (URL ou e-mail) vers laquelle les données seront envoyées grâce à ACTION, de sélectionner une méthode d'envoi des données avec METHOD.
Ici, nous considérerons seulement le cas (le plus largement utilisé) où les données sont envoyées au format texte vers la boite aux lettres du webmaster. Ainsi la balise <FORM> devient :
<FORM NAME="nom_du_formulaire" ACTION="code.php" METHOD="post" >

b)    Champ de saisie simple
Champ de texte simple
-          Il est incontournable car présent dans chaque formulaire, c'est la balise de base du formulaire car il permet d'entrer un texte très court comme le nom, l'âge, l'e-mail, etc.
 Il a pour syntaxe : <INPUT TYPE="text"> et pour attributs :
NAME : le nom du champ, 
SIZE : la taille du champ en nombre de caractères, 
MAXLENGTH : la taille maximale de la chaîne de caractère qu'il peut contenir, 
VALUE : le texte à mettre par défaut à l'intérieur du champ.
Syntaxe :
<INPUT TYPE="text" NAME="nom_du_champ" VALUE="texte_par_défaut">
Exemples :
Haut du formulaire
Votre nom : 
Bas du formulaire
Votre nom : <INPUT TYPE="text" NAME="nom" SIZE="20" MAXLENGTH="30" VALUE="Isidor">
Haut du formulaire
Votre e-mail : 
Bas du formulaire
Votre e-mail : <FONT SIZE=3 FACE="arial"><B><INPUT TYPE="text" NAME="nom" SIZE="20" MAXLENGTH="30" VALUE="isidor@labas.com"></B></FONT>
c)     Mot de passe
-          Il vous est aussi donné d'utiliser ce champ afin de contrôler des mots de passe grâce à la balise <INPUT TYPE="password">.
Syntaxe :
<INPUT TYPE="password" NAME="nom_du_champ">
    Exemple :
Haut du formulaire
Votre code secret : 
Bas du formulaire
Votre code secret : <INPUT TYPE="password" NAME="secret">
-          Il est souvent nécessaire à l'internautre d'écrire un commentaire assez long, la balise précédente ne convient pas. On utilise le conteneur <TEXTAREA> pour offrir au visiteur un espace multi-lignes qui lui permettra d'écrire un roman.
 Il a pour attributs :
NAME : le nom du champ, 
ROWS : le nombres de lignes, 
COLS : le nombres de colonnes, 
Enfin, <TEXTAREA> ce comporte comme la balise <PRE> à l'égard du texte par défaut, c'est-à-dire que si dans le code vous sautez des lignes, alors ces sauts de lignes se répercuterons lors de l'affichage dans le champ multi-ligne.
Syntaxe :
<TEXTAREA NAME="nom_du_champ" ROWS="nombre_de_lignes" COLS="nombre_de_colonnes">
</TEXTAREA>
Exemples :
Haut du formulaire
Que faites-vous dans la vie ?
Bas du formulaire
Que faites-vous dans la vie ?
<TEXTAREA NAME="vie_internaute" ROWS="5" COLS="50">
</TEXTAREA>
Haut du formulaire
Voici ce que j'en pense :
Bas du formulaire

-          Il est quelque fois nécessaire, pour s'y retrouver lorsqu'on reçoit les données dans sa boite aux lettre, d'inclure des données cachées permettant de savoir de quel formulaire viennent les données, de quel site web elles proviennent (en cas de formulaire partagé) ou d'insérer des données issus de calculs ou encore des données provenant de JavaScript indiquant le navigateur, l'adresse IP, le nombre de visites ou tout autre renseignement sur le visiteur...
Pour cela on utilise la balise <INPUT TYPE="hidden"> dont les atributs sont :
NAME : nom du champ caché
VALUE le contenu du champ c'est-à-dire sa valeur.
Ce champ ne sera pas vu par l'internaute mais il sera inclu parmi les données.
Syntaxe :
<INPUT TYPE="hidden" NAME="nom_du_champ " VALUE="valeur">
Exemple :
<INPUT TYPE="hidden" NAME="Origine" VALUE="CyberZoïde">
-          Le bouton radio sert à faire faire un choix à l'internaute parmi plusieurs propositions. Un seul choix est possible et le nombre de propositions n'est pas limité.
On utilise pour cela la balise <INPUT TYPE="radio"> dont les attributs sont :
NAME : le nom du groupe de contrôles correspondant c'est-à-dire le nom du champ dans lequel ira la valeur finalement sélectionnée,
 VALUE : la valeur c'est-à-dire le texte qui sera inscrit dans le champ, 
CHECKED : facultatif car indique le bouton coché par défaut.
Syntaxe :
<INPUT TYPE="radio" NAME="nom_du_groupe" VALUE="valeur" [CHECKED]>
Exemple :
Haut du formulaire
Votre qualité :
Monsieur
Madame
Mademoiselle
Bas du formulaire
Votre qualité : <BR>
<INPUT TYPE="
radio" NAME="qualite" VALUE="M" CHECKED>Monsieur<BR>
<INPUT TYPE="
radio" NAME="qualite" VALUE="Mme">Madame<BR>
<INPUT TYPE="
radio" NAME="qualite" VALUE="Mlle">Mademoiselle
-          Dans l’exemple précédent, j’ai créé un groupe de contrôle radio. Le nom de ce groupe est qualite. Comme j’ai besoin de proposer 3 choix différents, je fabrique 3 boutons radio différents. Mais ces trois boutons appartiennent à la même famille qualite c’est pourquoi ils portent tous le nom de qualite. Par contre, leurs valeurs respectives sont différentes. C’est cette valeur qui sera inscrite dans le champ qualite dans le message de données. Si je veux proposer un autre choix avec des boutons radios dans le même formulaire, il me suffit de changer le nom du groupe.

-          Le bouton checkbox est très semblable au bouton radio à la seule différence qu'il est possible d'en sélectionner plusieurs appartenant au même groupe. Les attributs sont strictement les mêmes. Mais on utilise cette fois-ci la balise <INPUT TYPE="checkbox">.
Syntaxe :
<INPUT TYPE="checkbox" NAME="nom_du_groupe " VALUE="valeur" [CHECKED]>
Exemple :
Haut du formulaire
Vos sports préférés :
Natation
Cyclisme
Ski
Pétanque
Basket
Bas du formulaire
Vos sports préférés : <BR>
<INPUT TYPE="
checkbox" NAME="qualites" VALUE="natation" CHECKED>Natation<BR>
<INPUT TYPE="
checkbox" NAME="qualites" VALUE="cyclisme">Cyclisme<BR>
<INPUT TYPE="
checkbox" NAME="qualites" VALUE="ski">Ski<BR>
<INPUT TYPE="
checkbox" NAME="qualites" VALUE="petanque" CHECKED>Petanque<BR>
<INPUT TYPE="
checkbox" NAME="qualites" VALUE="basket">Basket
-          Les boutons radio et checkbox sont bien mais quand on a un choix à faire entre 36 valeurs différentes, mieux vaut utiliser les listes déroulantes avec le conteneur<SELECT> dont les attributs sont :
 NAME : le nom de la liste, 
SIZE (facultatif) dont la valeur unité (par défaut) signifie qu'on a affaire à une liste déroulante sinon c'est une liste normale mais avec barre de défilement, 
MULTIPLE (facultatif) qui signifie qu'il est possible de sélectionner plusieurs valeurs. Si MULTIPLE n'est pas spécifier, il ne sera possible de faire qu'un seul et unique choix.
Le conteneur <SELECT> en lui-même ne suffit pas, il faut lui rajouter autant de balise <OPTION> qu'il y a de choix possibles. Les attributs de cette dernière sontVALUE : valeur du choix sélectionnable c'est-à-dire le texte qui sera inscrit dans le champ portant le nom de la liste et SELECTED (facultatif) qui signifie que le choix correspondant sera sélectionné par défaut.
Syntaxe :
<SELECT NAME="nom_de_la_liste" [SIZE] [MULTIPLE]>
<OPTION VALUE="
valeur_1">Choix_1
<OPTION VALUE="valeur_2">Choix_2
<OPTION VALUE="valeur_X" [SELECTED]>Choix_X
</SELECT>
Exemples :
Haut du formulaire
Quel est votre type de femme : 
Bas du formulaire
Quel est votre type de femme :
<SELECT NAME="femme">
<OPTION VALUE="
blondes">Blondes
<OPTION VALUE="
brunes">Brunes
<OPTION VALUE="
rousses">Rousses
</SELECT>
Haut du formulaire
Quel est votre type de femme :
Bas du formulaire
Quel est votre type de femme : <BR>
<SELECT NAME="
femme SIZE=3">
<OPTION VALUE="
blondes">Blondes
<OPTION VALUE="
brunes" SELECTED>Brunes
<OPTION VALUE="
rousses">Rousses
</SELECT>
Haut du formulaire
A quels jeux avez-vous déjà joué :
Bas du formulaire
A quels jeux avez-vous déjà joué : <BR>
<SELECT NAME="
jeux SIZE=4 MULTIPLE">
<OPTION VALUE="
dd">Destruction Derby
<OPTION VALUE="
racer">Moto Racer
<OPTION VALUE="
doom" SELECTED>Doom
<OPTION VALUE="
duke">Duke Nukem
<OPTION VALUE="
quake">Quake
<OPTION VALUE="
civ" SELECTED>Civilisation
<OPTION VALUE="
sim">Sim City
</SELECT>
Bouton Envoyer
-          Une fois que votre visiteur a fini de remplir le formulaire, il faut qu'il puisse vous l'envoyer. Pour cela il lui faudra cliquer sur un bouton comme dans une boite de dialogue Windows et dont la balise correspondante est <INPUT TYPE="submit"> dont l'attribut VALUE a pour valeur le texte affiché sur le bouton.
Syntaxe :
<INPUT TYPE="submit" VALUE="texte_à_afficher">
Exemple :
Haut du formulaire
Bas du formulaire
<INPUT TYPE="submit" VALUE="Envoyer">
Bouton Effacer
-          L'internaute pourra aussi vouloir effacer toutes les réponses qu'il aura données. L'utilisation de la balise <INPUT TYPE="reset"> fera apparaître un bouton qui permet d'initialiser le formulaire.
Syntaxe :
<INPUT TYPE="reset" VALUE="texte_à_afficher">
Exemple :
Haut du formulaire
Bas du formulaire
<INPUT TYPE="reset" VALUE="Effacer">







                                                           Chapitre II:    Le Web Dynamique

1)  Petite histoire du PHP
-          Il a été créé en 1994 par Rasmus Lerdorf pour les besoins des pages web personnelles (livre d’or, compteurs, etc.). A l’époque, PHP signifiait Personnal Home Page.
-          C’est un langage incrusté au HTML et interprété (PHP3) ou compilé (PHP4) côté serveur. Il dérive du C et du Perl dont il reprend la syntaxe. Il est extensible grâce à de nombreux modules et son code source est ouvert.
-          Comme il supporte tous les standards du web et qu’il est gratuit, il s’est rapidement répandu sur la toile.
-          En 1997, PHP devient un projet collectif et son interpréteur est réécrit par Zeev Suraski et Andi Gutmans pour donner la version 3 qui s’appelle désormais PHP : Hypertext Preprocessor (acronyme récursif à l’exemple du système Open Source Linux : Is Not UniX).
-          Il existe par ailleurs des applications web prêtes à l’emploi (PHPNuke, PHP SPIP, PHPSlash…) permettant de monter facilement et gratuitement son portail. En juillet 2000 plus de 300.000 sites tournaient déjà sous PHP !

2)   Les variables :
-          En PHP, les variables sont représentées par un signe dollar du nom de la variables tel qu’il est automatiquement déclarée des que vous lui affectez une valeur.
-          Les variables dynamique : une variable dynamique prend la value d’une variable et l’utilise comme nom d’une autre variable.
-          Les variables superglobales :
Des variables automatiquement créées par PHP a chaque fois qu’une page est chargée.
les variables superglobales sont des variables un peu particulieres pour trois raison :
·         Elles sont écrites en majuscules et commencent toutes par un underscore (_). (exemple #_GET
·         Elles sont des array car elles contiennent généralement des nombreuses informations.
·         Ces variables sont automatiquement créées par PHP à chaque fois qu’une page est chargée et sont accessibles partout les pages et votre code aussi.

-          Détermination de types des variables :
·          la fonction gettype() :
Permet de déterminer le type d’une variable PHP
·         autre alternative pour connaitre le type d’une variable :
is_long() , is_double() ,is_string() , is_array() et is_object() ;
·         int settype (string var, string type) :
Définit de façon explicite le type (type) de la variable var. et la fonction settype renvoie true en cas de succès, false si non.
·         isset (mixed var) :
Sert à déterminer si une variable possède une valeur. renvoie True si la variable var est définie , false si non
·         int unset (mixed var) :
Sert à détruire une variable
·         int empty(mixed var) :
Elle renvoie true si la variable n’est pas définie, ou possède une valeur de 0 ou une chaine vide. Si non elle renvoie false.
3)   Les  operateurs
·         Les opérateurs de calcul
·         Les opérateurs d’assignation
·         Les opérateurs d’incrémentation
·         Les opérateurs de comparaison
·         Les opérateurs logiques
4)   Les  structures  algorithmiques  en  PHP
·         Structures conditionnelles
                       Instruction if :
                       if (condition){ expression vrai } else { expression faux }
                        Instruction if ..elseif :
                       if (condition) { expression vrai } elseif(condition) { expression vrai } else { expression faux }
·         Structures itératives
                 Boucle While :
                   while (condition)   { instructions}
                 Boucle do..while :
                 Syntaxe : do {instructions} While (conditions)
                 Boucle For :
                 for (expr1; expr2; expr3) {instructions}
·         Structures de branchement
switch (expression)
 {
 case resultat1 : # instructions à exécuter si l’expression vaut resultat1... break ;
case resultat2 : # instructions à exécuter si l’expression vaut resultat2... break ;
...
default : # instructions à exécuter en dernier recours...
}

5)  Les tableaux 
-          Un même tableau peut contenir de nombreux éléments, chacun d’eux pouvant être une valeur unique, comme un texte ou un nombre, ou un autre tableau.
·         Lire à l’aide de la fonction each() :
La fonction each() reçoit comme paramètre une variable de type array et retourne un tableau qui contient les informations sur l’élément courant puis de pointer sur l’élément suivant.
    $element = each($tab)
$tab est le tableau à lire et $element le tableau de résultats contenant les informations sur l’élément courant de $tab, sous la forme :
      • $element["key"], qui contient la clé de l’élément courant.
      • $element["value"], qui contient la valeur de l’élément courant.
·         La fonction list() :
La fonction list() permet d’affecter à N variables la valeur des N premiers éléments d’un tableau indicé. Sa syntaxe est la suivante : list($x,$y,$z,…) = $tab
La variable $x prend la valeur du premier élément du tableau $tab (d’indice 0 ou de première clé). $y prend la valeur du deuxième élément, et ainsi de suite.
·         Parcourir un tableau :
Les deux fonctions each() et list() peuvent être utilisées conjointement afin de parcourir un tableau, même si les indices ne sont pas  séquentiels.
Exemple :
while (list ($cle, $valeur) = each ($tableau))
{
   echo("L'élément $cle est égal à $valeur");
}
·         Les fonctions de traitement  de tableau
reset() : Remet le pointeur interne de tableau au début.
pos() : Retourne la valeur de l'élément courant d'un tableau
key() : Retourne l'indice de l'élément courant d'un tableau.
next() : Avance le pointeur d'un tableau.
prev() :  Recule le pointeur de tableau.
end() : Positionne le pointeur de tableau en fin de tableau.
sizeof() ou count() : Retourne le nombre d’éléments dans un tableau
·         Trier un tableau
Les fonctions sort() et rsort() permettent de trier un tableau par valeur croissante ou décroissante.
 Les fonctions asort() et arsort() permettent de trier un tableau associatif par valeur croissante ou décroissante.

On peut également trier un tableau par indice, à l'aide des fonctions  ksort() et krsort(), qui s'utilisent de la même manière que les fonctions précédentes.
 
-