Raport Modifier

REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
UNIVERCITE Blida1
Rapport de Fin de Formation

Promotion au Grade d’Aide
Ingénieur Niveau 1
THEME : création site web
Présenté par :
 Chettah ahlem
 Banaziez fatma zohra
 Larabi nadia
Sous l’encadrement de :
Mm. Cherifa Meharzi
Etablissement de Formation : Université Saad Dahlab Blida
1 Année 2022/2023
En premier lieu, nous remercions, DIEU le tout puissant de nous avoir
permis de mener à bien ce modeste travail.
Nos remerciements s’adressent à nos encadreurs " Cherifa Meharzi "

Pour le soutient qu’elles nous ont apporté tout au long de cette
formation.
Nos remerciements vont aussi à tous nous professeurs qui nous ont
conseillé, expliquer et suivie pas à pas pondant toute la durée de notre
formation.
Nous remercions aussi toutes les personnes qui ont contribuées de près
ou de loin à la réalisation de ce projet.
2
Tabledesmatières
Introduction...................................................................................................5
Première Partie : Cadrethéorique..................................................................7
1- Présentation de l’Université Saad Dahlab Blida 1.....................................7
2- Présentation du Département Informatique.............................................10
3- Présentation du DépartementInformatique..............................................12
4- Présentation de la Formation...................................................................13
5- Présentation de ministère de la sante ……………………………………
Deuxième Partie : CadrePratique................................................................17
1-Projet de Fin de Formation......................................................................17
Conclusion...................................................................................................31
Bibliographie...............................................................................................32
Annexe........................................................................................................33
3
Tabledesfigures
Figure 1 : Organigramme général de l’université de Blida01.............................9
Figure 2: Structure organisationnelle de la Faculté des sciences......................11
Figure 3: Structure organisationnelle du Département Informatique................12
4
Introduction
Ce rapport est le fruit d’un stage de 7 mois dans l’Université de Saad dahleb, dans le cadre de passage de
grade technicien supérieur en informatique au grade de aide ingénieure niveau 1 .
De ce point de vue, cette étude est venue éclairer le rôle de la formation dans le développement les
techniciens supérieur en informatique avant la promotion au grade d’assistant ingénieur niveau 11à
l'Université SAAD DAHLEB BLIDA 01.
Afin d'avoir accès à cette formation, un diplôme de technicien supérieur en informatique est exigé
avec 10 ans d'expérience professionnelle car la formation préalable à la promotion dans le grade
aide ingénieur niveau 1, s'effectue après admission à l'examen professionnel, ou retenu au choix
par voie d'inscription sur la liste d'aptitude, conformément à la réglementation en vigueur.
1DécretexécutifN°16-280 du 2 Safar 1438 correspondant au 2 novembre 2016 modifiant et complétant le

décretexécutif N°08-04 du 11 Moharram 1429 correspondant au 19 janvier 2008 portant statut particulier des
fonctionnairesappartenant aux corps communs aux institutions et administrations publiques
5
L’université SAAD DAHLEB BLIDA 01,c’est engagée à former les techniciens supérieurs en
informatique dans le cadre d’une convention signée avec notre établissement, pour l’année 2021,
cette dernièrese déroule au niveau de la faculté des sciences précisément au département de
l’informatique et se présente comme suit2 :
La formation préalable est organisée sous formecontinue ou alternée et comprend des cours
théoriques, desconférences méthodologiques et un stage pratique.
La durée de la formation préalable à la promotion dans le grade assistant ingénieur de niveau 1 en

informatique, estfixée àSept (7) mois.
L'évaluation des connaissances s'effectue selonle principe du contrôle pédagogique continu et

comprend desexamens périodiques concernant la partie théorique etpratique.
Les fonctionnaires concernés par la formation, doivent élaborer un rapport de fin de formationsur
un thème en rapport avec le programme de formation.
La première partie du rapport se focalisera sur le lieu et l'environnementdu stage, soit

l’universitédeSaad Dahlab Blida01et le département Informatique. Lasecondepartie
décriraleprojet, ses objectifs etsaréalisation.
2Arrêtédu 22 RabieEthani 1441 correspondant au 19décembre 2019 fixant les modalités d’organisation, la durée et le
contenu des programmes de la formation préalable à la promotion dans certainsgrades appartenant aux corps
communs desinstitutions et administrations publiques
6
Première Partie : Cadre théorique
1- Présentation de l’Université Saad Dahlab Blida 1
1-1-Création de l’université Saad Dahlab Blida 1

L’université « SAAD DAHLEB » de Blida est un établissement public à caractère administratif et
vocation scientifique et culturelle jouissant de la personnalité morale, elle Fut créée par décret N°
137-89 de 1989.
L’organisation a pour interlocuteur officiel et pour tutelle, le ministère de l’enseignement

supérieur et de la recherche scientifique.
Avant septembre 1989, il n’existait que des instituts autonomes qui géraient eux même leur
mission,qui a été crée le 20 juin 1977 par le décret n° 77-92.
L'université est un établissement public àcaractère scientifique, culturel et professionnel doté de
lapersonnalité morale et de l'autonomie financière, il est créée par décret exécutif prissur
proposition du ministre chargé de l'enseignementsupérieur et est placée sous sa tutelle.
Dans le cadre des missions de service publicde l'enseignement supérieur, l'université assure
desmissions de formation supérieure et des missions derecherche scientifique et de développement
technologique3
Dans le domaine de la formation supérieureles missions fondamentales de l'université

sont,notamment :
 la formation des cadres nécessaires au développement économique, social et culturel du
pays,
 l'initiation des étudiants aux méthodes de la rechercheet la promotion de la formation par et
pour la recherche,
 la contribution à la production et à la diffusion généralisée du savoir et des connaissances,
à leuracquisition et leur développement,
 la participation à la formation continue.
3Décret exécutif n°03-279 du 24 JoumadaEthania 1424correspondant au 23 août 2003 fixant lesmissions et les règles
particulières d'organisationet de fonctionnement de l'universitéJournal n° 51 du 24 Août 2003
7
Dans le domaine de la recherche scientifiqueet du développement technologique les
missionsfondamentales de l'université sont, notamment :
 la contribution à l'effort national de recherche scientifique et de développement
technologique,
 la promotion et la diffusion de la culture nationale,
 la participation au renforcement du potentielscientifique national,
 la valorisation des résultats de la recherche et ladiffusion de l'information scientifique et
technique,
 la participation au sein de la communauté scientifiqueet culturelle internationale à
l'échange des connaissanceset à leur enrichissement
Dans le cadre de ses missions, l’université assure la coordination des activités des instituts qui la
composent, des services techniques et administratifs communs ainsi que des instituts nationaux
d’enseignement supérieur qui lui sont rattachés.
L’université de BLIDA se compose de 4 facultés et 4 instituts qui sont :
 Faculté de science.
 Faculté de médecine
 Faculté des sciences de la nature et de la vie.
 Faculté de technologie
 Institutssciences vétérinaires.
 Institutsarchitecture et urbanisme.
 Institutsaéronautique et des études spatiales.
 Institutssciences et techniques appliquées
1-2- Organisation administratif

L’analyse de la structure organisationnelle de l’organisation dépend de l’identification et de la
connaissance de toutes les sections et structures principales et subsidiaires de l’organisation en
fonction de leurs compétences et de leur taille en termes d’activité, des pouvoirs accordés pour
accomplir le travail et de l'étendue auquel s'exercent les pouvoirs actuels.
8
1-3- Organigramme de l’université de Blida01
RECTORAT
Vice Rectorat
Bibliothèque centrale
Faculté des sciences Secrétaire général

