Napravite web lokaciju za kafić: 9 koraka

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

U ovom Instructableu pokazat ću vam kako napraviti jednostavnu web stranicu koja prikazuje kafiće u vašoj blizini, koristeći Google karte, HTML i CSS

Pribor

Računalo

Uređivač teksta (koristim Atom)

Wi -Fi veza

Korak 1: Odaberite uređivač teksta

Koristim Atom, koji se može preuzeti ovdje. Nakon što ga preuzmete, otvorite novi projekt

Korak 2: Izradite svoj novi projekt

1. Otvorite Atom
2. Pronađi datoteku
3. Ispod datoteke kliknite novo
4. u donjem lijevom kutu (mac) bit će gumb za stvaranje nove mape
5. imenujte svoju mapu '' Web stranica karte ''
6. Pritisnite open u donjem desnom kutu

Korak 3: Izradite svoj Index.html

1. Dodajte novu datoteku u svoju mapu (U atomu desnom tipkom miša kliknite mapu i pritisnite novo)
2. Dajte datoteci naziv "Index.html"
3. Dodajte ovu osnovnu HTML strukturu. Ovo se koristi u svakom HTML projektu:

Korak 4: Nabavite svoju kartu

1. Posjetite Google karte ovdje: Google karte
2. Potražite kavu
3. trebali biste nabaviti sve kafiće u svom općem području
4. kliknite tri retka uz kavu
5. pronaći dijeliti ili ugraditi kartu
6. odaberite ugrađenu kartu
7. Odaberite veličinu karte (koristio sam veliku) i dovršite svoju lokaciju
8. pritisnite copy HTML

Korak 5: Dodajte na web stranicu

1. Vratite se na HTML datoteku.
2. između dvije oznake "" umetnite ovaj kod:

'

TRGOVINE KAVE U BLIZINI VAS

"UMJETNI KOD IZ GOOGLE KARTA"

'

Korak 6: Pregled

Prvi dio je gotov!

spremite datoteku i pronađite je na svom računalu, dvaput kliknite na nju i ona će se otvoriti u vašem zadanom pregledniku za pregled.

Korak 7: Neka izgleda bolje

1. Između dvije oznake "" dodajte "Kafići u mojoj blizini"
2. Dodajte novu datoteku na isti način na koji ste stvorili "Index.html", ali joj dajte naziv "Style.css"
3. natrag u svoju HTML datoteku napišite ovaj kôd iznad naslova,"
4. Idite na google slike i preuzmite slatki isječak šalice kave
5. Dodajte sliku u mapu koja sadrži ostale datoteke
6. u CSS datoteku upišite sljedeći kod: 'body {
7. background-image: url (NAZIV SLIKE);
8. veličina pozadine: omot;
9. }'

Korak 8: Kako bolje izgledati Pt2

1. ako sada spremimo i pregledamo, možemo vidjeti da je pozadina web stranica sada popločana našim šalicama za kavu
2. Nažalost, teško je čitati naš naslov
3. Dakle, u CSS -u ispod 'body {}' dodajte sljedeći kôd: h1 {
4. background-color = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Korak 9: REVIZIJA

To je to! Gotov si. Naučili ste osnove HTML -a, CSS -a i ugrađenog koda, bravo. Kôd možete urediti kako bi odgovarao vašem ukusu i prikazati mapu svega što želite. Od tada možete nastaviti putovanje izgradnjom web stranice i zauvijek se poboljšavati.