Pouze tento týden sleva až 80 % na e-learning týkající se Javy. Zároveň využij akce až 50 % zdarma při nákupu e-learningu - více informací.
Aktualizovali jsme Zásady zpracování osobních údajů. Pokračováním užívání sítě projevíte souhlas s těmito podmínkami. Tuto zprávu můžete nyní zavřít.
java week + discount 50

Ř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).

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

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:

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

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:

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 Š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.


 

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 3684x (525.97 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 Daniel Vítek
Avatar
Uživatelské hodnocení:
690 hlasů
Primárně PHP programátor, rád si hraje s Arduinem a píše články do sekce Batch.
Aktivity

 

 

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

Avatar
Michael Last
Člen
Avatar
Michael Last:20. července 2:42

Na poslední uloze jsem uplně pohořel.Tak nevim.

Odpovědět
20. července 2:42
"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
Tomáš Pup
Člen
Avatar
Tomáš Pup:7. srpna 14:05

Tady jsem ztracen u toho třetího cvičení, zkoušel jsem ráno, teď ještě odpoledne, ale nemohu přijít na ten správný postup. Do odkazu jsem vkládal obrázek, ale stejně mám z toho guláš.

 
Odpovědět
7. srpna 14:05
Avatar
David Stibor
Člen
Avatar
Odpovídá na Tomáš Pup
David Stibor:8. srpna 16:55

hele tak si vem předešlé materiály. Já do toho taky koukal a díky tomu jsem to dal + jsem si teda musel stáhnout taháček, ale díky tomu jsem přišel na chyby :).

 
Odpovědět
8. srpna 16:55
Avatar
Zuzana Černá :13. srpna 22:11

No nakonec jsem to zvládla, ale myslela jsem, že u toho chcípnu...

 
Odpovědět
13. srpna 22:11
Avatar
Robert Krejčí:15. srpna 15:24

Ten třetí (pokročilý) příklad byl velká paráda - obrovský závan nostalgie z devadesátek 😃 Jinak za mě všechno, co potřebujete k jeho zvládnutí, je uvedeno v lekcích. Jen se to chce zamyslet a vytvořit si správně strukturu tak, aby do sebe vše zapadalo. Hodně mi pomáhá ve VSC modul Live Preview, změny se vám v prohlížeči zobrazují průběžně, jak píšete.

 
Odpovědět
15. srpna 15:24
Avatar
Radka
Člen
Avatar
Radka:29. srpna 19:52

Ten poslední úkol mi dal zabrat, ale povedlo se...
Lekce jsou skvěle a srozumitelně zpracované. Moc mě to baví.

Odpovědět
29. srpna 19:52
Nikdy neříkej nikdy
Avatar
Alena Melicharová:5. září 1:47

Ten poslední úkol stál za to. Nejdřív jsem si trénovala na jiný rádoby stránce, kterou jsem si založila jako zkušební a pak,že se vrhnu na tohle. Musím se přiznat, že jsem se do toho potom tak zabrala, že jsem přidala ještě dvě karty a trošku jsem to v tom lehce nesmyslným příběhu vracela na různý předchozí a chvílema jsem se do toho i sama zamotala, takže se jdu navečeřet až v tuhle hodinu, no :-D Velký palec nahoru pro tohle cvičení. :)

Editováno 5. září 1:48
Odpovědět
5. září 1:47
"Svět patří těm, co se nepo*****" (Charles Bukowski)
Avatar
frantisek spacek:5. září 21:45

daj lomítko pred obrazky takto:
<p><img src="/obrazky/hrad­.png" alt = "hrad"/></p>

 
Odpovědět
5. září 21:45
Avatar
Helous007
Člen
Avatar
Helous007:22. září 21:43

Ten třetí úkol mě fakt bavil. Jsem moc ráda, že jsem ho bez problémů zvládla. :-)

 
Odpovědět
22. září 21:43
Avatar
Jiri Z
Člen
Avatar
Jiri Z:30. září 23:07

Hustýýý ten třetí úkol. Dal jsem to. Ale musím říct, že mě ty šipky chvili úplně zblbly 😀

 
Odpovědět
30. září 23:07
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 134. Zobrazit vše