Online kurz tvorby webových stránek pomocí HTML a CSS

Kurz tvorby webových stránek pro úplné začátečníky. Základní rady od profesionála, základy HTML a CSS, popis základních technických skutečností ohledně webových stránek, WWW a Internetu.

Ještě než se pustíte do tvorby webových stránek, je potřeba krátký úvod.

1. Obsah webových stránek se v dnešní době spravuje pomocí redakčních systémů a pokud se spokojíte s šablonou (vzhledem) zdarma, HTML a CSS možná nebudete vůbec potřebovat.
2. Pokud chcete provozovat webové stránky na vyšší úrovni, i s použitím redakčního systému se vám může HTML a CSS hodit.

Webová stránka je soubor uložený na počítači (serveru) přístupném z Internetu. Tento soubor se načítá do prohlížeče webových stránek (Google Chrome, Mozilla Firefox) na počítači uživatele, který si jej vyžádal. Tento soubor s obsahem webové stránky má příponu dle použité technologie .html, .php a další.

Web je vlastně množství takových webových stránek, které jsou propojené hypertextovými odkazy. (Stejně tak je i celý WWW, tedy všechny webové stránky světa propojeny hypertextovými odkazy.) Znamená to, že v jednom souboru je v HTML zapsáno menu (nabídka nějakého webu) a to obsahuje odkazy vedoucí na další soubory (webové stránky) jednoho webu. Stejně tak může nějaká webové stránka odkazovat na úplně jinou stránku někde na Webu (Internetu, WWW), třeba i na soubor uložený na počítači na opačné polokouli naší planety Země.

Každý web (ať už má tisíc stránek nebo třeba jen jednu) se načítá do webových prohlížečů uživatelů, kteří si je vyžádali. Jak to ale udělají?

1. Napíšou odkaz do adresního řádku svého webového prohlížeče, např. http://www.czinfo.org/internet/www/kurz (v takovém případě se prohlížeč uživatele zeptá serveru DNS, co to je to czinfo.org, tedy jakou má IP adresu a podle toho najde vzdálený server, kde jsou webové stránky CZinfo.ORG uloženy a odtud si je také uživatelův webový prohlížeč stáhne
2. Kliknou někde na hypertextový odkaz (na jiné webové stránce, ve výsledcích hledání na Google nebo Seznam.cz) a v tomto případě se děje přesně to samé, jako v případě bodu 1

I když technicky dojde v obou popsaných případech k tomu samému, v prvním případě by bylo velmi nemilé, kdyby uživatel musel místo czinfo.org zadávat nějakou číselnou řadu. Máme tedy systém doménových jmen a systém DNS, který je překládá, aby mohly existovat názvy webových stránek v rámci celého WWW.

Doména je tedy unikátní identifikátor v síti Internet.

Úroveň domén je nejlépe pochopitelná na konkrétním příkladu:

V praxi si tedy pro svou potřeby tvůrce webových stránek registruje doménu 2. řádu u registrátora, která má doménu 1. řádu. V případě českých domén .CZ tedy u NIC.CZ - správce naší národní domény. Jakmile má tvůrce webových stránek doménu 2. řádu, může si na ní vytvářet domény 3. řádu a klidně i 4. řádu atd.

Tvůrce webových stránek si může vybrat doménu prvního řádu (.CZ, .COM, .ORG) a zvolit si doménu 2. řádu (svůj název). Počítejte ale s tím, že většina domén není již dlouho k dispozici. Lidé je používají pro své weby, nebo je mají ve svých portfoliích pro možné spekulace v budoucnu.

Aby mohly být webové stránky dostupné skrze Internet kdykoli, je potřeba, aby počítač, na kterém jsou uloženy, byl neustále zapnutý. Zároveň musí být připojený k rychlému internetu, musí být dostatečně výkonný (a tím pádem i chlazený), správně zabezpečený a musí mít programové vybavení pro provoz webu. Počítači, který splňuje tyto podmínky, budeme nadále říkat webový server.

Protože si ne každý tvůrce chce nebo může pořizovat vlastní webový server, vznikla služba webhosting. Jde vlastně o pronájem prostoru na webovém serveru, kam nahrajete své webové stránky a odkud se budou po zavolání načítat do prohlížečů uživatelů.

Doména a webhosting

Jak bylo řečeno v prvním článku tohoto kurzu, webové stránky jsou hypertextové dokumenty umístěné v síti Internet, které se načítají do prohlížečů čtenářů – uživatelů, kteří na váš web přijdou. Musí tedy někde fyzicky existovat, na disku počítače, který má dostatečný výkon a dostatečně kvalitní připojení k internetu.

Příklad:

http://www.example.cz/soubor1.html

http://www.example.cz/kontakt.html

http = Hyper Text Transfer Protocol
www = World Wide Web - v tomto případě doména třetí úrovně
example = doména druhé úrovně, kterou si může každý registrovat
.cz = doména první úrovně, v tomto případě česká národní doména

Aby web fungoval, je tedy potřeba, aby někde na serveru byly uloženy soubory webových stránek, které se zadáním jejich adresy v internetovém prohlížeči do tohoto prohlížeče načtou.

