N◦ : / 2 0 2 2

Université Sultan Moulay Slimane

ECOLE SUPERIEURE DE TECHNOLOGIE
- FKIH BEN SALAH-

Diplôme Universitaire de Technologie

Génie Informatique

Rapport de stage d’initiation

Titre : création d’un site web

en HTML/CSS

••••• Réalisé et soutenu par :

Melle. Imane TATA

• encadrante  : Mme. Hind Maatouch

• organisme d’accueil : ORMVAT-BP 244.
FQUIH BEN SALAH.
• Période de stage  : du 01/07 à 29/07/2022

Année Universitaire: 2021/2022

 DEDICACE

Je dédie ce rapport:

A mes parents qui m’ont tracé le bon chemin à suivre depuis mon
enfance.

A tous ceux qui m’ont soutenue pour réussir mon stage au sein de
L’Office Régional de Mise en Valeur Agricole du Tadla.

A ma famille et mes chers amis qui m’ont accordé leur soutien

dans les instants les plus difficiles.

A tous nos formateurs et toute l’équipe pédagogique

administrative de l’EST Fkih Ben Salah pour l’aide qu’ils ont
toujours porté aux étudiants.

A eux tous, je dédie ce travail.

2
 REMERCIEMENT

Au terme de mon stage d’initiation, je tiens à témoigner de mes sincères

remerciements à toutes les personnes qui ont contribué de près ou de loin d’un bon
déroulement de mon stage d’initiation et à l’élaboration de ce modeste travail.

Au terme de ce rapport. Je remercie tout d'abord notre clément Dieu qui m'a donné
la puissance pour que je puisse terminer ce travail.

Du côté d’ORMVAT (Office Régional de Mise en Valeur Agricole du Tadla), je

tiens à exprimer ma profonde reconnaissance à Mme hind Maatouch, mon
encadrante de stage pour sa confiance, ses conseils, son expérience, sa disponibilité
pendant toute la durée du stage et pour m’avoir permis d’effectuer ce stage dans les
meilleures conditions et pour m’avoir apporté de nombreuses connaissances.

Je remercie l’ensemble du personnel pour l’intégration, l’accueil chaleureux, le

soutien et la collaboration à ma mission.

Je remercie les stagiaires avec qui j’ai eu la chance de travailler. L’ambiance de

travail a été excellente et nous avons pu ainsi allier bons moments et séances de
travail.

Je remplis volontiers mon devoir de gratitude envers tous mes professeurs qui nous
ont dispensé un enseignement de qualité. Au cours de nos études afin de nous
assurer une formation efficace.

Pour finir, je tiens à remercier les membres du jury pour leur présence, pour leur
lecture attentive de mon rapport ainsi que pour les remarques qu’ils m’adresseront
lors de cette soutenance afin d’améliorer mon travail.

3
 TABLE DES MATIÈRES

Dédicace:
Remerciement :
chapitre 1 :Présentation de l’organisme d’accueil :
I. Introduction :
II. Présentation de L’O.R.M.V.A du Tadla :
1. Effectif de l’O.R.M.V.A.T :
2. Activités, Marchés et environnement :
3. Organigramme :
III. Entité de stage  « Service Informatique» :
1. Les attributions du service informatique :
2. Organisation et organigramme du Service Informatique:
3. Moyens Humains:
3.1. A l'échelle du Service Informatique:
3.2. A l'échelle de toutes les entités de l'Office:
4. Moyens matériels :
5. Moyens logiciels et application informatiques:
5.1. Les logiciels Standards et les langages de développement :
5.2. Logiciels et Applications spécifiques :
chapitre 2 : Création du site web :
I. Objectif et cahier des charges :
1. Objectifs du site(analyse des besoins):
2. Cahier des charges :
II. L’environnement de développemnet :
1. L’environnement matériel :
2. L’environnement logiciel :
2.1. choix d’IDE :
2.2..................................................................... choix de langage de programmation :
2.3.................................................................................................................... Autres :
III. Interfaces du site :
IV. Bilan et conclusion :
1. Bilan professionnel :
2. Bilan personnel :
3. Conclusion :
Webographie:

