Praktické příklady

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

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

Základy

Co je to webová stránka

Webová stránka je soubor dat zobrazovaný určitým webovým prohlížečem(Chrome,InternetExplorer,Bing atd.).
Je součástí nejrozšířenější aplikace WWW = World-Wide-Web, která má za úkol poskytovat informace uživatelům. Webová stránka se zapisuje v jazyce HTML (HyperText Markup Language). Je to text, ve kterém se vyskytují řídící značky = tagy. HTML dokument je tedy takový zdrojový kód webové stránky

Struktura HTML dokumentu

HTML dokument je uzavřen do párového tagu . Je rozdělen na dvě části - hlavičku(head), která obsahuje informace pro internetový prohlížeč a tělo(body), které tvoří vlastní obsah webové stránky.
Hlavička dokumentu se nezobrazuje, je většinou krátká a obsahuje např. titulek okna nebo použité kódování. Body (tělo) obsahuje veškerý zobrazovaný obsah stránky. Tělo (body) je rozděleno na jednotlivé odstavce, proloženo nadpisy a podnapisy. Nadpisy mají různé úrovně, nadpis nejvyšší úrovně se zpravidla na stránce vyskytuje jen jednou na začátku. Nadpisů může být až 6 úrovní.

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

značka (Ne)Párová význam
<html> P ohraničuje html dokument
<head> P hlavička dokumentu
<body> P tělo dokumentu
<p> P odstavec
<br> N tvrdé odřádkování

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

-----------------------------------------------
značka           význam
-----------------------------------------------            
<html>  párová  ohraničuje html dokument
<head>  párová  hlavička dokumentu
<body>  párová  tělo dokumentu
-----------------------------------------------

Odkazy

Jak se dělá odkaz

Odkaz vytvoříme tagem <a> ve spojení s atributem href (Hypertext Reference).
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.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na jeden článek na seznamu.
Odkaz na pokusný dokument (je ve stejné složce )
Odkaz na dlouhý dokument (je ve stejné složce )
Odkaz na 1. kapitolu dlouhého dokumentu(je ve stejné složce )
Odkaz na 99. kapitolu dlouhého dokumentu(je ve stejné složce )
Tento dokument se otevře v novém okně nebo nové kartě
Tento dokument se otevře v novém okně jménem "kulička"
Tento dokument se otevře v novém okně nebo nové kartě
Tento dokument se otevře v novém okně jménem "kulička"

Obrázky

Jak se voží obrázek

tady svými slovy...

Příklady

Maecenas lorem. Mauris elementum mauris vitae tortor. 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 habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis pulvinar. Proin in tellus sit amet nibh dignissim sagittis. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nullam faucibus mi quis velit. Vivamus luctus egestas leo. Aenean fermentum risus id tortor. Aliquam in lorem sit amet leo accumsan lacinia. Quisque tincidunt scelerisque libero. Etiam quis quam. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Nulla non arcu lacinia neque faucibus fringilla. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus.

Aliquam in lorem sit amet leo accumsan lacinia. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Sed convallis magna eu sem. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Aliquam in lorem sit amet leo accumsan lacinia. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Sed convallis magna eu sem. Proin mattis lacinia justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis nibh at felis congue commodo.


Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nulla pulvinar eleifend sem. Aliquam id dolor. Fusce tellus. Sed ac dolor sit amet purus malesuada congue. Etiam posuere lacus quis dolor. Integer in sapien. Mauris tincidunt sem sed arcu. Proin mattis lacinia justo. Pellentesque sapien. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam rhoncus aliquam metus. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.