Bëni një kafene Për të gjetur uebfaqen: 9 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-02-01 14:42

Në këtë Instructable unë do t'ju tregoj se si të bëni një uebfaqe të thjeshtë që shfaq kafenetë pranë jush, duke përdorur Google Maps, HTML dhe CSS

Furnizimet

Një kompjuter

Një redaktues teksti (unë përdor Atom)

Një lidhje wifi

Hapi 1: Zgjidhni një redaktues teksti

Unë përdor Atom, i cili mund të shkarkohet këtu. Sapo të shkarkohet, hapni një projekt të ri

Hapi 2: Krijoni projektin tuaj të ri

1. Hap Atomin
2. Gjeni skedarin
3. Nën skedarin klikoni të re
4. në të majtë poshtë (mac) do të ketë një buton për të bërë një dosje të re
5. emërtoni dosjen tuaj '' Faqja e internetit e Hartave '
6. Shtypni hapur në pjesën e poshtme të djathtë

Hapi 3: Krijoni Indeksin tuaj. Html

1. Shtoni një skedar të ri në dosjen tuaj (Në atom klikoni me të djathtën në dosje dhe shtypni të re)
2. Emërojeni këtë skedar 'Index.html'
3. Shtoni këtë strukturë bazë HTML, Kjo përdoret në çdo projekt HTML:

Hapi 4: Merrni hartën tuaj

1. Vizitoni Google Maps këtu: Google Maps
2. Kërkoni për kafe
3. duhet të merrni të gjitha kafenetë në zonën tuaj të përgjithshme
4. klikoni tre rreshtat pranë kafesë
5. gjeni ndarjen ose vendosni hartën
6. zgjidhni hartën e integrimit
7. Zgjidhni madhësinë e hartës (kam përdorur Large) dhe përfundoni vendndodhjen tuaj
8. shtypni kopjen HTML

Hapi 5: Shtoni në Uebfaqe

1. Kthehuni përsëri në skedarin HTML.
2. midis dy etiketave "" futni këtë kod:

'

DYQANET E KAFEVE Pranë Jush

'KODI I EMBEDUAR NGA HARTAT E GOOGLE'

'

Hapi 6: Parapamje

Kjo është bërë pjesa e parë!

ruani skedarin dhe gjeni atë në kompjuterin tuaj, Klikoni dy herë mbi të dhe do të hapet në shfletuesin tuaj të paracaktuar për t'u parë.

Hapi 7: Bëjeni të duket më mirë

1. Midis dy etiketave "" shtoni "Dyqanet e kafesë pranë meje"
2. Shtoni një skedar të ri në të njëjtën mënyrë si keni krijuar 'Index.html', por emërtojeni atë 'Style.css'
3. përsëri në skedarin tuaj HTML, shkruani këtë kod mbi titullin tuaj,"
5. Shkoni te imazhet e Google dhe shkarkoni një klip të lezetshëm të një filxhani kafe
6. Shtoni imazhin në dosjen që përmban pjesën tjetër të skedarëve tanë
7. në skedarin CSS, Shkruani kodin e mëposhtëm: 'body {
8. background-image: url (EMRI I FIGURES);
9. madhësia e sfondit: kopertina;
10. }'

Hapi 8: Duke e bërë atë të duket më mirë Pt2

1. nëse ruajmë dhe shikojmë tani, mund të shohim që sfondi i faqeve të internetit tani është i mbuluar me filxhanët tanë të kafesë
2. Mjerisht është e vështirë të lexosh titullin tonë
3. Pra, në CSS, nën 'trupin {}' shtoni kodin e mëposhtëm: h1 {
4. sfond-ngjyra = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Hapi 9: RISHIKIM

Kjo eshte! Mbarove. Ju keni mësuar bazat e HTML, CSS dhe kodin e integruar, Bravo. Ju mund ta redaktoni kodin për ta bërë atë të përshtatet me shijen tuaj dhe ta bëni atë të shfaqë një hartë të gjithçkaje që dëshironi. Që atëherë ju mund të vazhdoni udhëtimin tuaj për krijimin e faqes në internet dhe duke u përmirësuar përgjithmonë.