Riešené úlohy k 1.-4. lekcii HTML a CSS

V minulej lekcii, Obrázky a odkazy v HTML, sme sa naučili do stránok vkladať obrázky a odkazy.

Nasledujúce 3 cvičenia vám pomôžu precvičiť znalosti webdesignu, teda HTML/CSS z minulých lekcií. Vo vlastnom záujme sa ich pokúste vyriešiť sami. Pod článkom máte pre kontrolu riešenie na stiahnutie. Ale pozor, akonáhle sa naň 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 znova do minulého tutoriálu a pokúste sa na to prísť.

Jednoduchý príklad

Vytvorte HTML dokument s príslušnou štruktúrou, nastavte titulok stránky na Common blackbird a do dokumentu vložte nasledujúci text rozčlenený do 3 odsekov (zdroj: Wikipedia.)

Text:

The common blackbird (Turdus merula) is a species of true thrush. It is also called the Eurasian blackbird (especially in North America, to distinguish it from the unrelated New World blackbirds), or simply the blackbird where this does not lead to confusion with a similar-looking local species. It breeds in Europe, western Asia, and North Africa, and has been introduced to Australia and New Zealand. It has a number of subspecies across its large range; a few former Asian subspecies are now widely treated as separate species. Depending on latitude, the common blackbird may be resident, partially migratory, or fully migratory.

The adult male of the common blackbird (Turdus merula merula, the nominate subspecies), which is found throughout most of Europe, is all black except for a yellow eye-ring and bill and has a rich, melodious song; the adult female and juvenile have mainly dark brown plumage. This species breeds in woods and gardens, building a neat, cup-shaped nest, bound together with mud. It is omnivorous, eating a wide range of insects, earthworms, berries, and fruits.

Both sexes are territorial on the breeding grounds, with distinctive threat displays, but are more gregarious during migration and in wintering areas. Pairs stay in their territory throughout the year where the climate is sufficiently temperate. This common and conspicuous species has given rise to a number of literary and cultural references, frequently related to its song.

Podoba výsledného dokumentu:

Pokročilý príklad

Vytvorte HTML dokument s nasledujúcim textom a obrázkom tak, aby vyzeral ako prehliadač nižšie.

Text:

We are an IT social network with a wide community of active members. We host one of the largest database of freely available articles and tutorials about programming and IT in general on the european Internet. Newcomers come to ICTdemy and become experienced programmers. And as you know, IT people are not doing well in life. You can create your own portfolio and upload your applications for feedback and evaluation. Of course, even experienced programmers will find useful materials, inspiration and challenges here.

Obrázok:

Podoba výsledného dokumentu:

Príklad pre náročných - BONUS

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 na stiahnutie. 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:

Ukážka obrazovky jednej lokácie:

Nižšie máte na stiahnutie potrebné obrázky.

Obrázky šípok pre odkazy

Obrázky lokácií

V budúcej lekcii, Tabuľky v HTML, si ukážeme tabuľky.

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

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