Zlatuše Cardová

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

Základy

Co je to webová stránka?

Webová stránka je dokument, který náš webový prohlížeč (např. Firefox, Chrome, InternetExplorer,...) získá od nějakého webového serveru a zobrazí jej. Přívlastek "webový" znamená, že se týká nejrozšířenejší internetové aplikace zvané World Wide Web určené pro poskytnutí informací. Zapisuje se v jazyce HTML. Je to text, ve kterém se používají tzv. řídící značky - tagy. HTML dokument je zdrojový kod 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 tvoří tagem < a > Odkaz je stručnou informací o internetové stránce. Obsahuje název, popisek a adresu URL, na kterou můžete kliknout a zobrazit si tak danou stránku ve svém internetovém prohlížeči. Součástí odkazu je také velký náhled internetové stránky.

Příklady odkazů

Odkaz na seznam.cz
Odkaz na konkrétní článek
Odkaz na pokusný dokument
Odkaz na pokusný dloouuhý dokument Ve stejné složce
Odkaz na 2.kapitolu dlouhého dokumentu
Odkaz na předposlední kapitolu dlouhého dokumentu
Odkaz na poslední kapitolu dlouhého dokumentu
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně jménem Ferda.
Tento odkaz se otevře v novém okně jménem Ferda.

Praktické příklady HTML stránek

Rozvržení webové stránky pomocí prvků div
Rozvržení webové stránky mřížkou.
Webový formulář verze 1
Můj vlastní formulář
Formulář - známkování

Obrázky

Obrázek vložím na webovou stránku nepárovým tagem <img>. Parametrem "src" řeknu, jaký obrázek se zobrazí. Zda je soubor ve stejném adresáři jako html dokument, můžeme napsat hodnotu parametru "src" pouze jméno souboru (do uvozovek). Jestli jsou soubory s obrázky umístěny jinde, musíme napsat cestu k nim. Není dobré obrázkem zakrývat moc místa, většinou je důležitý text a webová stránka s velkými obrázky pak ani nevypadá hezky.

Fotka kvetu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Integer vulputate sem a nibh rutrum consequat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Etiam posuere lacus quis dolor. Nullam eget nisl. In rutrum. Phasellus faucibus molestie nisl. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.

Praesent id justo in neque elementum ultrices. Aliquam erat volutpat. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Aliquam ornare wisi eu metus. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aenean placerat. Quisque porta. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. Mauris elementum mauris vitae tortor.





Maecenas lorem. Integer pellentesque quam vel velit. Praesent in mauris eu tortor porttitor accumsan. Vivamus porttitor turpis ac leo. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Vestibulum fermentum tortor id mi. Etiam quis quam.

Tuto stránku spravuje Zlatuše Cardová