Počítačové sítě a operační systémy Jaromír Plhák, 27.03.2017PB169 Počítačové sítě a operační systémy Cvičení 6 – HTML a tvorba jednoduché webové stránky PB169 Počítačové sítě a operační systémy Snímek 2 z 52 DOM PB169 Počítačové sítě a operační systémy Snímek 3 z 52 Struktura HTML stránky (1) … … PB169 Počítačové sítě a operační systémy Snímek 4 z 52 Struktura HTML stránky (2) Jaromír Plhák - osobní stránka PB169 Počítačové sítě a operační systémy Snímek 5 z 52 Struktura HTML stránky (3)

Úvod

Na těchto stránkách najdete vše o mně

Formátovací značka
PB169 Počítačové sítě a operační systémy Snímek 6 z 52 Tutoriál a úkol • Tutoriál – http://www.w3schools.com/html/html_intro.asp – Pročíst po sekci „Colors“ • Vytvořte si vlastní jednoduché webové stránky na Aise – https://www.fi.muni.cz/tech/unix/html-stranky.xhtml – https://www.fi.muni.cz/tech/unix/ceske-html-stranky.xhtml – Dvě úrovně nadpisů – Krátký text v češtině (včetně háčků a čárek), který bude formátovaný (nějaký text bude tučně, jiný barevně) – Vložit alespoň dva obrázky (do adresáře img) – Link na nějakou stránku (například www.fi.muni.cz) – Jeden odstavec “lorem ipsum” PB169 Počítačové sítě a operační systémy Snímek 7 z 52 Kódování - vlastní stránky • https://www.fi.muni.cz/tech/unix/ceske-html- stranky.xhtml • Vytvořte soubor .htaccess (pokud již neexistuje) • Nastavte AddDefaultCharset Off • Do index.html – V hlavičce vložte tag meta s příslušným kódováním – Např. • Ověřte, že se české znaky zobrazují korektně PB169 Počítačové sítě a operační systémy Snímek 8 z 52 Utf-8 • Vytvořte si stránku index2.html s kódováním utf-8 – Např. v LibreOffice Writer – Nastavte správně meta tag • Nahrajte jej na aisu – Např. pomocí Altap Salamander - J: • Ověřte si správné kódování souboru – file -i • Ověřte správné zobrazení v prohlížeči Počítačové sítě a operační systémy Jaromír Plhák, 27.03.2017PB169 Počítačové sítě a operační systémy Cvičení 7 – Kaskádové styly PB169 Počítačové sítě a operační systémy Snímek 10 z 52 DOM PB169 Počítačové sítě a operační systémy Snímek 11 z 52 Specifikace elementů • http://www.w3schools.com/cssref/css_selecto rs.asp PB169 Počítačové sítě a operační systémy Snímek 12 z 52 Tutoriál a příprava kódu • http://www.w3schools.com/css/ • Použijte stránku z minulé hodiny – V tagu
vytvořte tři odstavce textu lorem ipsum pomocí tagu

– Uvnitř každého odstavce označte jedno slovo pomocí tagu – Odstraňte veškeré formátování PB169 Počítačové sítě a operační systémy Snímek 13 z 52 Úkol CSS • Pozadí bude světle modré • Text nadpisů bude modrý na žlutém pozadí – Nadpisy

budou odsazeny o 50px od levého okraje stránky – Horizontální mezera pod nadpisy bude 30px • Obrázky budou mít šířku nastavenu na 35 % šířky stránky – Budou zobrazeny vedle sebe s mezerou 10 % šířky stránky • Navštívený odkaz bude mít zelenou barvu • Šířku odstavce nastavte na 25 % stránky – Text bude zarovnaný do bloku – Všechny tři odstavce zobrazte vedle sebe – První odstavec bude psán červeně, poslední fialově – Odstavce zarovnejte na střed stránky (horizontálně) – Slovo označené pomocí v prvním odstavci bude zvýrazněno tučně, v ostatních odstavcích kurzívou • BONUS: Vytvořte nákupní seznam (tagy
    a
  • ) – Pomocí CSS dosáhněte toho, aby každá sudá položka měla šedé pozadí • Můžete si pojmenovávat elementy (použít atribut class, případně id) Počítačové sítě a operační systémy Jaromír Plhák, 27.03.2017PB169 Počítačové sítě a operační systémy Cvičení 8 – Formuláře a JavaScript PB169 Počítačové sítě a operační systémy Snímek 15 z 52 Html formuláře • http://www.w3schools.com/html/html_forms. asp • Vytvořte stránku, kde uživatel bude zadávat své jméno, příjmení, zvolí své pohlaví, a zadá email a heslo (2x) PB169 Počítačové sítě a operační systémy Snímek 16 z 52 JavaScript • http://www.w3schools.com/html/html_scripts.asp • Pomocí JavaScriptu ověřte následující – Jméno a příjmení je vyplněno (je zde alespoň jeden znak) – Email má standardní podobu – Heslo má alespoň 8 znaků – Zopakované heslo je stejné jako původní • Dávejte průběžně uživateli zpětnou vazbu o korektním vyplnění • Po kliknutí na tlačítko odeslat vypište hlášku „ zaregistrován.“ nebo “Údaje nebyly vyplněny korektně.” • BONUS: Vytvořte stejnou stránku pomocí knihovny JQuery Počítačové sítě a operační systémy Jaromír Plhák, 27.03.2017PB169 Počítačové sítě a operační systémy Cvičení 10 – PHP PB169 Počítačové sítě a operační systémy Snímek 18 z 52 Php skripty • http://www.w3schools.com/php/ • https://www.fi.muni.cz/tech/unix/php.xhtml • Dle návodu si vytvořte stránku time.php – Bude vypisovat aktuální datum (den, rok, měsíc) a aktuální čas načtení stránky – Dále bude ukazovat čas ve dvou odlišných časových zónách PB169 Počítačové sítě a operační systémy Snímek 19 z 52 Php skripty • Využijte stránku ze cvičení 8 (s formulářem) • Vytvořte jednoduchý Php skript, který bude ukládat data do souboru na serveru (Aise) – Jméno, pohlaví, email, heslo – Heslo by nemělo být uloženo jako text, ale sofistikovaněji ;-)