2.ročník IKT - tvorba webových stránek

Základy

Co je to webová stránka

Webová stránka je jedna určitá stránka na jedné určité adrese. Zobrazuje se jako dokument internetového prohlížeče po zadání příslušné URL adresy, většinou pomocí World Wide Webu (WWW).

Data jsou psána kódem pomocí značkovacího jazyka HTML nebo XHTML a kaskádových stylů CSS. Html dokument je zdrojovým kódem webové stránky.

Struktura html dokumentu

HTML dokument se skládá z hlavičky a těla. V hlavičce jsou různé informace o stránce, v těle je vlastní obsah stránky, který se zobrazí v okně prohlížeče.

Odkazy

Jak se dělá odkaz

Odkaz se vytvoří tagem <a>.


Důležitá část odkazu je takzvaný Herf. Ten nám řekne, co za stránku se otevře po rozkliknutí odkazu.
Hodnota herf atributu je URL či-li adresa odkazovaného souboru.
Pro samotné vytvoření odkazu slouží věta <a href="daný odkaz">jaké slovo bude sloužit jako dokaz</a>

Příklady odkazů

Odkaz na stránku seznam.cz
Odkaz na konkrétní článek na seznamu.
Odkaz na zajímavé video
Odkaz na pokusný dokument, který je na stejném místě jako index.html
Odkaz na pokusný dlouhý dokument, který je na stejném místě jako index.html

Odkay na 1. kapitolu dlouhého dokumentu
Odkay na 2. kapitolu dlouhého dokumentu
Odkay na Předposlední kapitolu dlouhého dokumentu
Odkay na Poslední kapitolu dlouhého dokumentu
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně jménem Amogus.
Tento odkaz se otevře v novém okně jménem Amogus.

Praktické příklady HTML stránek

Rozvržení webové stránky starším způsobem - pomocí bloků <div>
Rozvržení webové stránky pomocí webové mřížky
Webový formulář: Tu je
Aktuální webový formulář 2: Tu je
Můj webový formulář: Tu je

Obrázky

Jak vložit obrázek od HTML stránky.

Obrzek se vloží do stránky tagem <img>.


Obrázky do stránky html tagem img.
Samotný obrázek vložíme větou <a href="commisar.jpg" target="fotka"><img src="commisar.jpg"></a>

Příklady

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Maecenas lorem. Praesent id justo in neque elementum ultrices. Duis pulvinar. Praesent id justo in neque elementum ultrices. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Aliquam in lorem sit amet leo accumsan lacinia. Etiam commodo dui eget wisi. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam faucibus mi quis velit. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Quisque porta.

Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Curabitur vitae diam non enim vestibulum interdum. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Integer tempor. Morbi scelerisque luctus velit. Duis risus. Duis condimentum augue id magna semper rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Aliquam ante. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nulla est. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nunc auctor. Quisque tincidunt scelerisque libero. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Morbi leo mi, nonummy eget tristique non, rhoncus non leo.

Donec quis nibh at felis congue commodo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Vivamus porttitor turpis ac leo. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean id metus id velit ullamcorper pulvinar. Nulla non arcu lacinia neque faucibus fringilla. Pellentesque pretium lectus id turpis. Phasellus rhoncus. Aliquam erat volutpat. Proin in tellus sit amet nibh dignissim sagittis. Maecenas libero. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Aenean id metus id velit ullamcorper pulvinar. Fusce nibh. Maecenas aliquet accumsan leo. Nam sed tellus id magna elementum tincidunt. Etiam bibendum elit eget erat. Sed ac dolor sit amet purus malesuada congue.



Duis condimentum augue id magna semper rutrum. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Nam sed tellus id magna elementum tincidunt. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Pellentesque ipsum. Mauris elementum mauris vitae tortor. Etiam quis quam. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Aliquam erat volutpat. Aliquam in lorem sit amet leo accumsan lacinia. Duis viverra diam non justo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Fusce wisi. Aliquam erat volutpat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aliquam in lorem sit amet leo accumsan lacinia. Integer malesuada. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Tuto stránku spravuje V.Soukup