Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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 - Webové stránky krok za krokom

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 - Webové stránky krok za krokom

Podoba výsledného dokumentu:

Cvičenie k HTML – Obrázok a zvýraznenie textu - Webové stránky krok za krokom

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í - Webové stránky krok za krokom

Ukážka obrazovky jednej lokácie:

Cvičenie k HTML – Kruh - Webové stránky krok za krokom

Nižšie máte k stiahnutiu potrebné obrázky.

Obrázky šípok pre odkazy

šípka hore - Webové stránky krok za krokom šípka doľava - Webové stránky krok za krokom šípka doprava - Webové stránky krok za krokom šípka dole - Webové stránky krok za krokom

Obrázky lokácií

dom - Webové stránky krok za krokom hrad - Webové stránky krok za krokom les - Webové stránky krok za krokom Les bez straky - Webové stránky krok za krokom rybník - Webové stránky krok za krokom

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

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

 

Na absolvovanie tohto cvičenia prosím splň všetky príklady tým, že ich úspešne odovzdáš na otestovanie.

Predchádzajúci článok
Obrázky a odkazy v HTML
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Tabuľky v HTML
Článok pre vás napísal Neaktivní uživatel
Avatar
Užívateľské hodnotenie:
9 hlasov
Tento uživatelský účet již není aktivní na základě žádosti jeho majitele.
Aktivity