2. Munkakörnyezet és fájlok

Mit fogsz tudni a lecke végén

Létrehozol egy rendes projektmappát, és tudod, mi kerül bele.
Betartod a fájlnév-szabályokat, és tudod, miért vannak.
Készítesz egy üres index.html-t VS Code-ban, és megnyitod a böngészőben.
Beállítod a Live Servert, és ismered a mentés → frissítés körforgást.
Felismered a négy leggyakoribb „de hát nekem nem működik" hibát.

1Mire lesz szükséged

Kevesebbre, mint gondolnád. A webfejlesztés kezdő szintjén két programra van szükséged, és mindkettő ingyenes.

Program	Mire való?	Megjegyzés
Böngésző Chrome / Firefox / Edge	Itt nézed meg, amit készítettél	Már van a gépeden. Mindegy, melyiket használod — de fejlesztés közben érdemes ugyanazt, hogy megszokd a fejlesztői eszközeit.
VS Code Visual Studio Code	Ebben írod a kódot	Ingyenes, a `code.visualstudio.com` címről tölthető le. Nem tévesztendő össze a „Visual Studio"-val — az egy másik, sokkal nagyobb program.

MIÉRT NEM JEGYZETTÖMB?

Jegyzettömbbel is lehetne HTML-t írni — a fájl attól még ugyanaz a sima szöveg. De a VS Code színezi a kódot (rögtön látod, ha elrontottad az idézőjelet), kiegészíti a tageket, behúzza a sorokat, és jelzi a hibákat. Kezdőként ez nem kényelem, hanem tanulási segédeszköz.

Egyetlen bővítmény, amit telepíts: Live Server

A VS Code-ban balra oldalt találsz egy négyzetekből álló ikont (Extensions, vagy Ctrl+Shift+X). Írd be a keresőbe: Live Server, és nyomj Install-t. Hogy mire jó, azt az 5. pontban látod meg — és onnantól nem fogod nélküle akarni.

2A projektmappa

Minden weboldalnak saját mappája van. Nem az Asztalon szanaszét heverő fájlok, nem a Letöltések mappa — egy külön mappa, amiben minden benne van, ami az oldalhoz kell.

Javaslat: hozz létre egy gyűjtőmappát a munkáidnak, és abban minden feladatnak egy almappát:

ajánlott mappaszerkezet

C:\web\
├── 01-bemutatkozo\
│   ├── index.html
│   └── kepek\
│       └── profil.jpg
├── 02-recept\
│   ├── index.html
│   └── kepek\
└── 03-urlap\
    └── index.html

MIÉRT SZÁMÍT EZ?

Mert a HTML-ben útvonalakkal hivatkozol majd a képekre és a többi oldalra (6. és 7. lecke). Az útvonal mindig a mappaszerkezethez igazodik. Ha a fájljaid össze vannak keveredve, a képeid nem fognak megjelenni, és nem fogod érteni, miért.

Nyisd meg a mappát, ne a fájlt

Ez egy apró, de fontos szokás: a VS Code-ban ne egy fájlt nyiss meg (File → Open File), hanem a mappát (File → Open Folder). Így bal oldalt látni fogod a projekt összes fájlját, tudsz köztük váltani, újat létrehozni — és a Live Server is ehhez a mappához fog igazodni.

Gyorsabb út: a Fájlkezelőben kattints jobb gombbal a mappára → „Open with Code".

3Fájlnév-szabályok

A weben a fájlnevek nem csak neveket jelentenek: a cím részévé válnak. Ha van egy kapcsolat.html fájlod, akkor az oldal címe valami.hu/kapcsolat.html lesz. Ezért van négy szabály, amit mindig betartunk.

Szabály	Rossz	Jó
Csak kisbetű a szerverek egy része megkülönbözteti a kis- és nagybetűt	`Kapcsolat.HTML`	`kapcsolat.html`
Nincs ékezet az ékezetek átalakulnak a címsorban, és néha eltörnek	`rólam.html`	`rolam.html`
Nincs szóköz a szóközből a címsorban `%20` lesz	`kis hobbi.jpg`	`kis-hobbi.jpg`
Beszédes név fél év múlva is tudd, mi az	`uj2 (1).html`	`termek-reszletek.html`

SZOKÁS, AMIT ÉRDEMES FELVENNI

Több szóból álló nevet kötőjellel köss össze: rolam-reszletesen.html. Ez a webes szabvány — az aláhúzás (_) is működik, de a keresők a kötőjelet kezelik szóelválasztóként.

Az egyetlen kivétel: index.html

Egy fájlnév kötött: a index.html. Ez a kezdőlap hagyományos neve. Ha valaki megnyitja a mappádat a szerveren cím nélkül (valami.hu/), a szerver automatikusan az index.html-t küldi. Minden feladatban ez lesz a főoldal neve.

