Napravite web lokaciju za kafić: 9 koraka

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

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

Supplies

Kompjuter

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 projekat

Korak 2: Kreirajte svoj novi projekat

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

Korak 3: Kreirajte 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 mapu

1. Posjetite Google karte ovdje: Google Maps
2. Potražite kafu
3. trebali biste nabaviti sve kafiće u vašem općem području
4. kliknite tri linije pored kafe
5. pronađite dijeljenje ili ugradite 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 lokaciju

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

'

PRODAVNICE KAFE KOD VAS

'UMJETNI KOD IZ GOOGLE KARTA'

'

Korak 6: Pregled

Prvi dio je završen!

spremite datoteku i pronađite je na svom računaru, 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 kreirali 'Index.html', ali joj dajte naziv 'Style.css'
3. natrag u HTML datoteku, napišite ovaj kôd iznad naslova,"
4. Idite na google slike i preuzmite slatki isječak šoljice kafe
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 kod: 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, odlično urađeno. 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.