IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Řešené úlohy k 1.-4. lekci HTML a CSS

V minulé lekci, Obrázky a odkazy v HTML, jsme se naučili do stránek vkládat obrázky a odkazy.

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ů

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ští kosové jsou právě ti, se kterými člověk běžně přichází do kontaktu.

Podoba výsledného dokumentu:

Kos Černý
Cvičení z ITnetwork.cz

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:

Logo ITnetwork - Webové stránky krok za krokem

Podoba výsledného dokumentu:

Obrázek a zvýraznění
Cvičení z ITnetwork.cz

Příklad pro náročné - BONUS

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:

Cvičení k HTML – Mapa lokací - Webové stránky krok za krokem

Ukázka obrazovky jedné lokace:

Dům
Cvičení z ITnetwork.cz

Níže máte ke stažení potřebné obrázky.

Obrázky šipek pro odkazy

Šipka nahoru - Webové stránky krok za krokem Šipka doleva - Webové stránky krok za krokem Šipka doprava - Webové stránky krok za krokem Šipka dolů - Webové stránky krok za krokem

Obrázky lokací

Dům - Webové stránky krok za krokem Hrad - Webové stránky krok za krokem Les - Webové stránky krok za krokem Les bez straky - Webové stránky krok za krokem Rybník - Webové stránky krok za krokem

V příští lekci, Tabulky v HTML, si ukážeme tabulky.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 5803x (526.15 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

K absolvování tohoto cvičení prosím splň všechny příklady tím, že je úspěšně odevzdáš k otestování.

Předchozí článek
Obrázky a odkazy v HTML
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Tabulky v HTML
Článek pro vás napsal Neaktivní uživatel
Avatar
Uživatelské hodnocení:
2438 hlasů
Tento uživatelský účet již není aktivní na základě žádosti jeho majitele.
Aktivity