E laborházi lényege:
- a fontosabb HTML tag-ek ismerete és használata
- stílusfájl lehetőségeinek ismerete, kihasználása

• W01_nn_xxxxxxx.zip : a HTML oldalak, illetve CSS állomány (képet csak akkor, ha nem túl nagy)
  Az állomány mérete ne haladja meg a 2MB-ot
• W01_nn_xxxxxxx.txt : a web-oldal elérési útja, illetve ebben is jelenjen meg a hallgató neve, a csoportja, a feladat száma és szövege.

Laborházik:
Megj.: A feladat első része mindenkire vonatkozik, a stílusfájl használatára vonatkozó rész egyéni, mindenki a sorszáma szerinti feladatot választja).
A HTML szerkesztő használatát mellőzzük!
Próbáljunk meg az adott követelmények betartása mellett (esetleg annak ellenére :)...) az oldal esztétikájára is figyelmet fordítani.

I. Írjunk néhány összefüggő HTML oldalt tetszőleges (lehetőleg értelmes) tartalommal, mely kötelező módon tartalmazza az alábbi elemeket:

• Cím
• Legalább 3 különböző paragrafus (tetszőleges szöveggel)
• Legalább 3 külső lapra való hivatkozás, melyek közt legyen relatív és abszolút elérési úttal megadott, és legalább 2 ezek közül olyan HTML oldalra mutasson, ami szintén a házi része
• Hivatkozás, melynek segítségével az oldalon belüli részhez ugorhatunk (pl. lap tetején a HTML oldal egyes részeihez való ugrási lehetőség, illetve vissza)
• Lista (1 vagy 2, sorszámozott vagy sorszám nélküli, annak függvényében, ami a stílusfájlban szerepel)
• Táblázat
• Kép, melyre rákattintva az illető kép nagyított változatát kapjuk
• Arra vonatkozó kommentek, hogy a II. pontnál szereplő követelmények melyik részét hol használtuk

1. • A HTML törzsének (body) a háttérszínét, illetve a szöveg színét
   • Oldjuk meg, hogy a főcím illetve alcím (header 1, 2) színe, betűmérete, betű-stílusa (normál, dőlt, stb.) legyen egyforma
   • definiáljunk (és használjunk a HTML oldalon) két különböző stílusú paragrafus-t (p). Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy a két különböző HTML elem: em és p stílusa (betűtípus-család, betű vastagsága, szöveg igazítás, díszítés) ugyanaz legyen
   • Definiáljunk egy link típust, melynek más és más a színe és szövegdíszítése ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk
   • Definiáljunk egy olyan paragrafus stílust, mely be van keretezve széles, duplakerettel.
     A szöveg legyen a keret közepén (ugyanolyan méretű behúzás legyen mindenütt).
   • Definiáljuk a táblázat esetén a fejlécnek illetve a celláknak a stílusát.
   • Oldjuk meg -táblázat használata nélkül-, hogy egy képnek a jobb, illetve baloldalán is legyen szöveg.



2. • A HTML törzsének (body) állítsunk be egy fix háttérképet (ne gördüljön a szöveggel), mely az x tengely mentén ismétlődik. (Lehetőleg ne legyen túl sötét a kép.)
   • Oldjuk meg, hogy két HTML elem (em és p) színe és háttérszíne legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú alcímet (header2). Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem h2, h3 stílusa (betűtípus-család, betűméret, betű vastagsága, szöveg igazítás) ugyanaz legyen.
   • Definiáljunk két különböző hivatkozás (link) típust, melyeknek más és más a színe ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan div stílust, mely be van keretezve szaggatott vonallal.
     A szöveg legyen balra tolódva a kereten belül (a jobboldali behúzás legyen nagyobb).
   • Definiáljuk a táblázat esetén két különböző cella-stílust (a két stílus pepita -lásd sakktábla- minta szerint váltakozzon).
   • Rajzoljunk különböző színű, és egyre kisebb méretű téglalapokat egymásba ágyazva. A legbelső téglalapban szöveg is szerepeljen. (Tipp: div elem + háttérszín)