INSTITUT SSCIENCES
VÉTÉRINAIRES
Faculté de médecine
Sous-direction des
INSTITUTS ARCHITECTURE personnels
Faculté des sciences de la ET URBANISME
nature et de la vie
Sous-direction de budget
INSTITUTS AÉRONOTIQUE et comptabilité
Faculté de technologie ET DES ÉTUDES SPATIALES
Sous-direction des
INSTITUTSSCIENCES ET moyens généraux
TECHNIQUES APPLIQUEES
Sous-direction de
sécurité interne
Figure 1 : Organigramme général de l’université de

Blida01
2- Présentation de la faculté des sciences
2-1- Créationde la facultédes sciences
La faculté est une unité d'enseignement et derecherche de l'université dans le domaine de la

science etde la connaissance, La faculté est pluridisciplinaire mais peut-être, le cas échéant,
créée autour d'une disciplinedominante4.
La faculté des Sciences a été créée officiellement au sein de l’université Saad Dahlab de
Blida par décret exécutif n°98-253 du 24 RabieEthani 1419 correspondant au 17 août 1998
modifiant et complétant le décret n°83-544 du 24 septembre 1983 portant statut type de
l’université.
4Décret exécutif n°03-279 du 24 JoumadaEthania 1424correspondant au 23 août 2003 fixant lesmissions et les
règles particulières d'organisationet de fonctionnement de l'universitéJournal n° 51 du 24 Août 2003
10
DOYEN
............................ Les chefs des

Le secrétaire général
.......................
................................... vice-doyen chargé

..........................
...........
................ ....Service des
3.......
.........................
...............
........
.................
...................
.................. ..
Service
..................... ....... scolarité
....
...................
......................... ..................
..............
...................
..................
Figure 2: Structure organisationnelle du Faculté des sciences

3- Présentation du Département Informatique
3-1- Création du département

Le laboratoire de Recherche pour le Développement des Systèmes Informatisés (LRDSI)
de l'université Saad Dahlab –Blida1, a été agréé en mai 2002 pour accompagner le
départementInformatique créé en 1999, dans ses activités pédagogiques et
scientifiques
Chef du Département Informatique
Adjointe au chef du département

en charge de l'enseignement et de Adjointe au chef du département
l'éducation dans le post- chargé de l'enseignement et de
graduation l'éducation dans le graduel
Service de suivi et Responsable du Service

d'évaluation de l'éducation Enseignement
Service de Formation Service de suivi des activités

Supérieure Ad Hoc Post-
de recherche
graduation
Figure 3: Structure organisationnelle du Département d’Informatique
12
4- Présentation de la Formation :
Le législateur algérien est rentré dans sa définition de la formation dans les articles 104 et 105
de l'ordonnance n°06-03 du 15/07/2006, qui inclut la loi organique de l'emploi public comme
étant à la fois un droit d'obligation et un droit au travailleur d'actualiser, de développer et de
promouvoir ses connaissances théoriques et pratiques dans l'organisation pacifique de la
profession.
3-1- Objectif de la formation
Pour déterminer l'importance de la formation, il est nécessaire de passer en revue les motifs
qui nécessitent le processus de formation, qui sont :
a- Répondre aux changements urgents dans l'environnement de travail.

b- L'émergence de nouveaux produits ou matériaux de production.
c- Évolution de l'art de la production (L'émergence des nouvelles évolutions
techniques et technologiques).
3-2- Matières de la formation

Le programme de notre formation est comme suit :
 Semestre 1 :
- Programmation miniature.
 Rédaction administrative:
Le coure de «La rédaction administrative» a pour objet d’améliorer la qualité de l’écriture
des documents administratifs et leurs lisibilités, par la définition de règles simples de
présentation et de rédaction. La rédaction administrative constitue une voie privilégiée
d'amélioration des rapports et de la communication à l’intérieur de l’administration et entre
l’administration et les usagers. Elle facilite l’identification des courriers en provenance des
services. Elle contribue sans doute à la modernisation du service public.
 Gestion base de données.
Une BD est peut-être pour certains une collection de fichiers reliés par des pointeurs multiples,
aussi cohérents entre eux que possible, organisés de manière à répondre efficacement à une
grande variété de questions. Pour d'autres, une BD peut apparaître comme une collection
d'informations modélisant une entreprise du monde réel. Ainsi, un SGBD peut donc être défini
comme un ensemble de logiciels systèmes
13
permettant de stocker et d'interroger un ensemble de fichiers interdépendants, mais aussi
comme un outil permettant de modéliser et de gérer les données d'une entreprise.
Les données stockées dans des bases de données modélisent des objets du monde réel, ou des
associations entre objets. Les objets sont en général représentés par des articles de fichiers,
alors que les associations correspondent naturellement à des liens entre articles. Les données
peuvent donc être vues comme un ensemble de fichiers reliés par des pointeurs ; elles sont
interrogées et mises à jour par des programmes d'applications écrits par les utilisateurs ou par
des programmes utilitaires fournis avec le SGBD (logiciels d'interrogation interactifs, éditeurs
de rapports, etc.). Les programmes sont écrits dans un langage de programmation traditionnel
appelé langage de 3e génération (C, COBOL, FORTRAN, etc.) ou dans un langage plus avancé
intégrant des facilités de gestion d'écrans et d'édition de rapports appelé langage de 4e
génération (Visual BASIC, SQL/FORMS, MANTIS, etc.). Dans tous les cas, ils accèdent à la
base à l'aide d'un langage unifié de description et manipulation de données permettant les
recherches et les mises à jour (par exemple, le langage SQL).
 Gestion de projet:
Comprendre les différentes composantes du management et de la gestion de projetetpouvoir
mettre en œuvre les techniques, méthodes et outils pour préparer un projet ou avant-projet.
Savoir mettre en place les moyens pour piloter la réalisation d’un projet.
 Semestre 2 :
 Développement web:
Un développeur ou programmeur Web est une personne qui réalise un projet Web, pensé et
réfléchi par un client ou une équipe de conception, et le transforme en un site Web. et cela en
écrivant des lignes de code compliqué. Pour les écrire, ils utilisent différents langages avec
une spécificité et une utilité pour chacun d’entre eux. Les
14
développeurs Web ont un travail assez difficile, car ils doivent prendre une langue que nous
comprenons, comme le français, et la traduire dans une langue qu’un ordinateur comprend,
comme Python ou HTML.
Comme vous pouvez l’imaginer, cela va prendre beaucoup de temps et d’efforts pour apprendre
différents langages de programmation ainsi que leurs utilisations. Différents types de
développeurs se spécialisent dans différents domaines, ce qui signifie que les grands
projets Web sont généralement une collaboration entre plusieurs développeurs différents.
 Système d'exploitation:
Comprendre le fonctionnement système, matériel et logiciel d’un ordinateur dans son contexte
de travail.
 Réseaux:
Tous les concepts fondamentaux en réseau informatique :
- la définition de réseau informatique;
- la classification des réseaux;
- la topologie des réseaux;
- les réseaux client-serveur;
- le modèle OSI;
- les réseaux APPLETALK et ARPANET;
- la couche Ethernet;
- les réseaux locaux et étendus;
- la couche TCP/IP;
 Analyse et conception. Orienté Objet :

-Rappel de la technologie orientée objet.
- Principes fondamentaux dela technologie orienté objet.
- Introduction au processus de développement et à la modélisation.
- Le processus de développement de la collecte des données à la validation.
- Comprendre le rôle de la modélisation.
- Appliquer les Design Patterns aux modèles.
15
Chapitre I : Etude préalable
-Composite pattern, Strategy pattern, observer pattern, abstract

factory pattern de la conception à l'implémentation
-Comment traduire les diagrammes de classe UML dans des
langages de programmation et dans des bases de données ?
- Les principes de mise en œuvre d'applications objet.
- Les grandes plateformes objets actuels : les technologies .NET de
Microsoft et JEE de SUN.
 Anglais.
