Lag en kafé Finn nettsted: 9 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-02-01 14:41

I denne instruksen vil jeg vise deg hvordan du lager et enkelt nettsted som viser kaffebarer i nærheten av deg, ved hjelp av Google Maps, HTML og CSS

Rekvisita

En datamaskin

En tekstredigerer (jeg bruker Atom)

En wifi -tilkobling

Trinn 1: Velg en tekstredigerer

Jeg bruker Atom, som kan lastes ned her. Når den er lastet ned åpner den et nytt prosjekt

Trinn 2: Lag ditt nye prosjekt

1. Åpne Atom
2. Finn filen
3. Klikk på ny under filen
4. nederst til venstre (mac) vil det være en knapp for å lage en ny mappe
5. navngi mappen din '' Kartnettsted ''
6. Trykk på åpen nederst til høyre

Trinn 3: Lag din Index.html

1. Legg til en ny fil i mappen din (Høyreklikk på mappen i atom og trykk på ny)
2. Gi denne filen et navn 'Index.html'
3. Legg til denne grunnleggende HTML -strukturen, Denne brukes i hvert HTML -prosjekt:

Trinn 4: Få kartet ditt

1. Besøk Google maps her: Google Maps
2. Søk etter kaffe
3. du bør få alle kaffebarer i ditt generelle område
4. klikk på de tre linjene ved siden av kaffe
5. finn del eller legg inn kart
6. velg innebygd kart
7. Velg størrelsen på kartet (jeg brukte Large) og fullfør posisjonen din
8. trykk på kopier HTML

Trinn 5: Legg til på nettstedet

1. Gå tilbake til HTML -filen.
2. mellom de to '' taggene sett inn denne koden:

'

KAFFEBUTIKKER NÆR DEG

'DEN INNBEDDE KODEN FRA GOOGLE KARTER'

'

Trinn 6: Forhåndsvisning

Det er del en gjort!

lagre filen og finn den på datamaskinen din, Dobbeltklikk på den, så åpnes den i standardleseren for å forhåndsvise den.

Trinn 7: Få det til å se bedre ut

1. Mellom de to '' taggene legger du til '' Kaffebarer i nærheten av meg ''
2. Legg til en ny fil på samme måte som du opprettet 'Index.html', men gi den navnet 'Style.css'
3. skriv inn denne koden over tittelen din på HTML -filen"
4. Gå til google -bilder og last ned en søt utklipp av en kopp kaffe
5. Legg bildet til mappen som inneholder resten av filene våre
6. Skriv følgende kode i CSS -filen: 'body {
7. bakgrunnsbilde: url (BILDETS NAVN);
8. bakgrunnsstørrelse: omslag;
9. }'

Trinn 8: Få det til å se bedre ut Pt2

1. hvis vi lagrer og forhåndsviser nå, kan vi se at nettstedets bakgrunn nå er flislagt med våre kaffekopper
2. Dessverre er det vanskelig å lese overskriften vår
3. Så i CSS, under 'body {}' legger du til følgende kode: h1 {
4. bakgrunnsfarge = rgb (255, 255, 255);
5. skriftstørrelse = 40px;
6. }

Trinn 9: REVISJON

Det er det! Du er ferdig. Du har lært det grunnleggende om HTML, CSS og innebygd kode. Godt gjort. Du kan redigere koden slik at den passer din smak og få den til å vise et kart over alt du ønsker. Fra da kan du fortsette reisen til å bygge nettstedet ditt og for alltid bli bedre.