Umístění kavárny na webu: 9 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-02-01 14:39

V tomto Instructable vám ukážu, jak vytvořit jednoduchý web zobrazující kavárny ve vašem okolí pomocí Map Google, HTML a CSS

Zásoby

Počítač

Textový editor (používám Atom)

Wifi připojení

Krok 1: Vyberte textový editor

Používám Atom, který lze stáhnout zde. Jakmile je stažen, otevře se nový projekt

Krok 2: Vytvořte svůj nový projekt

1. Otevřete Atom
2. Najít soubor
3. Pod souborem klikněte na nový
4. vlevo dole (mac) bude tlačítko pro vytvoření nové složky
5. pojmenujte svou složku '' Mapa webu '
6. Vpravo dole stiskněte otevřít

Krok 3: Vytvořte svůj Index.html

1. Přidat nový soubor do složky (v atom klikněte pravým tlačítkem na složku a stiskněte nový)
2. Pojmenujte tento soubor 'Index.html'
3. Přidejte tuto základní strukturu HTML, která se používá v každém projektu HTML:

Krok 4: Získejte mapu

1. Navštivte Google mapy zde: Google Maps
2. Hledejte kávu
3. měli byste dostat všechny kavárny ve vaší obecné oblasti
4. klikněte na tři řádky vedle kávy
5. najít mapu sdílení nebo vložení
6. vyberte vložit mapu
7. Vyberte velikost mapy (použil jsem Large) a dokončete svou polohu
8. stiskněte kopírovat HTML

Krok 5: Přidejte na web

1. Vraťte se zpět do souboru HTML.
2. mezi dva tagy vložte tento kód:

'

KÁVOVNY V OKOLÍ VÁS

„VLOŽENÝ KÓD Z MAP GOOGLE“

'

Krok 6: Náhled

To je první část hotová!

uložte soubor a najděte jej ve svém počítači, poklepejte na něj a otevře se ve vašem výchozím prohlížeči, aby bylo možné zobrazit náhled.

Krok 7: Nechte to vypadat lépe

1. Mezi dvě značky přidejte „Kavárny poblíž mě“
2. Přidejte nový soubor stejným způsobem, jakým jste vytvořili 'Index.html', ale pojmenujte jej 'Style.css'
3. zpět do souboru HTML, napište tento kód nad svůj název „
4. Přejděte na obrázky Google a stáhněte si roztomilý klipart šálku kávy
5. Přidejte obrázek do složky obsahující zbytek našich souborů
6. do souboru CSS napište následující kód: 'body {
7. obrázek na pozadí: url (NÁZEV OBRAZU);
8. velikost pozadí: obal;
9. }'

Krok 8: Aby to vypadalo lépe Pt2

1. pokud nyní uložíme a zobrazíme náhled, můžeme vidět, že pozadí webových stránek je nyní obloženo našimi šálky kávy
2. Bohužel je těžké přečíst náš nadpis
3. Takže v CSS přidejte pod 'tělo {}' následující kód: h1 {
4. barva pozadí = rgb (255, 255, 255);
5. velikost písma = 40px;
6. }

Krok 9: REVIZE

A je to! Jsi hotový. Naučili jste se základy HTML, CSS a vloženého kódu, dobrá práce. Kód můžete upravit tak, aby odpovídal vašemu vkusu, a aby zobrazoval mapu čehokoli, co chcete. Od té doby můžete pokračovat v budování svých webových stránek a neustále se zlepšovat.