C# týden ITnetwork Flashka zdarma
Akce! Pouze tento týden sleva až 80 % na kurzy C# .NET. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

Cvičení k 1.-3. lekci HTML a CSS

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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ší 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

 

Stáhnout

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

 

 

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

 

 

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

Avatar
Niesomtu Hraskova:20.11.2018 0:54

vypracované cvičenia sa aj niekde vkladaju na stránku,do profilu, nástenku či podobne? Alebo sa mám s mojím výsledným dielom chválit len mame ktorá si nevie ani zapnút titulky na youtube? :)

 
Odpovědět 20.11.2018 0:54
Avatar
David Jančík
Tým ITnetwork
Avatar
Odpovídá na Niesomtu Hraskova
David Jančík:20.11.2018 8:44

Při vypracování všech cvičení v sekci získaš certifikát, který si můžeš vytisknout. To zobrazení v profilu zní dobře, zamyslíme se nad tím :) Momentálně se však snažíme vyladit hlavně funkcionalitu, přidat do všech jazyků spustitelne ukázky a cvičení k odevzdání.

Odpovědět  +1 20.11.2018 8:44
Zapomeň, že je to nemožné a udělej to ;)
Avatar
Odpovídá na David Jančík
Niesomtu Hraskova:20.11.2018 20:17

Momentálne plány máte v tom prípade velmi dobré. A celkovo už teraz v dnešnej podobe je tento web velmi hodnotným prínosom pre ludí. Myslím si že by v globále bolo treba viac takýchto aktivít, pretože technologie velmi rychlo napreduju kdežto ludia ostávajů stále len užívatelmi ktori pouzivaju to co im je dane v defaultnom nastaveni vytvorenom pre obohatenie autora. Nevieme vyhladavat, nevieme rozoznat nebezpecenstvo stranok reklam aplikacii nastavit sispravne ucty tak aby nam samotne sluzby boli viac k prospechu ako ku skode..
P.S.: mne sa celkom paci takýto štýl. :)
Codecademy

 
Odpovědět 20.11.2018 20:17
Avatar
Milan Stoklásek:2. ledna 22:40

Děkuji za skvělé cvičení:-)

 
Odpovědět  +2 2. ledna 22:40
Avatar
Petra Krátká:16. ledna 11:10

Skvělá cvičení na zopakování! To poslední je nejvíc TOP!! :D

 
Odpovědět  +1 16. ledna 11:10
Avatar
Lubomír Buzi:1. února 10:13

Hodně dobré cvičení obsahuje vše potřebné :)

 
Odpovědět 1. února 10:13
Avatar
Lenka Mackova:3. března 16:05

Perfektni cviceni, moc me bavilo a i jsem si s tim pohrala. Diky moc za skvele opacko.

 
Odpovědět 3. března 16:05
Avatar
Olga Špicarová:27. března 12:56

Skvělé cvičení. Pobavila jsem se a docela dobře jsem to zvládla.

 
Odpovědět 27. března 12:56
Avatar
Jakub Podskalský:28. dubna 15:48

Prospěl jsem testem! :D Hurá do dalších kapitol.

 
Odpovědět 28. dubna 15:48
Avatar
Martin Vymazal:1. května 10:44

Ahoj :-) Chci se zeptat , když používám jeden obrázek např: šipku doprava a používám ji ve více různých web.stránkách ,nevadí to ? Myslim to tak, že jestli není lepší mit pro každou web. stranku samostatný obrázek ikdyž je stejný.

 
Odpovědět 1. května 10:44
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 52. Zobrazit vše