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, Opera, elinks, ...) 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.

Ahoj, jak se máš? Jak vám dupou králíci? Žluťoučký kůň, ďábelské ódy. Nazdar, čau !!!

Odkazy

Jak se dělá odkaz

Odkaz se vytvoří tagem <a>. Tady svými slovy vysvětlíme ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin mattis lacinia justo. Nulla non lectus sed nisl molestie malesuada. Curabitur sagittis hendrerit ante. Etiam egestas wisi a erat. Vivamus luctus egestas leo. Vivamus ac leo pretium faucibus. Curabitur bibendum justo non orci. Etiam dictum tincidunt diam. Duis risus. Fusce wisi. Etiam egestas wisi a erat.

Aliquam erat volutpat. Nullam faucibus mi quis velit. In convallis. Praesent vitae arcu tempor neque lacinia pretium. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nulla pulvinar eleifend sem. Mauris dictum facilisis augue. Fusce wisi. Etiam dictum tincidunt diam. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem.

Příklady odkazů

Odkaz na stránku seznam.cz
Odkaz na konkrétní článek na seznamu.
Odkaz na pokusný dokument, který je na stejném místě jako index.html.
Odkaz na pokusný dlooouuuhý dokument, který je na stejném místě jako index.html.
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ě jménem huhububu.
Tento odkaz se otevře v novém okně jménem huhububu.

Praktické příklady html stránek

Rozvržení webové stránky starším způsobem - pomocí bloků <div>
Rozvržení webové stránky webovou mřížkou
Webový formulář:   verze1 (19.4.)   verze2 (26.4.)   verze3 (10.5.)   verze4 (17.5.)   verze5 (24.5.)   verze6 (7.6.)  
Můj vlastní formulář

Obrázky

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

Obrázek se vloží do html stránky tagem <img>. Tady svými slovy vysvětlí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.

Duis risus. Pellentesque ipsum. Aliquam id dolor. Duis pulvinar. Nulla est. Phasellus faucibus molestie nisl. Sed convallis magna eu sem. Nunc dapibus tortor vel mi dapibus sollicitudin. Praesent vitae arcu tempor neque lacinia pretium. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Aliquam erat volutpat.

Vivamus luctus egestas leo. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. In rutrum. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Vivamus ac leo pretium faucibus. Integer pellentesque quam vel velit. Nulla non lectus sed nisl molestie malesuada. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.

Příklady obrázků

obrázek mimo odstavec

obrázek v odstavci

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis ultrices augue. Fusce nibh. Integer pellentesque quam vel velit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Suspendisse sagittis ultrices augue. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Fusce consectetuer risus a nunc. Nulla pulvinar eleifend sem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Integer tempor. Curabitur sagittis hendrerit ante.

několik obrázků mimo odstavec


obrázky obtékané

Obtékání obrázku zajistí CSS vlastnost float - tato vlastnost může mít hodnotu left nebo right. Obrázek je pak vyjmut z normálního toku dokumentu a je doražen k levému/pravému okraji nadřazeného bloku - zde bloku body.

Následující obrázky jsou obtékány zprava (mají vlastnost float:left) a zároveň jsou odkazem na obrázek v plné velikosti, který se otevře v pojmenovaném okně.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tellus. Integer in sapien. 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. Nulla quis diam. Phasellus faucibus molestie nisl. Aenean placerat. Vestibulum fermentum tortor id mi. 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. Nulla accumsan, elit sit amet varius semper.

Fusce wisi. Curabitur vitae diam non enim vestibulum interdum. Nullam rhoncus aliquam metus. Et harum quidem rerum facilis est et expedita distinctio. Maecenas sollicitudin. Nulla non arcu lacinia neque faucibus fringilla. Nulla non lectus sed nisl molestie malesuada. Nullam sit amet magna in magna gravida vehicula. Mauris metus. Quisque porta.

In enim a arcu imperdiet malesuada. 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. Duis risus. Duis pulvinar. Pellentesque ipsum. Maecenas aliquet accumsan leo. Curabitur bibendum justo non orci. Fusce consectetuer risus a nunc. Ut tempus purus at lorem. Aenean vel massa quis mauris vehicula lacinia. 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.

Tuto stránku spravuje R.Vacek