September discount week
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

Řešené úlohy k 1.-3. 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).

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Cvičení k HTML – Struktura a odstavce

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:

Logo ITnetwork

Podoba výsledného dokumentu:

Cvičení k HTML – Obrázek a zvýraznění textu

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:

Cvičení k HTML – Mapa lokací

Ukázka obrazovky jedné lokace:

Cvičení k HTML – Kruh

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

Obrázky šipek pro odkazy

Šipka nahoru Šipka doleva Šipka doprava Šipka dolů

Obrázky lokací

Dům Hrad Les Les bez straky Rybník

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


 

Stáhnout

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

 

Předchozí článek
Obrázky a odkazy v HTML
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal Daniel Vítek
Avatar
Jak se ti líbí článek?
67 hlasů
Primárně PHP programátor, rád si hraje s Arduinem a píše články do sekce Batch.
Aktivity (4)

 

 

Komentáře
Zobrazit starší komentáře (74)

Avatar
Lukáš Navrátil:30. července 3:24

Díky, dobrá cvičení... :)

 
Odpovědět
30. července 3:24
Avatar
Michael Last
Člen
Avatar
Michael Last:1. srpna 8:55

Ano kdo se to chce naučit tak tady je opravdu obrovská možnost.Pro začátečníka přímo ideální způsob.

Odpovědět
1. srpna 8:55
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Avatar
Michael Last
Člen
Avatar
Michael Last:1. srpna 8:57

Chci poděkovat autorovi tohoto článku.Děkuji moc.

Odpovědět
1. srpna 8:57
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Avatar
Hana Röderová:7. srpna 13:08

Ahoj,

díky moc za cvičení, ten poslední úkol mi dal taky zabrat :-)

 
Odpovědět
7. srpna 13:08
Avatar
Jindřich Pšeničný:13. srpna 16:43

ahoj lidi, jak mám označit lekci jako absolvovanou? Týká se to hlavně řešených úloh. U normální lekce je tlačítko "Označit lekci jako absolvovanou", ale u řešených úloh které se neodevzdávají jsem žádné tlačítko ani jiný způsob nenašel. A pak mi stále chodí upozornění, že nemám dokončené kurzy.

 
Odpovědět
13. srpna 16:43
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
FourManx1203704:27. srpna 15:21

ahoj lidi, jak mám označit lekci jako absolvovanou? Týká se to hlavně řešených úloh. U normální lekce je tlačítko "Označit lekci jako absolvovanou", ale u řešených úloh které se neodevzdávají jsem žádné tlačítko ani jiný způsob nenašel. A pak mi stále chodí upozornění, že nemám dokončené kurzy.

Ahoj, já to zde mám, možná jestli nenastala nějaká chyba? :-)

Editováno 27. srpna 15:23
 
Odpovědět
27. srpna 15:21
Avatar
Kristián Lörincz:27. srpna 21:59

Paráda! Líbí se mi to a baví mě to. Díky!

 
Odpovědět
27. srpna 21:59
Avatar
Marek Jelínek:11. září 11:33

ahoj, zatím super, vše srozumitelné ;-)

 
Odpovědět
11. září 11:33
Avatar
stenlin
Člen
Avatar
stenlin:20. září 9:27

Za mě super cvičení. Nejvíc mě bavila poslední úloha, kde jsem si procvičil pořádně odkazy :)

 
Odpovědět
20. září 9:27
Avatar
Virtual
Super redaktor
Avatar
Virtual:Včera 17:32

Kdo chce mít u 3. cvičení šipky vedle sebe: style="float: left;" :-)

 
Odpovědět
Včera 17:32
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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