Stránku spravuje Anna Kagánková

Tvorba webových stránek


Základy

Co je to webová stránka

Webová stránka je soubor dat zobrazovaný uživateli webovým prohlížečem (Chrome, Firefox, Opera GX, atd.). Data stránek se dají zapisovat různými způsoby(jazyky) např. HTML (Hypertext Markup Language/Hypertextový značkovací jazyk), XML (eXtensible markup Language/Rozšiřitelný Značkovací Jazyk), XHTML (Rozšiřitelný HTML), CSS (Cascading Style Sheet). Webová stránka je zárověň forma prezentace osoby či společnosti na internetu. Obsah a podoba webových stránek je uložena na serveru nebo webhostingu. V dnešní době je to klíčková forma propagace pro firmy a jejich služby.

Struktura HTML dokumentu

Nejdříve musíme určit typ struktury za pomoci <!DOCTYPE ....> (.... - zapisovací jazyk, v tomto případě HTML) Struktura HTML dokumentu začíná "<html>", následuje hlavička "<head>" která obsahuje kódovací stránku a titulek webové stránky, končí "</head>", dále následuje tělo dokumentu "<body>", který obsahuje všechen zobrazovaný obsah stránky, zakončuje se "</body>", celý dokument zakončíme "</html>"

Ukázka:
<!DOCTYPE HTML>
<html>
<head>
kódovací stránka + titul
</head>
<body>
Ukazovaný obsah stránky
</body>
</html>

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

značka P/N význam
<html> P ohraničuje celý html dokument
<meta> N obsahuje různé informace
<title> P titulek
<head> P hlavička dokumentu
<body> P tělo dokumentu
<p> P odstavec
<h1> P hlavní nadpis
html   P   ohraničuje celý html dokument
meta   N
title  P
head   P
body   P
p      P
h1     P

Odkazy

Jak se dělá odkaz

Odkazy mohou vést kamkoliv. Naším úkolem je nasměrovat html kod na správné místo. Potřebujeme na to výhradně atribut "href". Ten zajišťuje přesměrování na potřebné místo. Můžeme napsat odkaz na už existující webové stránky (třeba jako seznam.cz). Atributem "a" určíme to, jaký text bude vybrán jako odkaz. Následuje funkce "href" za kterou napíšeme vybraný odkaz v úvozovkách a nakonec napíšeme svůj vybraný text a ukončíme značkou "a". Můžeme také odkázat na soubory v počítači, jako jsou třeba obrázky, nebo dokonce i další html kody a textové soubory.

Příklady odkazů

Odkaz na portál seznam.cz
Odkaz na konkrétní článek
Odkaz na pokusný dokument ve stejné složce
Odkaz na dlouhý dokument ve stejné složce
Odkaz na dokument 3
Odkaz na dokument 4
Odkaz na webový formulář
Odkaz na wt
Odkaz na Cimrman
Odkaz na webový formulář otevřený v novém okně pomocí window.open()
Odkaz na 1. kapitolu dlouhého dokumentu
Odkaz na 5. kapitolu dlouhého dokumentu
Tento dokument se otevře v novém okně
Tento dokument se otevře v novém okně
Tento obrázek se otevře v okně obrázeček
Tento obrázek se otevře v okně obrázeček
Tento obrázek se otevře v okně obrázeček


Obrázky

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Vivamus luctus egestas leo. Fusce wisi. Fusce suscipit libero eget elit. Integer in sapien. Fusce aliquam vestibulum ipsum. Etiam neque. Maecenas libero. Nullam rhoncus aliquam metus. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Praesent vitae arcu tempor neque lacinia pretium. In enim a arcu imperdiet malesuada. In sem justo, commodo ut, suscipit at, pharetra vitae, orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam neque. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Integer pellentesque quam vel velit. Nam quis nulla. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Nullam at arcu a est sollicitudin euismod. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 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. Morbi scelerisque luctus velit. Integer lacinia. Maecenas aliquet accumsan leo. Cras elementum. Phasellus et lorem id felis nonummy placerat. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. In enim a arcu imperdiet malesuada.