Cvičení k 1.-3. lekci HTML a CSS

Vydávání, hosting a aktualizace umožňují jeho sponzoři.
Následující 3 cvičení vám pomohou procvičit znalosti webdesignu, tedy
HTML/CSS z minulých lekcí. Ve vlastním zájmu se je pokuste vyřešit sami.
Pod článkem máte pro kontrolu řešení ke stažení. Ale pozor, jakmile se
na něj podíváte bez vyřešení příkladů, ztrácí pro vás cvičení
smysl a nic se nenaučíte
Pokud si opravdu nebudete vědět rady, podívejte se raději znovu do minulého tutoriálu a pokuste se na to přijít.
Ohlasy studentů
To cvičení s domem mi dalo chvíli zabrat, velmi dobré na procvičení odkazů.
Člen
Ty cvičení celkem dobrý až na to třetí s tím hradem. Tím sem se celkem potrápil, ale na konec jsem to zvládl. Fakt dobře připravené.
Člen
Hezké cvičení na zapamatování odkazů
, sice chvíli zabralo ale fajne
Člen
Mission complete
Člen
Super cvičení, hlavně to poslední.
Člen
Ten hrad mi dal zabrat, ale je to parádní příklad
Super cvičení.
Člen
Po pauze od učení HTML, mě toto cvičení velmi bavilo
Člen
Jednoduchý příklad
Vytvořte HTML dokument s příslušnou strukturou, nastavte titulek stránky na "Kos Černý" a do dokumentu vložte následující text rozčleněný do 3 odstavců (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:

Středně pokročilý příklad
Vytvořte HTML dokument s následujícím textem a obrázkem tak, aby vypadal jako na screenshotu níže.
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ázek:

Podoba výsledného dokumentu:

Pokročilý příklad
Vytvořte 7 HTML dokumentů, které reprezentují jednotlivé lokace v online hře. Lokace obsahují vždy nadpis, obrázek a odstavec textu. Název a textový popis si vymyslete, obrázky jsou níže ke stažení. Pod textem se nacházejí odkazy na okolní lokace, realizované pomocí obrázkových odkazů (šipek) na okolní dokumenty. Jak jsou na sebe lokace naodkazované znázorňuje tato mapa:

Ukázka obrazovky jedné lokace:

Níže máte ke stažení potřebné obrázky.
Obrázky šipek pro odkazy




Obrázky lokací





Stáhnout
Staženo 2089x (523.08 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
Komentáře


Zobrazeno 10 zpráv z 66. Zobrazit vše