Készítsen egy kávézót A webhely megtalálása: 9 lépés

2025 Szerző: John Day | [email protected]. Utoljára módosítva: 2025-01-23 14:47

Ebben az utasításban megmutatom, hogyan lehet egy egyszerű webhelyet létrehozni, amely a közeli kávézókat jeleníti meg a Google Térkép, a HTML és a CSS használatával

Kellékek

Egy számítógép

Szövegszerkesztő (Atomot használok)

Wifi kapcsolat

1. lépés: Válasszon szövegszerkesztőt

Én az Atomot használom, ami innen tölthető le. A letöltés után készítsen új projektet

2. lépés: Hozza létre az új projektet

1. Nyissa meg az Atomot
2. Fájl keresése
3. A fájl alatt kattintson az új gombra
4. a bal alsó sarokban (mac) lesz egy gomb az új mappa létrehozásához
5. nevezd el a mappádat "Térképes webhely"
6. Nyomja meg a nyitott gombot a jobb alsó sarokban

3. lépés: Hozza létre az Index.html fájlt

1. Új fájl hozzáadása a mappához (Az atomban kattintson jobb gombbal a mappára, és nyomja meg az új gombot)
2. Nevezze el ezt a fájlt "Index.html"
3. Adja hozzá ezt az alapvető HTML -struktúrát, amelyet minden HTML -projektben használnak:

4. lépés: Szerezd meg a térképet

1. Látogassa meg a Google térképeket itt: Google Maps
2. Kávé keresése
3. meg kell vásárolnia az összes kávézót az általános területen
4. kattintson a kávé melletti három sorra
5. keresse meg a megosztási vagy beágyazási térképet
6. válassza ki a térkép beágyazását
7. Válassza ki a térkép méretét (én nagyot használtam), és véglegesítse a helyét
8. nyomja meg a HTML másolása gombot

5. lépés: Hozzáadás a webhelyhez

1. Menjen vissza a HTML -fájlhoz.
2. a két "" címke közé illessze be ezt a kódot:

'

KÁVÉZÁSI ÜZLETEK A KÖZELÜL

„A GOOGLE TÉRKÉPEKBŐL SZÁRMAZOTT BEÉPÍTETT KÓD”

'

6. lépés: Előnézet

Ez az első rész kész!

mentse el a fájlt, és keresse meg a számítógépén, kattintson duplán rá, és megnyílik az alapértelmezett böngészőben, hogy előnézeti legyen.

7. lépés: Tegye szebbé

1. A két "" címke közé tegye a következőt: "Kávézók a közelemben"
2. Adjon hozzá egy új fájlt az „Index.html” létrehozásával megegyező módon, de nevezze el „Style.css” -nek
3. vissza a HTML -fájlba, írja ezt a kódot a címe fölé,"
4. Keresse fel a Google képeket, és töltsön le egy aranyos clipartot egy csésze kávéból
5. Adja hozzá a képet a többi fájlunkat tartalmazó mappához
6. írja be a következő kódot a CSS fájlba: 'body {
7. background-image: url (A KÉP NEVE);
8. háttérméret: borító;
9. }'

8. lépés: Jobb megjelenés Pt2

1. ha most mentünk és előnézetet látunk, láthatjuk, hogy a webhelyek háttere most csempézett a kávéscsészeinkkel
2. Sajnos nehéz elolvasni a címünket
3. Tehát a CSS -ben a „body {}” alá írja be a következő kódot: h1 {
4. háttérszín = rgb (255, 255, 255);
5. betűméret = 40 képpont;
6. }

9. lépés: FELÜLVIZSGÁLAT

Ez az! Végeztél. Megtanulta a HTML, a CSS és a beágyazott kód alapjait, jól sikerült. Szerkesztheti a kódot, hogy illeszkedjen az ízléséhez, és megjelenítse a kívánt térképet. Ettől kezdve folytathatja webhelye építési útját, és örökké fejlődhet.