Příklady

Rozvržení stránky pomocí div
Rozvržení stránky mřížkou
Formulář v.1 2 3 4 5můj

2.ročník IKT - tvorba webu

Základy

Co je to webová stránka

Webová stránka je informační dokument, který se zobrazuje v aplikaci webový klient (Firefox, Chrome, Opera, Explorer, elinks, ...). Webové stránky spravuje webový server (apache, iis, ...) umístěný na nějaké adrese v Internetu a tyto stránky odesílá klientům, poté, co o ně požádají.

Struktura HTML dokumentu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis risus. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Fusce consectetuer risus a nunc. Vivamus porttitor turpis ac leo. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Pellentesque ipsum. Fusce nibh. Nunc dapibus tortor vel mi dapibus sollicitudin. Nullam eget nisl. Sed convallis magna eu sem. Maecenas libero. Praesent vitae arcu tempor neque lacinia pretium. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Pellentesque ipsum.

HTML dokument se skládá z hlavičky a těla. Hlavička je uzavřena tagem <head> a obsahuje různé informace o stránce. Obsah stránky je umístěn v těle (párový tag <body>) a je rozdělen na odstavce textu (<p>) uvozené nadpisy. Nadpisů může být až 6 úrovní. Nadpis nejvyšší úrovně je uzavřen párovým tagem <h1>, podnadpisy <h2>, atd...

Význam některých HTML značek

značka (Ne)Párová význam
<html> P ohraničuje celý HTML dokument
<head> P hlavička
<p> P odstavec
<br> N odřádkování
<hr> N horizontální čára

Pokud chceme data uspořádat do řádků a sloupců, můžeme použít HTML tabulku (viz.výše). Jiný způsob uspořádání je tzv. "předformátovaný text":

značka              význam
=================================================
html     párová     ohraničuje celý html dokument
head     párová     hlavička
br     nepárová     odřádkování  
=================================================

Odkazy

Jak udělat odkaz

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porttitor turpis ac leo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Vestibulum fermentum tortor id mi. Praesent id justo in neque elementum ultrices. Duis condimentum augue id magna semper rutrum. Pellentesque pretium lectus id turpis.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na jeden článek na seznam.cz
Odkaz na pokusný dokument (je ve stejné složce).
Odkaz na dlooouhý dokument
Odkaz na 98.kapitolu dlooouhého dokumentu
Tento dokument se otevře v novém okně/panelu.
Tento dokument se otevře v okně/panelu jménem "franta".
Tento dokument se otevře v okně/panelu jménem "franta".

Obrázky

Jak vložit obrázek

Tady svými slovy ...

Příklady obrázků

In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Aenean vel massa quis mauris vehicula lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nullam at arcu a est sollicitudin euismod. Nulla non lectus sed nisl molestie malesuada. Maecenas sollicitudin. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam commodo dui eget wisi. Sed convallis magna eu sem. Maecenas sollicitudin.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc auctor. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. 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? Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer vulputate sem a nibh rutrum consequat. Cras elementum. Itaque earum rerum hic tenetur.

Praesent in mauris eu tortor porttitor accumsan. Aliquam erat volutpat. Nulla quis diam. Suspendisse sagittis ultrices augue. Aliquam ante. Nullam rhoncus aliquam metus. Morbi scelerisque luctus velit. Etiam bibendum elit eget erat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean vel massa quis mauris vehicula lacinia. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Duis risus. Maecenas lorem. Nam sed tellus id magna elementum tincidunt. Aliquam ornare wisi eu metus.