3. • A HTML törzsének állítsunk be a szöveggel együtt gördülő háttérképet (lehetőleg ne legyen túl sötét kép), mely csak az x tengely mentén ismétlődik.
   • Oldjuk meg, hogy a főcím (h1) és al-alcím (h3) igazítása, színe, betűtípusa, legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú alcímet (h2). Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem paragrafus (p) és lista (ul) stílusa (szín, betűtípus-család, betű vastagsága, szöveg igazítás, díszítés) ugyanaz legyen.
   • Definiáljunk egy hivatkozás (link) típust, melynek más és más a színe, betű-stílusa (normál, dőlt, stb.) ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan paragrafus stílust, mely be van keretezve szimpla vonallal.
     A szöveg legyen jobbra tolódva a kereten belül (a baloldali behúzás legyen nagyobb).
   • Definiáljuk a táblázat esetén két különböző sor-stílust (a különböző stílusú sorok felváltva szerepeljenek).
   • Oldjuk meg táblázat használata nélkül, hogy az oldal egy részén a szöveg három oszlopban jelenjen meg.



4. • A HTML törzsének a szöveggel együtt gördülő háttérképet (lehetőleg ne legyen túl sötét kép), mely csak az y tengely mentén ismétlődik.
   • Oldjuk meg, hogy két HTML elem (em és p) színe, háttérszíne, és szövegdíszítése legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú (sorszám nélküli) listát.
     Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem, h1 és h2 stílusa (betűtípus-család, betű vastagsága, betű stílusa, díszítés) ugyanaz legyen.
   • - Definiáljunk két különböző hivatkozás (link) típust, melyeknek más és más a színe, szövegdíszítése ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan div stílust, mely be van keretezve duplakerettel.
     A szöveg legyen balra illetve felfele tolódva a kereten belül (az alsó illetve jobboldali behúzás nagyobb).
   • Definiáljnuk a táblázat esetén két különböző cella-stílust, melyben a szöveg igazítása más és más (az első oszlopban az első, a többiben a második legyen érvényes).
   • Oldjuk meg (táblázat használata nélkül), hogy az oldal egy részén a szöveg két különböző színű, egymás mellett elhelyezett téglalapban szerepeljen.



5. • A HTML törzsének állítsunk be fix háttérképet (ne gördüljön a szöveggel), mely az x és y tengely mentén egyaránt ismétlődik. (Lehetőleg ne legyen túl sötét a kép.)
   • Oldjuk meg, hogy a főcím (h1) és alcím (h2) színe, betűtípus-családja, szöveg-díszítése legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú sorszámozott listát.
     Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem em, p stílusa (betűméret, betű vastagsága, betű stílusa, szöveg igazítás, díszítés) ugyanaz legyen.
   • Definiáljunk egy hivatkozás (link) típust, melynek más és más a színe, betű stílusa (normál, dőlt, stb.) ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan paragrafus stílust, mely be van keretezve vastag kerettel. A keret elemei (alsó, felső, stb. rész) legyenek más-más színűek.
   • Definiáljuk a táblázat esetén a fejlécnek illetve a celláknak a stílusát.
   • Oldjuk meg (táblázat használata nélkül), hogy az oldal egy részén egymás mellett szerepeljen két kép, illetve közöttük egy színes téglalapban elhelyezett szöveg



6. • A HTML törzsének a háttérszínét, illetve a szöveg színét.
   • Oldjuk meg, hogy a főcím (h1) és al-alcím (h3) színe, háttérszíne, betűtípus-családja legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú paragrafus-t (p).
     Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem em, h2 stílusa (szín, betűtípus-család, betű vastagsága, szöveg-díszítése) ugyanaz legyen.
   • Definiáljunk két különböző hivatkozás (link) típust, melyeknek más és más a színe, szövegdíszítése ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan paragrafus stílust, mely be van keretezve szaggatott vonallal.
     A szöveg legyen jobbra illetve lefele tolódva a kereten belül.
   • Definiáljuk a táblázat esetén két különböző cella-stílust (a két stílus pepita -lásd sakktábla- minta szerint váltakozzon).
   • Oldjuk meg (táblázat használata nélkül), hogy egymás mellé kerüljön több kép-szöveg páros (a képhez tartozó szöveg a kép jobboldalán helyezkedjen el, és az összetartozó kép illetve szöveg legyen bekeretezve)



7. • A HTML törzsének állítsunk be a szöveggel együtt gördülő háttérképet (lehetőleg ne legyen túl sötét kép), mely csak az x tengely mentén ismétlődik.
   • Oldjuk meg, hogy két elem (p, em) színe, betűtípus-családja betűmérete legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú főcímet (header1)
     Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem h2, h3 stílusa (szín, betűtípus-család, betűméret, betű vastagsága, betű stílusa, szöveg igazítás) ugyanaz legyen.
   • Definiáljunk két különböző hivatkozás (link) típust, melyeknek más és más a színe, betű stílusa (normál, dőlt, stb.) ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan div stílust, mely be van keretezve szaggatott vonallal.
     A szöveg legyen a keret közepén (a behúzás egyforma méretű legyen mindenütt).
   • Definiáljunk a táblázat esetén két különböző cella-stílust, melyben a szöveg igazítása más és más (az első oszlopban az első, a többiben a második legyen érvényes).
   • Rajzoljunk "lépcsőt", egymásra helyezett színes téglalapokból. A lépcsőfokok szöveget is tartalmazzanak.



