Black Light Studio - HTML tutoriály 1

Doufám, že jste natěšeni, jak si uděláte první webovou stránku. Tvořit kvalitní web se opravdu naučíte s pomocí dalších našich tutoriálů ! Tento tutoriál vysvětluje základy programování WWW stránky.

Nejdříve ale budete potřebovat nějaký textový editor (zatím vám postačí poznámkový blok) a internetový prohlížeč (ten asi už máte když si tohle prohlížíte)

Následující zdrojové kódy potom jednoduše přes schránku vložíte do textového dokumentu a uložíte s příponou "htm"
(Poznámkový blok > Soubor > Uložit jako.. > Uložit jako typ: Všechny soubory (*.*) > Název souboru: něco.htm > Uložit)

Jinak u každého příkladu je a vždy bude ukázka zdrojového kódu v prohlížeči. Pokud budete chtít vidět další ukázku, tak nejdříve budete muset zavřít předchozí okno! Jinak, v ukázkovém okně si můžete změnit zdrojový kód, poté stisknou aktualizovat a podívat se na výsledek!

Jako první musíte pochopit základní "stavbu" každého HTML dokumentu. HTML dokument má několik důležitých částí, které nyní popíši. Jako první zde uvedu nejjednodušší zdrojový kód a popíši jeho části:

<HTML>
<HEAD>
<TITLE>Titulek stránky</TITLE>
</HEAD>
<BODY> Ahoj světe !!!
</BODY>
</HTML>

Tak tohle byla ukázka zdrojového kódu a nyní vám všechno vysvětlím. To co je uvedeno ve špičatých závorkách < a > jsou příkazy pro prohlížeč. Nazývají se "tagy". Můžou být buď párové nebo nepárové. Špičaté závorky napíšete na české klávesnici kombinací "Alt Gr + <" Párový TAG má začátek a konec (pár - dva). Začíná třeba <HTML> a končí </HTML>. Vnímavější přišli určitě na to, že pokud je tag párový tak se ukončuje lomítkem /. Je to obyčejné lomítko. V ukázce jsou pouze párové tagy. Nepárový tag má pouze jednu část a sice tu první. Nejjednodušší nepárový tag je . Tento tag znamená "ENTER", konec řádku a pokračuje se na dalším řádku. To si ale ukážeme později. Už doufám víte co je párový a nepárový tag. Nyní následuje vysvětlení všech tagů z předchozí ukázky:

<HTML></HTML>	Definuje začátek a konec HTML kódu
`<HEAD></HEAD>`	Definuje hlavičku dokumentu
`<TITLE></TITLE>`	Text, jenž se nachází uvnitř tohoto tagu se zobrazí jako titulek v názvu okna
`<BODY></BODY>`	Tělo dokumentu, cokoliv zde napíšete, zobrazí se v dokumentu - hlavní část

Pokud ukázkový zdrojový kód zkopírujete a uložíte ho jako textový dokument s příponou 'htm' nebo 'html', vytvoříte vůbec váš první dokument. Poklepejte na něj, otevře se vám prohlížeč a zobrazí vaši první HTML stránku!
Nyní si otestujte i nepárový tag 

<HTML>
<HEAD>
<TITLE>Titulek stránky</TITLE>
</HEAD>
<BODY>
Ahoj světe !!!
 Toto je další řádek !!
</BODY>
</HTML>

Pokud tento zdroják opět zkopírujete bude text 'Toto je další řádek !!' opravdu na dalším řádku!

Teď vám ukážu další zajímavost, zkuste tag odstranit a namísto něho stiskněte klávesu enter. Sekce <BODY> by měla vypadat nějak takto: (ostatní sekce ponechte, pouze změňte sekci <BODY>)

<BODY>
Ahoj světe !!!
Toto je další řádek !!
</BODY>

Tak jsme si ji trochu upravili, ale po shlédnutí v prohlížeči zjistíme, že text 'Toto je další řádek !!' NENÍ na dalším řádku! Je to tím, že HTML prohlížeč text "OD ENTRUJE" jen pokud uvidí tag . Další věc se týká mezer. Víc jak dvě mezery (v sekci <BODY>) jsou nahrazeny mezerou jednou. Viz. další ukázka:

<BODY>
Ahoj světe !!! Text posunutý o 10 mezer.
</BODY>

Pokud se na stránku podíváme v prohlížeči, tak tam bude mezi oběma texty pouze jedna mezera. Mezer se dá dosáhnout i jinak ale to vám vysvětlím až příště. Ještě vám napíšu několik tagů ať si můžete do příštího tutor

`<HR>`	Nakreslí horizontální čáru
`<CENTER></CENTER>`	Text uvnitř tohoto párového tagu bude vycentrovaný ( uprostřed )
`<B></B>`	Text uvnitř tohoto tagu bude tučný - bold ( B je také ikonka ve wordu pro tučné písmo )
`<I></I>`	Text bude zobrazen kurzívou - italic
`<U></U>`	Text bude podtržený - underline

No a nakonec ukážu jednu ukázku s použitím všech dnešních vědomostí!

<HTML>
<HEAD>
<TITLE>Pěkná stránka</TITLE>
</HEAD>

<BODY>
<HR>
<CENTER>Dobrá stránka</CENTER>
<HR>
 
 

Tento text je zobrazen kurzívou
 
Tento je tučný
 
A tento podtržený
</BODY>

</HTML>

Schválně jsem "nabalil" na sebe tři párové tagy, ať vidíte, jak to funguje.

Příště vám vysvětlím jak formátovat text, nastavovat barvy, typy a velikosti písma, jak dát na pozadí obrázek, jak vložit obrázek do dokumentu .....

Na poslední chvíli: Pokud začínáte párové tagy v tomto pořadí: , tak je musíte uzavřít v pořadí: a NIKOLIV TAKTO: . Udržujte si ve zdrojovém kódu pořádek !! :))