Erstellen Sie eine Website zum Auffinden eines Coffeeshops - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-02-01 14:39

In diesem Instructable zeige ich Ihnen, wie Sie eine einfache Website erstellen, die Cafés in Ihrer Nähe anzeigt, mit Google Maps, HTML und CSS

Lieferungen

Ein Computer

Ein Texteditor (ich benutze Atom)

Eine WLAN-Verbindung

Schritt 1: Wählen Sie einen Texteditor

Ich verwende Atom, das hier heruntergeladen werden kann. Sobald es heruntergeladen wurde, öffnet es ein neues Projekt

Schritt 2: Erstellen Sie Ihr neues Projekt

1. Offenes Atom
2. Datei suchen
3. Klicken Sie unter Datei auf Neu
4. Unten links (Mac) befindet sich eine Schaltfläche zum Erstellen eines neuen Ordners
5. Benennen Sie Ihren Ordner ''Map website'
6. Unten rechts auf öffnen drücken

Schritt 3: Erstellen Sie Ihre Index.html

1. Fügen Sie Ihrem Ordner eine neue Datei hinzu (Klicken Sie in Atom mit der rechten Maustaste auf den Ordner und drücken Sie neu)
2. Benennen Sie diese Datei 'Index.html'
3. Fügen Sie diese grundlegende HTML-Struktur hinzu. Diese wird in jedem HTML-Projekt verwendet:

Schritt 4: Holen Sie sich Ihre Karte

1. Besuchen Sie Google Maps hier: Google Maps
2. Kaffee suchen
3. du solltest alle Coffeeshops in deiner Umgebung bekommen
4. klicke auf die drei Zeilen neben Kaffee
5. Karte finden, teilen oder einbetten
6. Karte einbetten auswählen
7. Wählen Sie die Größe der Karte (ich habe Large verwendet) und finalisieren Sie Ihren Standort
8. drücke HTML kopieren

Schritt 5: Zur Website hinzufügen

1. Gehen Sie zurück zur HTML-Datei.
2. Fügen Sie zwischen den beiden ''-Tags diesen Code ein:

'

COFFEE-LÄDEN IN IHRER NÄHE

„DER EINGEBETTETE CODE VON GOOGLE MAPS“

'

Schritt 6: Vorschau

Das ist Teil eins fertig!

Speichern Sie die Datei und suchen Sie sie auf Ihrem Computer. Doppelklicken Sie darauf und sie wird in Ihrem Standardbrowser zur Vorschau geöffnet.

Schritt 7: Machen Sie es besser aussehen

1. Fügen Sie zwischen den beiden ''-Tags 'Coffeeshops in meiner Nähe' hinzu.
2. Fügen Sie eine neue Datei auf die gleiche Weise hinzu, wie Sie 'Index.html' erstellt haben, aber nennen Sie sie 'Style.css'
3. zurück in Ihre HTML-Datei, schreiben Sie diesen Code über Ihren Titel,"
4. Gehen Sie zu Google Bilder und laden Sie ein süßes Clipart einer Tasse Kaffee herunter
5. Fügen Sie das Bild dem Ordner hinzu, der den Rest unserer Dateien enthält
6. Schreiben Sie in die CSS-Datei den folgenden Code: 'body{
7. Hintergrundbild: url(DER NAME DES BILDES);
8. Hintergrundgröße: Cover;
9. }'

Schritt 8: Besser aussehen lassen Pt2

1. Wenn wir jetzt speichern und eine Vorschau anzeigen, können wir sehen, dass der Hintergrund der Website jetzt mit unseren Kaffeetassen gekachelt ist
2. Leider ist es schwer unsere Überschrift zu lesen
3. Fügen Sie im CSS unter dem 'body {}' den folgenden Code hinzu: h1{
4. Hintergrundfarbe=rgb(255, 255, 255);
5. Schriftgröße=40px;
6. }

Schritt 9: ÜBERARBEITUNG

Das ist es! Sie sind fertig. Sie haben die Grundlagen von HTML, CSS und eingebettetem Code erlernt. Gut gemacht. Sie können den Code bearbeiten, um ihn Ihrem Geschmack anzupassen und eine Karte mit allem anzuzeigen, was Sie möchten. Von da an können Sie Ihre Website-Erstellung fortsetzen und sich ständig verbessern.