4Az első fájl létrehozása

Hozz létre egy mappát: C:\web\proba
Nyisd meg VS Code-ban: File → Open Folder → válaszd ki a mappát
Bal oldalt, a fájllista fejlécén kattints az új fájl ikonra (egy lap, rajta +)
Írd be a nevét: index.html — a kiterjesztéssel együtt! — és Enter

Most van egy üres fájlod. Írd bele a következőt — egyelőre elég másolni, a 3. leckében minden sorát megértjük:

Az első működő weboldalad

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <title>Az első oldalam</title>
</head>
<body>
  <h1>Sikerült!</h1>
  <p>Ez itt az első saját weboldalam.</p>
</body>
</html>

Eredmény a böngészőben

Így néz ki minden díszítés nélkül, a böngésző alapértelmezett betűtípusával (ez általában Times New Roman). Ne ijedj meg tőle — a 12. leckétől kezdve ezen változtatunk.

GYORSÍTÓ TRÜKK — EMMET

Egy üres .html fájlban írj be egyetlen felkiáltójelet (!), majd nyomj Tab-ot. A VS Code kitölti helyetted az egész alapvázat. Ezt hívják Emmet-nek.

De: amíg tanulod a szerkezetet, gépeld le kézzel. Ha nem érted, mit generált a gép, akkor javítani sem fogod tudni.

MENTÉS!

Ctrl+S. A VS Code a fájl nevét a fülön fehér pöttyel jelöli, ha van nem mentett változás. Ha a böngészőben nem látod a módosításodat, az esetek felében egyszerűen nem mentettél.

5Megnyitás böngészőben és a Live Server

A) A kezdetleges mód: dupla kattintás

A Fájlkezelőben kattints duplán az index.html-re. Megnyílik a böngészőben. A címsorban ezt látod:

file:///C:/web/proba/index.html

Ez működik, de minden módosítás után kézzel kell frissítened (F5), és bizonyos dolgok (későbbi leckékben) nem működnek file:// módban.

B) A rendes mód: Live Server

A VS Code-ban kattints jobb gombbal az index.html-re a fájllistában → „Open with Live Server". (Vagy jobb alul a kék sávon: Go Live.)

Megnyílik a böngésző, és a címsorban most ez áll:

http://127.0.0.1:5500/index.html

Rész	Mit jelent?
`http://`	Most már igazi webes protokollal érjük el — nem fájlként.
`127.0.0.1`	„Ez a gép". A Live Server elindított egy pici szervert a saját gépeden.
`:5500`	A port száma — melyik „ajtón" figyel a szerver.

AMIÉRT MEGÉRI

A Live Server figyeli a fájljaidat. Amint mentesz (Ctrl+S), a böngésző magától frissül. Nem kell váltogatni az ablakok között és F5-özni. Tedd egymás mellé a két ablakot: bal oldalon a kód, jobb oldalon az eredmény — és látod, ahogy épül az oldalad.

A munka körforgása

Ez a kör másodpercek alatt lefut. Kis lépésekben dolgozz: írj pár sort, nézd meg, haladj tovább.

6VS Code, ami dolgozik helyetted

Néhány funkció, ami már az első naptól segít:

Mit csinálsz?	Mi történik?
Beírod: `<p>`	A VS Code automatikusan odateszi a `</p>` záró taget is, és a kurzort közéjük rakja.
Átírod a nyitó tag nevét	A záró tag neve vele együtt változik. Nem marad árván egy rossz záró tag.
`Shift`+`Alt`+`F`	Újraformázza az egész fájlt: helyes behúzás, egységes szerkezet. Használd gyakran!
`Ctrl`+`/`	Ki-be kapcsolja a kommentet a kijelölt sorokon. Hibakeresésnél aranyat ér.
Ráállsz egy színkódra	Megjelenik egy kis színes négyzet, kattintásra színválasztóval. (CSS-nél nagyon hasznos.)
Elrontod az idézőjelet	A színezés „elcsúszik" — hirtelen minden ugyanolyan színű lesz. Ez az egyik legjobb hibajelző.

A BEHÚZÁS NEM DÍSZ

A HTML-nek mindegy, hogy behúzod-e a sorokat — neked nem mindegy. A behúzásból látszik, melyik elem van melyiken belül. Ha egy elem rossz mélységben van, az szinte mindig hiba. Használd a Shift+Alt+F-et, és nézd meg, hova rakja a VS Code — gyakran ettől derül ki egy hiányzó záró tag.

7Az F12 — első pillantás

A böngészőben nyomj F12-t. Megnyílik egy panel, tele fülekkel. Most csak kettő érdekel minket — a többit a 25. leckében nézzük meg részletesen.

Fül	Mire jó most?
Elements (Elemek)	Itt látod az oldal élő szerkezetét. Ha ráviszed az egeret egy sorra, a böngésző kiemeli az oldalon. Fordítva is megy: `Ctrl`+`Shift`+`C`, majd kattints valamire az oldalon.
Console (Konzol)	Itt jelennek meg a hibaüzenetek. HTML-hibát nem mutat (arról nincs is), de például azt igen, ha egy kép vagy a CSS-fájl nem található. Ez lesz az első helyed, ahova benézel, ha valami nincs meg.

FONTOS KÜLÖNBSÉG

Az Elements fülön bele is tudsz írni az oldalba — de az csak a saját böngésződben, ideiglenesen változik meg. Frissítésre eltűnik, és a fájlodba semmi nem kerül bele. Kísérletezésre kiváló, de a valódi módosítást mindig a VS Code-ban csinálod.

8A négy klasszikus kezdő hiba

Ha valami „nem működik", 90%-ban ez a négy dolog valamelyike. Mielőtt a kódot kezded gyanúsítani, menj végig rajtuk.

Tünet	Ok	Megoldás
A böngésző kiírja a kódot szövegként, a tagekkel együtt	A fájl valódi neve `index.html.txt`	Nevezd át a fájlt `.html` végűre. A Windows elrejtheti a kiterjesztést: Fájlkezelő → Nézet → Fájlnévkiterjesztések bekapcsolásával láthatóvá teszed
A módosításod nem látszik a böngészőben	Nem mentettél, vagy nem frissítettél	`Ctrl`+`S`, majd `F5`. Makacs esetben `Ctrl`+`Shift`+`R` (gyorsítótár megkerülése)
A kép nem jelenik meg, csak egy törött ikon	Rossz útvonal, vagy a kép nincs a projektmappában	Nézd meg az F12 → Console hibaüzenetet; ellenőrizd a mappaszerkezetet és a fájlnevet betűre pontosan
Az ékezetes betűk kérdőjelek vagy krikszkrakszok	Hiányzik a `<meta charset="UTF-8">`	Tedd be a `<head>`-be (a 3. leckében részletesen)

A JÓ HIBAKERESŐ SORRENDJE

1. Mentettem? → 2. Frissítettem? → 3. Jó fájlt nézek? → 4. Mit mond az F12 Console? → 5. És csak ezután: mi lehet a kódban a baj?

Önellenőrző kérdések

Előbb válaszolj magadban, csak utána nézd meg a megoldást.

1. Miért nem jó fájlnév az, hogy Rólam Bővebben.html? Sorolj fel három okot!

Nagybetűket tartalmaz (egyes szerverek megkülönböztetik), ékezetes betű van benne, és szóköz is (a címsorban %20 lesz belőle). Helyesen: rolam-bovebben.html.

2. Mi lesz egy weboldal főoldalának a neve, és miért pont az?

index.html. Ha valaki fájlnév nélkül nyitja meg a címet (valami.hu/), a szerver automatikusan ezt küldi el.

3. A böngészőben megjelenik a HTML-kódod szövegként, a <h1> tagekkel együtt. Mi a baj?

A fájl nem .html kiterjesztésű — szinte biztosan .txt a vége (a Windows elrejtette). A böngésző ezért sima szövegfájlként kezeli, és nem értelmezi a jelöléseket.

4. Mi a különbség a file:///C:/web/index.html és a http://127.0.0.1:5500/index.html között?

Az első a fájlt közvetlenül a merevlemezről nyitja meg. A második egy helyi szerveren keresztül éri el ugyanazt a fájlt — ezt a Live Server indította. A második előnye, hogy mentés után magától frissül, és jobban hasonlít arra, ahogy az oldal élesben működik majd.

5. Átírsz valamit az F12 → Elements panelen, és jól néz ki. Mit kell még tenned?

Ugyanazt megcsinálni a VS Code-ban is, és elmenteni. Az Elements panelen végzett módosítás csak ideiglenes, a böngésző memóriájában él, és frissítéskor eltűnik — a fájlba semmi nem kerül bele.

9Összefoglalás

Két program kell: egy böngésző és a VS Code + a Live Server bővítmény.
Minden oldalnak saját projektmappája van, és a mappát nyitod meg VS Code-ban, nem a fájlt.
Fájlnevek: kisbetű, ékezet nélkül, szóköz helyett kötőjel, beszédes néven.
A főoldal neve mindig index.html.
A munka ritmusa: írsz → mentesz → magától frissül → megnézed. Kis lépésekben.
Shift+Alt+F újraformáz, F12 megnyitja a fejlesztői eszközöket.
Ha nem működik: mentettem? frissítettem? jó fájl? mit mond a Console? — és csak utána a kód.