Lav en café Find websted: 9 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-02-01 14:39

I denne instruks vil jeg vise dig, hvordan du laver et simpelt websted, der viser kaffebarer i nærheden af dig, ved hjælp af Google Maps, HTML og CSS

Forbrugsvarer

En computer

En teksteditor (jeg bruger Atom)

En wifi forbindelse

Trin 1: Vælg en tekstredigerer

Jeg bruger Atom, som kan downloades her. Når den er downloadet, åbner den et nyt projekt

Trin 2: Opret dit nye projekt

1. Åbn Atom
2. Find fil
3. Klik på ny under filen
4. nederst til venstre (mac) vil der være en knap til at lave en ny mappe
5. navngiv din mappe '' Kortwebsted ''
6. Tryk på åben nederst til højre

Trin 3: Opret dit Index.html

1. Tilføj en ny fil i din mappe (højreklik på mappen i atom, og tryk på ny)
2. Navngiv denne fil 'Index.html'
3. Tilføj denne grundlæggende HTML -struktur, Denne bruges i hvert HTML -projekt:

Trin 4: Få dit kort

1. Besøg Google maps her: Google Maps
2. Søg efter kaffe
3. du bør få alle kaffebarer i dit generelle område
4. klik på de tre linjer ved siden af kaffe
5. find deling eller integrer kort
6. vælg integrer kort
7. Vælg kortets størrelse (jeg brugte Large), og afslut din placering
8. tryk på kopier HTML

Trin 5: Føj til webstedet

1. Gå tilbage til HTML -filen.
2. mellem de to '' tags indsæt denne kode:

'

KAFFEBUTIKKER NÆR DIG

'DEN INDBEDDE KODE FRA GOOGLE -KORT'

'

Trin 6: Forhåndsvisning

Det er første del gjort!

gem filen og find den på din computer, Dobbeltklik på den, og den åbnes i din standardbrowser for at få vist et eksempel.

Trin 7: Få det til at se bedre ud

1. Mellem de to '' tags tilføjer 'Caféer i nærheden af mig'
2. Tilføj en ny fil på samme måde, som du oprettede 'Index.html', men navngiv den 'Style.css'
3. tilbage til din HTML -fil, skriv denne kode over din titel,"
4. Gå til google -billeder, og download en sød clipart af en kop kaffe
5. Føj billedet til den mappe, der indeholder resten af vores filer
6. Skriv følgende kode i CSS -filen: 'body {
7. baggrundsbillede: url (BILLEDETS NAVN);
8. baggrundsstørrelse: cover;
9. }'

Trin 8: Få det til at se bedre ud Pt2

1. hvis vi gemmer og forhåndsviser nu, kan vi se, at webstedets baggrund nu er flisebelagt med vores kaffekopper
2. Desværre er det svært at læse vores overskrift
3. Så tilføj følgende kode under 'body {}' i CSS: h1 {
4. baggrundsfarve = rgb (255, 255, 255);
5. skrifttype = 40px;
6. }

Trin 9: REVISION

Det er det! Du er færdig. Du har lært det grundlæggende i HTML, CSS og integreret kode, Godt gået. Du kan redigere koden, så den passer til din smag og få den til at vise et kort over alt, hvad du ønsker. Fra da kan du fortsætte din webstedsopbygningsrejse og for evigt forbedre.