Vytvorenie webovej stránky kaviarne: 9 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-02-01 14:42

V tomto návode vám ukážem, ako vytvoriť jednoduchú webovú stránku zobrazujúcu kaviarne vo vašom okolí pomocou služby Mapy Google, HTML a CSS

Zásoby

Počítač

Textový editor (používam Atom)

Wifi pripojenie

Krok 1: Vyberte textový editor

Používam Atom, ktorý si môžete stiahnuť tu. Hneď po stiahnutí vytvorí nový projekt

Krok 2: Vytvorte nový projekt

1. Otvorte Atom
2. Nájsť súbor
3. Pod súborom kliknite na nový
4. vľavo dole (mac) bude tlačidlo na vytvorenie nového priečinka
5. pomenujte svoj priečinok '' Web s mapou '
6. Otvorte vpravo dole

Krok 3: Vytvorte svoj index.html

1. Pridajte nový súbor do priečinka (V priečinku Atom kliknite pravým tlačidlom myši na priečinok a stlačte tlačidlo Nový)
2. Tento súbor pomenujte 'Index.html'
3. Pridajte túto základnú štruktúru HTML, ktorá sa používa v každom projekte HTML:

Krok 4: Získajte svoju mapu

1. Navštívte mapy Google tu: Mapy Google
2. Hľadaj kávu
3. mali by ste dostať všetky kaviarne vo vašej všeobecnej oblasti
4. kliknite na tri riadky vedľa kávy
5. nájsť mapu zdieľania alebo vloženia
6. vyberte vložiť mapu
7. Vyberte veľkosť mapy (použil som Veľkú) a dokončite svoju polohu
8. stlačte skopírujte HTML

Krok 5: Pridajte na webovú stránku

1. Vráťte sa do súboru HTML.
2. medzi dve značky '' vložte tento kód:

'

KÁVOVÉ OBCHODY V OKOLÍ VÁS

„VKLADNÝ KÓD Z MAP GOOGLE“

'

Krok 6: Ukážka

Prvá časť je hotová!

Uložte súbor a nájdite ho vo svojom počítači. Dvakrát naň kliknite a otvorí sa vo vašom predvolenom prehliadači, aby ste si mohli pozrieť jeho ukážku.

Krok 7: Nech to vyzerá lepšie

1. Medzi tieto dve značky pridajte „Kaviarne v mojom okolí“
2. Pridajte nový súbor rovnakým spôsobom, akým ste vytvorili „Index.html“, ale pomenujte ho „Style.css“
3. späť do súboru HTML, napíšte tento kód nad svoj názov „
5. Prejdite na obrázky Google a stiahnite si roztomilý klipart šálky kávy
6. Pridajte obrázok do priečinka obsahujúceho ostatné naše súbory
7. do súboru CSS napíšte nasledujúci kód: 'body {
8. background-image: url (NÁZOV OBRAZU);
9. veľkosť pozadia: obal;
10. }'

Krok 8: Aby to vyzeralo lepšie Pt2

1. ak teraz uložíme a zobrazíme ukážku, vidíme, že pozadie webových stránok je teraz vykladané našimi šálkami kávy
2. Je smutné, že je ťažké prečítať si náš nadpis
3. V CSS teda pod „telo {}“pridajte nasledujúci kód: h1 {
4. farba pozadia = rgb (255, 255, 255);
5. veľkosť písma = 40 pixelov;
6. }

Krok 9: REVÍZIA

To je všetko! Hotovo. Naučili ste sa základy HTML, CSS a vloženého kódu, dobrá práca. Kód môžete upraviť tak, aby zodpovedal vášmu vkusu, a aby zobrazoval mapu čohokoľvek, čo chcete. Odvtedy môžete pokračovať v budovaní svojich webových stránok a neustále sa zlepšovať.