# Projet Web

:::success
**Réalisation :** Mise en place d'un site présentant le lycée Notre Dame
:::

## Partie 1 : Présentation du site web
1. Page D'accueil
:::info
Situé au 9 Bd Sadi Carnot, 95880 Enghien-les-Bains dans le département du val d'Oise, nous accueillons vos enfants dès la 6 -ème jusqu'à la terminale afin de leur apporterune éducation ainsi qu'un accompagnement pédagogique de qualité grâce à notre équipe composée d'enseignants professionnels et de renom ! .. Tout est fait pour que votre enfant se sente bien et qu'il évolue dans notre environnement accueillant et chalereux.
:::
:::info
Un emploi du temps variable est mis en place et approfondi par nos équipes afin de faciliter et favoriser la qualité de travail de nos étudiants, des casiers sont mis a disposition dans les classes afin de leur apprendre dès le plus jeune age l'organisation et l'autonomie. Au collège, les professeurs documentalistes travaillent seuls ou en collaboration, selon des projets pédagogiques. Tout est modifiable et variable, et c'est ce qui fait notre force, avec nous aucune routine, nous laissons place qu'a la nouveauté .
:::

2. Page Collège

:::info
Au collège, dès la 6ème nous insistons sur la qualité et l'environnement de nos étudiants afin de les accompagner tout au long de l'année. Une équipe d'enseignants professionels et assidus est de mise, chaque matière a son professeur !
:::
:::info
Un CDI est présent et les apprentissages info-documentaires dispensés dans celui-ci participent d'un développement de la culture informationnelle des élèves. Les activités organisées portent sur différents axes : des apprentissages info-documentaires, l'éducation aux médias et à l'information, la promotion de la lecture et l'ouverture culturelle. Les ressources sont disponibles via différents supports : imprimé (livres de fictionm documentaires et revues), et numérique (plateformes sons, DVD et sites Web). Ils sont majoritairement équipés de vidéoprojecteurs, d'enceintes, de tableaux blancs interactifs et de salles multimédia permettant de dispenser les formations info-com-documentaires.
:::

3. Page Lycée

:::info
Le passage au lycée etant important nous nous devons d'accompagner et de guider nos élèves. En effet, l'année de seconde est une année fatidique pour le choix d'orientation et le choix parmi nos multitudes de specialtés est difficile. Cette harmonie de specialité laisse libre cours au choix de votre enfant (trois disciplines en classe de première puis deux en terminale parmi les trois suivies en première).
:::
:::info
Ces disciplines bénéficient d'horaires significatifs permettant de proposer des programmes ambitieux et de donner du temps aux élèves pour les apprentissages. Tout ce processus de formation instruient votre enfant et le prépare a sa future vie profesionnelle afin que celle-ci se passe pour le mieux grace a nos équipes très professionnelles ainsi que tout les moyens que nous mettons en place pour favoriser ce processus.
:::

Images :


La structure du projet sera :
:::warning
├── MEBAREK_Bedis_Site_NDP --> répertoire
│ ├── accueil.html --> fichier HTML
│ ├── lycee.html --> fichier HTML
│ ├── college.html --> fichier HTML
│ ├── IMG --> répertoire contentant les images
│ └── CSS --> répertoire contenant les feuilles de style
:::

## Partie 2 : Bases de la conception
1. *Header* (page HTML) : L'élément HTML <header> représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.
2. *Footer* : Sur le plan technique, le footer correspond à une balise HTML (footer), commune à tout le site, qui contient les éléments qui doivent s'y trouver (bas de page d’un site web).
3. *Balise Nav* : L'élément HTML <nav> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).
4. Quelle est la différence entre la balise span et la balise div : Cette différence est due au fait que les éléments div et span sont de niveau ou au « type » différents : l'élément div est un élément de niveau block tandis que l'élément span est un élément de niveau inline.

## Partie 3 : Structure des pages HTML


