Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
PHP týden

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


 

Měla 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 2717x (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?
72 hlasů
Primárně PHP programátor, rád si hraje s Arduinem a píše články do sekce Batch.
Aktivity (5)

 

 

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

Avatar
Peter Podmajerský:5.10.2020 15:01

..doleva,dopra­va,nahoru,dolu­...hlava mi šla kolem =D No postupne pocas prace som prisiel nato,ze kopu veci staci, kopirovat a vkladat do dalsi casti, co mi urychlilo pracu. Potom som len prepisal nazvy (les,hrad...). Neviem vsak ci som postupoval spravne,ale na zaciatok som si vsetkych 7 casti vytvoril samostatne,bez odkazov (sipiek), az potom som tam zacal pridavat sipky a prepojil to v jeden spravne navigovany celok podla sipiek. 8-)

 
Odpovědět
5.10.2020 15:01
Avatar
Pavel Kubalík:15.10.2020 15:28

Dobrý den
Bylo to opět výborné.
Třetí úkol byl trochu náročný, ale bylo to potřeba.
Pochopitelně si nemyslím, že si budu všechno pamatovat. Pochopit mi však nedalo moc práce, tak bych za pomoci tutoriálu zase na to rychle přišel. A pak máme taháky. Když se mně nebudou líbit ty hotové, udělám si svoje.
Vypadá to, že zatím zůstanu pouze u HTML, a až později začnu paralelně PHP
Děkuji PK

 
Odpovědět
15.10.2020 15:28
Avatar
Štefan Murza:15.11.2020 14:51

Zapotil som sa pri tých šípkach, vždy sa mi zobrazoval text a šípka bola "mŕtva", ale potom sa mi to podarilo, šípky "ožili" a text som odpratal. Super zábava, poteší to a inšpiruje, keď to takto funguje. Ďakujem, ideme ďalej.

 
Odpovědět
15.11.2020 14:51
Avatar
Naďa Tomanová:18.11.2020 15:33

Nikdy by mě nenapadlo, že se dá udělat taková věc, jako ten poslední příklad a to jsem kdysi psala weby v CSS. Super :)

 
Odpovědět
18.11.2020 15:33
Avatar
Magda
Člen
Avatar
Magda :11.12.2020 18:39

Bylo to príma! První se mi to zdálo těžké, ale vlastně vůbec nebylo! :-) Super, jsem na sebe hrdá, že jsem to bez pomoci zvládla!

 
Odpovědět
11.12.2020 18:39
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Veronika MAREČKOVÁ :17. ledna 15:09

Zdravím, tyto cvičení jsou super, pěkně se látka procvičí a vžije. :-)

 
Odpovědět
17. ledna 15:09
Avatar
Michael Kočandrle:26. ledna 12:53

Marku souhlasím

 
Odpovědět
26. ledna 12:53
Avatar
Aleš Havlíček:11. února 19:39

Zatím to znám, tabulky a formuláře budou horší. Ale je to fajn. Díky.

 
Odpovědět
11. února 19:39
Avatar
Kevin Franzki:16. března 11:40

Zdravím, mám dotaz.
Narážím občas na problém, kdy se mi nechce správně zobrazit obrázek na vytvořené stránce.
Obrázek se tváří, že je nahraný, ale v konečném důsledku se mi zobrazuje pouze nezobrazená ikona obrázku. Nevíte někdo prosím, jak to spravit?

 
Odpovědět
16. března 11:40
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na Kevin Franzki
Samuel Hél:16. března 12:28

Ahoj, bude problém pravděpodobně v cestě. Potřeboval bych vidět stromovou strukturu stránky (soubory, složky) a pak i HTML kód, kde nahráváš obrázek (případně CSS, pokud to nastavuješ přes vlastnost background). Případně musíš sám překontrolovat cesty.

 
Odpovědět
16. března 12:28
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 94. Zobrazit vše