X Běžně používané HTML značky, které musí znát začátečník

autor:
Tweet
Share
Share
Pin

Jestliže se chcete stát specialistou na vývoj uživatelského rozhraní, setkáte se s radou, že je klíčové naučit se HTML. Hypertext Markup Language, zkráceně HTML, je fundamentem pro drtivou většinu webových stránek.

HTML zahrnuje rozmanité prvky, jako jsou značky, atributy a elementy. My se zaměříme na značky HTML. Značky HTML slouží k tomu, abychom internetovým prohlížečům sdělili, jak mají strukturovat obsah, jako jsou nadpisy, podnadpisy, odstavce, obrázky a další. HTML značky tedy fungují jako klíčová slova, která specifikují, jakým způsobem bude prohlížeč zobrazovat nebo formátovat daný obsah.

Servery zpracovávají HTML značky postupně shora dolů. Neexistuje žádné omezení ohledně množství HTML značek, které webová stránka může obsahovat.

  • Všechny HTML značky jsou umístěny mezi znaky < a >.
  • Každá HTML značka plní specifickou funkci.
  • Většina HTML značek se skládá z otevírací značky <tag> a uzavírací značky </tag>.

Značky HTML vs. Elementy HTML vs. Atributy HTML

Mnoho lidí používá termíny HTML značky a elementy zaměnitelně. Jsou však skutečně totožné? Z technického hlediska se elementy HTML a značky HTML liší.

HTML značky slouží k definování HTML elementů. Za tímto účelem je obsah vložen mezi počáteční a koncový název značky, který koresponduje s obsahem dané značky, s kterou pracujeme.

Následuje příklad HTML elementu:

<p> Toto je odstavec </p>

<p> je příkladem HTML značky.

Atributy HTML poskytují doplňující informace o HTML elementech v dokumentu. Atributy jsou vždy umístěny v rámci HTML elementů.

Následuje příklad HTML atributu:

<button id="OdeslatObjednavku" class="btn">Objednat</button>

HTML značky, které by měl znát každý

HTML, jakožto značkovací jazyk, se vyvíjel od svého představení Timem Berners-Lee v roce 1993. První verze HTML obsahovala 18 značek. S každou novou verzí HTML přibývají další značky; poslední aktualizací bylo HTML5 v roce 2014.

Srovnání HTML a HTML5 odhaluje, že HTML5 přináší sémantické značky, jako jsou <article>, <header> a <footer>, které jednoznačně popisují obsah. V současnosti existuje více než 100 HTML značek. Následují některé z nejpoužívanějších značek, které byste měli znát:

<!DOCTYPE>

DOCTYPE není technicky vzato značka, nýbrž deklarace, která prohlížeči sděluje, jaký typ souboru se má načíst. Tato značka informuje prohlížeč o typu HTML, který bude načten.

V HTML5 můžete svůj soubor deklarovat takto:

<!DOCTYPE html>

Nebo takto:

<!doctype html>

Poznámka: Tato deklarace nemá uzavírací značku a nerozlišuje mezi velkými a malými písmeny.

<html> </html>

Značka <html> … </html> následuje po značce DOCTYPE. Tato značka označuje dokument jako webovou stránku; všechny další elementy jsou v ní vnořeny. Značka <html> definuje začátek a konec HTML dokumentu.

Značka <html> se zapisuje takto:

<html>Obsah</html>

<head> </head>

Hlavička HTML dokumentu je definována značkou <head>. Tato značka je umístěna uvnitř značky <html> a poskytuje základní informace o webové stránce.

Značka <head> obsahuje další značky, které specifikují detaily webové stránky, jako je název a autor. Obsah této značky se na webové stránce nezobrazuje.

Syntaxe značky <head> je:

<head> …….. </head>

<title> </title>

Značka <title> určuje název webové stránky. Tato značka je umístěna uvnitř značky <head>. Značka <title> se zobrazuje v záhlaví nebo na kartě okna prohlížeče, ale nikoli na samotné webové stránce.

Syntaxe značky <title> je:

<title>HTML Značky pro Začátečníky</title>

Pokud je umístěna uvnitř značky <head>, vypadá takto:

<head>
    <title>HTML Značky pro Začátečníky</title>
</head>

<body> </body>

Značka <body> zobrazuje veškerý viditelný obsah na webové stránce. Obrázky, odkazy, text, videa a další lze nalézt uvnitř značek <body> a </body>.

Mezi další značky, které lze nalézt v těle dokumentu, patří značka <p> pro odstavec, značka <a> pro odkazy, značka <strong> pro tučný text a značka <ol> pro uspořádaný seznam, abychom jmenovali alespoň některé.

Syntaxe značky <body> je:

<body> Obsah </body>

Značky <h1> až <h6>

V HTML dokumentu může být až 6 značek nadpisů. Každá z těchto značek je označena číslem od 1 do 6, například <h1>, <h2>, <h3>, <h4>, <h5> a <h6>.

<h1> je největší značka nadpisu, zatímco <h6> je nejmenší.

V HTML dokumentu mohou být značky nadpisů reprezentovány následovně:

<h1>Nadpis 1</h1>
<h2>Nadpis 2</h2>
<h3>Nadpis 3</h3>
<h4>Nadpis 4</h4>
<h5>Nadpis 5</h5>
<h6>Nadpis 6</h6>

Značky <h1> až <h6> jsou uzavřeny v rámci značky <body>.

Například značka <h1> bude uzavřena takto:

<body>
    <h1> Toto je nadpis 1 </h1>
</body>

