2.ročník IKT - Tvorba webu

Základy

Co je webová stránka?

Webová stránka je určitý soubor informací/dat, které byly přidány uživatelem za účelem informovat další uživatele. Stránky mohou mít hodně designů a stejně tak různé informací. Andrei Selezniov

Struktura HTML dokumentu

Webová stránka je určitý soubor informací/dat, které byly přidány uživatelem za účelem informovat další uživatele. Stránky mohou mít hodně designů a stejně tak různé informací.

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

značka	(Ne)Párová	význam
<html>	P(Párová)	ohraničuje celý html dokument
<head>	P(Párová)	hlavička
<br>	N(Nepárová)	zalomení řádku
<hr>	N(Nepárová)	horizontální čára
< <...> >	N(Nepárová)	mezera
< h1,2,3.. >	N(Nepárová)	zvýraznění (nadpis, podnadpis)
< table >	N(Nepárová)	tabůlka
<tr>	N(Nepárová)	řádek tabůlky

Pokud chci mít data uspořádané do řádku a sloupců, je možné použít html tabulku (viz. víše). Jiný způsob uspořádání je tzv. "předformátovaný text":

-------------------------------------------------------
 značka              význam
-------------------------------------------------------
 html    párová      ograničuje celý html dokument
 h1      párová      nadpis nejvyšší úrovně
 br    nepárová      zalomení řádku  
-------------------------------------------------------

Odkazy

Jak se dělá odkaz?

Tady svými slovy ...

Odkaz se vytvoří pomocí značky "a", která nás zevede na danou stránku. K tomu potřebujeme ale také značku "href", tedy "a href" - dohromady nás "naviguje" na cíl odkazu. Celé to vypadá takhle: do zkosené závorky zadáme "a href", dáme rovnítko a do uvozovek zadáme jméno stránky,dokumentu v počítači..., poté zvolíme cíl zobrazení. Odkaz zakončíme značkou /+a (/a) ve zkosené závorce, tedy pro vytvéření dokazu.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na Artemy Lebedev Studio portál Artemy Lebedev Studio
Odkaz na GQ Magazine portál gq magazine
Odkaz na pokusný dokument (je ve stejné složce)
Odkaz na dloooouhý dokument (je ve stejné složce)
https://www.artlebedev.com/1shot/interiors/1shot-interiors-plan.png Odkaz na 1.kapitolu dlouhého dokumentu
Odkaz na 2.kapitolu dlouhého dokumentu
Odkaz na 3.kapitolu dlouhého dokumentu
Odkaz na 1.kapitolu dlouhého dokumentu
Odkaz na 30.kapitolu dlouhého dokumentu
Tento dokument se otevře v novém okně "culibrk".
Tento dokument se otevře v novém okně "culibrk".

Obrázky

BORAT

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent id justo in neque elementum ultrices. Aenean id metus id velit ullamcorper pulvinar. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nullam eget nisl. Integer vulputate sem a nibh rutrum consequat. Nullam sit amet magna in magna gravida vehicula. Integer in sapien. Phasellus faucibus molestie nisl. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam posuere lacus quis dolor. Phasellus rhoncus.

Ut tempus purus at lorem. Aenean placerat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Integer in sapien. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Aenean placerat. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Maecenas libero. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Maecenas lorem.

Nullam rhoncus aliquam metus. Fusce consectetuer risus a nunc. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Mauris metus. Vivamus ac leo pretium faucibus. In rutrum. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Vestibulum fermentum tortor id mi. Ut tempus purus at lorem. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Aliquam erat volutpat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nunc auctor. Mauris tincidunt sem sed arcu. Aliquam erat volutpat. Etiam neque. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.

Příklady