Les modules de la formation
1- Gestion base de données
 Chapitre 1 : préparation des bases de données

 Chapitre 2 : modèle relationnel
 Chapitre 3 : algèbre relationnel
2- Gestion de projets
 Chapitre 1 : généralisation sur gestion de projet

 Chapitre 2 : estimation des charges de projet
 Chapitre 3 : la planification des phases d’un projet
 Chapitre 4 : suivi et contrôle de l’état d’avancement
3- Développement web
 Application sites web concepts et principes fondanentaux

 CSS
 HTML
4- Système d’information
 Chapitre 1 : generalites

 Chapitre 2 : modalisation conceptuelle des données
 Chapitre 3 :
5- Système exploitation
 Chapitre 1 : génitalité sur les système d’exploitation
2
 Chapitre 2 : gestion des processus
 Chapitre 3 : ordanacement des processus
 Chapitre 4 :
6- anglai
Chapitre 1:: How to write a professional Email.
Présentation de ministère de la sante
La direction des systèmes d'information et de l’informatique est la direction responsable

du système d'information de Ministère et les établissements de santé. Elle est en charge de
définir l'architecture du SI, concevoir, installer et déployer et exploiter le SI.
Afin de valider notre passage de niveau à Aid ingénieur niveau 1, On a effectué un stage
de sept mois au sein de Faculté SAAD DAHLEB Blida département Informatique. Durant cette
période, on a dû mettre en application nos connaissances, acquises durant notre formation au
département informatique, faire preuve d’initiative et d’autonomie pour nos adapter au monde de
l’entreprise et répondre aux attentes.
Tout d’abord, la réalisation d’un site web afin de faciliter la communication entre Ministère
de la santé et les structures de santé ainsi avec la population.
Ensuite, le projet concerne a bien présenter le ministère de la santé et ses objectifs. Notre
mission était de réaliser un site web afin de donner une information précise et à jour au sujet de
notre établissement.
Au sein de ce projet, il fallait aussi regrouper toutes les directions de Ministères de la santé a
côté de notre direction.
Pour se faire, nous allons passer par les étapes suivantes [09]
 Etude préalable.
 Etude de l’existant.
 Etude détaillée.
 Réalisation.
3
1. Historique:
Le ministère de la santé a été crée depuis le premier gouvernement Algérien indépendant qui comprenait alors
17 ministères et en vertu du décret n°62-01 du 27 septembre 1962, il a connu de nombreuses évolutions depuis comme
on peut le voir dans le tableau suivant :
Année Dénomination Loi
1963 Ministère de la santé publique et de la population N°43
1964 Ministère de la santé publique et les anciens N°50

moudjahidin et des affaires sociales
1965 Ministère de la santé publique N°51
1994 Ministère de la santé N°40
1996 Ministère de la santé et de la population N°25
2005 Ministère de la santé, de la population et de la N°73
réforme hospitalière.
2022 Ministère de la santé N°87
Tableau 1: Changements de dénomination du ministère de la santé à travers les années.
Il est à noter que depuis l'année 1996 jusqu'à l'année 2022, le MS a connu une sorte de stabilité quant à son
renom et ses organisations.
L'instabilité et les changements perpétués n'ont pas été d’une grande aide au développement d’une politique de
promotion du secteur et ne lui a pas permis de suivre les tendances de développement qui se produisent à l’échelle
mondiale.
2. Structure organisationnelle :
Avant de passer à la structure organisationnelle du ministère de la Santé, le Décret exécutif n° 11-379 du 25
Dhou El Hidja 1432 correspondant au 21 novembre 2011 fixant les attributions du ministre de la santé fut édité
définissant ainsi ses tâches et ses pouvoirs, a été adopté comme base pour le développement d'une restructuration
organisationnelle du ministère
Ce décret comprend l'identification et l'organisation de l’administration centrale du ministère de la Santé
comme suit:
Le secrétaire général : aidé de deux directeurs d’études, il est en relation avec le bureau de poste et le bureau
ministériel de la sécurité interne à l’organisme.
4
Chef de cabinet : est assistés par huit chargés d’études et cinq assistants qui lui sont rattachés.
Inspection générale : Sa gestion et son organisation sont régies par un décret officiel.
Les Directions générales suivantes :
 Direction générale de la prévention et de la promotion de santé.
 Direction générale des services de santé et de la réforme hospitalière.
 Direction générale de la pharmacie et des équipements médicaux.
Et les directions :
 Direction de la prévention, de la lutte contre les maladies transmissibles.
 Direction des maladies transmissibles
 Direction de la prévention socio-environnementale
 Direction des programmes de soin, et l’éthique de la déontologie médicale.
 Direction des établissements hospitaliers et de la réforme hospitalière
 Direction de structure de santé de proximité
 Direction des produits pharmaceutiques
 Direction des équipements de santé
 Direction de la population
 Direction des études et de la Planification.
 Direction de la réglementation du contentieux et de la coopération
 Direction des ressources humaines.
 Direction de la formation
 Direction des finances et des moyens
 Direction des systèmes d’information et de l’informatique
3. Rôle et objectifs du MS :

Le ministère de la santé a pour charges :
-D’initier les programmes d’action de santé spécifiques aux populations vulnérables ou en difficulté;
-D’élaborer les programmes de santé de proximité;
5
-De veiller sur la lutte contre la toxicomanie et les pratiques d’addiction;
-D’élaborer et de proposer l’organisation du système national de santé, notamment l’établissement de la carte
sanitaire ;
-D’organiser les soins médicaux dans les structures de santé ;
-De réglementer l’exercice des professions de santé ;
-D’élaborer la politique nationale des produits pharmaceutiques, des dispositifs médicaux et des équipements
de santé à usage de la médecine humaine ;
-De veiller sur l’approvisionnement en produits pharmaceutiques, dispositifs médicaux et équipements de santé
et à surveiller leurs qualité ;
-De veiller sur la protection sanitaire en milieux spécifiques ;
-D’encourager les activités liées la prévention et la lutte contre les maladies épidémiques, endémiques et non
transmissibles et de proposer les mesures de dépistage y afférentes ;
-D’initier et de mettre en œuvre les mesures de lutte contre les nuisances et pollutions ayant un impact sur la
santé de la population.
Le ministère de la santé a pour charge dans le secteur de la population:
-D’élaborer, de mettre en œuvre et d’évaluer la stratégie et la politique nationale en matière de population ;
-De définir les priorités en matière de maîtrise de la croissance démographique et de la planification familiale ;
-De procéder à des analyses et d’entreprendre toute étude prospective en matière de démographie.
Organigramme du Ministère de la santé

6
7
4. Présentation du domaine d’étude :
Notre champ d’étude concerne la direction des systèmes d’information et de l’informatique, nous nous
intéresserons donc à compter de maintenant uniquement aux spécifications la concernant.
Missions de la direction des d’information et de l’informatique (DSII) :

Est chargée, notamment :
– de veiller à la mise en place et au développement des systèmes d’information du ministère ;
– de mettre en place et de développer les systèmes et réseaux d’information, de messagerie électronique, les outils de
gestion et d’aide à la prise de décisions et d’en assurer la maintenance et la sécurisation ;
– de contribuer au processus de mise en place de l’administration électronique.
Elle est dirigée par un directeur et comprend trois (2) sous-directions :
a) La sous-direction des systèmes d’information :

Chargée notamment :
– de mettre en place et de développer les systèmes d’information du ministère ;
– d’assurer le suivi des processus mise en place de l’administration en concertation avec les structures et les
établissements sous tutelle ;
– de veiller au respect des normes et des règlements en matière de sécurité des systèmes d’information auprès des
structures du ministère et des établissements sous tutelle ;
– de mettre en place et de développer les systèmes et réseaux d’information, de messagerie électronique, les outils de
gestion et d’aide à la prise de décisions et d’en assurer la maintenance et la sécurité.
b) La sous-direction des réseaux :

