www.SAMURAJ-cz.com 

15.12.2017 Radana a Radan Translate to English by Google     VÍTEJTE V MÉM SVĚTĚ

Články

Základy jazyka HTML

Pátek, 21.07.2006 10:47 | Samuraj - Petr Bouška |
HTML je velice jednoduchý, ale rozhodně ne slabý jazyk. Stačí se naučit pár pravidel a můžeme vytvářet webové stránky. Tyto pravidla se pokusím shrnout v tomto článku. Složitější věcí je volit sémanticky vhodné elementy pro správný popis dokumentu a dobré zvládnutí CSS pro formátování vzhledu.

Co to je HTML

HTML je zkratka pro Hyper Text Markup Languagehypertextový značkovací jazyk.

Na počátku 60-tých let 20-tého století začal Theodor Nelson pracovat na nelineárním spojování dokumentů a přišel s pojmem hypertext. Hypertext je "speciální typ databázového systému, v kterém mohou být objekty spojovány (linkovány) s ostatními. Když vyberete objekt, tak můžete vidět všechny ostatní, které jsou s ním slinkovány".

V roce 1986 vznikl obecný značkovací jazyk SGML - Standard Generalized Markup Language a jako jeho aplikace později vznikl jazyk HTML.

Stručně z historie

1991
první neformální specifikace HTML a textové prohlížeče
1993
návrh HTML 2.0 a první grafický prohlížeč NCSA MOSAIC
1994
založení W3C organizace
1995
oficiální specifikace HTML 2.0 a neoficiální HTML 3.0 (Netscape)
1996
oficiální HTML 3.2, zdarma Internet Explorer 3.0, CSS1
1997
oficiální HTML 4.0, Internet Explorer 4.0, Microsoft DHTML
1998
Internet Explorer 5.0, XML 1.0, CSS2
1999
HTML 4.01
2000
XHTML 1.0
2001
Internet Explorer 6, XHTML 1.1
2002
reformulace XHTML 1.0

Základní zápis HTML kódu

Jazyk HTML je tvořen elementy, což jsou objekty, které říkají něco o svém obsahu. Jméno elementu ohraničené ostrými závorkami < a > označujeme jako tag (značka). Může být párový nebo nepárový (ne v XHTML). Párový elementotevírací tag, např. <p> a uzavírací tag (před jméno elementu je předřazeno lomítko), např. </p>. Příkladem nepárového elementu je například zalomení řádku <br>. Pokud je párový element prázdný (nemá žádný obsah), tak jej můžeme zapsat pomocí jednoho tagu, který na konci doplníme o lomítko, př: <br />.

Každý element může obsahovat určité atributy (parametry, které určují vlastnosti elementu). Atribut se zapisuje do otevíracího tagu vedle jména, ve formátu jméno_atributu="hodnota" (v některých případech se může použít zkrácená verze - pouze jméno atributu), např. <a href="http://www.samuraj-cz.com">..</a>. Hodnota atributu se uzavírá do programátorských uvozovek - " nebo '.

HTML je interpretační jazyk, to znamená, že zdrojový kód se nepřekládá do spustitelného tvaru, ale je prováděn interpreterem (webovým prohlížečem) na klientovi. Výhodou je, že kód je obyčejný textový dokument, který si můžeme prohlédnout a porozumět mu, a je nezávislý na hardwaru i operačním systému.

Dnes se doporučuje používat pouze omezené množství HTML tagů, pro určení obsahu, a formátování provádět pomocí CSS. V HTML 4.01 bylo mnoho tagů odstraněno. Více naleznete v odstavci Oddělení obsahu a formátování.

Pozn.:HTML nezáleží na velikosti použitých znaků v názvech elementů nebo atributů, ovšem v XHTML se musí používat vše malými písmeny, proto je jednoduší i v HTML používat malá písmena.

Typy Doctype a jejich zápis