4
 Liste des figures :

Figure 1: organigramme de l’ORMVAT---------------------------------------------10

Figure 2 : organigramme du service informatique --------------------------------- 12
Figure 3 : interface d’accueil ------------------------------------------------------------20
Figure 4 : interface des missions------------------------------------------------------ 21
Figure 5 : interfaces d’organigramme ----------------------------------------------- 21
Figure 6 : interface des services ------------------------------------------------------ 22
Figure 7 : interface filières végétales------------------------------------------------- 22
Figure 8 : interface filières animales ------------------------------------------------ 23
Figure 9 : interface service de l’eau-------------------------------------------------- 23
Figure 10 : interface contact ----------------------------------------------------------- 24

Liste des abréviations :

ORMVAT : Office Régional de Mise en Valeur Agricole du Tadla.

HTML : HyperText Markup Language.
CSS : Cascading Style Sheets.
IDE : Integrated Development Environment.

5
 Chapitre 1 :
Présentation
de l’organisme
d’accueil.

6
 I. Introduction :
Le stage est une grande nécessitée pour les stagiaires parce qu’il leur permet
d’établir une complémentarité bien définie entre les connaissances de base
théorique et pratique.

En effet ce stage a pour intérêt de valoriser l’information théorique et de la

mettre en place à la disposition de la pratique, ainsi il permet aux stagiaires de
savoir plusieurs choses sur le monde de travail et de s’adapter avec eux.

Ainsi il leurs permet d’enrichir leurs idées et d’acquérir une expérience qui
leurs permet d’avoir des connaissances approfondies sur le monde de travail, par
exemple il leurs permet de savoir comment communiquer avec son
environnement professionnel (les clients, les collègues de travail…etc.) et de
mise en place dans des situations réelles applicateurs sur le champ de travaille.

Dans ce cadre que j’ai effectué mon stage à l’Office Régional de Mise en
Valeur Agricole du Tadla (O.R.M.V.A.T) à FKIH BEN SALEH, au Service
Informatique au d'Exploitation et de la Maintenance du Système Informatique
chargé de :

 Maintenance du parc Informatique.

 Administration du Réseau Internet / Intranet de l’ORMVA du Tadla.

L'objectif de ce stage était de développer un site pour l’Office Régional de

Mise en Valeur Agricole du Tadla. En effet, l’ORMVAT avait besoin d'un site
pour informer les visiteurs sur les services que l’Office propose. La mission
consistait à analyser les besoins de la société, ensuite de concevoir et développer
un site internet répondant à ces critères.

Ce rapport est composé de deux parties. La première porte sur une

présentation de l’organisme d’accueil, précisément le service informatique. La
seconde présente les objectifs et le cahier des charges du site web ainsi que le
choix des outils utilisés pour concevoir le site. Puis la présentation du site web.
Enfin, on trouve une partie composée du bilan de ce stage, aussi bien personnel
que professionnel, et de la conclusion de ce rapport.

7
 II. Présentation de L’O.R.M.V.A du Tadla :

L'Office Régional de Mise en Valeur Agricole du Tadla (O.R.M.V.A.T) est un

établissement public, placé sous la tutelle du Ministère de l'Agriculture et des
Pêches Maritimes.

Crée en 1966 à FKIH BEN SALAH par le décret royal n° 828-66 du

22/10/1960, il est chargé de promouvoir les travaux hydro-agricoles, assurer la
gestion des réseaux d'irrigation et de drainage et de l'encadrement des
agricultures.

