Kódszerkesztő

Készítsd el az első oldaladat

1. 01

   Nyisd meg az index.html fájl fülét.

2. 02

   Illeszd be az alábbi HTML-kódot a szerkesztőbe.

3. 03

   Az „Előnézet” részen megjelenik a Hello címsor. Az előnézet röviddel azután frissül, hogy abbahagyod a gépelést.

4. 04

   Nyisd meg a style.css fájlt, és add hozzá az alábbi CSS-kódot. A címsor kék lesz.

5. 05

   Nyisd meg a script.js fájlt, és add hozzá az alábbi JavaScript-kódot. A címsor szövege It works lesz.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="greeting">Hello</h1>
  <script src="script.js"></script>
</body>
</html>

h1 { color: blue; }

document.querySelector("h1").textContent = "It works";

A kezdőprojektben az index.html, a style.css és a script.js fájl található. A HTML-nek hivatkoznia kell a CSS- és JavaScript-fájlokra, ahogy ebben a példában is. Önmagában a fájlok létrehozása nem elég ahhoz, hogy a böngésző használja őket.

Ellenőrizd az előnézetet és a konzolt

Az „Előnézet” rész a fájljaidból összeállított oldalt mutatja. Ha van index.html, azt használja, egyébként a projekt első HTML-fájlját. A helyi CSS- és JavaScript-hivatkozásokat a projekt mappáiból tölti be.

A „Konzol” részen láthatod az előnézet üzeneteit és hibáit. A JavaScript-kódba írt console.log("Preview ready") paranccsal saját üzenetet jeleníthetsz meg. Írd be a konzol beviteli mezőjébe a 2 + 3 kifejezést, és nyomj Entert. A kiértékelés az előnézetben történik.

Az előnézet böngészőben futó JavaScriptet hajt végre. Nem indít szervert, nem telepít csomagokat, és nem futtat Pythont, PHP-t, Javát vagy más szerveroldali nyelvet. A fájltípus kiválasztásával ilyen fájlt is írhatsz, de ez nem jelenti azt, hogy a böngésző futtatni tudja.

A kód külön előnézeti keretben fut, a böngésző korlátozásaival. A kódodban szereplő külső szkriptek, képek és hálózati kérések ettől még kapcsolatba léphetnek más webhelyekkel. Csak olyan kódot futtass, amelynek érted a hatását.

Fájlok hozzáadása, átnevezése és törlése

Válaszd a „Fájl hozzáadása” lehetőséget, jelöld ki a fájltípust, és adj meg egy nevet. A kiválasztott kiterjesztés automatikusan a névhez kerül. Ha a név már foglalt, a szerkesztő egy számmal egészíti ki, hogy ne írja felül a meglévő fájlt.

A fájlt a fülére vagy a „Mappák és fájlok” részen látható nevére kattintva nyithatod meg. A fülek a kijelölt mappa fájljait mutatják. A mappa melletti pluszjellel új fájlt vagy almappát hozhatsz létre benne.

A fájl melletti ceruzával átnevezheted a fájlt. Az Enter vagy a mezőn kívülre kattintás menti az új nevet, az Escape pedig megszakítja az átnevezést. A kiterjesztést, például a .css végződést, átnevezéskor is tartsd meg.

A fájl fülén lévő kereszt megerősítés után törli a fájlt. Nem csupán az aktuális fület zárja be. Mielőtt törölsz valamit, amire még szükséged lehet, tölts le róla biztonsági másolatot.

A fájlok átnevezése vagy áthelyezése nem módosítja a HTML-ben lévő hivatkozásokat. Ha a style.css fájlt az assets mappába teszed, a hivatkozást írd át erre: assets/style.css. Hibás hivatkozás esetén az előnézetből hiányozhat a formázás vagy nem működhet a szkript.

Rendezd mappákba a fájlokat

A mappaböngészőben áttekintheted a projektet. Nyiss le egy mappát a tartalmához, vagy jelöld ki, hogy a fájljai megjelenjenek a füleken. Az „Új mappa” parancs a kijelölt mappán belül hoz létre új mappát.

Fájlt vagy mappát egy másik mappára húzva helyezhetsz át. Érintőképernyőn előbb tartsd nyomva az elemet. A mappát nem helyezheted saját magába vagy a saját almappájába.