Začátek dokumentu by měl obsahovat informace o verzi použitého HTML a typu DTD - Document Type Definition. Nejpoužívanější verze jsou HTML 4.01 a XHTML 1.0. Osobně doporučuji využívat pouze verze Strict, ale uvádím zápis i verze se zpětnou kompatibilitou Transitional nebo s podporou rámů Frameset. Podrobněji se o použití Doctypu zmiňuji v odstavci Správná syntaxe – validní kód.

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Struktura dokumentu

HTML kód se standardně ukládá do souboru s příponou htm nebo html. Jak jsem se již zmínil, dokument se skládá z jednotlivých elementů. Tyto elementy mohou být v sobě vnořovány podle určitých pravidel (popsaných ve specifikaci jazyka - DTD). Kořenový element se jmenuje html, ale ještě před ním by se měla nacházet definice DOCTYPE. Kdekoliv uvnitř dokumentu se může nacházet komentář. Uvnitř kořenového elementu se může (a měl by) nacházet pouze element head, který nese základní informace o dokumentu, a element body, kde je vlastní obsah dokumentu.

<!-- toto je komentář; dále je definováno DTD HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- kořenový element dokumentu s určením jazyka-->
<html lang="cs">
<!-- hlavička -->
  <head>
  </head>
<!-- tělo dokumentu -->
  <body>
  </body>
</html>

Elementy, které se při interpretaci dokumentu zobrazí jako jeho obsah, se vkládají do elementu body. Mohou být dvou základních obsahových typů – řádkové (inline) nebo blokové (block; za ním se zalamuje řádek). Elementy se mohou do sebe vnořovat při zachování dvou základních pravidel. Nikdy se nesmí křížit. Do řádkového elementu není možno vnořit element blokový.

Existují však také elementy, které se do výstupu nezobrazují. Některé se mohou nacházet pouze uvnitř elementu head, jako meta, style a link. Některé i uvnitř body, jako script.

Tzv. bíle znaky (znaky, které se nezobrazují), což jsou převážně mezera, tabulátor a konec řádku, se vždy zobrazí jako jedna mezera, nezáleží na tom, kolik za sebou jich následuje. Pozn.:XHTML je řada bílých znaků zakázána.

Elementy HTML

Základní elementy

K základním elementům patří: nadpisy h1h6, odstavec p, obrázek img (má povinný atribut alt), hyperlink (odkaz) a.

Základní formátování textu (v podstatě se, ale nejedná o formátování (ale o určení sémantického významu), neboť to se pomocí HTML nemá provádět) : silný text strong (většinou se zobrazuje tučně) a zvýrazněný text em (emphasized; většinou se zobrazuje kurzívou) – nahradili použití elementů b a i.

Tabulka: table, oblasti thead, tbody, tfoot, řádky tr, buňky th, td, nadpis caption.

Formulář: form, skupina prvků fieldset, vstupní pole input (typu text, checkbox, radio, buton, file, image, hidden, password), textové pole textarea, výběrové pole select s položkami option, tlačítko button, popis label (atribut for určuje příslušnost k jinému elementu podle id).

Seznamy – netříděný ul, tříděný ol, jednotlivé položky li, Seznam definic dl je tvořen dvojicemi - pojem dt a definice dd.

Speciální elementy (logické)

Řádková citace q, bloková citace blockquote, zkratka abbr (s atributem title), akronym acronym, přeformátovaný text pre, zdrojový kód code, definice dfn, příklad samp, dolní index sub, horní index sup, korektury – smazaný text del, vložený text ins.

Sémanticky neutrální elementy

Při použití CSS velice důležité elementy. Řádkový element (in-line) span a blokový element (block) div.

Skripty, linky a meta informace

Pro vkládání skriptů slouží element script s atributem type, který určuje skriptovací jazyk, případně atribut src, který obsahuje odkaz na externí skript. Skripty je vhodné uzavřít do komentářů <!-- -->, aby se zabránilo zpracování u nepodporujících prohlížečů.

Do hlavičky dokumentu můžeme vložit linky link na externí soubory, to se používá převážně pro vložení externího CSS, ikony webu (favicon) nebo alternativního zdroje informací (třeba RSS).

