Visual Studio Code: a webfejlesztő műhelye

A HTML-fájl egyszerű szöveg, így bármilyen szövegszerkesztő megfelel hozzá, a Word azonban nem, mert saját formázást tesz a szövegbe. A programozók kódszerkesztőt használnak, ami segít:

1. Töltsd le a hivatalos oldalról: code.visualstudio.com. Csak innen töltsd le, más oldalakról letöltött „ingyenes” változatok kártevőt tartalmazhatnak.
2. Telepítés közben pipáld be a „Hozzáadás a helyi menühöz” (Add "Open with Code" action) lehetőségeket: így jobb klikkel bármelyik mappát megnyithatod vele.
3. Indítás után bal oldalt kattints a négy kis négyzetből álló Bővítmények (Extensions) ikonra, keresd meg a Hungarian Language Pack bővítményt, és telepítsd. Újraindítás után magyar lesz a menü.
4. Kapcsold be az automatikus mentést: Fájl → Automatikus mentés.

Egy webhely mindig egy mappában él. Hozz létre egyet a dokumentumaid között sajat-oldal néven, és nyisd meg a VS Code-ban: Fájl → Mappa megnyitása. A bal oldali Intéző panelen most már látod a mappát.

1. Az Intéző panelen kattints az Új fájl ikonra.
2. Add neki az index.html nevet, és nyomj Entert.
3. A fájl megnyílik szerkesztésre. Ez lesz a webhelyed főoldala. Hogy miért épp ez a név, a következő leckében kiderül.

A VS Code-ba be van építve az Emmet nevű gyorsító. Az üres index.html fájlba írj be egy felkiáltójelet, és nyomd meg a Tab (vagy az Enter) billentyűt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

🔮 Jósold meg!

A vázban a nyelv angol (lang="en"), a cím pedig „Document”. Szerinted ez gond egy magyar weboldalnál?

A legegyszerűbb: a fájlkezelőben kattints duplán az index.html-re, és megnyílik az alapértelmezett böngészőben. Ha módosítasz a kódon, mentsd el, és a böngészőben nyomd meg az F5 billentyűt a frissítéshez.