Výuka na MFF UK
Internet (SWI096)
Ut 14:00
Požadavky na zápočet:
- Vybrat si (nebo ještě lépe vymyslet si) co budete řešit. Zadání konzultujte se mnou. Inspirací Vám mohou být náměty, které má k tomuto předmětu vypsané Jakub Vrána.
Termín odevzdání zadání: 24. 12. 2006.
- Na zápočet nevyžaduji účast na cvičeních!!! Naopak, pokud budete mít pocit, že pro Vás cvičení nejsou přínosem, využijte čas efektivněji.
- Úspěšné předvedení zápočtového programu. Důraz budu klást především na:
-
Korektnost kódu (vyžaduji korektní XHTML, viz tato stránka). Před odevzdáním zkontrolujte stránky HTML validatorem!
Korektní XHTML musí obsahovat DOCTYPE (striktní DTD) a nejlépe také xml deklaraci, která uvozuje celý dokument. Kořenový tag <html> pak musí obsahovat xmlns deklaraci HTML.
Př.:
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Nezapomínejte také přidat do hlavičky správné kódování, např. ISO-8859-2.
Př.:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
-
Rozumné formátování stránek (formátovat pomocí stylů ne tabulek).
-
Návrh databáze.
-
Kulturu PHP kódu (pozor na opakování kódu).
Zápočtovou úlohu mi můžete předvést na cvičení nebo mi poslat emailem odkaz na hotový produkt.
Užitečné stránky:
Slidy z přednášky (rok 2006). (Ve formátu *.pdf, nezabalené.) Jde o export z ppt, takže některý text je trochu rozházený.
1. cvičení - HTML (28. 11. 2006)
- Vytvořte prázdný HTML dokument, který bude obsahovat pouze titulek stránky.
- Zkontrolujte tento dokument validátorem.
- Vyzkoušejte si práci s HTML entitami, napište třeba vzorec x < 3, text Alice & Bob nebo 1. 1. 2006 (datum by měl být slepen nedělitelnými mezerami).
- Do stránky vložte několik úrovní nadpisů, odstavce, zalomení řádku, případně čáru.
- Pomocí seznamu s odrážkami vytvořte obsah dokumentu, který se na jednotlivé části bude odkazovat pomocí #.
- Vhodně použijte značky pro zvýraznění: tučné písmo, kurzívu a pevnou šířku znaku.
- Vložte do stránky několik obrázků (ikony, fotky, loga) a vždy použijte atributy alt, width a height.
- Vytvořené stránky rozdělte do několika souborů a vzájemně je provažte pomocí odkazů.
- Všechny stránky znovu zkontrolujte validátorem.
- Z normy zjistěte, jaké jsou povolené hodnoty pro atribut align značky img.
- Nejvíce se naučíte prohlížením kódu jiných stránek. Prohlédněte si zdrojový kód stránek Univerzity Karlovy a pokuste se ho analyzovat.
- Prohlédněte si různé stránky v různých prohlížečích a porovnejte, jestli se zobrazují stejně.
2. cvičení - HTML (5. 12. 2006)
- Doplňte do svých stránek vhodné meta tagy.
- Vyzkoušejte si práci s Document Type Definitions (DTDs) - XHTML-1.0-Strict:
najděte všechny povolené atributy elementu
ol.
- Na stejném místě najděte seznamy inline a block entit. Jaký je mezi nimi rozdíl?
- Vložte do stránky obrázek s klikou.
- Přečtěte si Pravidla tvorby přístupného webu (nebo zde) a dodržujte je.
- Vytvořte stránku s tabulkou,
která bude obsahovat přehled Vašich přednášek vždy se jménem učitele a bodovým ohodnocením.
- Přestože to norma XHTML nepovoluje, vyzkoušejte různá nastavení mezer, rámečků a zarovnání buněk.
(Na dalších přednáškách se probere formátování pomocí stylů.)
- Vyzkoušejte, jak se v různých prohlížečích zobrazují prázdné buňky
a příště používejte např.
.
- Vytvořte formulář s rozličnými druhy vstupních políček (text, heslo, zaškrávátka, textová oblast, menu) a nechte ho odesílat e-mailem. Různé typy formulářů.
- Změňte vybraný dokument na XHTML a zkontrolujte ho validátorem.
Obrázek s klikou:
Hledejte odkazy na Staroměstskou radnici, sochu Mistra Jana Husa a Týnský chrám.
V některých prohlížečích se kolem prázdné buňky nekreslí rámeček:
| první buňka | druhá buňka |
| ... |
3. cvičení - CSS (12. 12. 2006)
- Vyzkoušejte si všechny způsoby napojení stylu k HTML dokumentu a pamatujte na to, že tag <style> může být pouze v části <head>.
- Navrhněte barevné schéma pro své stránky - určete barvu pozadí, textu, odkazů (navštívených, nenavštívených, aktivních), případně i nadpisů. Můžete k tomu použít Generátor barevných schémat. Cvičně definujte také obrázek na pozadí.
- Vyzkoušejte si i formátování textu a práci s okraji.
- Vytvořte pro své stránky jednotné navigační menu pomocí tabulky.
- Převeďte své stránky z tabulkového formátu do CSS formátování, tak aby obsahovala části "logo", "menu", "telo" a "zapati". Zkuste je naformátovat tak, jak je na obrázku. Můžete k tomu použít soubor pozicovani.html, vyzkoušejte si i zakomentované části kódu.
Nejvíc se Vám budou hodit vlastnosti float a margin. Cvičně stránce nastavte také šířku a zarovnejte ji doprostřed.
- Pomocí kaskády mírně odlište vzhled např. odkazů v navigaci.
- Vytvořte styl stránky pro tisk (např. bez navigace). Nejvíc se Vám budou hodit vlastnosti display: none a width: 100%.
- V normě najděte, jaké hodnoty může mít vlastnost overflow a co znamenají.
- Pro syntaktickou kontrolu stylu použijte CSS Validator.
4. cvičení - Javascript (19. 12. 2006)
- Projděte si zdrojový kód příkladů z JavaScriptu Jakuba Vrány.
- 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ředstavte si, že se jedná o formulář editace položky, a vytvořte v něm druhé tlačítko pro smazání záznamu. Kontrolu upravte 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.
- Vytvořte 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.
- Vytvořte 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í - SQL-PHP (9. 1. 2006)
- Zřiďte 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. Zařiďte si zde i databázi.
- Vypište název a verzi webového serveru pomocí proměnné $_SERVER["SERVER_SOFTWARE"].
- Pomocí HTML formuláře vytvořte kvíz a v PHP vyhodnoťte odpovědi uživatele. Formulář uložte do databáze, kterou vytvoříte např. pomocí phpMyAdmin. Počítejte s různými typy odpovědí - jedna správně, více správně, textový vstup.
- Část stránek zabezpečte 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í chybová hláška a znovu formulář (s předvyplněným jménem).
- Vytvořte formulář, který uživateli umožní nahrát na server HTML dokument. Vzpomeňte si na atribut <form enctype="multipart/form-data">. Nahraný soubor následně zobrazte pomocí proměnné $_FILES.
- Z jednotlivých odpovědí z kvízu od různých uživatelů vytvořte statistiku.
- Pro začlenění databázových dotazů do PHP kódu můžete použít soubor inicializace databáze a ukázku zpracování dotazů.
- Přečtěte si diskuzi na téma magic quotes na stránkách Jakuba Vrány.
- Dokončete všechny úkoly z předchozích cvičení.
- Začněte pracovat na své zápočtové úloze.
Ukazka zdrojaku pro zaheslovanou stranku pomoci SESSION - co jsem ukazovala cvicenich. (Original je samozrejme s koncovkou .php)
