.:Toccateam:. Clan & Community CS 1.6

Pro tvorbu přes zdrojový kód budeme potřebovat nějaký editor. Postačí nám notepad, který je implementován do každého operačního systému Windows. Ale můžete si stáhnout i jiný.

Doporučuji Vám tyto dva:

Coffee Cup 2010 - shareware
PSPad - v něm tvořím všechny své webové stránky a je freeware, na stažení třeba na http://stahuj.cz

Takže pokud už máte svůj editor, otevřete si ho.

Pokud jste otevřeli notepad, vidíte prázdné pole. Zvolte soubor a dejte "Uložit jako...". Do kolonky názvu souboru napište toto "index.html" (bez uvozovek) a v kolonce Uložit jako typ... zvolte Všechny soubory. Uložte. Nyní si zavřete Váš notepad a otevřete si soubor index.html. Otevřete ho dvakrát, jednou v prohlížeči a podruhé v notepadu (pravým tlačítkem kliknete na soubor, zvolíte Otevřít v programu... a vyberete notepad).

Pokud jste otevřeli PSPad, vidíte základní lištu s pomocnými nástroji. V horní liště v položce Soubor, zvolte Nový a z nabídky vyberte html soubor.
Nyní máte otevřen soubor untitled.html nebo unnamed.html, opět v položce Soubor zvolte Uložit jako..., soubor přejmenujte na index.html a uložte. Nyní si soubor najděte a otevřete jej i v prohlížeči.

Přejdeme dál. Teď si napíšeme náš první kód. Do notepadu či do PSPadu si napište tento kód (tagy pište bez přidané *):

<*html>
<*head>

<*title>První stránka<*/title>

<*/head>
<*body bgcolor="black" text="white">

Ahoj, toto je moje první webová stránka! Tento text je bílý, ale pozadí stránky je černé.

<*/body>
<*/html>

Uložte a klávesou F5 aktualizujte váši stránku v prohlížeči.

Teď si to celé rozebereme.
Vše, co jsme teď napsali jsou značky jazyka HTML, který udává strukturu stránky a některé základní vlastnosti.

HTML značky lze rozdělit na tyto:

TAGY
ATRIBUTY
HODNOTY

TEXT - text viditelný na stránce

Mezi tagy patří vše co je v ostrých závorkách <>. Například tag <*body>.
Mezi atributy patří vše co je součástí tagů, například atributy bgcolor a text. Jsou to jediné dva atributy v celém našem kódu.
Za nimi následuje =''', do uvozovek píšeme hodnotu. Například u atributu bgcolor je hodnota black. Barvy se píší většinou v hexadecimálním vyjádření, lze ale použít i některé základní barvy v angličtině. O hexadecimálním vyjádření si povíme jindy, nyní se soustředíme na náš zdrojový kód.

Tagy můžeme ještě rozdělit na párové a nepárové. Párové jsou ty, které musíme ukončit, jinak by ovlivnily vlastnosti webu. Všechny párové tagy ukončujeme pomocí lomítka za první ostrou závorku. Takže například ukončením tagu <*html> je tag <*/html>. Vše co je mezi těmito dvěma tagy, je součástí webové stránky.

Teď Vám vysvětlím jednotlivé tagy, atributy a jejich hodnoty.

Tag <*html> se užívá na začátku každého HTML dokumentu a prohlížeč ho považuje za začátek stránky, respektivě od tohoto tagu, začíná prohlížeč číst váš zdrojový kód.

Tag <*head> se užívá jako hlavička stránky, zadávají se do ní tzv. meta tagy, o kterých si povíme jindy. Ale píše se do něj také tag <*title>, který nám říká, jaké ponese stránka jméno na horní prohlížečové liště. Pokud tedy máme v kódu "První stránka", pak v prohlížeči uvidíte nahoře v liště "První stránka - Internet Explorer" či "První stránka - Mozzila Firefox" atp. Do tagu <*head> se píše hlavně to, co neuvidíme.

Tag <*body> nám označuje tělo stránky. Právě to, co na stránce vidíme, je většinou napsáno mezi tagy <*body> a <*/body>. Uvnitř tohoto tagu se nacházejí i atributy bgcolor a text s jejich hodnotami. Bgcolor nám udává barvu pozadí stránky a text nám udává barvu textu.