# HTML5 Blog

Fedezd fel a HTML5, CSS3 és modern webfejlesztés világát. Cikkek, útmutatók és gyakorlati tanácsok kezdőknek és haladóknak.

#### Érettségi útmutató

A webes publikálás (HTML + CSS) csak EMELT SZINTEN követelmény a digitális kultúra érettségin. A leckék mellett jelöltük, melyik az érettségi anyag:

EMELT SZINT = Érettségi anyag BÓNUSZ = Nem kötelező, de hasznos VEGYES = Részben érettségi anyag

## 1. HTML-oldalak felépítése

VEGYES
2025. november 13. • 10 perc olvasás • HTML5 alapok

Ismerd meg a HTML dokumentumok alapszerkezetét: DOCTYPE, html, head és body elemek. Tanuld meg a metaelemek helyes használatát, és fedezd fel a szemantikus HTML előnyeit a header, main és footer elemekkel.

Tovább olvasom

## 2. Szöveges elemek HTML-ben

EMELT SZINT
2025. november 13. • 15 perc olvasás • HTML5 alapok

Tanuld meg a HTML szöveges elemeit: címsorok (h1-h6) hierarchiája, bekezdések használata, szemantikus kiemelések (strong, em) és vizuális formázás (b, i). Ismerd meg a span inline konténer használatát CSS stílusozáshoz és JavaScript célpontként. Fedezd fel a sortörések és elválasztó vonalak helyes alkalmazását élő példákkal és kódrészletekkel.

Tovább olvasom

## 3. Listák HTML-ben

EMELT SZINT
2025. november 13. • 11 perc olvasás • HTML5 alapok

Rendezett (ol) és rendezetlen (ul) listák részletes bemutatása. Ismerd meg a lista attribútumokat (type, start, reversed), valamint a beágyazott listák helyes használatát gyakorlati példákkal. Tanuld meg, hogyan készíts professzionális navigációs menüket és tartalomjegyzékeket.

Tovább olvasom

## 4. Hivatkozások és navigáció HTML-ben

EMELT SZINT
2025. november 13. • 14 perc olvasás • HTML5 alapok

A linkek részletes bemutatása: belső és külső hivatkozások, anchor elemek oldalon belüli ugráshoz, relatív és abszolút útvonalak közötti különbségek. Ismerd meg a target és rel attribútumokat, a biztonsági szempontokat, valamint a mailto és tel linkeket. Gyakorlati példákkal a könyvtárszerkezetről.

Tovább olvasom

## 5. Táblázatok HTML-ben

EMELT SZINT
2025. november 13. • 16 perc olvasás • HTML5 alapok

Strukturált adatok megjelenítése táblázatokkal: table, tr, td, th elemek használata. Ismerd meg a táblázat fejléceket, a thead, tbody, tfoot struktúrát, valamint az oszlop- és sorkombinálás technikáit colspan és rowspan attribútumokkal. Gyakorlati példák árlistákkal, órarendekkel és összehasonlító táblázatokkal.

Tovább olvasom

## 6. Képek beágyazása HTML-ben

VEGYES
2025. november 13. • 15 perc olvasás • HTML5 alapok

Képek beágyazása a weboldalba: img elem használata, alt attribútum fontossága az akadálymentesség és SEO szempontjából. Tanuld meg a width és height attribútumok szerepét, a reszponzív képkezelést srcset és sizes használatával, valamint a modern picture elemet és lazy loading technikát.

Tovább olvasom

## 7. Multimédia beágyazása HTML-ben

VEGYES
2025-11-13 • 18 perc olvasás • HTML5 alapok

HTML5 multimédia elemek: video és audio beágyazása natív vezérlőkkel, több formátum használata, feliratok hozzáadása WebVTT-vel. Ismerd meg az iframe elemet YouTube videók és Google Maps térképek beillesztéséhez, a sandbox biztonsági attribútumot, valamint a reszponzív beágyazás technikáit.

Tovább olvasom

## 8. Űrlapok HTML-ben

BÓNUSZ
2025. november 13. • 22 perc olvasás • HTML5 alapok

Átfogó útmutató HTML űrlapokról: form, input, label, select, textarea elemek használata. Ismerd meg az összes input típust (text, email, password, number, date, checkbox, radio, file), a validációs attribútumokat (required, pattern, min, max), valamint a GET és POST metódusok közötti különbségeket. Teljes regisztrációs űrlap példával.

