1
Alapozás
2 leckeMi történik, amikor beírsz egy címet a böngészőbe, és hol készülnek maguk a fájlok. Enélkül a többi lecke csak varázslás.
Szakmai informatika · Webfejlesztés · HTML5 és CSS3
HTML & CSS alapok – a teljes anyag újra, alapoktól
Ez a tananyag nulláról építi fel a webszerkesztést: mi az a HTML, hogyan épül fel egy weboldal, milyen elemekből áll, és hogyan adunk neki külsőt CSS-sel. Minden témakörnél sok példát látsz, és azonnal azt is, hogy mit csinál belőle a böngésző. Nincs elméleti magolás: minden lecke végén önellenőrző kérdésekkel nézheted meg, mennyit értettél meg.
18
lecke három modulban
147
élő példa a böngésző eredményével
134
önellenőrző kérdés
~10
óra tanóra-anyag
Tananyag
3 blokk · 18 tétel
2
HTML alapok
9 leckeA weboldal tartalmi váza. Minden elemet példával, magyarázattal és élő eredménnyel — szemantikus elemek nélkül, tisztán az alapokon.
- 3 A dokumentum vázadoctype, head, body, meta, elem–tag–attribútum 35 perc →
- 4 Szöveges elemekCímsorok, bekezdés, kiemelés, idézet, entitások 35 perc →
- 5 Listákul, ol, dl, egymásba ágyazás, számozás 25 perc →
- 6 Linkek és útvonalakhref, relatív/abszolút út, horgonyok, mailto 35 perc →
- 7 Képek és médiaimg, alt, formátumok, video, audio, iframe 35 perc →
- 8 TáblázatokSorok, cellák, fejléc, colspan és rowspan 35 perc →
- 9 Űrlapok I. – alapokform, input, label, name és value, kötelező mezők 35 perc →
- 10 Űrlapok II. – mezőtípusokLegördülő, jelölőnégyzet, rádiógomb, gombok 35 perc →
- 11 div, span, id, classBlokk vs. soron belüli, és a CSS-hez vezető híd 30 perc →
3
CSS alapok
7 leckeA megjelenés nyelve. Hova írjuk, hogyan célozzuk meg a megfelelő elemet, és miért pont az a szabály érvényesül, amelyik.
- 12 Mi a CSS, hova írjukHárom elhelyezés, szabály felépítése, miért külső fájl 35 perc →
- 13 Kijelölők I.Elem, osztály, azonosító, kombinátorok, attribútum 40 perc →
- 14 Kijelölők II. – pszeudók:hover, :nth-child, ::before, ::after 35 perc →
- 15 Kaszkád és specificitásMelyik szabály nyer és miért — öröklődés, !important 35 perc →
- 16 Színek és tipográfiaSzínmegadás, betűtípusok, méretek, sortáv 40 perc →
- 17 A dobozmodellmargin, border, padding, box-sizing, árnyékok 40 perc →
- 18 Megjelenés és egységekdisplay, px/em/rem/%, háttérképek 35 perc →
Nincs találat erre a keresésre. Próbáld más szóval — például lista, űrlap, szín.
Hogyan haladj
1. Olvasd és nézd
Minden példánál ott van, mit csinál belőle a böngésző. Előbb találd ki, mi lesz az eredmény, csak utána nézd meg.
2. Gépeld be
Ne másolj: a kódot gépeld le VS Code-ban. A gépelés közben rögzül a szintaxis és a sorrend.
3. Törd el
Vegyél ki egy záró taget, írj el egy osztálynevet. Nézd meg, mi történik — így tanulsz hibát javítani.
4. Kérdezd ki magad
Minden lecke végén önellenőrző kérdések várnak. Amelyikre nem tudod a választ, azt a részt olvasd el újra.
Mire lesz szükséged
- Egy böngészőre —
Chrome,FirefoxvagyEdge, mindegy. - A
VS Codeszerkesztőre, benne aLive Serverbővítményre. - Egy mappára a gépeden, ahova a gyakorló fájljaidat mented — például
C:\web\. - Semmi másra. Nem kell szerver, adatbázis, keretrendszer vagy regisztráció.