Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

 

Stiahnuť

Stiahnuté 2362x (523.08 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Obrázky a odkazy v HTML
Všetky články v sekcii
Webové stránky krok za krokom
Článok pre vás napísal Daniel Vítek
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Primárně PHP programátor, rád si hraje s Arduinem a píše články do sekce Batch.
Aktivity (1)

 

 

Komentáre

Avatar
Robertos Rigáň:26. apríla 21:21

ešte že existuje ctrl + c a máš hned 7 html dokumentov :D

Odpovedať
26. apríla 21:21
Ak miluješ svoju prácu , tak to nieje práca ale hobby
Avatar
Tomas Kolesar:11. mája 18:56

Super cvičenie! Ešte predvčerom som len niečo tušil, že HTML a CSS sú nejaké veci ohľadom programovania a dnes som už "programoval" svoje prvé stránky :D Jasné, berte to s rezervou prosím, viem, že to zložité ešte len príde. Ale máte super formu učenia. A kto chce, ten sa to naučí! Teším sa na ďalšie lekcie, hor sa do toho! :)

 
Odpovedať
11. mája 18:56
Avatar
Adam Tyrpak
Člen
Avatar
Adam Tyrpak:16. mája 8:02

To poslední cvičení je super :D Docela pomohlo v rychlosti psaní základu stránek díky tomu, jak jsem pořád a pořád dokola musel dělat nové html struktury. Určitě pomohlo i na procvičení odkazů :D

Odpovedať
16. mája 8:02
Selhání není propast nebo překážka. Jsou to dveře k novým možnostem, které bychom bez ponaučení z chyb neměli šanci o...
Avatar
Věra Formánková:8. júla 13:39

Super cvičení, děkuji :)

Editované 8. júla 13:40
 
Odpovedať
8. júla 13:39
Avatar
Cloudfox
Člen
Avatar
Cloudfox:28. júla 12:38

Veľmi dobré cvičenie. Páči sa mi to.

 
Odpovedať
28. júla 12:38
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Lukáš Navrátil:30. júla 3:24

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

 
Odpovedať
30. júla 3:24
Avatar
Michael Last
Člen
Avatar
Odpovedá na Tomas Kolesar
Michael Last:1. augusta 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.

Odpovedať
1. augusta 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. augusta 8:57

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

Odpovedať
1. augusta 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 Kurucová:7. augusta 13:08

Ahoj,

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

 
Odpovedať
7. augusta 13:08
Avatar
Jindřich Pšeničný:Včera 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.

 
Odpovedať
Včera 16:43
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ý!