Créer un site Web de localisation de cafés : 9 étapes

2025 Auteur: John Day | [email protected]. Dernière modifié: 2025-01-23 14:46

Dans ce Instructable, je vais vous montrer comment créer un site Web simple affichant des cafés près de chez vous, à l'aide de Google Maps, HTML et CSS

Fournitures

Un ordinateur

Un éditeur de texte (j'utilise Atom)

Une connexion wifi

Étape 1: Choisissez un éditeur de texte

J'utilise Atom, qui peut être téléchargé ici. Une fois téléchargé, ouvrez-le, créez un nouveau projet

Étape 2: Créez votre nouveau projet

1. Atome ouvert
2. Trouver un fichier
3. Sous fichier cliquez sur nouveau
4. en bas à gauche (mac) il y aura un bouton pour créer un nouveau dossier
5. nommez votre dossier ''Carte du site web''
6. Appuyez sur ouvrir en bas à droite

Étape 3: créez votre index.html

1. Ajoutez un nouveau fichier dans votre dossier (Dans atome faites un clic droit sur le dossier et appuyez sur nouveau)
2. Nommez ce fichier 'Index.html'
3. Ajoutez cette structure HTML de base, elle est utilisée dans chaque projet HTML:

Étape 4: Obtenez votre carte

1. Visitez Google Maps ici: Google Maps
2. Recherche de café
3. vous devriez avoir tous les cafés de votre région
4. cliquez sur les trois lignes à côté de café
5. trouver partager ou intégrer une carte
6. sélectionnez incorporer la carte
7. Choisissez la taille de la carte (j'ai utilisé Large) et finalisez votre localisation
8. presse copie HTML

Étape 5: Ajouter au site Web

1. Retournez au fichier HTML.
2. entre les deux balises '' insérez ce code:

'

CAFÉS PRÈS DE CHEZ VOUS

« LE CODE INTÉGRÉ DE GOOGLE MAPS »

'

Étape 6: Aperçu

C'est la première partie faite !

enregistrez le fichier et trouvez-le sur votre ordinateur, double-cliquez dessus et il s'ouvrira dans votre navigateur par défaut pour être prévisualisé.

Étape 7: améliorez l'apparence

1. Entre les deux balises '' ajouter 'Cafés près de chez moi'
2. Ajoutez un nouveau fichier de la même manière que vous avez créé 'Index.html' mais nommez-le 'Style.css'
3. de retour sur votre fichier HTML, écrivez ce code au dessus de votre titre,"
4. Allez sur google images et téléchargez un joli clipart d'une tasse de café
5. Ajouter l'image au dossier contenant le reste de nos fichiers
6. dans le fichier CSS, écrivez le code suivant: 'body{
7. background-image: url (LE NOM DE L'IMAGE);
8. taille de l'arrière-plan: couverture;
9. }'

Étape 8: le rendre meilleur Pt2

1. si nous sauvegardons et prévisualisons maintenant, nous pouvons voir que l'arrière-plan du site Web est maintenant en mosaïque avec nos tasses à café
2. Malheureusement, il est difficile de lire notre titre
3. Donc dans le CSS, sous le 'body {}' ajoutez le code suivant: h1{
4. background-color=rgb(255, 255, 255);
5. taille de police=40px;
6. }

Étape 9: RÉVISION

C'est ça! Vous avez terminé. Vous avez appris les bases du HTML, du CSS et du code embarqué, bravo. Vous pouvez modifier le code pour l'adapter à vos goûts et lui faire afficher une carte de tout ce que vous voulez. À partir de là, vous pouvez continuer votre parcours de création de site Web et vous améliorer sans cesse.