Chargée notamment :
– d’assurer la mise en place des réseaux électroniques et d’information reliant les structures centrales du ministère, ses
services déconcentrés et les établissements sous-tutelle et leur sécurisation ;
– de participer à l’administration et à l’exploitation des infrastructures système et réseau en relation avec l’administration
centrale du ministère ;
– de proposer des solutions pour améliorer continuellement les réseaux locaux ;
– d’assurer la sécurité du matériel et des données sur le réseau local et sur l’ensemble des postes de travail.
8
5. Organigramme de la direction des Systèmes d’information et de l’informatique :
Direction des systèmes

d’information et de
l’informatique
Sous-direction de Sous-direction des systèmes

réseaux d’information
Figure n°2 : Organigramme de la direction des systèmes d’information et de l’informatique
9
Deuxième Partie : CadrePratique
1- Projet de Fin de Formation
1-1-Création d’une page web
Le but de notre projet est de réaliser un site web en utilisant la technologie web en langage html
pour concevoir les sites Internet,Il fallait aussi utiliser CSS (langage de présentation des pages
web) et WebForms, un modèle du FrameworkASP.NET utilisant des widgets tels que des
calendriers ou des menus.
Les différentes étapes de la conduite d'un projet web peuvent être résumer ainsi :
1. lancement : étude des besoins, de la concurrence et de l'existant pour
l'établissement d'un cahier des charges.
2. conception : élaboration de la structure (arborescence), du contenu des pages web et en
particulier de la page d'accueil et éventuellement un moteur de recherche, du graphisme,
qui font partie du cahier des charges fonctionnel.
3. réalisation : L'étape de la réalisation comprend :
 la réservation et gestion d'un nom de domaine (l’adresse web à laquelle le site est
accessible).
 la mise en œuvre d'une infrastructure d'hébergement du site (serveurs web, base de
données...).
 le développement de l'interface utilisateur (frontend), la partie visible dans le
navigateur ; les différentes pages sont décrites en langages connus des navigateurs
web, principalement HTML, CSS et JavaScript. Les éléments graphiques (et
éventuellement des publicités servant à rémunérer le site) sont intégrés dans ces
pages.
 le développement de l'arrière-plan (backend), la partie qui fonctionne côté serveur.
4. production : le site est mis en ligne, devient accessible au public ciblé.
5. exploitation : phase de maintenance et de promotion du site, avec notamment le
référencement naturel (Netlinking) ou payant (Google Adwords, Microsoft Adcenter, ou
autres).
10
1--Objectifs
1. Concevoir un design moderne et épuré qui reflète l’institution

2. Créer une architecture de navigation intuitive pour une expérience utilisateur optimale
3. Faciliter l’accès aux différents outils et applications destinés au publics et professionnels de la santé ainsi qu’aux
différents site associés et établissements sous tutelle
Design
moderne,
épuré et
institutionn
el
Règles et UX /
normes SITE WEB Navigati
SEO MINISTERE on
Référence DE LA Optimal
ment SANTE / CMS
naturel
Admin
Conten
uà
valeur
ajoutée
11
Le Contenu du site:
12
Le Contenu du Dossier "CSS":
Le Contenu du Dossier "IMG":
13
La Page "Index.html":
14
Code Source de la page "index.html"
<!DOCTYPE html>
<html lang="zxx">
<head>


<meta charset="utf-8">
<title>Ministere de la sante</title>


<meta name="theme-name" content="medic" />



<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">

<link rel="stylesheet" href="plugins/slick/slick.css">
<link rel="stylesheet" href="plugins/slick/slick-theme.css">

<link rel="stylesheet" href="plugins/fancybox/jquery.fancybox.min.css">

<link rel="stylesheet" href="plugins/fontawesome/css/all.min.css">

<link rel="stylesheet" href="plugins/animation/animate.min.css">

<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.css">

<link rel="stylesheet" href="plugins/timePicker/timePicker.css">


<link href="css/style.css" rel="stylesheet">


<link rel="icon" href="images/favicon.png" type="image/x-icon">
</head>
<body>
<div class="page-wrapper">

<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"
aria-controls="navbarSupportedContent" aria-expanded="false"
15 aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarLinks">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Acceuil</a>
</li>
<li class="nav-item @@about">
<a class="nav-link" href="about.html">le Ministere</a>
</li>
<li class="nav-item @@service">
<a class="nav-link" href="service.html">Sous tutelle</a>
</li>

<li class="nav-item dropdown @@Directions">
<a class="nav-link dropdown-toggle" href="#!" id="navbarDropdown" role="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">Directions</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item @@blog" href="planification.html">Planification</a></li>
<li><a class="dropdown-item @@blogDetails" href="Prevention.html">Prevention</a></li>
<li><a class="dropdown-item @@blog" href="dsii.html">Systeme informatique</a></li>
<li><a class="dropdown-item @@blog" href="drh.html">Ressources humaines</a></li>

</ul>
</li>
<li class="nav-item @@contact">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
16
La Page sous tutelle
Code Source de la page " sous tutelle.html":
</article>
<article class="entry">
<div class="entry-img">
<img src="assets/img/blog/blog-2.jpg" alt="" class="img-fluid">
</div>
<h2 class="entry-title">
<a href="blog-single.html">Ans</a>
</h2>
<div class="entry-meta">
<ul>
<li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="blog-
single.html">John Doe</a></li>
<li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="blog-
single.html"><time datetime="2020-01-01">Jan 1, 2020</time></a></li>
17
<li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a
href="blog-single.html">12 Comments</a></li>
</ul>
</div>
<div class="entry-content">
<p>
L'Agence Nationale du Sang est un établissement public à caractère administratif
doté de la personnalité morale et de l’autonomie financière, placé sous la tutelle du ministre de la
Santé et est situé à Alger.
Elle a été créée le 09 Avril 1995 en application du décret exécutif n°95-108 portant sa création, son
organisation et son fonctionnement et le 11 Aout 2009 a été édité le décret exécutif n°09-258 relatif
à l’Agence Nationale du Sang.
L’Agence Nationale du Sang assure tous les besoins nationaux en sang, ainsi que le contrôle des
dérivés sanguins stables. Elle œuvre à développer les activités de la transfusion sanguine afin
d’assurer l’approvisionnement en sang et de ses produits pour répondre aux besoins de tous les
patients, en tant qu’opérateur exclusif en matière de sang, elle exerce ses fonctions sur l’ensemble
du territoire national.
L’Agence est dirigée par un Directeur général et administrée par le conseil d’administration dont le
rôle est de délibérer sur toutes les questions d’ordre organisationnelle. Elle est dotée aussi d’un
conseil scientifiquequi est un organe consultatif chargé d’émettre des avis, des propositions et des
recommandations sur toutes questions de nature médicale, scientifique et technique en rapport avec
les missions de l’agence.
L’agence possède également un laboratoire de sang qui a un rôle de soutien technique, d’appui et de
référence pour l’ensemble des structures de la transfusion sanguine du territoire national, et aussi
des agences régionales et des centres de wilayas du sang dont certaines sont opérationnelles et
d’autres sont en cours de réalisation.
</p>
<div class="read-more">
<a href="blog-single.html">Read More</a>
</div>
</div>
</article>
18
</div>
<div class="title-bar"><p>Formation
Promotion au Grade d’Aide Ingénieur Niveau 1
</p></div>
</div>
<div class="nav-bar">
<ul>
<li><a href="index.html">accueil</a></li>
<li class="active"><a href="Modules.html">La liste des
modules</a></li>
<li><a href="Notes.html">La liste des notes</a></li>
<li><a href="apropos.html">a propos l'université de
blida
1</a></li> <li><a href="contact.html">Contactez-nous</a></li>
</ul>
</div>
<div class="body-web">
<h1>La liste des modules</h1>
<table class="table-container" dir="ltr">
<thead>
<tr>
<th>N°</th>
<th>Module</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1er semestre</th>
</tr>
<tr>
<td>1</td>
<td>Recherche opérationnel</td>
</tr>
<tr>
<td>2</td>
<td>Gestion des projets</td>
19
</tr>
<p>Tous droits réservés aux propriétaires du site, Messieurs
:<b> MELBOUS ABDERAOUF - CHEMANI AISSA -RACHID BEGRICHE</b></p>
</div>
</div>
</body>
</html>
La Page "dsii.html":
Code Source de la page "dsii.html":

