Předmět Internet - cvičení

(MFF UK - SWI096)

Viz též: informace, slidy k přednášce

1. cvičení - HTML (11.4.2005)

  1. Vytvoř prázdný HTML dokument, který bude obsahovat pouze titulek stránky.
  2. Zkontroluj tento dokument validátorem.
  3. Vyzkoušej si práci s HTML entitami, napiš třeba vzorec x < 3.
  4. Do stránky vlož několik úrovní nadpisů, odstavce, zalomení řádku, případně čáru.
  5. Pomocí seznamu s odrážkami vytvoř obsah dokumentu, který se na jednotlivé části bude odkazovat pomocí #.
  6. Vhodně použij značky pro zvýraznění, tučné písmo, kurzívu a pevnou šířku znaku.
  7. Vlož do stránky několik obrázků (ikony, fotky, loga) a vždy použij atributy alt, width a height.
  8. Vytvořené stránky rozděl do několika souborů a vzájemně je provaž pomocí odkazů.
  9. Všechny stránky znovu zkontroluj validátorem.
  10. Z normy zjisti, jaké jsou povolené hodnoty pro atribut align značky img.
  11. Prohlédni si zdrojový kód stránek Univerzity Karlovy a pokus se ho analyzovat.
  12. Prohlédni si různé stránky v různých prohlížečích a porovnej, jestli se zobrazují stejně.

2. cvičení - HTML (18.4.2005)

  1. Vytvoř stránku s tabulkou, která bude obsahovat přehled tvých přednášek vždy se jménem učitele a bodovým ohodnocením.
  2. Vyzkoušej různá nastavení mezer, rámečku a zarovnání buněk.
  3. Vytvoř pro své stránky jednotné navigační menu a převeď je do tabulkového vzhledu.
  4. Převeď stránky do rámů, urči jim DOCTYPE Frameset a zkontroluj validátorem.
  5. Z normy zjisti, jaké atributy s jakými hodnotami může mít značka frame.
  6. Vytvoř formulář s rozličnými druhy vstupních políček (text, heslo, zaškrávátka, textová oblast, menu) a nech ho odesílat e-mailem.
  7. Změň vybraný dokument na XHTML a zkontroluj ho validátorem.

3. cvičení - CSS (25.4.2005)

  1. Vyzkoušej si všechny způsoby napojení stylu k HTML dokumentu a pamatuj na to, že značka <style> může být pouze v části <head>.
  2. Navrhni barevné schéma pro své stránky - urči barvu pozadí, textu, odkazů (navštívených, nenavštívených, aktivních), případně i nadpisů. Můžeš k tomu použít Generátor barevných schémat. Cvičně definuj také obrázek na pozadí.
  3. Vyzkoušej si i formátování textu a práci s okraji.
  4. Převeď své stránky v tabulkovém vzhledu do CSS formátování. Nejvíc se ti asi budou hodit vlastnosti float a margin. Cvičně stránce nastav také šířku a zarovnej ji doprostřed.
  5. Pomocí kaskády mírně odliš vzhled např. odkazů v navigaci.
  6. Vytvoř styl stránky pro tisk (např. bez navigace). Nejvíc se ti asi budou hodit vlastnosti display: none a width: 100%.
  7. V normě najdi, jaké hodnoty může mít vlastnost overflow a co znamenají.
  8. Pro syntaktickou kontrolu stylu můžeš použít CSS Validator.

4. cvičení - JavaScript (2.5.2005)

  1. Projdi si zdrojový kód příkladů z JavaScriptu.
  2. Vytvoř formulář s různými typy vstupních políček (text, radio, select) a pomocí JavaScriptu zkontroluj, zda jsou všechna políčka vyplněna.
  3. Představ si, že se jedná o formulář editace položky, a vytvoř v něm druhé tlačítko pro smazání záznamu. Kontrolu uprav tak, aby byla aktivní při stisku prvního tlačítka nebo klávesy Enter (to v některých prohlížečích nevyvolá spuštění obsluhy událostí žádného tlačítka), ne ale při stisku druhého tlačítka.
  4. Vytvoř náhled obrázku, který bude odkazem na jeho plnou verzi. Se zapnutým JavaScriptem by se obrázek měl otevřít do nového okna přesné velikosti, bez JavaScriptu do stejného okna.
  5. Vytvoř rozbalovací navigaci - na jedno kliknutí by se měla odpovídající část navigace rozbalit, na druhé zase zabalit. Pokud má uživatel vypnutý JavaScript, měla by se mu navigace zobrazit rozbalená.

5. cvičení - PHP (9.5.2005)

  1. Zřiď si účet na nějakém serveru s podporou PHP a MySQL. Může to být sekční server, WebZdarma nebo třeba PHP5.
  2. Vypiš název a verzi webového serveru pomocí proměnné $_SERVER["SERVER_SOFTWARE"].
  3. Pomocí HTML formuláře vytvoř kvíz a v PHP vyhodnoť odpovědi uživatele. Aby se daly otázky snadno přidávat, tak formulář vypisuj z vhodné datové struktury také pomocí PHP. Počítej s různými typy odpovědí - jedna správně, více správně, textový vstup.
  4. Část stránek zabezpeč heslem. Uživateli se zobrazí formulář pro zadání přihlašovacího jména a hesla. Když zadá správné heslo, tak se zobrazí stránka, když špatné, tak se zobrazí chyba a znovu formulář (s předvyplněným jménem).
  5. Vytvoř formulář, který uživateli umožní nahrát na server HTML dokument. Vzpomeň si na atribut <form enctype="multipart/form-data">. Nahraný soubor následně zobraz pomocí proměnné $_FILES.

6. cvičení - SQL (16.5.2005)

  1. Na serveru, kde sis zřídil účet pro práci s PHP, si vytvoř také databázi.
  2. Kvíz, který jsi vytvořil na minulém cvičení, převeď do databáze. Alespoň jednu tabulku vytvoř ručně pomocí CREATE TABLE, ostatní si můžeš naklikat např. pomocí phpMyAdmin.
  3. Zajisti také, aby se odpovědi uživatelů ukládaly a z jednotlivých odpovědí vytvoř přehled.
  4. Pro svou budoucí aplikaci si vytvoř rozhraní pro správu uživatelů. Uživatelé by měli jít přidávat, upravovat a mazat, evidovat by se mělo přihlašovací jméno, hash hesla, e-mail a automaticky také datum vytvoření. Když ti zbude čas, můžeš editaci doplnit o nastavování práv k jednotlivým částem aplikace.

7. cvičení - shrnutí (23.5.2005)

  1. Dokonči všechny úkoly z předchozích cvičení.
  2. Začni pracovat na své zápočtové úloze.