Gör ett kafé Hitta webbplats: 9 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-02-01 14:42

I denna instruktionsbok kommer jag att visa dig hur du gör en enkel webbplats med kaféer nära dig, med Google Maps, HTML och CSS

Tillbehör

En dator

En textredigerare (jag använder Atom)

En wifi -anslutning

Steg 1: Välj en textredigerare

Jag använder Atom, som kan laddas ner här. När den är nedladdad öppnar den ett nytt projekt

Steg 2: Skapa ditt nya projekt

1. Öppna Atom
2. Hitta fil
3. Klicka på ny under filen
4. nere till vänster (mac) kommer det att finnas en knapp för att skapa en ny mapp
5. namnge din mapp '' Karta webbplats ''
6. Tryck på öppen längst ned till höger

Steg 3: Skapa ditt index.html

1. Lägg till en ny fil i din mapp (högerklicka på mappen i atom och tryck på ny)
2. Namnge den här filen 'Index.html'
3. Lägg till denna grundläggande HTML -struktur. Detta används i alla HTML -projekt:

Steg 4: Skaffa din karta

1. Besök Google maps här: Google Maps
2. Sök efter kaffe
3. du bör få alla kaféer i ditt allmänna område
4. klicka på de tre raderna bredvid kaffe
5. hitta dela eller bädda in karta
6. välj inbädda karta
7. Välj kartans storlek (jag använde Large) och slutför din plats
8. tryck på kopiera HTML

Steg 5: Lägg till på webbplatsen

1. Gå tillbaka till HTML -filen.
2. mellan de två '' taggarna sätter du in den här koden:

'

KAFFEBUTIKER NÄR DIG

'DEN INBÄDDA KODEN FRÅN GOOGLE KARTOR'

'

Steg 6: Förhandsgranska

Det är del ett gjort!

spara filen och hitta den på din dator, dubbelklicka på den så öppnas den i din standardwebbläsare för förhandsgranskning.

Steg 7: Få det att se bättre ut

1. Mellan de två '' taggarna lägg till '' Kaféer nära mig ''
2. Lägg till en ny fil på samma sätt som du skapade 'Index.html' men namnge den 'Style.css'
3. skriv tillbaka den här koden ovanför din titel,"
5. Gå till google images och ladda ner en söt clipart av en kopp kaffe
6. Lägg till bilden i mappen som innehåller resten av våra filer
7. Skriv följande kod i CSS -filen: 'body {
8. bakgrundsbild: url (BILDETS NAMN);
9. bakgrundsstorlek: omslag;
10. }'

Steg 8: Få det att se bättre ut Pt2

1. om vi sparar och förhandsgranskar nu kan vi se att webbplatsernas bakgrund nu är kaklad med våra kaffekoppar
2. Tyvärr är det svårt att läsa vår rubrik
3. Så i CSS, under 'body {}' lägger du till följande kod: h1 {
4. bakgrundsfärg = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Steg 9: REVISION

Det är allt! Du är klar. Du har lärt dig grunderna i HTML, CSS och inbäddad kod, Bra jobbat. Du kan redigera koden så att den passar din smak och få den att visa en karta över allt du vill ha. Från och med då kan du fortsätta din webbplatsbyggande resa och för alltid förbättra.