Réalisation d'un site de vente véhicule

Par GUZEL Ayhan et Ezzahr Amine

Dossier GUZEL Ayhan

Sous la coordination de professeur d’ISN du lycée Lucie Aubrac :

CLAVERIE P.
 Pourquoi je choisi le projet : site de vente véhicule ?

Aujourd’hui la population aime de plus en plus les belles voitures :

C’est pour cela qu’en tant qu’ Élèves de terminale S nous avons mis en
place un site de location de voiture pour satisfaire les plaisirs de chacun.
Certes nous aimons l’informatique c’est pour cela que nous avons mis
plusieurs école d’informatique dans nos vœux et c’est grâce au langage
informatique étudié en cours que nous avons pu réussir la création de notre
site qui se nomme AyhanAmineAuto

 Quels sont nos objectifs ?

Notre objectif est de créer une interface simple avec une page d'accueil et
plusieurs pages avec des véhicules , puis des interactions possibles que
nous comptons développer avec la messagerie par mail.

 Comment allons-nous réaliser notre projet ?

Nous allons tout d'abord créer une page d'introduction qui sera visible dès
que quelqu'un se connecte sur le site . Elle sera codée en HTML avec
charset=<utf-8> car utf-8 contient presque toutes les caractères et les
symboles possibles dans le monde.
Nous nous concentrons sur les modèles les plus recherché et c’est pour
cela que nos modèles proposés sont des Mercedes et des Audi de dernière
génération.

 Comment avons-nous réparti nos tâches ?

GUZEL Ayhan: coder le site en HTML

Amine : faire des logos pour le site et correction des erreurs
Ce que nous avons fait ensemble : nous avons vu l'aspect du site ensemble
et le nom qu'il portera
Description du site :

Chez Ayhan Amine Auto nous aimons la perfection et nous sommes

pointilleux sur chaque détail car chaque détail compte c’est pour ça que
vos voiture préférée ne sont pas dans le désordre dans le site mais chaque
modèle a une rubrique qui lui est spécifique.

Une fois votre bonheur trouvé nous avons mis en place une messagerie en
ligne pour nous contacter afin d’ avoir des renseignements sur les prix pour
les locations puisque louer un jour dans la semaine ne reviendra pas au
même prix que louer le week end. Une fois tout ça vu avec notre équipe
vous aurez le plaisir de rouler dans la voiture de vos rêves.

Tâches Nombre de séances Noms

L’idée du site 1 séance Ayhan

État de l'art 1 séance Amine

Recherche sur les sites

dynamiques 2 séance Ayhan

Structure et organisation
du site 7 séances Ayhan et Amine

Corrections bugs 1 séance Amine

L’idée du site

Au début de l’année j’ai décidé de faire un jeu avec des codages html,css
et java scripte. Mais après je me suis dit que j’aime l’informatique sur tout
d’être un web master. Pour cela j’ai décidé de faire un site internet
basique.Il y a beaucoup des sites dans le domaine de vente et je me suis
dit que faire un site web de vente des véhicules est intéressante. Au début
de l’année j’ai pensé de utiliser data base, mysql avec sql admin mais a la
fin du projet je n’ai pas eu le temps de le faire.

État de l'art