Webhosting je služba, která zajistí nepřetržitý provoz počítače (serveru), na kterém jsou fyzicky umístěny vaše webové stránky. Vy tedy vytvoříte hypertextové dokumenty a nahrajete je na cizí pevný disk počítače. K nim se přiřadí vaše doménové jméno a pod touto adresou budou dostupné všem lidem disponujícím nějakým zařízením pro prohlížení webových stránek za předpokladu, že jsou připojení k síti Internet. (Počítač s prohlížečem, mobilní telefon s prohlížečem.) Webhosting poskytuje firma za nějakou měsíční cenu (platí se ovšem celkově většinou jednou za rok). Provozovatel webhostingu vám zajistí potřebné technické zázemí, podporu a technologie, které jsou k provozu www stránek potřeba. Jakmile si hosting objednáte a bude k němu přiřazeno vaše doménové jméno, od provozovatele dostanete k dispozici údaje pro připojení na FTP. Jde o protokol, přes který můžete jednotlivé soubory svého webu nahrávat na onen vzdálený pevný disk. Soubory jsou okamžitě přístupné na internetu. Znamená to tedy, že potřebujete FTP klienta. Prohlížeč webu je aplikace používající protokol http://, FTP klient, používá ftp. Vypadá podobně jako průzkumník Windows či nějaký správce souborů, kde máte v jedné části jeden disk a v další zase jiný atd. Seznam FTP klientů najdete v encyklopedii software.

Jak se webové stránky tvoří

Webové stránky se tvoří pomocí značkovacího jazyka HTML (Hyper Text Markup Language), který je tvořen značkami (tagy) pro formátování obsahu webové stránky.

Formát těchto značek, jako je například velikost, barva a další, se ovlivňuje pomocí CSS (kaskádové styly - Cascading Style Sheets). Soubor se značkami CSS se v dnešní době ukládá do externího souboru, který je pak na webovou stránku napojen.

Vytváříme první webovou stránku

Abychom tedy mohli vytvořit první webovou stránku, například tu úvodní stránky svého firemního webu, musíme si připravit 2 soubory. Jeden s HTML a druhý s CSS.

Postačí k tomu poznámkový blok (můžete použít nějaký editor pro toto určený, na Windows například PSpad, na Linuxu Bluefish apod.) a po vytvoření textového souboru s příponou .TXT tuto změníme na .HTML

Do souboru HTML (zkuste mu dát název například index.html) zapíšem první znaky, a to bude hlavička webové stránky.

Hlavička webové stránky

Do hlavičky webové stránky se zapisují věci, které návštěvník a čtenář webu normálně nevidí.

Začíná se deklarací HTML. Pro začátek zkuste prostě <!doctype html> - nic víc není potřeba řešit.

Potom přidejte značku, že se jedná o HTML:

<html>

Následuje začátek hlavičky:

<head>

a konec hlavičky:

</head>

Mezi tyto značky <head> a </head> se vkládá další řada věcí a opět zůstaneme u toho základního, tedy:

<meta charset="UTF-8" />
- určení znakové sady

<meta http-equiv="Content-language" content="cs">
- určení jazyka webové stránky

<title>Online kurz tvorby webových stránek pomocí HTML a CSS</title>
- titulek stránky (zobrazuje se v liště prohlížeče a většinou jako nadpis stránky na stránce s výsledky hledání ve vyhledávačích Google, Seznam atd.)

<meta name="description" content="Naučte se tvořit webové stránky pomocí HTML a CSS snadno a rychle. Toto umění se vám bude hodit bez ohledu na vaší specializaci." />
- popis pro vyhledávače, opět se zobrazí na stránce s výsledky hledání vyhledávačů a ovlivňuje to, jestli hledající uživatel na odkaz klikne

<meta name="keywords" content="web, tvorba, www, html, css" />
- klíčová slova stránky (dnes již málo využitelná, ale ničemu neuškodí je zadávat)

<link rel='stylesheet' href='styl.css' type='text/css' media='all' />
- adresa ke externímu souboru s CSS styly (kdyby byl soubor například ještě ve složce "stylopisy", pak by adresa byla stylopisy/styl.css)

Tělo stránky

Tělo stránky se značí tagem <body> a končí také tagem </body>. Uvnitř je veškerý obsah webu.

Struktura webové stránky

Abychom tedy nějak uzavřeli úplný úvod do tvorby webu, takto vypadá celá stránka:

<!DOCTYPE html>
<html>
<head>
Obsah hlavičky webové stránky
</head>
<body>
Webová stránka
</body>
</html>

Značky HTML - tagy

Jak bylo řečeno, webová stránka se formátuje pomocí tagů HTML a značek kaskádových stylů CSS. Tedy napíšeme nějaký text, ten obalíme značkami HTML a dále naformátujeme pomocí CSS.

Aby to bylo lépe pochopitelné, je nutné říct, že značky HTML mají již svůj prohlížečem čtenáře definovaný formát, tedy barvu, velikost apod.

