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ý kód 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ů.

Odkazy

Jak se dělá odkaz

Odkaz se vytvoří tagem <a>. Tady svými slovy upřesníme ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Suspendisse nisl. Morbi scelerisque luctus velit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Vestibulum fermentum tortor id mi. Aliquam in lorem sit amet leo accumsan lacinia. Cras elementum. Etiam commodo dui eget wisi. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. In rutrum.

Příklady odkazů

Odkaz na stránky seznam.cz
Odkaz na konkrétní článek na seznamu.
Odkaz na dokument ve stejné složce.
Odkaz na dloooooouhý dokument ve stejné složce.
Odkaz na 2.kapitolu dloooooouhého dokumentu
Odkaz na předposlední kapitolu dloooooouhého dokumentu
Odkaz na poslední kapitolu dloooooouhého dokumentu
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně.
Tento odkaz se otevře v novém okně jménem matonka.
Tento odkaz se otevře v novém okně jménem matonka.

Příklady praktických HTML stránek

rozvržení webové stránky pomocí prvků <div>
rozvržení webové stránky pomocí mřížky
Webový formulář v.1 (6.4.)   v.2 (13.4.)   v.3 (20.4.)   v.4 (27.4.)   v.5 (4.5.)   v.6 (18.5.)   v.7 (25.5.)
Můj vlastní formulář

Obrázky

Jak vložit obrázek?

Obrázek na webovou stránku vložím nepárovým tagem <img>. Tady svými slovy upřesníme ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam in lorem sit amet leo accumsan lacinia. Fusce nibh. Aenean fermentum risus id tortor. Nam sed tellus id magna elementum tincidunt. Proin mattis lacinia justo. Maecenas aliquet accumsan leo. Integer malesuada. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Vestibulum fermentum tortor id mi. In rutrum.

Příklady

obrázek mimo textový odstavec

fotbalový team ČR

obrázek v textovém odstavci

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ipsum. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nullam faucibus mi quis velit. Nullam rhoncus aliquam metus. Praesent vitae arcu tempor neque lacinia pretium. Sed convallis magna eu sem. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Proin mattis lacinia justo. Sed ac dolor sit amet purus malesuada congue. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

uspořádání více obrázků



Tuto stránku spravuje R.Vacek