Pomocí elementu meta můžeme vkládat globální informace o dokumentu. Jednou z nejdůležitějších je definice kódování (ta by se měla naházet vždy před elementem title). Dále můžeme vložit klíčová slova, autora stránky, popis dokumentu, atd.

Entity

Některé znaky mají v HTML speciální význam, jako například < a > ohraničují tag. Aby bylo možno tyto znaky zobrazit, máme k dispozici znakové entity. Zápis entity vždy začíná znakem & a končí ;, uvnitř je buď název entity nebo číselný kód (ten začíná znakem #). Nejpoužívanější je třeba &lt; pro <, &gt; pro >, &amp; pro &, &copy; pro ©.

Speciální entitou je nezalamující mezera &nbsp;. Normálně nemůžete zapsat do výstupu více než jednu mezeru v řadě, pomocí nezalamující mezery to jde (ale využívat by se to mělo minimálně). Další vhodné použití je spojení slov, které nechceme, aby se rozdělili na konci řádku (například předložka před slovem).

Poznámka: Nesnažil jsem se zde vyjmenovat všechny elementy HTML, natož je pospat. Elementy jsem rozdělil do pár skupin pro lepší přehlednost, s těmito skupinami určitě nebudou všichni souhlasit.

XHTML

Aby se jazyk HTML více přiblížil popisu obsahu a ne vzhledu, byla vytvořena upravená verze HTML, která se více blíží XML a to XHTML. Hlavním rozdílem oproti HTML je: všechny elementy i atributy se píší malými písmeny, všechny elementy musí být uzavřeny, bylo odstraněno několik tagů pro formátování, není možno používat zkrácené zápisy atributů (jako třeba checked). Ještě se často uvádí, myslím obecná pravidla, že: hodnoty atributů musí být v uvozovkách, tagy se nesmí křížit.

DHTML

Spojením HTML, CSS a JavaScriptu vzniká jazyk popisovaný jako dynamické HTMLDHTML. Za jeho zrodem stojí společnost Microsoft. V podstatě se jedná o to, že díky JavaScriptu můžeme na klientské straně změnit některou vlastnost CSS a tím dosáhnout změnu vzhledu. Hodně se používají např. vlastnosti display a visible, kterými můžeme skrýt objekt.

Závěr

V tomto článku jsem se pokusil stručně nastínit hlavní pravidla psaní HTML dokumentu. Nesnažil jsem se popisovat jednotlivé HTML tagy, neboť na internetu najdete mnoho zdrojů s dobrým popisem. Já bych doporučil:

zobrazeno: 9837krát | Komentáře [2]

Autor:

Související články:

Moderní web

Webové stránky se dají dělat různě, pokud však nebudeme dodržovat současné principy a standardy, tak patrně nebudou příliš oblíbené.

Pokud se Vám článek líbil, tak mne potěšíte, když uložíte odkaz na některý server:

Pokud se chcete vyjádřit k tomuto článku, využijte komentáře níže. Pokud chcete poradit s nějakým problémem či diskutovat na nějaké téma, tak použijte fórum.

Komentáře

  1. [1] honza

    [strong][/strong]je to dobra vec ale hlava mi to nebere:-(,jinak bych to chtel umet;-)

    Úterý, 03.04.2007 14:12 | odpovědět
  2. [2] Bali

    perfektní přehled, akorát u speciálních elementů je chyba, konkrétně u elementu abbr: v závorce je, že se pojí s elementem title, ale není to element ale atribut..

    Čtvrtek, 19.02.2009 15:08 | odpovědět
Přidat komentář

Vložit tag: strong em link

Vložit smajlík: :-) ;-) :-( :-O


Ochrana proti SPAMu, zdejte následující čtyři znaky image code

Nápověda:
  • maximální délka komentáře je 2000 znaků
  • HTML tagy nejsou povoleny (budou odstraněny), použít se mohou pouze speciální tagy (jsou uvedeny nad vstupním polem)
  • nový řádek (ENTER) ukončí odstavec a začne nový
  • pokud odpovídáte na jiný komentář, vložte na začátek odstavce (řádku) číslo komentáře v hranatých závorkách