ARCHIV

HTML (1)

V prvním díle tohoto seriálu si řekneme, co to vlastně HTML je a co musí správný dokument obsahovat

3.6.2004 15:00 | Pavel Kácha | Články autora | přečteno 77592×

Co to je HTML?

HTML, jak už název napovídá, patří mezi značkovací jazyky, pomocí kterých definujete strukturu dokumentů - v tomto případě webových stránek. To, že jde o značkovací jazyk znamená, že pomocí tohoto jazyka nemůžete dělat žádné výpočty ani grafická kouzla (ale to snad nikoho ani nenapadne... :)). HTML je tu z úplně jiného důvodu, kvůli tvorbě jasně a přesně strukturovaných dokumentů. Možná si myslíte, že vyznačit v dokumentu jeho strukturu není nic obtížného, ale bohužel se na internetu stále objevují dokumenty, které nevyhovují standardům. Někdy to jsou jen drobné chyby, které nevyhovují přísnějším standardům (chybějící popisek obrázku), jindy to jsou ale chyby, které brání správnému zobrazení stránek (chybně ukončená tabulka). Abyste se těchto chyb vyvarovali a využívali HTML v celé jeho síle, je tu tento seriál.

Co musí HTML dokument obsahovat?

Každý dokument musí obsahovat několik základních značek (tagů), které dohromady tvoří kostru stránky vyhovující standardům. Validita stránek by měla být naším hlavním cílem, toho ale nedocílíme bez správné kostry dokumentu.

Jako úplně první informace by se ve zdrojovém kódu naší stránky, měla objevit informace o tom, jakou verzi HTML na svých stránkách používáme - neboli specifikace typu dokumentu (DTD). Tato specifikace byla - a bohužel stále je - dost často tvůrci stránek opomíjena, ale přitom jde o zásadní část každého dokumentu. Podle tohoto prvního řádku se určí, v jakém režimu má pracovat validátor, kterým si budete kontrolovat syntaktickou bezchybnost svých stránek, i prohlížeče návštěvníků vašich stránek. Většina současných prohlížečů pracuje ve dvou módech: standardním (stránka se zobrazuje podle specifikovaného typu dokumentu, aktivuje se při určení typu dokumentu i s URL adresou definice) a nestandardním (stránka se zobrazuje přibližně jako v Netscape 4, aktivuje se pokud není definován typ dokumentu nebo je definována verze starší než HTML 4). K čemu by byla stránka napsaná podle standardu, která by se nezobrazovala tak, jak má?

V tomto seriálu se budeme zabývat poslední verzí HTML 4.01, takže ve svých stránkách se můžete rozhodnout pro jeden z těchto typů dokumentů (vždy si ale zkontrolujte ve validátoru, zda váš dokument odpovídá definovanému standardu):

HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Typy dokumentů strict a transitional se liší jen tolerancí k chybám webmastera a vyžadováním CSS. Stránky psané v HTML 4.01 Transitional jsou mezistupněm mezi starým HTML 3.2 a HTML 4.01 Strict. Ve verzi strict byste si měli zvyknout na veškeré formátování pomocí CSS, pokud si osvojíte tento způsob práce bude pro vás později přechod na XHTML hlavně o změně první řádky určující typ dokumentu.

Typ dokumentu Frameset má tytéž vlastnosti, jako typ Transitional, ale je navíc obohacen o podporu rámů (slouží k definici rozložení rámů na stránce, co je to rám si povíme v dalších dílech).

Po určení typu dokumentu můžeme už přejít k dalším tagům. V HTML se všechny tagy (značky) zapisují do špičatých závorek (<značka>). Značky se dělí na dvě hlavní skupiny

párové
nepárové

Párové značky musí mít svůj začátek, ve kterém jsou vypsány i atributy doplňující vlastnosti prvku, nějaký svůj obsah a samozřejmě konec - typickým příkladem je třeba odstavec . Konec platnosti určitého tagu se označuje pomocí stejného tagu, jako byl začáteční tag, jediný rozdíl je ten, že za otevírací závorku (<) přidáte lomítko (/). Pokud vám na tom není cokoli jasné, nezoufejte, určitě pochopíte na příkladech níže. Nepárové značky naproti tomu nemají žádný obsah, který by ovlivňovaly - nejčastější nepárovou značkou je asi znak nové řádky .

