Université Sidi Mohamed Ben Abdellah.

École Supérieure de Technologie de Fès.

Département : Génie Informatique.
__________________________________________________________________________

Environnements et
outils de
développement WEB

Réalisé par : - M.BENSLIMANE.

__________________________________________________________________________
ANNEE UNIVERSITAIRE : 2021 / 2022
M.BENSLIMANE 1
 Plan.
Introduction
I. Bases du WEB.
1. Historique.
2. Structure web .
3. De nombreux langages... .
4. Pour créer un site web... .

II. Première Page.

1. Avant de commencer .
2. Cahier des charges .

III. HTML et XHTML.

1. HTML et XHTML.
2. Texte et couleurs.
3. La mise en page.
4. Les listes.
5. Les images
6. Les liens
M.BENSLIMANE 2
__________________________________________________________________________
I. Bases du WEB.

M.BENSLIMANE 3
 I.1. Historique.
Ce n'est que vers 1994/1995, que nous avons entendu parler d'internet, pourtant cette
technologie a plus de trente ans :

– 1969 Le DoD lance son projet ARPANET (Advanced Research Projects Agency
Network), dont le but est de créer un réseau capable de fonctionner même en cas de
panne de certains de ces composants. Fin 1969, le réseau relie 4 machines.
– 1972 Première présentation publique, et première application de messagerie électronique.
– 1973 Des chercheurs présentent les grandes lignes d'un protocole de connexion, ébauche
du TCP/IP. Mise en place des IP uniques pour chaque machine connectée.
– 1976 Conception d'un système permettant des noms aux machines.
– 1983 Le TCP/IP dans ces spécifications est adopté définitivement. Le réseau est scindé
en MILNET dédié à la Défense, et en ARPANET, dédié à la Recherche.
– 1985/86 Le NFSNET, développé depuis les années 70 par la National Science
Foundation, choisi d'adopter le TCP/IP, ce qui va accroître considérablement ses
performances.
– Jusqu'en 1990, Les utilisateurs de ARPANET migrent de plus en plus vers NFSNET. En
1990, ARPANET est abandonné et laisse la place à INTERNET.

M.BENSLIMANE 4
 I.2. Structure web (1).
Plus qu'un réseau mondial, Internet est un réseau de réseaux. Nous n'étudierons
pas la structure d'Internet, mais nous allons tout de même nous intéresser rapidement à
l'architecture web.

• Architecture client/serveur :

Le binôme client serveur se compose :

– d'un client : c'est à dire le PC de l'internaute, et plus exactement son navigateur.
– d'un serveur : Le serveur est l'endroit ou sont physiquement stockées les pages du site.
Le client demande une page au serveur via la barre d'adresse du navigateur (entre
autre), le serveur envoie alors le code de la page demandée, interprétée par le
navigateur.

Cette architecture est la plus simple.

M.BENSLIMANE 5
I. 2. Les concepts de base d’Active Directory ( 1 ).
• Architecture multi-tiers :
Lorsque le serveur est lui-même client d'un autre serveur, ou d'une base de
données, on parle alors d'architecture multi-tiers.

Et il peut y avoir plusieurs niveaux de serveurs :

Le client (navigateur) n'est capable de comprendre et d'interpréter que le

HTML et certains scripts (javascript...). Certains langages sont interprétés au
niveau du serveur et transmettent au client un code HTML généré
dynamiquement.
M.BENSLIMANE 6
I. 3. De nombreux langages...

De nombreux langages sont utilisés sur le web, en voici quelques uns :

HTML, DHTML, XHTML, XML, Javascript, PHP, CSS, ASP, VBscript, SQL, JAVA, CGI, ...

Certains de ces langages sont interprétés au niveau du navigateur client

(HTML, Javascript, CSS...), tandis que d'autres sont interprétés au niveau du
serveur (ASP, PHP, CGI...) .
Vous le verrez vite, il est plutôt compliqué de maîtriser chacun de ces
langages, d'autant que la liste n'est pas exhaustive. Il n'y a pas de règle
absolue quant au choix d'un langage plutôt que d'un autre, chacun a ses
spécificités, ses atouts et ses restrictions.

M.BENSLIMANE 7
I. 4. Pour créer un site web...
Quand tout à commencer, on pouvait créer un site avec le bloc-notes. C'est
toujours possible, mais ce n'est pas le plus pratique !!!
Pour créer un site, on se sert plutôt des outils développés dans ce but :
– Éditeur HTML : Le bloc-notes, donc, mais ce n'est pas le seul.
Il y a deux types d'éditeurs, les éditeurs de codes et les éditeurs wysiwyg (ou wisiwig).
• Parmi les éditeurs non-wysiwyg : Textpad et de nombreux freewares.
• Parmi les éditeurs wysiwyg : Dreamweaver, GoLive, Frontpage, WebExpert pour les plus
connus... Un bon choix également (et gratuit de surcroît) : Netscape Composer (inclus dans la
suite Netscape).
– Logiciel de retouche d'image et de maquettage web : Le plus connu :
Photoshop/ImageReady et son équivalent en open source : The Gimps. Mais aussi,
PaintShopPro, Fireworks...
– Transfert FTP : Si vous avez investi dans un éditeur wysiwyg, cette fonctionnalité est sans
doute incluse dedans (C'est le cas de Dreamweaver). Sinon, il existe des logiciels comme
FTPExpert, CuteFTP... qui sont payants. Parmi les freewares, il y a PowerDesk,
SmartFTP...
– Il y a une multitude d'outils destinés aux webmasters, tellement qu'il serait impossible de
tous les énumérer.
M.BENSLIMANE 8
II. Première Page.

M.BENSLIMANE 9
 II. 1. Avant de commencer .(1)
Votre site se composera sans doute des fichiers suivants

– *.htm ou *.html : les fichiers HTML (les pages)

– *.js : des fonctions javascripts déportées
– *.php : des pages et/ou des scripts php
– *.asp : des pages et/ou des scripts asp
– *.inc : des inclusions
– *.jpeg, *.jpg, *..gif, *.png : des images
– tous les autres fichiers liés (vidéos, sons, pdf...)
M.BENSLIMANE 10
 II. 1. Avant de commencer .(2)
Votre site, coté serveur, se comporte comme n'importe quel groupe de
fichiers. Il est alors important de réfléchir à une arborescence claire du site.
Vous verrez vite, qu'il est indispensable d'être organisé dans le classement des
fichiers du site, car plus le site est gros, et plus les intervenants sont nombreux,
plus le besoin d'organisation est important.

Bien que le HTML ne soit pas sensible à la casse, il est important d'y faire
attention. Établissez une règle et tenez-y-vous.

Dans les noms de fichiers, n'utilisez que des lettres, des chiffres, le tiret ("-") et
le tiret-bas ("_" underscore). Oubliez les caractères accentués, les espaces (" ")
et tous les caractères spéciaux. Le premier caractère du nom de fichiers sera
toujours une lettre (ni chiffre, ni tiret, ni underscore !).

M.BENSLIMANE 11
 II. 1. Avant de commencer .(3)
• REGLES DE NOMMAGES DES FICHIERS

M.BENSLIMANE 12
 II. 2. Cahier des charges

La réalisation d'un site, la plupart du temps, commence avec un

cahier des charges (ça devrait tout du moins !). Le (ou les)
cahier(s) des charges est le document qui définit en tout point le
site.

Il s'intéresse au contenu du site, au mode de traitement de

l'information, à l'esthétique de l'ensemble, à la charte graphique, à
l'homogénéité des pages, au mode de navigation, mais aussi au
public visé, aux objectifs du site, au mode d'intégration des pages,
aux technologies utilisées...

M.BENSLIMANE 13
III. HTML & XHTML.

M.BENSLIMANE 14
 III. 1. HTML et XHTML(1)
• Le HTML : HyperText Markup Language
Le HTML est un langage de description. Une page HTML est une
succession de balises et de texte. Les navigateurs interprètent les balises et
affichent le texte. La version du HTML actuellement utilisé est le HTML 5,
définit par le W3 Consortium (www.w3c.org). Néanmoins, il existe une
version plus récente, qui prend le nom de XHTML. Le XHTML ne fait
qu'imposer une syntaxe particulière pour HTML et ne définit pas de balise
particulière.
• La syntaxe
Une balise (ou marqueur, ou tag) est délimitée par des chevrons (< >), de
cette manière :<balise> texte </balise>
La balise s'ouvre, et se referme (présence d'un slash).
Certaines balises acceptent des attributs :
<balise attribut="valeur" attribut2="valeur2"> texte </balise>
Les attributs ne sont pas repris dans la balise fermante.
15
M.BENSLIMANE
 III. 1. HTML et XHTML(2)
• Le XHTML
Le XHTML est la version améliorée du HTML, qui redonne à celui-ci sont rôle
strictement descriptif.
Le XHTML ne définit pas de nouvelles balises, mais il impose une syntaxe
particulière.

Le code de gauche sera correctement interprété par la plupart des navigateurs.

En effet, le HTML est assez souple et accepte la plupart des erreurs.
Le XHTML impose que toutes les balises soient fermées, que la casse soit
minuscule, et que toutes les valeurs soient entre guillemets. Le code de gauche
est alors conforme au XHTML.
Certaines balises n'étaient jamais fermées en HTML, notamment la balise
retour chariot <br>. En XHTML, il existe deux façons de fermer cette balise
<br /> ou <br></br>
M.BENSLIMANE 16
 III. 1. HTML et XHTML(3)
• Premières balises
Dans le bloc-notes, nous allons taper le code ci dessous :

Cette structure de page, est le minimum obligatoire pour notre page. Les
balises <html> et </html> contiennent toujours les balises <head> et
<body>. Elles spécifient aux navigateurs que le langage codé est du HTML.

M.BENSLIMANE 17
III. 1. HTML et XHTML(4)

M.BENSLIMANE 18
 III. 2. Texte et Couleurs(1)

• Balises de mise en forme <b> , <i>, <u>, <s>, <sub>, <sup> ...
Nous savons faire une page, maintenant nous allons y mettre un peu de contenu.
Dans notre page, entre les balises body, inscrivons le code suivant :

A noter, que nous pouvons sans problème combiner les balises. Cependant,
elles ne doivent jamais se chevaucher (<b><i> texte </b></i>) ne fonctionne
pas !)

19
M.BENSLIMANE
 III. 2. Texte et Couleurs(2)
Il est aussi possible de mettre le texte en exposant ou en indice :

Encore une balise de mise en forme, la balise de centrage. Il y a d'autre moyen

de déterminer l'alignement d'un texte, nous verrons ça plus tard.

M.BENSLIMANE 20
 III. 2. Texte et Couleurs(3)
• Balise police <font>
Nous allons maintenant agir à proprement parler sur la police de texte.
Pour cela, nous utiliserons la balise <font>.

Dans cet exemple, nous utilisons les trois attributs possibles de la balises font.
Ces attributs sont optionnels, on peut utiliser les 3, 2 ou 1, voire aucun. Dans
le cas de la balise font, ne pas utiliser d'attributs n'est pas très cohérent, puisque
utilisée seule, la balise n'a aucune utilité. Cependant, sachez que les attributs
d'une balise sont toujours optionnels !
De plus, les normes XHTML imposent l'utilisation des cotes pour la valeur des
attributs. Il est donc fortement conseillé de les utiliser même si les attributs
semblent s'en passer. 21
M.BENSLIMANE
 III. 3. La mise en page(1)
• Paragraphes et Titres <p>< h1>< h2>< h3>< h4>< h5>< h6>
Pour mieux détailler notre mise en page de texte, nous avons à notre disposition
les balises de paragraphes et de titres.
Ces balises servent à structurer un texte en éléments distincts, avec une mise en
forme distincte.
Dans notre page, entre les balises body, inscrivons le code suivant :

M.BENSLIMANE 22
 III. 3. La mise en page(2)
Les balises de titres (headers), sont :
< h1></h1>, La balise h1, par défaut, équivaut a une taille de 6, en gras.
< h2></h2>, La balise h2, par défaut, équivaut a une taille de 5, en gras.
< h3></h3>, La balise h3, par défaut, équivaut a une taille de 4, en gras.
< h4></h4>, La balise h4, par défaut, équivaut a une taille de 3, en gras.
< h5></h5>, La balise h5, par défaut, équivaut a une taille de 2, en gras.
< h6></h6>, La balise h6, par défaut, équivaut a une taille de 1, en gras.
La balise p possède la taille par défaut, c'est à dire 3.

23
M.BENSLIMANE
 III. 3. La mise en page(4)
• Séparateurs <hr />
Un autre élément de mise en page, c'est le séparateur <hr/>.

M.BENSLIMANE 24
 III. 4. Les listes (1)
• Listes <ul>, <ol>, <li>
En HTML, on peut également créer des listes (ordonnées ou non ordonnées) de
textes.
Une première balise nous permet de déclarer le début de la liste (<ul> non
ordonnée, ou <ol> ordonnée), puis chaque élément de la liste sera contenu par
une balise <li></li>. Bien entendu, il est nécessaire de refermer ensuite la balise
(</ul> ou </ol>) :