Tovább olvasom

## 9. Szemantikus HTML

BÓNUSZ
2025. november 14. • 20 perc olvasás • HTML5 alapok

Részletes bemutatás a szemantikus HTML elemekről: header, nav, section, article, aside, footer. Ismerd meg, miért kulcsfontosságúak a keresőoptimalizálás (SEO) és akadálymentesség szempontjából. Tanuld meg a helyes használatukat gyakorlati példákkal, landmark navigációval, rich snippets lehetőségekkel és WCAG irányelvekkel.

Tovább olvasom

## 10. CSS alapok és szelektorok

EMELT SZINT
2025. november 23. • 20 perc olvasás • CSS3

Ismerd meg a CSS alapjait: beágyazási módok, szelektorok típusai, pszeudo-osztályok és a kaszkád működése. Kezdd el a weboldalad stílusozását!

Tovább olvasom

## 11. Színek és háttér

EMELT SZINT
2025. november 23. • 15 perc olvasás • CSS3

Ismerd meg a CSS színformátumokat (HEX, RGB, HSL), a háttérszínek és háttérképek beállítását, valamint a gradiens hátterek készítését.

Tovább olvasom

## 12. Szövegformázás

EMELT SZINT
2025. november 23. • 14 perc olvasás • CSS3

Ismerd meg a CSS szövegformázást: betűtípusok, font tulajdonságok, szöveg igazítás, sorköz, betűköz és text-shadow effektek.

Tovább olvasom

## 13. Div elem és Box model

EMELT SZINT
2025. november 23. • 18 perc olvasás • CSS3

Ismerd meg a div blokk szintű konténer elemet és a CSS box modellt: content, padding, border, margin. Tanuld meg a box-sizing, width, height és a termék kártyák készítését.

Tovább olvasom

## 14. Pozicionálás

VEGYES
2025. november 23. • 16 perc olvasás • CSS3

Ismerd meg a CSS pozicionálást: display típusok, position értékek (static, relative, absolute, fixed, sticky), z-index és overflow. Gyakorlati példák float és inline-block elrendezéssel.

Tovább olvasom

## 15. Flexbox és CSS Grid

BÓNUSZ
2025. november 14. • 25 perc olvasás • CSS3

Modern CSS layout rendszerek: Flexbox egydimenziós és CSS Grid kétdimenziós elrendezés. Gyakorlati példák navbar, termék kártyák, oldal layout készítéséhez. Bónusz anyag, nem érettségi követelmény.

Tovább olvasom

## 16. Reszponzív design és media queries

BÓNUSZ
2025. november 23. • 14 perc olvasás • CSS3

Ismerd meg a reszponzív webdesignt: viewport meta tag, media queries, breakpointok, reszponzív egységek és mobilbarát technikák.

Tovább olvasom

## 17. Átmenetek és animációk

BÓNUSZ
2025. november 23. • 12 perc olvasás • CSS3

Ismerd meg a CSS átmeneteket (transition) és animációkat (@keyframes). Transform, timing functions és gyakorlati példák.

Tovább olvasom

## 18. CSS változók és modern technikák

BÓNUSZ
2025. november 23. • 10 perc olvasás • CSS3

Ismerd meg a CSS változókat (custom properties), calc() függvényt, téma rendszereket és a BEM módszertant.

Tovább olvasom

## 19. CSS Összefoglaló és érettségi felkészítő

EMELT SZINT
2025. november 23. • 25 perc olvasás • Összefoglaló

Átfogó CSS összefoglaló az emelt szintű digitális kultúra érettségire: szelektorok, box model, pozicionálás és gyakorló feladatok.

Tovább olvasom

## 20. Gyakorlati projekt - Receptoldal készítése

EMELT SZINT
2025. november 23. • 45 perc gyakorlat • Házi feladat

Házi feladat projekt: készíts egy receptoldalt HTML és CSS segítségével! Lépésről lépésre útmutató letölthető sablonokkal.

Tovább olvasom

## 21. JavaScript alapok

BÓNUSZ
2025. november 27. • 15 perc olvasás • JavaScript

Ismerd meg a JavaScript alapjait: változók, függvények, DOM manipuláció és eseménykezelés. Bónusz lecke azoknak, akik szeretnének betekintést kapni a webfejlesztés programozási oldalába.

Tovább olvasom