# Compte rendu site web Adrien NUSS

Bonjour Madame, je voulais vous prévenir que lorsque j'ai réalisé le compte rendu aucune photo ou capture ne s'introduisait dans le document. J'ais systématiquement le message: "Upload too fast, please try again later: Capture..."
Après de nombreux essais il semblerait que ça marche, si vous n'arrivez pas à lire les images n'hésitez pas a me contacter.

# Partie 1 : Définition du projet

1) Le site web devait se composer de cinq pages, par votre permission, seule la page d’accueil à été finalisée. Néanmoins quatre autres pages devaient succéder : une page décrivant l’établissement, une autre destinée au collège, une autre au lycée et une dernière qui devait renseigner la localité et les contacts de l’établissement.
'''
<div id="button"><a class="button" href="#">Acceuil</a> </div>
<div id="button_2"><a class="button" href="#">L'établissement</a> </div>
<div id="button_3"><a class="button" href="#">Le collège</a> </div>
<div id="button_4"><a class="button" href="#">Le lycée</a> </div>
<div id="button_5"><a class="button" href="#">Nous contacter, accès au sites</a> </div>
'''

2) J’ai pris l’initiative sur mon site web de faire quelque chose de très compréhensible et facile à comprendre, j’ai donc mis en évidence le titre (H1) « collèges lycée Notre-Dame-de-la-providence ». J’ai également placé des titre (H2) dans mes paragraphes expliquant l’histoire de l’école.

Mon texte:
- L'histoire de l'école:
L'école Notre Dame de la Providence d'Enghien Les Bains à été créée en 1903. C'est l'Abbé Simonin qui créa seulement pour les garçons une école d'enseignement libre. La premire année scolaire à eu lieux sur les années 1903 et 1904 avec 27 éleves.
- Petite présentation:
Le lycée collège Notre Dame de la providence se situe sur la commune d'Enghien les Bains et acceuille chaque jours 1600 éleves.
L'histoire de l'école:
- 31e meilleur lycée de France
- Ecole ECO-LABEL

Titre:

'''
<h1><strong>COLLEGE LYCEE NOTRE-DAME-DE-LA-PROVIDENCE</strong></h1>
'''
'''
<h3>Petite présentation:</h3>
'''
Capture titre:


3)


# Partie 2 : Bases de la conception

1) Un header dans une page HTML représente le contenu d’introduction, généralement un ensemble de contenu d’introduction ou de navigation. Il peut contenir un élément de titre, ainsi que d’autres éléments tels qu’un logo, un formulaire de recherche, un nom d’auteur…

2) Un footer en HTML représente le pied de page de la section ou racine de section la plus proche. L’élément « footer » contient généralement des informations sur l’auteur de la section, des données de copyright ou un lien vers une autre documentation connexe.
3) Une balise « nav » en HTML représente une section d'une page qui contient des liens vers d'autres pages ou des fragments de cette page. En d'autres termes, c'est la section utilisée pour naviguer dans le document (avec menus, table des matières, index, etc.).
4) La plus grande différence entre les éléments div et span est ce qu'ils peuvent contenir : un élément div pourra contenir plusieurs éléments et agira donc comme un conteneur d'éléments, tandis qu'un élément span agira comme un conteneur pour une partie d'un élément. Il sera donc utilisé à l'intérieur de l'élément.

# Partie 3 : Structure des pages HTML

1) La maquette a été créé sur Balsamiq cloud:


2)

Exemple de l'utilisation de ces différentes balises:

'''
<div id="img_lycée"> <img width="250" height="250"src="lycée.JPG"> </div>
<div id="img_collège"> <img width="250" height="250"src="images_3e.JPG"> </div>
<div id="img_collège_6e"> <img width="250" height="250"src="college_6e.JPG"> </div>
'''

'''
<span style="font-weight: bold">chaque jours 1600 éleves.</span>
<span style="font-weight: bold"> en 1903.</span>
'''

Capture:

*******autre balise

# Partie 4 : Démo (script)

1) Exemple de ma partie css:

'''
#bulle_conv {
position: relative;
top: -2050px;
left: 475px;
width: 300px;
background: DarkSlateGray;
padding: 30px;
text-align: center;
font-size: 35px;
border-radius: 35px;
color: white;
position: relative;
}

.speech:before {
content: "";
position: absolute;
border-left: 20px solid DarkSlateGray;
border-right: 20px solid transparent;
border-top: 20px solid DarkSlateGray;
border-bottom: 20px solid transparent;
right: -20px;
top: 10px;
}

#eco_diplome {
position: relative;
top: -1950px;
left: 900px;
}

#bulle_texte {
position: relative;
top: -2625px;
left: 45px;
width: 100px;
background: Navy;
padding: 30px;
text-align: center;
font-size: 35px;
border-radius: 35px;
color: white;
position: relative;
}

'''

Capture css:


# Partie 5 : Démo (script)

1) Bonjour, aujourd’hui je vais vous présenter mon projet : la réalisation du site web de l’école Notre Dame de la Providence d’Enghien les bains. Tout d’abord je vais vous parler de mes choix de conception. J’ai pris l’initiative de faire un menu a l’horizontal car de mon point de vue c’est la façon la plus claire et simple de le comprendre ; c’est également le choix d’un grand nombre d’autres enseignes. Je vais maintenant vous parler des différentes pages : suite a notre conversation et donc a votre décision j’ai donc réalisé seulement la page d’accueil, les boutons afférant aux autres pages ne sont donc pas fonctionnels mais sont disposés à leurs places pour qu’en cas de finalisation totale du site, aucune modification visuelle n’ait lieu. Les boutons sont donc disposés en ligne et lorsqu’on déplace le curseur sur l’un d’eux, un léger changement de couleur a lieu, pour ajouter plus de style. Concernant le bas de la page d’accueil j’ai décidé de regrouper les éléments les plus importants qui décrivent au mieux l’établissement. Pour renforcer le côté connecté de l’école, un smartphone a été placé en bas a droite de la page avec une illustration d’école directe, un bouton intitulé école directe à été positionné sur le bas du téléphone, c’est un lien, si on clique dessus cela ouvre un nouvel onglet école directe. J’ai décidé grâce a la balise « span » de mettre en surbrillance certains éléments importants. Concernant les difficultés que j’ai rencontrées : au début j’ai eu du mal a bien positionner ou je voulais les différents éléments, j’ai solutionné le problème en introduisant les éléments dans des balises « div ». J’ai également eu du mal avec les boutons qui mènent aux autres pages, je me suis donc aidé d’un générateur pour que les boutons soient parfaitement comme je le voulais. Concernant les sources d’inspirations, je me suis donc servi de la documentation python, c’est notamment là où je me suis resourcé pour les définitions sur le compte rendu HackMd, j’ai également regardé certaines vidés YouTube comme celle du youtubeur Buildex comment créer un bouton en html et css. J’ai utilisé certains autres sites comme openclassroom, firefoxinformatique pour régler mes problèmes quand je n’arrivais pas certaines choses.

# Lien de ma vidéo

https://www.loom.com/share/cb3758bb6ff44595bfc19e0a863d94fd