Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
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í.
C# week + discount 30

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:

Cvičenie k HTML – Štruktúra a odseky

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:

logo ITnetwork

Podoba výsledného dokumentu:

Cvičenie k HTML – Obrázok a zvýraznenie textu

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:

Cvičenie k HTML – Mapa lokácií

Ukážka obrazovky jednej lokácie:

Cvičenie k HTML – Kruh

Nižšie máte k stiahnutiu potrebné obrázky.

Obrázky šípok pre odkazy

šípka hore šípka doľava šípka doprava šípka dole

Obrázky lokácií

dom hrad les Les bez straky rybník

 

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é 3667x (525.97 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

K absolvovaní tohto cvičenia prosím splň všetky príklady tým, že je úspešne odovzdáš na otestovanie.

Predchádzajúci článok
Obrázky a odkazy v HTML
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Tabuľky v HTML
Článok pre vás napísal Daniel Vítek
Avatar
Užívateľské hodnotenie:
6 hlasov
Primárně PHP programátor, rád si hraje s Arduinem a píše články do sekce Batch.
Aktivity

 

 

Komentáre

Avatar
Michael Last
Člen
Avatar
Michael Last:20. júla 2:42

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

Odpovedať
20. júla 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. augusta 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áš.

 
Odpovedať
7. augusta 14:05
Avatar
David Stibor
Člen
Avatar
Odpovedá na Tomáš Pup
David Stibor:8. augusta 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 :).

 
Odpovedať
8. augusta 16:55
Avatar
Zuzana Černá :13. augusta 22:11

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

 
Odpovedať
13. augusta 22:11
Avatar
Robert Krejčí:15. augusta 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.

 
Odpovedať
15. augusta 15:24
Avatar
Radka
Člen
Avatar
Radka:29. augusta 19:52

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

Odpovedať
29. augusta 19:52
Nikdy neříkej nikdy
Avatar
Alena Melicharová:5. septembra 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í. :)

Editované 5. septembra 1:48
Odpovedať
5. septembra 1:47
"Svět patří těm, co se nepo*****" (Charles Bukowski)
Avatar
frantisek spacek:5. septembra 21:45

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

 
Odpovedať
5. septembra 21:45
Avatar
Helous007
Člen
Avatar
Helous007:22. septembra 21:43

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

 
Odpovedať
22. septembra 21:43
Avatar
Jiri Z
Člen
Avatar
Jiri Z:Včera 23:07

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

 
Odpovedať
Včera 23:07
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!