Základní informace
Cvičící: | Petr Kučera |
e-mail: | kucerap (zavináč) ktiml (tečka) mff (tečka)
cuni (tečka) cz |
Termín: | Středa 12:20 SU2 (letní semestr) |
Zápočet: | Za zpracování zápočtové práce, což by měly
být dostatečně netriviální webové stránky, tj. měly by využívat html,
css, javascript nebo php, databázi s alespoň dvěma propojenými
tabulkami. Stránky můžete odevzdat kdykoli, požaduji osobní předvedení
s tím, že mi popíšete i strukturu stránek a alespoň letmo ukážete
zdrojáky. |
Odkazy
Možné editory (zde na ulabech) -- Vim, (další
jsem nezkoušel, používám jen Vim) bluefish,
quanta, screem, ...
Stránky je na ulabech možné umístit do adresáře
~/WWW, potom je možné se na ně odkazovat pomocí
http://www.ms.mff.cuni.cz/~login (plus další
specifikace souboru v rámci adresáře ~/WWW).
Cvičení
- Podívejte se na zdrojový kód této stránky.
- Vytvořte prázdnou stránku, která bude obsahovat jen titulek a
zkontrolujte ji validátorem.
Nezapomeňte přidat první řádek s informací o typu dokumentu.
- Přidejte metainformaci o kódování, které v textu použijete (jinými
slovy, pište česky, ne cesky).
- Vložte do stránky několik nadpisů a nadpisů různých úrovní,
zalomení řádku, případně vodorovnou čáru. A pochopitelně i obyčejné
odstavce.
- U některého odstavce odsaďte první řádku o několik znaků
pomocí .
- Použijte zvýraznění, tučné písmo, kurzívu, písmo s pevnou šířkou.
- Změňte barvu textu u některých elementů.
- Zvolte si písmo a jeho barvu tagem <font>.
- Použijte tag <pre> pro vysázení předformátovaného textu.
- Do stránky vložte vzorec, například:
a2 - b2 = (a + b)(a - b), nebo
[(x < y) & (y < z) => (x < z)]
- Do textu přidejte odkazy na nějaké jiné stránky.
- Do stránky vložte obrázky, z nichž některé budou fungovat i jako
odkazy.
U všech použijte parametry height, width a alt
- Nastavte si u obrázku rámeček 2 pixely široký.
- Pomocí seznamu s odrážkami vytvořte obsah dokumentu, který se
odkazuje na jednotlivé části pomocí #. Obsah bude mít několik
úrovní (kapitola, podkapitola, ...).
- Změňte seznam na číslovaný s číslovanými kapitolami i
podkapitolami.
- Rozdělte stránku do několika tak, že jedna bude obsahovat obsah,
další stránky pak jednotlivé kapitoly. Obsah se bude odkazovat na
kapitoly i podkapitoly v rámci stránek.
- Vytvořte popis tagu <img> tak, že jeho parametry
budou uspořádané v seznamu definic.
- Použijte tag <map> k definici mapy k obrázku, která zajistí,
že při kliknutí na různé části obrázků se použijí různé odkazy.
- Průběžně své stránky kontrolujte validátorem, zkuste si stránky
otevřít v různých prohlížečích.
- Vytvořte ve stránce tabulku. Může jít například o
tabulku výsledků turnaje.
- S pomocí colspan a rowspan vytvořte následující
tabulku. Barvy jsou dodány pomocí kaskádových stylů, lze také použít
bgcolor:
- Zkuste různá nastavení rámečku, mezer
a zarovnání buněk.
- Použijte jiný styl pro první řádek s názvy sloupců,
případně pro první sloupec s nadpisy řádků.
- Vytvořte tabulku, kde budou některé buňky
roztažené přes víc políček.
- Použijte tabulku k vytvoření informační tabulky podobné té na
začátku této stránky.
- Vytvořte tabulku se dvěma sloupci, v levém bude obrázek (ne moc
velký), napravo od něj vždy komentář či název.
- Převeďte stránky do rámců. V jednom rámci bude menu, které bude do
jiného umísťovat požadované stránky. Zkuste použít víc rámců a jejich
různé rozmístění.
- Převeďte některou ze stránek do XHTML a zkontrolujte validátorem.
- Vyzkoušejte si různé způsoby připojení stylu k dokumentu.
- Navrhněte barevné schéma svých stránek, určete barvu případně
obrázek na pozadí,
textu, odkazů, a to i podle typu (navštivené, nenavštívené, aktivní a
zvlášť můžete měnit barvu při přejíždění myší),
případně odlište barevně nadpisy. K tomu je možné využít Generátor
barevných schémat.
- Vyzkoušejte si různé způsoby formátování textu a okrajů.
- Své styly si průběžně kontrolujte validátorem CSS
- K formátování vhodně použijte značky
<div> a <span>. Například k vytvoření
vícebarevného textu na jedné řádce.
- Vytvořte stránku, na jejímž horním konci bude titulek a vlevo
menu, které se bude odkazovat na jednotlivé části stránky. Zatímco
ostatní text stránky se bude hýbat podle pohybu v textu, titulek i
menu budou stále na stejném místě. Asi jako byste použili pro titulek
a menu zvláštní rámce, ale bude to vyřešeno bez rámců, jen pomocí
stylů. (Zaměřte se na position: fixed, případně relative
a případně z-index.)
- Vytvořte verzi této stránky pro tisk. Ve verzi pro tisk chcete mít
jen jeden titulek nahoře, text roztažený přes celou stránku a žádné
menu. Také barvy by bylo vhodné pro tisk nějak omezit, aby to i po vytištění
na černobílé tiskárně bylo ke koukání.
- Vytvořte tabulku, jejíž jednotlivé elementy budou mít styl
přiřazen pomocí kaskádování. Styl pomocí class nebo
id bude mít přiřazena pouze značka <table>,
zatímco podřazeným elementům přiřadíte styl pomocí kaskádování. Zkuste
nastavení rámečků a barev. Odlište první sloupec a první řádek (můžete
použít například :first-child).
- U té tabulky vytvořte zvlášť styl pro lichý a sudý řádek a odlište
je barevně. (To už nepůjde jen kaskádováním.)
- U číslovaných seznamů zkuste různé způsoby číslování (arabské
číslice, velké či malé římské číslice, písmena a pod.). Zařiďte, aby
seznam první úrovně byl číslovaný jinak než jeho podseznam, podseznam
podseznamu atd. (Nejlépe pomocí kaskádování.)
- Pomocí pseudo elementů :first-letter a
:first-line vytvořte odstavec, jehož první znak bude
roztažený přes tři řádky a bude obtékaný textem zprava. První řádka
odstavce, případně kromě prvního znaku, bude kurzívou, zbytek bude
normálním písmem. Bude se vám hodit nejspíš float. Pomocí
margin zařiďte, aby kolem toho prvního znaku bylo trochu
místa a nebyl moc nalepený na okolní text.
- Do textu vložte obrázek a nechte jej obtékat textem. Zkuste si na
něm různá nastavení margin, padding a
border. Udělejte z něho odkaz a zařiďte, aby se kolem něj
nezobrazoval rámeček.
- Pomocí pseudoelementu :before a vlastností
content, counter a souvisejících vytvořte seznam
nadpisů 1. hodina, 2. hodina, atd. tak, že pokud použijete tag
h3 s vhodnou třídou bez obsahu, tento se vygeneruje sám.
- Vytvořte php skript, který vyprodukuje jen stránku
s jednoduchým textem, abyste si zkusili jednoduché použití PHP.
- Vytvořte formulář, po jeho potvrzení tlačítkem OK dojde k
zobrazení obsahu formuláře.
- Za pomoci PHP vytvořte stránku s diskuzí, diskuzní příspěvky budou
uloženy všechny za sebou v jednom souboru, ze kterého se bude
generovat i stránka s obsahem diskuze. Přidání příspěvku pak bude
obnášet přidání jeho textu k tomuto souboru. Soubor už může být
předpřipraven v HTML.
Aby za vás mohl Apache do souboru zapisovat, musí k tomu mít
práva. To lze zajistit například pomocí
fs setacl ~/WWW www rwl Místo adresáře WWW můžete dát
libovolný podadresář, abyste nedovolovali Apachi psát všude, ale jen
tam kde chcete. Soubor dědí práva adresáře.
- Pomocí PHP vytvořte kvíz. Otázky i odpovědi budou ve zvláštním
textovém souboru s vaším formátem tak, aby jej byl schopen upravovat
kdokoli bez použití HTML. U každé otázky bude vyznačena i správná
odpověď. Uživatel bude dostávat jednu otázku po druhé, tedy ne všechny
na jedné stránce, nakonec se dozví, kolik jich zodpověděl špatně a
kolik správně, případně i to, jaké byly správně a jaké špatně.
- Vytvořte počítadlo přístupů ke stránce, při načtení stránky se do
externího souboru uloží záznam o tomto načtení, s případnými
informacemi z $_SERVER.
- Vytvořte skript PHP, který načte soubor csv (comma separated
values), jehož jméno je zadané
v parametru a zobrazí jej jako tabulku. V souboru csv může první
řádek odpovídat hlavičce s názvy sloupců. Počet sloupců si musí skript
sám spočítat podle prvního řádku.
- Upravte předchozí skript tak, aby mohl podle dalšího parametru
vybírat jen sloupce ze zadaného výčtu, sloupce jsou dané pořadím, asi
jako v unixovém příkazu cut.
- Upravte předchozí skript tak, aby byl schopen vybírat jen řádky,
které v daném sloupci obsahují danou hodnotu (buď přesně, nebo třeba
vyhovující zadanému regulárnímu výrazu).
- Vytvořte jednoduché přihlašovadlo, bude obsahovat formulář s
textovým vstupem a potvrzujícím tlačítkem, pod tím bude aktuální
seznam účastníků, pokud se někdo chce přihlásit, napíše do textového
políčka svoje jméno a potvrdí, pokud se chce odhlásit, učiní totéž,
ale za situace, kdy je již přihlášen.
- Vytvořte tlačítko s obrázkem, které mění svůj vzhled, pokud po něm
přejíždíte myší, tj. mění se jeden obrázek za druhý. Tohle nelze
vyřešit pomocí pseudoelementu hover, protože v něm nemůžete
měnit zdrojový soubor obrázku, zatímco v JavaScriptu ano. Pomocí stylu
by to šlo, pokud byste měli oba vzhledy tlačítka v jednom obrázku.
- Vytvořte formulář s různými typy vstupních políček (text,
radio, select) a pomocí JavaScriptu zkontrolujte, zda
jsou všechna políčka vyplněna, případně zda mají přípustnou hodnotu,
například, že textové pole, které má obsahovat jen číslice, obsahuje
jen tyto. Formulář bude obsahovat dvě tlačítka, jedno s nápisem
OK, druhé s nápisem Smazat. Po stisku klávesy
enter nebo tlačítka OK se provede kontrola
správnosti a obsah formuláře se objeví pod formulářem, například
pomocí vlastnosti innerHTML. Po
stisku tlačítka Smazat se obsah formuláře vymaže a navrátí
zpět do původního stavu s implicitními hodnotami. Mějte na paměti, že
v některých prohlížečích nemusí stisk klávesy enter vyvolat
událost stisku žádného tlačítka.
- Vytvořte rozbalovací navigaci, která bude použitelná i s vypnutým
JavaScriptem. Při kliknutí na položku menu se objeví podmenu, při
druhém kliknutí se opět skryje. Pokud je JavaScript vypnutý, je vidět
stále celé menu se všemi položkami rozbalenými. Dá se to vyřešit
vhodnou dynamickou změnou stylu položek menu (zvláště se zaměřte na
display). Můžete to potom rozšířit
tak, že podmenu se rozbalí, pokud na položku najedete myší, a sbalí,
pokud opustíte položku nebo podmenu (události onmouseover a
onmouseout). Dále můžete pomocí +/- u položky menu naznačit,
zda jde o sbalené/rozbalené menu.
- K nějakému elementu vytvořte text v bublince, který se objeví při
najetí na element myší a zmizí, opustíte-li jej. Dá se to sice vyřešit
definováním hodnoty vlastnosti title toho elementu, ale když
si to uděláte posvém pomocí JavaScriptu, může pak zobrazovaná bublinka
mít jakýkoli formát a jakýkoli obsah.