Class Web Technologies
Zadanie cvičenia: Vytvorte si osobnú web stránku. Je potrebné, aby zadanie spĺňalo nasledovné požiadavky: Dokument zostavte podľa odporúčaní HTML 5 (nesmie chýbať DOCTYPE). Stránku validujte podľa HTML5 a CSS3. Pokiaľ pri tvorbe CSS chcete použiť vlastnosti, ktoré ešte nie sú štandardizované, t.j. využívajú predpony výrobcu prehliadačov (vendor prefix) je to možné. Takéto pravidlá nemusia byť validné. Všetky ostatné však áno. Celá osobná web stránka sa bude skladať z 3 podstránok - "O mne", "Životopis", "Môj rozvrh". Bude napísaná v slovenskom jazyku a s použitím diakritiky. Používajte len značky s atribútami, ktoré povoľuje HTML 5. Pri definovaní štruktúry stránky maximálne využili sémantické značky, ktoré so sebou prináša HTML5 (header, footer, nav, section, article, address, ...). Príklad štruktúry stránky bez formátovania môžete vidieť na obrázkoch pod zadaním.Podľa potreby doplňte do štruktúry stránok identifikátory a triedy. Rozlišujte medzi nimi a používajte ich správne. Každá podstránka bude obsahovať nadpisy dvoch úrovní. Navigáciu riešte pomocou nečíselného zoznamu. Všetky linky budú funkčné a budú umožňovať prepínanie medzi vytvorenými podstránkami. Pomocou CSS upravte navigáciu medzi podstránkami tak, aby ste vytvorili horizontálne menu pod hlavičkou dokumentu. Podstránka "O mne" bude obsahovať 1-2 odstavce, ktoré vás budú charakterizovať. Je jedno, či sa zameráte na osobné koníčky alebo na prácu v škole. Do tejto časti vložte aj svoju fotografiu. Pri obrázku nezabudnite na atribút "alt", "height" a "width". Stránka bude okrem toho obsahovať jeden nečíslovaný zoznam podľa vašeho výberu, ktorého položky sa budú zobrazovať vertikálne. Ak vás nenapadne nič iné, tak tam uveďte "V súčasnosti študujem na FEI STU v Bratislave a tento semester mám tieto predmety ...". Do podstránky zároveň doplňte prvok
, vo vnútri ktorého uvediete nejaký citát, porekadlo, heslo alebo motto, ktoré vás inšpiruje. Pri formátovaní podstránky "O mne" nechajte vašu fotografiu obtekať textom, pričom fotografia bude na ľavej strane webstránky a text bude obtekať z pravej strany. Doplnené heslo (motto, porekadlo, citát) zvýraznite (minimálne veľkosťou písma - viď obrázky nižšie) a vsaďte ho do textu tak, aby do neho prirodzene zapadal. Aby vyniklo obtekanie textu je potrebné, aby ste textu mali dostatočné množstvo. V prípade potreby preto chýbajúci text doplňte do stránky. Podstránka "Životopis" bude vytvorená vo forme štruktúrovaného životopisu. Bude sa skladať z dvoch stĺpcov, z ktorých každý bude mať inú farbu pozadia (v celej svojej výške, t.j. nie iba pod textom). V prvom stĺpci bude fotografia (môže a nemusí byť tá istá ako je na prvej podstránke), kontaktné informácie s dôrazom na elektronickú možnosť kontaktovania. V druhom stĺpci budú štruktúrované nasledovné informácie dosiahnuté vzdelanie, počítačové zručnosti, jazykové zručnosti. Podstránka "Môj rozvrh" bude obsahovať váš osobný rozvrh na fakulte vrátane telesnej kultúry. Rozvrh bude vyzerať podobne ako na školských web stránkach od 7:00 do 21:00 s tým, že bunky, kde nemáte vyučovanie, budú spojené a prázdne. Ak sa pozriete na nižšie uvedený obrázok, tak to znamená, že v riadku pondelok bude len 6 buniek: 1.hodina, 2-3. hodina, 4-5. hodina, 6-8. hodina, 9-10. hodina a 11-14. hodina. Predpokladá sa využitie atribútov "colspan" alebo "rowspan". Pri formátování podstránky "Môj rozvrh" odlíšte graficky prednášky, cvičenia a telesnú kultúru. Nezabudnite na názov celej stránky. Dajte si záležať na vzhľade. Nezabudnite na to, že vzhľad predáva. V tomto zadaní sa na vzhľad kladie veľký dôraz aj pri hodnotení.Príklady pre
prvok z tlače: http://www.sme.sk/cdata/3093664/11.pdf ; http://www.sme.sk/cdata/3093664/23.pdf