Tee kahvila paikannussivusto: 9 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-02-01 14:40

Tässä ohjeessa näytän sinulle, kuinka tehdä yksinkertainen verkkosivusto, joka näyttää lähelläsi olevat kahvilat Google Mapsin, HTML: n ja CSS: n avulla

Tarvikkeet

Tietokone

Tekstieditori (käytän Atomia)

Wifi -yhteys

Vaihe 1: Valitse tekstieditori

Käytän Atomia, jonka voi ladata täältä. Kun se on avattu, tee uusi projekti

Vaihe 2: Luo uusi projekti

1. Avaa Atom
2. Etsi tiedosto
3. Valitse tiedoston alta uusi
4. vasemmassa alakulmassa (mac) on painike uuden kansion luomiseksi
5. nimeä kansio 'Kartta -sivusto'
6. Paina oikeassa alakulmassa auki

Vaihe 3: Luo Index.html

1. Lisää uusi tiedosto kansioon (napsauta hiiren kakkospainikkeella kansiota ja paina uutta)
2. Nimeä tämä tiedosto nimellä Index.html
3. Lisää tämä HTML -perusrakenne, jota käytetään kaikissa HTML -projekteissa:

Vaihe 4: Hanki kartta

1. Tutustu Google Mapsiin täällä: Google Maps
2. Etsi kahvia
3. sinun pitäisi saada kaikki kahvilat yleisellä alueella
4. napsauta kahvin vieressä olevia kolmea riviä
5. etsi jaa tai upota kartta
6. valitse upota kartta
7. Valitse kartan koko (käytin suurta) ja viimeistele sijainti
8. paina kopioi HTML

Vaihe 5: Lisää verkkosivustoon

1. Palaa takaisin HTML -tiedostoon.
2. lisää kahden koodin väliin tämä koodi:

'

KAHVILIIKKEET LÄHELLÄ

'GOOGLE MAPSIN UUDISTETTU KOODI'

'

Vaihe 6: Esikatselu

Se osa 1 on tehty!

Tallenna tiedosto ja löydä se tietokoneeltasi, kaksoisnapsauta sitä ja se avautuu oletusselaimessasi esikatseltavaksi.

Vaihe 7: Tee siitä paremman näköinen

1. Lisää kahden '' tunnisteen väliin 'Kahvilat lähellä minua'
2. Lisää uusi tiedosto samalla tavalla kuin luomasi "Index.html", mutta anna sille nimi "Style.css"
3. takaisin HTML -tiedostoosi, kirjoita tämä koodi otsikkosi yläpuolelle,"
4. Siirry Google -kuviin ja lataa söpö clipart kahvikupista
5. Lisää kuva kansioon, joka sisältää muut tiedostot
6. Kirjoita CSS -tiedostoon seuraava koodi: 'body {
7. background-image: url (KUVAN NIMI);
8. taustakoko: kansi;
9. }'

Vaihe 8: Tee siitä paremman näköinen Pt2

1. Jos tallennamme ja esikatselimme nyt, voimme nähdä, että verkkosivustojen tausta on nyt laatoitettu kahvikuppeillamme
2. Valitettavasti otsikkoamme on vaikea lukea
3. Joten lisää CSS -tiedostoon body {} -kohdan alle seuraava koodi: h1 {
4. taustaväri = rgb (255, 255, 255);
5. fontin koko = 40 kuvapistettä;
6. }

Vaihe 9: MUUTTAMINEN

Se siitä! Olet valmis. Olet oppinut HTML: n, CSS: n ja upotetun koodin perusteet, hyvin tehty. Voit muokata koodia oman maun mukaan ja näyttää sen kartalla mitä haluat. Siitä lähtien voit jatkaa verkkosivustosi rakentamista ja kehittyä ikuisesti.