Každá stránka musí být uzavřena do párového tagu <html></html>, který "ohraničuje" celou stránku.

Dalším tagem, na nějž nesmíme zapomenout je opět párový tag označující hlavičku dokumentu, je to tag <head></head>. Sem se zapisují informace o dokumentu (použité kódování atd.), informace pro vyhledávače (klíčová slova atd.) a titulek dokumentu

Kódovat stránky budete nejspíš v kódování iso8859-2, proto napište mezi tagy <head></head> tento řádek

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Pokud byste někdy museli psát stránky pod Windows použijte místo text/html; charset=iso-8859-2 tuto hodnotu text/html; charset=windows-1250

Další důležitou značkou je <title></title>, do které se uzavírá nadpis stránky, který se má zobrazit v titulku okna prohlížeče nebo záložky. Pokud tuto značku nepoužijete, objeví se v titulku adresa URL.

Tímto jsme skončili s nejdůležitějšími prvky v hlavičce dokumentu a můžeme ji proto uzavřít tagem </head> a posunout se v tvorbě dokumentu zase o kus dál, tedy k samotnému tělu stránky. Tělo stránky je ta část, kterou vidíte ve svých prohlížečích jako tabulky, odstavce, seznamy, články atd. Tělo stránky se označuje zcela prozaicky tagem <body></body>, který následuje hned za tagem označujícím konec hlavičky (</head>).

Pokud mezi tagy <body></body> vložíte nějaký text, tak se vám (kromě HTML tagů) zobrazí v prohlížeči. Můžete si to hned vyzkoušet. Pokud byste chtěli vytvořit stránku, kde se bude text dělit na několik odstavců využijete k tomu tag .

To bude pro dnešek vše. Nakonec ještě musím dodat, že v HTML nezáleží na tom, kolik mezer mezi jednotlivými značkami uděláte, zobrazí se vždy pouze jedna (pokud to přímo nepřikážete nebo nepoužijete režim výpisu s přesným počtem mezer). Také bych vás rád upozornil, že se rozhodně vyplatí uzavírat párové tagy, i když se na mnoha místech můžete dočíst, že to není nutné. Ano, není to nutné, ale potom vznikají stránky, které nejsou jasně pochopitelné pro vás ani pro prohlížeče. Takže si sami zvažte, jestli těch pár klepnutí do klávesnice stojí za to předkládat kvalitně napsané stránky, nebo doufat, že prohlížeč pochopí všechno tak, jak má, a nevzniknou vám na stránce nesmysly.

Základ tedy už znáte a můžete si zkusit vytvořit svůj první dokument v jazyku HTML, takže si otevřete svůj oblíbený textový editor a pěkně směle do toho. Své výtvory ukládejte s příponou .html. Jako inspirace vám může posloužit třeba tento výpis:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"; "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">

<title>Moje první stránka</title>

</head>

<body>

<p>Ahoj světe!</p>

<p>Já jsem webová stránka, kterou sis právě napsal.

Moc toho neumím, ale přesto bys mě mohl mít rád - jsem přece TVOJE. :)</p>

Tak už se loučím

</body>

</html>

Verze pro tisk

DISKUZE

Příspívat do diskuze mohou pouze registrovaní uživatelé.

Vyhledávání software

Vyhledávání článků

Rozšířené vyhledávání

Linux News

28.11.2018 23:56 /František Kučera
Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1

12.11.2018 21:28 /Redakce Linuxsoft.cz
22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář

6.11.2018 2:04 /František Kučera
Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

16.7.2018 1:05 /František Kučera
Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář

Více ... Přidat zprávičku

Poslední diskuze

31.7.2023 14:13 / Linda Graham
iPhone Services

30.11.2022 9:32 / Kyle McDermott
Hosting download unavailable

13.12.2018 10:57 / Jan Mareš
Re: zavináč

2.12.2018 23:56 / František Kučera
Sraz

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2025) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze