# Terrárium Projekt 1. rész: Bevezetés az HTML-be ```mermaid journey title Az Ön HTML tanulási útja section Alapok Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Tartalom Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Szemantika Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![Bevezetés az HTML-be](../../../../translated_images/hu/webdev101-html.4389c2067af68e98.webp) > Sketchnote készítette [Tomomi Imura](https://twitter.com/girlie_mac) Az HTML, vagyis a HyperText Markup Language, minden általad valaha látogatott weboldal alapja. Gondolj az HTML-re úgy, mint a weboldalak vázára – ez határozza meg, hogy hová kerül a tartalom, hogyan van szervezve, és mit jelképez minden egyes elem. Míg a CSS később „felöltözteti” az HTML-t színekkel és elrendezéssel, és a JavaScript életre kelti interaktivitással, az HTML biztosítja azt az alapvető szerkezetet, amely minden mást lehetővé tesz. Ebben a leckében elkészíted egy virtuális terrárium felületének HTML szerkezetét. Ez a gyakorlati projekt megtanítja az alapvető HTML fogalmakat, miközben valami vizuálisan vonzó dolgot építesz. Megtanulod, hogyan szervezz tartalmat szemantikus elemek segítségével, hogyan dolgozz képekkel, és hogyan hozd létre az interaktív webalkalmazás alapját. A lecke végére rendelkezel majd egy működő HTML oldallal, amely növényképeket jelenít meg rendezett oszlopokban, készen a következő leckében történő stílusozásra. Ne aggódj, ha elsőre egyszerűnek tűnik – pontosan ilyennek kell lennie az HTML-nek, mielőtt a CSS ráteszi a vizuális fényét. ```mermaid mindmap root((HTML Alapok)) Structure DOCTYPE Deklaráció HTML Elem Fejléc Szakasz Törzs Tartalom Elements Címkék & Attribútumok Önállóan lezáró címkék Beágyazott elemek Blokk vs Inline Content Szöveges elemek Képek Konténerek (div) Listák Semantics Jelentőségteljes címkék Akadálymentesség Képernyőolvasók SEO Előnyök Best Practices Helyes beágyazás Érvényes jelölés Leíró Alt szöveg Rendezett struktúra ``` ## Előadás előtti kvíz [Előadás előtti kvíz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Nézd meg és tanulj**: Nézd meg ezt a hasznos videós összefoglalót > > [![HTML alapok videó](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## A projekt beállítása Mielőtt belevágnánk az HTML kódba, állítsuk be a megfelelő munkakörnyezetet a terrárium projektedhez. Egy rendezett fájlszerkezet létrehozása már az elejétől fogva egy fontos szokás, amely jól fog szolgálni a webfejlesztési utadon. ### Feladat: Készítsd el a projekt szerkezetét Létrehozol egy külön mappát a terrárium projekthez, és hozzáadod az első HTML fájlodat. Két megközelítést használhatsz: **1. lehetőség: Visual Studio Code használata** 1. Nyisd meg a Visual Studio Code-ot 2. Kattints a „Fájl” → „Mappa megnyitása” vagy használd a `Ctrl+K, Ctrl+O` (Windows/Linux) vagy `Cmd+K, Cmd+O` (Mac) billentyűkombinációt 3. Hozz létre egy új mappát `terrarium` néven, és válaszd ki 4. Az Explorer panelen kattints az „Új fájl” ikonra 5. Nevezd el a fájlt `index.html`-nek ![VS Code Explorer új fájl létrehozása](../../../../translated_images/hu/vs-code-index.e2986cf919471eb9.webp) **2. lehetőség: Parancssoros parancsok használata** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Ezek a parancsok a következőket végzik el:** - **Létrehoz** egy új könyvtárat `terrarium` néven a projekthez - **Belép** a terrarium könyvtárba - **Létrehoz** egy üres `index.html` fájlt - **Megnyitja** a fájlt szerkesztésre a Visual Studio Code-ban > 💡 **Pro tipp**: Az `index.html` fájlnév különleges a webfejlesztésben. Amikor valaki meglátogat egy weboldalt, a böngészők automatikusan keresik az `index.html` fájlt, mint az alapértelmezett megjelenítendő oldalt. Ez azt jelenti, hogy egy olyan URL, mint `https://mysite.com/projects/`, automatikusan az `index.html` fájlt szolgálja ki a `projects` mappából anélkül, hogy a fájlnevet meg kellene adni az URL-ben. ## Az HTML dokumentum szerkezetének megértése Minden HTML dokumentum egy meghatározott szerkezetet követ, amelyet a böngészőknek érteniük kell a helyes megjelenítés érdekében. Gondolj erre a szerkezetre úgy, mint egy hivatalos levélre – vannak előírt elemek meghatározott sorrendben, amelyek segítik a címzettet (jelen esetben a böngészőt) a tartalom helyes feldolgozásában. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta karakterkészlet>"] C --> F["<meta nézetablak>"] B --> G["<body>"] G --> H["<h1> Főcím"] G --> I["<div> Konténerek"] G --> J["<img> Képek"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Kezdjük az alapvető alapokkal, amelyek minden HTML dokumentumnak szükségesek. ### A DOCTYPE deklaráció és a gyökérelem Egy HTML fájl első két sora a dokumentum „bevezetője” a böngésző számára: ```html <!DOCTYPE html> <html></html> ``` **Mit is csinál ez a kód?** - **Deklarálja** a dokumentum típusát HTML5-ként a `<!DOCTYPE html>` használatával - **Létrehozza** a gyökér `<html>` elemet, amely tartalmazza az összes oldaltartalmat - **Megteremti** a modern webes sztenderdeket a helyes böngészői megjelenítéshez - **Biztosítja** a konzisztens megjelenést különböző böngészőkben és eszközökön > 💡 **VS Code tipp**: Ha az egérrel fölé viszed az egymelyik HTML címkének a VS Code-ban, akkor hasznos információkat láthatsz az MDN Web Docs-ból, köztük használati példákat és böngésző kompatibilitási adatokat. > 📚 **Tudj meg többet**: A DOCTYPE deklaráció megakadályozza, hogy a böngészők „quirks mode”-ba lépjenek, amelyet nagyon régi weboldalak támogatására használtak. A modern webfejlesztés az egyszerű `<!DOCTYPE html>` deklarációt használja az [szabványkövető megjelenítés](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) biztosítására. ### 🔄 **Pedagógiai ellenőrzőpont** **Állj meg és gondold át**: Mielőtt folytatnád, győződj meg róla, hogy érted: - ✅ Miért van szükség minden HTML dokumentumban a DOCTYPE deklarációra - ✅ Mit tartalmaz a `<html>` gyökérelem - ✅ Hogyan segíti ez a szerkezet a böngészők helyes oldaltervezését **Gyors önellenőrzés**: Tudnád saját szavaiddal elmagyarázni, mit jelent a „szabványkövető megjelenítés”? ## Alapvető dokumentum metaadatok hozzáadása Egy HTML dokumentum `<head>` része tartalmazza azokat a fontos információkat, amelyekre a böngészőknek és keresőmotoroknak szükségük van, de amelyeket a látogatók nem látnak közvetlenül az oldalon. Gondolj rá úgy, mint a „kulisszák mögötti” információra, amely segíti az oldalad helyes működését és megjelenését különféle eszközökön és platformokon. Ez a metaadat megmondja a böngészőknek, hogyan jelenítsék meg az oldalt, milyen karakterkódolást használjanak, és hogyan kezeljék a különböző képernyőméreteket – ezek mind elengedhetetlenek a professzionális, elérhető weboldalak létrehozásához. ### Feladat: Add hozzá a dokumentum fejlécét Helyezd be ezt a `<head>` részt az `<html>` nyitó és záró címkék közé: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Mit csinálnak ezek az elemek?** - **Beállítja** az oldal címét, amely a böngészőfülekben és keresési találatokban megjelenik - **Megadja** az UTF-8 karakterkódolást a szövegek helyes megjelenítéséhez világszerte - **Biztosítja** a kompatibilitást a modern Internet Explorer verziókkal - **Konfigurálja** a reszponzív dizájnt úgy, hogy a nézetablak illeszkedjen az eszköz szélességéhez - **Szabályozza** a kezdeti nagyítási szintet, hogy a tartalom természetes méretben jelenjen meg > 🤔 **Gondolkodj el rajta**: Mi történne, ha ezt a viewport meta taget állítanád be: ``? Ez arra kényszerítené az oldalt, hogy mindig 600 pixeles szélességű legyen, ami megtöri a reszponzív tervezést! Tudj meg többet a [helyes viewport beállításról](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## A dokumentum törzsének felépítése A `` elem tartalmaz minden látható tartalmat az oldalon – mindent, amit a felhasználók meglátnak és amellyel interakcióba lépnek. Míg a `` rész utasításokat adott a böngészőnek, a `` rész tartalmazza a tényleges tartalmat: szövegeket, képeket, gombokat és egyéb elemeket, amelyek létrehozzák a felhasználói felületet. Adjunk hozzá a törzs szerkezetét, és értsük meg, hogyan működnek az HTML címkék együtt a jelentésteli tartalmak létrehozásához. ### Az HTML címke szerkezet megértése Az HTML párosított címkéket használ az elemek meghatározásához. A legtöbb címke egy nyitó címkéből áll, pl. `

`, és egy záró címkéből, pl. `

`, közrefogva a tartalmat: `

Hello, világ!

`. Ez egy bekezdés elemet hoz létre a "Hello, világ!" szöveggel. ### Feladat: Add hozzá a törzs elemet Frissítsd az HTML fájlodat úgy, hogy tartalmazza a `` elemet: ```html Welcome to my Virtual Terrarium ``` **Ez a teljes szerkezet a következőt biztosítja:** - **Létrehozza** az alapvető HTML5 dokumentum keretet - **Tartalmazza** a szükséges metaadatokat a helyes böngészői megjelenítéshez - **Létrehoz** egy üres törzset, készen a látható tartalomhoz - **Követi** a modern webfejlesztési jó gyakorlatokat Most készen állsz hozzáadni a terrárium látható elemeit. `
` elemeket fogunk konténerekként használni a tartalom különböző részeinek szervezéséhez, és `` elemeket a növényképek megjelenítéséhez. ### Képek és elrendezési konténerek használata A képek speciálisak az HTML-ben, mert „önzáró” címkéket használnak. Ellentétben például a `

`, amelyek körülveszik a tartalmat, az `` címke az összes szükséges információt magában hordozza a címkében attribútumok segítségével, mint például a `src` a kép fájlútvonalához és az `alt` az akadálymentesség miatt. Mielőtt képeket adnál a HTML-hez, megfelelően kell szervezned a projekt fájlokat azáltal, hogy létrehozol egy képek mappát és belehelyezed a növény grafikai fájlokat. **Elsőként állítsd be a képeket:** 1. Hozz létre egy `images` nevű mappát a terrárium projekt mappájában 2. Töltsd le a növény képeket a [megoldás mappából](../../../../3-terrarium/solution/images) (összesen 14 növénykép) 3. Másolj át minden növényképet az új `images` mappádba ### Feladat: Hozd létre a növény megjelenítő elrendezést Most add hozzá a növény képeket, rendszerezve két oszlopba a `` címkék között: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Lépésenként ez történik a kódban:** - **Létrehoz** egy fő oldal konténert `id="page"` az összes tartalom tárolására - **Létrehoz** két oszlop konténert: `left-container` és `right-container` - **Szervez** 7 növényt a bal oldali oszlopba és 7 növényt a jobb oldali oszlopba - **Befoglal** minden egyes növény képet egy `plant-holder` divbe az egyedi pozícionáláshoz - **Alkalmaz** egységes osztályneveket a CSS stilizáláshoz a következő leckében - **Hozzárendel** egyedi azonosítókat minden növény képhez a JavaScript interakciókhoz később - **Tartalmaz** helyes fájlútvonalakat, amelyek a képek mappára mutatnak > 🤔 **Gondold át**: Észrevetted, hogy minden képnek jelenleg ugyanaz az alt szövege: „plant”? Ez nem ideális az akadálymentesség szempontjából. A képernyőolvasó használók négyszer hallanák a „plant” szót anélkül, hogy tudnák, melyik konkrét növényt mutatja az adott kép. Tudsz jobb, leíróbb alt szöveget kitalálni minden képhez? > 📝 **HTML elem típusok**: A `
` elemek „blokkszintűek” és teljes szélességet foglalnak el, míg a `` elemek „inline” jellegűek és csak a szükséges szélességet foglalják el. Mit gondolsz, mi történne, ha az összes `
` címkét ``-re változtatnád? ### 🔄 **Pedagógiai ellenőrzőpont** **Szerkezet megértése**: Szánj egy pillanatot az HTML szerkezet átnézésére: - ✅ Fel tudod ismerni a fő konténereket az elrendezésedben? - ✅ Megérted, miért kap minden kép egyedi azonosítót? - ✅ Hogyan írnád le a `plant-holder` div-ek szerepét? **Vizuális ellenőrzés**: Nyisd meg az HTML fájlt egy böngészőben. Látnod kell: - Egy egyszerű listát a növényképekből - A képeket két oszlopba rendezve - Egyszerű, stílus nélküli elrendezést **Ne feledd**: Ez a letisztult megjelenés pontosan olyan, amilyennek az HTML-nek lennie kell, mielőtt a CSS hozzáteszi a stílust! Ezzel a jelöléssel megjelennek majd a növények, bár még nem lesznek csinosak – erre való a következő leckében a CSS! Egyelőre egy stabil HTML alapot kaptál, amely megfelelően szervezi a tartalmaidat és követi az akadálymentességi jó gyakorlatokat. ## Szemantikus HTML használata az akadálymentességért A szemantikus HTML azt jelenti, hogy az elemeket jelentésük és céljuk szerint választjuk, nem pusztán a megjelenésük alapján. Ha szemantikus jelölést használsz, akkor a weboldalad szerkezetét és jelentését kommunikálod a böngészők, keresőmotorok és segítő technológiák, például képernyőolvasók felé. ```mermaid flowchart TD A[Tartalomhoz hozzá kell adni valamit?] --> B{Milyen típusút?} B -->|Főcím| C["

"] B -->|Alcím| D["

,

, stb."] B -->|Bekezdés| E["

"] B -->|Lista| F["

    ,
      "] B -->|Navigáció| G["