<p> </p>

Značka <p>, neboli značka odstavce, se používá pro strukturování obsahu do odstavců. Stisknutí klávesy „enter“ v HTML dokumentu v editoru kódu nevytvoří nový odstavec.

Pokud potřebujete více odstavců, musíte v dokumentu použít několik značek <p>. Značky odstavce by měly být umístěny uvnitř značky <body>.

Syntaxe značky odstavce je:

<p> ….nějaký obsah zde….</p>

Pokud chcete mít například čtyři odstavce, váš kód bude vypadat takto:

<body>
    <p>Obsah prvního odstavce.</p>
    <p>Obsah druhého odstavce.</p>
    <p>Obsah čtvrtého odstavce.</p>
</body>

<b> </b>

Značka <b> </b>, neboli tučné písmo, zformátuje libovolný obsah mezi otevírací značkou <b> a uzavírací značkou </b> tučným písmem.

Značka tučného písma může být použita v rámci nadpisu, například <h1>, nebo uvnitř značky odstavce.

Následují příklady použití značky tučného písma:

<b>Tučná značka</b>

Fráze ‚Tučná značka‘ se zobrazí tučně.

<h1> Klid, <b>Páté vydání</b>, vydání vítězů </h1>

Páté vydání se zobrazí tučně.

<i> </i>

Kurzíva, označená jako <i>, převede text uvnitř značek do kurzívy.

Například, pokud máme:

<i>Toto je kurzíva</i>

Slova „Toto je kurzíva“ se zobrazí kurzívou.

<u> </u>

Značka podtržení, <u>, se používá, když chcete podtrhnout konkrétní část textu v HTML dokumentu.

Například, pokud máme:

<u>podtrhněte tato slova</u>

Fráze mezi značkami bude podtržená.

<center> </center>

Značka středu, <center>, se používá k vycentrování obsahu v HTML dokumentu.

Pokud máme například značku <h2> zapsanou jako:

<h2>Centrování obsahu v HTML</h2>

, můžeme ji vycentrovat následujícím způsobem:

<center>
    <h2>Centrování obsahu v HTML</h2>
</center>

<span> </span>

Značka Span, <span>, je obecný kontejner, který nemá výchozí styl. Pomocí značky span můžete seskupit texty, které chcete upravit.

Značku span můžete umístit i do jiných značek, jako jsou nadpisy a odstavce:

<h2>Učte se HTML <span>od expertů</span> a buďte připraveni na trh</h2>

<p>Učte se HTML <span>od expertů</span> a buďte připraveni na trh</p>

<div> </div>

Značka div, zkráceně pro division (rozdělení), je značka, která umožňuje seskupit různé značky v HTML dokumentu.

Značka div může mít atribut ‘class’ pro přidání externího stylu pomocí CSS.

Takto vypadá div obsahující značky <h1>, <h2> a odstavce:

<div>
    <h1>Učte se HTML</h1>
    <h2>HTML Značky</h2>
    <p>HTML je značkovací jazyk………</p>
</div>

<em> </em>

Značka důrazu, <em>, se používá ke zdůraznění určitých slov v HTML dokumentu.

Obsah mezi značkami <em> se zobrazí kurzívou.

Zdůrazněný obsah uvnitř odstavce v editoru kódu bude vypadat takto:

<p>Schůze začne v <em>08:00</em>, prosím, buďte dochvilní</p>

<sup> </sup>

Značka , neboli horní index, umožňuje, aby byl uzavřený text zobrazen nad ostatními. Dokonalým příkladem je situace, kdy chcete umocnit číslo X a matematicky ho vyjádřit jako X2.

Syntaxe pro značku uvnitř značky odstavce bude:

<H1>Harveys <sup>TM </sup> Company Limited </H1>

<sub> </sub>

Značka dolního indexu, neboli <sub>, je opakem značky horního indexu. Obsah uzavřený ve značce <sub> se zobrazí pod normálním řádkem textu. Typickým příkladem je zápis chemického vzorce vody jako H2O.

Syntaxe značky dolního indexu bude:

Nezapomeňte, že H <sub>2</sub>0 je chemický vzorec vody.

<br/>

<br/> je samo-uzavírací značka, která znamená zalomení řádku. Veškerý obsah po značce <br/> bude začínat na novém řádku.

Syntaxe pro značku <br/> v odstavci bude:

<p>HTML je zkratka pro Hypertext Markup Language <br>
Probíhá debata o tom, zda se jedná o programovací jazyk, či nikoli. <br>
Nicméně, nemůžeme zlehčovat jeho význam <br>
HTML se dnes používá na více než 95 % webových stránek</p>

<ol> </ol> a <li> </li>

Značka uspořádaného seznamu, <ol>, musí být použita spolu s jinou značkou, například <li>.

Tyto dvě se mohou v editoru kódu objevit takto:

<ol>
    <li>Asie</li>
    <li>Afrika</li>
    <li>Evropa</li>
</ol>

Po vykreslení v prohlížeči se obsah zobrazí očíslovaně.

<img src=””/>

Možná budete chtít přidat obrázek pro vizuální atraktivitu nebo logo. V takovém případě se hodí samouzavírací značka obrázku <img src=””/>.

Syntaxe značky obrázku bude:

<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>

Obsah v uvozovkách představuje URL adresu zdroje.

Závěrem

Existuje více než 100 HTML značek, ale výše uvedené jsou ty, které byste jako začátečník měli znát. HTML je podporováno ve většině editorů kódu, takže si můžete být jisti, že při učení nikdy neuděláte chybu.