HTML Szerkesztők

Ebben a leckében megismerheted, milyen kódszerkesztők és online playground-ok állnak rendelkezésedre, hogyan telepítsd őket, és hogyan használhatod hatékonyan a fejlesztés során.

Mi az a kódszerkesztő?

A kódszerkesztő olyan program, amely megkönnyíti a HTML, CSS és JavaScript írását. Szintaxiskiemelést, automatikus kiegészítést, hibajelzést és egyéb fejlesztést támogató eszközöket kínál.

Népszerű asztali szerkesztők

Az alábbi szerkesztők mind ingyenesek vagy ingyenes próbaverziót kínálnak, és széles körben támogatottak a webfejlesztők körében:

• Visual Studio Code: Kedvencünk a VS Code, mivel kiterjedt bővítményrendszere és beépített terminálja van.
• Sublime Text: Gyors és könnyű, minimális erőforrásigénnyel, támogatja a bővítményeket.
• Atom: GitHub által fejlesztett, könnyen testreszabható és bővíthető szerkesztő.

Minden modern szerkesztő rendelkezik az alábbi alapvető funkciókkal:

• • Szintaxiskiemelés és témák
• • Intelligens automatikus kiegészítés
• • Valós idejű hibajelzés (linter)
• • Snippeket és makrókat támogató kódtöredékek
• • Beépített terminál a gyors parancsokhoz
• • Git integráció és verziókezelés

HTML szerkesztés Visual Studio Code-ban

A Visual Studio Code (VS Code) az egyik legnépszerűbb kódszerkesztő, különösen webfejlesztéshez. Az alábbi lépések bemutatják, hogyan kezdj el HTML fájlokat szerkeszteni benne.

1. Visual Studio Code letöltése és telepítése

Látogasd meg a hivatalos weboldalt (https://code.visualstudio.com/) és töltsd le az operációs rendszerednek megfelelő verziót. A telepítés egyszerű: kövesd a képernyőn megjelenő utasításokat.

2. Új projektmappa létrehozása és megnyitása

Hozz létre egy új mappát a számítógépeden, például: 'html-gyakorlat'. Ezután indítsd el a VS Code-ot, és a menüből válaszd ki: 'File' → 'Open Folder...', majd válaszd ki az előbb létrehozott mappát.

3. Új HTML fájl létrehozása

Kattints jobb gombbal a bal oldali fájlkezelőben a mappára, majd válaszd az 'Új fájl' opciót. Nevezd el például: 'index.html'.

4. Alap HTML sablon beírása

Írj be egy egyszerű HTML szerkezetet, vagy írd be: '! + Enter' a beépített Emmet bővítmény segítségével, hogy automatikusan generálódjon egy alap sablon.

5. HTML fájl megnyitása böngészőben

Kattints jobb gombbal a fájlra, majd válaszd a 'Reveal in File Explorer' vagy 'Show in Finder' opciót. Ezután dupla kattintással nyisd meg a fájlt az alapértelmezett böngésződben.

Kiegészítők és bővítmények

A legtöbb szerkesztő piactérrel rendelkezik, ahol további funkciókat, témákat és nyelvi csomagokat telepíthetsz.

Online szerkesztők és playground-ok

Ha nem szeretnél semmit telepíteni, ezek a webes eszközök azonnal használhatók:

• • ReadyTools – A ReadyTools többféle HTML Szerkesztővel rendelkezik, amelyek közül választhatsz. Akár az Akadémáiba beépítettet is ingyen használhatod.
• • CodePen – Interaktív környezet HTML, CSS és JavaScript kipróbálásához.
• • CodeSandbox – Projektalapú környezet modulokkal és csomagkezeléssel.