Skep 'n koffiewinkel: 9 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-02-01 14:39

In hierdie instruksies sal ek u wys hoe u 'n eenvoudige webwerf kan maak met koffiewinkels in u omgewing, met behulp van Google Maps, HTML en CSS

Voorrade

N rekenaar

'N Teksredakteur (ek gebruik Atom)

'N Wifi -verbinding

Stap 1: Kies 'n teksredakteur

Ek gebruik Atom, wat hier afgelaai kan word. Sodra dit afgelaai is, maak dit 'n nuwe projek

Stap 2: Skep u nuwe projek

1. Maak Atom oop
2. Soek lêer
3. Klik nuut onder lêer
4. links onder (mac) sal daar 'n knoppie wees om 'n nuwe gids te maak
5. noem u vouer '' Kaartwebwerf '
6. Druk regs onder oop

Stap 3: Skep u Index.html

1. Voeg 'n nuwe lêer in u gids (klik met die rechtermuisknop op die gids en druk op nuwe)
2. Noem hierdie lêer 'Index.html'
3. Voeg hierdie basiese HTML -struktuur by, dit word in elke HTML -projek gebruik:

Stap 4: Kry u kaart

1. Besoek Google maps hier: Google Maps
2. Soek koffie
3. u moet alle koffiewinkels in u algemene omgewing kry
4. klik op die drie reëls langs koffie
5. vind 'n aandeel of sluit 'n kaart in
6. kies 'n ingeslote kaart
7. Kies die grootte van die kaart (ek het Large gebruik) en finaliseer u ligging
8. druk op kopieer HTML

Stap 5: Voeg by die webwerf

1. Gaan terug na die HTML -lêer.
2. voeg hierdie kode tussen die twee '' etikette in:

'

KOFFIEWINKELS NABY JOU

'DIE INGEBEDDE KODE VAN GOOGLE KAARTE'

'

Stap 6: Voorskou

Dis deel een klaar!

stoor die lêer en vind dit op u rekenaar, dubbelklik daarop en dit sal in u standaardblaaier oopmaak om 'n voorskou te kry.

Stap 7: Laat dit beter lyk

1. Tussen die twee etikette voeg 'Koffiewinkels naby my' by
2. Voeg 'n nuwe lêer by op dieselfde manier as wat u 'Index.html' geskep het, maar noem dit 'Style.css'
3. skryf u kode bo u titel terug op u HTML -lêer,"
4. Gaan na google images en laai 'n oulike clipart van 'n koppie koffie af
5. Voeg die prent by die gids met die res van ons lêers
6. Skryf die volgende kode in die CSS -lêer: 'body {
7. agtergrond-beeld: url (DIE NAAM VAN DIE BEELD);
8. agtergrondgrootte: omslag;
9. }'

Stap 8: Laat dit beter lyk Pt2

1. as ons nou stoor en 'n voorskou kry, kan ons sien dat die agtergrond van die webwerwe nou geteël is met ons koffiekoppies
2. Ongelukkig is dit moeilik om ons opskrif te lees
3. Voeg dus die volgende kode in die CSS onder die 'body {}' in: h1 {
4. agtergrond-kleur = rgb (255, 255, 255);
5. lettergrootte = 40 px;
6. }

Stap 9: HERSIENING

Dis dit! Jy's klaar. U het die basiese beginsels van HTML, CSS en ingeslote kode geleer, Welgedaan. U kan die kode wysig sodat dit by u smaak pas en 'n kaart van alles wat u wil, laat sien. Vanaf dan kan u voortgaan met die bou van u webwerf en vir ewig verbeter.