Základy HTML

Popis struktury HTML stránky

Struktura HTML stránky se skládá z hlavičky head a body. V hlavičce píšeme určitá metadata stránky, nastavení pro prohlížeč, jak se má stránka zobrazovat. Do těla dokumentu píšeme vlastní obsah stránky, tedy který budeme psát mezi body a /body. Nelze jen začít psát značky. Důležitý je tag !doctype, který určuje verzi html, která se využila, vždy před tagem html, poté se pokračuje tagem title, který nám v prohlížeči ukáže název stránky.

Co je to webová stránka?

Webová stánka je dokument, který je lidem dostupný k předčtení prostřednictvím internetového prohlížeče po zadání příslušné adresy URL, hlavně v rámci www (World Wide Webu.

Je tvořena a prezentována ve formě hypertextu, jehož kód je tvořen pomocí HTML hazyka a kaskádových stylů CSS. Také je tvoří v obsahu soustava textů, obrázků, dokumentů či dalších multimediálních všcí. Každá webová stránka má unikátní adresu.

Struktura html dokumentu

Struktura HTML stránky se skládá z hlavičky head a body. V hlavičce píšeme určitá metadata stránky, nastavení pro prohlížeč, jak se má stránka zobrazovat. Do těla dokumentu píšeme vlastní obsah stránky, tedy který budeme psát mezi body a /body. Nelze jen začít psát značky. Důležitý je tag !doctype, který určuje verzi html, která se využila, vždy před tagem html, poté se pokračuje tagem title, který nám v prohlížeči ukáže název stránky.

Význam některých html značek - formátování + tabulka

Značka (Ne)párová Význam
html P Ohraničuje celý dokument
head P hlavička dokumentu
body P tělo dokumentu
h1 P nadpis nejvyšší úrovně
p P Odstavec (paragraph)
hr N čára (hozirontal row)

Webová stránka s obrázky

Hyeny prosluly jako mrchožrouti, hyena žíhaná a hyena čabraková se živí převážně mršinami. Nejnovější výzkumy dokazují, že hyena skvrnitá je převážně lovec. Milujeme hyenky.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Quisque tincidunt scelerisque libero. Integer malesuada. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam eget nisl. Integer malesuada. Praesent vitae arcu tempor neque lacinia pretium. Aliquam erat volutpat. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Praesent id justo in neque elementum ultrices. Vivamus luctus egestas leo. Nulla pulvinar eleifend sem. Curabitur bibendum justo non orci. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim.

Pellentesque sapien. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Morbi scelerisque luctus velit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam rhoncus aliquam metus. Fusce nibh. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Fusce nibh. 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nulla quis diam.

Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Praesent id justo in neque elementum ultrices. 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. Pellentesque arcu. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Vivamus porttitor turpis ac leo. Nulla est. Et harum quidem rerum facilis est et expedita distinctio. Aenean vel massa quis mauris vehicula lacinia. Duis viverra diam non justo. Etiam egestas wisi a erat. Praesent id justo in neque elementum ultrices. Pellentesque ipsum. Quisque porta. Aenean fermentum risus id tortor. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aliquam erat volutpat.

Odkazy

Odkaz na druhé HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Etiam neque. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Aenean placerat. Aliquam in lorem sit amet leo accumsan lacinia. Vivamus ac leo pretium faucibus. Etiam bibendum elit eget erat. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Etiam neque.

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. Nunc tincidunt ante vitae massa. Vivamus porttitor turpis ac leo. Integer malesuada. Donec iaculis gravida nulla. In convallis. Integer tempor. Etiam bibendum elit eget erat. Pellentesque sapien. Aliquam id dolor.

Aenean placerat. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nam quis nulla. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. 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. Maecenas sollicitudin. Duis condimentum augue id magna semper rutrum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Aenean vel massa quis mauris vehicula lacinia. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Morbi scelerisque luctus velit. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Nulla non lectus sed nisl molestie malesuada. Praesent dapibus. In enim a arcu imperdiet malesuada.

Různé varianty HTML odkazů

Odkaz na Google
Odkaz na školní web SUPŠ Zámeček
Odkaz na dokument Obrázek uřechtaný hyenky. Enjoy
Odkaz na úvodní stránku s návody jak napsat HTML dokument

Stránku vytvořila T. Kovalíčková