A mappák törlésére két külön művelet van. A „Mappa törlése” eltávolítja a mappát, a tartalmát pedig a projekt gyökérmappájába helyezi. A „Mappa és tartalmának törlése” a fájlokat és almappákat is törli. Ehhez be kell írnod a DELETE szót. A gyökérmappa nem törölhető.

Nagyobb képernyőn a „Rögzítés lebegő ablakként” nyitva tartja a mappaböngészőt kódszerkesztés közben. A kis méret gomb összecsukja az ablakot, a „Bezárás” pedig bezárja.

Dolgozz külön projektekben

A „Projektek” megnyitja a mentett projektjeidet. Válassz egyet a folytatáshoz, vagy válaszd a „Projekt létrehozása” lehetőséget, és adj meg egy nevet. A ceruzával átnevezheted a projektet, a törlés gombbal pedig megerősítés után eltávolíthatod.

A projektek ezen az eszközön, ebben a böngészőben tárolódnak. A mentésjelző mutatja, hogy a legutóbbi változások mentve vannak-e. Ez a mentés nem tölti fel a projektet egy fiókba, és nem hoz létre biztonsági másolatot a számítógépeden.

Az „Exportálás ZIP-ként” letölti az aktuális projektet a fájlokkal és mappákkal együtt. Őrizz meg egy másolatot a böngészőadatok törlése, eszközváltás vagy esetleg visszavonandó módosítások előtt. A jelenlegi szerkesztőben nincs ZIP-ből történő visszaállítás.

Indulj működő példából

Asztali gépen a „Sablonok” alatt a „Kígyójáték”, „Számológép” és „Rajzolóprogram” példák közül választhatsz. A sablon külön projektet hoz létre saját HTML-, CSS- és JavaScript-fájlokkal. A meglévő projektek a projektlistában maradnak.

Próbáld ki az előnézetet, módosíts egy kis részletet a kódban, és nézd meg az eredményt. Így könnyebben felismered, melyik fájl az oldal melyik részét vezérli.

Adj több helyet a szerkesztőnek

Asztali gépen az „Elrendezés” gombbal választhatod ki az elrendezést. Húzd az elválasztókat a panelek átméretezéséhez, vagy használd a kis és nagy méret gombjait. Telefonon a szerkesztő és az előnézet saját, kompakt elrendezésben jelenik meg, asztali elrendezésválasztó nélkül.

A „Fókusz mód” a szerkesztő elrendezésének része. Az Escape bezárja a párbeszédablakokat, de magából az üzemmódból nem lép ki. Ehhez használd újra a fókusz gombját.

Tedd olvashatóbbá a kódot

A „Beállítások” részen állíthatod be a szerkesztő témáját, a sorszámokat, a sortördelést, a címkék és zárójelek automatikus lezárását, valamint az aktuális sor kiemelését. A „Rendszer” az eszköz beállítását követi, a „Sötét” és „Világos” pedig közvetlenül meghatározza a szerkesztő megjelenését.

A „Betűtípus” részen betűtípust és 12–24 képpont közötti betűméretet választhatsz. A „Behúzás” részen a tabulátor szélessége kettő, négy vagy nyolc szóközre állítható. Ezeket a beállításokat a böngésző tárolja.

A „Beállítások” részen külön művelet a következő: „A szerkesztő összes adatának törlése”. Törli az összes projektet, fájlt, mentett adatot, statisztikát és beállítást. A megerősítéshez be kell írnod a DELETE szót. Előtte exportáld azokat a projekteket, amelyeket meg szeretnél tartani.

Használd a billentyűzetet

Ha nem jelenik meg az eredmény

Ha az előnézet üres, ellenőrizd, hogy van-e a projektben HTML-fájl, és írtál-e bele látható tartalmat. Ha az oldal formázás vagy működő interakciók nélkül jelenik meg, ellenőrizd a hivatkozott fájlneveket és mappaútvonalakat, az elírásokat is beleértve.

Nyisd meg a „Konzol” részt, és ellenőrizd a JavaScript-hibákat. Egy hiba megakadályozhatja a szkript további utasításainak végrehajtását. A szerkesztő nem javítja automatikusan a kódot.

Ha a mentésjelző nem vált vissza a „Mentve” állapotra, hagyd nyitva az oldalt, és újratöltés előtt exportáld a projektet. Privát böngészés, tárhelykorlátozások vagy a webhelyadatok törlése miatt a mentett projektek később elérhetetlenné válhatnak.