Riešené úlohy k 1.-3. lekciu HTML a CSS
Nasledujúce 3 cvičenie vám pomôžu precvičiť vedomosti webdesignu, teda HTML / CSS z minulých lekcií. Vo vlastnom záujme sa je pokúste vyriešiť sami. Pod článkom máte pre kontrolu riešenie k stiahnutiu. Ale pozor, akonáhle sa na neho pozriete bez vyriešenia príkladov, stráca pre vás cvičenie zmysel a nič sa nenaučíte
Ak si naozaj nebudete vedieť rady, pozrite sa radšej znovu do minulého tutoriálu a pokúste sa na to prísť.
Ohlasy študentov
Jednoduchý príklad
Vytvorte HTML dokument s príslušnou štruktúrou, nastavte titulok stránky na "Kos Čierny" a do dokumentu vložte nasledujúci text rozčlenený do 3 odsekov (zdroj: http://cs.wikipedia.org/...%8Dern%C3%BD).
Text:
Kos černý (Turdus merula) je pták žijící v celé Evropě a v jižní Asii, byl introdukován i do Austrálie a na Nový Zéland. Díky své přizpůsobivosti se adaptoval na život v blízkosti člověka a úspěšně žije a hnízdí i v těsném sousedství lidských sídel. Samci jsou nepřehlédnutelní svým charakteristickým černým peřím a žlutým zobákem, upozorňují na sebe také melodickým zpěvem. Kos černý je středně velký pták, o něco menší než hrdlička zahradní. Dospělý samec je matně černý s oranžově žlutým zobákem a žlutým kroužkem okolo očí. Samice je hnědavá s bělavějším hrdlem a nezřetelně skvrnitou hrudí, nohy jsou téměř černé, zobák má tmavý, jen částečně oranžový. Mláďata jsou podobná samici, jsou ale světlejší a mohou mít hnědě tečkovanou hruď a světlé podélné proužky na zádech. Samice ani mláďata nemají oční kroužek. Po celé Evropě je populace kosa černého rozdělena na dvě oddělené subpopulace, které se liší způsobem života ve vztahu k člověku. Původní, lesní populace, stále žije skrytým způsobem života v jehličnatých i listnatých lesích, populace městská, urbánní, se přizpůsobila životu v intravilánech obcí a v současnosti početně převyšuje lesní kosy. Městší kosové jsou právě ti, se kterými člověk běžně přichází do kontaktu.
Podoba výsledného dokumentu:
Stredne pokročilý príklad
Vytvorte HTML dokument s nasledujúcim textom a obrázkom tak, aby vyzeral ako na screenshote nižšie.
Text:
Jsme česká IT sociální síť s širokou komunitou aktivních členů. Hostujeme největší databázi volně dostupných článků a tutoriálů o programování a IT obecně na českém internetu. Na ITnetwork přicházejí nováčci a stávají se z nich zkušení programátoři. A jak víte, ajťáci se v životě mají nemají vůbec špatně. Můžeš si tu vytvořit portfolio a nahrávat své aplikace, na které získáš zpětnou vazbu a hodnocení. I zkušení programátoři zde samozřejmě naleznou nové materiály, inspiraci a výzvy.
obrázok:
Podoba výsledného dokumentu:
Pokročilý príklad
Vytvorte 7 HTML dokumentov, ktoré reprezentujú jednotlivé lokácie v online hre. Lokácie obsahujú vždy nadpis, obrázok a odsek textu. Názov a textový popis si vymyslite, obrázky sú nižšie k stiahnutiu. Pod textom sa nachádzajú odkazy na okolité lokácie, realizované pomocou obrázkových odkazov (šípok) na okolité dokumenty. Ako sú na seba lokácie naodkazované znázorňuje táto mapa:
Ukážka obrazovky jednej lokácie:
Nižšie máte k stiahnutiu potrebné obrázky.
Obrázky šípok pre odkazy
Obrázky lokácií
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 5958x (526.15 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
Na absolvovanie tohto cvičenia prosím splň všetky príklady tým, že ich úspešne odovzdáš na otestovanie.