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

Struktura stránky obsahuje základní značky začínající úvodem, titulem, hlavičkou. Pak je obsah těla ve kterém se dá vytvořit menu a vložit odkazy na stránky. Pak se dají vložit odkazy na webové stránky a ruzné aktivity. Tělo dokumentu je složeno z nadpisů a odstavců.

Formátování textu

Formátování textu

Webový prohlížeč si odstavce textu formátuje sám podle toho, jak má široké okno. Snadno si to ověřím tak, že zkusím velikost okna změnit - prohlížeč si text přeformátuje podle nové velikosti okna.

Tabulka

Tabulka

Jinou možností, jak uspořádat text, je vytvořit html tabulku. Je to trochu složitější, ale nabízí to více možností. Celá tabulka se skládá z řádků a každý řádek je rozdělen na jednotlivé buňky:

význam některých html značek
Značka (Ne)Párová Význam
html P ohraničuje celý dokument
head P hlavička dokumentu
body P tělo dokumentu
hl P nadpis nejvyšší úrovně
p P odstavec(paragraph)
hr N čára(horizontal row)
 obrázky

Obrázky

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Phasellus et lorem id felis nonummy placerat. Pellentesque ipsum. Nullam rhoncus aliquam metus. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nam sed tellus id magna elementum tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas libero. Donec iaculis gravida nulla. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Sed ac dolor sit amet purus malesuada congue. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam quis quam. Aliquam erat volutpat. Duis pulvinar.

Phasellus rhoncus. Duis viverra diam non justo. 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. Duis risus. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Curabitur vitae diam non enim vestibulum interdum. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. In rutrum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Aliquam erat volutpat.

Fusce wisi. Aliquam id dolor. Aenean id metus id velit ullamcorper pulvinar. Duis pulvinar. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec vitae arcu. Donec quis nibh at felis congue commodo. Etiam posuere lacus quis dolor. Quisque tincidunt scelerisque libero. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Vivamus luctus egestas leo. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Aliquam ante.

Ut tempus purus at lorem. Vivamus porttitor turpis ac leo. Phasellus rhoncus. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Nunc auctor. Nulla est. Duis pulvinar. Nullam at arcu a est sollicitudin euismod. Proin in tellus sit amet nibh dignissim sagittis. Vivamus porttitor turpis ac leo. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Curabitur vitae diam non enim vestibulum interdum. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Fusce suscipit libero eget elit. Integer tempor. Suspendisse nisl. Nulla est. Etiam quis quam.

Odkazy

Odkazy

Jak na to

Odkazy dělají z webové stránky silný informační nástroj. Odkaz se vytvoří tagem . Parametrem "href" se určí cíl odkazu. Tak jako u obrázků, pokud je cílový dokument ve stejném adresáři, stačí napsat jméno souboru - viz.příklad Toto je odkaz na sousední dokument.

 >html odkazy

Různé varianty HTML odkazů

Odkaz na oblíbená písnička, přeji příjemný poslech
Odkaz na snad budu taky jednou tak dobrá fotografka, už víte po kom chci být fotograf
Odkaz na hádám, že bez tohoto by se naše generace neobešla, přiznávám se, že já rozhodně ne
Odkaz na doporučení filmu, jednoho z mých nejoblíbenějších
Odkaz na máte doma taky nějaké zvířátko? my tři kočičky, ovšem bez roušek