Naredite spletno stran za kavarno: 9 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-02-01 14:42

V tem navodilu vam bom pokazal, kako narediti preprosto spletno mesto, ki prikazuje kavarne v vaši bližini, z uporabo Google Zemljevidov, HTML in CSS

Zaloge

Računalnik

Urejevalnik besedil (uporabljam Atom)

Povezava wifi

Korak: Izberite urejevalnik besedil

Uporabljam Atom, ki ga lahko prenesete tukaj. Ko ga naložite, odprite nov projekt

2. korak: Ustvarite svoj nov projekt

1. Odprite Atom
2. Poišči datoteko
3. Pod datoteko kliknite novo
4. v spodnjem levem kotu (mac) bo gumb za ustvarjanje nove mape
5. poimenujte svojo mapo '' Spletno mesto zemljevida ''
6. Pritisnite odpri v spodnjem desnem kotu

3. korak: Ustvarite svoj Index.html

1. Dodajte novo datoteko v mapo (V atomu z desno tipko miške kliknite mapo in pritisnite novo)
2. Poimenujte to datoteko 'Index.html'
3. Dodajte to osnovno strukturo HTML, ki se uporablja v vsakem projektu HTML:

4. korak: Pridobite svoj zemljevid

1. Obiščite Google maps tukaj: Google Maps
2. Poiščite kavo
3. bi morali dobiti vse kavarne na vašem splošnem območju
4. kliknite tri vrstice poleg kave
5. poiščite skupno rabo ali vdelajte zemljevid
6. izberite vdelani zemljevid
7. Izberite velikost zemljevida (uporabil sem velik) in dokončajte svojo lokacijo
8. pritisnite copy HTML

5. korak: Dodajte na spletno mesto

1. Vrnite se k datoteki HTML.
2. med dvema oznakama '' vstavite to kodo:

'

PRODAJALNICE KAVE V TEBI

"VKLOPLJENA KODA IZ GOOGLE KARTOV"

'

6. korak: Predogled

Prvi del je narejen!

shranite datoteko in jo poiščite v računalniku, dvakrat kliknite nanjo in odprla se bo v privzetem brskalniku za predogled.

7. korak: Naj bo videti bolje

1. Med dvema oznakama '' dodajte 'Kavarne blizu mene'
2. Dodajte novo datoteko na enak način, kot ste ustvarili 'Index.html', vendar jo poimenujte 'Style.css'
3. nazaj v datoteko HTML napišite to kodo nad naslovom,"
5. Pojdite na google slike in prenesite srčkan izrezek skodelice kave
6. Dodajte sliko v mapo, ki vsebuje preostale datoteke
7. v datoteko CSS vnesite naslednjo kodo: 'body {
8. background-image: url (IME SLIKE);
9. velikost ozadja: ovitek;
10. }'

8. korak: Naj bo videti bolje Pt2

1. če shranimo in si ogledamo predogled, lahko vidimo, da je ozadje spletnih strani zdaj prekrito z našimi skodelicami za kavo
2. Žal je težko prebrati naš naslov
3. Torej v CSS pod "body {}" dodajte naslednjo kodo: h1 {
4. barva ozadja = rgb (255, 255, 255);
5. velikost pisave = 40px;
6. }

9. korak: PREGLED

To je to! Končal si. Naučili ste se osnov HTML, CSS in vdelane kode, Bravo. Kodo lahko uredite tako, da ustreza vašemu okusu in prikaže zemljevid vsega, kar želite. Od takrat lahko nadaljujete z gradnjo spletnega mesta in se za vedno izboljšate.