Cvičení k předmětu Internet

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í

  1. Podívejte se na zdrojový kód této stránky.
  2. 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.
  3. Přidejte metainformaci o kódování, které v textu použijete (jinými slovy, pište česky, ne cesky).
  4. 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.
  5. U některého odstavce odsaďte první řádku o několik znaků pomocí  .
  6. Použijte zvýraznění, tučné písmo, kurzívu, písmo s pevnou šířkou.
  7. Změňte barvu textu u některých elementů.
  8. Zvolte si písmo a jeho barvu tagem <font>.
  9. Použijte tag <pre> pro vysázení předformátovaného textu.
  10. Do stránky vložte vzorec, například: a2 - b2 = (a + b)(a - b), nebo [(x < y) & (y < z) => (x < z)]
  11. Do textu přidejte odkazy na nějaké jiné stránky.
  12. 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
  13. Nastavte si u obrázku rámeček 2 pixely široký.
  14. 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, ...).
  15. Změňte seznam na číslovaný s číslovanými kapitolami i podkapitolami.
  16. 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.
  17. Vytvořte popis tagu <img> tak, že jeho parametry budou uspořádané v seznamu definic.
  18. 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.
  19. Průběžně své stránky kontrolujte validátorem, zkuste si stránky otevřít v různých prohlížečích.

  1. Vytvořte ve stránce tabulku. Může jít například o tabulku výsledků turnaje.
  2. 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:
    a b
    c d
    f
  3. Zkuste různá nastavení rámečku, mezer a zarovnání buněk.
  4. Použijte jiný styl pro první řádek s názvy sloupců, případně pro první sloupec s nadpisy řádků.
  5. Vytvořte tabulku, kde budou některé buňky roztažené přes víc políček.
  6. Použijte tabulku k vytvoření informační tabulky podobné té na začátku této stránky.
  7. 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.
  8. 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í.
  9. Převeďte některou ze stránek do XHTML a zkontrolujte validátorem.

  1. Vyzkoušejte si různé způsoby připojení stylu k dokumentu.
  2. 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.
  3. Vyzkoušejte si různé způsoby formátování textu a okrajů.
  4. Své styly si průběžně kontrolujte validátorem CSS
  5. K formátování vhodně použijte značky <div> a <span>. Například k vytvoření vícebarevného textu na jedné řádce.
  6. 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.)
  7. 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í.
  8. 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).
  9. 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.)
  10. 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í.)
  11. 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.
  12. 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.
  13. 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.

  1. Vytvořte php skript, který vyprodukuje jen stránku s jednoduchým textem, abyste si zkusili jednoduché použití PHP.
  2. Vytvořte formulář, po jeho potvrzení tlačítkem OK dojde k zobrazení obsahu formuláře.
  3. 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.
  4. 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ě.

  1. 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.
  2. 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.
  3. 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.
  4. 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).
  5. 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Valid HTML 4.01 Strict