Všechny návody

Základní HTML tagy

Nebyli jste ve škole a chcete dohnat to, co vaši spolužáci během hodiny informatiky probrali? Pak je tento článek přesně pro vás. Podíváme se na základní HTML tagy a ukážeme si jak je použít.

Pomocí HTML tagů vytváříme obsah webových stránek. Každý tag je specifický svým defaultním (základním) stylem a tudíž se liší i jejich použití. Většina tagů je tzv. párových, to znamená, že celý zápis tvoří 2 závorky, ty nepárové potom pouze 1 závorka (ukázka zápisu níže). Vybrali jsme pro vás 13 tagů, které budou tvořit základ vašeho webu.

Zápis

<p> Navzdory všeobecnému přesvědčení Lorem Ipsum není náhodný text. Jeho původ má kořeny v klasické latinské literatuře z roku 45 před Kristem, což znamená, že je více jak 2000 let staré. </p>

<img src="picture.jpg" alt="example">

Přehled tagů

Párové

  • <html> - obaluje celé HTML webu, a tak se styl, který mu nadefinujeme projeví všude na webové stránce
  • <div> - má předefinované styly margin (vnější mezera), line break a je vhodný k vyvtoření bloku, do kterého vložíme text či jiný obsah
  • <p> - paragraph je určený pro vložení textu, jelikož má defaultní hodnoty margin
  • <h1> - jako h1 - h6 označujeme nadpisy, ty pak mají přednastavenou hodnotu font-size (velikost písma) a font-weight (tloušťka písma)
  • <ul> - uvozuje nečíslovaný seznam odrážek
  • <ol> - uvozuje číslovaný seznam odrážek a to buď pomocí písmen nebo čísel
  • <li> - tvoří jednotlivé položky seznamu odrážek
  • <a> - vytvoří odkaz, který vás přenese na vámi definovanou stránku, nebytný atribut je href=" ", kam do do úvozovek vložíte vámi vybranou adresu, celý zápis by pak mohl vypadat třeba takto: <a href="http://codebook.gym-karvina.cz/"></a>
  • <span> - je tag hojně využívaný to proto, že nemá předdefinované žádné styly, hodí se proto například tehdy, když chcete v bloku textu změnit barvu 1 slova
  • <header> - používáme jako container na začátku stránky, vkládáme do něj nadpis, obrázek nebo logo
  • <footer> - je vhodné použít na konci HTML kódu, bývá zde uveden autor webu, kontakt, či odkazy na sociální sítě

Nepárové

  • <img> - definuje obrázek vložený na web, podobně jako u <a> má nezbytné atributy, které musí být uvedeny a to src=" " a atl=" ", do src vložíme odkaz (adresu) na obrázek a atl udává název obrázku
  • <br> - slouží k zalomení na konci řádku, v HTML se zapisuje <br> a v XHTML jako <br /> (funkce je totožná)

Abyste se vyvarovali toho, že vám styl jednoho tagu bude zasahovat do druhého, používejte vždy specifické pojmenování class=" ". Více o problematice pojmenovávání v článku Jak pojmenovávat třídy v CSS.

Použití tagů