Fedezd fel a HTML5, CSS3 és modern webfejlesztés világát. Cikkek, útmutatók és gyakorlati tanácsok kezdőknek és haladóknak.
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:
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 olvasomTanuld 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 olvasomRendezett (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 olvasomA 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 olvasomStrukturá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 olvasomKé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 olvasomHTML5 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Á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 olvasomRé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 olvasomIsmerd 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 olvasomIsmerd 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 olvasomIsmerd 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 olvasomIsmerd 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 olvasomIsmerd 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 olvasomModern 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 olvasomIsmerd meg a reszponzív webdesignt: viewport meta tag, media queries, breakpointok, reszponzív egységek és mobilbarát technikák.
Tovább olvasomIsmerd meg a CSS átmeneteket (transition) és animációkat (@keyframes). Transform, timing functions és gyakorlati példák.
Tovább olvasomIsmerd meg a CSS változókat (custom properties), calc() függvényt, téma rendszereket és a BEM módszertant.
Tovább olvasomÁtfogó CSS összefoglaló az emelt szintű digitális kultúra érettségire: szelektorok, box model, pozicionálás és gyakorló feladatok.
Tovább olvasomHá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 olvasomIsmerd 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
Elit Hardver