Faceți un site de localizare a unei cafenele: 9 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-02-01 14:42

În acest Instructable vă voi arăta cum să creați un site web simplu care să afișeze cafenelele din apropierea dvs., folosind Google Maps, HTML și CSS

Provizii

Un calculator

Un editor de text (folosesc Atom)

O conexiune wifi

Pasul 1: alegeți un editor de text

Folosesc Atom, care poate fi descărcat de aici. Odată ce a fost descărcat, deschideți-l faceți un proiect nou

Pasul 2: Creați-vă noul proiect

1. Deschideți Atom
2. Gaseste fisier
3. Sub fișier, faceți clic pe nou
4. în stânga jos (mac) va exista un buton pentru a crea un folder nou
5. denumiți folderul dvs. „Harta site-ului web”
6. Apăsați Deschide în partea dreaptă jos

Pasul 3: Creați-vă Index.html

1. Adăugați un fișier nou în folderul dvs. (În atom faceți clic dreapta pe folder și apăsați nou)
2. Denumiți acest fișier „Index.html”
3. Adăugați această structură HTML de bază, aceasta este utilizată în fiecare proiect HTML:

Pasul 4: obțineți-vă harta

1. Vizitați Google Maps aici: Google Maps
2. Caută cafea
3. ar trebui să obțineți toate cafenelele din zona dvs. generală
4. faceți clic pe cele trei linii de lângă cafea
5. Găsește harta de partajare sau încorporează
6. selectați harta de încorporare
7. Alegeți dimensiunea hărții (am folosit Large) și finalizați locația
8. apăsați copiere HTML

Pasul 5: Adăugați pe site

1. Reveniți la fișierul HTML.
2. între cele două etichete '' introduceți acest cod:

'

CAFETELE Lângă tine

„Codul încorporat din hărțile Google”

'

Pasul 6: previzualizare

Asta e prima parte!

salvați fișierul și găsiți-l pe computer, faceți dublu clic pe acesta și se va deschide în browserul dvs. implicit pentru a fi previzualizat.

Pasul 7: Faceți-o să arate mai bine

1. Între cele două etichete „adăugați„ Cafenele de lângă mine”
2. Adăugați un fișier nou în același mod în care ați creat „Index.html”, dar denumiți-l „Style.css”
3. înapoi în fișierul dvs. HTML, scrieți acest cod deasupra titlului dvs.,"
4. Accesați google images și descărcați o imagine drăguță cu o ceașcă de cafea
5. Adăugați imaginea în dosarul care conține restul fișierelor noastre
6. în fișierul CSS, scrieți următorul cod: „body {
7. background-image: url (NUMELE IMAGINII);
8. fundal-dimensiune: coperta;
9. }'

Pasul 8: Îl face să arate mai bine Pt2

1. dacă salvăm și previzualizăm acum, putem vedea că fundalul site-urilor web este acum plăcut cu ceștile noastre de cafea
2. Din păcate, este dificil să ne citim titlul
3. Deci, în CSS, sub „body {}” adăugați următorul cod: h1 {
4. fundal-culoare = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Pasul 9: REVIZUIRE

Asta e! Ați terminat. Ați învățat elementele de bază ale HTML, CSS și cod încorporat, Bravo. Puteți edita codul pentru a se potrivi cu gustul dvs. și pentru a-l afișa o hartă cu orice doriți. De atunci puteți continua călătoria dvs. de construire a site-ului web și îmbunătățirea pentru totdeauna.