HTML Tagy

V této lekci se seznámíme s pojmy jako jsou "tag", "atribut" nebo "element". Naučíme se také základní pravidla psaní HTML.

Jazyk HTML je charakterizován množinou značek (tagů) a jejich atributů. Mezi tagy se uzavírají části textu a tím se určuje význam (sémantika) obsaženého textu. Názvy jednotlivých tagů se uzavírají mezi úhlové závorky (například: <p>).

Jak psát úhlové závorky?

Často se setkávám s tím, že lidé nevědí, jak uhlové závorky psát. Někteří je zase píší zbytečně složitě a to tak, že přepínají mezi českou a anglickou klávesnící. To je však zcela zbytečné. Úhlové závorky se píší totiž velmi jednoduše: pomocí kombinace pravý Alt + 2 klávesy přímo nad ním - jedna pro levou a druhá pro pravou.

Tagy

Tagy jsou obvykle párové. To znamená, že mají otevírací tag a také uzavírací tag. Uzavírací tag je téměř shodný se značkou otevírací, jen má před názvem lomítko (/). Zde je příklad párového tagu:


<p>Text odstavce...</p>

Některé značky jsou však nepárové – nemají žádný obsah a nepoužívají uzavírací značku. Příklad pro vykreslení vodorovné čáry:


<hr>

Atributy

Tagy mohou obsahovat také atributy. Ty popisují jejich vlastnosti nebo nesou jinou informaci. Tyto atributy se zapisují do otevíracího tagu. Příkladem je odkaz (tag <a>), jehož atribut href určuje kam se uživatel po kliknutí na odkaz dostane (v tomto příkladu na stránku http://www.google.cz):


<a href="http://www.google.cz">text odkazu</a>

Element

Část dokumentu tvořená otevírací značkou, nějakým obsahem a odpovídající ukončovací značkou tvoří tzv. element (prvek) dokumentu. Následující obrázek by to měl objasnit:

Pravidla psaní HTML

Tak jako každý jazyk i HTML má svá pravidla a ty je velmi důležité dodržovat.

Malými nebo velkými písmeny?

Přestože většina prohlížečů zobrazí Váš kód správně bez ohledu na to jestli jej píšete malými nebo velkými písmeny, je lepší psát kódy malými písmeny.

Vnořené elementy

HTML element může obsahovat další vnořené elementy. Žadné se však nesmí křížit. Zde je ukázka velmi časté chyby:


<p>HTML elemnty se <strong>nesmí křížit!</p></strong>

Zde je naopak spravný postup:


<p>HTML elemnty se <strong>nesmí křížit!</strong></p>

Struktura HTML dokumentu

Dokument v jazyce HTML má předepsanou strukturu:

Deklarace DTD – HTML tag <!doctype> deklaruje typ HTML dokumentu. Tato deklarace musí být uvedena v dokumentu jako první. Píše se tedy ještě před tag <html>. Dekarace informuje prohlížeč o tom, jaká verze HTML nebo XHTML je pro dokument použita.
Kořenový element – element <html> reprezentuje celý dokument.
Hlavička elementu – hlavička <head> obsahuje metadata, která se vztahují k celému dokumentu. Definují např. název dokumentu, jazyk, znakovou sadu, kódování, klíčová slova, popis, použitý styl zobrazení atd.
Tělo dokumentu – vyznačuje se párovým tagem <body> obsahuje informace, které budou zobrazeny v prohlížeči.

Příklad zdrojového kódu:

Zde je příklad zdrojového kódu:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Titulek stránky</title>

</head>

<body>

<h1>Nadpis stránky</h1>

<p>Toto je moje první webová stránka</p>

</body>

</html>

ZDE si můžete zobrazit náhled příkladu.

<< Předchozí lekce

Další lekce >>