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

HTML a CSS Statický web Cvičení k 1.-3. lekci HTML a CSS American English version English version

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.

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 865x (523.08 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (2)

Článek pro vás napsal Daniel Vítek
Avatar
Primárně PHP programátor, rád si hraje s Arduinem a píše články do sekce Batch.

Jak se ti líbí článek?
Celkem (21 hlasů) :
4.952384.952384.952384.952384.95238


 


Miniatura
Předchozí článek
Obrázky a odkazy v HTML
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Tabulky v HTML

 

 

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

Avatar
Tomáš123
Člen
Avatar
Tomáš123:

Atribút weight u obrázku neexistuje. Asi si mal na mysli width. Neznámy atribút by ale nemal ovplyvniť vykreslenie obrázku. Chyba bude niekde v ceste...

Odpovědět 12. dubna 21:33
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Tomáš123
Patrik Bednář:

Ani po odstranění obou velikostí obrázku nelze zobrazit.

 
Odpovědět 13. dubna 7:08
Avatar
Odpovídá na Patrik Bednář
Ondřej Jiří Beneš:

Máš v pořádku cestu?

Složka s názvem "obrazky" (třeba, jestli tu máš diakritiku) a název obrázku "4" (jestli máš vidět koncovky, tak s názvem i ".png").

Viděl bych to asi na to jméno obrázku, někde je možné, že to bude vypadat jako "4.png.png" přičemž poslední ".png" není vidět, protože můžeš mít koncovky souborů skryté.

 
Odpovědět 13. dubna 7:19
Avatar
Odpovídá na Ondřej Jiří Beneš
Patrik Bednář:

Vše zkontrolováno a vše by mělo být tak, jak je.

 
Odpovědět 13. dubna 8:06
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Patrik Bednář
Tomáš123:

Dodaj, prosím, živú ukážku... Veľmi pravdepodobne je chyba v ceste, ale, keď dodáš niečo, s čím sa dá pracovať, budeme môcť skontrolovať aj ostatné možnosti...

Odpovědět 13. dubna 20:04
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš Raibr:

Mission complete

 
Odpovědět 15. května 19:24
Avatar
huty
Člen
Avatar
huty:

Ten hrad mi dal zabrat, ale je to parádní příklad :D Super cvičení.

Odpovědět 6. července 16:54
obecně je lepší používat více proměnných a dodržovat přehlednost, než psát co nejkratší kód a po měsíci zapomenout, j...
Avatar
robert
Člen
Avatar
robert:

ujisti se ze obrazek neni v jinem formatu nez png dale zkontroluj jestli je cesta k obrazku spravna

 
Odpovědět 31. července 16:22
Avatar
Danzbo
Člen
Avatar
Danzbo:

Po pauze od učení HTML, mě toto cvičení velmi bavilo :-)

 
Odpovědět  +1 19. listopadu 0:15
Avatar
Zbyněk Pokorný:

Ty cvičení celkem dobrý až na to třetí s tím hradem. Tím sem se celkem potrápil, ale na konec jsem to zvládl. Fakt dobře připravené.

 
Odpovědět 30. listopadu 15:45
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 14. Zobrazit vše