Inhaltsverzeichnis:
- Lieferungen
- Schritt 1: Wählen Sie einen Texteditor
- Schritt 2: Erstellen Sie Ihr neues Projekt
- Schritt 3: Erstellen Sie Ihre Index.html
- Schritt 4: Holen Sie sich Ihre Karte
- Schritt 5: Zur Website hinzufügen
- COFFEE-LÄDEN IN IHRER NÄHE
- Schritt 6: Vorschau
- Schritt 7: Machen Sie es besser aussehen
- Schritt 8: Besser aussehen lassen Pt2
- Schritt 9: ÜBERARBEITUNG
2025 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2025-01-23 12:52
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
- Offenes Atom
- Datei suchen
- Klicken Sie unter Datei auf Neu
- Unten links (Mac) befindet sich eine Schaltfläche zum Erstellen eines neuen Ordners
- Benennen Sie Ihren Ordner ''Map website'
- Unten rechts auf öffnen drücken
Schritt 3: Erstellen Sie Ihre Index.html
- 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)
- Benennen Sie diese Datei 'Index.html'
- Fügen Sie diese grundlegende HTML-Struktur hinzu. Diese wird in jedem HTML-Projekt verwendet:
Schritt 4: Holen Sie sich Ihre Karte
- Besuchen Sie Google Maps hier: Google Maps
- Kaffee suchen
- du solltest alle Coffeeshops in deiner Umgebung bekommen
- klicke auf die drei Zeilen neben Kaffee
- Karte finden, teilen oder einbetten
- Karte einbetten auswählen
- Wählen Sie die Größe der Karte (ich habe Large verwendet) und finalisieren Sie Ihren Standort
- drücke HTML kopieren
Schritt 5: Zur Website hinzufügen
- Gehen Sie zurück zur HTML-Datei.
- 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
- Fügen Sie zwischen den beiden ''-Tags 'Coffeeshops in meiner Nähe' hinzu.
- Fügen Sie eine neue Datei auf die gleiche Weise hinzu, wie Sie 'Index.html' erstellt haben, aber nennen Sie sie 'Style.css'
- zurück in Ihre HTML-Datei, schreiben Sie diesen Code über Ihren Titel,"
- Gehen Sie zu Google Bilder und laden Sie ein süßes Clipart einer Tasse Kaffee herunter
- Fügen Sie das Bild dem Ordner hinzu, der den Rest unserer Dateien enthält
- Schreiben Sie in die CSS-Datei den folgenden Code: 'body{
- Hintergrundbild: url(DER NAME DES BILDES);
- Hintergrundgröße: Cover;
- }'
Schritt 8: Besser aussehen lassen Pt2
- Wenn wir jetzt speichern und eine Vorschau anzeigen, können wir sehen, dass der Hintergrund der Website jetzt mit unseren Kaffeetassen gekachelt ist
- Leider ist es schwer unsere Überschrift zu lesen
- Fügen Sie im CSS unter dem 'body {}' den folgenden Code hinzu: h1{
- Hintergrundfarbe=rgb(255, 255, 255);
- Schriftgröße=40px;
- }
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.
Empfohlen:
So erstellen Sie eine einfache Website mit Notepad – wikiHow
Wie erstelle ich eine einfache Website mit Notepad: Hat sich jemand gefragt, wie ich aus einem einfachen Schreibprogramm eine Website erstelle? Website nur mit Notizblock
So erstellen Sie eine schlanke und einfache Website mit Bootstrap 4: 7 Schritte
So erstellen Sie eine schlanke und einfache Website mit Bootstrap 4: Der Zweck dieses Instructable ist es, denjenigen, die mit der Programmierung - HTML oder anders - vertraut sind, eine einfache Einführung in die Erstellung eines Online-Portfolios mit Bootstrap 4 zu geben. Ich werde Sie durch die Ersteinrichtung führen der Website, wie man ein paar erstellt
So erstellen Sie eine Website (eine Schritt-für-Schritt-Anleitung): 4 Schritte
So erstellen Sie eine Website (eine Schritt-für-Schritt-Anleitung): In dieser Anleitung zeige ich Ihnen, wie die meisten Webentwickler ihre Websites erstellen und wie Sie teure Website-Builder vermeiden können, die für eine größere Website oft zu begrenzt sind helfen Ihnen, einige Fehler zu vermeiden, die ich am Anfang gemacht habe
So erstellen Sie eine Message Board-Website mit PHP und MYSQL – wikiHow
So erstellen Sie eine Message Board-Website mit PHP und MYSQL: Diese Anleitung zeigt Ihnen, wie Sie eine Message Board-Website mit PHP, MySQL, HTML und CSS erstellen. Wenn Sie neu in der Webentwicklung sind, machen Sie sich keine Sorgen, es gibt detaillierte Erklärungen und Analogien, damit Sie die Konzepte besser verstehen. Matte
So erhalten Sie Musik von fast jeder (Haha) Website (solange Sie sie hören können, können Sie sie bekommen Okay, wenn sie in Flash eingebettet ist, können Sie es möglicherweise nic
So erhalten Sie Musik von fast jeder (Haha) Website (solange Sie sie hören können, können Sie sie bekommen … Okay, wenn sie in Flash eingebettet ist, können Sie es möglicherweise nicht) BEARBEITET!!!!! Zusätzliche Informationen: Wenn Sie jemals auf eine Website gehen und ein Lied abspielen, das Sie mögen und es wollen, dann ist hier das anweisbare für Sie, nicht meine Schuld, wenn Sie etwas durcheinander bringen (nur so wird es passieren, wenn Sie ohne Grund anfangen, Dinge zu löschen) ) Ich konnte Musik für