M.BENSLIMANE 25
 III. 4. Les listes (2)
• Attribut type :
Par défaut, les listes ul, sont signalées par un cercle plein. Il est possible
d'attribuer à cette balise une autre puce, comme un cercle vide, un carré.
L'attribut est "type", les valeurs de cet attribut sont "disc" (par défaut), "circle",
"square". La syntaxe est donc celle-ci :

M.BENSLIMANE 26
 III. 4. Les listes (3)
De la même façon, les listes ordonnées ont comme attributs :
type="1" => des chiffres (par défaut),
type="a" => des lettres minuscules,
type="A" => des lettres majuscules,
type="i" => des chiffres romains minuscules,
type="I" => des chiffres romains majuscules.
Attribut start :
De plus, en utilisant
l'attribut start="X",
on peut spécifier un
début de liste
différent de 1.
Attention, même
dans le cas d'une liste
ordonnée par des
lettres, la valeur de
start est toujours 27
numérique.
M.BENSLIMANE
 III. 4. Les listes (4)
• Définitions <dl>, <dt>, <dd>
La balise <dl> (liste de définitions) permet de réaliser un glossaire.
La balise <dl> détermine le terme à définir, tandis que la balise <dd> définit la
définition.

M.BENSLIMANE 28
 III. 5. Les images (1)
• Images <img/>
Les images universellement reconnues par les navigateurs sont : JPEG, Gif, Gif
animé, PNG. Les autres formats ne sont pas toujours reconnus, et surtout, ils ne
sont pas adaptés au web !

M.BENSLIMANE 29
 III. 5. Les images (2)
• Attributs vspace, hspace :
Ces attributs créent une marge horizontale à droite et à gauche (hspace), et une
marge verticale en haut et en bas (vspace), de l'image. La valeur est en pixel.

M.BENSLIMANE 30
 III. 6. Les liens (1)
• Liens hypertextes <a href>
Le premier intérêt du html (HyperText Markup Language), sur un protocole http
(HyperText Transfer Protocol), c'est bien sur les liens hypertextes.
La balise qui permet de faire des liens est la balise <a></a>.

• Attribut href :
Cet attribut définit le chemin du lien.

M.BENSLIMANE 31
 III. 6. Les liens (2)
• Attribut target :
La cible d'un lien indique l'endroit ou doit être ouvert le fichier :
_blank : l'affichera dans une nouvelle fenêtre du navigateur (pop-up).
_self : le lien sera ouvert dans l'emplacement en cours (c'est l'option par défaut).
_parent et _top : sont des valeurs de l'attribut target utilisé dans le cas d'un jeu de
cadres .

• statut des liens :

Il existe 4 statuts différents pour les liens.
lien : statut initial du lien.
lien visité : statut du lien après la première visite.
lien actif : l'événement se produit au moment ou le lien est activé (clic de souris).
lien survolé (hover) : Statut du lien au moment du survol de la souris.
Par défaut, un lien est bleu, un lien visité ou actif est violet. Le lien survolé n'a pase
couleur spécifique. Nous pouvons personnaliser ces couleurs. 32
M.BENSLIMANE
 III. 6. Les liens (3)
Il est possible d'utiliser la balise <a href> pour envoyer un mail :

• mailto :
Dans le premier exemple, nous avons fait un lien simple qui ouvre le client mail
par défaut de l'utilisateur.
Dans le second cas, nous avons en plus, renseigné tous les champs du mail.
La syntaxe est la suivante:
mailto:email?variable1=valeur1&variable2=variable2&...
Les variables possibles pour l'envoi de mails sont :
le subject (objet), le cc (carbon copy = copie conforme), le bcc (blind carbon
copy = copie invisible), et le body (corps du message).
Cette structure nous sera plus utile encore avec l'emploi des formulaires.... 33
M.BENSLIMANE
 III. 6. Les liens (4)
• Ancres <a name>
La balise <a> est également utilisée pour marquer une emplacement sur une page :

• Attribut name, #,
name est l'attribut qui nous sert à déclarer une ancre.
Le lien vers une ancre se fait ensuite en utilisant le # suivi du nom de l'ancre.
Dans le cas d'une ancre sur la page en cours, on utilisera seulement la syntaxe
<a href="#nom_de_l_ancre">
Pour une ancre sur une autre page, on rajoutera #nom_de_l_ancre dans la valeur
de l'attribut href.

M.BENSLIMANE 34