Tehke kohviku asukoha veebisait: 9 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-02-01 14:40

Selles juhendis näitan teile, kuidas teha lihtsat veebisaiti, mis kuvab teie lähedal asuvaid kohvikuid, kasutades Google Mapsi, HTML -i ja CSS -i

Tarvikud

Arvuti

Tekstiredaktor (ma kasutan Atomi)

WiFi -ühendus

Samm: valige tekstiredaktor

Kasutan Atomi, mille saab alla laadida siit. Kui see on alla laaditud, tehke uus projekt

Samm: looge oma uus projekt

1. Avage Atom
2. Leia fail
3. Faili all klõpsake nuppu Uus
4. vasakus alanurgas (mac) on nupp uue kausta loomiseks
5. pange oma kaustale nimi "Kaarti veebisait"
6. Vajutage paremas alanurgas nuppu Ava

3. samm: looge oma Index.html

1. Lisage oma kausta uus fail (paremklõpsake aatomis kausta ja vajutage nuppu Uus)
2. Andke sellele failile nimi „Index.html”
3. Lisage see põhiline HTML -struktuur, seda kasutatakse igas HTML -projektis:

Samm: hankige oma kaart

1. Külastage Google'i kaarte siin: Google Maps
2. Otsige kohvi
3. peaksite saama kõik oma üldpiirkonna kohvikud
4. klõpsake kohvi kõrval kolme rida
5. otsige jagage või manustage kaart
6. valige embed map
7. Valige kaardi suurus (ma kasutasin suurt) ja viimistlege oma asukoht
8. vajutage kopeeri HTML

Samm: lisage veebisaidile

1. Minge tagasi HTML -faili juurde.
2. kahe märgendi vahele sisestage see kood:

'

SINU LÄHEDAL KOHVIPOOD

„GOOGLE MAPSI SÜVITATUD KOOD”

'

6. samm: eelvaade

See on esimene osa tehtud!

salvestage fail ja leidke see oma arvutist, topeltklõpsake seda ja see avaneb teie vaikebrauseris eelvaateks.

Samm: tehke see paremaks

1. Kahe sildi vahele lisage „Kohvikud minu lähedal”
2. Lisage uus fail samamoodi nagu „Index.html”, kuid pange sellele nimi „Style.css”
3. tagasi oma HTML -faili, kirjutage see kood oma pealkirja kohale,"
4. Minge Google'i piltide juurde ja laadige alla tassi kohvi armas lõikepilt
5. Lisage pilt kausta, mis sisaldab ülejäänud meie faile
6. Kirjutage CSS -faili järgmine kood: 'body {
7. background-image: url (PILDI NIMI);
8. tausta suurus: kate;
9. }'

8. samm: muutke see paremaks Pt2

1. kui nüüd salvestada ja eelvaadata, näeme, et veebisaitide taust on nüüd meie kohvitassidega kaetud
2. Kahjuks on meie pealkirja raske lugeda
3. Seega lisage CSS -i „body {}” alla järgmine kood: h1 {
4. taustavärv = rgb (255, 255, 255);
5. fondi suurus = 40 pikslit;
6. }

9. samm: LÄBIVAATAMINE

See ongi! Olete valmis. Olete õppinud HTML -i, CSS -i ja manustatud koodi põhitõdesid, hästi tehtud. Saate koodi muuta, et see vastaks teie maitsele, ja panna see kuvama kõike, mida soovite. Sellest ajast alates saate jätkata oma veebisaidi loomise teekonda ja täiustada igavesti.