Sa zone d'action chevauche sur les Provinces de Béni Mellal, Fquih Ben Salah
et d’Azilal. Elle englobe 20 Communes Rurales et 5 Cercles à savoir : Fquih
Ben Salah et Souk Sebt (Province de Fquih Ben Salah, Ouaouizerth et Bzou
(Province d’Azilal).

La superficie totale de la zone d’action de l’ORMVA du Tadla est estimée à

36000 Ha dont 97000 ha sont irrigués par la grande hydraulique et 17000 ha
par pompage moyen hydraulique (PMH) et 8800 ha par pivot.

L’Office Régional de Mise en Valeur Agricole du Tadla assure son

fonctionnement par ses propres recettes, essentiellement à partir des redevances
en eau d’irrigation et réalise son autofinancement depuis 1987.

Sa population s’élève à 560000 habitants dont :

 Population urbaine : 120000 habitants.

 Population rurale : 440000 habitants.

1. Effectif de l’O.R.M.V.A.T :
A la date du mois de Février 2014, l’effectif du personnel est réparti comme
suit :

 Personnel statutaire :

- Cadres supérieurs Echelles (10 à HC) : 227

8
 - Cadres de maîtrise (5 à 9) : 568

2. Activités, Marchés et environnement :

Les ressources de l’O.R.M.V.A du Tadla proviennent principalement des
créations relatives aux services rendus aux tiers, (eau d’irrigation, participation
directe, prestations diverses). Il est chargé de promouvoir et de poursuivre toute
action qui vise à améliorer la productivité agricole dans un périmètre qui s’étend
sur une superficie de 320.000 hectares dont 97.500 hectares en grande irrigation
et regroupant 58.000 agriculteurs.

3. Organigramme :
La gestion de l’ORMVA du Tadla est assurée par un Directeur assisté par les
Chefs de trois Départements opérationnels (DDA – DA - DGRID).

Les chefs de deux Départements fonctionnels (DRH – DPF) et les trois Services
rattachés directement à la Direction (SMG – SAIGC – SI).

Au niveau des Départements, les tâches sont partagées entre les structures du
siège et celles du terrain : 5 Arrondissements de Développement Agricole, 31
Gestion des Réseaux d’Irrigation et de Drainage et 12 Centres de Gestion des
Réseaux (CGR).

 Structure fonctionnelle de l’ORMVAT :

- La direction.

- Service de l’Audit Interne et du Contrôle de Gestion (SAICG).

- Service des Moyens Généraux(SMG).

- Service Informatique(SI).

- Département de la Gestion des Réseaux d'Irrigation et de Drainage

(DGRID).

- Département de Développent Agricole (DDA).

9
 - Département des Aménagements (DA).

- Département des Ressources Humaines (DRH).

- Département de la Planification et des Finances (DPF).

Direction

Service Département
Rattaches opérationnels
Départements
fonctionnels

Service Informatique DEPARTEMENT

DU
DEVELOPPEMENT
DEPARTEMENT AGRICOLE
PLANIFICATION ET
FINANCES
Service des moyens généreux

DEPARTEMENT
DE GESTION DES
Service d’audit interne et RESEAUX
contrôle gestion D’IRRIGATION ET
DEPARTEMENT DES
RESSOURCES DR DRAINAGE
HUMAINES

DEPARTMENT
D’AMENAGEMENT
10
 Figure 1 : organigramme de l’ORMVAT.

III. Entité de stage « Service Informatique » :

1. Les attributions du service informatique :

Les attributions qui sont confiées au Service Informatique dans le cadre de
l’étude SIG sont comme suit :

 Suivi et la coordination des processus informatiques à l’O.R.M.V.A.T.

 Assistance des différentes fonctions dans le choix de logiciels ou

développement d’application spécifiques.

 Coordination des traitements informatiques.

 Maintenance des traitements informatiques.

 Maintenance des logiciels et outils de traitement en liaison avec les

sociétés de service et constructeurs.

 Administration des systèmes informatiques :

- Système informatique Central.
- Réseau Informatique.

 Formation et l’assistance des utilisateurs.

2. Organisation et organigramme du Service Informatique :

Le Service est composé de deux Bureaux et d'un secrétariat :

11
 Bureau des Etudes Informatiques (B.E.I) qui procède aux études et au
développement en interne des principales applications de gestion qui
touchent les différentes activités de l'Office.

 Bureau d'Exploitation et de la Maintenance du Système Informatique

(B.E.M.S.I) qui procède à la maintenance et à la gestion des
équipements informatiques au niveau de toutes les entités de l'Office.

Figure 2 : organigramme du service informatique.

12
3. Moyens Humains :
3.1. A l'échelle du Service Informatique :

Le Service Informatique est doté de 10 agents affectés par bureau comme

suit :

- Le Chef du Service informatique

- Bureau des Etudes Informatiques : 04 Agents

- Bureau Exploitation et maintenance du Système Informatique : 03 Agents

- Secrétariat : 02 Agents

3.2. A l'échelle de toutes les entités de l’Office :

L'effectif total du personnel informaticien au niveau de toutes les entités de

l'ORMVA du Tadla est de 23 informaticiens.

4. Moyens matériels :
La plate-forme informatique mixte axée autour d’un système centrale RISC
6000 et des micro-ordinateurs autonomes :

Lot n° 1 : Constitué d’un système central, de type mini-ordinateur, auquel

sont connectés des postes de travail ou des terminaux installés dans les différents
départements/Services. Ces postes prennent en charges les tâches répétitives et de
masses relatives au système comptable et financier.

Lot n° 2 : Constitué de micro-ordinateurs et d’imprimantes autonomes dont

les tâches principales se résument en traitement de texte (Word et Excel) et
quelques applications techniques spécifiques.

L’ORMVA du Tadla dispose d’un parc informatique très important se

composant des ordinateurs, des imprimantes, des onduleurs, scanners, projecteurs
multimédias, etc. ….

Le tableau suivant récapitule le parc informatique :

Mini-ordinateurs  : 1

13
 Serveurs : 6

Micro-ordinateur : 300

Imprimantes : 250

Onduleurs : 300

Tables traçantes : 4

Scanners : 10

Projecteurs : 8

Routeur wifi : 6

Switch : 6

Hub : 5

Stations de travail système information Géographique 2

5. Moyens logiciels et application informatiques :

Deux types de logiciels sont retenus :

5.1. Les logiciels Standards et les langages de développement :

Plateforme logiciel / Progiciel Fonctions

Système d'exploitation multi-tâches

AIX 4,3
et Multi-Utilisateurs
Système Mini
Ordinateur ADONIX Système de gestion de fichiers

ORACLE 9i SGBDR

Système d'exploitation multi-tâches

Serveurs SCO OPEN SERVER 5.0.0
et Multi-Utilisateurs
SCO-UNIX Système de gestion de base de
ADONIX
données

14
 Windows XP, Seven,
Windows 2003 Server Systèmes d'exploitation
Et Windows 2008 Server

Micro-ordinateur Microsoft office 2003, 2007

Logiciels bureautiques
et 2010

VISUAL BASIC 6 Outil de développement

SQL Server 2003 et 2008 SGBDR

5.2. Logiciels et Applications spécifiques :

Vu le coût très élevé de développement des applications informatiques par les

Sociétés de Services et compte tenu des problèmes administratifs et techniques
qui peuvent surgir dans cette démarche (maintenance des applications
développées) et afin de rationaliser les moyens humains et matériels de
l’ORMVA du Tadla, il a été adopté une démarche qui consiste au développement
en interne des applications informatiques spécifiques.

Les réalisations de l’ORMVA du Tadla en matière de développement ont

touché la totalité des domaines d’applications :

- Gestion des Ressources Humaines.

- Gestion des Immobilisations.

- Gestion des Stocks et des Approvisionnements.

- Gestion du Parc Auto.

- Gestion des Réseaux d'Irrigation.

- Gestion des Clients.

- Gestion du Parc Informatique.

15
 Chapitre 2 :
Création du site
web.
16
 I. Objectifs et cahier des charges :

1. Objectifs du site (analyse des besoins) :

L’encadrante qui m’a chargé du site m’a exprimé ses besoins et ses souhaits
concernant le site lors d'un petit entretien. Ce dernier était axé autour de trois
questions :

 Quelles informations doivent figurer sur le site ?

 Quelles fonctionnalités désirez-vous voir apparaître sur le site ?
 A quelles caractéristiques de style doit répondre le site ?
Les réponses formulées lors de cet entretien m’ont permis d’établir un cahier des
charges.

2. Cahier des charges :

Plusieurs objectifs pour le site internet de l’ORMVAT ont été mis en avant :

 Le contenu du site devra être centré dans la fenêtre de navigation.

 Les couleurs du site devront être en harmonie avec les couleurs du logo (la 1 ère
page du rapport).
 Le site devra contenir certains renseignements sur l’organisme.
O Numéro de téléphone.

17
 O Adresse de l’ORMVAT.
O Les services.
O Les filières du développement agricole : végétales, animales.
O Des informations sur le service de l’eau.
 Les visiteurs devront pouvoir envoyer des messages facilement au responsable à
partir du site.
 Insérer une carte (Google maps) indiquera où se situe l’organisme.
 Chaque lien créé devra avoir pour cible une seconde page.

II. L’Environnement de développement :

1. L’environnement matériel :
Pour développer ce site j’ai utilisé une machine, configurée comme suit :

- machine HP EliteBook

- mémoire vive : 8,00 Go

- Disque dur et type : 256 SSD

- Processeur : Intel(R) Core(TM) i5-6300U 2.40GHz

- Type de système : Windows 10 Professionnel

2. L’environnement logiciel :
Lors du développement de ce site, j’ai utilisé, les outils logiciels suivants :

2.1. Choix d’IDE :

Visual Studio Code est un éditeur de code open-source développé

par Microsoft supportant très grand nombre de langages grâce à des

18
 extensions. Il supporte l'auto complétions, la coloration syntaxique, le
débogage, et les commandes git.

2.2. Choix de langage de programmation :

HTML5 « HyperText Markup Language » ou « Langage de balisage

hypertexte » en français, qui représente l'ensemble des codes de balisage
insérés dans un fichier en vue de l'affichage d'une page dans un navigateur
Web. Le balisage indique au navigateur Web comment présenter à
l'utilisateur les mots et les images d'une page Web sur Internet. Bien que
chaque code de balisage individuel soit un élément à proprement parler,

on les appelle communément des balises. Certains éléments, présentés

sous forme de paires, indiquent le début et la fin de l'effet d'affichage.
Pourquoi HTML ? parce qu’avec le HTML, on peut structurer et
mettre en forme des pages Web, et y inclure de nombreux éléments,
comme des images ou des formulaires de saisie, grâce à des balises. Les
possibilités qu’il offre sont innombrables. Le HTML s’utilise
généralement avec d’autres langages de programmation, comme le
JavaScript ou le CSS.

CSS (Cascading Style Sheets) qui peut se traduire par "feuilles de

style en cascade". Le CSS est un langage informatique utilisé sur l'internet
pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de
style, aussi appelé les fichiers CSS, comprennent du code qui permet de
gérer le design d'une page en HTML.
L'avantage de l'utilisation d'un fichier CSS pour la mise en forme
d'un site réside dans la possibilité de modifier tous les titres du site en une
seule fois en modifiants une seule partie du fichier CSS. Sans ce fichier
CSS, il serait nécessaire de modifier chaque titre de chaque page du site
(difficilement envisageable pour les énormes sites de plusieurs milliers de
pages).
2.3. Autres :

19
 Font Awesome est une boîte à outils de polices et d'icônes basée sur
CSS, Less et SASS. En 2020, Font Awesome était utilisé par 38 % des
sites qui utilisent des scripts de polices tiers, plaçant Font Awesome à la
deuxième place après Google Fonts. Font Awesome 6 est la dernière
version sortie en février 2022. Les utilisateurs pourront télécharger leurs
propres icônes et recevoir plus d'icônes en plus de celles existantes de
Font Awesome 5.

Freepik est une banque d'images avec sa propre société de

production qui propose plus de 25 millions de ressources graphiques.
Parmi les contenus visuels produits et diffusés par la plateforme en ligne,
vous trouverez des photographies, des PSD, des illustrations et des
vecteurs.

III. Interfaces du site :

Dans cette partie, je vais exposer différente situation que peut rencontrer le
visiteur du site.

 ORMVAT : cette page donne une idée générale sur l’Office.

20
 Figure 3 : interface d’accueil.

 Missions : présentation des missions de l’ORMVAT.

Figure 4 : interfaces des missions.

 Organigramme : aperçu sur l’organisation d’ORMVAT.

Figure 5 : interface d’organigramme.

21
 Services : présente les différents services que contient l’Office.

Figure 6 : interface des services.

 Filière végétales : cette partie contient des informations sur le produit végétal
de la région.

Figure 7 : interface filières végétales.

22
 Filière animales : cette partie contient des informations sur le produit animal
de la région.

Figure 8 : interface filières animales.

 Service de l’eau : informations sur les zones irriguées du Tadla.

Figure 9 : interface service de l’eau.

23
 Contact : dans cette page l’internaute peut prendre une idée détaillée sur local
de l’organisme et toute information de contact.

Figure 10 : interface contact.

24
 IV. Bilan et conclusion :

1. Bilan professionnel :

Ce stage m’a apporté une nouvelle expérience professionnelle enrichissante,

ce qui m'a permis d'acquérir de nouvelles connaissances, que ce soit par l'expérience
de mon encadreur ou par les informations que mes amis n'ont pas hésité à me les
donner, ou bien par l'auto-apprentissage grâce auquel j'ai pu étudier deux nouveaux
langages (HTML/CSS) à ajouter à mes connaissances en programmation dont j'aurai
besoin dans ma future carrière. Ce stage aura été très constructif. En effet, j’ai pu
développer mes compétences professionnelles. J’ai eu la charge de la conception
d’un site, et à la réalisation tout en respectant les souhaits formulés dans le cahier de
charge. Travaillé avec un IDE tel que Visual Studio Code a été bénéfique puisqu’il a
facilité les taches pour moi en ce qui concerne le codage en HTML et CSS.

2. Bilan personnel :
Tout comme au niveau professionnel, ce stage m’a aidé à développer mes
connaissances personnelles et m’a fait découvrir de nouveaux outils. Ces quatre
semaines m’ont permis de réaliser un site web et de maîtriser les deux langages
html/css. Il s’agit d’un outil que je ne connaissais que de nom et que j’ai appris à
utiliser lors de ce stage. Le fait d’être livré à moi-même pour réaliser ce site web
m’a poussé à faire des recherches de façon autonome et de faire des recherches
personnelles hors de mon stage pour ne pas être bloqué devant un problème. Ce
stage aura été pour moi très constructif.

3. Conclusion :

En conclusion, l’Office Régional de Mise en Valeur Agricole du Tadla dispose

maintenant d’un site fonctionnel répondant à leurs attentes. Ce stage m’a apporté de
nouvelles connaissances et a augmenté mes capacités de compréhensions. En effet,
la principale difficulté a été de respecter le cahier des charges et donc de ne pas
s’égarer de ses besoins.

25
 WEBOGRAPHIE

 HTML, disponible sur

https://openclassrooms.com/en/ [consulté le 07 juillet 2022]

 CSS, disponible sur

https://openclassrooms.com/en/ [consulté le 07 juillet 2022]

 Des sources qui m'ont aidée lors de la réalisation de mon projet

https://www.riob.org/sites/default/files/IMG/pdf/Ormvat.pdf [consulté le 17 juillet 2022]

https://coeurdumaroc.ma/cri/public/documents/agriculture-72745.pdf [consulté le 19 juillet 2022]

https://agritrop.cirad.fr/544079/1/document_544079.pdf [consulté le 19 juillet 2022]

 page d’inspiration
https://www.ormvatafilalet.ma/ [consulté le 05 juillet 2022]

http://ormvah.com/ [consulté le 05 juillet 2022]

26