# Projet site web Notre-Dame de la Providence ## Partie 1: ## Définitions du projet Mon site est constitué d’une page d’accueil suivit d'une page concernant l'histoire de l'établissement, en savoir + sur "être élève à notre dame" et contact de l'établissement. ### Page d'accueil : Bienvenue sur le site du Collège Lycée Notre Dame Providence D'Enghien-les-bains Notre Dame Providence est un établissement secondaire qui réuni à la fois un collège et un lycée au 9 boulevard Sadi Carnot 95880 Enghien-les-Bains. ### Histoire de l'établissement : Au début du siècle, l'Abbé Simonin créa pour les garçons, une école d'enseignement libre : l'institution St Joseph qui se transforma le 15 mars 1903, grâce à un groupe de personnalités d'Enghien, en un établissement d'enseignement privé, la Société d'Enseignement Moderne, présidée par Monsieur Maciet. Cette société prit le nom d'Institution d'Enseignement Moderne et s'installa boulevard Sadi-Carnot où elle se trouve encore, Monsieur Laverhne, premier directeur laïc, ouvrit l'année scolaire 1903/1904 avec 27 élèves. En 1907, il est remplacé par des religieux qui assurent la bonne marche de l'établissement jusqu'en 1975, date à laquelle la Direction redevient laïque. Pendant la première guerre mondiale, l'école se replia dans un vieil immeuble de la Grande Rue, l'Hôtel Naudin, ses bâtiments boulevard Sadi-Carnot abritant l'hôpital militaire n° 128. L'école ne réintégra ses locaux qu'après la guerre. Depuis 1973, la présidence de l'A.N.D.P a été assurée par Messieurs Hauser, Brut, Sueur, Brun, Pujol et Aubry ; elle est actuellement confiée à Monsieur Guérin. En 1975, l'établissement est à nouveau dirigé par un laïc, Monsieur Garcia, qui laissera sa place en 1979 à Monsieur Dabo. Pendant la période directoriale de Monsieur Dabo (1979-1990) l'effectif ne cesse de croître pour atteindre environ 1300 élèves, celui d'aujourd'hui dépassant les 1500. La vétusté de la chapelle, les besoins de locaux de restauration pour demi-pensionnaires et la nécessité d'avoir un gymnase, feront que dans les années 80, une nouvelle chapelle sera construite sur l'emplacement de l'ancienne, avec au sous-sol un restaurant scolaire et à proximité, un grand gymnase ; l'inauguration eut lieu en 1984. L'établissement s'agrandit encore avec l'achat d'un pavillon situé rue Félix Faure : ce nouvel ensemble dont la surface a été doublée en 2000 ainsi qu'un autre pavillon voisin récemment acquis permettent de mieux accueillir les élèves de 6ème - 5ème - 4ème boulevard Sadi Carnot, tandis que le lycée, agrandi et rénové, reste rue de Malleville, à proximité des bâtiments réservés aux Classes de 3è. En 2005, la chapelle est a nouveau modifiée : un espace en hauteur est créé et devient la nouvelle chapelle. L'espace en dessous est transformé en salle polyvalente, servant à la fois de salle d'étude, de conférence ou de spectacle. Les tables de cette salle, appelée Espace Notre-Dame, ont été fabriquées à partir des bancs de l'ancienne chapelle. En mai 2007, le gymnase construit en 1983 est détruit par un incendie. Après plusieurs projets, la construction d'un gymnase entérré permettant l'agrandissement de la cour débute et est inauguré en septembre 2011. Après le départ de Monsieur Dabo, se succèdent Monsieur Boukandoura (1990-1991) et Madame Loussert (1991-1993), puis Monsieur SAVRE (1993-2009) et Monsieur GOUILLY (2009-2013). Monsieur RONSMANS est chef d'établissement depuis septembre 2013. ### Etre élève à Notre Dame de La Providence Dans cet établissement les élèves sont formés par les professeurs qui les forment bien pour la vie future, notamment on les préparent bien au examen comme le brevet et bac dès la 6ème en organisant des DS (devoirs surveillés) où les élèves font des contrôles comme s’ils étaient en examen une fois toutes les semaines. Les elèves participent aussi au tri grâce aux éco délégués. ### Images utilisées :        ### Structures utilisées : ├── BOUHALLI_Nassim_Site_Web_NDP │ ├── accueil.html │ ├── histoire de l'établissement.html │ ├── être élève.html │ ├── IMG │ └── CSS ## Partie 2 : 1.L'élément HTML header représente du contenu introductif, généralement 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, le nom d'auteur, etc. 2.Le footer indique la fin d'une page Web. Son apparition implique que l'utilisateur ne peut pas faire défiler plus bas et qu'il n'y a plus de contenu à visualiser. Les utilisateurs qui font défiler jusqu'au footer sont souvent à la recherche de contenu supplémentaire. 3.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.La différence entre les balises "span" et "div" est que les spans sont principalement utilisés pour associer des styles à des parties de texte, tandis que les divs sont utilisés pour organiser le contenu d'une page. ### Maquette : Voici ma maquette sous forme de power point : ***C:\Users\33660\Downloads\maquette nass (2).pptx*** ### Présentation vidéo : Enfin, voici la vidéo explicative du site web : C:\Users\33660\Downloads\VIDEO NSI.mp4 ### Script de la vidéo : Bonjour, aujourd’hui je vais vous présenter mon site web sur Notre dame de la providence située à enghien les bains. Pour commencer j’ai décidé d’opter pour un menu de navigation pour que ça sois assez ergonomique pour l’utilisateur c’est à dire simple a l’utilisation. Concernant les pages, elles sont liées entre elles grâce a la balise « a » qui fait un lien entre 2 pages. J’ai mis ces pages car je me suis mis à la place d’une personne cherchant le site notre dame et j’ai cherché à savoir ce qu’intéresserait l’utilisateur etc… Concernant mes difficultés j’ai eu du mal à faire un dégrader de couleur pour la présentation mais grâce a l’outil linéaire graduant j’ai réussi à le faire. et également pour que le fond se mette sur toute la page j’ai du faire des retours à la ligne pour qu’il n’y ai pas de coupure avec le fond en bleu Concernant un site que j’ai utilisé, il y’a le site htmlcolorcodes.com pour les codes couleurs hexadecimal BONUS C’est la fin de la vidéo merci de votre visionage !