8. • A HTML törzsének állítsunk be a szöveggel együtt gördülő háttérképet (lehetőleg ne legyen túl sötét kép), mely az x és y tengely mentén egyaránt ismétlődik.
   • Oldjuk meg, hogy a főcím (h1) és alcím (h2) színe, háttérszíne, betű-típus családja legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú (sorszám nélküli) listát.
     Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem em, p stílusa (szín, betűméret, szöveg-igazítása, szöveg-díszítése) ugyanaz legyen.
   • Definiáljunk két különböző hivatkozás (link) típust, melyeknek más és más a színe, szövegdíszítése ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan div stílust, mely be van keretezve szaggatott vonallal.
     A szöveg legyen balra tolódva a kereten belül (a jobboldali behúzás legyen nagyobb). A keret elemei (alsó, felső, stb. rész) legyenek más-más színűek.
   • Definiáljuk a táblázat esetén két különböző cella-stílust (a két stílus pepita -lásd sakktábla- minta szerint váltakozzon).
   • Rajzoljunk különböző színű téglalapokból díjkiosztó pódiumot (1., 2., 3 helyezés vagy arany-, ezüst-, bronzérem felirattal)



9. • A HTML törzsének állítsunk be a szöveggel együtt gördülő háttérképet (lehetőleg ne legyen túl sötét kép), mely az x és y tengely mentén egyaránt ismétlődik.
   • Oldjuk meg, hogy két elem (p és em) színe és háttérszíne legyen egyforma.
   • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú sorszámozott listát.
     Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
   • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem h1 és h2 stílusa (szín, betűtípus-család, betű stílusa, szöveg igazítás, díszítés) ugyanaz legyen.
   • Definiáljunk egy link típust, melynek más és más a színe, betű-stílusa (normál, dőlt, stb.) ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
   • Definiáljunk egy olyan div stílust, mely be van keretezve dupla kerettel.
     A szöveg legyen balra illetve felfele tolódva a kereten belül (a jobboldali- illetve fenti behúzás legyen nagyobb).
   • Definiáljunk a táblázat esetén két különböző cella-stílust (a két stílus pepita -lásd sakktábla- minta szerint váltakozzon).
   • Helyezzük egymás mellé többször ugyanazt a képet úgy, hogy az egyes képek részben fedjék egymást



10. • A HTML törzsének fix háttérképet (ne gördüljön a szöveggel), mely az x és y tengely mentén egyaránt ismétlődik. (Lehetőleg ne legyen túl sötét a kép.)
    • Oldjuk meg, hogy a főcím (h1) és alcím (h2) színe, háttérszíne, szöveg-díszítése legyen egyforma.
    • Definiáljunk (és használjunk a HTML oldalon) két különböző stílusú paragrafust (p)
      Használjunk csak az illető elemre vonatkozó stílusosztályokat (class).
    • Stílusosztályok segítségével oldjuk meg, hogy két különböző HTML elem em és h3 stílusa (szín, betűtípus-család, betű vastagsága, szöveg díszítése) ugyanaz legyen.
    • Definiáljunk két különböző link típust, mely(ek)nek más és más a színe, szövegdíszítése ha rámegyünk az egérrel, ha aktív, ha már meglátogattuk.
    • Definiáljunk egy olyan div stílust, mely be van keretezve szimpla vonallal.
      A szöveg legyen a keret közepén A keret két szélső része ne látszodjon.
    • Definiáljuk a táblázat esetén két különböző cella-stílust, melyben a szöveg igazítása más és más (az első oszlopban az első, a többiben a második legyen érvényes).
    • Helyezzük egymás alá többször ugyanazt a képet úgy, hogy az egyes képek részben fedjék egymást

Hasznos hivatkozások:

• W3Schools Online Web Tutorials - Sokminden megtalálható itt HTML illetve CSS-re vonatkozóan (referencia, oktatési segédanyagok, példák, stb.)
  Például:W3Schools Online Web Tutorials - CSS tutorial
• Bevezetés a CSS alapjaiba (magyar nyelvű cikk)