Další šance dokončit svůj projekt a získat ceny v hodnotě 10.000 Kč! Pokračování úspěšné letní soutěže - ITnetwork winter

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

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

 

Stáhnout

Staženo 2089x (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?
58 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 (4)

 

 

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

Avatar
Tomáš Novák:20. října 16:59

Ahoj nevím jak udělat z obrázků zároveň odkaz... Jak na to?

 
Odpovědět
20. října 16:59
Avatar
Odpovídá na Tomáš Novák
Tomáš Novák:20. října 17:05

Už jsem na to příšel, jen vložím další element v tagu.

 
Odpovědět
20. října 17:05
Avatar
Jan Osuský
Člen
Avatar
Jan Osuský:20. října 17:06
<a href="odkaz"><img src="obrazek.png" alt="obrazek"></a>
 
Odpovědět
20. října 17:06
Avatar
Nikola Tomášková:22. října 1:27

Díky za cvičení :) Pustila jsem se radši do HTML než do PHP :)

Odpovědět
22. října 1:27
Je čas z nemožného udělat možným.
Avatar
Odpovídá na Nikola Tomášková
Jakub Podskalský:22. října 18:14

Sice jsem se po HTML a CSS vydal cestou JavaScriptu místo PHP, ale pokud jsem dobře pochopil, tak PHP se používá převážně jako backend webu. Takže HTML mi přijde jako základ, jestliže se člověk hodlá učit PHP. Samozřejmě si s ním asi můžeš tvořit i nějaké konzolové appky, ale k tomu takový jazyk neslouží. :)

 
Odpovědět
22. října 18:14
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jakub Podskalský
Nikola Tomášková:22. října 22:22

Jasne, ale pro cloveka bez zkusenosti, jako jsem ja, tak je urcite lepsi zacit necim lehcim. Ziskat zaklady a pak se pustit do neceho tezsiho. :)

Odpovědět
22. října 22:22
Je čas z nemožného udělat možným.
Avatar
Odpovídá na Nikola Tomášková
Jakub Podskalský:23. října 0:00

Jasně, já jsem taky jen podpořil tvou volbu :) A jen řekl, že otázka typu jestli začít s HTML nebo PHP se moc nehodí. :)
Na druhou stranu HTML ani CSS nejsou programovací jazyky, nemají žádnou logiku. V HTML dá se říct jen obaluješ text do tagů, které ho nějak definují. V CSS zase přidáš celému dokumentu styly, což je druhou základní složkou webu. Tyhle dva jazyky stačí na to, abys vytvořila krásný web podle své fantazie (ale bez animací a žádné funkcionality, např. portfolio). Tyto dva jazyky tvoří tzv. front-end webu, což je to, co vidí uživatel. Back-end je právě třeba právě to PHP, díky kterému můžeš přidat webu vlastní server, ukládání dat, databáze... (bere se tím třeba možnost poslat přes stránku email). V PHP ale referuješ přímo na to HTML, takže proto se v něm člověk bez znalosti HTML moc neobejde.
Takže to ber tak, že to má všechno společně nějakou souvislost a ani moc nejde o to, že se nějak učíš od nejjednoduššího k nejobtížnějšímu a že jinak můžeš začít kde chceš...
Tohle všechno ti ale brzy rychle dojde, takže se netrap, že jsem ti teď možná zamotal hlavu. :D
Hodně štěstí.

 
Odpovědět
23. října 0:00
Avatar
Odpovědět
23. října 10:30
Je čas z nemožného udělat možným.
Avatar
Tajny
Člen
Avatar
Tajny:30. října 16:41

Super cvičení. :-)

Odpovědět
30. října 16:41
Your time is limited, don't waste it living someone else's life.
Avatar
Honza Vlasák:15. listopadu 13:04

Super cvičení, děkuji za lekci a procvičení

Editováno 15. listopadu 13:04
 
Odpovědět
15. listopadu 13:04
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 66. Zobrazit vše