<!DOCTYPE html>
<html>
<head>
<title>direction des systèmes d'information</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
20
<article>
<img src="assets/img/blog/dsii.jpg"alt="Image de l'article">
<h1>Direction de système d'information et de l'informatique</h1>
<p></p><title>Introduction</title></p>
<p>Date de publication : 14 mai 2023</p>

<p> La direction des systèmes d'information et de l’informatique est la direction
responsable du système d'information de Ministère et les établissements de santé. Elle est en charge
de définir l'architecture du SI, concevoir, installer et déployer et exploiter le SI.</p>
</article>
</body>
</html>
21
Code Source de le fichier de style "style.css":
/**
* Template Name: Sailor - v4.10.0
* Template URL: https://bootstrapmade.com/sailor-free-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
a {
text-decoration: none;
color: #d9232d;
}
a:hover {
color: #e24d55;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
22
right: 15px;
bottom: 15px;
z-index: 996;
background: #d9232d;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 28px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #e1444d;
color: #fff;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
background: white;
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
}
#header.header-scrolled {
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
padding: 12px 0;
}
#header.header-inner-pages {
}
23
#header .logo {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
}
#header .logo a {
color: #556270;
}
#header .logo img {

max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
24
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 500;
color: #556270;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #d9232d;
}
.navbar .getstarted,
.navbar .getstarted:focus {
padding: 8px 25px;
margin-left: 30px;
border-radius: 4px;
font-weight: 400;
color: #fff;
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
color: #fff;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
25
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
transition: 0.3s;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 400;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,

.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: #d9232d;
}
.navbar .dropdown:hover>ul {
opacity: 1;
top: 100%;
}
.navbar .dropdown .dropdown ul {

top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
26
.navbar .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: 100%;
}
@media (max-width: 1366px) {

.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul {

left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #556270;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}

.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
27
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(63, 73, 83, 0.9);
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 15px;
color: #556270;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #d9232d;
}
.navbar-mobile .getstarted,
28
.navbar-mobile .getstarted:focus {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
background: #fff;
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover,

.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
color: #d9232d;
}
.navbar-mobile .dropdown>.dropdown-active {
display: block;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
height: 100vh;
29
background-color: rgba(63, 73, 83, 0.8);
overflow: hidden;
position: relative;
}
#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item,
#hero .carousel-item::before {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#hero .carousel-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#hero .carousel-item::before {
content: "";
background-color: rgba(30, 35, 40, 0.6);
}
#hero .carousel-container {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
top: 70px;
left: 50px;
right: 50px;
}
#hero .container {
text-align: center;
}
#hero h2 {
color: #fff;
30
margin-bottom: 20px;
font-size: 48px;
font-weight: 700;
}
#hero p {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
margin: 0 auto 30px auto;
color: #fff;
}
#hero .carousel-inner .carousel-item {

transition-property: opacity;
background-position: center top;
}
#hero .carousel-inner .carousel-item,

#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end {
opacity: 0;
}
#hero .carousel-inner .active,

#hero .carousel-inner .carousel-item-next.carousel-item-start,
#hero .carousel-inner .carousel-item-prev.carousel-item-end {
opacity: 1;
transition: 0.5s;
}
#hero .carousel-inner .carousel-item-next,

#hero .carousel-inner .carousel-item-prev,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end {
left: 0;
transform: translate3d(0, 0, 0);
}
#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
background: none;
font-size: 30px;
line-height: 0;
width: auto;
31
height: auto;
background: rgba(255, 255, 255, 0.2);
border-radius: 50px;
transition: 0.3s;
color: rgba(255, 255, 255, 0.5);
width: 54px;
height: 54px;
display: flex;
}
#hero .carousel-control-next-icon:hover,
#hero .carousel-control-prev-icon:hover {
background: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.8);
}
#hero .carousel-indicators li {
cursor: pointer;
background: #fff;
overflow: hidden;
border: 0;
width: 12px;
height: 12px;
opacity: 0.6;
transition: 0.3s;
}
#hero .carousel-indicators li.active {

opacity: 1;
}
#hero .btn-get-started {
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 14px 32px;
border-radius: 4px;
transition: 0.5s;
32
line-height: 1;
color: #fff;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#hero .btn-get-started:hover {
background: #df3740;
}

#hero {
height: 100vh;
}
#hero .carousel-container {
top: 8px;
}
}

#hero h2 {
font-size: 28px;
}
}
@media (min-width: 1024px) {
#hero .carousel-control-prev,
#hero .carousel-control-next {
width: 5%;
}
}
@media (max-height: 500px) {

#hero {
height: 120vh;
}
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
33
section {
padding: 60px 0;
overflow: hidden;
}
.section-bg,
.services .icon-box {
background-color: #f8f9fa;
}
.section-title {
padding-bottom: 40px;
}
.section-title h2 {
font-size: 14px;
font-weight: 500;
padding: 0;
line-height: 1px;
margin: 0 0 5px 0;
letter-spacing: 2px;
color: #aaaaaa;
}
.section-title h2::after {
content: "";
width: 120px;
height: 1px;
background: #e6636a;
margin: 4px 10px;
}
.section-title p {
margin: 0;
margin: 0;
font-size: 36px;
font-weight: 700;
color: #556270;
}
34
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 18px 0;
background: #f8f9fa;
min-height: 40px;
margin-top: 80px;
}
.breadcrumbs h2 {
font-size: 32px;
font-weight: 300;
margin: 0;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}
.breadcrumbs ol li+li {
padding-left: 10px;
}
.breadcrumbs ol li+li::before {
padding-right: 10px;
color: #6b7b8d;
content: "/";
}

.breadcrumbs {
margin-top: 58px;
}
.breadcrumbs .d-flex {
display: block !important;
35
}
.breadcrumbs h2 {
}
.breadcrumbs ol {
display: block;
}
.breadcrumbs ol li {
}
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h2 {
font-weight: 700;
font-size: 48px;
line-height: 60px;
}
.about .content h3 {
font-weight: 500;
line-height: 32px;
font-size: 24px;
}
.about .content ul {
list-style: none;
padding: 0;
}
.about .content ul li {
padding: 10px 0 0 28px;
position: relative;
}
.about .content ul i {
left: 0;
36
top: 7px;
position: absolute;
font-size: 20px;
color: #d9232d;
}
.about .content p:last-child {

margin-bottom: 0;
}
/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
padding: 15px 0;
text-align: center;
}
.clients img {
max-width: 45%;
transition: all 0.4s ease-in-out;
padding: 15px 0;
filter: grayscale(100);
}
.clients img:hover {
filter: none;
transform: scale(1.15);
}

.clients img {
max-width: 40%;
}
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
padding: 30px;
border-radius: 6px;
37
}
.services .icon-box i {
float: left;
color: #d9232d;
font-size: 40px;
}
.services .icon-box h4 {
margin-left: 70px;
font-weight: 700;
font-size: 18px;
}
.services .icon-box h4 a {
color: #556270;
transition: 0.3s;
}
.services .icon-box p {
margin-left: 70px;
line-height: 24px;
font-size: 14px;
}
.services .icon-box:hover h4 a {
color: #d9232d;
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
}
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 20px auto;
list-style: none;
text-align: center;
}
38
.portfolio #portfolio-flters li {
cursor: pointer;
padding: 8px 15px 10px 15px;
font-size: 14px;
font-weight: 600;
line-height: 1;
color: #444444;
margin-bottom: 5px;
border-radius: 3px;
}
.portfolio #portfolio-flters li:hover,

.portfolio #portfolio-flters li.filter-active {
color: #fff;
}
.portfolio #portfolio-flters li:last-child {

margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio .portfolio-wrap::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
}
39
.portfolio .portfolio-wrap img {
}
.portfolio .portfolio-wrap .portfolio-info {

opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
}
.portfolio .portfolio-wrap .portfolio-info h4 {

font-size: 20px;
color: #fff;
font-weight: 600;
}
.portfolio .portfolio-wrap .portfolio-info p {

color: rgba(255, 255, 255, 0.7);
font-size: 14px;
padding: 0;
margin: 0;
font-style: italic;
}
.portfolio .portfolio-wrap .portfolio-links {

text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {

color: rgba(255, 255, 255, 0.6);
margin: 0 5px 0 0;
40
font-size: 28px;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {

color: white;
}
.portfolio .portfolio-wrap:hover::before {
opacity: 1;
}
.portfolio .portfolio-wrap:hover img {

}
.portfolio .portfolio-wrap:hover .portfolio-info {

opacity: 1;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {

width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {

margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {

width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #d9232d;
}
41
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #d9232d;
}
.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(85, 98, 112, 0.08);
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li+li {

margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
}
.portfolio-details .portfolio-description p {
padding: 0;
}
/*--------------------------------------------------------------
# Our Team
42
--------------------------------------------------------------*/
.team .member {
position: relative;
padding: 30px;
border-radius: 4px;
background: white;
}
.team .member .pic {

overflow: hidden;
width: 140px;
border-radius: 4px;
}
.team .member .pic img {

transition: ease-in-out 0.3s;
}
.team .member:hover img {

}
.team .member .member-info {

padding-left: 30px;
}
.team .member h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 20px;
color: #556270;
}
.team .member span {

display: block;
font-size: 15px;
position: relative;
font-weight: 500;
}
.team .member span::after {

content: "";
43
position: absolute;
display: block;
width: 50px;
height: 1px;
background: #dee2e6;
bottom: 0;
left: 0;
}
.team .member p {
margin: 10px 0 0 0;
font-size: 14px;
}
.team .member .social {

margin-top: 12px;
display: flex;
justify-content: flex-start;
}
.team .member .social a {

transition: ease-in-out 0.3s;
display: flex;
border-radius: 4px;
width: 32px;
height: 32px;
background: #8795a4;
}
.team .member .social a i {

color: #fff;
font-size: 16px;
margin: 0 2px;
}
.team .member .social a:hover {

}
.team .member .social a+a {

margin-left: 8px;
44
}
/*--------------------------------------------------------------
# Our Skills
--------------------------------------------------------------*/
.skills .progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}
.skills .progress .skill {

padding: 10px 0;
margin: 0;
display: block;
font-weight: 600;
color: #556270;
}
.skills .progress .skill .val {

float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: #edeff1;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;
background-color: #6b7b8d;
}
/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features {
overflow: hidden;
}
45
.features .nav-tabs {
border: 0;
}
.features .nav-link {
border: 0;
padding: 12px 15px 12px 0;
transition: 0.3s;
color: #556270;
border-radius: 0;
border-right: 2px solid white;
font-weight: 600;
font-size: 15px;
}
.features .nav-link:hover {
color: #d9232d;
}
.features .nav-link.active {
color: #d9232d;
border-color: #d9232d;
}
.features .tab-pane.active {
-webkit-animation: fadeIn 0.5s ease-out;
animation: fadeIn 0.5s ease-out;
}
.features .details h3 {
font-size: 26px;
font-weight: 600;
color: #556270;
}
.features .details p {
color: #777777;
}
.features .details p:last-child {

margin-bottom: 0;
}
46
.features .nav-link {
border: 0;
padding: 15px;
}
.features .nav-link.active {
color: #fff;
}
}
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
padding: 20px;
background: #fff;
text-align: center;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.pricing h3 {
font-weight: 400;
margin: -20px -20px 20px -20px;
padding: 20px 15px;
font-size: 16px;
font-weight: 600;
color: #777777;
background: #f8f8f8;
}
.pricing h4 {
font-size: 36px;
color: #d9232d;
font-weight: 600;
}
47
.pricing h4 sup {
font-size: 20px;
top: -15px;
left: -3px;
}
.pricing h4 span {
color: #bababa;
font-size: 16px;
font-weight: 300;
}
.pricing ul {
padding: 0;
list-style: none;
color: #444444;
text-align: center;
line-height: 20px;
font-size: 14px;
}
.pricing ul li {
}
.pricing ul i {
color: #d9232d;
font-size: 18px;
padding-right: 4px;
}
.pricing ul .na {
color: #ccc;
text-decoration: line-through;
}
.pricing .btn-wrap {
margin: 20px -20px -20px -20px;
padding: 20px 15px;
background: #f8f8f8;
text-align: center;
}
.pricing .btn-buy {
48
padding: 8px 35px 9px 35px;
border-radius: 4px;
color: #fff;
transition: none;
font-size: 14px;
font-weight: 400;
font-weight: 600;
transition: 0.3s;
}
.pricing .btn-buy:hover {
}
.pricing .featured h3 {
color: #fff;
}
.pricing .advanced {
width: 200px;
position: absolute;
top: 18px;
right: -68px;
transform: rotate(45deg);
z-index: 1;
font-size: 14px;
padding: 1px 0 3px 0;
color: #fff;
}
/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
.faq .faq-item {
margin: 20px 0;
padding: 20px 0;
border-bottom: 1px solid white;
}
49
.faq .faq-item i {
color: #dee2e6;
font-size: 20px;
float: left;
line-height: 0;
padding: 13px 0 0 0;
margin: 0;
}
.faq .faq-item h4 {
font-size: 16px;
line-height: 26px;
font-weight: 500;
margin: 0 0 10px 28px;
}
.faq .faq-item p {
font-size: 15px;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
box-sizing: content-box;
padding: 40px;
position: relative;
background: #fff;
}
.testimonials .testimonial-item .testimonial-img {

width: 90px;
border: 6px solid #fff;
float: left;
margin: 0 10px 0 0;
}
50
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
}
.testimonials .testimonial-item .quote-icon-left,

