Základy HTML

Tagy = značky - Zobrazení zdroje - Nultý příklad - 1. příklad, struktura - Párové tagy - 2. příklad, formátování - 3. příklad, pozadí a odkazy - Obrázky, čáry, zarovnání - Další studium

Tento text pouze naznačuje základy HTML. K dispozici je podrobná reference HTML s přehledem tagů. Pokud používáte nějaký editor, nemusíte se o HTML starat. Ale jen do chvíle, než nastanou problémy.

V příkladech používám barevné označení nových tagů, které se ovšem nikde jinde nepoužívá (pouze didaktický nástroj).

Tagy = značky

HTML soubor je obyčejný text obalený značkami, které se nazývají tagy.

Tagy určují, jak bude text vypadat, tedy jakou bude mít formu.
Všechny tagy jsou uzavřeny v <ostrých závorkách>.

Co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky: <tag>text

Zobrazení zdroje

Když si chcete zdrojový kód prohlédnout nebo upravit, zadejte z menu příkaz Zobrazit / zdroj. Otevře se textový editor (nejčastěji Notepad). Zkuste si to, třeba teď hned. (V anglických prohlížečích je to "View source".)

Zobrazení zdroje v Internet Exploreru

Zdroj zobrazený v texťáku

Přepisováním zdroje se mění stránka.

Musíte ale mít tu stránku u sebe na disku.

Pokud nevíte, jak na disku vytvořit stránku, přečtěte si postup pro začátečníky.

Nultý příklad

Kus zdroje

<b>Tučný text</b>, <i>text kurzívou</i> nebo <big>trochu větší text</big>.

se zobrazí takto: Tučný text, text kurzívou nebo trochu větší text. Hezké, ne?

Tip: ostré závorky se na české klávesnici dělají pomocí pravého altu (stejně jako zavináč a celá řada dalších klikyháků), zkuste si to.

První příklad -- struktura

<html> <head> <title>Má první stránka</title> </head> <body> Moje první html stránka. A nějaké další texty. </body> </html>

Tento příklad si můžete zobrazit v prohlížeči. Co znamenají jednotlivé tagy:

<html>: začíná dokument
</html>: končí dokument
<head> a </head>: začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například
<title> a </title>,: vymezující název dokumentu (může se lišit od jména souboru)
<body>: je tag, který začíná vlastní tělo dokumentu. Co je mezi <body> a </body>, se bude zobrazovat.

Tímto příkladem jsem popsal základní strukturu dokumentu. Výše uvedené tagy by měl obsahovat každý html soubor.

Párové tagy

Jak je zřejmé z příkladu, vyskytují se tagy ve dvojicích <něco> a </něco>, kde ten první tag něco začíná a druhý něco končí. Lomítko prostě znamená, že jde o uzavírací tag. Například <head> je začátek hlavičky a </head> je její konec. Kromě takto párových tagů se vyskytují ještě tagy nepárové, které uzavírací tag nemají, ty ale nejsou časté (například obrázky, o tom později).

Druhý příklad - formátování

<html> <head> <title>Má druhá stránka</title> </head> <body> <h1>Nadpis</h1> <p>Odstavec s <b>tučným textem</b>, s <i>kurzivou</i>. <font color="red">Červený text.</font></p> <h2>Nadpis druhé úrovně</h2> <p>Odstavec s <i><b>tučnou kurzivou. </b></i><br> Text po zalomení řádku patří do téhož odstavce.</p> </body> </html>

Také tento příklad si můžete zobrazit v prohlížeči. Jistě je vidět struktura, která je společná s prvním příkladem. Vyskytují se tu ale nové tagy:

<h1>, </h1>: vymezení nadpisu první úrovně.
<h2>, </h2>: nadpis druhé úrovně (mezinadpis, nadpis kapitoly). Dá se použít až šest úrovní nadpisů (tedy až <h6>). Vykreslují se různě velké podle důležitosti.
<p>, </p>: vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru.
<b>, </b>: text mezi těmito tagy bude tučný.
<i>, </i>: kurzíva
<font color="red">, </font>: dvojice tagů vymezující červené písmo. První příklad tagu, který má "atribut". Atributem je "color" a má hodnotu "red" (angl. červená). V praxi má většina tagů nějaký atribut, zatím jsem se tomu vyhýbal. Tag FONT může mít mnoho jiných atributů. (Ještě musím zmínit, že tento tag FONT je považován za zastaralý a jeho používání se nedoporučuje.)
<br>: zalomení řádky, takzvaný měkký enter. Text po tomto tagu bude vždy začínat na novém řádku, ale není to nový odstavec. Pozor, tento tag je nepárový, to znamená, že žádné </br> neexistuje!

