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

tuto stránku spravuje Mikuláš Kondr

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

Dokument je složen z hlavičky a těla.

Hlavička dokumentu se nezobrazuje. Obsahuje nepovinně tagy (title, meta, link, style, script aj.).

Body (tělo) obsahuje veškerý zobrazovaný obsah stránky.

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.

Uspořádaný (předformátovaný) text

Pokud chci text uspořádat do sloupečků, mohu použít tzv. předformátovaný text. Ten prohlížeč formátuje stejně, jak je zapsán ve zdrojovém kódu stránky. Text zobrazuje neproporcionálním písmem. Příklad použití:

--------------------------------
  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
h1       P         nadpis nejvyšší úrovně
p        P         odstavec (paragraph)
pre      P         předformátovaný text
br       N         tvrdý konec řádku (break)
hr       N         čára (horizontal row)
---------------------------------------------

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
h1 P nadpis nejvyšší úrovně
p P odstavec (paragraph)
hr N čára (horizontal row)

Maecenas libero. Duis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Fusce wisi. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Curabitur bibendum justo non orci. Morbi scelerisque luctus velit. Proin mattis lacinia justo. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Ut tempus purus at lorem. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Phasellus rhoncus. Aliquam id dolor. Curabitur vitae diam non enim vestibulum interdum.

Etiam bibendum elit eget erat. Nunc auctor. Mauris elementum mauris vitae tortor. Aenean fermentum risus id tortor. Nullam eget nisl. Morbi scelerisque luctus velit. Nunc auctor. Etiam commodo dui eget wisi. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Aenean vel massa quis mauris vehicula lacinia. Proin in tellus sit amet nibh dignissim sagittis. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Fusce wisi. Et harum quidem rerum facilis est et expedita distinctio. Maecenas aliquet accumsan leo. Aliquam in lorem sit amet leo accumsan lacinia. Ut tempus purus at lorem.

media.sport.cz media.sport.cz

Sed consequat velit metus, eget sodales ex finibus eu. Nulla eu sem consequat, varius sapien eu, elementum purus. Suspendisse laoreet, sem consequat tincidunt aliquet, purus ante lacinia leo, in imperdiet metus enim lobortis sem. Fusce eu luctus metus, sit amet suscipit est. Nunc vel hendrerit lectus. Mauris condimentum felis augue, et ultrices quam sodales sit amet. Sed laoreet mi vehicula dui tincidunt placerat. Phasellus in odio accumsan, lobortis libero ut, lacinia mauris. Curabitur faucibus porttitor dui vel luctus. Nulla elementum maximus ipsum.

media.sport.cz

media.sport.cz

Phasellus vestibulum in felis vel mollis. Aliquam cursus vehicula nunc, id venenatis nisi aliquet ut. Etiam volutpat turpis at velit tincidunt, eu commodo ligula commodo. Cras fermentum purus vel nisl viverra, quis tristique dui porta. Aliquam fringilla quis mi a luctus. Proin est lectus, tempor et justo a, vestibulum lacinia magna. Suspendisse potenti. Ut lorem est, lobortis a laoreet eu, dapibus sit amet justo. Mauris at erat sed neque maximus ullamcorper. Suspendisse pretium elit odio. Nam tempus orci a turpis ultrices, tristique tempor est mattis. Proin iaculis molestie nisi in ornare. Fusce imperdiet sem non cursus fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Sed vitae ante nulla.

1. html

Quasi architecto

Quasi architecto. Praesent in mauris eu tortor porttitor accumsan. Mauris tincidunt sem sed arcu. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Integer tempor. Quisque tincidunt scelerisque libero. Phasellus rhoncus kondr2.html.html. Fusce consectetuer risus a nunc. Fusce suscipit libero eget elit. Nam quis nulla. 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. Mauris elementum mauris vitae tortor. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus.

Duis condimentum augue id magna semper rutrum. Etiam quis quam. kondr2.html.html. Mauris elementum mauris vitae tortor. Curabitur bibendum justo non orci. Quisque porta. Pellentesque pretium lectus id turpis. Suspendisse sagittis ultrices augue. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante.

In convallis.Curabitur bibendum justo non orci. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Fusce suscipit libero eget elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam ornare wisi eu metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam neque. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Et harum quidem rerum facilis est et expedita distinctio. 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. Fusce consectetuer risus a nunc. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Aliquam id dolor. Mauris elementum mauris vitae tortor. Mauris tincidunt sem sed arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna.

2. html

Cum sociis

Cum sociis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum tincidunt diam. Praesent in mauris eu tortor porttitor accumsan. Quisque tincidunt scelerisque libero. Etiam posuere lacus quis dolor. Nunc tincidunt ante vitae massa. Quisqe porta. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Ut tempus purus at lorem. Etiam posuere lacus quis dolor. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Donec iaculis gravida nulla.

Sed convallis hadasova1.html.html magna eu sem. Donec iaculis gravida nulla. 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. Nullam rhoncus aliquam metus. kondr1.html.html. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Integer lacinia. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Maecenas libero. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.

Proin mattis lacinia justo. Centrum.cz in lorem sit amet leo accumsan lacinia. Morbi scelerisque luctus velit. Integer pellentesque quam vel velit. Maecenas sollicitudin. Etiam bibendum elit eget erat. Duis condimentum augue id magna semper rutrum. Aliquam erat volutpat. Mauris metus. Etiam quis quam. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.

Různé varianty HTML odkazů

Odkaz na Reflex
Odkaz na Čsfd
Odkaz na Božkov
Odkaz na Škola on line
Odkaz na Tik ťok
Odkaz na Pribináček

Tuto stránku vytvořil Mikuláš Kondr