Az első webhely létrehozása: 10 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:40

Ebben az oktatóanyagban megtanulhat egy alapvető weboldalt készíteni, amelyhez csatolt stíluslap és interaktív javascript fájl tartozik.

1. lépés: A mappa létrehozása

Hozzon létre egy mappát az általunk létrehozott fájlok tárolásához. Nyugodtan nevezze el tetszés szerint, csak ne feledje, hol található, mert később fájlokat mentünk hozzá.

2. lépés: Az első fájl létrehozása

Nyissa meg kedvenc szövegszerkesztőjét. Esetemben egyszerűen a Windows 10 beépített jegyzettömbjét fogom használni. Ha új fájlja van, írja be a következőt:

Ez az első weboldalam, amit egy oktatóanyag hozott neked

Ez az úgynevezett HTML -címke. Ez az 1. címsort jelenti. A címkében elhelyezett szöveg fejlécként jelenik meg az oldalon. Nyitva és zárva van így. A két címke közötti szöveg jelenik meg a böngészőben. Az a rész, amely azt mondja, egy attribútumot ad a címkének, amelyre hivatkozunk az x lépésben. Ha ez megtörtént, menjen tovább, és mentse a fájlt az 1. lépésben létrehozott mappába index.html néven.

3. lépés: Nyissa meg a fájlt

Most, hogy befejeztük, keresse meg a létrehozott mappában található fájlt, kattintson a jobb gombbal a fájlra, és válassza a "Megnyitás" opciót, és válassza ki az Ön által használt webböngészőt. Esetemben ez a google chrome. Most nézze meg eddigi kemény munkájának munkáját!

4. lépés: Az oldal formázása

A honlapunk egyébként nagyon egyszerű. Hozzáadjuk az úgynevezett lépcsőzetes stíluslapot, hogy kicsit megfűszerezzük a dolgokat. Hozzon létre egy új szövegfájlt, és írja be a következőt:

h1 {szín: kék; text-align: center;}

Itt azt mondjuk a böngészőnek, hogy keresse meg a h1 címke bármely elemét (erről a 2. lépésben tudtunk meg), és adjon neki egy kék színt, és igazítsa az oldal közepére. Mentse ezt a fájlt az 1. lépésben létrehozott mappába style.css néven.

5. lépés: Kapcsolja össze a Style.css fájlt az Index.html fájljával

Ezen a ponton két külön fájl van, amelyek nem tudnak egymásról. El kell mondanunk index.html fájlunknak, hogy van egy style.css fájlunk, amelyre hivatkozni szeretnénk, és meg kell ragadnunk némi stílust. Ehhez megnyitjuk az index.html fájlunkat a szövegszerkesztőnkben, és a h1 címke fölé hozzáadjuk az úgynevezett linkcímkét. A linkcímke úgy működik, ahogy névadója sugallja, hivatkozik valamire. Esetünkben egy stíluslap. Menj, és gépelj. A linkcímke önzáró címke, így nem szükséges befejező címke. A rel a relációt jelöli, a href pedig az indexfájlt jelzi, hol található a hivatkozott külső fájlunk. Most mentse el az index.html fájlt.

6. lépés: Tekintse meg új stílusú oldalát

Nézze meg újra a 3. lépést, és töltse be újra a weblapot, és nézze meg, hogyan tükröződnek a változások.

7. lépés: Gomb létrehozása

Nyissa meg újra index.html fájlját a szövegszerkesztőben, és írja be a következőt:

Kattints ide!

és mentse a fájlt. Ez egy gomb elemet hoz létre az oldalon. A mentés után nyissa meg újra a fájlt a 3. lépésben látható módon, és győződjön meg arról, hogy a gomb az oldal bal alsó sarkában található.

8. lépés: Hozza létre Javascript fájlját

Végül elkészítjük a javascript fájlt. Ez teszi interaktívvá webhelyünket. Nyisson meg egy szövegszerkesztőt, és írja be a következőt:

document.querySelector ("#gomb"). addEventListener ("click", function () {

document.querySelector ("#head"). internalText = "A fejléc megváltoztatása menet közben"

})

Mi azt tesszük, hogy megkérjük a dokumentumot, hogy találjon meg számunkra egy elemet a gomb azonosítójával, és a gomb reagáljon egy kattintási eseményre úgy, hogy megváltoztatja az elem szövegét a címsor azonosítójával: "A címsor megváltoztatása menet közben" ". Mentse a fájlt button.js néven az 1. lépésben létrehozott mappába.

9. lépés: Kapcsolja össze a Javascript és az indexfájlokat

Ahogy a style.css fájl esetében is, úgy nekünk is el kell mondanunk index.html fájlunknak a javascript fájlunkat. Írja be az alábbiakba az eddigi tevékenységeink alját:

A szkriptcímke lehetővé teszi számunkra, hogy szkriptnyelvet (esetünkben javascript) adjunk hozzá, hogy funkcionalitást biztosítsunk oldalunknak. Azt mondjuk neki, hogy keresse meg a button.js nevű fájlt, és adja hozzá a benne található kódot az indexfájlunkhoz. Miután beírta, mentse el a fájlt, és nyissa meg újra a fájlt a 3. lépés szerint.

10. lépés: Tesztelje az újonnan létrehozott gombot

Most menjen előre, és kattintson a gombra, és nézze meg a címsor változását!

Gratulálunk!! Most létrehozta első interaktív weboldalát! Kíváncsi vagyok, meddig tudná tovább vinni, ha tudja, mit tud most ??