Nyní už umíte všechny tagy nezbytné pro práci s textem.

Třetí příklad - pozadí a odkazy

V tomto příkladu se pokusím nastínit dvě nesouvisející věci, už poněkud těžší

<html> <head> <title>Třetí příklad</title> </head>

<body bgcolor="green" text="yellow"> <h1>Pozadí a odkazy</h1> <p>Obyčejný text.</p> <p>Odkaz na <a href="http://www.seznam.cz">Seznam</a>. </p> <p><a href="priklad2.htm">Odkaz na příklad 2.</a></p> </body> </html>

Zobrazte si příklad v prohlížeči a zkuste funkčnost odkazů. Máme tady nový tag "a" a nějaké další atributy.

<a href="adresa">text odkazu </a>: text (nebo obrázek) mezi těmito dvěma tagy se zobrazí jako text odkazu ("a" jako angl. "anchor" = odkaz). Po kliknutí na něj se prohlížeč přepne na adresu, která je zadaná atributem HREF.
href: atribut tagu "a" se rovná cestě k odkazovanému souboru. Používá se zde buď relativní, nebo absolutní adresa.
absolutní adresa: používá se ve formě http://www.atakdále.cz. V příkladu je takto použita adresa Seznamu.
relativní cesta: pokud se chci odkázat na jiný svůj soubor, je zbytečné vypisovat tam to http:// a celou cestu. Nejlepší je, když je odkazovaný soubor ve stejném adresáři jako ten aktuální. Pak se na něj dá ukázat relativně. Stačí zapsat jenom jméno souboru a prohlížeč to pochopí. (V příkladu je takto odkázaný druhý soubor priklad2.htm.) Jestliže je ten cílový soubor v jiném blízkém adresáři, stačí napsat href="adresář/soubor.htm". Pro nadřazený adresář se používají konvenční dvě tečky. Odkazy podrobněji rozebírám jinde.
<body bgcolor="green" text="yellow">: způsob, jak stanovit barvy celého těla dokumentu.
bgcolor: atribut tagu <body>, který určuje barvu pozadí celého dokumentu.
text: atribut tagu <body>, který určuje základní barvu písma celého dokumentu.
background: také atribut tagu <body>. V tomto příkladě se nevyskytuje. Umožňuje dát do pozadí obrázek, který se bude pravidelně opakovat. Obrázek se může také adresovat absolutně nebo relativně, například <body background="../pozadi.jpg" >, nebo absolutně. Více o pozadí v samostatném textu.

Obecná syntaxe

HTML má několik málo zásad, které je dobré zmínit.

Nezáleží na velikosti písem, <body> je totéž co <BODY>
V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština.
Tagy, které prohlížeč nezná, jako by nebyly.
Na začátku tagu nesmí být mezera, třeba < br> je špatně.
Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera.
Konec řádku ve zdroji se chápe jako mezera.
Jména atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř nejsou mezery.
Poznámka se do zdroje vkládá mezi značky

Obrázky, čáry, zarovnání

Obrázek se do dokumentu vloží nepárovým tagem

<img src="obrázek.gif">

Src (jako source = zdroj) se opět může zadávat relativně nebo absolutně. Napřed je třeba mít obrázek připravený jako soubor. Aby se obrázek zobrazil ve všech prohlížečích, musí to být soubor typu gif nebo jpg. Tag <img> má spoustu dalších atributů, které nyní opomíjím, podrobně vše v kapitole o obrázcích.

Horizontální čára se dá vložit tagem <hr>. Má to nějaké atributy, které nastavují šířku, zarovnání a barvu.

Většina objektů (odstavce, tabulky, obrázky) na stránce se může zarovnat vlevo, na střed nebo vpravo. Dělá se to obecným atributem align, který má hodnoty left, center nebo right. Například tento odstavec je deklarován zápisem
<p align="center" >
a je zarovnaný na střed.

Další studium

Napsal jsem přehled HTML tagů, což je vlastně vcelku obsáhlá reference jazyka. Až budete tápat nad nějakým tagem, tak tam mrkněte.

Další: Publikování hotových souborů. Předchozí: Jak udělat stánky
Pomůcka: Přehled HTML
Vizte též: Obrázky, Odkazy, Záložky, Tabulky, Základní definice rámů, CSS styly, Vše o pozadí

Píše Yuhů
dusan@pc-slany.cz

O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage JavaScript

Hledání

Rozšířené

Jak psát web: http://dusan.pc-slany.cz/internet/

Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz

Poslední aktualizace 23.06.2002