Pour crée un site tout début je me suis dit que c’est bien de commencer
avec création des logos pour le site. J’ai trouvé un site gratuit pour crée des
logos ( https://fr.freelogodesign.org/index.html?lang=fr ).Sur le site on a
crée 2 logos de notre site.
Recherche sur les sites dynamiques

Pour avoir des idées plus claire sur la création d’un site web j’ai regardé
sur les autres sites web pour avoir des idées.Ex; LDLC, vaucluse.gouv.fr
immatriculation.ants.gouv.fr etc.
J’ai conclu que une page web est diviser en 3 parties (head,body et foot)
comme un humain (tête , corps et pieds) generalement dans head il y a les
informations principales comme logos , noms du site , slogan publicitaire
etc.
dans body les produits avec des inscriptions de ces produits et a la fin dans
foot il y a des petites informations comme moyens de paiement acceptés ,
nos services , retour un article , mentions légales , recrutement etc.
Structure et organisation du site

Pour la structure et organisation de mon site j’ai respecté les 3 parties que
j’ai raconté dans la recherche sur les sites dynamiques.

Dans la première temps j’ai réalisé de faire la page d’introduction car une
fois que je terminé la page d’introduction dans les autres pages head et
foot sera la même que la page d’introduction. J’ai changé juste body.

Au début vue les informations sur les autres sites j’ai crée des meta
informations (titre , auteur,etc.)qui va afficher sur informations sur la page.

D’après faire cela j’ai crée des dossiers document dans un document que je
vais mettre toutes mes informations sur mon projet. Les dossiers que j’ai
crée sont audio , image et vidéo . Les codes que je vais mettre sur le site va
chercher des document qu’il faut dans ces dossiers.
D’après faire cela j’ai choisir l’image d’arrière plan et j’ai crée tableau de
mon site et ce tableau j’ai mis dans body de la page et encore j’ai divisé en
2 parties (thead , tbody ).
Dans thead j’ai mis mes logos.

et j’ai divisé tbody en 3 colonnes avec <td>

Dans tbody tout début j’ai crée la liste de menu (page d’accueil , nos
véhicules etc.)
dans 2eme <td> j’ai mis les véhicules avec des informations + j’ai ajouté
des vidéos.
Et bien sur avant d’utiliser <td> j’utilise <tr> pour crée la ligne.
Et des fois j’ai utilisé <th> au lieu de <td> c’est juste pour mettre les
éléments en gras et centrés par défaut.

Et a la fin j’ai crée <tfoot> et j’ai mis le mail et l’adresse.

Et sur toutes les autres pages que j’ai crée j’ai utilisé la même structure j’ai
juste changé les informations dans <tbody>
Bilans et perspectives :

Ce que je proposerai pour améliorer mon projet : Création d’une barre de

recherche , ajouter les prix des véhicules puis réaliser un panier. Création
d’une page d’inscription et réaliser d’utilisation de mysql et php pour
enregistrer les informations des inscriptions puis enregistrer le panier.
Faire un site plus joli avec utilisation du css et java scripte pour ajouter des
animations des photos pour arrière plan.
Malgré que notre emploi du temps chargé je n’ai pas pu améliorer mon
projet et réaliser toutes mes idées.

Lien et site utiliser pour le projet ;

https://www.w3schools.com/ (les codes html)

https://www.youtube.com/watch?v=z1KDrCFz1QM (exemple de création

d’un site web)

https://www.ldlc.com/
http://www.vaucluse.gouv.fr/
http://www.audi.fr/fr/web/fr.html
(des sites pour avoir des idées)

Nous vous remercions d'avoir enrichi nos connaissances et de nous avoir

guidé durant toute cette année a M.CLAVERIE P.
Source de la page d’accueil

<!-- Déclaration du type de document -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AyhanAmine Auto Vente de Voiture - Acceuil</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta NAME="Auteur" CONTENT="GUZEL Ayhan">
<meta NAME="Description" CONTENT="Site de vente de véhicules">
<meta NAME="Categorie" CONTENT="Commerce">
<meta NAME="Contenu-Type" content="text/html">
<meta NAME="Language" CONTENT="fr">
<meta NAME="Contact" CONTENT="ayhanamineauto@hotmail.fr">
<!-- Meta informations (titre, auteur, etc.) -->
</head>
<body background="image/unbldgbkgd.jpg">
<table border=0 width=80% align="center" style="background-color:white;">
<thead> <!--t tableau -->
<tr align="top"> <!-- tr pour faire definir une ligne-->
<th width="20%" align=left><img src="image/banniere_logo.jpg"
align=center width="100%"></img></th>
<th align="center" width="60%"><a href="introduction.html"><img
src="image/banniere_un.jpg" width="35%"></img></a></th>
<th width="20%" align=right><img src="image/logo.png"
align=center width="60%"></img></th>
<!--faire des cellules th pour header information(Les éléments sont
en gras et centrés par défaut.)et td pour standard cellules-->
</tr>
</thead>
<tbody>
<hr align=center width="80%"></hr> <!--faire des droites-->
<td valign=top> <!--valign vertical alignement-->
<p>

<ul> <!-- ul pour faire des ordres e list et li pour definir le list-->
<li><a href="introduction.html"><font face="Arial Black"
target="blank" size="4pt" color="black">Page d'accueil</font></a></li>

<li><font face="Arial Black" size="4pt" color="red">Nos

véhicules</font></li>
<blockquote>
<li><font face="impact" size="3pt" color="black"><a
href="mercedes.html">Mercedes</a></font></li>

<li><font face="impact" target="blank" size="3pt"

