Sukurkite kavinę, kurioje rasite svetainę: 9 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-02-01 14:41

Šioje instrukcijoje parodysiu, kaip sukurti paprastą svetainę, kurioje būtų rodomos kavinės šalia jūsų, naudojant „Google“žemėlapius, HTML ir CSS

Prekės

Kompiuteris

Teksto redaktorius (naudoju „Atom“)

„Wi -Fi“ryšys

1 veiksmas: pasirinkite teksto rengyklę

Aš naudoju „Atom“, kurį galite atsisiųsti čia. Atsisiuntus, sukurkite naują projektą

2 žingsnis: sukurkite naują projektą

1. Atidarykite „Atom“
2. Raskite failą
3. Po failu spustelėkite naują
4. apačioje kairėje („Mac“) bus mygtukas sukurti naują aplanką
5. pavadinkite savo aplanką „Žemėlapio svetainė“
6. Apatiniame dešiniajame kampe paspauskite atidaryti

3 veiksmas: sukurkite savo Index.html

1. Įtraukite naują failą į savo aplanką (Atomo dešiniuoju pelės mygtuku spustelėkite aplanką ir paspauskite naują)
2. Pavadinkite šį failą „Index.html“
3. Pridėkite šią pagrindinę HTML struktūrą, kuri naudojama kiekviename HTML projekte:

4 žingsnis: Gaukite žemėlapį

1. Apsilankykite „Google“žemėlapiuose čia: „Google“žemėlapiai
2. Ieškokite kavos
3. turėtumėte nusipirkti visas kavines savo rajone
4. spustelėkite tris eilutes šalia kavos
5. rasti bendrinimo arba įterpimo žemėlapį
6. pasirinkite įterpti žemėlapį
7. Pasirinkite žemėlapio dydį (aš naudojau didelį) ir nustatykite savo vietą
8. paspauskite kopijuoti HTML

5 veiksmas: pridėkite prie svetainės

1. Grįžkite į HTML failą.
2. tarp dviejų žymių įterpkite šį kodą:

'

KAVOS PARDUOTUVĖS ARBA JŪSŲ

„ĮGYVENDINTAS KODAS„ GOOGLE MAPS “

'

6 veiksmas: peržiūra

Tai pirmoji dalis padaryta!

išsaugokite failą ir suraskite jį savo kompiuteryje, dukart spustelėkite jį ir jis atsidarys numatytojoje naršyklėje, kurią norite peržiūrėti.

7 žingsnis: padarykite jį geresnį

1. Tarp dviejų „“žymų pridėkite „Kavinės šalia manęs“
2. Pridėkite naują failą taip, kaip sukūrėte „Index.html“, bet pavadinkite jį „Style.css“
3. atgal į savo HTML failą, parašykite šį kodą virš pavadinimo,"
4. Eikite į „Google“vaizdus ir atsisiųskite mielą kavos puodelio iliustraciją
5. Pridėkite vaizdą prie aplanko, kuriame yra likę mūsų failai
6. CSS faile parašykite šį kodą: 'body {
7. background-image: url (VAIZDO PAVADINIMAS);
8. fono dydis: viršelis;
9. }'

8 žingsnis: pagerinkite išvaizdą Pt2

1. jei išsaugosime ir peržiūrėsime dabar, pamatysime, kad svetainių fonas dabar yra išklotas mūsų kavos puodeliais
2. Deja, sunku perskaityti mūsų antraštę
3. Taigi CSS po „body {}“pridėkite šį kodą: h1 {
4. fono spalva = rgb (255, 255, 255);
5. šrifto dydis = 40 taškų;
6. }

9 žingsnis: PERŽIŪRA

Viskas! Jūs baigėte. Jūs išmokote HTML, CSS ir įterpto kodo pagrindų, gerai padaryta. Galite redaguoti kodą, kad jis atitiktų jūsų skonį, ir parodyti viską, ko norite. Nuo tada galite tęsti savo svetainės kūrimo kelionę ir amžinai tobulėti.