Stwórz stronę z lokalizacją kawiarni: 9 kroków

2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-23 15:03

W tej instrukcji pokażę, jak stworzyć prostą stronę internetową wyświetlającą kawiarnie w pobliżu, korzystając z Map Google, HTML i CSS

Kieszonkowe dzieci

Komputer

Edytor tekstu (ja używam Atom)

Połączenie Wi-Fi

Krok 1: Wybierz edytor tekstu

Używam Atoma, który można pobrać tutaj. Po pobraniu otwiera się, tworzy nowy projekt

Krok 2: Stwórz swój nowy projekt

1. Otwórz Atom
2. Znajdź plik
3. Pod plikiem kliknij nowy
4. w lewym dolnym rogu (mac) będzie przycisk do utworzenia nowego folderu
5. nazwij swój folder „Mapa witryny”
6. Naciśnij otwórz w prawym dolnym rogu

Krok 3: Utwórz swój Index.html

1. Dodaj nowy plik w swoim folderze (w Atom kliknij folder prawym przyciskiem myszy i naciśnij nowy)
2. Nazwij ten plik „Index.html”
3. Dodaj tę podstawową strukturę HTML, która jest używana w każdym projekcie HTML:

Krok 4: Zdobądź swoją mapę

1. Odwiedź mapy Google tutaj: Mapy Google
2. Szukaj kawy
3. powinieneś dostać wszystkie kawiarnie w swojej okolicy?
4. kliknij trzy linie obok kawy
5. znajdź udostępnij lub umieść mapę
6. wybierz osadzoną mapę
7. Wybierz rozmiar mapy (ja użyłem Large) i sfinalizuj swoją lokalizację
8. naciśnij kopiuj HTML

Krok 5: Dodaj do witryny

1. Wróć do pliku HTML.
2. między dwoma tagami „” wstaw ten kod:

'

KAWIARNIE W POBLIŻU

„WBUDOWANY KOD Z GOOGLE MAPS”

'

Krok 6: Podgląd

To część pierwsza zrobione!

zapisz plik i znajdź go na swoim komputerze, kliknij go dwukrotnie, a otworzy się w domyślnej przeglądarce, aby wyświetlić podgląd.

Krok 7: Spraw, aby wyglądało lepiej

1. Między dwoma tagami „” dodaj „Kawiarnie w pobliżu”
2. Dodaj nowy plik w ten sam sposób, w jaki utworzyłeś „Index.html”, ale nazwij go „Style.css”
3. z powrotem do pliku HTML, napisz ten kod nad tytułem „
4. Przejdź do google images i pobierz ładny clipart filiżanki kawy
5. Dodaj obraz do folderu zawierającego resztę naszych plików
6. w pliku CSS Napisz następujący kod: 'body{
7. obraz w tle: url(NAZWA OBRAZU);
8. rozmiar tła: okładka;
9. }'

Krok 8: Sprawienie, by wyglądało lepiej Pt2

1. jeśli teraz zapiszemy i wyświetlimy podgląd, zobaczymy, że tło strony jest teraz kafelkowe z naszymi filiżankami do kawy
2. Niestety trudno jest odczytać nasz nagłówek
3. Tak więc w CSS, pod 'body {}' dodaj następujący kod: h1{
4. kolor tła=rgb(255, 255, 255);
5. rozmiar czcionki=40px;
6. }

Krok 9: REWIZJA

Otóż to! Jesteś skończony. Poznałeś podstawy HTML, CSS i osadzonego kodu. Dobra robota. Możesz edytować kod, aby pasował do Twojego gustu i wyświetlał mapę wszystkiego, co chcesz. Od tego momentu możesz kontynuować swoją podróż do budowania strony internetowej i na zawsze ulepszać.