.testimonials .testimonial-item .quote-icon-right {
color: #f8d1d3;
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {

left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {

right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 15px 0 0 0;
padding: 0;
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
width: 100%;
51
background: #fff;
}
.contact .info i {
font-size: 20px;
color: #556270;
float: left;
width: 44px;
height: 44px;
background: #edeff1;
display: flex;
}
.contact .info h4 {
padding: 0 0 0 60px;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
color: #556270;
}
.contact .info p {
padding: 0 0 0 60px;
margin-bottom: 0;
font-size: 14px;
color: #8795a4;
}
.contact .info .email,

.contact .info .phone {
margin-top: 40px;
}
.contact .info .email:hover i,

.contact .info .address:hover i,
.contact .info .phone:hover i {
background: #556270;
color: #fff;
}
52
.contact .php-email-form {
width: 100%;
background: #fff;
}
.contact .php-email-form .form-group {

}
.contact .php-email-form .error-message {

display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .error-message br+br {

margin-top: 25px;
}
.contact .php-email-form .sent-message {

display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .loading {

display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.contact .php-email-form .loading:before {

content: "";
border-radius: 50%;
width: 24px;
height: 24px;
53
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input,

.contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
border-radius: 4px;
}
.contact .php-email-form input:focus,

.contact .php-email-form textarea:focus {
border-color: #d9232d;
}
.contact .php-email-form input {

height: 44px;
}
.contact .php-email-form textarea {

padding: 10px 12px;
}
.contact .php-email-form button[type=submit] {

border: 0;
padding: 10px 24px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
}
.contact .php-email-form button[type=submit]:hover {

background: #e24d55;
}
@-webkit-keyframes animate-loading {
0% {
54
}
100% {
}
}
@keyframes animate-loading {
0% {
}
100% {
}
}
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
}
.blog .entry {
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .entry .entry-img {

max-height: 440px;
margin: -30px -30px 20px -30px;
overflow: hidden;
}
.blog .entry .entry-title {

font-size: 28px;
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
.blog .entry .entry-title a {
55
color: #556270;
transition: 0.3s;
}
.blog .entry .entry-title a:hover {

color: #d9232d;
}
.blog .entry .entry-meta {

color: #c1c8d0;
}
.blog .entry .entry-meta ul {

display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.blog .entry .entry-meta ul li+li {

padding-left: 20px;
}
.blog .entry .entry-meta i {

font-size: 16px;
margin-right: 8px;
line-height: 0;
}
.blog .entry .entry-meta a {

color: #777777;
font-size: 14px;
line-height: 1;
}
.blog .entry .entry-content p {

line-height: 24px;
}
.blog .entry .entry-content .read-more {
56
-moz-text-align-last: right;
text-align-last: right;
}
.blog .entry .entry-content .read-more a {

color: #fff;
padding: 6px 20px;
transition: 0.3s;
font-size: 14px;
border-radius: 4px;
}
.blog .entry .entry-content .read-more a:hover {

}
.blog .entry .entry-content h3 {

font-size: 22px;
margin-top: 30px;
font-weight: bold;
}
.blog .entry .entry-content blockquote {

overflow: hidden;
background-color: #fafafa;
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
}
.blog .entry .entry-content blockquote p {

color: #444444;
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
}
.blog .entry .entry-content blockquote::after {

content: "";
57
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #556270;
margin-top: 20px;
}
.blog .entry .entry-footer {

padding-top: 10px;
border-top: 1px solid #e6e6e6;
}
.blog .entry .entry-footer i {

color: #a4afba;
display: inline;
}
.blog .entry .entry-footer a {

color: #606f7e;
transition: 0.3s;
}
.blog .entry .entry-footer a:hover {

color: #d9232d;
}
.blog .entry .entry-footer .cats {

list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog .entry .entry-footer .cats li {

}
.blog .entry .entry-footer .tags {

list-style: none;
display: inline;
padding: 0;
58
font-size: 14px;
}
.blog .entry .entry-footer .tags li {

}
.blog .entry .entry-footer .tags li+li::before {

padding-right: 6px;
color: #6c757d;
content: ",";
}
.blog .entry .entry-footer .share {

font-size: 16px;
}
.blog .entry .entry-footer .share i {

padding-left: 5px;
}
.blog .entry-single {
}
.blog .blog-author {
padding: 20px;
}
.blog .blog-author img {

width: 120px;
margin-right: 20px;
}
.blog .blog-author h4 {
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: #556270;
}
59
.blog .blog-author .social-links {
margin: 0 10px 10px 0;
}
.blog .blog-author .social-links a {

color: rgba(85, 98, 112, 0.5);
margin-right: 5px;
}
.blog .blog-author p {
font-style: italic;
color: #b7b7b7;
}
.blog .blog-comments {
}
.blog .blog-comments .comments-count {

font-weight: bold;
}
.blog .blog-comments .comment {

margin-top: 30px;
position: relative;
}
.blog .blog-comments .comment .comment-img {

margin-right: 14px;
}
.blog .blog-comments .comment .comment-img img {

width: 60px;
}
.blog .blog-comments .comment h5 {

font-size: 16px;
margin-bottom: 2px;
}
.blog .blog-comments .comment h5 a {

font-weight: bold;
color: #444444;
transition: 0.3s;
60
}
.blog .blog-comments .comment h5 a:hover {

color: #d9232d;
}
.blog .blog-comments .comment h5 .reply {

padding-left: 10px;
color: #556270;
}
.blog .blog-comments .comment h5 .reply i {

font-size: 20px;
}
.blog .blog-comments .comment time {

display: block;
font-size: 14px;
color: #6b7b8d;
margin-bottom: 5px;
}
.blog .blog-comments .comment.comment-reply {

padding-left: 40px;
}
.blog .blog-comments .reply-form {

margin-top: 30px;
padding: 30px;
}
.blog .blog-comments .reply-form h4 {

font-weight: bold;
font-size: 22px;
}
.blog .blog-comments .reply-form p {

font-size: 14px;
}
.blog .blog-comments .reply-form input {

border-radius: 4px;
padding: 10px 10px;
61
font-size: 14px;
}
.blog .blog-comments .reply-form input:focus {

box-shadow: none;
border-color: #e9797f;
}
.blog .blog-comments .reply-form textarea {

border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form textarea:focus {

box-shadow: none;
border-color: #e9797f;
}
.blog .blog-comments .reply-form .form-group {

}
.blog .blog-comments .reply-form .btn-primary {

border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: #556270;
}
.blog .blog-comments .reply-form .btn-primary:hover {

background-color: #606f7e;
}
.blog .blog-pagination {
color: #8795a4;
}
.blog .blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
62
.blog .blog-pagination li {
margin: 0 5px;
transition: 0.3s;
}
.blog .blog-pagination li a {
color: #556270;
padding: 7px 16px;
display: flex;
}
.blog .blog-pagination li.active,

.blog .blog-pagination li:hover {
}
.blog .blog-pagination li.active a,

.blog .blog-pagination li:hover a {
color: #fff;
}
.blog .sidebar {
padding: 30px;
margin: 0 0 60px 20px;
}
.blog .sidebar .sidebar-title {

font-size: 20px;
font-weight: 700;
padding: 0 0 0 0;
margin: 0 0 15px 0;
color: #556270;
position: relative;
}
.blog .sidebar .sidebar-item {

}
.blog .sidebar .search-form form {
63
background: #fff;
border: 1px solid #ddd;
padding: 3px 10px;
position: relative;
}
.blog .sidebar .search-form form input[type=text] {

border: 0;
padding: 4px;
border-radius: 4px;
width: calc(100% - 40px);
}
.blog .sidebar .search-form form button {

position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 15px;
margin: -1px;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
}
.blog .sidebar .search-form form button i {

line-height: 0;
}
.blog .sidebar .search-form form button:hover {

background: #de323c;
}
.blog .sidebar .categories ul {

list-style: none;
padding: 0;
}
.blog .sidebar .categories ul li+li {
64
padding-top: 10px;
}
.blog .sidebar .categories ul a {

color: #556270;
transition: 0.3s;
}
.blog .sidebar .categories ul a:hover {

color: #d9232d;
}
.blog .sidebar .categories ul a span {

padding-left: 5px;
color: #aaaaaa;
font-size: 14px;
}
.blog .sidebar .recent-posts .post-item+.post-item {

margin-top: 15px;
}
.blog .sidebar .recent-posts img {

width: 80px;
float: left;
}
.blog .sidebar .recent-posts h4 {

font-size: 15px;
margin-left: 95px;
font-weight: bold;
}
.blog .sidebar .recent-posts h4 a {

color: #556270;
transition: 0.3s;
}
.blog .sidebar .recent-posts h4 a:hover {

color: #d9232d;
}
.blog .sidebar .recent-posts time {

display: block;
65
margin-left: 95px;
font-style: italic;
font-size: 14px;
color: #aaaaaa;
}
.blog .sidebar .tags {

margin-bottom: -10px;
}
.blog .sidebar .tags ul {

list-style: none;
padding: 0;
}
.blog .sidebar .tags ul li {

}
.blog .sidebar .tags ul a {

color: #96a2af;
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid white;
transition: 0.3s;
}
.blog .sidebar .tags ul a:hover {

color: #fff;
border: 1px solid #d9232d;
}
.blog .sidebar .tags ul a span {

padding-left: 5px;
color: #fbfbfc;
font-size: 14px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
66
#footer {
background: #4a5562;
padding: 0 0 30px 0;
color: #fff;
font-size: 14px;
}
#footer .footer-top {
background: #515d6a;
}
#footer .footer-top .footer-info {

}
#footer .footer-top .footer-info h3 {

font-size: 24px;
margin: 0 0 20px 0;
line-height: 1;
font-weight: 700;
}
#footer .footer-top .footer-info p {

font-size: 14px;
line-height: 24px;
margin-bottom: 0;
color: #fff;
}
#footer .footer-top .social-links a {

font-size: 18px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 4px;
text-align: center;
width: 36px;
height: 36px;
67
transition: 0.3s;
}
#footer .footer-top .social-links a:hover {

color: #fff;
}
#footer .footer-top h4 {
font-size: 16px;
font-weight: 600;
color: #fff;
position: relative;
}
#footer .footer-top .footer-links {

}
#footer .footer-top .footer-links ul {

list-style: none;
padding: 0;
margin: 0;
}
#footer .footer-top .footer-links ul i {

