Gumawa ng isang Website sa Paghanap ng Coffee Shop: 9 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-02-01 14:42

Sa Instructable na ito ipapakita ko sa iyo kung paano gumawa ng isang simpleng website na nagpapakita ng mga coffee shop na malapit sa iyo, Gamit ang Google Maps, HTML at CSS

Mga gamit

Isang kompyuter

Isang text editor (Gumagamit ako ng Atom)

Isang koneksyon sa wifi

Hakbang 1: Pumili ng isang Text Editor

Gumagamit ako ng Atom, na maaaring ma-download Dito. Sa sandaling na-download na bukas, gumawa ito ng isang bagong proyekto

Hakbang 2: Lumikha ng Iyong Bagong Project

1. Buksan ang Atom
2. Maghanap ng file
3. Sa ilalim ng file mag-click bago
4. sa kaliwang ibabang (mac) magkakaroon ng isang pindutan upang makagawa ng isang bagong folder
5. pangalanan ang iyong folder na "Map website"
6. Pindutin ang bukas sa kanang bahagi sa ibaba

Hakbang 3: Lumikha ng Iyong Index.html

1. Magdagdag ng isang bagong file sa iyong folder (Sa atom i-right click ang folder at pindutin ang bago)
2. Pangalanan ang file na ito na 'Index.html'
3. Idagdag ang pangunahing istrakturang HTML na ito, Ginagamit ito sa bawat proyekto sa HTML:

Hakbang 4: Kunin ang Iyong Mapa

1. Bisitahin ang mga mapa ng Google dito: Google Maps
2. Maghanap ng kape
3. dapat mong makuha ang lahat ng mga tindahan ng kape sa iyong pangkalahatang lugar
4. i-click ang tatlong linya sa tabi ng kape
5. maghanap ng magbahagi o mag-embed ng mapa
6. piliin ang naka-embed na mapa
7. Piliin ang laki ng mapa (Gumamit ako ng Malalaki) at i-finalize ang iyong lokasyon
8. pindutin ang kopya ng HTML

Hakbang 5: Idagdag sa Website

1. Bumalik sa HTML file.
2. sa pagitan ng dalawang "mga tag ipasok ang code na ito:

'

ANG SHOP NG COFFEE AY MALAPIT SA INYO

'ANG EMBEDED CODE MULA SA GOOGLE MAPS'

'

Hakbang 6: Pag-preview

Iyon ang bahagi ng isa tapos na!

i-save ang file at hanapin ito sa iyong computer, I-double click ito at bubuksan ito sa iyong default browser upang ma-preview.

Hakbang 7: Gawin itong Mas Mabuti

1. Sa pagitan ng dalawang "mga tag idagdag ang 'Mga tindahan ng kape na malapit sa akin'
2. Magdagdag ng isang bagong file sa parehong paraan ng paggawa mo ng 'Index.html' ngunit pangalanan itong 'Style.css'
3. bumalik sa iyong HTML file, isulat ang code na ito sa itaas ng iyong pamagat,"
5. Pumunta sa mga imahe sa google at mag-download ng isang cute na clipart ng isang tasa ng kape
6. Idagdag ang imahe sa folder na naglalaman ng natitirang mga file namin
7. sa CSS file, Isulat ang sumusunod na code: 'body {
8. background-image: url (ANG PANGALAN NG IMAGE);
9. laki ng background: takip;
10. }'

Hakbang 8: Ginagawa itong Mas mahusay na Pt2

1. kung makatipid at mag-preview tayo ngayon, makikita natin na ang background sa website ay naka-tile sa aming mga tasa ng kape
2. Nakalulungkot mahirap basahin ang aming heading
3. Kaya't sa CSS, sa ilalim ng 'katawan {}' idagdag ang sumusunod na code: h1 {
4. background-color = rgb (255, 255, 255);
5. laki ng font = 40px;
6. }

Hakbang 9: REBISYON

Ayan yun! Tapos ka na. Natutuhan mo ang mga pangunahing kaalaman sa HTML, CSS at naka-embed na code, Magaling. Maaari mong i-edit ang code upang gawin itong naaangkop sa iyong panlasa at ipakita itong isang mapa ng anumang nais mo. Mula noon maaari mong ipagpatuloy ang iyong paglalakbay sa pagbuo ng website at magpasawalang hanggan.