## Partie 4 : Code source du site

https://github.com/BedisMBK/MEBAREK_Bedis_Site_NDP

## Partie 5

## Apprentissages

J'ai appris à utiliser de manière dissocier le CSS du HTML car j’avais du mal avant maintenant je suis plus à l’aise et je comprends mieux les documentations que je trouve sur internet.

J'ai appris à faire une barre de navigation, au début je n’arrivais pas à faire en sorte que celle-ci apparaisse tout au long de l’exploration mais je me suis rendu compte qu'avec la propriété sticky je pouvais la garder toujours en haut.

## Difficultés

J'avais des problèmes pour les différentes images car j’avais des propriétés différentes pour certaines et pour d'autres et pour régler ce problème j'ai utilisé les identifiants.
J'ai aussi eu des problèmes pour corrèctement positionner les images avec le texte, il m'a fallu beaucoup chercher pour utiliser les propriétés de style appropriées.

## SCRIPT

Bonjour je m'appelle Mebarek Bedis et aujourd'hui je vais vous présenter le site que j'ai réalisé pour Notre-Dame de la providence.

Je vais commencer par faire la présentation de la page d'accueil qui introduit l'établissement et le situe pour ensuite mettre en évidence le collège et les différentes activités qu'on peut faire et pour finir le lycée qui constituent une étape importante dans la scolarité mais aussi dans la vie du lycéen

Tout d’abord j’ai voulu opter pour un menu latéral car ce bouton n'oblige pas les visiteurs à parcourir tout le contenu dans l'ordre pour accéder aux pages de leur choix. Sur le menu latéral, les informations sont bien ordonnées ce qui permet à l'utilisateur de trouver ce qu'il recherche facilement.

Comme vous pouvez le voir j’ai choisi des couleurs claires et reposantes pour les yeux des visiteurs afin de ne pas les agresser lors de leur visite et je trouve que cela apporte une certaine homogénéité a la structure du site web. J’ai essayé au maximum de ne pas trop écrire afin de le convaincre dans mes propos et j’ai aussi tout fait afin de les guider dans leur exploration afin que celle-ci se passe pour le mieux et le plus simplement possible.

Le texte de la page d'accueil est orné par 3 images la cour, le lycée, ainsi que le bâtiment des 3èmes. Celui-ci sait déjà où est ce que se situe l'établissement et peut avoir un a priori de l'environnement dans lequel va évoluer son enfant et le parent est directement mis en confiance par la qualité de nos équipes éducatives ainsi que le re non de l'établissement ainsi que le milieu chaleureux et accompagnateur de Notre-Dame.

Pour la page de présentation du collège j’ai commencé par insister sur le fait que l'élève était accompagné dès la 6e et que celui-ci est bien entouré par l'équipe éducative comme nous pouvons le voir sur la photo mais aussi avec le CDI qui accueille les élèves pendant les heures de permanence, le temps de cantine, la récréation ou l'étude. Des ressources variées sont disponibles via différents supports papier (manuels scolaires, dictionnaires, encyclopédies) et numériques (CD-ROM, DVD, Internet). Mais si on s’intéresse à cela plus profondément le cdi a une place importante dans un établissement car il apparaît comme un environnement capacitant qui favorise le goût d'apprendre, révélateur de compétences. Par une pédagogie active, il permet aux élèves en difficulté de vivre des expériences positives et de modifier ainsi leur rapport au savoir.

Le lycée est un tournant important et il faut donc tout mettre en œuvre pour favoriser la réussite de nos élèves. Les enseignants les guident et tout est mis en place pour. Le cdi joue aussi un rôle important car ils accompagnent les étudiants en les aidant à choisir la spécialité abandonnée mais aussi à trouver de bonnes écoles pour leur études supérieures.

https://youtu.be/PGN-7dWMQV0

## Sites utiles

https://stackoverflow.com/
https://www.w3schools.com/
https://openclassrooms.com/