| feladat |
új tartalom, súlypontok |
feladatlap, források, megoldások |
inf_e_20061103_m_01
(Konferencia) |
- egységesség az oldalra: stílusok a dokumentum fejrészében
- pszeudoosztály hivatkozáshoz: :visited
- háttérszín html-jelöléssel, háttérkép url-megadással
- betűszín html-jelöléssel
- középre igazítás
|
|
inf_k_20111021_m_02
(A számítógépes játékok története) |
- képhez (üres) helyettesítő szöveg: szabványosság és akadálymentesítés
- <div> elem képek középre igazításához
- megjegyzés a html-dokumentumban (sortörés semlegesítésére)
- egységesség több oldalra: stílusok csak egy külön állományban
- háttérszín és betűszín rgb-összetevőkkel
- harmincpontos, elegánsan megoldható középszintű feladat
|
|
inf_k_20080527_m_03
(Vasúttörténet) |
- rossz gyakorlat: kép elhelyezése táblázattal
- oldalon belüli hivatkozás
- <div> elem szöveg középre igazításához
- egységesség az oldalra: stílusok a dokumentum fejrészében
- kivételkezelés szerkezeti pszeudoosztállyal: :nth-of-type()
- háttérszín angol névvel
- táblázatszélesség relatív beállítással
- cellaszélesség abszolút mértékegységgel
|
|
inf_k_20100531_m_2b
(Paprika) |
- jó gyakorlat: táblázat táblázattal
- egységesség az oldalra: stílusok a dokumentum fejrészében
- kivételkezelés szerkezeti pszeudoosztállyal: :nth-of-type()
- kivételkezelés a html-elemek melletti stílusokkal
- dobozmodell I.
- (külső) margó beállítása egy oldalon abszolút mértékegységgel
- automatikus (külső) margó abszolút szélességű táblázat középre igazításához
- kép, táblázat, valamint táblázatcella szegélyezése
|
|
inf_k_20070518_m_03
(Albatrosz) |
- rossz gyakorlat: cím, illetve kép elhelyezése táblázattal
- automatikus margó relatív szélességű táblázat középre igazításához
- jobbra zárt szedés
- sorkizárt szedés
|
|
inf_k_20050519_m_03
(Az ősember) |
- egységesség több oldalra: stílusok külön állományban
- egységesség az oldalra: stílusok a dokumentum fejrészében
- kivételkezelés a html-elemek melletti stílusokkal
- vonal szélessége (azaz hosszúsága)
- kép megjelenítése blokkelemként (középre igazításhoz)
|
|
inf_k_20051027_m_03
(Halma) |
- rossz gyakorlat: elrendezés táblázattal
- fejrészben az egyszer szereplő, illetve az egységesen formázandó elemek tulajdonságai
- két img-elemnél más-más stílusbeállítások
- táblázat egybeeső cellaszegélyekkel
- kép megjelenítése blokkelemként (középre igazításhoz)
|
|
inf_k_20060228_m_03
(Török dámajáték) |
- még rosszabb gyakorlat: elrendezés táblázaton belüli táblázattal
- fejrészben az egyszer szereplő, illetve az egységesen formázandó elemek tulajdonságai
- gyermekkombinátor a belső táblázat, illetve a belső cellák formázásához
- külön beállítás a szegély hiányához
- a specifikusabb szelektor felülírja a kevésbé specifikusat
|
|
inf_k_20140516_i_2b
(Alfa Bravo Charlie) |
- egységesség több oldalra: stílusok külön állományban
- sokszor beállítandó tulajdonság: stílusok a dokumentum fejrészében
- kivételkezelés a html-elemek melletti stílusokkal
- ismét táblázaton belüli táblázat…
- ezúttal leszármazotti kombinátor a belső táblázat celláinak formázásához
|
|
inf_k_20091026_m_03
(Házityúk) |
- egységesség több oldalra: stílusok külön állományban
- fejrészben az egyszer szereplő elemek tulajdonságai
- kivételkezelés a html-elemek melletti stílusokkal
- képet tartalmazó <div> elem a jobbra úsztatáshoz
|
|
inf_k_20100517_i_2b
(Elfeledett olimpiai érmek) |
- szerkezeti pszeudoosztály és gyermekkombinátor együtt:
szélességbeállítás a táblázat első sorának celláira
- táblázat cellaközének beállítása
- betűtípus beállítása, a felsorolás szerepe
|
|
inf_e_20050519_m_01
(Mobiltelefon) |
- üres oldalcím: szabványosság
- <div> elem sortörésekkel tagolt szövegblokkhoz
- függőleges igazítás
- betűméret (relatív) növelése
|
|
inf_k_20061103_m_03
(Energiaforrás) |
- <div> elem kép középre igazításához
- gyermekkombinátor és különböző alakú szerkezeti pszeudoosztályok:
:first-child és :nth-child()
- kép jobbra úsztatva
|
|
inf_k_20081031_m_03
(Bandy) |
- egységesség több oldalra: stílusok csak egy külön állományban
- függőleges igazítás szelektorokkal a második sor első cellájára
- dobozmodell II.
- belső margó
- kép jobbra úsztatva
|
|
inf_e_20090515_i_01
(Pöfeteg) |
- a táblázatformázás rossz gyakorlata helyett dobozmodell a táblázatok, illetve celláik esetén
- <div> elem a kép befoglalásához
- egymásba ágyazott <span> elemek a betűváltozattal, majd -színnel kiemelendő szöveg befoglalásához
- egységesség az oldalra: stílusok a dokumentum fejrészében
- kivételkezelés szerkezeti pszeudoosztállyal: :nth-child()
az első, illetve a második táblázatoszlop háttérszínéhez
- kép magasságának beállítása
|
|
inf_k_20060519_m_03
(Lepke) |
- rossz gyakorlat: oldal elrendezése, kép elhelyezése táblázattal
- jó gyakorlat: kép elhelyezése úsztatással
- egységesség több oldalra: stílusok külön állományban
- fejrészben az egyszer szereplő elemek tulajdonságai
- kivételkezelés a html-elemek melletti stílusokkal
- gyermekkombinátor több pszeudoosztállyal
:nth-of-type()>:nth-of-type()
- külön beállítás a szegély hiányához
|
|
inf_k_20141017_m_02
(Papír) |
- többszörös leszármazotti kombinátor
- háttérszín és betűszín rövidített html-jelöléssel
- táblázatcella magasságának beállítása
- kép megjelenítése blokkelemként
- betűváltozat; betűméret (relatív) növelése
|
|
inf_k_20071106_m_03
(Hangya) |
- <div> elem használata a szélességével (valamint színével)
kiemelt szövegblokk befoglalásához
- gyermekkombinátor pszeudoosztállyal
- megelőzőtestvér-kombinátor
- kép megjelenítése blokkelemként
|
|
inf_k_20090525_i_03
(Fényképalbum) |
- egységesség több oldalra: stílusok csak egy külön állományban
- osztályszelektor és leszármazotti kombinátor külön-külön, majd együtt
- betűméret százalékos növelése
|
|
inf_k_20120521_i_02
(Bíró László) |
- egységesség több oldalra: stílusok csak egy külön állományban
- szerkezeti pszeudoosztály, osztályszelektor és gyermekkombinátor
- harmincpontos, elegánsan megoldható emelt szintű feladat
|
|
inf_e_20110510_i_01
(Bástya) |
- szerkezeti pszeudoosztály: sakktábla színezése az oszlop-, illetve sorindex paritása szerint
- szerkezeti pszeudoosztály: külön szabály az első oszlopra, utolsó sorra
- a specifikusabb szelektor felülírja a kevésbé specifikusat;
!important felülírja a specifikusabb szelektort…
|
|
inf_e_20090515_m_01
(Jó étek) |
- osztályszelektor a felismerhető rendszer nélkül elhelyezkedő elemekhez
- betűváltozat; betűméret (relatív) növelése
- hálátlan feladat 15 pontért
|
|
inf_e_20070516_m_01
(Darts) |
- <div> elem képek egymás alá helyezéséhez
- megjegyzés a térköz megszüntetéséhez
- függőleges igazítás a térköz megszüntetéséhez
- vonal magassága (azaz vastagsága)
- beillesztett táblázat elavult attributumokkal; elavult, illetve lezáratlan elemekkel
- hálátlan feladat 21 pontért
|
|
inf_k_20110516_m_02
(Az internet története) |
- rossz gyakorlat a betűméretek kapcsán: aluldefiniált feladat, ötletszerű megoldás
- ismét táblázaton belüli táblázat…
- gyermekkombinátorok több generáción át a külső, illetve a belső táblázat formázásához
- sok munka a méretek, szegélyek s a színek beállításával, de látványos eredmény 24 pontért
|
|
inf_e_20080519_m_01
(Orchideák) |
- csak erős idegzetűeknek: spanok már a divek és a spanek, melléjük három piszkos trükk egy oldalon
-
- display: table
- display: table-cell
- display: inline-block
- példa a html-elemek mellett elhelyezett stílusok célszerűtlen használatára:
áttekinthetetlenség, ismétlés, módosíthatatlanság
|
|
inf_e_20081031_m_01
(Egry) |
- <span> elem a (helytelen és helytelenül megvalósított) szövegkiemeléshez
- többé-kevésbé egységes küllemű három oldal
- példa a gyermekkombinátor következetes alkalmazására
(és a leszármazotti kombinátor nem feltételenül következetes alkalmazására)
- megelőzőtestvér-kombinátor
|
|
inf_e_20100511_m_01
(Vitorláshal) |
- <span> elem a (helytelen és helytelenül megvalósított) szövegkiemeléshez
- sem nem egységes, sem nem szép három oldal
- példa a gyermekkombinátor következetes alkalmazására
- osztályszelektor
|
|
inf_e_20101022_m_01
(Braille-írás) |
- egyetlen <span> elem egyetlen (szerencsétlen) szövegkiemeléshez
- nem egységes, de legalább nem nagyon csúf három oldal
- példa a gyermekkombinátor következetes alkalmazására
- ha valahol, akkor itt szerepet kaphatott volna a hozzáférhetőség szempontja…
|
|
