Statikus HTML oldal + stílusállomány használata (CSS)

Követelmények | Laborházik | Dokumentáció

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

Követelmények:

• Beküldendő csatolt állomány neve: W01_<sorszám>_<felhasználónév>.zip (Pl. W01_05_xy52142.zip)
• "Subject":W01_<sorszám> (pl. W01_05)
• A levél tartalma:
  HTML oldal elérési útja (www.scs.ubbcluj.ro/~<felhasználónév>/<fantázianév>/<weboldal neve>)
  hallgató neve, 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!

I. Írjunk HTML oldalt, 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 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.
   • Definiáljuk a táblázat esetén a fejlécnek illetve a celláknak a stílusát.



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ú 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 (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ő 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.
   • Definiáljuk a táblázat esetén két különböző cella-stílust (a két stílus pepita minta szerint váltakozzon).



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 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.
   • 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).



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ő 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.
   • 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).



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 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.



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-cslá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ő 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 minta szerint váltakozzon).



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ő 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.
   • 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 mtöbbiben a második legyen érvényes).



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ő 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 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 minta szerint váltakozzon).



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 duplakerettel.
     A szöveg legyen balra illetve felfele tolódva a kereten belül.
   • Definiáljunk a táblázat esetén két különböző cella-stílust (a két stílus pepita minta szerint váltakozzon).



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) két elem színe, háttérszíne, szoveg-díszításe 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 é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).

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)