padding-right: 2px;
color: rgba(255, 255, 255, 0.6);
font-size: 18px;
line-height: 1;
}
#footer .footer-top .footer-links ul li {

padding: 10px 0;
display: flex;
}
#footer .footer-top .footer-links ul li:first-child {

padding-top: 0;
}
68
#footer .footer-top .footer-links ul a {
color: rgba(255, 255, 255, 0.6);
transition: 0.3s;
line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {

color: white;
}
#footer .footer-top .footer-newsletter form {

margin-top: 30px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px;
}
#footer .footer-top .footer-newsletter form input[type=email] {

border: 0;
padding: 4px;
width: calc(100% - 110px);
}
#footer .footer-top .footer-newsletter form input[type=submit] {

position: absolute;
top: 0;
right: -2px;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 20px 2px 20px;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
}
#footer .footer-top .footer-newsletter form input[type=submit]:hover {

}
69
#footer .copyright {
text-align: center;
padding-top: 30px;
}
#footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
}
#footer .credits a {
color: rgba(255, 255, 255, 0.6);
transition: 0.3s;
font-weight: 600;
}
#footer .credits a:hover {

color: white;
}
Code Source du fichier de style "article.css":

article {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

h1 {
font-size: 24px;
}

p {
font-size: 16px;
line-height: 1.5;
}

img {
max-width: 100%;
height: auto;
}
70
Conclusion
Tout d’abord, nous sommes très reconnaissant à tous ceux qui nous en permis de découvrir
cette université tant sur son histoire, ses locaux et son personnel, cela était une aventure
enrichissante.
Cette formation nous a donné l’occasion de partager nos expériences professionnelles avec
tous les participants et elle nous a permis d’enrichir nos connaissances, pour progresser dans
la programmation et la création des interfaces sur le web.
Par ailleurs une formation pareille au profit des cadres d’état est une bonne initiative cette
dernière peut être bénéfique pour le développement technique des entreprises étatiques.
Finalement nous tenons à remercier les organisateurs de cette formation et surtout nos
professeurs pour leurs collaborations.
71
 Bibliographie
1- www.univ-blida.dz
2- www.w3schools.com
3- Décret exécutif N°16-280 du 2 Safar 1438 correspondant au 2 novembre 2016 modifiant

et complétant le décret exécutif N°08-04 du 11 Moharram 1429 correspondant au 19 janvier
2008 portant statut particulier des fonctionnaires appartenant aux corps communs aux
institutions et administrations publiques.
4- Arrêté du 22 RabieEthani 1441 correspondant au 19 décembre 2019 fixant les modalités

d’organisation, la durée et le contenu des programmes de la formation préalable à la
promotion dans certains grades appartenant aux corps communs des institutions et
administrations publiques.
5- Décret exécutif n° 03-279 du 24 JoumadaEthania 1424 correspondant au 23 août

2003 fixant les missions et les règles particulières d'organisation et de fonctionnement de
l'université Journal n° 51 du 24 Août 2003.
72
 Annexe

33
73

74
75

Raport Modifier

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Raport Modifier

Transféré par

Droits d'auteur :

Formats disponibles

REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Rapport de Fin de Formation

Etablissement de Formation : Université Saad Dahlab Blida

Nos remerciements s’adressent à nos encadreurs " Cherifa Meharzi "

Figure 1 : Organigramme général de l’université de Blida01.............................9

Figure 2: Structure organisationnelle de la Faculté des sciences......................11

Figure 3: Structure organisationnelle du Département Informatique................12

1DécretexécutifN°16-280 du 2 Safar 1438 correspondant au 2 novembre 2016 modifiant et complétant le

La durée de la formation préalable à la promotion dans le grade assistant ingénieur de niveau 1 en

L'évaluation des connaissances s'effectue selonle principe du contrôle pédagogique continu et

La première partie du rapport se focalisera sur le lieu et l'environnementdu stage, soit

1-1-Création de l’université Saad Dahlab Blida 1

L’organisation a pour interlocuteur officiel et pour tutelle, le ministère de l’enseignement

Dans le domaine de la formation supérieureles missions fondamentales de l'université

1-2- Organisation administratif

Faculté des sciences Secrétaire général

Figure 1 : Organigramme général de l’université de

2-1- Créationde la facultédes sciences

La faculté est une unité d'enseignement et derecherche de l'université dans le domaine de la

2-2- Organisation administratif

............................ Les chefs des

................................... vice-doyen chargé

Figure 2: Structure organisationnelle du Faculté des sciences

3-1- Création du département

3-2- Organisation administratif

Chef du Département Informatique

Adjointe au chef du département

Service de suivi et Responsable du Service

Service de Formation Service de suivi des activités

Figure 3: Structure organisationnelle du Département d’Informatique

3-1- Objectif de la formation

a- Répondre aux changements urgents dans l'environnement de travail.

3-2- Matières de la formation

 Analyse et conception. Orienté Objet :

-Composite pattern, Strategy pattern, observer pattern, abstract

Les modules de la formation

1- Gestion base de données

 Chapitre 1 : préparation des bases de données

 Chapitre 1 : généralisation sur gestion de projet

 Application sites web concepts et principes fondanentaux

 Chapitre 1 : generalites

 Chapitre 1 : génitalité sur les système d’exploitation

Présentation de ministère de la sante

La direction des systèmes d'information et de l’informatique est la direction responsable

Année Dénomination Loi

1963 Ministère de la santé publique et de la population N°43

1964 Ministère de la santé publique et les anciens N°50

Tableau 1: Changements de dénomination du ministère de la santé à travers les années.

3. Rôle et objectifs du MS :

Organigramme du Ministère de la santé

Missions de la direction des d’information et de l’informatique (DSII) :

a) La sous-direction des systèmes d’information :

b) La sous-direction des réseaux :

Direction des systèmes

Sous-direction de Sous-direction des systèmes

Figure n°2 : Organigramme de la direction des systèmes d’information et de l’informatique

1-1-Création d’une page web

1. Concevoir un design moderne et épuré qui reflète l’institution

Le Contenu du Dossier "IMG":

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

Code Source de la page " sous tutelle.html":

</article>