Praktické příklady

Rozvržení stránky prvky div
Rozvržení stránky mřížkou
Formulář   můj

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

Základy

Co to je webová stránka

webová stránka je internetová stránka, obsahující určitý soubor dat a informací

Struktura HTML dokumentu

HTML dokument je vždy rozdělen na dvě části, což je: hlavička - <head> & tělo - <body>
hlavička obsahuje název dokumentu - title, tělo obsahuje vše ostatní - text, odstavce, nápisy, obrázky

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
br nepárová tvrdé odřádkování
------------------------------------

Odkazy

Jak se dělá odkaz

Nejdříve se začne párovým tagem a atributem <a href="
Pak vložíme odkaz, který zakončíme  ">
Za to se napíše název odkazu a vše se zakončí </a>

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.
Odkaz na 1.kapitolu dlooooouhého dokumentu
Odkaz na poslední kapitolu dlooooouhého dokumentu
Tento dokument se otevře v novém okně/nové kartě.
Tento dokument se otevře v novém okně jménem "kulicka"
Tento dokument se otevře v novém okně/nové kartě.
Tento dokument se otevře v novém okně jménem "kulicka"

Obrázky

Jak se vloží obrázek

tady svými slovy...

Příklady

Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 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. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur sagittis hendrerit ante. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam in lorem sit amet leo accumsan lacinia.

In rutrum. Nullam rhoncus aliquam metus. Nulla quis diam. Integer vulputate sem a nibh rutrum consequat. Praesent in mauris eu tortor porttitor accumsan. Etiam egestas wisi a erat. Aenean fermentum risus id tortor. Aliquam in lorem sit amet leo accumsan lacinia. Nullam dapibus fermentum ipsum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Donec iaculis gravida nulla. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.

Phasellus faucibus molestie nisl. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Phasellus et lorem id felis nonummy placerat. Nullam eget nisl. Proin mattis lacinia justo. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Aliquam erat volutpat. Aliquam id dolor. Nulla non lectus sed nisl molestie malesuada. Fusce nibh. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Maecenas fermentum.