color="black"><a href="audi.html">Audi</a></font></li> <!--blank pour ouvrire sur une autres fenetre-->
</blockquote>
<li><font face="Arial Black" target="blank" size="4pt"
color="black"><a href="contact.html">Contact</a></font></li>
</ul>
 </p>
</td>
<td>
<hr align=center width="80%"></hr>

<font face="impact" size="6pt"><p align="center">Bienvenue chez AyhanAmine Auto , vendeur

professionnel de véhicule haut de gamme . Découvrez en exlusivité les nouveaux arrivages !</p></font>

<hr align=center width="80%"></hr>

<p>
<hr align=center width="100%"></hr>
<table>

<tr>
<th><img
src="image/audiacceuil.jpg" align=center style="max-width:100%;height:auto;"></img>
<p align=center><font
face="Garamond" size="3pt">Le design de cette 2e génération est plus sculptural, plus athlétique. Calandre
Singleframe 3D, conduite surélevée et design sculptural… l’Audi Q7 réinterprète les codes du
SUV dans un style plus
contemporain. Plus précis pour le conducteur, moins gênant pour les autres automobilistes, les phares Audi
Matrix LED améliorent la visibilité et la sécurité
sur la route en adaptant
automatiquement le faisceau lumineux. À l’arrière, l’Audi Q7 est dotée de phares intégralement à LED et de
clignotants dynamiques (en option).
L’allure athlétique de l’Audi Q7 est
pleine de promesses. Mais pas seulement. Équipée de série de la transmission intégrale permanente quattro,
l’Audi Q7 est prête à s’affranchir de la
route. Avec la technologie quattro, la
puissance est répartie de manière variable sur les deux essieux. Le résultat ? Une motricité, un dynamisme et
une précision inégalés quelles que soient
les conditions.<a
href="http://www.audi.fr/fr/web/fr/gamme/q7/q7.html"> En savoir plus.</a> (site d'origine de l'image)
</font></p>

</th>
</tr>

<tr>
<th>
<hr align=center width="100%">
<img
src="image/mercedesacceuil.jpg" align=center style="max-width:100%;height:auto;"></img>
<p align=center><font
face="Garamond" size="3pt">Dans l'habitacle raffiné et spacieux du GLC, vous profitez à chaque trajet d'un
niveau de confort inédit. Parmi ces éléments de bien-être figurent avant tout la position d'assise élevée propre
aux SUV, mais aussi des fonctions
confort bien pensées grâce
auxquelles vous aborderez chaque terrain avec décontraction. Le compartiment de chargement du GLC est
l'un des plus spacieux du segment et permet, grâce aux dossiers arrière rabattables de manière flexible,
de transporter un grand volume de
bagages, mais aussi un équipement encombrant.L'attrait irrésistible des modèles tout-terrain conjugué à des
performances sur route sans compromis : avec une Mercedes-AMG, nous prenons un engagement.
Celui de toujours progresser afin de
réaliser tout ce qui est techniquement possible de manière inimitable. Pour des expériences de conduite
riches en émotions et terriblement impressionnantes.
<a href="https://www.mercedes-
benz.fr/passengercars/mercedes-benz-cars/models/glc/glc-suv/explore/comfort.module.html">En savoir
plus .</a>(site d'origine de l'image)</font></p>
</th>
</tr>
<tr>
<th>
<hr align=center width="100%">
<video width="600" height="300"
controls>
<source src="video/q7.mp4"
type="video/mp4">
</source>
</video>
</th>
</tr>
<tr>
<th>
<hr align=center width="100%">

<embed width="600" height="300"

src="https://www.youtube.com/embed/5ds1PKtJPhs?ecver=1" frameborder="0">

</embed> <!--tag définit un

conteneur pour une application externe-->

<hr align=center width="100%">

</th>
</tr>
<tr>
<th>
<audio controls> <!--audio controls
est pour mettre play pause changer volume-->
<source src="audio/moteur.mp3"
type="audio/mpeg">
</audio>
<hr align=center
width="100%"></hr>
</th>
</tr>
</table>
</p>
</td>
<td>
</td>
</tbody>
<tfoot>
<td>
</td>
<td>
<p align="center"><a
href="mailto:ayhanamineauto@hotmail.fr">ayhanamineauto@hotmail.fr</a></p>
<p align="center">Résidence le beausite , Bollène</p>
<p align="center"> FRANCE</p></td>
<td>
</td>

</tfoot>
 </table>
</body>
<hr width="100%" align=center></hr>
</html>