Pomocí CSS ale toto výchozí nastavení budeme měnit.

Začneme ale základními značkami HTML, všechny se vkládají do těla stránky, tedy mezi tagy <body> a </body>:

h1 až h6 - nadpisy

Webová stránka má 6 úrovní nadpisů. Hlavní nadpis h1 by měl nadpisem každé webové stránky a měl by být unikátní vzhledem k ostatním stránkám na webu.

Struktura nadpisů na každé webové stránce tedy může vypadat například takto:

<h1>O mně a o vás</h1>
  <h2>O mně</h2>
    <h3>Záliby</h3>
    <h3>Práce</h3>
  <h2>O vás</h2>
    <h3>Vaše záliby</h3>
    <h3>Vaše práce</h3>

p - odstavec

Text se dává do odstavců. Odstavec má značku </p>

Ve výchozím nastavení má odstavec nějakou vzdálenost nahoře a dole, tu můžeme upravit v souboru CSS.

V HTML tedy máme:

<p>
Nějaký obsah
</p>

A v CSS (o stylech si povíme za chvíli):

p {margin-top:15px; margin-bottom:10px}

a - hypertextový odkaz

Hypertextové odkazy jsou základem WWW. World Wide Web - celosvětová pavučina internetových webových stránek, může existovat právě díky nim.

Stručně řečeno je hypertextovým odkazem všechno, na co se dá kliknout. Buď jako text, obrázek, nebo prostě cokoli.

Odkaz se zapisuje tagem a, tedy s adresou href takto:

<a href="http://www.example.cz/slozka/soubor.html">Text odkazu na který se kliká</a>

Rozlišujeme dva zápisy adres odkazů:

Zápis s absolutní adresou

To je již zapsaná přesná adresa souboru webové stránky v síti Internet:

<a href="http://www.example.cz/slozka/soubor.html">Text odkazu na který se kliká</a>

Zápis s relativní adresou

Může se používat v rámci jednoho webu na provázání stránek. Soubor s názvem "kontakt.html" umístěný ve složce s názvem "info", bude mít adresu:

<a href="info/kontakt.html">Zde text odkazu na který se kliká</a>

Zvýraznění písma

Přímo v kódu je možné zvýraznit písmo čtyřmi základními způsoby:

<b>Tučné písmo</b>
<strong>Důležitý obsah, většinou se zobrazí jako tučné písmo</strong>
<i>Kurzíva</i>
<em>Důležitý obsah, většinou zobrazený kurízvou</em>

CSS - kaskádové styly

Ještě než se pustíme do zápisu HTML a vytváření skutečné webové stránky, je potřeba říct něco o CSS.

Jak bylo řečeno, kaskádové styly se zapisují do externího souboru a díky napojení v hlavičce stránky pak ovlivňují značky HTML.

Kaskádové se jim říká proto, že platí vždy ten zápis, který je jako poslední, což znamená, že pokud budete mít v externím stylopisu zapsáno, že nadpis h1 má být modrý, ale přímo ke značce html napíšete (což také lze), že má být žlutý, tak bude žlutý.

Jinými slovy, na konkrétním příkladu:

Máte nadpis h1

<h1>Nadpis</h1>

Ve stylopisu je:

h1 {color:blue}

a přímo v souboru je:

<h1 style="color:yellow">Nadpis</h1>

Bude platit, že nadpis bude žlutý, protože v hierarchii je na posledním místě.

Jak vytvořit soubor s kaskádovými styly

Opět stačí použít poznámkový blok a tentokrát změnit příponu na .css

Náš web se tedy skládá z jednoho souboru s příponou .html a druhého souboru s příponou .css - oba jsou ve stejné složce a v hlavičce souboru index.html mám zapsáno, že je ovlivňován souborem styl.css

<link rel='stylesheet' href='styl.css' type='text/css' media='all' />

Zápisy kaskádových stylů

Ať už máte v souboru HTML jakékoli tagy, můžete je ovlivnit zápisem v souboru s CSS.

Ukážeme si to na příkladu odstavce <p>

Máme tedy:

<p>
Zde nějaký obsah.
</p>

A do souboru se styly napíšeme:

p {color:blue; background:yellow; margin: 10px; border: 1px solid green; padding:5px; font-size:15px}

Všechny odstavce na webu tak budou mít modré písmo, zelené pozadí, budou vzdáleny od ostatního obsahu všemi směry 10px, budou mít zelený rámeček nepřerušovanou čarou o šířce 1px, vnitřní obsah od toho rámečku bude vzdálený 5px a písmo v odstavci bude mít velikost 15px.

Třídy a identifikátory

Co když ale chceme toto formátování jen pro jeden jediný odstavec na stránce?

K tomu slouží třídy a identifikátory. Jejich zápis spočívá v tom, že si místo formátování odstavce vytvoříme například vlastní třídu:

muj_format {color:green}

K odstavcům, které mají mít zelené písmo, pak napíšeme:

<p class="muj_format">
Zde zelený obsah.
</p>

Třídu můžeme používat u různých tagů a ovlivňovat tak barvu písma.