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

HTML dokument se skládá z hlavičky a těla. V hlavičce jsou různé informace o stránce, v těle je vlastní obsah stránky, který se zobrazí v okně prohlížeče.

Odkazy

Jak se dělá odkaz

Odkaz se tvoří párovým tagem <a>. Část textu ohraničená tímto tagem bude fungovat jako odkaz na jinou webovou stránku. Na jakou stránku odkaz míří, určíme argumentem href.

Jiné užitečné argumenty tagu <a> jsou name nebo target. Význam těchto argumentů ukazují příklady v dalším odstavci.

Příklady odkazů

Odkaz na seznam.cz
Odkaz na konkrétní článek na seznamu.
Odkaz na pokusný dokument ve stejné složce
Odkaz na pokusný dloooooouhý dokument ve stejné složce
Odkaz na 2.kapitolu dlouhého dokumentu
Odkaz na předposlední kapitolu dlouhého dokumentu
Odkaz na poslední kapitolu dlouhé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 ferda.
Tento odkaz se otevře v novém okně jménem ferda.

Obrázky

Jak vložit obrázek do html stránky

Obrázek vložím na webovou stránku 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 odstavec

Cyklista na dráze

obrázek v odstavci

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Nunc dapibus tortor vel mi dapibus sollicitudin. Fusce wisi. Quisque porta. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod.

Sestava více obrázků

Obrázky obtékané textem

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pretium lectus id turpis. In dapibus augue non sapien. Curabitur bibendum justo non orci. Fusce wisi. Vestibulum fermentum tortor id mi. Nullam faucibus mi quis velit. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Duis risus. Pellentesque ipsum. Maecenas aliquet accumsan leo. Aliquam erat volutpat. Integer lacinia.

Quisque porta. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ac leo pretium faucibus. Nullam sit amet magna in magna gravida vehicula. Fusce wisi. In enim a arcu imperdiet malesuada. Etiam commodo dui eget wisi. Vivamus porttitor turpis ac leo. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aenean vel massa quis mauris vehicula lacinia. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Donec vitae arcu. 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 suscipit libero eget elit. Praesent dapibus. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Cras elementum. Proin mattis lacinia justo. Fusce suscipit libero eget elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed convallis magna eu sem. Aliquam erat volutpat. Etiam egestas wisi a erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Maecenas libero. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer lacinia. Nunc auctor.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nam quis nulla. Maecenas fermentum.Aenean fermentum risus id tortor. Etiam posuere lacus quis dolor. Curabitur vitae diam non enim vestibulum interdum. Integer lacinia.

Tuto stránku spravuje R.Vacek